/**
 * BEAMY Premium Phone Optimization
 * Optimized for S24 Ultra, Poco F3, and similar flagship devices
 * Supports both Portrait and Landscape orientations
 */

/* =================================================================
   SAMSUNG S24 ULTRA OPTIMIZATION
   Screen: 6.8" AMOLED, 1440x3120px (Portrait), 3120x1440px (Landscape)
   ================================================================= */

/* S24 Ultra - Portrait Mode (Primary) */
/* Viewport: ~412px width (with device pixel ratio), very tall screen */
@media only screen 
  and (min-width: 360px) and (max-width: 430px)
  and (orientation: portrait) {
  
  /* Welcome Screen - Optimized for S24 Ultra tall screen */
  .tablet-welcome-screen {
    padding: 0 !important;
    gap: clamp(16px, 2.5vh, 24px) !important;
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile browsers */
  }
  
  .welcome-container {
    flex-direction: column;
    gap: clamp(20px, 3vh, 28px);
    padding: clamp(12px, 2vh, 20px);
    height: 100%;
    justify-content: space-between;
  }
  
  .welcome-left {
    width: 100%;
    max-height: min(45vh, 400px);
    border-radius: 20px;
    flex-shrink: 0;
  }
  
  .welcome-right {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(8px, 1.5vh, 16px) 0;
  }
  
  .welcome-title {
    font-size: clamp(28px, 5.5vw, 36px);
    line-height: 1.2;
    margin-bottom: clamp(12px, 2vh, 18px);
    font-weight: 700;
  }
  
  .welcome-subtitle {
    font-size: clamp(14px, 3vw, 17px);
    line-height: 1.5;
    margin-bottom: clamp(20px, 3vh, 28px);
    color: rgba(0, 0, 0, 0.7);
  }
  
  .get-started-btn {
    padding: clamp(14px, 2.5vh, 18px) clamp(28px, 8vw, 36px);
    font-size: clamp(16px, 3.5vw, 18px);
    border-radius: 14px;
    width: 100%;
    max-width: 100%;
    min-height: 52px;
    font-weight: 600;
  }
  
  /* Header adjustments for S24 Ultra */
  .welcome-header,
  .header-language {
    padding: clamp(10px, 1.5vh, 14px) clamp(12px, 3vw, 20px);
  }
  
  .header-logo-icon,
  .welcome-header-logo .header-logo-icon {
    height: clamp(32px, 5vw, 40px);
    width: auto;
  }
  
  /* Capture Screen - S24 Ultra optimized */
  .tablet-capture-screen {
    padding: 0 !important;
    min-height: 100vh;
    min-height: 100dvh;
  }
  
  .capture-header {
    margin-bottom: clamp(16px, 2.5vh, 24px);
    padding: clamp(10px, 1.5vh, 14px) clamp(12px, 3vw, 20px);
  }
  
  .capture-content {
    padding: clamp(12px, 2vh, 20px);
  }
  
  .model-options-grid {
    gap: clamp(16px, 2.5vh, 20px);
    grid-template-columns: 1fr;
    max-width: 100%;
  }
  
  .model-option-card {
    padding: clamp(20px, 3vh, 24px);
    min-height: clamp(130px, 18vh, 160px);
    border-radius: 16px;
  }
  
  .card-icon-image {
    width: clamp(56px, 8vw, 72px);
    height: clamp(56px, 8vw, 72px);
    margin-bottom: clamp(12px, 2vh, 16px);
  }
  
  .card-title {
    font-size: clamp(16px, 3.5vw, 19px);
    margin-bottom: clamp(8px, 1vh, 12px);
  }
  
  .card-description {
    font-size: clamp(13px, 2.8vw, 15px);
  }
  
  /* Category Selection - S24 Ultra */
  .tablet-category-screen {
    padding: 0 !important;
    min-height: 100vh;
    min-height: 100dvh;
  }
  
  .category-header {
    padding: clamp(10px, 1.5vh, 14px) clamp(12px, 3vw, 20px);
    margin-bottom: 0;
  }
  
  .category-content {
    padding: clamp(12px, 2vh, 20px);
    max-height: calc(100vh - clamp(50px, 8vh, 70px));
    overflow-y: auto;
  }
  
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(12px, 2vw, 18px);
    margin-bottom: clamp(16px, 2.5vh, 24px);
  }
  
  .garment-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(12px, 2vw, 16px);
  }
  
  .garment-item {
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
  }
  
  .garment-image {
    min-height: clamp(140px, 20vh, 180px);
  }
  
  .category-card,
  .garment-item {
    padding: clamp(12px, 2vw, 16px);
    border-radius: 14px;
  }
  
  .category-image {
    height: clamp(100px, 15vh, 140px);
    margin-bottom: clamp(10px, 1.5vh, 14px);
  }
  
  /* Results Screen - S24 Ultra */
  .tablet-results-screen {
    padding: 0 !important;
    min-height: 100vh;
    min-height: 100dvh;
  }
  
  .results-content {
    padding: clamp(16px, 2.5vh, 24px);
  }
  
  .result-image-container {
    max-height: min(65vh, 600px);
    border-radius: 20px;
    margin-bottom: clamp(20px, 3vh, 28px);
  }
  
  .result-actions {
    gap: clamp(12px, 2vw, 16px);
  }
  
  .action-btn {
    padding: clamp(14px, 2.5vh, 18px) clamp(24px, 6vw, 32px);
    font-size: clamp(15px, 3.2vw, 17px);
    min-height: 52px;
    border-radius: 14px;
  }
  
  /* Profile Selection */
  .tablet-profile-screen {
    padding: 0 !important;
    min-height: 100vh;
    min-height: 100dvh;
  }
  
  .profile-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(12px, 2vw, 18px);
    padding: clamp(12px, 2vh, 20px);
  }
  
  .profile-card {
    padding: clamp(16px, 2.5vh, 24px);
    min-height: clamp(140px, 20vh, 180px);
  }
  
  /* Avatar Selection */
  .tablet-avatar-selection-screen {
    padding: 0 !important;
    min-height: 100vh;
    min-height: 100dvh;
  }
  
  .avatar-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(12px, 2vw, 18px);
    padding: clamp(12px, 2vh, 20px);
  }
  
  /* Connection Screen */
  .tablet-connection-screen {
    padding: 0 !important;
    min-height: 100vh;
    min-height: 100dvh;
  }
  
  .connection-content {
    padding: clamp(20px, 3vh, 32px) clamp(16px, 4vw, 24px);
  }
  
  .screen-card {
    padding: clamp(20px, 3vh, 28px);
    margin-bottom: clamp(16px, 2.5vh, 24px);
  }
  
  /* Process Screen */
  .tablet-process-screen {
    padding: 0 !important;
    min-height: 100vh;
    min-height: 100dvh;
  }
  
  /* Session End Screen */
  .tablet-session-end-screen {
    padding: 0 !important;
    min-height: 100vh;
    min-height: 100dvh;
  }
  
  /* Preview Screen */
  .tablet-preview-screen {
    padding: 0 !important;
    min-height: 100vh;
    min-height: 100dvh;
  }
  
  /* Footer adjustments */
  .screen-footer {
    padding: clamp(10px, 1.5vh, 14px) clamp(12px, 3vw, 20px);
    min-height: clamp(40px, 6vh, 56px);
  }
  
  .footer-info {
    font-size: clamp(11px, 2.2vw, 13px);
  }
  
  /* Progress indicators */
  .progress-step {
    width: clamp(6px, 1.2vw, 8px);
    height: clamp(6px, 1.2vw, 8px);
  }
}

/* S24 Ultra - Landscape Mode */
/* Viewport: ~896px width x ~412px height in landscape */
@media only screen 
  and (min-width: 600px) and (max-width: 1000px)
  and (min-height: 300px) and (max-height: 500px)
  and (orientation: landscape) {
  
  /* All tablet screens - full viewport */
  .tablet-welcome-screen,
  .tablet-capture-screen,
  .tablet-category-screen,
  .tablet-results-screen,
  .tablet-preview-screen,
  .tablet-process-screen,
  .tablet-profile-screen,
  .tablet-avatar-selection-screen,
  .tablet-session-end-screen,
  .tablet-connect-screen,
  .tablet-connection-screen {
    padding: 0 !important;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100vw;
    width: 100dvw;
  }
  
  /* Welcome Screen - Optimized side by side layout */
  .tablet-welcome-screen {
    padding: clamp(8px, 1.5vh, 16px) !important;
  }
  
  .welcome-container {
    flex-direction: row;
    gap: clamp(20px, 3vw, 32px);
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 1.5vh, 16px) clamp(12px, 2vw, 24px);
    height: 100%;
    max-height: 100vh;
  }
  
  .welcome-left {
    width: 45%;
    max-width: 45%;
    max-height: min(85vh, 400px);
    flex-shrink: 0;
    border-radius: 16px;
  }
  
  .welcome-right {
    width: 55%;
    max-width: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(8px, 1.5vh, 16px) 0;
  }
  
  .welcome-title {
    font-size: clamp(28px, 4.5vw, 38px);
    line-height: 1.15;
    margin-bottom: clamp(12px, 2vh, 18px);
  }
  
  .welcome-subtitle {
    font-size: clamp(14px, 2.2vw, 17px);
    line-height: 1.4;
    margin-bottom: clamp(16px, 3vh, 24px);
  }
  
  .get-started-btn {
    padding: clamp(12px, 2.5vh, 16px) clamp(24px, 5vw, 36px);
    font-size: clamp(15px, 2.5vw, 18px);
    width: auto;
    max-width: fit-content;
    min-width: 200px;
  }
  
  /* Header adjustments for landscape */
  .welcome-header,
  .capture-header,
  .category-header,
  .preview-header,
  .process-header,
  .profile-header,
  .results-header {
    padding: clamp(8px, 1.5vh, 12px) clamp(12px, 2vw, 20px) !important;
    min-height: clamp(40px, 6vh, 50px);
    max-height: clamp(40px, 6vh, 50px);
  }
  
  .header-logo-icon,
  .welcome-header-logo .header-logo-icon {
    height: clamp(28px, 4.5vh, 36px);
  }
  
  /* Capture Screen - Horizontal layout optimized */
  .tablet-capture-screen {
    padding: clamp(8px, 1.5vh, 16px) !important;
  }
  
  .capture-content {
    padding: clamp(8px, 1.5vh, 16px) clamp(12px, 2vw, 24px);
    max-height: calc(100vh - clamp(40px, 6vh, 50px));
    overflow-y: auto;
  }
  
  .model-options-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(16px, 2.5vh, 24px);
    max-width: 100%;
  }
  
  .model-option-card {
    padding: clamp(16px, 2.5vh, 24px);
    min-height: clamp(100px, 15vh, 140px);
  }
  
  .card-icon-image {
    width: clamp(48px, 7vh, 64px);
    height: clamp(48px, 7vh, 64px);
  }
  
  .card-title {
    font-size: clamp(15px, 2.5vw, 18px);
  }
  
  .card-description {
    font-size: clamp(13px, 2.2vw, 15px);
  }
  
  /* Category Selection - Landscape optimized */
  .tablet-category-screen {
    padding: 0 !important;
  }
  
  .category-header {
    padding: clamp(8px, 1.5vh, 12px) clamp(12px, 2vw, 20px) !important;
    margin-bottom: clamp(4px, 0.8vh, 8px);
  }
  
  .category-content {
    padding: clamp(8px, 1.5vh, 16px) clamp(12px, 2vw, 24px);
    max-height: calc(100vh - clamp(50px, 7vh, 65px));
    overflow-y: auto;
  }
  
  /* Category Grid - 4 columns in landscape for S24 Ultra */
  .category-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(12px, 2vw, 18px);
  }
  
  /* Garment Grid - 3 columns in landscape */
  .garment-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(10px, 1.8vw, 16px);
  }
  
  .garment-item {
    width: 100%;
    min-height: clamp(120px, 18vh, 160px);
  }
  
  .garment-image {
    min-height: clamp(100px, 15vh, 130px);
  }
  
  /* Results Screen - Landscape optimized */
  .tablet-results-screen {
    padding: 0 !important;
  }
  
  .results-content {
    padding: clamp(12px, 2vh, 20px) clamp(12px, 2vw, 24px);
    display: flex;
    flex-direction: row;
    gap: clamp(20px, 3vw, 32px);
    align-items: flex-start;
    max-height: calc(100vh - clamp(50px, 7vh, 65px));
    overflow-y: auto;
  }
  
  .result-image-container {
    flex: 1;
    max-width: 55%;
    max-height: min(85vh, 600px);
    border-radius: 20px;
    position: sticky;
    top: clamp(12px, 2vh, 20px);
  }
  
  .result-actions {
    flex: 1;
    max-width: 45%;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 2vh, 16px);
  }
  
  .action-btn {
    padding: clamp(12px, 2.5vh, 16px) clamp(20px, 4vw, 28px);
    font-size: clamp(14px, 2.3vw, 16px);
    min-height: 48px;
    width: 100%;
  }
  
  /* Profile Selection - Landscape */
  .tablet-profile-screen {
    padding: 0 !important;
  }
  
  .profile-content {
    padding: clamp(8px, 1.5vh, 16px) clamp(12px, 2vw, 24px);
    max-height: calc(100vh - clamp(50px, 7vh, 65px));
    overflow-y: auto;
  }
  
  .profile-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(12px, 2vw, 18px);
  }
  
  .profile-card {
    min-height: clamp(100px, 15vh, 140px);
    padding: clamp(12px, 2vh, 18px);
  }
  
  /* Avatar Selection - Landscape */
  .tablet-avatar-selection-screen {
    padding: 0 !important;
  }
  
  .avatar-content {
    padding: clamp(8px, 1.5vh, 16px) clamp(12px, 2vw, 24px);
    max-height: calc(100vh - clamp(50px, 7vh, 65px));
    overflow-y: auto;
  }
  
  .avatar-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(10px, 1.8vw, 16px);
  }
  
  /* Preview Screen - Landscape */
  .tablet-preview-screen {
    padding: 0 !important;
  }
  
  .preview-content {
    padding: clamp(8px, 1.5vh, 16px) clamp(12px, 2vw, 24px);
    max-height: calc(100vh - clamp(50px, 7vh, 65px));
    overflow-y: auto;
  }
  
  /* Process Screen - Landscape */
  .tablet-process-screen {
    padding: 0 !important;
  }
  
  .process-content {
    padding: clamp(8px, 1.5vh, 16px) clamp(12px, 2vw, 24px);
    max-height: calc(100vh - clamp(50px, 7vh, 65px));
    overflow-y: auto;
  }
  
  /* Connection Screen - Landscape */
  .tablet-connection-screen {
    padding: 0 !important;
  }
  
  .connection-content {
    padding: clamp(12px, 2vh, 20px) clamp(12px, 2vw, 24px);
    max-height: calc(100vh - clamp(50px, 7vh, 65px));
    overflow-y: auto;
  }
  
  /* Footer adjustments for landscape */
  .screen-footer {
    padding: clamp(6px, 1vh, 10px) clamp(12px, 2vw, 20px) !important;
    min-height: clamp(32px, 5vh, 42px);
    max-height: clamp(32px, 5vh, 42px);
  }
  
  .footer-info {
    font-size: clamp(10px, 1.8vw, 12px);
  }
  
  /* Progress indicators */
  .progress-step {
    width: clamp(5px, 1vw, 7px);
    height: clamp(5px, 1vw, 7px);
  }
  
  /* Language selector - smaller in landscape */
  .header-language {
    top: clamp(8px, 1.5vh, 12px);
    right: clamp(12px, 2vw, 20px);
  }
  
  .lang-btn {
    padding: clamp(5px, 1.2vh, 8px) clamp(8px, 1.8vw, 12px);
    font-size: clamp(11px, 1.8vw, 13px);
    min-height: 32px;
  }
  
  /* Disconnect status */
  .disconnect-status {
    bottom: max(clamp(8px, 1.5vh, 12px), env(safe-area-inset-bottom));
    right: clamp(12px, 2vw, 20px);
    padding: clamp(6px, 1.2vh, 10px);
    font-size: clamp(11px, 1.8vw, 13px);
  }
  
  /* Safe area insets for landscape */
  .welcome-header,
  .capture-header,
  .category-header,
  .preview-header,
  .process-header,
  .profile-header,
  .results-header {
    padding-left: max(clamp(12px, 2vw, 20px), env(safe-area-inset-left)) !important;
    padding-right: max(clamp(12px, 2vw, 20px), env(safe-area-inset-right)) !important;
  }
}

/* =================================================================
   UNIVERSAL PHONE BREAKPOINT (360-480px width)
   Works for all modern phones: S24 Ultra, iPhone 15 Pro, Poco F3, etc.
   ================================================================= */

/* Universal Phone Portrait - All modern phones */
@media only screen 
  and (max-width: 480px)
  and (orientation: portrait) {
  
  /* Ensure all tablet screens are full viewport on phones */
  .tablet-welcome-screen,
  .tablet-capture-screen,
  .tablet-category-screen,
  .tablet-results-screen,
  .tablet-preview-screen,
  .tablet-process-screen,
  .tablet-profile-screen,
  .tablet-avatar-selection-screen,
  .tablet-session-end-screen,
  .tablet-connect-screen,
  .tablet-connection-screen {
    width: 100vw;
    width: 100dvw; /* Dynamic viewport width */
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
  }
  
  /* Prevent horizontal scroll */
  body,
  html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    max-width: 100dvw;
  }
  
  /* Ensure containers don't overflow */
  .welcome-container,
  .capture-content,
  .category-content,
  .results-content,
  .preview-content,
  .process-content,
  .profile-content,
  .avatar-content,
  .connection-content {
    max-width: 100%;
    width: 100%;
    padding-left: clamp(12px, 3vw, 20px);
    padding-right: clamp(12px, 3vw, 20px);
    box-sizing: border-box;
  }
  
  /* Grid optimizations for phones */
  .category-grid,
  .garment-grid,
  .profile-grid,
  .avatar-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: clamp(12px, 2.5vw, 18px);
  }
  
  /* Single column for complex layouts */
  .model-options-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Touch-friendly button sizes */
  .get-started-btn,
  .action-btn,
  .model-option-card,
  .category-card,
  .profile-card,
  .garment-item {
    min-height: 48px;
    min-width: 48px;
  }
  
  /* Typography scaling for readability */
  h1, .welcome-title, .category-title {
    font-size: clamp(24px, 6vw, 32px) !important;
    line-height: 1.2;
  }
  
  h2, .section-title {
    font-size: clamp(20px, 5vw, 26px) !important;
  }
  
  h3, .card-title {
    font-size: clamp(16px, 4vw, 20px) !important;
  }
  
  p, .welcome-subtitle, .card-description {
    font-size: clamp(13px, 3.2vw, 16px) !important;
    line-height: 1.5;
  }
  
  /* Header adjustments */
  .welcome-header,
  .capture-header,
  .category-header,
  .preview-header,
  .process-header,
  .profile-header,
  .results-header {
    padding: clamp(10px, 2vh, 16px) clamp(12px, 3vw, 20px) !important;
    min-height: clamp(44px, 7vh, 56px);
  }
  
  /* Footer adjustments */
  .screen-footer {
    padding: clamp(10px, 1.5vh, 14px) clamp(12px, 3vw, 20px) !important;
    min-height: clamp(40px, 6vh, 52px);
  }
  
  /* Image/video constraints */
  .welcome-left,
  .welcome-video,
  .capture-video,
  .result-image-container {
    max-width: 100%;
    width: 100%;
    height: auto;
  }
  
  /* Safe area insets for phones with notches */
  .welcome-header,
  .capture-header,
  .category-header,
  .preview-header,
  .process-header,
  .profile-header,
  .results-header {
    padding-top: max(clamp(10px, 2vh, 16px), env(safe-area-inset-top)) !important;
  }
  
  .screen-footer {
    padding-bottom: max(clamp(10px, 1.5vh, 14px), env(safe-area-inset-bottom)) !important;
  }
  
  /* Full-width buttons on phones for better UX */
  .get-started-btn,
  .primary-action-btn,
  .confirm-btn {
    width: 100%;
    max-width: 100%;
  }
  
  /* Ensure modals are properly sized on phones */
  .modal-dialog {
    margin: clamp(16px, 4vh, 24px);
    max-width: calc(100vw - clamp(32px, 8vw, 48px));
  }
  
  .modal-content {
    border-radius: 20px;
  }
  
  /* Fix any potential overflow issues */
  .welcome-container,
  .capture-content,
  .category-content,
  .results-content,
  .preview-content,
  .process-content,
  .profile-content {
    max-width: 100%;
    overflow-x: hidden;
  }
  
  img, video, iframe, svg {
    max-width: 100%;
    height: auto;
  }
  
  /* Prevent text overflow */
  h1, h2, h3, p, span, div {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* Better spacing for stacked content */
  .welcome-right > * + * {
    margin-top: clamp(12px, 2vh, 20px);
  }
  
  /* Improve touch targets */
  button, a, .clickable {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Language selector adjustments */
  .header-language {
    position: fixed;
    top: max(clamp(10px, 2vh, 16px), env(safe-area-inset-top));
    right: clamp(12px, 3vw, 20px);
    z-index: 1000;
  }
  
  .lang-btn {
    padding: clamp(6px, 1.5vw, 10px) clamp(10px, 2.5vw, 14px);
    font-size: clamp(12px, 2.8vw, 14px);
    min-height: 36px;
  }
  
  /* Disconnect button positioning */
  .disconnect-status {
    position: fixed;
    bottom: max(clamp(16px, 3vh, 24px), env(safe-area-inset-bottom));
    right: clamp(12px, 3vw, 20px);
    z-index: 1000;
    padding: clamp(8px, 1.5vw, 12px);
    font-size: clamp(12px, 2.8vw, 14px);
  }
}

/* Universal Phone Landscape - All phones in landscape */
@media only screen 
  and (max-width: 1000px)
  and (max-height: 500px)
  and (orientation: landscape) {
  
  /* Ensure all screens are optimized for landscape */
  .tablet-welcome-screen,
  .tablet-capture-screen,
  .tablet-category-screen,
  .tablet-results-screen,
  .tablet-preview-screen,
  .tablet-process-screen,
  .tablet-profile-screen,
  .tablet-avatar-selection-screen,
  .tablet-session-end-screen,
  .tablet-connection-screen {
    padding: 0 !important;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100vw;
    width: 100dvw;
  }
  
  /* Welcome container - horizontal layout */
  .welcome-container {
    flex-direction: row;
    gap: clamp(16px, 3vw, 28px);
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 1.5vh, 16px) clamp(12px, 2vw, 24px);
    height: 100%;
  }
  
  .welcome-left {
    width: 45%;
    max-width: 45%;
    max-height: min(85vh, 400px);
    flex-shrink: 0;
  }
  
  .welcome-right {
    width: 55%;
    max-width: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .welcome-title {
    font-size: clamp(24px, 4vw, 36px);
    margin-bottom: clamp(10px, 1.8vh, 16px);
  }
  
  .welcome-subtitle {
    font-size: clamp(13px, 2.1vw, 16px);
    margin-bottom: clamp(14px, 2.5vh, 22px);
  }
  
  .get-started-btn {
    width: auto;
    max-width: fit-content;
    min-width: 180px;
    padding: clamp(10px, 2.2vh, 14px) clamp(20px, 4.5vw, 32px);
    font-size: clamp(14px, 2.4vw, 17px);
  }
  
  /* Category and Garment grids - more columns in landscape */
  .category-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: clamp(10px, 1.8vw, 16px);
  }
  
  .garment-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: clamp(10px, 1.8vw, 16px);
  }
  
  .profile-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: clamp(10px, 1.8vw, 16px);
  }
  
  .avatar-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: clamp(10px, 1.8vw, 16px);
  }
  
  /* Headers - compact in landscape */
  .welcome-header,
  .capture-header,
  .category-header,
  .preview-header,
  .process-header,
  .profile-header,
  .results-header {
    padding: clamp(6px, 1.2vh, 10px) clamp(12px, 2vw, 20px) !important;
    min-height: clamp(36px, 5.5vh, 46px);
    max-height: clamp(36px, 5.5vh, 46px);
  }
  
  /* Content areas - scrollable in landscape */
  .capture-content,
  .category-content,
  .results-content,
  .preview-content,
  .process-content,
  .profile-content,
  .avatar-content {
    padding: clamp(8px, 1.5vh, 14px) clamp(12px, 2vw, 24px);
    max-height: calc(100vh - clamp(42px, 6.5vh, 52px));
    overflow-y: auto;
  }
  
  /* Results - side by side layout */
  .results-content {
    display: flex;
    flex-direction: row;
    gap: clamp(16px, 2.8vw, 28px);
    align-items: flex-start;
  }
  
  .result-image-container {
    flex: 1;
    max-width: 55%;
    max-height: min(80vh, 550px);
    position: sticky;
    top: clamp(8px, 1.5vh, 14px);
  }
  
  .result-actions {
    flex: 1;
    max-width: 45%;
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.8vh, 14px);
  }
  
  /* Footer - compact in landscape */
  .screen-footer {
    padding: clamp(5px, 0.9vh, 8px) clamp(12px, 2vw, 20px) !important;
    min-height: clamp(28px, 4.5vh, 38px);
    max-height: clamp(28px, 4.5vh, 38px);
  }
  
  /* Video/image constraints */
  .welcome-video,
  .welcome-left,
  .capture-video {
    max-height: min(85vh, 400px);
    object-fit: cover;
  }
}

/* =================================================================
   HONOR PAD 10 OPTIMIZATION (DPR 2 - Most Common - 95% of users)
   Screen: 12.1" TFT LCD (IPS), 2560x1600px (16:10 aspect ratio)
   Viewport: ~1280x800px (landscape), ~800x1280px (portrait)
   Pixel Density: ~249 PPI, 120Hz refresh rate
   
   BEST PRACTICE: Using CSS custom properties for maintainability
   Other DPRs (1, 1.5) will inherit and scale naturally via clamp()
   ================================================================= */

  /* Honor Pad 10 - Landscape Mode (DPR 2 - Most Common Scale) */
  /* Viewport: ~1280x800px */
  @media only screen 
    and (min-width: 1200px) and (max-width: 1350px)
    and (min-height: 750px) and (max-height: 850px)
    and (orientation: landscape) {
    
    /* All tablet screens - optimized for large tablet display */
    .tablet-welcome-screen,
    .tablet-capture-screen,
    .tablet-category-screen,
    .tablet-results-screen,
    .tablet-preview-screen,
    .tablet-process-screen,
    .tablet-profile-screen,
    .tablet-avatar-selection-screen,
    .tablet-session-end-screen,
    .tablet-connect-screen,
    .tablet-connection-screen {
      padding: clamp(16px, 2vh, 24px) !important;
      min-height: 100vh;
      min-height: 100dvh;
      width: 100vw;
      width: 100dvw;
    }
    
    /* Welcome Screen - Large tablet optimized layout */
    .welcome-container {
      flex-direction: row;
      gap: clamp(28px, 3.5vw, 40px);
      align-items: center;
      justify-content: center;
      padding: clamp(16px, 2.5vh, 28px) clamp(20px, 2.5vw, 40px);
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .welcome-left {
      width: 48%;
      max-width: 48%;
      max-height: min(75vh, 600px);
      flex-shrink: 0;
      border-radius: 20px;
    }
    
    .welcome-right {
      width: 52%;
      max-width: 52%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: clamp(12px, 2vh, 24px) 0;
    }
    
    .welcome-title {
      font-size: clamp(36px, 4.5vw, 48px);
      line-height: 1.15;
      margin-bottom: clamp(16px, 2.5vh, 24px);
      font-weight: 700;
    }
    
    .welcome-subtitle {
      font-size: clamp(16px, 2vw, 20px);
      line-height: 1.5;
      margin-bottom: clamp(20px, 3vh, 32px);
    }
    
    .get-started-btn {
      padding: clamp(16px, 2.5vh, 20px) clamp(32px, 4.5vw, 44px);
      font-size: clamp(16px, 2vw, 20px);
      width: auto;
      max-width: fit-content;
      min-width: 260px;
      border-radius: 14px;
    }
    
    /* Headers - optimized for large tablet */
    .welcome-header,
    .capture-header,
    .category-header,
    .preview-header,
    .process-header,
    .profile-header,
    .results-header {
      padding: clamp(10px, 1.8vh, 16px) clamp(20px, 2.5vw, 36px) !important;
      min-height: clamp(50px, 7vh, 64px);
    }
    
    .header-logo-icon,
    .welcome-header-logo .header-logo-icon {
      height: clamp(36px, 4.5vh, 48px);
    }
    
    /* Category Grid - 4 columns for DPR 2 scale */
    .category-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: clamp(14px, 2vw, 20px);
      max-width: 1200px;
      margin: 0 auto;
    }
    
    /* Garment Grid - 3 columns */
    .garment-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(14px, 2vw, 20px);
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .garment-item {
      min-height: clamp(160px, 22vh, 200px);
      border-radius: 18px;
    }
    
    .garment-image {
      min-height: clamp(130px, 18vh, 170px);
    }
    
    /* Results Screen - Side by side */
    .results-content {
      padding: clamp(20px, 2.5vh, 32px) clamp(20px, 2.5vw, 40px);
      display: flex;
      flex-direction: row;
      gap: clamp(28px, 3.5vw, 40px);
      align-items: flex-start;
      max-width: 1200px;
      margin: 0 auto;
      max-height: calc(100vh - clamp(64px, 9vh, 80px));
      overflow-y: auto;
    }
    
    .result-image-container {
      flex: 1;
      max-width: 55%;
      max-height: min(80vh, 700px);
      border-radius: 20px;
      position: sticky;
      top: clamp(20px, 2.5vh, 32px);
    }
    
    .result-actions {
      flex: 1;
      max-width: 45%;
      display: flex;
      flex-direction: column;
      gap: clamp(14px, 2vh, 20px);
    }
    
    .action-btn {
      padding: clamp(14px, 2.2vh, 20px) clamp(24px, 3.5vw, 36px);
      font-size: clamp(15px, 1.9vw, 18px);
      min-height: 56px;
      width: 100%;
      border-radius: 14px;
    }
    
    /* Profile Grid - 4 columns */
    .profile-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: clamp(14px, 2vw, 20px);
      max-width: 1200px;
      margin: 0 auto;
      padding: clamp(14px, 2.2vh, 28px) clamp(20px, 2.5vw, 40px);
    }
    
    .profile-card {
      min-height: clamp(140px, 20vh, 180px);
      padding: clamp(18px, 2.5vh, 24px);
      border-radius: 18px;
    }
    
    /* Avatar Grid - 4 columns */
    .avatar-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: clamp(14px, 2vw, 20px);
      max-width: 1200px;
      margin: 0 auto;
      padding: clamp(14px, 2.2vh, 28px) clamp(20px, 2.5vw, 40px);
    }
    
    /* Capture Screen */
    .capture-content {
      padding: clamp(14px, 2.2vh, 28px) clamp(20px, 2.5vw, 40px);
      max-width: 1200px;
      margin: 0 auto;
      max-height: calc(100vh - clamp(64px, 9vh, 80px));
      overflow-y: auto;
    }
    
    .model-options-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(20px, 3vw, 28px);
      max-width: 1100px;
      margin: 0 auto;
    }
    
    .model-option-card {
      padding: clamp(24px, 3.5vh, 32px);
      min-height: clamp(160px, 22vh, 200px);
      border-radius: 18px;
    }
    
    .card-icon-image {
      width: clamp(64px, 8vw, 80px);
      height: clamp(64px, 8vw, 80px);
      margin-bottom: clamp(14px, 2vh, 20px);
    }
    
    .card-title {
      font-size: clamp(18px, 2.2vw, 22px);
      margin-bottom: clamp(10px, 1.8vh, 16px);
    }
    
    .card-description {
      font-size: clamp(14px, 1.8vw, 17px);
    }
    
    /* Footer adjustments */
    .screen-footer {
      padding: clamp(10px, 1.8vh, 16px) clamp(20px, 2.5vw, 36px) !important;
      min-height: clamp(44px, 6vh, 56px);
    }
    
    .footer-info {
      font-size: clamp(13px, 1.7vw, 15px);
    }
    
    /* Category Content */
    .category-content {
      padding: clamp(14px, 2.2vh, 28px) clamp(20px, 2.5vw, 40px);
      max-width: 1200px;
      margin: 0 auto;
      max-height: calc(100vh - clamp(64px, 9vh, 80px));
      overflow-y: auto;
    }
    
    .category-card {
      padding: clamp(18px, 2.5vh, 24px);
      border-radius: 18px;
    }
    
    .category-image {
      height: clamp(120px, 18vh, 160px);
      margin-bottom: clamp(14px, 2vh, 20px);
    }
    
    /* Blobs - Ensure visible on Honor Pad 10 Landscape - Same as profile page */
    .category-container .bg-container .blob-1,
    .category-container .bg-container .blob-2,
    .items-container .bg-container .blob-1,
    .items-container .bg-container .blob-2 {
      position: absolute !important;
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      z-index: 1 !important;
      pointer-events: none !important;
      background-repeat: no-repeat !important;
      background-size: contain !important;
    }
    
    .category-container .bg-container .blob-1,
    .items-container .bg-container .blob-1 {
      width: 749.27px !important;
      height: 592.41px !important;
      left: -253px !important;
      top: 280px !important;
      background: url(/uploads/assets/rb_112211.png) !important;
      filter: blur(100.945px) !important;
      transform: rotate(49.86deg) !important;
    }
    
    .category-container .bg-container .blob-2,
    .items-container .bg-container .blob-2 {
      width: 749.27px !important;
      height: 592.41px !important;
      left: 866px !important;
      top: -543px !important;
      background: url(/uploads/assets/rb_112211.png) !important;
      filter: blur(100.945px) !important;
      transform: rotate(49.86deg) !important;
    }
    
    /* Preview Page - Honor Pad 10 Landscape (DPR 2) - Scale Down Image & Fix Navbar */
    .tablet-preview-screen .preview-container {
      width: 100vw;
      max-width: 100vw;
      padding: 0;
      justify-content: flex-start;
      align-items: center;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      margin: 0;
      overflow-y: auto;
      overflow-x: hidden;
    }
    
    .tablet-preview-screen .main-container {
      width: 100%;
      max-width: clamp(600px, 65vw, 900px);
      padding: clamp(12px, 1.8vh, 20px) clamp(40px, 5vw, 80px);
      gap: clamp(16px, 2.2vh, 24px);
      margin: clamp(60px, 8vh, 90px) auto 0;
      padding-top: clamp(12px, 1.8vh, 20px);
      margin-left: auto;
      margin-right: auto;
      max-height: calc(100vh - clamp(72px, 10vh, 90px));
      height: auto;
      box-sizing: border-box;
      flex-shrink: 0;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    
    .tablet-preview-screen .preview-content {
      padding: clamp(12px, 1.8vh, 20px) clamp(20px, 2.5vw, 40px);
      max-width: clamp(600px, 65vw, 900px);
      margin: 0 auto;
    }
    
    /* Preview Elements - Scaled Down */
    .tablet-preview-screen .title {
      max-width: clamp(400px, 55vw, 550px);
      min-height: clamp(32px, 4vh, 48px);
    }
    
    .tablet-preview-screen .selected-item {
      font-size: clamp(20px, 2.5vw, 28px);
      min-height: clamp(32px, 4vh, 48px);
    }
    
    .tablet-preview-screen .main-container .icon.back-icon {
      width: clamp(28px, 3.5vw, 36px);
      height: clamp(28px, 3.5vw, 36px);
      min-width: clamp(28px, 3.5vw, 36px);
      min-height: clamp(28px, 3.5vw, 36px);
    }
    
    .tablet-preview-screen .body {
      max-width: clamp(400px, 55vw, 550px);
      gap: clamp(10px, 1.3vh, 14px);
    }
    
    /* Preview Image - Scaled Down */
    .tablet-preview-screen .selected-item-frame {
      max-width: clamp(250px, 30vw, 320px);
      min-height: clamp(200px, 25vh, 280px);
      max-height: clamp(280px, 35vh, 320px);
      border-radius: clamp(10px, 1.3vw, 14px);
    }
    
    .tablet-preview-screen .selected-item-frame .icon.zoom-icon {
      width: clamp(28px, 3.5vw, 32px);
      height: clamp(28px, 3.5vw, 32px);
      left: clamp(12px, 1.5vw, 14px);
      top: clamp(12px, 1.5vw, 14px);
    }
    
    .tablet-preview-screen .selected-item-frame .icon.zoom-icon i {
      font-size: clamp(16px, 2vw, 18px);
    }
    
    /* Header adjustments for preview page - Account for navbar */
    .tablet-preview-screen .preview-container .header {
      height: clamp(56px, 7vh, 72px) !important;
      padding: clamp(12px, 1.5vh, 16px) clamp(20px, 2.5vw, 36px) !important;
      z-index: 100;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
    }
  }

  /* Honor Pad 10 - Portrait Mode (DPR 2 - Most Common Scale) */
  /* Viewport: ~800x1280px */
  @media only screen 
    and (min-width: 750px) and (max-width: 850px)
    and (min-height: 1200px) and (max-height: 1350px)
    and (orientation: portrait) {
    
    /* All tablet screens */
    .tablet-welcome-screen,
    .tablet-capture-screen,
    .tablet-category-screen,
    .tablet-results-screen,
    .tablet-preview-screen,
    .tablet-process-screen,
    .tablet-profile-screen,
    .tablet-avatar-selection-screen,
    .tablet-session-end-screen,
    .tablet-connect-screen,
    .tablet-connection-screen {
      padding: clamp(18px, 2.2vh, 28px) !important;
      min-height: 100vh;
      min-height: 100dvh;
    }
    
    /* Welcome Screen - Portrait layout */
    .welcome-container {
      flex-direction: column;
      gap: clamp(28px, 3.5vh, 40px);
      padding: clamp(18px, 2.5vh, 36px) clamp(28px, 3.5vw, 56px);
      max-width: 1000px;
      margin: 0 auto;
    }
    
    .welcome-left {
      width: 100%;
      max-height: min(45vh, 500px);
      border-radius: 20px;
    }
    
    .welcome-right {
      width: 100%;
      text-align: center;
    }
    
    .welcome-title {
      font-size: clamp(40px, 5vw, 52px);
      margin-bottom: clamp(20px, 3vh, 28px);
    }
    
    .welcome-subtitle {
      font-size: clamp(18px, 2.2vw, 22px);
      margin-bottom: clamp(24px, 3.5vh, 36px);
    }
    
    .get-started-btn {
      padding: clamp(18px, 2.5vh, 24px) clamp(36px, 5vw, 48px);
      font-size: clamp(18px, 2.2vw, 22px);
      width: auto;
      min-width: 280px;
    }
    
    /* Category Grid - 3 columns in portrait */
    .category-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(16px, 2.5vw, 24px);
      max-width: 1000px;
      margin: 0 auto;
    }
    
    /* Garment Grid - 2 columns */
    .garment-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: clamp(16px, 2.5vw, 24px);
      max-width: 1000px;
      margin: 0 auto;
    }
    
    /* Profile Grid - 3 columns */
    .profile-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(16px, 2.5vw, 24px);
      max-width: 1000px;
      margin: 0 auto;
    }
    
    /* Avatar Grid - 3 columns */
    .avatar-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(16px, 2.5vw, 24px);
      max-width: 1000px;
      margin: 0 auto;
    }
    
     /* Model Options - 2 columns */
     .model-options-grid {
       grid-template-columns: repeat(2, 1fr);
       gap: clamp(20px, 3vw, 28px);
       max-width: 900px;
       margin: 0 auto;
     }
     
     /* Blobs - Ensure visible on Honor Pad 10 Portrait - Same as profile page */
     .category-container .bg-container .blob-1,
     .category-container .bg-container .blob-2,
     .items-container .bg-container .blob-1,
     .items-container .bg-container .blob-2 {
       position: absolute !important;
       display: block !important;
       visibility: visible !important;
       opacity: 1 !important;
       z-index: 1 !important;
       pointer-events: none !important;
       background-repeat: no-repeat !important;
       background-size: contain !important;
     }
     
     .category-container .bg-container .blob-1,
     .items-container .bg-container .blob-1 {
       width: 749.27px !important;
       height: 592.41px !important;
       left: -253px !important;
       top: 280px !important;
       background: url(/uploads/assets/rb_112211.png) !important;
       filter: blur(100.945px) !important;
       transform: rotate(49.86deg) !important;
     }
     
     .category-container .bg-container .blob-2,
     .items-container .bg-container .blob-2 {
       width: 749.27px !important;
       height: 592.41px !important;
       left: 866px !important;
       top: -543px !important;
       background: url(/uploads/assets/rb_112211.png) !important;
       filter: blur(100.945px) !important;
       transform: rotate(49.86deg) !important;
     }
     
     /* Preview Page - Honor Pad 10 Portrait (DPR 2) - Scale Down Image & Fix Navbar */
     .tablet-preview-screen .preview-container {
       max-width: 85vw;
       padding: clamp(10px, 1.2vh, 16px);
     }
     
     .tablet-preview-screen .main-container {
       padding: clamp(14px, 2vh, 24px) clamp(32px, 4vw, 64px);
       gap: clamp(18px, 2.5vh, 28px);
       max-width: clamp(700px, 70vw, 950px);
       margin: clamp(70px, 9vh, 100px) auto 0;
     }
     
     .tablet-preview-screen .preview-content {
       padding: clamp(14px, 2vh, 24px) clamp(24px, 3vw, 48px);
       max-width: clamp(700px, 70vw, 950px);
       margin: 0 auto;
     }
     
     /* Preview Elements - Scaled Down Portrait */
     .tablet-preview-screen .title {
       max-width: clamp(450px, 60vw, 600px);
       min-height: clamp(34px, 4.2vh, 50px);
     }
     
     .tablet-preview-screen .selected-item {
       font-size: clamp(22px, 2.8vw, 30px);
       min-height: clamp(34px, 4.2vh, 50px);
     }
     
     .tablet-preview-screen .main-container .icon.back-icon {
       width: clamp(30px, 3.8vw, 38px);
       height: clamp(30px, 3.8vw, 38px);
       min-width: clamp(30px, 3.8vw, 38px);
       min-height: clamp(30px, 3.8vw, 38px);
     }
     
     .tablet-preview-screen .body {
       max-width: clamp(450px, 60vw, 600px);
       gap: clamp(11px, 1.4vh, 15px);
     }
     
     /* Preview Image - Scaled Down Portrait */
     .tablet-preview-screen .selected-item-frame {
       max-width: clamp(280px, 35vw, 360px);
       min-height: clamp(220px, 27vh, 300px);
       max-height: clamp(300px, 37vh, 360px);
       border-radius: clamp(11px, 1.4vw, 15px);
     }
     
     .tablet-preview-screen .selected-item-frame .icon.zoom-icon {
       width: clamp(30px, 3.8vw, 36px);
       height: clamp(30px, 3.8vw, 36px);
       left: clamp(14px, 1.8vw, 16px);
       top: clamp(14px, 1.8vw, 16px);
     }
     
     .tablet-preview-screen .selected-item-frame .icon.zoom-icon i {
       font-size: clamp(17px, 2.2vw, 19px);
     }
     
     /* Header adjustments for preview page portrait */
     .tablet-preview-screen .preview-container .header {
       height: clamp(56px, 7vh, 72px) !important;
       padding: clamp(12px, 1.5vh, 16px) clamp(20px, 2.5vw, 36px) !important;
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       width: 100%;
       z-index: 100;
     }
  }

/* =================================================================
   POCO F3 OPTIMIZATION
   Screen: 6.67" AMOLED, 1080x2400px (Portrait), 2400x1080px (Landscape)
   ================================================================= */

/* =================================================================
   POCO F3 OPTIMIZATION
   Screen: 6.67" AMOLED, 1080x2400px (Portrait), 2400x1080px (Landscape)
   ================================================================= */

/* Poco F3 - Portrait Mode */
@media only screen 
  and (min-width: 360px) and (max-width: 450px)
  and (min-height: 650px) and (max-height: 850px)
  and (orientation: portrait) {
  
  .tablet-welcome-screen {
    padding: 0;
  }
  
  .welcome-container {
    flex-direction: column;
    gap: 20px;
  }
  
  .welcome-left {
    width: 100%;
    max-height: 42vh;
  }
  
  .welcome-title {
    font-size: 34px;
  }
  
  .welcome-subtitle {
    font-size: 15px;
  }
  
  .model-options-grid {
    gap: 18px;
  }
  
  .model-option-card {
    padding: 22px;
    min-height: 130px;
  }
  
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

/* Poco F3 - Landscape Mode */
@media only screen 
  and (min-width: 650px) and (max-width: 850px)
  and (min-height: 360px) and (max-height: 450px)
  and (orientation: landscape) {
  
  .welcome-container {
    flex-direction: row;
    gap: 28px;
  }
  
  .welcome-left {
    width: 43%;
  }
  
  .welcome-right {
    width: 57%;
  }
  
  .welcome-title {
    font-size: 38px;
  }
  
  .model-options-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
  
  .category-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
}

/* =================================================================
   UNIVERSAL FLAGSHIP OPTIMIZATIONS
   Works for all high-end phones (S24, Poco F3, iPhone 15 Pro, etc)
   ================================================================= */

/* High-DPI Screen Enhancements */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi),
       only screen and (min-resolution: 2dppx) {
  
  /* Sharper text rendering */
  body,
  .tablet-welcome-screen,
  .tablet-capture-screen,
  .tablet-category-screen,
  .tablet-results-screen,
  .tablet-preview-screen,
  .tablet-process-screen,
  .tablet-profile-screen,
  .tablet-avatar-selection-screen,
  .tablet-session-end-screen,
  .tablet-connect-screen,
  .tablet-connection-screen {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  
  /* Sharper borders */
  .model-option-card,
  .category-card,
  .get-started-btn,
  .action-btn {
    border-width: 0.5px;
  }
  
  /* High-res images */
  img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* AMOLED Dark Mode Support (for holographic screens) */
@media (prefers-color-scheme: dark) {
  .holographic-login,
  .immersive-display {
    background: #000000; /* Pure black for AMOLED */
  }
  
  /* Use pure black backgrounds to save battery on AMOLED */
  .modal-backdrop {
    background: #000000;
  }
}

/* Smooth Orientation Change */
@media all {
  .tablet-welcome-screen,
  .tablet-capture-screen,
  .tablet-category-screen,
  .tablet-results-screen,
  .tablet-preview-screen,
  .tablet-process-screen,
  .tablet-profile-screen,
  .tablet-avatar-selection-screen,
  .tablet-session-end-screen,
  .tablet-connect-screen,
  .tablet-connection-screen,
  .welcome-container,
  .capture-content,
  .category-grid {
    transition: all 0.3s ease-in-out;
  }
}

/* =================================================================
   TOUCH OPTIMIZATION FOR PREMIUM PHONES
   ================================================================= */

/* Larger touch targets */
.get-started-btn,
.model-option-card,
.category-card,
.action-btn,
.lang-btn {
  min-height: 48px;
  min-width: 48px;
}

/* Better tap feedback */
.get-started-btn:active,
.model-option-card:active,
.category-card:active,
.action-btn:active {
  transform: scale(0.98);
  transition: transform 0.1s ease;
}

/* Prevent text selection on buttons */
.get-started-btn,
.model-option-card,
.category-card,
.action-btn,
.lang-btn {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Smooth scrolling on premium devices */
.tablet-welcome-screen,
.tablet-capture-screen,
.tablet-category-screen,
.tablet-results-screen,
.tablet-preview-screen,
.tablet-process-screen,
.tablet-profile-screen,
.tablet-avatar-selection-screen,
.tablet-session-end-screen,
.tablet-connect-screen,
.tablet-connection-screen {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* =================================================================
   NOTCH & CUTOUT SAFE AREAS (S24 Ultra has punch-hole camera)
   ================================================================= */

/* Force no padding on tablet screens - highest priority */
.tablet-welcome-screen,
.tablet-capture-screen,
.tablet-category-screen,
.tablet-results-screen,
.tablet-preview-screen,
.tablet-process-screen,
.tablet-profile-screen,
.tablet-avatar-selection-screen,
.tablet-session-end-screen,
.tablet-connect-screen,
.tablet-connection-screen {
  padding: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

/* Override any @supports rules that might add padding */
@supports (padding: max(0px)) {
  .tablet-welcome-screen,
  .tablet-capture-screen,
  .tablet-category-screen,
  .tablet-results-screen,
  .tablet-preview-screen,
  .tablet-process-screen,
  .tablet-profile-screen,
  .tablet-avatar-selection-screen,
  .tablet-session-end-screen,
  .tablet-connect-screen,
  .tablet-connection-screen {
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Ensure safe area insets are handled by headers, not screens */
.welcome-header,
.capture-header,
.category-header,
.preview-header,
.process-header,
.profile-header,
.results-header,
.avatar-header,
.session-end-header {
  padding-top: max(clamp(8px, 2vw, 12px), env(safe-area-inset-top)) !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Logo/Icon - Ensure never cut off by notch */
.logo-icon,
.header-logo-icon,
.welcome-header-logo,
.capture-logo,
.category-logo .logo-icon,
.preview-logo .logo-icon {
  margin-top: 0 !important;
}

/* Specific logo image positioning */
.welcome-header-logo img,
.capture-logo img,
.header-logo-icon {
  display: block;
  padding-top: 4px;
}

/* Disconnect button - avoid bottom notch on some phones */
.disconnect-status {
  bottom: max(32px, calc(env(safe-area-inset-bottom) + 20px)) !important;
}

/* =================================================================
   PERFORMANCE OPTIMIZATIONS
   ================================================================= */

/* GPU Acceleration for smooth animations */
.welcome-left,
.model-option-card,
.category-card,
.result-image-container,
.get-started-btn {
  will-change: transform;
  transform: translateZ(0);
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =================================================================
   HIGH REFRESH RATE SUPPORT (S24 Ultra: 120Hz, Poco F3: 120Hz)
   ================================================================= */

@media screen and (min-resolution: 2dppx) {
  /* Smoother animations for 120Hz displays */
  .welcome-left,
  .model-option-card,
  .category-card,
  .get-started-btn,
  .action-btn {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* 120Hz scroll */
  .tablet-welcome-screen,
  .tablet-capture-screen {
    scroll-behavior: smooth;
  }
}

/* =================================================================
   PROFESSIONAL POLISH
   ================================================================= */

/* Glass morphism effects for premium feel */
.welcome-header,
.capture-header {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Subtle shadows for depth */
.model-option-card,
.category-card,
.get-started-btn {
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.model-option-card:hover,
.category-card:hover {
  box-shadow: 
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Premium color transitions */
.get-started-btn,
.action-btn,
.model-option-card,
.category-card {
  transition: 
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =================================================================
   LANDSCAPE WELCOME SCREEN FIX
   Ensure video doesn't overflow in landscape
   ================================================================= */

@media (orientation: landscape) {
  .welcome-video,
  .capture-video,
  video {
    object-fit: cover;
    max-height: 100%;
    max-width: 100%;
  }
  
  .welcome-left {
    overflow: hidden;
  }
}

/* =================================================================
   PORTRAIT CAMERA DISPLAY
   ================================================================= */

@media (orientation: portrait) {
  #cameraPreview,
  .capture-video {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}