/* Creative studio: deliberately scoped so existing creation flows keep their theme. */
body:has(#tab-studio.active) { background:#101514; }
body:has(#tab-studio.active) .topnav { background:#101514f5; border-color:#293530; }
body:has(#tab-studio.active) .topnav .tab.active { color:#b9efd7; background:#b9efd712; }
#tab-studio { --st-mint:#b9efd7; --st-muted:#a3b1ab; color:#eef4f0; max-width:1440px; margin:auto; padding:0 42px 40px; }
#tab-studio button, .studio-dialog button { font-family:inherit; }
.studio-hero { position:relative; min-height:330px; display:flex; align-items:center; overflow:hidden; margin:0 -42px 30px; padding:42px; isolation:isolate; }
.studio-hero::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#101514 10%,#101514aa 55%,#10151422),linear-gradient(0deg,#101514,transparent 75%),url('/classic-static/studio/hero-midnight.webp') center top/cover; }
.studio-hero h1 { font-size:clamp(38px,4.6vw,64px); letter-spacing:3px; margin:0 0 18px; font-weight:650; }
#tab-studio .studio-hero h1 { background:none; -webkit-text-fill-color:#eef4f0; color:#eef4f0; }
.studio-hero p { margin:0; font-size:19px; color:#d1ddd7; letter-spacing:2px; }
.studio-hero-note { margin-left:auto; align-self:flex-end; color:var(--st-mint); font-size:13px; letter-spacing:3px; padding:0 0 8px 25px; }
.studio-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:34px; }
.studio-filters { display:flex; gap:9px; flex-wrap:wrap; }
.studio-filter { border:1px solid #303d37; border-radius:8px; color:#c3cdc7; background:#1a211e; padding:11px 22px; font-size:13px; cursor:pointer; }
.studio-filter[aria-pressed=true] { background:var(--st-mint); border-color:var(--st-mint); color:#153c2b; font-weight:650; }
.studio-filter { min-height:44px; }
.studio-search { display:flex; align-items:center; gap:10px; color:var(--st-muted); border:1px solid #303d37; border-radius:8px; padding:0 13px; width:290px; background:#1a211e; }
#tab-studio .studio-search input { width:100%; min-width:0; padding:12px 0; color:#eef4f0; border:0; outline:0; background:transparent; font:inherit; font-size:13px; box-shadow:none!important; }
.studio-search:focus-within { outline:2px solid var(--st-mint); outline-offset:3px; }
.studio-search input::placeholder { color:#9aa9a1; }
.studio-group { margin:0 0 32px; }
.studio-group-head { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.studio-group-head>svg { color:var(--st-mint); }
.studio-group h2 { font-size:21px; margin:0; font-weight:600; }
.studio-group-head p { font-size:12px; color:var(--st-muted); margin:0 0 0 8px; }
.studio-group-count { margin-left:auto; color:#92a59a; font-size:12px; }
.studio-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.studio-card { padding:0; overflow:hidden; text-align:left; color:inherit; background:#1a211e; border:1px solid #303b35; border-radius:10px; cursor:pointer; min-width:0; transition:transform .2s,border-color .2s; }
.studio-card:hover { transform:translateY(-4px); border-color:#89b9a1; }
.studio-card:focus-visible,.studio-filter:focus-visible,.studio-reset:focus-visible,.studio-dialog button:focus-visible { outline:2px solid #b9efd7; outline-offset:4px; }
.studio-image { aspect-ratio:4/3; overflow:hidden; background:#243c32; }
.studio-image img { width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block; transition:transform .4s; }
.studio-card:hover img { transform:scale(1.035); }
.studio-card-body { position:relative; padding:18px 38px 18px 18px; }
.studio-card h3 { margin:0 0 9px; font-size:17px; font-weight:600; }
.studio-card p { font-size:12px; color:#b3c1b8; line-height:1.7; margin:0; }
.studio-card-arrow { position:absolute; right:16px; top:21px; color:#c4dacf; }
.studio-grid-wide { grid-template-columns:repeat(2,minmax(0,1fr)); }
.studio-grid-wide .studio-card { display:grid; grid-template-columns:42% 1fr; align-items:stretch; }
.studio-grid-wide .studio-image { aspect-ratio:auto; min-height:170px; }
.studio-grid-wide .studio-card-body { align-self:center; padding:22px 38px 22px 22px; }
.studio-card-tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:16px; }
.studio-card-tags span { font-size:10px; color:#c3d2c9; border:1px solid #516359; border-radius:20px; padding:3px 9px; }
.studio-footer { padding-top:14px; display:flex; justify-content:space-between; gap:20px; color:#96a59d; font-size:11px; letter-spacing:1px; }
.studio-empty { padding:65px 20px; text-align:center; border:1px dashed #415349; border-radius:12px; }
.studio-empty p { color:var(--st-muted); font-size:14px; }
.studio-reset { border:1px solid #789787; color:#b9efd7; background:transparent; padding:9px 18px; border-radius:7px; }
.studio-dialog { width:min(520px,calc(100vw - 32px)); max-height:90vh; padding:0; border:1px solid #475e50; border-radius:16px; background:#18211c; color:#eef4f0; box-shadow:0 30px 100px #0008; }
.studio-dialog::backdrop { background:#060e0ac9; backdrop-filter:blur(6px); }
.studio-dialog-image { width:100%; aspect-ratio:3/2; max-height:280px; object-fit:cover; object-position:center 25%; }
.studio-dialog-content { padding:26px; }
.studio-dialog h2 { font-size:26px; margin-bottom:14px; }
.studio-dialog p { color:#b6c6bc; line-height:1.85; font-size:14px; }
.studio-dialog-close { position:absolute; right:12px; top:12px; border:1px solid #ffffff60; border-radius:50%; width:44px; height:44px; background:#101514df; color:#fff; }
.studio-dialog-hint { border-top:1px solid #3a4d40; padding-top:16px; }
.studio-launch { width:100%; border:0; border-radius:8px; background:#b9efd7; color:#173b29; padding:13px 18px; font-size:14px; font-weight:600; }
.studio-launch:disabled { opacity:.65; cursor:wait; }
.studio-error { color:#ffc6ab!important; }
@media(max-width:900px) { #tab-studio { padding:0 24px 32px; } .studio-hero { margin:0 -24px 25px; padding:36px 24px; } .studio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .studio-toolbar { flex-wrap:wrap; } .studio-search { width:100%; } .studio-hero-note { display:none; } .studio-grid-wide .studio-card { display:block; } .studio-grid-wide .studio-image { aspect-ratio:4/3; min-height:0; } }
@media(max-width:640px) { #tab-studio { padding:0 16px 28px; } .studio-hero { margin:0 -16px 22px; padding:32px 16px; min-height:220px; } .studio-hero p { font-size:14px; letter-spacing:0; } .studio-filters { width:100%; gap:6px; } .studio-filter { flex:1; padding:10px 7px; font-size:12px; white-space:nowrap; } .studio-grid { gap:12px; } .studio-card-body { padding:13px 12px; } .studio-card h3 { font-size:16px; } .studio-card p { font-size:11px; } .studio-card-arrow { display:none; } .studio-group-head { flex-wrap:wrap; gap:8px; } .studio-group-head p { flex-basis:100%; margin:0; } .studio-group h2 { font-size:19px; } .studio-group-count { display:none; } .studio-grid-wide { grid-template-columns:1fr; } .studio-grid-wide .studio-card { display:grid; grid-template-columns:38% 1fr; } .studio-grid-wide .studio-image { aspect-ratio:auto; } .studio-grid-wide .studio-card-body { padding:18px 14px; } .studio-card-tags span { font-size:9px; padding:2px 6px; } .studio-footer { flex-direction:column; gap:8px; } }
@media(prefers-reduced-motion:reduce) { .studio-card,.studio-image img { transition:none; } .studio-card:hover,.studio-card:hover img { transform:none; } }
@media(max-width:640px) { .studio-hero::before { background-position:right top; } }
/* Independent tool workspace */
.studio-workspace { width:min(1000px,calc(100vw - 32px)); padding:28px; box-sizing:border-box; }
.studio-workspace-heading { padding-right:44px; }
.studio-workspace-heading h2 { margin:0 0 8px; }
.studio-workspace-heading p { margin:0 0 24px; }
.studio-session { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; }
.studio-session[hidden] { display:none; }
.studio-form fieldset { margin:0; padding:0; border:0; min-width:0; }
.studio-field { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; font-size:13px; color:#d4e5da; }
.studio-field input,.studio-field select,.studio-field textarea,.studio-output textarea { box-sizing:border-box; width:100%; min-width:0; border:1px solid #455a4d; border-radius:8px; background:#101914; padding:11px; color:#edf6f0; font:inherit; }
.studio-field input[type=file] { font-size:12px; }
.studio-field textarea { resize:vertical; line-height:1.7; }
.studio-field input:focus-visible,.studio-field select:focus-visible,.studio-field textarea:focus-visible { outline:2px solid #b9efd7; outline-offset:2px; }
.studio-settings { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.studio-settings p { grid-column:1/-1; }
.studio-form .studio-hint,.studio-model-note,.studio-form .studio-config,.studio-form .studio-progress { font-size:12px; }
.studio-form .studio-config:empty,.studio-progress:empty { display:none; }
.studio-reload { border:1px solid #7eab92; border-radius:6px; padding:8px 12px; color:#cbeedb; background:transparent; cursor:pointer; }
.studio-output { padding:18px; border:1px solid #36483d; border-radius:12px; background:#111a15; min-width:0; align-self:start; }
.studio-output h3 { margin:0 0 16px; font-size:15px; }
.studio-output img,.studio-output video { display:block; max-height:440px; width:100%; object-fit:contain; border-radius:8px; }
.studio-output .studio-output-cover { aspect-ratio:4/3; object-fit:cover; }
.studio-output audio { width:100%; }
.studio-save,.studio-open { display:inline-block; color:#b9efd7; margin:16px 18px 0 0; padding:8px 0; }
.studio-card { display:flex; flex-direction:column; }
.studio-image { width:100%; flex-shrink:0; }
.studio-recover { border:1px solid #7eab92; border-radius:6px; padding:10px 12px; margin-bottom:14px; color:#cbeedb; background:transparent; cursor:pointer; }
.studio-pending { overflow-wrap:anywhere; max-height:120px; overflow:auto; }
.studio-pending:empty { display:none; }
.studio-workspace :disabled { opacity:.6; }
@media(max-width:640px) { .studio-workspace { padding:20px; } .studio-session { grid-template-columns:1fr; gap:20px; } .studio-filters { flex-wrap:wrap; } .studio-filter { flex:1 0 28%; } }