/* Roisameson virtual try-on — full-screen atelier */
.roi-tryon-root{
  position:fixed;inset:0;z-index:100000;
  background:#1c1917;color:#f5f0e8;
  display:flex;align-items:stretch;justify-content:stretch;
  font-family:inherit;
}
.roi-tryon-root[hidden]{display:none !important}
html.roi-tryon-lock,body.roi-tryon-lock{overflow:hidden !important;overscroll-behavior:none}
.roi-tryon-stage{
  position:relative;width:100%;height:100%;max-height:100dvh;
  padding:18px 18px 24px;overflow:auto;
  background:
    radial-gradient(1200px 480px at 100% -10%,rgba(163,75,92,.18),transparent 55%),
    linear-gradient(180deg,#2a2425,#3a3032 42%,#4a3d3f);
}
.roi-tryon-x{
  position:absolute;top:14px;left:14px;z-index:2;
  width:44px;height:44px;border-radius:50%;
  background:#f5f0e8;color:#1c1917;font-size:28px;line-height:1;
  display:grid;place-items:center;
}
.roi-tryon-head{text-align:center;margin:8px 0 18px;padding:0 52px}
.roi-tryon-kicker{
  margin:0 0 6px;letter-spacing:.28em;font-size:11px;font-weight:700;
  text-transform:uppercase;opacity:.72
}
.roi-tryon-head h2{margin:0 0 8px;font-size:clamp(22px,4vw,34px);font-weight:700;letter-spacing:-.02em}
.roi-tryon-credits{margin:0;font-size:13px;opacity:.86}
.roi-tryon-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  max-width:1180px;margin:0 auto
}
.roi-tryon-col{
  background:rgba(245,240,232,.06);border:1px solid rgba(245,240,232,.12);
  border-radius:4px;padding:14px;min-width:0
}
.roi-tryon-label{margin:0 0 10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.roi-tryon-frame{
  aspect-ratio:3/4;background:#0c0a09;border-radius:2px;overflow:hidden;
  display:grid;place-items:center;position:relative
}
.roi-tryon-frame img{width:100%;height:100%;object-fit:cover}
.roi-tryon-name{margin:10px 0 0;font-size:13px;line-height:1.6}
.roi-tryon-drop{
  display:grid;place-items:center;aspect-ratio:3/4;cursor:pointer;
  border:1px dashed rgba(245,240,232,.35);background:#0c0a09;text-align:center;padding:12px
}
.roi-tryon-drop img{width:100%;height:100%;object-fit:cover}
.roi-tryon-drop span{font-size:13px;line-height:1.7;opacity:.8}
.roi-tryon-models{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.roi-tryon-model{
  display:flex;align-items:center;gap:6px;font-size:12px;padding:8px 10px;
  border:1px solid rgba(245,240,232,.2);border-radius:999px;cursor:pointer
}
.roi-tryon-model:has(input:checked){background:#f5f0e8;color:#1c1917;border-color:#f5f0e8}
.roi-tryon-run,.roi-tryon-dl,.roi-tryon-buy,.roi-atelier-newf button,.roi-pack button,.roi-invite button{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 16px;width:100%;margin-top:8px;
  background:#f5f0e8;color:#1c1917;font:inherit;font-weight:800;letter-spacing:.04em;
  border:0;border-radius:2px;cursor:pointer;text-decoration:none
}
.roi-tryon-run:disabled{opacity:.55;cursor:wait}
.roi-tryon-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.roi-tryon-actions a{margin:0}
.roi-tryon-buy{background:#a34b5c;color:#fff8f6}
.roi-tryon-msg{margin:10px 0 0;font-size:13px;color:#f5c6a0}
.roi-tryon-msg.is-ok{color:#d6d3d1}
.roi-tryon-wait{
  position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:12px;
  background:rgba(12,10,9,.72);text-align:center;padding:16px
}
.roi-tryon-spin{
  width:36px;height:36px;border-radius:50%;
  border:2px solid rgba(245,240,232,.25);border-top-color:#f5f0e8;
  animation:roi-spin .8s linear infinite
}
@keyframes roi-spin{to{transform:rotate(360deg)}}
.roi-tryon-ph{position:absolute;font-size:13px;opacity:.55;margin:0}

.roi-tryon-cta{
  display:flex;width:100%;align-items:center;justify-content:center;gap:8px;
  min-height:52px;margin:12px 0 0;padding:0 16px;
  background:#fff;color:#111;border:2px solid #111;border-radius:0;
  font:inherit;font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:13px;cursor:pointer
}

.roi-atelier{display:flex;flex-direction:column;gap:18px}
.roi-atelier-hero{
  background:#1c1917;color:#f5f0e8;padding:22px 20px;border-radius:4px
}
.roi-atelier-hero h2{margin:0 0 8px;font-size:26px}
.roi-atelier-hero p{margin:0;opacity:.86;line-height:1.8}
.roi-atelier-balance{margin-top:14px;display:flex;align-items:baseline;gap:8px}
.roi-atelier-balance strong{font-size:32px}
.roi-atelier-tabs{display:flex;gap:6px;flex-wrap:wrap}
.roi-atelier-tabs button{
  appearance:none;border:1px solid #e7e0d6;background:#fff;color:#44403c;
  padding:10px 14px;font:inherit;font-weight:700;cursor:pointer;border-radius:999px
}
.roi-atelier-tabs button.on{background:#1c1917;color:#f5f0e8;border-color:#1c1917}
.roi-atelier-toolbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;margin-bottom:14px}
.roi-atelier-folders{display:flex;flex-wrap:wrap;gap:6px}
.roi-atelier-folders button{
  appearance:none;border:1px solid #e7e0d6;background:#fff;padding:8px 12px;
  font:inherit;font-size:13px;cursor:pointer
}
.roi-atelier-folders button.on{background:#1c1917;color:#fff;border-color:#1c1917}
.roi-atelier-newf{display:flex;gap:6px}
.roi-atelier-newf input{border:1px solid #e7e0d6;padding:8px 10px;min-width:180px;font:inherit}
.roi-atelier-newf button{width:auto;margin:0;min-height:40px}
.roi-atelier-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px
}
.roi-look{background:#fff;border:1px solid #ece7df;overflow:hidden}
.roi-look img{width:100%;aspect-ratio:3/4;object-fit:cover}
.roi-look-meta{padding:10px}
.roi-look-meta strong{display:block;font-size:13px;margin-bottom:8px}
.roi-look-act,.roi-look-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.roi-look-act a,.roi-look-tools button{
  font-size:12px;font-weight:700;color:#1c1917;text-decoration:underline;background:none;border:0;cursor:pointer;font:inherit
}
.roi-look-tools select{flex:1;min-width:0;font:inherit;font-size:12px}
.roi-atelier-empty{padding:28px;text-align:center;color:#78716c}
.roi-task-grid,.roi-pack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:12px 0 20px}
.roi-task,.roi-pack{
  background:#fff;border:1px solid #ece7df;padding:14px;display:flex;flex-direction:column;gap:8px
}
.roi-task.is-done{border-color:#1c1917}
.roi-task span,.roi-pack span{font-size:12px;color:#b45309;font-weight:800}
.roi-invite{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.roi-invite input{flex:1;min-width:180px;padding:10px;border:1px solid #e7e0d6;font:inherit}
.roi-invite button{width:auto;margin:0}
.roi-invite code{background:#1c1917;color:#f5f0e8;padding:8px 10px;font-size:13px}

@media (max-width:900px){
  .roi-tryon-grid{grid-template-columns:1fr}
  .roi-tryon-actions{grid-template-columns:1fr}
  .roi-tryon-stage{padding:56px 12px 24px}
}