/* CameraPro - 统一样式系统 */

/* 基础变量 */
:root {
  --primary-blue: #3B82F6;
  --primary-purple: #8B5CF6;
  --premium-gold: #F59E0B;
  --premium-orange: #F97316;
  --success-green: #10B981;
  --danger-red: #EF4444;
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.1);
  --safe-area-top: env(safe-area-inset-top, 44px);
  --safe-area-bottom: env(safe-area-inset-bottom, 34px);
}

/* iPhone 16 Pro Max 基础适配 */
.device-frame {
  width: 430px;
  height: 932px;
  background: #000;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

/* 安全区域 */
.safe-top { padding-top: max(var(--safe-area-top), 44px); }
.safe-bottom { padding-bottom: max(var(--safe-area-bottom), 34px); }

/* 玻璃拟态效果 */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
}

/* 渐变背景 */
.gradient-bg {
  background: linear-gradient(135deg, #1F2937 0%, #111827 50%, #1E3A8A 100%);
}

/* 按钮系统 */
.btn-primary {
  @apply bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold py-3 px-6 rounded-full;
  min-height: 48px;
  transition: all 0.3s ease;
}

.btn-premium {
  @apply bg-gradient-to-r from-yellow-400 to-orange-500 text-black font-bold py-3 px-6 rounded-full;
  min-height: 48px;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.4);
}

.btn-ghost {
  @apply bg-white bg-opacity-10 text-white font-medium py-3 px-6 rounded-full border border-white border-opacity-20;
  min-height: 48px;
  backdrop-filter: blur(10px);
}

/* 卡片系统 */
.card {
  @apply rounded-3xl p-6 transition-all duration-300;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255,255,255,0.1);
}

.card-premium {
  border: 2px solid var(--premium-gold);
  box-shadow: 0 0 30px rgba(245, 158, 11, 0.3);
  position: relative;
}

.card-premium::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(45deg, var(--premium-gold), var(--premium-orange));
  border-radius: inherit;
  z-index: -1;
  opacity: 0.8;
  filter: blur(8px);
}

/* 付费标识 */
.premium-badge {
  @apply absolute -top-3 -right-3 bg-gradient-to-r from-yellow-400 to-orange-500 text-black text-sm font-bold px-3 py-2 rounded-full;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

.crown-icon::before {
  content: '👑';
  margin-right: 4px;
}

/* 导航系统 */
.nav-bottom {
  @apply fixed bottom-0 left-0 right-0 bg-black bg-opacity-95 backdrop-blur-lg;
  padding-bottom: max(var(--safe-area-bottom), 20px);
  max-width: 430px;
  margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.nav-item {
  @apply flex flex-col items-center py-3 px-2 min-w-16 min-h-16 transition-all duration-200;
}

.nav-item.active {
  @apply text-blue-500;
}

.nav-item:not(.active) {
  @apply text-gray-400;
}

/* 触摸优化 */
.touch-target {
  min-width: 48px;
  min-height: 48px;
  @apply flex items-center justify-center;
}

.touch-feedback {
  -webkit-tap-highlight-color: rgba(255,255,255,0.1);
  -webkit-touch-callout: none;
  user-select: none;
}

/* 动画系统 */
.smooth-transition { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.bounce-in { animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.fade-in { animation: fadeIn 0.5s ease-out; }
.slide-up { animation: slideUp 0.4s ease-out; }

@keyframes bounceIn {
  0% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* 相机控件 */
.shutter-btn {
  @apply w-20 h-20 rounded-full border-4 border-white flex items-center justify-center;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
}

.shutter-inner {
  @apply w-16 h-16 bg-white rounded-full transition-transform duration-150;
}

.shutter-btn:active .shutter-inner {
  transform: scale(0.9);
}

/* 参数滑块 */
.param-slider {
  @apply relative w-2 h-24 bg-gray-600 rounded-full;
}

.slider-track {
  @apply absolute inset-0 bg-gradient-to-t from-blue-500 to-transparent rounded-full;
}

.slider-thumb {
  @apply absolute w-4 h-4 bg-white rounded-full border-2 border-blue-500;
  transform: translate(-50%, -50%);
}

/* 滚动优化 */
.scroll-area {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.custom-scrollbar::-webkit-scrollbar { width: 2px; height: 2px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { 
  background: rgba(255,255,255,0.2); 
  border-radius: 1px; 
}

/* 性能优化 */
.gpu-accelerated {
  transform: translateZ(0);
  will-change: transform;
}

/* 响应式适配 */
@media (max-width: 430px) {
  .device-frame { width: 100vw; height: 100vh; border-radius: 0; }
  .card { @apply p-4; }
  .btn-primary, .btn-premium, .btn-ghost { @apply py-2 px-4 text-sm; }
}

@media (orientation: landscape) and (max-height: 430px) {
  .nav-bottom { @apply py-2; }
  .nav-item { @apply py-2; }
}

/* 深色模式优化 */
@media (prefers-color-scheme: dark) {
  .glass { background: rgba(255,255,255,0.08); }
  .card { background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%); }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* 高分辨率优化 */
@media (-webkit-min-device-pixel-ratio: 3) {
  .glass { backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); }
  .card { border-width: 0.5px; }
}