/* Studio page layout; colours, type and buttons come from explore.css. */
body.studio-page{overflow:auto;background:var(--bg)}
.topbar.solid{position:sticky}
.links a.current{color:var(--text);background:var(--surface-2)}
.studio{max-width:1160px;margin:0 auto;padding:24px 20px 56px}
.studio-hero{display:flex;gap:20px;align-items:flex-end;justify-content:space-between;margin:4px 0 18px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.studio-hero h1{margin:0 0 6px;font-size:22px;font-weight:600;line-height:1.25}
.studio-hero .lede{max-width:640px;margin:0}
.service{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;max-width:380px}
.service i{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none;margin-top:6px}
.service[data-state=ready] i{background:var(--ok)}
.service[data-state=offline] i{background:var(--warn)}
.service b{display:block;font-size:13.5px;font-weight:600}.service small{color:var(--muted);font-size:12.5px;line-height:1.45;display:block;margin-top:2px}
.banner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;margin-bottom:16px}
.banner b{display:block;font-weight:600}.banner small{color:var(--muted)}
.grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:16px;align-items:start}
.side{display:grid;gap:16px}
.card{padding:16px}
.card-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.card-head h2{margin:0;font-size:15px;font-weight:600;flex:1}
.step-dot{width:22px;height:22px;border-radius:4px;display:grid;place-items:center;border:1px solid var(--line);color:var(--muted);font-weight:600;font-size:12px}
.drop{position:relative;display:grid;justify-items:center;text-align:center;gap:4px;padding:22px 16px;border:1px dashed var(--line);border-radius:var(--radius);background:var(--bg);cursor:pointer;margin-bottom:10px}
.drop.compact{padding:12px 14px;grid-template-columns:auto 1fr;justify-items:start;text-align:left;column-gap:12px}
.drop.compact .drop-icon{grid-row:span 2}
.drop:hover,.drop.over{border-color:var(--accent)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop-icon{width:22px;height:22px;color:var(--muted)}
.drop b{font-size:14px;font-weight:500}.drop small{color:var(--muted);font-size:12.5px}
.drop.filled{border-style:solid;border-color:var(--accent)}
.check{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:10px 12px;border-radius:var(--radius);border:1px solid var(--line-soft);background:var(--surface-2);margin:-2px 0 12px;font-size:13px}
.check img,.check canvas{width:120px;aspect-ratio:16/9;object-fit:cover;border-radius:4px;background:#000}
.check ul{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.check li{padding-left:16px;position:relative;color:var(--soft)}
.check li::before{content:"";position:absolute;left:2px;top:7px;width:6px;height:6px;border-radius:50%;background:var(--ok)}
.check li.warn::before{background:var(--warn)}.check li.bad::before{background:var(--bad)}
.check.text{grid-template-columns:1fr}
.optional{margin:4px 0 12px;font-size:13.5px}
.optional summary{cursor:pointer;color:var(--soft)}.optional summary em{font-style:normal;color:var(--muted);font-size:12.5px;margin-left:6px}
.file-line{display:grid;gap:4px;margin-top:8px}.file-line small{color:var(--muted);font-size:12px}
.modes-pick{border:0;padding:0;margin:4px 0 14px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.modes-pick legend{font-size:12px;color:var(--muted);margin-bottom:6px}
.modes-pick label{cursor:pointer;position:relative}
.modes-pick input{position:absolute;opacity:0}
.modes-pick span{display:block;padding:9px 11px;border-radius:6px;border:1px solid var(--line);height:100%}
.modes-pick b{display:block;font-size:13.5px;font-weight:600}.modes-pick small{color:var(--muted);font-size:12px}
.modes-pick input:checked+span{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.modes-pick input:focus-visible+span{outline:2px solid var(--accent);outline-offset:1px}
.primary.wide{width:100%;padding:10px 14px}
.primary:disabled{opacity:.4;cursor:not-allowed;filter:none}
.small-btn{padding:7px 12px;font-size:13.5px}
.note{color:var(--muted);font-size:12.5px;margin:10px 0 0;line-height:1.5}
.note.bad{color:var(--bad)}.note.good{color:var(--ok)}
.progress{margin-top:14px;padding:12px;border-radius:var(--radius);border:1px solid var(--line-soft)}
.progress-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.progress progress{width:100%;accent-color:var(--accent)}
.progress small{color:var(--muted)}
.runs{display:grid;gap:6px}
.run{display:grid;grid-template-columns:80px 1fr auto;gap:12px;align-items:center;padding:6px;border-radius:6px;border:1px solid var(--line-soft);text-decoration:none;color:var(--text);background:none}
.run img{width:80px;aspect-ratio:16/9;object-fit:cover;border-radius:4px}
.run b{display:block;font-size:13.5px;font-weight:600}.run small{color:var(--muted);font-size:12px}
.run em{font-style:normal;color:var(--accent);font-size:13px;white-space:nowrap;padding-right:6px}
.run:hover{border-color:var(--line);background:var(--surface-2)}
button.run{font:inherit;text-align:left;width:100%;color:var(--text)}
.account{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);color:var(--text);font-weight:600;font-size:15px}
.account b{display:block;font-weight:600}.account small{color:var(--muted);font-size:12.5px}
.account-actions{display:flex;gap:8px;align-items:center}
.viewer-dialog{width:min(1100px,96vw);height:min(760px,90vh);padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--text);overflow:hidden}
.viewer-dialog[open]{display:flex;flex-direction:column}
.viewer-dialog::backdrop{background:rgba(5,8,12,.7)}
.viewer-head{display:flex;align-items:center;gap:12px;padding:8px 10px 8px 14px;border-bottom:1px solid var(--line)}
.viewer-head small{color:var(--muted);flex:1}
.viewer-head .close{margin:0}
.viewer-stage{position:relative;flex:1;background:var(--bg)}
.viewer-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.viewer-tools{display:flex;gap:8px;align-items:center;padding:8px 14px;border-top:1px solid var(--line)}
.viewer-tools button{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:6px;border:1px solid var(--line);background:none;color:var(--soft)}
.viewer-tools button:hover{background:var(--surface-2);color:var(--text)}
@media (max-width:900px){.grid{grid-template-columns:1fr}.studio-hero{flex-direction:column;align-items:stretch}.modes-pick{grid-template-columns:1fr}.banner{flex-direction:column;align-items:stretch}}
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.checklist li{display:grid;gap:1px;padding:8px 10px 8px 26px;border:1px solid var(--line-soft);border-radius:6px;position:relative}
.checklist li::before{content:"";position:absolute;left:10px;top:14px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.checklist b{font-weight:600;font-size:13.5px}.checklist span{color:var(--muted);font-size:12.5px;line-height:1.45}
.card-head .link-button{text-decoration:none;font-size:13px;color:var(--accent)}