.ai-studio { --ai-accent: #c393ff; --ai-line: rgba(198,159,255,.25); }
.ai-workbench { display:grid; grid-template-columns:minmax(290px, .85fr) minmax(0,1.35fr); gap:24px; align-items:start; }
.ai-composer { min-width:0; background:linear-gradient(145deg,rgba(104,54,166,.2),rgba(17,19,25,.94)); border:1px solid var(--ai-line); }
.ai-studio .note { padding:0; background:none; border:0; font-size:.85rem; line-height:1.6; }
.ai-studio .form-grid > * { min-width:0; }
.ai-studio input,.ai-studio select,.ai-studio textarea { min-width:0; }
.ai-composer fieldset { border:0; padding:0; margin:0; min-width:0; }
.ai-composer legend { padding:0; margin-bottom:16px; }
.ai-composer textarea { resize:vertical; min-height:140px; }
.ai-mode-switch { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:20px; }
.ai-mode-switch button { color:inherit; font:inherit; font-weight:700; min-height:48px; border-radius:12px; border:1px solid var(--ai-line); background:rgba(255,255,255,.04); cursor:pointer; }
.ai-mode-switch button[aria-pressed="true"] { color:#efdeff; background:linear-gradient(135deg,rgba(170,84,255,.4),rgba(119,61,191,.25)); border-color:var(--ai-accent); box-shadow:inset 0 1px 0 #ffffff40,0 0 20px #a65bff15; }
.ai-prompt-ideas { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 20px; }
.ai-reference { height:110px; padding:8px; margin:8px 0; background:#0005; border-radius:12px; }
.ai-reference img { width:100%; height:100%; object-fit:contain; }
.ai-checkout { margin-top:18px; padding-top:16px; border-top:1px solid var(--ai-line); }
.ai-checkout [role="status"] { font-size:.9rem; margin:14px 0 0; }
#paid-quote-panel { border:1px solid var(--ai-accent); border-radius:14px; padding:16px; margin-top:16px; background:#a65bff12; }
#paid-quote-panel h3 { font-size:1.15rem; }
.ai-output-column { min-width:0; display:grid; gap:20px; }
.ai-output .studio-section-head { margin-bottom:16px; gap:12px; }
.ai-output .studio-section-head h3,.ai-job-panel h3 { margin:0; }
.ai-output-stage { position:relative; width:100%; box-sizing:border-box; min-width:0; min-height:300px; max-height:580px; aspect-ratio:16/9; background:radial-gradient(ellipse at 50% 60%,#7c35a024,transparent 70%),#05070d; border:1px solid var(--ai-line); border-radius:16px; display:grid; place-items:center; overflow:hidden; }
.ai-output-stage img,.ai-output-stage video { position:absolute; inset:0; width:100%; height:100%; min-height:0; object-fit:contain; }
.ai-output-empty { min-width:0; max-width:100%; box-sizing:border-box; padding:24px; text-align:center; overflow-wrap:anywhere; }
.ai-output-empty>span { color:var(--ai-accent); font-size:64px; line-height:1; }
.ai-output-empty h3 { margin:18px 0 12px; }
.ai-output-empty p { color:var(--ink2,#b7adba); line-height:1.7; }
.ai-saved-badge { font-size:.75rem; white-space:nowrap; color:#97f2b2; background:#5bea8312; border:1px solid #5bea832e; border-radius:99px; padding:6px 9px; }
.ai-result-actions { display:flex; flex-wrap:wrap; gap:8px; }
.ai-result-actions button { min-height:40px; }
.ai-studio .btn.primary { background:linear-gradient(135deg,#bc7bf1,#d9b3ff); color:#160c20; border:1px solid #ecd8ff; box-shadow:inset 0 1px 0 #ffffffaa,0 4px 20px #bc7bf11a; }
.ai-job { display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-top:1px solid var(--ai-line); font-size:.88rem; }
.ai-job strong,.ai-job small { display:block; overflow-wrap:anywhere; }
.ai-job small { margin-top:5px; color:var(--ink2,#b7adba); }
.ai-job button { align-self:center; }
.ai-history { margin-top:32px; }
.ai-history .library-cards { grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); }
.ai-other-provider { margin-top:32px; border:1px solid #ffffff24; border-radius:16px; padding:20px; }
.ai-other-provider summary { cursor:pointer; font-weight:600; }
.ai-studio button:focus-visible,.ai-other-provider summary:focus-visible { outline:3px solid #eedcff; outline-offset:4px; }
.ai-studio [hidden] { display:none !important; }
@media(min-width:1100px) { .ai-output-column { position:sticky; top:100px; } }
@media(max-width:800px) { .ai-workbench { grid-template-columns:1fr; } .ai-output-column { position:static; } .ai-output-stage { min-height:300px; aspect-ratio:auto; } .ai-saved-badge { white-space:normal; } }
@media(prefers-reduced-motion:reduce) { .ai-studio * { scroll-behavior:auto !important; transition:none !important; } }