:root {
     --bg-color: #0b1120;
     --card-bg: #1e293b;
     --text-main: #f8fafc;
     --text-muted: #94a3b8;
     --accent: #ef4444;
     --accent-hover: #dc2626;
     --success: #22c55e;
     --primary: #3b82f6;
     --gradient: linear-gradient(135deg, #ef4444, #f97316);
     --healthy-gradient: linear-gradient(135deg, #22c55e, #10b981);
     --primary-gradient: linear-gradient(135deg, #3b82f6, #8b5cf6);
     --glass-bg: rgba(30, 41, 59, 0.7);
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Outfit', sans-serif;
     -webkit-tap-highlight-color: transparent;
 }

 body {
     background-color: var(--bg-color);
     color: var(--text-main);
     min-height: 100vh;
 }

 /* App Container */
 .app-container {
     width: 100%;
     height: 100vh;
     background-color: var(--bg-color);
     position: relative;
     display: flex;
     flex-direction: column;
     overflow: hidden;
 }

 /* Screens */
 .screen {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.3s ease, transform 0.3s ease;
     transform: translateX(20px);
     background-color: var(--bg-color);
     z-index: 1;
     overflow-y: auto;
     padding-bottom: 80px;
     /* Space for bottom nav */
 }

 .screen.active {
     opacity: 1;
     pointer-events: auto;
     transform: translateX(0);
     z-index: 2;
 }

 /* Header */
 header {
     padding: 24px 20px 16px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     position: sticky;
     top: 0;
     background: rgba(11, 17, 32, 0.9);
     backdrop-filter: blur(10px);
     z-index: 5;
 }

 .logo {
     font-size: 1.5rem;
     font-weight: 700;
     background: var(--gradient);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 /* Stress Indicator */
 .stress-indicator {
     display: flex;
     align-items: center;
     gap: 6px;
     background: rgba(239, 68, 68, 0.1);
     padding: 6px 12px;
     border-radius: 20px;
     border: 1px solid rgba(239, 68, 68, 0.2);
     font-size: 0.8rem;
     color: #fca5a5;
     font-weight: 600;
 }

 .pulse-dot {
     width: 8px;
     height: 8px;
     background-color: var(--accent);
     border-radius: 50%;
     animation: pulse-dot 1.5s infinite;
 }

 @keyframes pulse-dot {
     0% {
         box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
     }

     70% {
         box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
     }

     100% {
         box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
     }
 }

 /* Buttons */
 .btn {
     width: 100%;
     padding: 16px;
     border-radius: 16px;
     border: none;
     font-size: 1rem;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.2s ease;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 8px;
 }

 .btn:active {
     transform: scale(0.98);
 }

 .btn-primary {
     background: var(--primary-gradient);
     color: white;
     box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
 }

 .btn-order {
     background: var(--gradient);
     color: white;
     box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
 }

 .btn-healthy {
     background: var(--healthy-gradient);
     color: white;
     box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
 }

 .btn-outline {
     background: transparent;
     border: 1px solid var(--text-muted);
     color: var(--text-main);
 }

 /* Bottom Nav */
 .bottom-nav {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 70px;
     background: var(--glass-bg);
     backdrop-filter: blur(12px);
     border-top: 1px solid rgba(255, 255, 255, 0.05);
     display: flex;
     justify-content: space-around;
     align-items: center;
     z-index: 10;
 }

 .nav-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 4px;
     color: var(--text-muted);
     font-size: 0.75rem;
     cursor: pointer;
     transition: color 0.2s;
     flex: 1;
 }

 .nav-item.active {
     color: var(--primary);
 }

 .nav-item svg {
     width: 24px;
     height: 24px;
 }

 /* Home Screen */
 #home-screen {
     justify-content: center;
     align-items: center;
     padding: 40px;
     text-align: center;
     background: radial-gradient(circle at top, #1e293b 0%, #0b1120 70%);
     padding-bottom: 0;
 }

 .home-logo {
     font-size: 3rem;
     font-weight: 700;
     background: var(--gradient);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     margin-bottom: 16px;
 }

 .home-tagline {
     color: var(--text-muted);
     font-size: 1.1rem;
     margin-bottom: 60px;
     line-height: 1.5;
 }

 .home-icon {
     font-size: 5rem;
     margin-bottom: 40px;
     animation: float 3s ease-in-out infinite;
 }

 @keyframes float {
     0% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(-15px);
     }

     100% {
         transform: translateY(0px);
     }
 }

 /* Food Cards */
 .food-list {
     padding: 0 20px;
     display: grid;
     grid-template-columns: 1fr;
     gap: 20px;
 }

 @media (min-width: 768px) {
     .food-list {
         grid-template-columns: repeat(2, 1fr);
         padding: 0 40px;
     }

     #home-screen .btn {
         max-width: 320px;
     }

     .home-logo {
         font-size: 4rem;
     }

     .home-tagline {
         font-size: 1.3rem;
     }

     header {
         padding: 24px 40px 16px;
     }

     .results-container,
     .scan-container {
         max-width: 600px;
         margin: 0 auto;
     }
 }

 @media (min-width: 1024px) {
     .food-list {
         grid-template-columns: repeat(3, 1fr);
         padding: 0 60px;
         max-width: 1200px;
         margin: 0 auto;
     }

     header {
         padding: 24px 60px 16px;
     }

     .success-content {
         max-width: 500px;
         margin: 0 auto;
     }
 }

 .food-card {
     background: var(--card-bg);
     border-radius: 20px;
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.05);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
 }

 .food-img {
     width: 100%;
     height: 160px;
     background-size: cover;
     background-position: center;
     position: relative;
 }

 .food-img::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 60px;
     background: linear-gradient(to top, var(--card-bg), transparent);
 }

 .food-info {
     padding: 16px;
 }

 .food-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 8px;
 }

 .food-name {
     font-size: 1.2rem;
     font-weight: 600;
 }

 .food-price {
     color: var(--accent);
     font-weight: 700;
     font-size: 1.1rem;
 }

 /* Scan Screen */
 .scan-container {
     padding: 20px;
     height: 100%;
     display: flex;
     flex-direction: column;
 }

 .camera-view {
     flex: 1;
     background: #000;
     border-radius: 24px;
     margin-bottom: 24px;
     position: relative;
     overflow: hidden;
     display: flex;
     justify-content: center;
     align-items: center;
     border: 2px dashed rgba(255, 255, 255, 0.2);
 }

 .scan-target {
     width: 200px;
     height: 200px;
     border: 2px solid rgba(59, 130, 246, 0.5);
     border-radius: 20px;
     position: relative;
 }

 .scan-target::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(to bottom, transparent 48%, rgba(59, 130, 246, 0.8) 50%, transparent 52%);
     background-size: 100% 200%;
     animation: scan 2s linear infinite;
 }

 @keyframes scan {
     0% {
         background-position: 0 -100%;
     }

     100% {
         background-position: 0 100%;
     }
 }

 .camera-text {
     position: absolute;
     bottom: 20px;
     color: var(--text-muted);
     font-size: 0.9rem;
 }

 /* Results Screen */
 .results-container {
     padding: 20px;
     text-align: center;
 }

 .detected-item {
     background: rgba(239, 68, 68, 0.1);
     border: 1px solid rgba(239, 68, 68, 0.2);
     padding: 20px;
     border-radius: 20px;
     margin-bottom: 24px;
 }

 .detected-title {
     color: #fca5a5;
     font-size: 1.2rem;
     margin-bottom: 8px;
     font-weight: 600;
 }

 .suggestion-card {
     background: var(--card-bg);
     border-radius: 20px;
     padding: 24px;
     border: 1px solid rgba(34, 197, 94, 0.2);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
     margin-bottom: 32px;
     position: relative;
     overflow: hidden;
 }

 .suggestion-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 4px;
     height: 100%;
     background: var(--success);
 }

 /* Success Screen */
 .success-content {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     height: 100%;
     padding: 40px;
     text-align: center;
 }

 .success-icon-large {
     font-size: 5rem;
     margin-bottom: 24px;
     background: var(--healthy-gradient);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     animation: scale-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 @keyframes scale-in {
     0% {
         transform: scale(0);
     }

     100% {
         transform: scale(1);
     }
 }

 /* Intercept Overlay */
 .overlay {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(11, 17, 32, 0.85);
     backdrop-filter: blur(15px);
     -webkit-backdrop-filter: blur(15px);
     z-index: 100;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.3s ease;
 }

 .overlay.active {
     opacity: 1;
     pointer-events: auto;
 }

 .popup {
     background: var(--card-bg);
     width: 88%;
     border-radius: 28px;
     padding: 32px 24px;
     text-align: center;
     transform: translateY(40px) scale(0.95);
     opacity: 0;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     border: 1px solid rgba(255, 255, 255, 0.1);
     box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
     position: relative;
 }

 .overlay.active .popup {
     transform: translateY(0) scale(1);
     opacity: 1;
 }

 .popup-icon {
     font-size: 3.5rem;
     margin-bottom: 16px;
     display: inline-block;
     animation: pulse-warn 2s infinite;
 }

 @keyframes pulse-warn {
     0% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.1);
     }

     100% {
         transform: scale(1);
     }
 }