/* تن‌خور — try a kit on over the camera (or a gallery photo). */
.to { position: fixed; inset: 0; z-index: 150; background: #05070c; color: #fff; display: grid; grid-template-rows: auto 1fr auto; }
.to[hidden] { display: none; }
.to-top { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 12px 14px calc(12px); padding-top: calc(12px + env(safe-area-inset-top)); background: linear-gradient(rgba(0,0,0,.7), transparent); }
.to-top b { flex: 1; font-size: 15px; }
.to-top .x-btn { background: rgba(255,255,255,.12); }
.to-view { position: relative; overflow: hidden; touch-action: none; }
.to-view video, .to-view .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.to-view video.mirror, .to-view .photo.mirror { transform: scaleX(-1); }
.to-kit { position: absolute; left: 0; top: 0; width: 300px; transform-origin: 50% 20%; filter: drop-shadow(0 18px 24px rgba(0,0,0,.45)); cursor: grab; will-change: transform; user-select: none; -webkit-user-drag: none; }
.to-kit.grab { cursor: grabbing; }
.to-guide { position: absolute; inset: 0; pointer-events: none; display: grid; place-items: center; }
.to-guide svg { width: min(62vw, 360px); opacity: .25; }
.to-gate { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 24px; text-align: center;
  background: radial-gradient(70% 50% at 50% 35%, color-mix(in oklab, var(--t1) 30%, transparent), transparent 70%), #0a0e18; }
.to-gate[hidden] { display: none; }
.to-gate .card { max-width: 380px; display: grid; gap: 14px; justify-items: center; }
.to-gate .kitprev { width: 180px; filter: drop-shadow(0 20px 24px rgba(0,0,0,.6)); animation: bob 5s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-10px) rotate(-2deg); } }
.to-gate h3 { margin: 0; font-size: 22px; font-weight: 900; }
.to-gate p { margin: 0; color: #b9bfcc; font-size: 14px; line-height: 1.9; }
.to-gate .err { color: #ff8a96; }
.to-gate small { color: #7f8696; font-size: 12px; display: flex; align-items: center; gap: 6px; }
.to-bottom { position: relative; z-index: 3; display: grid; gap: 12px; padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0,0,0,.85) 35%); }
.to-row { display: flex; align-items: center; justify-content: center; gap: 14px; }
.to-seg { display: flex; padding: 3px; border-radius: 14px; background: rgba(255,255,255,.12); }
.to-seg button { height: 38px; padding: 0 16px; border: 0; border-radius: 11px; background: none; color: #d8dce4; font-weight: 700; }
.to-seg button.on { background: #fff; color: #111; }
.to-seg button:disabled { opacity: .35; }
.to-round { width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255,255,255,.14); color: #fff; }
.to-shutter { width: 72px; height: 72px; border-radius: 50%; border: 4px solid #fff; background: rgba(255,255,255,.25); box-shadow: 0 0 0 4px rgba(0,0,0,.35); }
.to-shutter:active { transform: scale(.94); background: #fff; }
.to-picker { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px 4px; scroll-snap-type: x mandatory; }
.to-picker::-webkit-scrollbar { display: none; }
.to-picker button { flex: none; width: 64px; height: 64px; border-radius: 18px; padding: 4px; border: 2px solid transparent; scroll-snap-align: center;
  background: radial-gradient(circle at 50% 40%, color-mix(in oklab, var(--c) 55%, #1a1f2d), #11141c); }
.to-picker button.on { border-color: var(--gold); }
.to-picker img { width: 100%; height: 100%; object-fit: contain; }
.to-shot { position: absolute; inset: 0; z-index: 4; display: grid; grid-template-rows: 1fr auto; background: #000; }
.to-shot[hidden] { display: none; }
.to-shot img { width: 100%; height: 100%; object-fit: contain; }
.to-shot .to-row { padding: 14px 14px calc(16px + env(safe-area-inset-bottom)); flex-wrap: wrap; }
.to-flash { position: absolute; inset: 0; z-index: 5; background: #fff; opacity: 0; pointer-events: none; }
.to-flash.go { animation: flash .35s ease; }
@keyframes flash { 10% { opacity: .9; } 100% { opacity: 0; } }
.to-tip { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 2; padding: 6px 14px; border-radius: 999px; background: rgba(0,0,0,.5); font-size: 12.5px; white-space: nowrap; transition: opacity .6s; }
@media (min-width: 900px) {
  .to { inset: 24px; border-radius: 28px; overflow: hidden; box-shadow: 0 40px 120px rgba(0,0,0,.8); border: 1px solid rgba(255,255,255,.12); }
}

/* ---------- automatic fit ---------- */
.to-auto { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 13px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #cfd3dc; font-weight: 700; font-size: 13px; white-space: nowrap; }
.to-auto svg { width: 18px; height: 18px; }
.to-auto.on { border-color: var(--gold); color: var(--gold); background: rgba(229,157,46,.14); }
.to-status { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 3; max-width: 92%; padding: 8px 14px; border-radius: 14px; background: rgba(8,11,20,.74); backdrop-filter: blur(8px); font-size: 13px; text-align: center; }
.to-wear { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.to.worn .to-kit { opacity: 0; }   /* the cloth mesh is on the body; the flat picture waits for a hand to take over */