/* Fotosuratni tayyorlash oynasi (shared/photo.js) — ikki ustunli, to'q panel */
.ph-back {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center; padding: 16px;
  background: rgba(10, 14, 22, .62); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .16s;
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.ph-back.in { opacity: 1; }
.ph {
  position: relative; width: min(1060px, 100%);
  max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain;
  padding: 26px 28px 12px; border-radius: 20px;
  background: #212836; color: #e9edf3;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8);
  transform: translateY(10px); transition: transform .18s;
}
.ph-back.in .ph { transform: none; }
.ph-head h2 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.ph-lead { margin: 6px 0 0; font-size: 14px; color: #aab3c2; }
.ph-x {
  position: absolute; top: 18px; right: 18px; width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; border-radius: 10px; background: none; color: #aab3c2; cursor: pointer;
}
.ph-x svg { width: 20px; height: 20px; }
.ph-x:hover { background: rgba(255, 255, 255, .08); color: #fff; }

.ph-body { display: grid; grid-template-columns: 1fr 340px; gap: 18px; margin-top: 18px; align-items: start; }
.ph-left, .ph-right {
  background: #1a2130; border: 1px solid rgba(255, 255, 255, .07); border-radius: 14px; padding: 16px;
}
.ph-left { display: grid; gap: 14px; justify-items: center; }

/* ko'rinish va kesish ramkasi */
.ph-stage { position: relative; line-height: 0; cursor: grab; touch-action: none; }
.ph-stage:active { cursor: grabbing; }
.ph-cv { display: block; border-radius: 10px; }
.ph-video {
  position: absolute; inset: 0; margin: auto; display: none;
  object-fit: cover; border-radius: 10px; background: #0d1219;
}
.ph-video.mirror { transform: scaleX(-1); }
.ph.cam .ph-video { display: block; }
.ph.cam .ph-cv { visibility: hidden; }
/* kamera rejimida o'ng panel sozlamalari ishlamaydi */
.ph.cam .ph-sl, .ph.cam .ph-row.two { opacity: .45; pointer-events: none; }
.ph-frame {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 255, 255, .9); pointer-events: none;
}
.ph-frame .c { position: absolute; width: 22px; height: 22px; border: 4px solid #2f76d2; }
.ph-frame .tl { left: -3px; top: -3px; border-right: 0; border-bottom: 0; border-radius: 3px 0 0 0; }
.ph-frame .tr { right: -3px; top: -3px; border-left: 0; border-bottom: 0; border-radius: 0 3px 0 0; }
.ph-frame .bl { left: -3px; bottom: -3px; border-right: 0; border-top: 0; border-radius: 0 0 0 3px; }
.ph-frame .br { right: -3px; bottom: -3px; border-left: 0; border-top: 0; border-radius: 0 0 3px 0; }
.ph-frame .eye { position: absolute; left: -60px; right: -60px; top: 42%; border-top: 2px dashed #4b90e2; }
.ph-frame .eye-t {
  position: absolute; top: 42%; left: -150px; transform: translateY(-50%);
  padding: 4px 9px; border-radius: 7px; background: #2a3346; color: #cfe0f7;
  font: 600 11.5px/1 inherit; white-space: nowrap;
}

/* tugmalar */
.ph-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ph-row.two { display: grid; grid-template-columns: 1fr 1fr; }
.ph-row.two .ph-btn { min-width: 0; overflow: hidden; }
.ph-row.two .ph-btn .lb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-btn {
  min-height: 42px; padding: 0 14px; border-radius: 11px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid rgba(255, 255, 255, .12); background: #29313f; color: #e9edf3;
  font: 600 13px/1.25 inherit; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .08s;
}
.ph-btn:hover { background: #323b4c; }
.ph-btn:active { transform: translateY(1px); }
.ph-btn[disabled] { opacity: .55; cursor: progress; }
.ph-btn.on { border-color: rgba(75, 144, 226, .8); background: #2a3d5c; }
.ph-btn.primary { border: 0; background: linear-gradient(180deg, #4b90e2, #2f76d2); color: #fff; font-weight: 700; padding: 0 22px; }
.ph-btn.primary:hover { background: linear-gradient(180deg, #5b9ce9, #3a80db); }
.ph-btn .lb { display: block; }
.ph-i { display: block; width: 17px; height: 17px; flex: none; }
.ph-i svg { width: 100%; height: 100%; display: block; }
.ph-left .ph-row .ph-btn { flex-direction: column; gap: 6px; min-width: 120px; padding: 10px 14px; }

/* o'ng panel */
.ph-right { display: grid; gap: 12px; }
.ph-right h3 { margin: 0; font-size: 18px; font-weight: 650; }
.ph-outwrap { display: grid; place-items: center; }
.ph-out {
  width: 132px; height: 176px; display: block; border-radius: 6px;
  background: #fff; border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .9);
}
.ph-outcap { text-align: center; font-size: 12.5px; color: #aab3c2; margin-top: -4px; }
.ph-hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .08); margin: 2px 0; }
.ph-sizes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 11px; background: #141a26; }
.ph-size {
  height: 34px; border: 0; border-radius: 8px; cursor: pointer;
  background: none; color: #aab3c2; font: 600 12.5px/1 inherit;
}
.ph-size:hover { color: #e9edf3; }
.ph-size.on { background: #2a3a54; color: #fff; box-shadow: inset 0 0 0 1px rgba(75,144,226,.6); }
.ph-shint { margin: 0; min-height: 0; font-size: 11.5px; color: #f0b46a; }

.ph-sl { display: grid; gap: 6px; }
.ph-sl-h { display: flex; justify-content: space-between; font-size: 13px; color: #cbd3df; }
.ph-sl-v { color: #aab3c2; font-variant-numeric: tabular-nums; }
.ph-sl input[type=range] { width: 100%; accent-color: #4b90e2; }

.ph-rules { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 10px; font-size: 12.5px; color: #aab3c2; }
.ph-rules summary { display: flex; align-items: center; gap: 9px; cursor: pointer; list-style: none; color: #dbe3ef; font-weight: 600; }
.ph-rules summary::-webkit-details-marker { display: none; }
.ph-rules .ph-i.sm { width: 16px; height: 16px; color: #8fb6e8; }
.ph-rules .ph-i.ch { width: 16px; height: 16px; margin-left: auto; transition: transform .15s; }
.ph-rules[open] .ph-i.ch { transform: rotate(180deg); }
.ph-rules ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; line-height: 1.5; }

.ph-note { margin: 0; min-height: 16px; font-size: 12px; color: #8e98a8; }
.ph-note.warn { color: #f0b46a; }
.ph-note.ok { color: #6fd6a6; }

/* pastki qator har doim ko'rinib turadi (oyna ichida scroll bo'lsa ham) */
.ph-foot {
  display: flex; align-items: center; gap: 10px; margin-top: 14px;
  position: sticky; bottom: -12px; z-index: 3;
  background: linear-gradient(transparent, #212836 20%); padding: 12px 0;
}
.ph-sp { flex: 1; }

@media (max-width: 900px) {
  .ph-back { padding: 8px; }
  .ph { padding: 18px 14px 12px; border-radius: 16px; }
  .ph-head h2 { font-size: 20px; }
  .ph-lead { font-size: 13px; }
  .ph-x { top: 12px; right: 12px; width: 32px; height: 32px; }
  .ph-body { grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
  .ph-left, .ph-right { padding: 12px; }
  .ph-frame .eye-t { display: none; }
  .ph-frame .eye { left: 0; right: 0; }
  .ph-left .ph-row .ph-btn { flex-direction: row; min-width: 0; padding: 0 12px; gap: 8px; }
  .ph-row { gap: 8px; }
  .ph-out { width: 108px; height: 144px; }
  .ph-right h3 { font-size: 16px; }
  .ph-foot { flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .ph-foot .ph-btn { flex: 1 1 auto; }
  .ph-sp { display: none; }
}
@media (max-width: 420px) {
  .ph-left .ph-row .ph-btn span:last-child { display: none; }   /* faqat ikonka */
  .ph-left .ph-row .ph-btn { min-width: 52px; padding: 0 10px; }
  .ph-row.two { grid-template-columns: 1fr; }
}