:root {
  --bg:#0a0c0f; --surface:#101318; --surface-2:#151920; --surface-3:#1b2028;
  --line:#262c35; --line-strong:#39424f; --text:#f3f4f6; --sub:#b3bbc7; --muted:#7e8998;
  --accent:#5377f3; --accent-2:#6f8eff; --success:#2fc08d; --warning:#d89b3c; --error:#e66670;
  --shadow:0 18px 45px rgba(0,0,0,.32); --radius:8px; --sidebar:208px; --topbar:58px;
  --font:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
[data-theme="light"] { --bg:#f2f4f6; --surface:#fff; --surface-2:#f7f8fa; --surface-3:#eceff3; --line:#dce1e7; --line-strong:#bfc7d1; --text:#171a20; --sub:#4f5a68; --muted:#74808e; --shadow:0 18px 45px rgba(28,35,45,.09); }
* { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; }
body { min-height:100vh; background:var(--bg); color:var(--text); font-family:var(--font); line-height:1.45; -webkit-font-smoothing:antialiased; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
svg { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.vs-topbar { position:fixed; inset:0 0 auto; z-index:40; height:var(--topbar); display:flex; align-items:center; justify-content:space-between; padding:0 18px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(18px); }
.vs-brand { display:flex; align-items:center; gap:13px; color:var(--text); text-decoration:none; }
.vs-wordmark { display:block; width:166px; height:auto; }
[data-theme="dark"] .vs-wordmark { content:url('/assets/brand/pacific-collections-white.png'); }
.vs-product { padding-left:12px; border-left:1px solid var(--line-strong); color:var(--muted); font-size:.62rem; font-weight:800; letter-spacing:.12em; }
.vs-top-actions { display:flex; align-items:center; gap:10px; }
.vs-system { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:.72rem; }
.vs-system i { width:7px; height:7px; border-radius:50%; background:var(--success); box-shadow:0 0 0 3px color-mix(in srgb,var(--success) 15%,transparent); }
.vs-system.needs-setup i { background:var(--warning); box-shadow:0 0 0 3px color-mix(in srgb,var(--warning) 15%,transparent); }
.vs-icon-btn,.vs-avatar { width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); border-radius:7px; background:var(--surface-2); color:var(--sub); }
.vs-icon-btn:hover,.vs-avatar:hover { border-color:var(--line-strong); color:var(--text); }
.vs-icon-btn svg { width:16px; }
.vs-avatar { border-radius:50%; color:var(--accent-2); font-size:.68rem; font-weight:800; }
.vs-shell { display:grid; grid-template-columns:var(--sidebar) minmax(0,1fr); padding-top:var(--topbar); min-height:100vh; }
.vs-sidebar { position:fixed; inset:var(--topbar) auto 0 0; width:var(--sidebar); display:flex; flex-direction:column; justify-content:space-between; padding:20px 10px 14px; border-right:1px solid var(--line); background:var(--surface); }
.vs-sidebar .sidebar-section { margin-bottom:10px; }
.vs-sidebar .sidebar-label { margin:13px 10px 6px; color:var(--muted); font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.vs-sidebar .sidebar-section:first-child .sidebar-label { margin-top:0; }
.vs-sidebar .sidebar-nav { display:flex; flex-direction:column; gap:3px; margin:0; padding:0; list-style:none; }
.vs-sidebar .sidebar-nav li.hidden { display:none; }
.vs-sidebar a { min-height:38px; display:flex; align-items:center; gap:10px; padding:0 10px; border-radius:6px; color:var(--sub); font-size:.78rem; font-weight:620; text-decoration:none; }
.vs-sidebar a:hover { color:var(--text); background:var(--surface-2); }
.vs-sidebar a.active { color:var(--text); background:color-mix(in srgb,var(--accent) 14%,var(--surface)); box-shadow:inset 2px 0 var(--accent); }
.vs-sidebar a svg { width:16px; height:16px; color:var(--muted); }
.vs-sidebar a.active svg { color:var(--accent-2); }
.vs-sidebar-foot { padding:13px 10px 2px; border-top:1px solid var(--line); }
.vs-sidebar-foot span,.vs-sidebar-foot strong { display:block; }
.vs-sidebar-foot span { color:var(--muted); font-size:.61rem; }
.vs-sidebar-foot strong { margin-top:3px; font-size:.68rem; }
.vs-main { grid-column:2; min-width:0; width:min(100%,1500px); margin:0 auto; padding:26px 30px 50px; }
.vs-page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:20px; }
.vs-eyebrow { color:var(--accent-2); font-size:.63rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.vs-page-head h1 { margin:4px 0 3px; font-size:1.58rem; line-height:1.15; letter-spacing:0; }
.vs-page-head p,.vs-results-head p { color:var(--muted); font-size:.76rem; }
.vs-head-meta { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:.68rem; }
.vs-btn { min-height:36px; padding:0 14px; border:1px solid transparent; border-radius:6px; font-size:.73rem; font-weight:720; }
.vs-btn-secondary { border-color:var(--line); background:var(--surface-2); color:var(--sub); }
.vs-btn-secondary:hover { border-color:var(--line-strong); color:var(--text); }
.vs-btn:disabled { opacity:.45; cursor:not-allowed; }
.vs-workspace { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:18px; align-items:start; }
.vs-compose,.vs-run-card,.vs-queue-card { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.vs-compose { min-width:0; padding:18px; }
.vs-section-head { min-height:32px; display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; }
.vs-section-head > div { display:flex; align-items:center; gap:9px; }
.vs-section-head > div > span { color:var(--accent-2); font-family:ui-monospace,monospace; font-size:.62rem; font-weight:800; }
.vs-section-head h2 { font-size:.88rem; letter-spacing:0; }
.vs-mode-badge,.vs-cost { padding:4px 7px; border:1px solid var(--line); border-radius:5px; color:var(--sub); background:var(--surface-2); font-size:.62rem; font-weight:750; }
.vs-field-row { display:grid; grid-template-columns:180px minmax(190px,1fr) minmax(200px,1.4fr); gap:10px; align-items:end; margin-bottom:15px; }
.vs-field { position:relative; display:flex; flex-direction:column; gap:6px; min-width:0; }
.vs-field > span,.vs-prompt-wrap > label { color:var(--sub); font-size:.67rem; font-weight:700; }
.vs-field select,.vs-field input[type="number"],.vs-field input[type="text"] { width:100%; height:38px; padding:0 10px; border:1px solid var(--line); border-radius:6px; outline:0; background:var(--surface-2); color:var(--text); font-size:.73rem; }
.vs-field select:focus,.vs-field input:focus,.vs-prompt-wrap textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent); }
.vs-model-summary { min-height:38px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:5px 10px; border:1px solid var(--line); border-radius:6px; color:var(--muted); background:var(--surface-2); font-size:.64rem; line-height:1.35; }
.vs-model-choices { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:9px; }
.vs-model-choices button { position:relative; min-height:116px; display:flex; flex-direction:column; align-items:flex-start; padding:12px; border:1px solid var(--line); border-radius:7px; background:var(--surface-2); color:var(--text); text-align:left; }
.vs-model-choices button:hover:not(:disabled) { border-color:var(--line-strong); }
.vs-model-choices button.active { border-color:var(--accent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent); background:color-mix(in srgb,var(--accent) 8%,var(--surface-2)); }
.vs-model-choices button:disabled { opacity:.48; cursor:not-allowed; }
.vs-model-choices button>span { color:var(--accent-2); font-size:.53rem; font-weight:850; letter-spacing:.08em; }
.vs-model-choices button strong { margin-top:7px; font-size:.72rem; }
.vs-model-choices button small { margin-top:3px; color:var(--muted); font-size:.57rem; line-height:1.35; }
.vs-model-choices button i { margin-top:auto; padding-top:7px; color:var(--muted); font-size:.54rem; font-style:normal; font-weight:700; }
.vs-model-choices button.active i { color:var(--accent-2); }
.vs-input-tabs { display:flex; gap:3px; padding:3px; margin-bottom:12px; border:1px solid var(--line); border-radius:7px; background:var(--surface-2); }
.vs-input-tabs button { flex:1; min-height:34px; border:0; border-radius:5px; background:transparent; color:var(--muted); font-size:.7rem; font-weight:730; }
.vs-input-tabs button:hover:not(:disabled) { color:var(--text); }
.vs-input-tabs button.active { color:var(--text); background:var(--surface); box-shadow:0 1px 4px rgba(0,0,0,.18); }
.vs-input-tabs button:disabled { opacity:.3; cursor:not-allowed; }
.vs-source-grid { display:grid; grid-template-columns:minmax(210px,.7fr) minmax(0,1.3fr); gap:12px; }
.vs-source-grid.text-mode { grid-template-columns:1fr; }
.vs-source-grid.text-mode .vs-dropzone { display:none; }
.vs-dropzone { position:relative; min-height:188px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:15px; overflow:hidden; border:1px dashed var(--line-strong); border-radius:7px; background:var(--surface-2); text-align:center; }
.vs-dropzone:hover,.vs-dropzone.dragover { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 6%,var(--surface-2)); }
.vs-drop-icon { width:34px; height:34px; display:grid; place-items:center; margin-bottom:9px; border-radius:7px; color:var(--accent-2); background:color-mix(in srgb,var(--accent) 13%,transparent); }
.vs-drop-icon svg { width:17px; }
.vs-dropzone strong { font-size:.76rem; }
.vs-dropzone small { margin:3px 0 10px; color:var(--muted); font-size:.62rem; }
.vs-url-field { position:relative; z-index:2; width:100%; max-width:320px; display:flex; flex-direction:column; gap:5px; text-align:left; }
.vs-url-field span { color:var(--muted); font-size:.58rem; font-weight:700; }
.vs-url-field input,.vs-feature-url input { width:100%; height:34px; padding:0 9px; border:1px solid var(--line); border-radius:5px; outline:0; background:var(--surface); color:var(--text); font-size:.64rem; }
.vs-url-field input:focus,.vs-feature-url input:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent); }
.vs-file-preview { position:absolute; inset:0; pointer-events:none; }
.vs-file-preview img,.vs-file-preview video { width:100%; height:100%; object-fit:cover; }
.vs-file-preview::after { content:"Replace source"; position:absolute; right:8px; bottom:8px; padding:5px 8px; border-radius:4px; background:rgba(8,10,14,.82); color:#fff; font-size:.6rem; font-weight:750; }
.vs-file-preview:empty::after { display:none; }
.vs-prompt-wrap { display:flex; flex-direction:column; gap:6px; min-width:0; }
.vs-prompt-wrap textarea { width:100%; min-height:144px; resize:vertical; padding:11px 12px; border:1px solid var(--line); border-radius:7px; outline:0; background:var(--surface-2); color:var(--text); font-size:.73rem; line-height:1.55; }
.vs-prompt-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--muted); font-size:.59rem; }
.vs-preset-list { display:flex; flex-wrap:wrap; gap:5px; }
.vs-preset-list button { min-height:25px; padding:0 8px; border:1px solid var(--line); border-radius:4px; background:var(--surface-2); color:var(--sub); font-size:.6rem; }
.vs-preset-list button:hover { border-color:var(--accent); color:var(--text); }
.vs-controls-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:16px 0 22px; }
.vs-options-head { padding-top:16px; border-top:1px solid var(--line); }
.vs-text-btn { border:0; background:transparent; color:var(--accent-2); font-size:.64rem; font-weight:750; }
.vs-text-btn:hover { color:var(--text); }
.vs-option-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.vs-feature { min-height:64px; display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:9px; padding:8px 10px; border:1px solid var(--line); border-radius:7px; background:var(--surface-2); }
.vs-feature.unavailable { opacity:.4; }
.vs-feature-icon { width:32px; height:32px; display:grid; place-items:center; border-radius:6px; color:var(--muted); background:var(--surface-3); }
.vs-feature-icon svg { width:16px; }
.vs-feature strong,.vs-feature small { display:block; }
.vs-feature strong { color:var(--text); font-size:.68rem; }
.vs-feature small { margin-top:2px; color:var(--muted); font-size:.58rem; line-height:1.25; }
.vs-switch { position:relative; width:32px; height:18px; flex:0 0 32px; }
.vs-switch input { position:absolute; opacity:0; }
.vs-switch span { position:absolute; inset:0; border-radius:99px; background:var(--line-strong); transition:.18s; }
.vs-switch span::after { content:""; position:absolute; width:12px; height:12px; left:3px; top:3px; border-radius:50%; background:#fff; transition:.18s; }
.vs-switch input:checked + span { background:var(--accent); }
.vs-switch input:checked + span::after { transform:translateX(14px); }
.vs-switch input:disabled + span { cursor:not-allowed; }
.vs-feature-upload { width:32px; height:28px; border:1px solid var(--line); border-radius:5px; background:var(--surface); color:var(--sub); font-size:.55rem; font-weight:800; }
.vs-feature-url { grid-column:1/-1; display:none; padding-top:2px; }
.vs-feature-url.open { display:block; }
.vs-feature-inline { min-height:38px; display:flex; align-items:center; gap:9px; padding:7px 9px; border:1px solid var(--line); border-radius:6px; background:var(--surface-2); }
.vs-feature-inline input { accent-color:var(--accent); }
.vs-feature-inline strong,.vs-feature-inline small { display:block; }
.vs-feature-inline strong { font-size:.66rem; }
.vs-feature-inline small { color:var(--muted); font-size:.57rem; }
.vs-advanced { margin-top:14px; border-top:1px solid var(--line); }
.vs-creative-more { border-bottom:1px solid var(--line); }
.vs-creative-more .vs-option-grid { padding:0 0 12px; }
.vs-creative-more>.vs-text-btn { margin:8px 0 14px; }
.vs-advanced summary { min-height:49px; display:grid; grid-template-columns:auto 1fr 18px; align-items:center; gap:10px; list-style:none; cursor:pointer; }
.vs-advanced summary::-webkit-details-marker { display:none; }
.vs-advanced summary span { font-size:.7rem; font-weight:750; }
.vs-advanced summary small { color:var(--muted); font-size:.59rem; }
.vs-advanced summary svg { width:15px; transition:.18s; }
.vs-advanced[open] summary svg { transform:rotate(180deg); }
.vs-advanced-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; padding:2px 0 4px; }
.vs-field input[type="range"] { width:calc(100% - 28px); accent-color:var(--accent); }
.vs-field output { position:absolute; right:0; bottom:1px; color:var(--sub); font-size:.67rem; font-weight:800; }
.vs-run-panel { position:sticky; top:calc(var(--topbar) + 18px); display:flex; flex-direction:column; gap:12px; }
.vs-run-card,.vs-queue-card { padding:15px; }
.vs-run-summary { display:grid; gap:0; margin:2px 0 12px; }
.vs-run-summary div { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); font-size:.64rem; }
.vs-run-summary dt { color:var(--muted); }
.vs-run-summary dd { color:var(--text); font-weight:700; text-align:right; }
.vs-guardrails { padding:8px 0; }
.vs-guardrails > div { display:grid; grid-template-columns:8px 1fr; gap:9px; align-items:start; margin:9px 0; }
.vs-guardrails i { width:7px; height:7px; margin-top:5px; border-radius:50%; background:var(--success); }
.vs-guardrails strong,.vs-guardrails small { display:block; }
.vs-guardrails strong { font-size:.65rem; }
.vs-guardrails small { color:var(--muted); font-size:.57rem; }
.vs-generate { width:100%; min-height:42px; display:flex; align-items:center; justify-content:center; gap:9px; border:0; border-radius:6px; background:var(--accent); color:#fff; font-size:.74rem; font-weight:780; box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 20%,transparent); }
.vs-generate:hover { background:var(--accent-2); }
.vs-generate:disabled { opacity:.5; cursor:not-allowed; }
.vs-generate svg { width:15px; }
.vs-run-note { margin:9px 2px 0; color:var(--muted); font-size:.57rem; text-align:center; }
.vs-queue-title,.vs-queue-title > div { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.vs-queue-title strong,.vs-queue-title b { font-size:.68rem; }
.vs-spinner { width:13px; height:13px; border:2px solid var(--line-strong); border-top-color:var(--accent); border-radius:50%; animation:spin .75s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.vs-progress { height:5px; margin:12px 0; overflow:hidden; border-radius:99px; background:var(--surface-3); }
.vs-progress i { display:block; width:0; height:100%; border-radius:inherit; background:var(--accent); transition:width .35s ease; }
.vs-progress.indeterminate i { width:35%; animation:queue-indeterminate 1.4s ease-in-out infinite; }
@keyframes queue-indeterminate { 0% { transform:translateX(-110%); } 100% { transform:translateX(310%); } }
.vs-queue-card ol { padding-left:18px; color:var(--muted); font-size:.61rem; }
.vs-queue-card li { padding:3px 0; }
.vs-queue-card li.done { color:var(--success); }
.vs-queue-card .vs-text-btn { margin-top:10px; color:var(--muted); }
.vs-results { margin-top:20px; padding:18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.vs-results-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:14px; }
.vs-results-head h2 { margin:3px 0; font-size:.94rem; }
.vs-result-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.vs-empty-result { grid-column:1/-1; min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px dashed var(--line); border-radius:7px; color:var(--muted); text-align:center; }
.vs-empty-result svg { width:25px; margin-bottom:9px; }
.vs-empty-result strong { color:var(--sub); font-size:.72rem; }
.vs-empty-result span { margin-top:3px; font-size:.62rem; }
.vs-result { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:7px; background:var(--surface-2); }
.vs-video-frame { position:relative; aspect-ratio:9/16; max-height:400px; overflow:hidden; background:#08090b; }
.vs-video-frame.ratio-16-9 { aspect-ratio:16/9; }
.vs-video-frame.ratio-1-1 { aspect-ratio:1; }
.vs-video-frame.ratio-4-5 { aspect-ratio:4/5; }
.vs-video-frame video { width:100%; height:100%; object-fit:cover; }
.vs-capability-map { margin-top:18px; padding:22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.vs-model-matrix { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin-top:18px; background:var(--line); border:1px solid var(--line); }
.vs-model-matrix article { min-width:0; padding:17px; background:var(--surface); }
.vs-model-matrix article>div { display:flex; flex-direction:column; gap:5px; }
.vs-model-matrix article span,.vs-tool-grid span { color:var(--muted); font-size:.67rem; font-weight:700; letter-spacing:.08em; }
.vs-model-matrix article strong,.vs-tool-grid strong { font-size:.95rem; }
.vs-model-matrix dl { display:grid; grid-template-columns:72px minmax(0,1fr); gap:5px 8px; margin:14px 0 10px; font-size:.72rem; }
.vs-model-matrix dt { color:var(--muted); }
.vs-model-matrix dd { margin:0; overflow-wrap:anywhere; }
.vs-model-matrix p,.vs-tool-grid p { margin:0; color:var(--muted); font-size:.72rem; line-height:1.45; }
.vs-tool-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-top:14px; }
.vs-tool-grid a { display:flex; flex-direction:column; gap:7px; min-width:0; padding:15px; border:1px solid var(--line); border-radius:6px; color:inherit; text-decoration:none; background:var(--surface-2); }
.vs-tool-grid a:hover { border-color:var(--accent); }
.vs-tool-grid small { margin-top:auto; color:var(--muted); font-size:.66rem; }
.vs-external-result { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding:18px; color:#fff; background:#0b0e13; text-align:center; text-decoration:none; }
.vs-external-result img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.38; }
.vs-external-result svg,.vs-external-result strong,.vs-external-result span { position:relative; z-index:1; }
.vs-external-result svg { width:28px; }
.vs-external-result strong { font-size:.72rem; }
.vs-external-result span { color:rgba(255,255,255,.7); font-size:.6rem; }
.vs-quality { position:absolute; top:7px; right:7px; padding:3px 6px; border-radius:4px; background:rgba(8,10,14,.8); color:#fff; font-size:.58rem; font-weight:800; }
.vs-result-info { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px; }
.vs-result-info strong,.vs-result-info span { display:block; }
.vs-result-info strong { overflow:hidden; color:var(--text); font-size:.64rem; white-space:nowrap; text-overflow:ellipsis; }
.vs-result-info span { margin-top:2px; color:var(--muted); font-size:.55rem; }
.vs-download { width:30px; height:30px; flex:0 0 30px; display:grid; place-items:center; border:1px solid var(--line); border-radius:5px; background:var(--surface); color:var(--sub); }
.vs-download svg { width:14px; }
.vs-toast-stack { position:fixed; right:16px; bottom:16px; z-index:80; display:flex; flex-direction:column; gap:7px; }
.vs-toast { min-width:250px; max-width:340px; padding:10px 12px; border:1px solid var(--line-strong); border-radius:7px; background:var(--surface-3); color:var(--text); box-shadow:var(--shadow); font-size:.68rem; animation:toast-in .2s ease; }
.vs-config-error { margin:10px 0; padding:9px 10px; border:1px solid color-mix(in srgb,var(--error) 40%,var(--line)); border-radius:6px; background:color-mix(in srgb,var(--error) 9%,var(--surface)); color:var(--error); font-size:.62rem; line-height:1.45; }
@keyframes toast-in { from { opacity:0; transform:translateY(7px); } }
@media (max-width:1180px) { .vs-workspace { grid-template-columns:minmax(0,1fr) 280px; } .vs-result-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .vs-field-row { grid-template-columns:145px 1fr; } .vs-model-summary { grid-column:1/-1; } .vs-model-choices { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px) { :root { --sidebar:64px; } .vs-sidebar a { justify-content:center; padding:0; font-size:0; } .vs-sidebar a svg { width:18px; height:18px; } .vs-sidebar .sidebar-label,.vs-sidebar-foot { display:none; } .vs-workspace { grid-template-columns:1fr; } .vs-run-panel { position:static; display:grid; grid-template-columns:1fr 1fr; } .vs-result-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) { :root { --sidebar:0px; } .vs-topbar { padding:0 12px; } .vs-product,.vs-system { display:none; } .vs-wordmark { font-size:.92rem; } .vs-shell { grid-template-columns:minmax(0,1fr); } .vs-sidebar { display:none; } .vs-main { grid-column:1; width:100%; padding:18px 12px 35px; } .vs-page-head { display:block; } .vs-head-meta { margin-top:12px; justify-content:space-between; } .vs-compose { padding:13px; } .vs-field-row,.vs-source-grid,.vs-controls-grid,.vs-option-grid,.vs-advanced-grid,.vs-model-choices { grid-template-columns:1fr; } .vs-model-choices button { min-height:96px; } .vs-model-summary { grid-column:auto; } .vs-input-tabs { overflow-x:auto; } .vs-input-tabs button { min-width:110px; } .vs-run-panel { display:flex; } .vs-results { padding:13px; } .vs-results-head { align-items:flex-start; } .vs-result-grid { grid-template-columns:1fr; } .vs-video-frame { max-height:520px; } }
@media (max-width:1000px) { .vs-model-matrix { grid-template-columns:repeat(2,minmax(0,1fr)); } .vs-tool-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) { .vs-capability-map { padding:13px; } .vs-model-matrix,.vs-tool-grid { grid-template-columns:1fr; } }