.studio-page { min-height: 100vh; background: radial-gradient(circle at 75% 12%, rgba(99,102,241,.24), transparent 28rem), var(--dark-bg); }
.studio-shell { max-width: 1240px; margin: 0 auto; padding: 9rem 2rem 4rem; }
.studio-intro { margin-bottom: 2.5rem; }.eyebrow { color: #8b8cff; letter-spacing: .16em; font-size: .74rem; font-weight: 800; margin: 0 0 .7rem; }.studio-intro h1 { font-size: clamp(2.7rem,6vw,5rem); margin: 0; color: var(--text-primary); }.studio-intro>p:last-child { color: var(--text-secondary); font-size: 1.1rem; margin: .8rem 0; }
.studio-grid { display: grid; grid-template-columns: minmax(320px,.88fr) minmax(380px,1.12fr); gap: 1.5rem; align-items: stretch; }.generator-panel,.result-panel,.auth-card { border: 1px solid rgba(148,163,184,.2); background: color-mix(in srgb, var(--dark-surface) 90%, transparent); box-shadow: var(--shadow-xl); border-radius: 22px; }.generator-panel { padding: 1.7rem; }.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom: 1.5rem; }.panel-heading h2 { color:var(--text-primary); margin:0 0 .3rem; }.panel-heading p,.studio-note { margin:0; color:var(--text-muted); font-size:.85rem; }.account-status { border-radius:99px; padding:.4rem .65rem; background:rgba(99,102,241,.15); color:#b7b8ff; font-size:.75rem; white-space:nowrap; }.generator-panel label,.generator-panel legend { display:block; color:var(--text-secondary); font-size:.9rem; font-weight:700; margin-bottom:.65rem; }.generator-panel textarea { width:100%; height:175px; resize:vertical; border:1px solid rgba(148,163,184,.28); border-radius:14px; background:rgba(15,23,42,.45); color:var(--text-primary); padding:1rem; line-height:1.55; font:inherit; }.generator-panel textarea:focus,.auth-card input:focus { outline:2px solid var(--primary-color); border-color:transparent; }.prompt-tools { display:flex; gap:.5rem; flex-wrap:wrap; margin: .8rem 0 1.4rem; }.chip { cursor:pointer; border:1px solid rgba(129,140,248,.35); color:#c7d2fe; background:rgba(99,102,241,.12); padding:.45rem .65rem; border-radius:99px; font-size:.75rem; }.generator-panel fieldset { border:0; padding:0; margin:0 0 1.5rem; }.size-options { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }.size-options label { margin:0; }.size-options input { position:absolute; opacity:0; }.size-options span { display:block; text-align:center; padding:.7rem .2rem; border:1px solid rgba(148,163,184,.24); border-radius:10px; color:var(--text-primary); cursor:pointer; line-height:1.25; }.size-options small { color:var(--text-muted); }.size-options input:checked + span { border-color:#818cf8; background:rgba(99,102,241,.18); }.generate-button { width:100%; border:0; border-radius:12px; cursor:pointer; padding:.95rem 1rem; font:700 1rem inherit; color:white; background:var(--gradient-primary); transition:transform .2s,opacity .2s; }.generate-button:hover { transform:translateY(-2px); }.generate-button:disabled { opacity:.55; cursor:wait; transform:none; }.studio-note { line-height:1.5; margin-top:1rem; }.studio-note a,.terms-row a { color:#a5b4fc; }.result-panel { position:relative; overflow:hidden; min-height:570px; display:flex; align-items:center; justify-content:center; padding:1rem; }.result-empty,.result-loading { color:var(--text-muted); text-align:center; }.result-empty i { font-size:3rem; color:#818cf8; }.result-empty h2,.result-loading h2 { color:var(--text-primary); margin-bottom:.4rem; }.image-loader { width:50px; height:50px; border:3px solid rgba(129,140,248,.25); border-top-color:#818cf8; border-radius:50%; margin:0 auto 1.5rem; animation:spin 1s linear infinite; }@keyframes spin{to{transform:rotate(360deg)}}#result-content { width:100%; }#generated-image { display:block; width:100%; max-height:590px; object-fit:contain; border-radius:13px; background:#0b1020; }.result-actions { display:flex; gap:.7rem; margin-top:1rem; }.result-actions button,.download-button { border:1px solid rgba(148,163,184,.3); border-radius:9px; padding:.65rem .9rem; font:600 .85rem inherit; color:var(--text-primary); background:transparent; cursor:pointer; text-decoration:none; }.download-button { background:rgba(99,102,241,.2); }.revised-prompt { color:var(--text-muted); font-size:.8rem; line-height:1.45; margin:.9rem .2rem 0; }.studio-message { min-height:1.25rem; color:#fda4af; text-align:center; margin:.8rem 0 0; font-size:.86rem; }.auth-modal { position:fixed; inset:0; z-index:9999; display:none; place-items:center; padding:1rem; background:rgba(2,6,23,.72); backdrop-filter:blur(8px); }.auth-modal.active { display:grid; }.auth-card { position:relative; width:min(440px,100%); padding:2rem; }.auth-card h2 { color:var(--text-primary); margin:.2rem 0 .5rem; }.auth-card>p:not(.eyebrow):not(.studio-message) { color:var(--text-secondary); }.close-auth { position:absolute; top:.8rem; right:1rem; border:0; background:transparent; color:var(--text-muted); font-size:1.8rem; cursor:pointer; }.auth-card form { display:grid; gap:.55rem; margin-top:1.4rem; }.auth-card label { color:var(--text-secondary); font-weight:700; font-size:.85rem; }.auth-card input[type=email],.auth-card input[type=password] { border:1px solid rgba(148,163,184,.28); border-radius:10px; padding:.8rem; background:rgba(15,23,42,.45); color:var(--text-primary); font:inherit; margin-bottom:.5rem; }.terms-row { display:flex; gap:.55rem; align-items:flex-start; line-height:1.45; margin:.2rem 0 .7rem; }.terms-row input { margin-top:.2rem; }.text-button { width:100%; border:0; margin-top:1rem; background:transparent; color:#a5b4fc; cursor:pointer; font:inherit; }
@media(max-width:850px){.studio-grid{grid-template-columns:1fr}.result-panel{min-height:430px}.studio-shell{padding:7rem 1rem 2rem}}@media(max-width:500px){.panel-heading{display:block}.account-status{display:inline-block;margin-top:.6rem}.result-actions{flex-direction:column}}