/* NailVision Studio — Virtual Try-On Studio UI */

.tryon-body { margin: 0; padding: 0; overflow: hidden; background: #0a0a0a; font-family: Inter, system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
.tryon-app { width: 100%; height: 100dvh; max-height: 100dvh; overflow: hidden; }
.tryon-mobile { display: block; height: 100%; }
.tryon-desktop { display: none; height: 100%; }

@media (min-width: 1024px) {
  .tryon-mobile { display: none; }
  .tryon-desktop { display: flex; flex-direction: column; height: 100dvh; }
}

.tryon-mobile-stage { position: relative; width: 100%; height: 100dvh; background: #000; overflow: hidden; }
.tryon-viewport { position: absolute; inset: 0; background: #111; }
.tryon-video { width: 100%; height: 100%; object-fit: cover; }
.tryon-video.tryon-video-mirrored { transform: scaleX(-1); }
.tryon-video.hidden { display: none; }
.tryon-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tryon-canvas.tryon-canvas-photo { pointer-events: none; background: #111; }

.tryon-mode-switch {
  position: absolute; top: 4.5rem; left: 50%; transform: translateX(-50%); z-index: 28;
  display: flex; gap: .25rem; padding: .25rem; border-radius: 9999px;
  background: rgba(0,0,0,.5); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.12);
}
.tryon-mode-switch-btn {
  padding: .375rem .875rem; border-radius: 9999px; border: none; background: transparent;
  color: rgba(255,255,255,.6); font-size: .6875rem; font-weight: 600; cursor: pointer;
}
.tryon-mode-switch-btn.is-active { background: rgba(183,110,121,.55); color: #fff; }

.tryon-photo-placeholder {
  position: absolute; inset: 0; z-index: 2; display: none; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #1a1a1a, #2d2d2d); color: rgba(255,255,255,.75); text-align: center; padding: 2rem;
}
.tryon-photo-placeholder.is-visible { display: flex; }
.tryon-photo-placeholder-light { background: linear-gradient(160deg, #f5f5f5, #e8e8e8); color: #666; }
.tryon-photo-status {
  position: absolute; top: 7rem; left: 50%; transform: translateX(-50%); z-index: 27;
  padding: .375rem .75rem; border-radius: 9999px; background: rgba(0,0,0,.45); color: rgba(255,255,255,.8);
  font-size: .6875rem; display: none;
}
.tryon-photo-status.is-visible { display: block; }

.tryon-desktop-mode-switch { display: flex; gap: .375rem; margin-right: .5rem; }
.tryon-mode-hint {
  position: absolute; top: 7.25rem; left: 50%; transform: translateX(-50%); z-index: 27;
  max-width: 18rem; text-align: center; font-size: .625rem; line-height: 1.4;
  color: rgba(255,255,255,.65); padding: 0 .5rem; display: none;
}
.tryon-mode-hint.is-visible { display: block; }
.tryon-mode-hint-desktop { position: static; transform: none; max-width: none; margin-top: .25rem; color: #8a8580; font-size: .75rem; }
.tryon-mode-hint-desktop.is-visible { display: block; }
.tryon-mode-hint-desktop.hidden { display: none; }

.tryon-capture-banner {
  position: absolute; bottom: 8.5rem; left: 50%; transform: translateX(-50%); z-index: 27;
  padding: .5rem 1rem; border-radius: 9999px; background: rgba(183,110,121,.75); backdrop-filter: blur(8px);
  color: #fff; font-size: .75rem; font-weight: 500; white-space: nowrap;
}
.tryon-capture-banner-desktop { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 12; }
.tryon-shutter-label { color: rgba(255,255,255,.75); font-size: .6875rem; font-weight: 600; text-transform: uppercase; }

.tryon-desktop-mode-switch .tryon-mode-switch-btn {
  padding: .5rem 1rem; border-radius: .75rem; background: #fff; border: 1px solid rgba(183,110,121,.2);
  color: #5c5854; font-size: .8125rem;
}
.tryon-desktop-mode-switch .tryon-mode-switch-btn.is-active {
  background: linear-gradient(135deg, #b76e79, #c9a87c); border-color: transparent; color: #fff;
}

.tryon-placeholder {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #1a1a1a, #2d2d2d); color: rgba(255,255,255,.7); text-align: center; padding: 2rem;
}
.tryon-placeholder.hidden { display: none; }
.tryon-placeholder-light { background: linear-gradient(160deg, #f5f5f5, #e8e8e8); color: #666; }
.tryon-placeholder-icon { width: 4rem; height: 4rem; margin-bottom: 1rem; color: #b76e79; }
.tryon-placeholder-icon svg { width: 100%; height: 100%; }
.tryon-start-btn { margin-top: 1.5rem; padding: .875rem 2rem; border-radius: 9999px; background: linear-gradient(135deg, #b76e79, #c9a87c); color: #fff; font-weight: 600; border: none; cursor: pointer; }

.tryon-fps-badge {
  position: absolute; top: 4.5rem; right: 1rem; z-index: 20; padding: .25rem .625rem; border-radius: 9999px;
  background: rgba(0,0,0,.45); backdrop-filter: blur(8px); color: rgba(255,255,255,.7); font-size: .6875rem;
}

.tryon-topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between;
  padding: max(.75rem, env(safe-area-inset-top)) 1rem .75rem; background: linear-gradient(to bottom, rgba(0,0,0,.55), transparent);
}
.tryon-topbar-title { font-size: 1rem; font-weight: 600; color: #fff; }
.tryon-topbar-actions { display: flex; gap: .25rem; }
.tryon-topbar-btn {
  display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: rgba(255,255,255,.12); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.15); color: #fff; cursor: pointer;
}
.tryon-topbar-btn svg { width: 1.25rem; height: 1.25rem; }
.tryon-topbar-btn.is-active { background: rgba(183,110,121,.5); }

.tryon-rail {
  position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); z-index: 25; display: flex; flex-direction: column; gap: .5rem;
  padding: .5rem; border-radius: 1.25rem; background: rgba(0,0,0,.45); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.1);
}
.tryon-rail-btn {
  display: flex; flex-direction: column; align-items: center; gap: .25rem; width: 3.25rem; padding: .5rem .25rem; border-radius: .875rem;
  background: transparent; border: none; color: rgba(255,255,255,.65); font-size: .5625rem; cursor: pointer;
}
.tryon-rail-btn svg { width: 1.375rem; height: 1.375rem; }
.tryon-rail-btn.is-active { background: rgba(183,110,121,.35); color: #fff; }

.tryon-design-dock {
  position: absolute; left: 0; right: 0; bottom: 5.75rem; z-index: 28;
  padding: .5rem 1rem .625rem 4.75rem;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 70%, transparent 100%);
  pointer-events: none;
}
.tryon-design-dock .tryon-carousel { pointer-events: auto; }
.tryon-dock-empty { color: rgba(255,255,255,.55); font-size: .8125rem; text-align: center; padding: .75rem 0; pointer-events: auto; }

.tryon-panel {
  position: absolute; left: 0; right: 0; bottom: 9.5rem; z-index: 26; padding: .75rem 1rem 1rem;
  background: rgba(0,0,0,.55); backdrop-filter: blur(20px); border-top: 1px solid rgba(255,255,255,.08);
  border-radius: 1.25rem 1.25rem 0 0; transform: translateY(110%); opacity: 0; pointer-events: none;
  transition: transform .35s cubic-bezier(.32,.72,0,1), opacity .3s; max-height: 32vh; overflow-y: auto;
}
.tryon-panel.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.tryon-panel-handle { width: 2.5rem; height: .25rem; border-radius: 9999px; background: rgba(255,255,255,.25); margin: 0 auto .75rem; }

.tryon-carousel { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tryon-carousel::-webkit-scrollbar { display: none; }
.tryon-carousel-item {
  flex: 0 0 4.5rem; width: 4.5rem; height: 4.5rem; border-radius: 50%; overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; scroll-snap-align: center;
}
.tryon-carousel-item img { width: 100%; height: 100%; object-fit: cover; }
.tryon-carousel-item.is-active { border-color: #b76e79; transform: scale(1.08); }

.tryon-chip-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.tryon-chip { padding: .5rem 1rem; border-radius: 9999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); color: #fff; font-size: .75rem; cursor: pointer; }
.tryon-chip.is-active { background: rgba(183,110,121,.5); border-color: #b76e79; }

.tryon-swatch-row { display: flex; gap: .625rem; overflow-x: auto; padding: .25rem 0; }
.tryon-swatch { flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); cursor: pointer; }
.tryon-swatch.is-active { border-color: #fff; transform: scale(1.12); }
.tryon-swatch-picker { display: flex; background: conic-gradient(red,yellow,lime,aqua,blue,magenta,red); overflow: hidden; }
.tryon-swatch-picker input { width: 100%; height: 100%; border: none; opacity: 0; cursor: pointer; }

.tryon-slider-label { display: block; margin-top: 1rem; color: rgba(255,255,255,.7); font-size: .75rem; }
.tryon-slider { width: 100%; margin-top: .5rem; accent-color: #b76e79; }

.tryon-shutterbar {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1.5rem max(1.25rem, env(safe-area-inset-bottom)); background: linear-gradient(to top, rgba(0,0,0,.7), transparent);
}
.tryon-gallery-thumb { width: 2.75rem; height: 2.75rem; border-radius: .625rem; overflow: hidden; border: 2px solid rgba(255,255,255,.4); padding: 0; cursor: pointer; background: #222; }
.tryon-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

.tryon-shutter { position: relative; width: 4.5rem; height: 4.5rem; border-radius: 50%; border: none; background: transparent; cursor: pointer; padding: 0; }
.tryon-shutter-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(255,255,255,.9); }
.tryon-shutter-inner { position: absolute; inset: 6px; border-radius: 50%; background: #fff; transition: transform .15s; }
.tryon-shutter:active .tryon-shutter-inner { transform: scale(.92); background: #f0d4dc; }
.tryon-shutter.is-recording .tryon-shutter-inner { border-radius: .5rem; background: #e74c3c; inset: 14px; }
.tryon-shutter-sm { width: 3.5rem; height: 3.5rem; }

.tryon-mode-toggle { display: flex; flex-direction: column; gap: .125rem; align-items: flex-end; }
.tryon-mode-btn { background: none; border: none; color: rgba(255,255,255,.45); font-size: .6875rem; font-weight: 600; text-transform: uppercase; cursor: pointer; }
.tryon-mode-btn.is-active { color: #ffd700; }

/* Desktop */
.tryon-desktop-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; background: #faf9f7; border-bottom: 1px solid rgba(183,110,121,.12); flex-shrink: 0; }
.tryon-desktop-brand { display: flex; align-items: center; gap: 1rem; }
.tryon-desktop-back { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: .75rem; background: #fff; border: 1px solid rgba(183,110,121,.15); color: #1a1a1a; }
.tryon-desktop-back svg { width: 1.25rem; height: 1.25rem; }
.tryon-desktop-brand h1 { font-size: 1.25rem; font-weight: 700; margin: 0; color: #1a1a1a; }
.tryon-desktop-brand p { font-size: .8125rem; color: #8a8580; margin: .125rem 0 0; }
.tryon-desktop-header-actions { display: flex; gap: .75rem; }

.tryon-desk-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .625rem 1.25rem; border-radius: .75rem; background: #fff; border: 1px solid rgba(183,110,121,.2); font-size: .875rem; font-weight: 500; cursor: pointer; }
.tryon-desk-btn svg { width: 1.125rem; height: 1.125rem; }
.tryon-desk-btn-primary { background: linear-gradient(135deg, #b76e79, #c9a87c); border: none; color: #fff; }

.tryon-desktop-grid { flex: 1; display: grid; grid-template-columns: 1fr 340px; min-height: 0; overflow: hidden; }
.tryon-desktop-main { display: flex; flex-direction: column; min-height: 0; background: #f0eeeb; padding: 1rem; gap: .75rem; }
.tryon-desktop-viewport { position: relative; flex: 1; min-height: 0; border-radius: 1.25rem; overflow: hidden; background: #111; box-shadow: 0 8px 40px rgba(0,0,0,.12); }

.tryon-viewport-controls { position: absolute; top: 1rem; right: 1rem; display: flex; gap: .375rem; z-index: 10; }
.tryon-vp-btn { width: 2.25rem; height: 2.25rem; border-radius: .625rem; background: rgba(0,0,0,.45); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.12); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.tryon-vp-btn svg { width: 1rem; height: 1rem; }
.tryon-vp-btn.is-active { background: rgba(183,110,121,.6); }

.tryon-viewport-rail { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: .375rem; z-index: 10; }
.tryon-vp-rail-btn { padding: .625rem .875rem; border-radius: .625rem; background: rgba(0,0,0,.45); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.75); font-size: .6875rem; font-weight: 600; cursor: pointer; }
.tryon-vp-rail-btn.is-active { background: rgba(183,110,121,.5); color: #fff; }

.tryon-toolstrip { display: flex; gap: .25rem; padding: .5rem; background: rgba(26,26,26,.92); border-radius: 1rem; overflow-x: auto; }
.tryon-toolstrip-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .625rem .5rem; border-radius: .75rem; background: transparent; border: none; color: rgba(255,255,255,.55); font-size: .625rem; cursor: pointer; }
.tryon-toolstrip-btn.is-active { background: rgba(183,110,121,.25); color: #fff; }
.tryon-tool-icon { font-size: 1.125rem; }

.tryon-desktop-capture { display: flex; align-items: center; justify-content: center; gap: 1.5rem; }

.tryon-sidebar { background: #fff; border-left: 1px solid rgba(183,110,121,.1); overflow-y: auto; padding: 1rem; }
.tryon-sidebar-tabs { display: flex; gap: .25rem; padding: .25rem; background: #f5f3f0; border-radius: .75rem; margin-bottom: 1rem; }
.tryon-tab { flex: 1; padding: .5rem; border-radius: .5rem; border: none; background: transparent; font-size: .6875rem; font-weight: 700; text-transform: uppercase; color: #8a8580; cursor: pointer; }
.tryon-tab.is-active { background: #fff; color: #b76e79; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.tryon-tab-panel { display: none; }
.tryon-tab-panel.is-active { display: block; }

.tryon-sidebar-section { margin-bottom: 1.25rem; }
.tryon-sidebar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.tryon-sidebar-head h3 { font-size: .875rem; font-weight: 600; margin: 0; }
.tryon-sidebar-head a { font-size: .75rem; font-weight: 600; color: #b76e79; text-decoration: none; }
.tryon-badge-ai { padding: .125rem .5rem; border-radius: 9999px; background: linear-gradient(135deg, #b76e79, #c9a87c); color: #fff; font-size: .625rem; font-weight: 700; }

.tryon-design-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .625rem; }
.tryon-design-card { display: flex; flex-direction: column; border-radius: .875rem; overflow: hidden; border: 2px solid transparent; padding: 0; background: #f5f3f0; cursor: pointer; text-align: left; }
.tryon-design-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.tryon-design-card span { padding: .375rem .5rem; font-size: .625rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #5c5854; }
.tryon-design-card.is-active, .tryon-design-card:hover { border-color: #b76e79; box-shadow: 0 4px 16px rgba(183,110,121,.2); }

.tryon-swatch-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; margin-bottom: 1rem; }
.tryon-swatch-lg { aspect-ratio: 1; border-radius: .625rem; border: 2px solid transparent; cursor: pointer; }
.tryon-swatch-lg.is-active { border-color: #1a1a1a; transform: scale(1.05); }
.tryon-custom-color { display: flex; align-items: center; justify-content: space-between; font-size: .8125rem; color: #5c5854; }
.tryon-custom-color input { width: 3rem; height: 2rem; border: none; border-radius: .5rem; cursor: pointer; }

.tryon-shapes-section .tryon-chip { background: #f5f3f0; border-color: rgba(183,110,121,.15); color: #1a1a1a; }
.tryon-shapes-section .tryon-chip.is-active { background: rgba(183,110,121,.15); border-color: #b76e79; color: #b76e79; }

.tryon-share-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; }
.tryon-share-modal.hidden { display: none; }
.tryon-share-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); }
.tryon-share-sheet { position: relative; width: 100%; max-width: 28rem; padding: 1.5rem; background: #fff; border-radius: 1.5rem 1.5rem 0 0; animation: tryon-slide-up .35s ease; }
.tryon-share-sheet img { width: 100%; border-radius: 1rem; margin-bottom: 1rem; }
.tryon-share-actions { display: flex; flex-direction: column; gap: .5rem; }
.tryon-share-btn { padding: .875rem; border-radius: .75rem; border: none; font-weight: 600; cursor: pointer; background: linear-gradient(135deg, #b76e79, #c9a87c); color: #fff; }
.tryon-share-close { background: #f5f3f0; color: #1a1a1a; }
.tryon-empty-msg { color: rgba(255,255,255,.5); font-size: .875rem; padding: 1rem; }

@keyframes tryon-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

@media (min-width: 1280px) { .tryon-desktop-grid { grid-template-columns: 1fr 380px; } }