/* Pilot visual language. Opt in with .tool-studio; no styles leak to other tools. */
.tool-studio.vc-workspace { --studio-sky:#69d7ff; --studio-primary-bg:linear-gradient(110deg,#6edcff,#87c6ff); --studio-primary-hover-bg:linear-gradient(110deg,#8fe6ff,#a8d8ff); --studio-primary-shadow:inset 0 1px 0 #ffffff55,0 3px 0 #164569,0 5px 18px #60c7ff24; --studio-primary-hover-shadow:inset 0 1px 0 #ffffff55,0 3px 0 #164569,0 0 23px #69d7ff50; --studio-pressed-shadow:inset 0 2px 5px #060c2133,0 1px 0 #090f20,0 1px 5px #69d7ff18; --studio-violet:#b69bff; --studio-line:#3b4660; --studio-panel:#20283c; --studio-muted:#b4c0d8; --bg:#090e1b; }
.tool-studio.vc-workspace main { padding-top:32px; }
.tool-studio.vc-workspace main>section,.tool-studio.vc-workspace main>article { max-width:1080px; }
.tool-studio.vc-workspace .studio-hero { padding:0 0 28px; }
.tool-studio.vc-workspace .studio-hero>.muted { margin:0 0 10px; color:var(--studio-sky); font-size:11px; font-weight:750; text-transform:uppercase; letter-spacing:.16em; }
.tool-studio.vc-workspace .studio-hero h1 { margin:0; font-family:Bahnschrift,"Trebuchet MS",ui-sans-serif,sans-serif; font-size:clamp(2rem,3.9vw,3.4rem); font-weight:650; letter-spacing:-.025em; line-height:1.1; color:#c8d2ff; background:linear-gradient(100deg,#79deff 0%,#bfc6ef 47%,#c4a1e7 84%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.tool-studio.vc-workspace .studio-hero .lead { margin:12px 0 0; font-size:15px; color:var(--studio-muted); }
.tool-studio.vc-workspace .studio-panel { position:relative; padding:26px; border:1px solid var(--studio-line); border-radius:16px; background:radial-gradient(ellipse at 5% 0%,#3f4e7028,transparent 65%),linear-gradient(125deg,#222b40,#1b2235); box-shadow:0 18px 40px #02051040,inset 0 1px 0 #c4d6ff0a; }
.tool-studio.vc-workspace.video-converter-page .studio-panel::before { content:""; position:absolute; top:-1px; left:24px; right:24px; height:1px; background:linear-gradient(90deg,var(--studio-sky),#9390d280,transparent); }
.tool-studio.vc-workspace:not(.video-converter-page) .studio-panel::before { content:none; display:none; }
.tool-studio.vc-workspace .studio-converter-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr); gap:30px; }
.tool-studio.vc-workspace .studio-step { display:flex; align-items:center; gap:10px; margin:0 0 16px; font-size:14px; font-weight:650; color:#e8ecfa; }
.tool-studio.vc-workspace .studio-step>span { color:var(--studio-sky); font:500 11px ui-monospace,monospace; letter-spacing:.06em; }
.tool-studio.vc-workspace .studio-upload { min-width:0; padding:24px 18px 16px; text-align:center; border:1px dashed #62739a; border-radius:12px; background:radial-gradient(ellipse at top,#5974be12,transparent 80%),#141c2d; transition:border-color 140ms,box-shadow 140ms,background 140ms; }
.tool-studio.vc-workspace .studio-upload.is-dragging { border-color:var(--studio-sky); background:#243451; box-shadow:0 0 0 3px #69d7ff24,inset 0 0 35px #69d7ff0a; }
.tool-studio.vc-workspace .studio-upload-icon { display:flex; justify-content:center; color:var(--studio-sky); margin:0 0 14px; }
.tool-studio.vc-workspace .studio-upload h2 { font-size:17px; margin:0 0 5px; font-family:Bahnschrift,"Trebuchet MS",sans-serif; font-weight:600; }
.tool-studio.vc-workspace .studio-upload-intro p { margin:0 0 18px; color:var(--studio-muted); font-size:12px; }
.tool-studio.vc-workspace .studio-file-limits { margin:13px 0 0; color:#a4b2ce; font-size:11px; }
.tool-studio.vc-workspace .studio-file-state { margin:8px 0 0; font-size:11px; color:#b8c5de; overflow-wrap:anywhere; }
.tool-studio.vc-workspace .studio-source { margin:16px 0 0; }
.tool-studio.vc-workspace .studio-image-surface { display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid #414c67; border-radius:8px; background-color:#141b2a; background-image:conic-gradient(#273149 25%,transparent 0 50%,#273149 0 75%,transparent 0); background-size:16px 16px; }
.tool-studio.vc-workspace .studio-source img { display:block; width:100%; height:200px; object-fit:contain; }
.tool-studio.vc-workspace .studio-source figcaption { display:grid; gap:3px; padding:10px 0 0; text-align:left; font-size:12px; }
.tool-studio.vc-workspace [data-source-name] { font-weight:600; color:#e0e8f7; overflow-wrap:anywhere; }
.tool-studio.vc-workspace [data-source-meta] { color:var(--studio-muted); font-size:11px; }
.tool-studio.vc-workspace [data-image-tool][data-has-source=true] .studio-upload-intro { display:none; }
.tool-studio.vc-workspace .studio-settings { display:flex; flex-direction:column; min-width:0; }
.tool-studio.vc-workspace .studio-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
.tool-studio.vc-workspace .studio-field { display:grid; gap:8px; align-content:start; }
.tool-studio.vc-workspace .studio-field label { color:#c4d0e5; font-size:12px; font-weight:600; }
.tool-studio.vc-workspace .studio-field :is(input,select) { min-width:0; width:100%; min-height:46px; padding:10px 12px; border:1px solid #607193; border-radius:8px; background:#151e31; color:#f0f4ff; font-size:14px; font-weight:600; line-height:1.4; font-family:inherit; box-shadow:0 3px 8px #050b1933,inset 0 1px 0 #c4d6ff08; cursor:pointer; transition:border-color 140ms,box-shadow 140ms,transform 100ms; }
.tool-studio.vc-workspace .studio-field :is(input,select):focus-visible { outline:3px solid #c3a6ff; outline-offset:3px; border-color:#d0baff; }
.tool-studio.vc-workspace .studio-field :is(input,select):active { transform:translateY(1px); }
.tool-studio.vc-workspace .studio-field :is(input,select):disabled { border-color:#39435c; color:#7d8ba7; background:#171d2b; box-shadow:none; cursor:not-allowed; }
.tool-studio.vc-workspace .studio-field option:checked { color:#e9f9ff; background:#2b4867; }
.tool-studio.vc-workspace .studio-note { margin:16px 0 0; color:var(--studio-muted); font-size:12px; line-height:1.65; }
.tool-studio.vc-workspace .studio-convert-action { margin-top:auto; padding-top:24px; }
.tool-studio.vc-workspace .studio-hint { margin:12px 0 0; color:var(--studio-muted); font-size:12px; line-height:1.6; }
.tool-studio.vc-workspace .studio-local-note { display:flex; align-items:flex-start; gap:7px; margin:20px 0 0; padding-top:16px; border-top:1px solid #3e4960; color:#a6b5d0; font-size:10px; }
.tool-studio.vc-workspace .studio-local-note svg { flex-shrink:0; }
.tool-studio.vc-workspace .studio-button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; max-width:100%; padding:11px 18px; border:1px solid #687aa2; border-radius:8px; color:#e9efff; background:linear-gradient(#2c3852,#253048); font-size:13px; font-weight:650; line-height:1.4; font-family:inherit; text-align:center; text-decoration:none; cursor:pointer; box-shadow:inset 0 1px 0 #dce9ff0d,0 3px 0 #090f20,0 5px 12px #05091740; transition:box-shadow 140ms,border-color 140ms,background 140ms,transform 90ms; }
.tool-studio.vc-workspace .studio-button svg { flex-shrink:0; }
.tool-studio.vc-workspace .studio-button-primary { color:#081525; background:var(--studio-primary-bg); border-color:#a1e5ff; box-shadow:var(--studio-primary-shadow); }
.tool-studio.vc-workspace .studio-convert-action>.studio-button { width:100%; }
.tool-studio.vc-workspace .studio-button:not(:disabled):active { transform:translateY(2px); box-shadow:var(--studio-pressed-shadow); }
.tool-studio.vc-workspace .studio-button:focus-visible { outline:3px solid #c3a6ff; outline-offset:4px; }
.tool-studio.vc-workspace .studio-button[aria-pressed=true] { color:#e8f7ff; border-color:#90defe; background:#2b4867; box-shadow:inset 0 0 0 1px #69d7ff55,0 0 12px #69d7ff18; }
.tool-studio.vc-workspace .studio-button:disabled { color:#8795b0; background:#2b3448; border-color:#414d66; box-shadow:none; cursor:not-allowed; transform:none; }
.tool-studio.vc-workspace .studio-message { margin:18px 0 0; padding:12px 14px; border:1px solid #6277a1; border-radius:8px; font-size:13px; }
.tool-studio.vc-workspace .studio-error { color:#ffd1e0; border-color:#a96f93; background:#342239; }
.tool-studio.vc-workspace .studio-error:empty { display:none; }
.tool-studio.vc-workspace .studio-status { color:#c9ecff; background:#1c344d; }
.tool-studio.vc-workspace .studio-result { display:grid; grid-template-columns:124px minmax(0,1fr); align-items:center; gap:22px; padding-top:24px; margin-top:24px; border-top:1px solid #52648b; }
.tool-studio.vc-workspace .studio-result-preview img { width:100%; height:124px; object-fit:contain; }
.tool-studio.vc-workspace .studio-result-kicker { margin:0 0 6px; color:var(--studio-sky); font-size:10px; font-weight:650; letter-spacing:.1em; }
.tool-studio.vc-workspace .studio-result h2 { margin:0; color:#edf1ff; font:600 21px/1.3 Bahnschrift,"Trebuchet MS",sans-serif; }
.tool-studio.vc-workspace [data-tool-summary] { margin:8px 0 16px; color:var(--studio-muted); font-size:12px; overflow-wrap:anywhere; }
.tool-studio.vc-workspace .studio-result-actions { display:flex; flex-wrap:wrap; gap:12px; }
.tool-studio.vc-workspace .studio-guide { margin-top:32px; padding-top:24px; border-top:1px solid #303b55; }
.tool-studio.vc-workspace .studio-guide h2 { margin-top:24px; font:600 19px/1.35 Bahnschrift,"Trebuchet MS",sans-serif; }
.tool-studio.vc-workspace .studio-guide p { color:var(--studio-muted); font-size:13px; max-width:78ch; }
.tool-studio.vc-workspace .studio-guide details { margin:12px 0; padding:0; border:1px solid var(--studio-line); border-radius:9px; background:#1b2336; box-shadow:0 3px 8px #03081740; }
.tool-studio.vc-workspace .studio-guide summary { padding:14px 16px; color:#dae5fa; font-size:13px; font-weight:600; cursor:pointer; transition:background 140ms,box-shadow 140ms,transform 90ms; }
.tool-studio.vc-workspace .studio-guide summary:active { transform:translateY(1px); }
.tool-studio.vc-workspace .studio-guide summary:focus-visible { outline:3px solid #c3a6ff; outline-offset:3px; }
.tool-studio.vc-workspace .studio-guide details[open] { border-color:#7697c9; box-shadow:0 0 14px #69d7ff0c; }
.tool-studio.vc-workspace .studio-guide details[open]>summary { color:#b8eaff; background:#24344e; }
.tool-studio.vc-workspace .studio-guide details p { margin:0; padding:4px 16px 18px; }
@media(hover:hover) {
 .tool-studio.vc-workspace .studio-button:not(:disabled):hover { border-color:#b7dbff; background:linear-gradient(#344764,#293c59); box-shadow:inset 0 1px 0 #dce9ff15,0 3px 0 #090f20,0 0 17px #69d7ff30; }
 .tool-studio.vc-workspace .studio-button-primary:not(:disabled):hover { color:#061426; background:var(--studio-primary-hover-bg); box-shadow:var(--studio-primary-hover-shadow); }
 .tool-studio.vc-workspace .studio-field :is(input,select):not(:disabled):hover { border-color:#9dccf5; box-shadow:0 0 13px #69d7ff20; }
 .tool-studio.vc-workspace .studio-guide summary:hover { background:#273750; box-shadow:0 0 15px #69d7ff14; }
}
@media(max-width:1100px) and (min-width:821px) { .tool-studio.vc-workspace .studio-converter-grid { grid-template-columns:minmax(0,1fr) minmax(230px,1fr); gap:22px; } .tool-studio.vc-workspace .studio-panel { padding:22px; } }
@media(max-width:660px) {
 .tool-studio.vc-workspace main { padding-top:24px; }
 .tool-studio.vc-workspace .studio-converter-grid { grid-template-columns:minmax(0,1fr); gap:24px; }
 .tool-studio.vc-workspace .studio-panel { padding:18px; }
 .tool-studio.vc-workspace .studio-settings { padding-top:22px; border-top:1px solid #3a4662; }
 .tool-studio.vc-workspace .studio-upload { padding:20px 14px 14px; }
 .tool-studio.vc-workspace .studio-convert-action { padding-top:18px; }
 .tool-studio.vc-workspace .studio-result { grid-template-columns:minmax(0,1fr); gap:14px; }
 .tool-studio.vc-workspace .studio-result-preview { display:none; }
 .tool-studio.vc-workspace .studio-result-actions { grid-column:1/-1; }
 .tool-studio.vc-workspace .studio-result-actions .studio-button { width:100%; }
}
@media(max-width:360px) { .tool-studio.vc-workspace .studio-fields { grid-template-columns:minmax(0,1fr); } .tool-studio.vc-workspace .studio-panel { padding:16px; } }
@media(prefers-reduced-motion:reduce) { .tool-studio.vc-workspace :is(.studio-button,.studio-field input,.studio-field select,.studio-upload,.studio-guide summary) { transition:none!important; transform:none!important; } }
.tool-studio.vc-workspace [hidden] { display:none!important; }
@media(forced-colors:active) { .tool-studio.vc-workspace .studio-hero h1 { background:none; -webkit-text-fill-color:CanvasText; color:CanvasText; } .tool-studio.vc-workspace .studio-button { border:2px solid ButtonText; } }

.tool-studio.vc-workspace [data-tool-state=empty] .studio-file-state { display:none; }
@media(max-width:660px) { .tool-studio.vc-workspace .studio-upload-intro p { display:none; } .tool-studio.vc-workspace .studio-upload-intro h2 { margin-bottom:16px; font-size:16px; } .tool-studio.vc-workspace .studio-upload-icon { margin-bottom:10px; } }
/* Keep the pressed depth distinct even while the pointer remains over the button. */
.tool-studio.vc-workspace .studio-button:not(:disabled):active { box-shadow:var(--studio-pressed-shadow); }