.vs-studio { --vs-surface:#171d1e; --vs-raised:#1d2525; --vs-editor:#111718; --vs-border:#34413e; --vs-muted:#9cabaa; --vs-text:#e4ebe5; --vs-accent:#c4d7ad; --vs-danger:#e1a299; color:var(--vs-text); width:100%; max-width:1560px; margin:0 auto; padding:30px 38px 70px; box-sizing:border-box; font:14px/1.6 "Segoe UI","Microsoft YaHei",sans-serif; }
.vs-studio *, .vs-studio *::before, .vs-studio *::after { box-sizing:border-box; }
.vs-studio [hidden] { display:none!important; }
.vs-studio h1,.vs-studio h2,.vs-studio h3,.vs-studio p { margin:0; }
.vs-studio h1 { font-size:27px; line-height:1.5; font-weight:550; letter-spacing:.2px; }
.vs-studio h2 { font-size:15px; font-weight:600; }
.vs-studio h3 { font-size:15px; font-weight:500; }
.vs-studio button,.vs-studio .button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:36px; padding:7px 13px; border:1px solid transparent; border-radius:5px; background:var(--vs-accent); color:#20291e; font:500 13px/1.45 "Segoe UI","Microsoft YaHei",sans-serif; cursor:pointer; text-decoration:none; white-space:nowrap; }
.vs-studio button:hover,.vs-studio .button:hover { background:#d6e5c3; }
.vs-studio button.ghost,.vs-studio .button.ghost { color:#c8d3cb; background:transparent; border-color:#465650; }
.vs-studio button.ghost:hover,.vs-studio .button.ghost:hover { background:#2a362e; border-color:#879d7b; }
.vs-studio button:disabled { opacity:.45; cursor:not-allowed; }
.vs-studio button:focus-visible,.vs-studio a:focus-visible,.vs-studio summary:focus-visible { outline:2px solid var(--vs-accent); outline-offset:3px; }
.vs-studio input,.vs-studio select,.vs-studio textarea { width:100%; min-width:0; border:1px solid #41514b; border-radius:5px; background:var(--vs-editor); color:var(--vs-text); font:inherit; }
.vs-studio input,.vs-studio select { min-height:37px; padding:6px 10px; }
.vs-studio textarea { display:block; padding:13px 15px; font-size:14px; line-height:1.85; resize:vertical; }
.vs-studio input:focus,.vs-studio select:focus,.vs-studio textarea:focus { outline:none; border-color:#a7bd96; box-shadow:0 0 0 2px #b9d1a314; }
.vs-studio input::placeholder,.vs-studio textarea::placeholder { color:#758782; }
.vs-studio label { display:flex; flex-direction:column; gap:7px; min-width:0; font-size:12px; color:#becac2; }
.vs-studio input[type=checkbox] { width:15px; min-width:15px; height:15px; min-height:15px; padding:0; margin:0; accent-color:var(--vs-accent); }
.vs-studio .vs-check { display:inline-flex; flex-direction:row; align-items:center; gap:8px; font-size:12px; cursor:pointer; }
.vs-studio .vs-muted { color:var(--vs-muted); font-size:12px; }
.vs-studio .vs-note { color:var(--vs-muted); font-size:12px; line-height:1.75; overflow-wrap:anywhere; }
.vs-studio .vs-danger { color:var(--vs-danger)!important; }
.vs-header { display:flex; align-items:center; justify-content:space-between; gap:22px; margin-bottom:24px; }
.vs-eyebrow { font-size:10px; letter-spacing:2.1px; color:#a7bb9d; margin-bottom:6px!important; }
.vs-subtitle { margin-top:7px!important; font-size:13px; color:var(--vs-muted); }
.vs-header>button { align-self:flex-start; margin-top:15px; }
.vs-dot { width:6px; height:6px; border-radius:50%; background:#87948d; }
.vs-dot.is-ready { background:#b9d3a2; box-shadow:0 0 0 3px #b9d3a212; }
.vs-panel { min-width:0; background:var(--vs-surface); border:1px solid var(--vs-border); border-radius:8px; }
.vs-config { padding:20px; margin-bottom:22px; }
.vs-config-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:14px 0; }
.vs-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.vs-config .vs-note { margin-top:10px; }
.vs-section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.vs-kicker { color:#7c9288; font-size:10px; letter-spacing:1px; }
.vs-topline { display:flex; align-items:center; justify-content:space-between; gap:15px; border-bottom:1px solid var(--vs-border); }
.vs-tabs { display:flex; gap:24px; }
.vs-studio .vs-tabs button { min-height:47px; padding:9px 2px 13px; background:transparent; color:var(--vs-muted); border:0; border-bottom:2px solid transparent; border-radius:0; font-size:15px; font-weight:500; }
.vs-studio .vs-tabs button[aria-selected=true] { color:#dceacd; border-bottom-color:var(--vs-accent); }
.vs-studio .vs-tabs button:hover { color:var(--vs-text); background:transparent; }
.vs-save-info { display:flex; align-items:center; gap:12px; }
.vs-save-info button { min-height:30px; padding:4px 9px; font-size:12px; }
.vs-status { min-height:42px; padding:11px 0 14px; color:#a9bba7; font-size:12px; overflow-wrap:anywhere; }
.vs-status.is-error { color:var(--vs-danger); }
.vs-single-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(290px,.9fr); gap:24px; align-items:start; }
.vs-composer { padding:23px; }
.vs-label { margin-bottom:8px; }
.vs-composer>textarea { min-height:188px; }
.vs-prompt-footer { display:flex; justify-content:space-between; align-items:center; gap:10px; padding-top:8px; }
.vs-prompt-footer button { border:0!important; min-height:28px; padding:3px 7px; font-size:12px; }
.vs-mention-menu { display:flex; flex-wrap:wrap; gap:6px; padding:10px; margin-top:6px; background:#243027; border:1px solid #50634b; border-radius:5px; }
.vs-mention-menu button span { max-width:160px; overflow:hidden; text-overflow:ellipsis; }
.vs-bound-assets { display:flex; flex-wrap:wrap; gap:7px; margin-top:15px; }
.vs-asset-chip { display:flex; min-width:0; max-width:100%; border:1px solid #455745; border-radius:5px; background:#252f26; }
.vs-asset-chip button { border:0!important; min-height:30px; padding:5px 7px; font-size:11px; }
.vs-asset-chip .vs-chip-name { min-width:0; }
.vs-chip-name strong { color:#ccdebf; font-size:11px; }
.vs-chip-name span { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:400; }
.vs-asset-chip.is-missing { border-color:#a96c64; }
.vs-upload-strip { display:flex; align-items:center; flex-wrap:wrap; gap:9px; padding:16px 0 22px; border-bottom:1px solid #303e37; }
.vs-upload-strip label,.vs-upload-strip button { font-size:12px; }
.vs-params { display:grid; grid-template-columns:1.45fr .75fr .85fr .85fr; gap:12px; padding:20px 0 6px; }
.vs-params label { font-size:11px; }
.vs-params input,.vs-params select { font-size:12px; }
.vs-param-note { grid-column:1/-1; color:#97aa9d; font-size:11px; line-height:1.7; padding-bottom:6px; }
.vs-param-note>span { display:block; color:#b2c1af; }
.vs-submit-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 0 14px; margin-top:6px; border-top:1px solid #303e37; }
.vs-submit-bar>button { padding:10px 22px; min-height:42px; font-size:14px; }
.vs-results-side>.vs-section-heading { margin-bottom:12px; padding:0 1px; min-height:39px; }
.vs-results-side>.vs-section-heading button { min-height:30px; padding:4px 10px; font-size:12px; }
.vs-tasks { display:grid; gap:12px; align-content:start; }
.vs-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:42px 24px; color:#a3b4a8; gap:8px; }
.vs-empty p { font-size:12px; line-height:1.85; max-width:330px; }
.vs-empty h3 { color:#c5d2c7; margin-top:8px; }
.vs-empty-results { min-height:372px; border:1px dashed #405143; border-radius:8px; background:radial-gradient(ellipse at center,#26332640,transparent 67%); }
.vs-frame-icon { display:grid; place-items:center; width:68px; height:48px; border:1px solid #556b52; border-radius:7px; color:#a9c197; font-size:26px; margin-bottom:13px; transform:rotate(-4deg); }
.vs-empty-mark { display:grid; place-items:center; width:46px; height:46px; border:1px solid #486146; border-radius:50%; color:#a6bf95; font-size:24px; }
.vs-task-card { min-width:0; padding:17px 18px; background:var(--vs-surface); border:1px solid var(--vs-border); border-radius:7px; }
.vs-task-card.is-complete { border-color:#435b42; }
.vs-task-card.is-error { border-color:#715148; }
.vs-task-card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:11px; }
.vs-task-card time { font-size:11px; color:#8fa196; }
.vs-status-tag { display:inline-flex; align-items:center; gap:6px; padding:2px 7px; font-size:11px; color:#b4c4b5; background:#26332b; border-radius:3px; }
.vs-status-tag.is-active::before { content:""; width:5px; height:5px; border-radius:50%; background:#cadbad; animation:vs-pulse 2s ease-in-out infinite; }
.vs-task-card.is-error .vs-status-tag { background:#49362f; color:#e6b6a4; }
.vs-task-prompt { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; color:#d5dfd5; font-size:13px; line-height:1.8; white-space:pre-wrap; overflow-wrap:anywhere; }
.vs-task-specs { display:flex; flex-wrap:wrap; justify-content:space-between; gap:5px 12px; margin:12px 0; color:#8fa296; font-size:11px; overflow-wrap:anywhere; }
.vs-task-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.vs-task-actions button { min-height:29px; padding:4px 9px; font-size:11px; }
.vs-task-error { color:var(--vs-danger); font-size:12px; overflow-wrap:anywhere; margin:9px 0!important; }
.vs-download-path { font-size:10px; color:#94b38e; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vs-collection-bar { display:grid; grid-template-columns:minmax(170px,1fr) minmax(170px,1fr) auto; gap:12px; align-items:end; padding-bottom:20px; }
.vs-collection-bar>.vs-toolbar { padding-bottom:1px; }
.vs-collection-bar input { font-size:12px; }
.vs-source>summary { display:flex; align-items:center; gap:13px; padding:16px 20px; cursor:pointer; list-style:none; }
.vs-source>summary::before { content:"›"; font-size:18px; line-height:1; color:#b6cba8; }
.vs-source[open]>summary::before { transform:rotate(90deg); }
.vs-source>summary strong { font-size:13px; font-weight:550; }
.vs-source>summary span { color:#83998a; font-size:12px; }
.vs-details-body { padding:0 20px 20px; }
.vs-details-body .vs-section-heading { margin:0 0 9px; }
.vs-split-bar { display:flex; flex-wrap:wrap; align-items:end; gap:12px; margin:14px 0 9px; }
.vs-split-bar>label { flex:0 1 180px; }
.vs-split-bar>.vs-muted { flex:1 1 220px; padding:6px 0; font-size:11px; }
.vs-prefix-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-top:18px; }
.vs-prefix-grid textarea { min-height:76px; padding:9px 11px; font-size:12px; }
.vs-preset-bar { display:grid; grid-template-columns:minmax(160px,1fr) minmax(150px,1fr) auto; gap:10px; align-items:end; margin-top:13px; }
#vs-batch-params { padding:16px 20px 7px; margin:17px 0; }
.vs-batch-grid { display:grid; grid-template-columns:250px minmax(0,1fr); gap:18px; align-items:start; }
.vs-asset-library { padding:15px; position:sticky; top:16px; }
.vs-asset-library>.vs-section-heading { margin-bottom:13px; }
.vs-asset-library>.vs-section-heading h2 { font-size:13px; }
.vs-asset-library>.vs-section-heading .button { font-size:11px; min-height:29px; padding:3px 9px; }
.vs-asset-library>input,.vs-asset-library>select { margin-bottom:8px; min-height:32px; font-size:12px; }
.vs-asset-library>.vs-note { font-size:11px; margin:4px 0 13px; }
.vs-library-list { max-height:580px; overflow:auto; }
.vs-library-asset { display:flex; align-items:center; gap:9px; padding:11px 0; border-top:1px solid #2d3b33; min-width:0; }
.vs-media-mark { display:grid; place-items:center; flex:0 0 30px; width:30px; height:34px; background:#253529; border:1px solid #415640; border-radius:4px; color:#aabea1; font-size:17px; }
.vs-asset-copy { flex:1; min-width:0; }
.vs-asset-copy strong { display:block; font-size:11px; color:#c7d1c7; font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vs-asset-copy span { display:block; font-size:10px; color:#80988b; margin-top:3px; }
.vs-library-asset>button { min-height:25px; padding:2px 5px; font-size:10px; border-color:transparent!important; }
.vs-empty-note { color:#8da491; font-size:12px; line-height:1.85; padding:15px 2px; }
.vs-row-panel { overflow:hidden; }
.vs-row-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:14px 17px; border-bottom:1px solid var(--vs-border); background:#1d2820; }
.vs-row-toolbar>.vs-muted { margin-right:auto; }
.vs-row-toolbar button { min-height:30px; font-size:11px; padding:4px 9px; }
.vs-stop-slot { display:inline-flex; flex:0 0 100px; width:100px; min-height:30px; }
.vs-batch-progress:empty { display:none; }
.vs-batch-progress { color:#baceac; font-size:12px; padding:10px 18px; background:#263425; border-bottom:1px solid #40543a; }
.vs-task-row { padding:17px; border-bottom:1px solid var(--vs-border); }
.vs-task-row:last-child { border-bottom:0; }
.vs-row-head { display:flex; align-items:center; gap:10px; margin-bottom:11px; }
.vs-row-number { font:12px/1.5 Consolas,monospace; color:#a6bd99; }
.vs-studio .vs-row-title { flex:1; border:0; background:transparent; padding:3px 5px; min-height:27px; font-size:12px; }
.vs-row-task-status { color:#8fa889; font-size:10px; white-space:nowrap; }
.vs-row-head>button { min-height:26px; padding:1px 7px; font-size:14px; border-color:transparent!important; }
.vs-task-row>textarea { font-size:12px; line-height:1.85; padding:10px 12px; min-height:94px; }
.vs-row-meta { display:flex; align-items:start; flex-wrap:wrap; gap:10px 17px; margin-top:10px; }
.vs-row-meta>label { display:flex; flex-direction:row; align-items:center; font-size:10px; gap:7px; }
.vs-row-meta>label>input { width:74px; min-height:28px; height:28px; font-size:11px; padding:3px 6px; }
.vs-row-bindings,.vs-row-preview { min-width:0; font-size:11px; }
.vs-row-bindings>summary,.vs-row-preview>summary { cursor:pointer; min-height:28px; padding-top:5px; color:#abc09e; }
.vs-row-bindings>summary span { margin-left:4px; color:#8ca680; }
.vs-row-bindings[open],.vs-row-preview[open] { flex:1 1 100%; }
.vs-binding-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; max-height:220px; overflow:auto; margin-top:8px; padding:10px; background:#111c15; border:1px solid #344c35; border-radius:4px; }
.vs-studio .vs-bind-option { display:flex; flex-direction:row; align-items:center; gap:7px; font-size:11px; padding:4px; cursor:pointer; }
.vs-bind-option>span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vs-type-tag { flex:0 0 auto; color:#99b594; font-size:10px; padding:1px 4px; border:1px solid #435c41; border-radius:3px; }
.vs-row-preview pre { padding:12px; white-space:pre-wrap; overflow-wrap:anywhere; font:12px/1.8 "Microsoft YaHei",sans-serif; color:#b8c9b6; background:#111c15; border:1px solid #344c35; border-radius:4px; }
.vs-row-references { display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }
.vs-row-references:empty { display:none; }
.vs-studio .vs-ref-token { min-width:0; max-width:100%; min-height:24px; padding:2px 6px; font-size:10px; color:#bdd2b0; border-color:#3d523c; }
.vs-ref-token>span { max-width:120px; overflow:hidden; text-overflow:ellipsis; color:#87a082; }
.vs-ref-token.is-missing { color:#d99f90!important; border-color:#865c51!important; }
.vs-batch-results { margin-top:27px; }
.vs-batch-results>.vs-note { margin-top:-8px; margin-bottom:14px; font-size:11px; }
.vs-task-grid { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.vs-task-grid>.vs-empty { grid-column:1/-1; min-height:180px; }
.vs-dialog { position:fixed; width:min(850px,calc(100vw - 40px)); max-height:calc(100dvh - 70px); overflow:auto; margin:auto; padding:22px; color:var(--vs-text); background:#171f1b; border:1px solid #52664a; border-radius:10px; box-shadow:0 25px 90px #0009; }
.vs-dialog::backdrop { background:#060c09d9; backdrop-filter:blur(4px); }
.vs-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:20px; }
.vs-dialog-head h2 { overflow-wrap:anywhere; font-size:15px; }
.vs-preview-body { display:flex; align-items:center; justify-content:center; min-height:180px; color:#a8bba0; }
.vs-preview-body img,.vs-preview-body video { display:block; width:auto; height:auto; max-width:100%; max-height:70dvh; background:#0b110d; border-radius:4px; }
.vs-preview-body audio { width:100%; max-width:600px; }
.vs-asset-picker { display:grid; gap:7px; margin-top:16px; }
.vs-studio .vs-picker-item { display:flex; flex-direction:row; align-items:center; gap:12px; padding:12px; background:#202e22; border:1px solid #3c5137; border-radius:5px; font-size:12px; cursor:pointer; overflow-wrap:anywhere; }
.vs-studio .vs-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.vs-studio input.vs-sr-only:focus-visible+label { outline:2px solid var(--vs-accent); }
.vs-studio input[type=file].vs-sr-only:focus-visible { position:static; width:auto; height:auto; clip:auto; margin:0; }
@keyframes vs-pulse { 50% { opacity:.4; } }
@media(min-width:1450px) { .vs-single-grid { grid-template-columns:minmax(560px,1fr) minmax(420px,.85fr); gap:32px; } .vs-composer { padding:27px; } }
@media(max-width:1080px) { .vs-studio { padding:25px 24px 55px; } .vs-single-grid { grid-template-columns:minmax(0,1fr) minmax(280px,.8fr); gap:18px; } .vs-params { grid-template-columns:1fr 1fr; } .vs-collection-bar { grid-template-columns:1fr 1fr; } .vs-collection-bar>.vs-toolbar { grid-column:1/-1; } .vs-batch-grid { grid-template-columns:220px minmax(0,1fr); gap:13px; } .vs-composer { padding:18px; } .vs-submit-bar { flex-wrap:wrap; } }
@media(max-width:820px) { .vs-single-grid { grid-template-columns:1fr; } .vs-single-grid .vs-tasks { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); } .vs-single-grid .vs-empty-results { min-height:220px; grid-column:1/-1; } .vs-batch-grid { grid-template-columns:1fr; } .vs-asset-library { position:static; } .vs-library-list { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; max-height:250px; } .vs-asset-library>.vs-note { margin-bottom:4px; } .vs-asset-library>input { width:calc(65% - 8px); margin-right:8px; } .vs-asset-library>select { width:35%; } .vs-batch-results>.vs-section-heading { align-items:flex-start; flex-wrap:wrap; } }
@media(max-width:560px) { .vs-studio { padding:19px 14px 45px; } .vs-header { gap:12px; align-items:flex-start; margin-bottom:18px; } .vs-studio h1 { font-size:23px; } .vs-subtitle { font-size:11px; } .vs-header>button { margin-top:4px; padding:6px 8px; font-size:11px; } .vs-eyebrow { font-size:9px; } .vs-topline { align-items:flex-start; } .vs-tabs { gap:17px; } .vs-studio .vs-tabs button { font-size:13px; } .vs-save-info { flex-direction:column; gap:2px; align-items:end; padding:4px 0; } .vs-save-info>.vs-muted { font-size:9px; } .vs-save-info button { min-height:24px; padding:2px 6px; font-size:10px; } .vs-config { padding:14px; } .vs-config-grid { grid-template-columns:1fr; gap:12px; } .vs-composer { padding:16px; } .vs-composer>textarea { min-height:175px; } .vs-submit-bar>button { width:100%; } .vs-collection-bar { grid-template-columns:1fr; } .vs-collection-bar>.vs-toolbar { grid-column:auto; } .vs-prefix-grid { grid-template-columns:1fr; } .vs-preset-bar { grid-template-columns:1fr 1fr; } .vs-preset-bar>button { grid-column:1/-1; } .vs-source>summary { padding:13px 14px; gap:9px; } .vs-source>summary span { font-size:10px; } .vs-details-body { padding:0 14px 15px; } .vs-split-bar { gap:9px; } .vs-split-bar>.vs-muted { flex-basis:100%; } .vs-library-list { grid-template-columns:1fr; } .vs-binding-list { grid-template-columns:1fr; } .vs-row-toolbar { padding:12px; gap:8px; } .vs-task-row { padding:13px; } .vs-task-grid { grid-template-columns:1fr; } .vs-task-specs { font-size:10px; } .vs-dialog { width:calc(100vw - 22px); padding:15px; } .vs-section-heading { gap:8px; } }
@media(prefers-reduced-motion:reduce) { .vs-status-tag.is-active::before { animation:none; } }