:root{
  --bg:#0b0b10; --bg2:#12121a; --card:#16161f; --line:#262633;
  --text:#e9e9f0; --muted:#9a9ab0; --brand:#ff4d8d; --brand2:#8b5cf6;
  --ok:#37d399; --danger:#ff5c6c; --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 600px at 70% -10%, #1c1430 0%, transparent 60%), var(--bg);
  color:var(--text); font:16px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
  min-height:100vh; display:flex; flex-direction:column;
}
a{color:inherit}
.hidden{display:none !important}
.muted{color:var(--muted)}

.nav{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 22px; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:rgba(11,11,16,.8); backdrop-filter:blur(10px); z-index:20;
}
.brand{font-weight:800; letter-spacing:-.02em; font-size:20px; text-decoration:none}
.brand span{color:var(--brand)}
.nav-right{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.pill{
  padding:6px 12px; border-radius:999px; background:var(--bg2); border:1px solid var(--line);
  font-size:14px; white-space:nowrap;
}
.pill b{color:var(--brand)}

.btn{
  border:0; cursor:pointer; border-radius:10px; padding:9px 16px; font-weight:600; font-size:14px;
  color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand2));
  transition:transform .06s ease, opacity .2s;
}
.btn:hover{opacity:.92}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent; border:1px solid var(--line); color:var(--text)}
.btn.big{padding:12px 22px; font-size:15px}
.btn.big .cost{opacity:.8; font-weight:500; margin-left:6px; font-size:13px}
.btn:disabled{opacity:.5; cursor:not-allowed}

main{flex:1; width:100%; max-width:960px; margin:0 auto; padding:28px 20px 60px}

.studio-head h1{font-size:34px; letter-spacing:-.03em; margin:6px 0 6px}
.studio-head .sub{color:var(--muted); margin:0 0 20px}

.prompt-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px}
.prompt-card textarea{
  width:100%; resize:vertical; border:0; outline:0; background:transparent; color:var(--text);
  font:inherit; font-size:16px; padding:6px 4px;
}
.prompt-row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px}
.hint{font-size:13px; color:var(--muted)}
.hint.err{color:var(--danger)}

.stage{
  margin-top:22px; aspect-ratio:1/1; width:100%; max-width:560px; margin-left:auto; margin-right:auto;
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative;
}
.placeholder{color:var(--muted); font-size:14px}
.result{width:100%; height:100%; object-fit:contain; display:block}
.result-actions{display:flex; gap:10px; justify-content:center; margin-top:14px}

.spinner{display:flex; flex-direction:column; align-items:center; gap:14px; color:var(--muted)}
.ring{width:44px; height:44px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--brand); animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.gallery-wrap{margin-top:48px}
.gallery-wrap h2{font-size:20px; margin:0 0 14px}
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
.gallery img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px; border:1px solid var(--line); background:var(--bg2); cursor:zoom-in}

.foot{
  border-top:1px solid var(--line); padding:20px; display:flex; gap:16px; justify-content:space-between;
  color:var(--muted); font-size:14px; flex-wrap:wrap;
}
.foot nav{display:flex; gap:16px}
.foot a{color:var(--muted); text-decoration:none}
.foot a:hover{color:var(--text)}

.modal{position:fixed; inset:0; background:rgba(5,5,8,.7); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px}
.modal-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; width:100%; max-width:380px; position:relative}
.modal-card h3{margin:0 0 16px; font-size:22px}
.modal-x{position:absolute; top:12px; right:14px; background:0; border:0; color:var(--muted); font-size:24px; cursor:pointer; line-height:1}
#authForm{display:flex; flex-direction:column; gap:12px}
#authForm label{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted)}
#authForm input{background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:11px 12px; color:var(--text); font:inherit; font-size:15px}
#authForm input:focus{outline:0; border-color:var(--brand2)}
.form-error{color:var(--danger); font-size:14px; margin:0}
.switch{margin:16px 0 0; font-size:14px; color:var(--muted); text-align:center}
.switch a{color:var(--brand)}

.plans{display:flex; flex-direction:column; gap:10px}
.plan{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--bg2); cursor:pointer}
.plan:hover{border-color:var(--brand2)}
.plan .credits{font-weight:700}
.plan .price{color:var(--brand)}

.toast{position:fixed; left:50%; bottom:28px; transform:translateX(-50%); background:#1d1d29; border:1px solid var(--line); color:var(--text); padding:12px 18px; border-radius:12px; z-index:60; box-shadow:0 10px 30px rgba(0,0,0,.4); max-width:90vw}
.toast.err{border-color:var(--danger)}
.toast.ok{border-color:var(--ok)}

@media(max-width:560px){
  .studio-head h1{font-size:26px}
  .nav{padding:12px 14px}
  main{padding:20px 14px 48px}
}