/* ===== Text to Image ===== */
.t2i-wrap{max-width:1080px;margin:0 auto;padding:34px 20px 90px}

.t2i-hero{text-align:center;max-width:640px;margin:0 auto 34px}
.t2i-badge{display:inline-block;background:#f6eef9;color:#6C2BD9;font-size:12.5px;font-weight:700;
  padding:7px 16px;border-radius:999px;margin-bottom:16px;letter-spacing:.3px}
.t2i-hero h1{font-family:'Fraunces',serif;font-size:clamp(30px,5.2vw,46px);font-weight:600;line-height:1.08;letter-spacing:-.5px;margin:0}
.t2i-hero h1 em{font-style:italic;background:linear-gradient(100deg,#F7459B,#8B3FE8);-webkit-background-clip:text;background-clip:text;color:transparent}
.t2i-hero p{color:#5b5054;font-size:16.5px;margin:12px auto 0;max-width:520px}

.t2i-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}

.t2i-card{background:#fff;border:1px solid #f3e6ee;border-radius:22px;padding:24px;box-shadow:0 20px 50px -30px rgba(140,40,120,.4)}

/* form */
.t2i-label{display:block;font-size:13.5px;font-weight:700;color:#1c1418;margin:0 0 8px}
.t2i-label span{color:#9a8a92;font-weight:500}
.t2i-textarea{width:100%;font-family:inherit;font-size:15px;line-height:1.55;color:#1c1418;
  padding:14px 15px;border:1.5px solid #ecdfe8;border-radius:14px;background:#fdfafc;resize:vertical;
  transition:border-color .15s,box-shadow .15s;box-sizing:border-box}
.t2i-textarea:focus{outline:none;border-color:#8B3FE8;box-shadow:0 0 0 3px rgba(139,63,232,.12);background:#fff}

/* dimension sliders (Height / Width) */
.t2i-dims{margin-top:20px;display:flex;flex-direction:column;gap:20px}
.t2i-dim-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.t2i-dim-head .t2i-label{margin:0}
.t2i-num{width:84px;font-family:inherit;font-size:14px;font-weight:600;color:#1c1418;text-align:center;
  padding:8px 10px;border:1.5px solid #ecdfe8;border-radius:10px;background:#fdfafc}
.t2i-num:focus{outline:none;border-color:#8B3FE8;box-shadow:0 0 0 3px rgba(139,63,232,.12);background:#fff}
.t2i-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;
  background:#eadbe4;outline:none;margin:0;cursor:pointer}
.t2i-range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:linear-gradient(135deg,#F7459B,#8B3FE8);border:2px solid #fff;box-shadow:0 2px 7px rgba(139,63,232,.45);cursor:pointer}
.t2i-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#8B3FE8;border:2px solid #fff;cursor:pointer}

/* advanced settings box */
.t2i-adv-box{margin-top:22px;border:1px solid #f0e4ee;border-radius:14px;padding:16px 18px;background:#fdfafc}
.t2i-adv-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.t2i-adv-title{font-size:14.5px;font-weight:700;color:#1c1418}
.t2i-adv-sub{font-size:12.5px;color:#9a8a92;margin-top:2px}
.t2i-configure{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid #eadbe4;
  border-radius:10px;padding:9px 14px;font-family:inherit;font-size:13.5px;font-weight:700;color:#6a5d63;
  cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s}
.t2i-configure:hover{color:#8B3FE8;border-color:#d9c3d6}
.t2i-caret{transition:transform .2s}
.t2i-configure.open .t2i-caret{transform:rotate(180deg)}
.t2i-adv{margin-top:14px}

.t2i-generate{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin-top:22px;
  background:linear-gradient(100deg,#F7459B,#8B3FE8);color:#fff;font-family:inherit;font-weight:700;font-size:16px;
  padding:15px;border:none;border-radius:14px;cursor:pointer;box-shadow:0 16px 34px -16px rgba(199,50,140,.65);
  transition:transform .15s,box-shadow .15s,opacity .15s}
.t2i-generate:hover{transform:translateY(-2px);box-shadow:0 22px 40px -18px rgba(199,50,140,.75)}
.t2i-generate:disabled{opacity:.6;cursor:not-allowed;transform:none}
.t2i-hint{display:flex;align-items:center;gap:6px;justify-content:center;margin:14px 0 0;font-size:12.5px;color:#9a8a92}
.t2i-hint b{color:#6a5d63}

/* result */
.t2i-result{display:flex;flex-direction:column;gap:14px}
.t2i-canvas{position:relative;aspect-ratio:1/1;border-radius:16px;overflow:hidden;
  background:linear-gradient(135deg,#faf5ff,#fdeef6);border:1px solid #f0e4ee;display:grid;place-items:center}
/* all states share the same cell so only the visible one shows, centred */
.t2i-canvas > *{grid-area:1/1}
.t2i-canvas img{width:100%;height:100%;object-fit:contain;display:block}
/* the hidden attribute must win over the display rules below */
.t2i-canvas [hidden]{display:none!important}
.t2i-empty,.t2i-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px;color:#9a8a92}
.t2i-empty p{margin:0;font-size:14px;max-width:220px}
.t2i-loading p{margin:0;font-weight:700;color:#6a5d63;font-size:15px}
.t2i-loading .t2i-sub{font-size:12.5px;color:#9a8a92}
.t2i-spinner{width:40px;height:40px;border-radius:50%;border:4px solid #efe0ee;border-top-color:#8B3FE8;animation:t2ispin 1s linear infinite}
@keyframes t2ispin{to{transform:rotate(360deg)}}

/* progress bar + percentage during generation */
.t2i-progress{width:190px;max-width:72%;height:7px;border-radius:99px;background:#efe0ee;overflow:hidden;margin-top:2px}
.t2i-progress-bar{display:block;height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,#F7459B,#8B3FE8);transition:width .35s ease}
.t2i-percent{font-size:14px;font-weight:800;color:#8B3FE8}

/* view full image */
.t2i-canvas img{cursor:zoom-in}
.t2i-expand{position:absolute;top:12px;right:12px;width:38px;height:38px;border:none;border-radius:50%;
  background:rgba(28,20,24,.55);display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px);z-index:2;transition:background .15s}
.t2i-expand:hover{background:rgba(28,20,24,.82)}

/* fullscreen lightbox */
.t2i-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(18,10,20,.92);display:flex;align-items:center;justify-content:center;padding:24px}
.t2i-lightbox[hidden]{display:none}
.t2i-lightbox img{max-width:96vw;max-height:92vh;border-radius:12px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.t2i-lb-close{position:absolute;top:18px;right:22px;width:44px;height:44px;border:none;border-radius:50%;
  background:rgba(255,255,255,.15);color:#fff;font-size:22px;line-height:1;cursor:pointer;backdrop-filter:blur(6px);transition:background .15s}
.t2i-lb-close:hover{background:rgba(255,255,255,.3)}

.t2i-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.t2i-act{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;border-radius:13px;
  font-family:inherit;font-weight:700;font-size:14.5px;cursor:pointer;text-decoration:none;
  border:1.5px solid #ecdfe8;background:#fff;color:#6a5d63;transition:transform .12s}
.t2i-act:hover{transform:translateY(-2px);color:#8B3FE8}
.t2i-act-primary{border:none;background:linear-gradient(100deg,#F7459B,#8B3FE8);color:#fff}
.t2i-act-primary:hover{color:#fff}

@media(max-width:820px){
  .t2i-grid{grid-template-columns:1fr}
}