/* ░░░░░ Teknous AI Studio (admin) ░░░░░ */
.adm{background:var(--cloud)}
.badge-ai{font-family:var(--hsans);font-size:.7rem;font-weight:600;letter-spacing:.06em;color:var(--ink);
  background:var(--yellow);padding:.35em .8em;border-radius:100px;text-transform:uppercase}
.badge-ai.live{background:#27c08a;color:#fff}
.btn--dark{border-color:var(--line);color:var(--ink)}
.btn--dark:hover{background:#fff}

.adm__main{max-width:1180px;margin:0 auto;padding:clamp(1.6rem,4vw,3rem) 1.1rem 4rem}
.adm__head{max-width:60ch;margin-bottom:2rem}
.adm__head h1{font-size:clamp(1.9rem,5vw,2.9rem);margin:.5rem 0 .7rem}
.adm__head p{color:var(--muted);font-size:1.05rem}

.studio{display:grid;grid-template-columns:1fr 1.05fr;gap:1.4rem;align-items:start}
.panel{background:#fff;border:1px solid var(--line);border-radius:20px;padding:1.5rem;box-shadow:var(--shadow)}
.panel__t{font-family:var(--hsans);font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-2);margin-bottom:1rem}

/* drop zone */
.drop{display:block;border:2px dashed var(--line);border-radius:16px;background:var(--cloud);cursor:pointer;
  transition:.25s;overflow:hidden;position:relative;min-height:190px}
.drop:hover,.drop.over{border-color:var(--yellow-deep);background:#fffdf3}
.drop__in{padding:2.4rem 1.5rem;text-align:center;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:.5rem}
.drop__in b{color:var(--ink);font-size:1.05rem}
.drop img{width:100%;height:240px;object-fit:contain;background:#fff;padding:1rem}

/* uploaded image thumbnails */
.thumbs{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.9rem}
.thumbs:empty{margin:0}
.uthumb{position:relative;width:84px;height:84px;border:1.5px solid var(--line);border-radius:12px;background:#fff;padding:.35rem;flex-shrink:0}
.uthumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.uthumb.primary{border-color:var(--ink);border-width:2px}
.uthumb__main{position:absolute;left:-1px;top:-9px;font-size:.6rem;font-weight:700;background:var(--ink);color:#fff;padding:.15em .45em;border-radius:6px}
.uthumb__x{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;background:#fff;border:1.5px solid var(--line);
  font-size:.85rem;line-height:1;color:var(--muted);display:grid;place-items:center;box-shadow:var(--shadow)}
.uthumb__x:hover{color:#e2483a;border-color:#e2483a}
#genBtn{margin-top:1rem}
.gallery__t{font-size:.85rem;color:var(--muted);margin:1.2rem 0 .7rem}
.gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem}
.gthumb{aspect-ratio:1;border:1.5px solid var(--line);border-radius:12px;background:#fff;padding:.4rem;cursor:pointer;transition:.2s}
.gthumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.gthumb:hover{border-color:var(--yellow-deep);transform:translateY(-3px);box-shadow:var(--shadow)}
.gthumb.on{border-color:var(--ink);border-width:2px}

/* output states */
.panel--out{min-height:420px}
.ai-idle{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  color:var(--muted-2);padding:3.5rem 1rem;gap:.8rem}
.ai-idle__ic{font-size:2.4rem;opacity:.7}

.ai-load{padding:1.5rem 1rem;text-align:center}
.scan{position:relative;width:170px;height:200px;margin:0 auto 1.2rem;border-radius:14px;overflow:hidden;background:var(--cloud);border:1px solid var(--line)}
.scan img{width:100%;height:100%;object-fit:contain;padding:1rem;mix-blend-mode:multiply}
.scan__line{position:absolute;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--yellow-deep),transparent);
  box-shadow:0 0 16px 3px rgba(245,180,0,.7);top:0;animation:scan 1.6s var(--ease) infinite}
@keyframes scan{0%{top:6%}50%{top:92%}100%{top:6%}}
#loadMsg{font-weight:600;margin-bottom:1rem}
.steps{display:flex;flex-direction:column;gap:.4rem;max-width:300px;margin:0 auto;text-align:left}
.step{font-size:.88rem;color:var(--muted-2);display:flex;gap:.5rem;align-items:center;opacity:.4;transition:.3s}
.step.on{opacity:1;color:var(--ink)}
.step::before{content:"○";color:var(--muted-2)}
.step.on::before{content:"●";color:#27c08a}

/* review form */
.ai-form{display:flex;flex-direction:column;gap:.85rem;animation:fade .4s}
.ai-tag{font-size:.78rem;font-weight:600;color:#7a5b00;background:rgba(255,210,0,.18);padding:.45em .8em;border-radius:8px;align-self:flex-start}
.ai-form label{display:flex;flex-direction:column;gap:.35rem;font-size:.82rem;font-weight:600;color:var(--muted)}
.ai-form input,.ai-form select,.ai-form textarea{font-family:inherit;font-size:.95rem;color:var(--ink);font-weight:400;
  border:1.5px solid var(--line);border-radius:11px;padding:.7rem .85rem;background:#fff;outline:none;transition:.2s;resize:vertical}
.ai-form input:focus,.ai-form select:focus,.ai-form textarea:focus{border-color:var(--yellow-deep);box-shadow:0 0 0 3px rgba(255,210,0,.18)}
.ai-form__row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.seo{border:1px solid var(--line);border-radius:11px;padding:.4rem .9rem;background:var(--cloud)}
.seo summary{cursor:pointer;font-weight:600;font-size:.85rem;color:var(--muted);padding:.5rem 0}
.seo[open]{padding-bottom:.9rem}
.seo label{margin-top:.6rem}
.ai-form__act{display:flex;gap:.7rem;margin-top:.5rem}
.ai-form__act .btn{flex:1;justify-content:center}

/* published */
.published{margin-top:2.5rem;background:#fff;border:1px solid var(--line);border-radius:20px;padding:1.5rem}
.published .grid{grid-template-columns:repeat(4,1fr)}
.published .card{cursor:default}
.card__ai{position:absolute;top:.7rem;right:.7rem;font-size:.62rem;font-weight:700;background:var(--yellow);color:var(--ink);padding:.25em .55em;border-radius:6px;z-index:1}
.card--pub{cursor:pointer}
.card__edit{position:absolute;top:.55rem;left:.55rem;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.94);
  border:1px solid var(--line);font-size:1rem;display:grid;place-items:center;z-index:2;transition:.2s}
.card__edit:hover{background:var(--yellow);border-color:var(--yellow);transform:scale(1.08)}
.card__view{font-size:.76rem;color:var(--muted-2);font-weight:600}
.card--pub:hover .card__view{color:var(--yellow-deep)}
.prev__feat{list-style:none;display:flex;flex-direction:column;gap:.35rem;margin:.4rem 0 .2rem;padding:0}
.prev__feat li{position:relative;padding-left:1.3rem;font-size:.88rem;color:var(--muted);line-height:1.4}
.prev__feat li::before{content:"✓";position:absolute;left:0;color:var(--yellow-deep);font-weight:700}

@media(max-width:880px){
  .studio{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(6,1fr)}
  .published .grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:440px){ .gallery{grid-template-columns:repeat(4,1fr)} .ai-form__row{grid-template-columns:1fr} }