.studio-page { min-height:100vh; background:var(--inset); }
.studio-header { min-height:68px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(1.1rem,4vw,2.5rem); background:var(--surface); border-bottom:1px solid var(--border); }
.studio-header-actions { display:flex; align-items:center; gap:1rem; }.preview-label,.overline { font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted); }.studio-header .btn { padding:.65em 1em; }
.studio-layout { max-width:1400px; margin:auto; display:grid; grid-template-columns:240px minmax(0,1fr); min-height:calc(100vh - 68px); }.studio-rail { padding:1.5rem; border-right:1px solid var(--border); background:var(--paper); }.account-chip { display:flex; align-items:center; gap:.7rem; line-height:1.2; }.account-chip small,.rail-note,.job-copy small,.gallery-card small { display:block; color:var(--ink-muted); font-size:.82rem; margin-top:.2rem; }.avatar { display:grid; place-items:center; width:2.25rem; height:2.25rem; border-radius:50%; background:var(--accent); font-weight:800; }.studio-nav { display:grid; gap:.25rem; margin:2rem 0; }.studio-nav a { padding:.65rem .8rem; border-radius:9px; text-decoration:none; font-weight:800; }.studio-nav a.active { background:var(--accent); }.rail-note { border-top:1px solid var(--border); padding-top:1.2rem; line-height:1.5; }.studio-main { max-width:1020px; width:100%; padding:clamp(1.3rem,4vw,3rem); }.studio-intro { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:2rem; }.studio-intro h1 { font-size:clamp(2rem,5vw,3.3rem); letter-spacing:-.035em; line-height:1.04; }.studio-intro p:not(.kicker) { max-width:52ch; color:var(--ink-soft); margin:.65rem 0 0; }.live-state { white-space:nowrap; border:1px solid var(--border); border-radius:999px; background:var(--surface); padding:.45rem .75rem; font-size:.82rem; font-weight:800; }.live-state i { display:inline-block; width:.55em;height:.55em;border-radius:50%;background:var(--success);margin-right:.35rem; }.create-panel,.status-panel,.gallery-panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:clamp(1.15rem,3vw,2rem); margin-bottom:1.25rem; }.panel-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1.3rem; }.panel-heading h2 { font-size:1.45rem; line-height:1.15; }.private-badge,.job-count { border-radius:999px; padding:.3rem .65rem; font-size:.75rem; font-weight:800; background:color-mix(in srgb,var(--accent) 26%,transparent); }.create-panel label { display:block; font-weight:800; font-size:.92rem; }.create-panel textarea,.create-panel select { display:block; width:100%; margin:.4rem 0; border:1px solid var(--border-strong); border-radius:10px; padding:.75rem; font:inherit; color:var(--ink); background:var(--inset); }.create-panel textarea { resize:vertical; }.create-panel small { display:block; font-weight:400; color:var(--ink-muted); }.create-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem; }.job-submit { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.35rem; }.job-submit p { font-size:.9rem; line-height:1.25; margin:0; }.job-submit span { color:var(--ink-muted); }.job-list { display:grid; gap:.75rem; }.empty-jobs { margin:0; color:var(--ink-muted); }.job { display:flex; align-items:center; gap:.8rem; padding:.8rem; background:var(--inset); border-radius:12px; }.job-icon { display:grid; place-items:center; width:2.35rem; height:2.35rem; background:var(--accent); border-radius:9px; }.job-copy { flex:1; min-width:0; }.job-copy strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.progress { height:5px; background:var(--border); border-radius:99px; overflow:hidden; margin-top:.55rem; }.progress i { display:block; height:100%; width:10%; background:var(--accent); transition:width .3s ease; }.job-status { font-size:.78rem; font-weight:800; white-space:nowrap; }.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:1rem; }.gallery-card { overflow:hidden; border:1px solid var(--border); border-radius:12px; background:var(--inset); }.gallery-card img,.generated-art { width:100%; height:140px; object-fit:cover; }.gallery-card > div:last-child { padding:.75rem; }.gallery-card span { display:block; color:var(--accent-deep); text-transform:uppercase; font-weight:800; font-size:.68rem; letter-spacing:.08em; }.gallery-card strong { display:block; line-height:1.2; margin-top:.25rem; }.generated-art { display:grid; place-items:center; background:linear-gradient(135deg,#2c2115,#896331 55%,#d6a138); color:#fff5dd; font-family:var(--wordmark); font-size:3rem; letter-spacing:.08em; }.generated-art span { color:inherit; font-size:inherit; }.nav-link,.studio-link a { font-weight:800; text-decoration:none; }.nav-link { margin-right:.7rem; }.studio-link { color:var(--ink-muted); font-size:.9rem; }.studio-link a { color:var(--ink); text-underline-offset:3px; }
.workspace-bar,.project-panel { display:flex; justify-content:space-between; gap:1rem; align-items:center; background:color-mix(in srgb,var(--surface) 90%,var(--accent)); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.15rem; margin-bottom:1.25rem; }.workspace-bar strong,.workspace-bar small { display:block; }.workspace-bar strong { margin-top:.2rem; }.workspace-bar small,.sync-state small { color:var(--ink-muted); font-size:.82rem; }.sync-state { display:flex; gap:.55rem; align-items:flex-start; }.sync-state i { width:.6rem;height:.6rem;border-radius:50%;background:var(--accent-deep);margin-top:.32rem; }.sync-state strong,.sync-state small { display:block; font-size:.84rem; }.project-panel { display:block; background:var(--surface); box-shadow:var(--shadow-sm); }.project-copy,.connection-note { color:var(--ink-soft); margin:-.5rem 0 1rem; max-width:65ch; }.connection-note { font-size:.88rem; }.draft-state { color:var(--ink-muted); font-size:.78rem; font-weight:800; }.project-actions { display:flex; align-items:center; gap:1rem; font-size:.84rem; color:var(--ink-muted); }.project-actions .btn { padding:.62em 1em; }
.studio-layout--entry{grid-template-columns:minmax(0,1fr);max-width:1120px}.studio-layout--entry .studio-main{margin-inline:auto}
@media(max-width:720px){.studio-layout{grid-template-columns:1fr}.studio-rail{border-right:0;border-bottom:1px solid var(--border);padding:1rem}.studio-nav{display:flex;margin:1rem 0;overflow:auto}.rail-note{display:none}.studio-intro{display:block}.live-state{display:inline-block;margin-top:1rem}.preview-label{display:none}.create-grid{grid-template-columns:1fr}.job-submit{align-items:flex-start;flex-direction:column}.workspace-bar{display:block}.sync-state{margin-top:.75rem}.project-actions{align-items:flex-start;flex-direction:column}.nav-link{display:none}}