:root {
           --sakhi-pink: #d81b60;
           --bg: #fdfafb;
       }

       body {
           font-family: 'Segoe UI', sans-serif;
           background: var(--bg);
           margin: 0;
           display: flex;
           flex-direction: column;
           height: 100vh;
           overflow: hidden;
       }

       .app-header {
           background: white;
           padding: 10px;
           border-bottom: 3px solid var(--sakhi-pink);
           text-align: center;
       }

       .app-header h1 {
           margin: 0;
           font-size: 1.3rem;
           color: var(--sakhi-pink);
       }

       .workspace {
           display: flex;
           flex: 1;
           padding: 15px;
           gap: 20px;
           overflow: hidden;
       }

       /* LEFT: INVENTORY (15 Corrected Items) */
       .sidebar {
           width: 30%;
           background: white;
           border-radius: 15px;
           box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
           padding: 15px;
           display: flex;
           flex-direction: column;
       }

       .sidebar h2 {
           font-size: 1rem;
           color: #444;
           text-align: center;
           margin-bottom: 15px;
           border-bottom: 2px solid #f0f0f0;
       }

       .inventory-grid {
           display: grid;
           grid-template-columns: repeat(3, 1fr);
           gap: 10px;
           overflow-y: auto;
       }

       .item-box {
           border: 2px solid #f0f0f0;
           border-radius: 10px;
           padding: 8px;
           text-align: center;
           cursor: pointer;
           background: #fff;
       }

       .item-box img {
           width: 40px;
           height: 40px;
           object-fit: contain;
       }

       .item-box span {
           font-size: 0.65rem;
           display: block;
           font-weight: bold;
           margin-top: 5px;
           color: #555;
       }

       .item-box.active {
           border-color: var(--sakhi-pink);
           background: #ffeaef;
       }

       /* MIDDLE: 7-SECTION THALI (No Overlap Logic) */
       .plate-zone {
           width: 40%;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
       }

       .thali {
           width: 300px;
           height: 300px;
           background: #e0e0e0;
           border: 10px solid #bdbdbd;
           border-radius: 50%;
           position: relative;
           box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
       }

       .slot {
           position: absolute;
           width: 65px;
           height: 65px;
           background: rgba(255, 255, 255, 0.4);
           border: 1.5px dashed #aaa;
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
       }

       .slot img {
           width: 80%;
           height: 80%;
           object-fit: contain;
           display: none;
       }

       .slot img.show {
           display: block;
           animation: pop 0.3s ease;
       }

       /* Fixed positions to prevent overlapping */
       .s0 {
           top: 10px;
           left: 117px;
       }

       /* Top */
       .s1 {
           top: 55px;
           right: 15px;
       }

       /* Top-Right */
       .s2 {
           bottom: 55px;
           right: 15px;
       }

       /* Bottom-Right */
       .s3 {
           bottom: 10px;
           left: 117px;
       }

       /* Bottom */
       .s4 {
           bottom: 55px;
           left: 15px;
       }

       /* Bottom-Left */
       .s5 {
           top: 55px;
           left: 15px;
       }

       /* Top-Left */
       .s-center {
           width: 100px;
           height: 100px;
           top: 100px;
           left: 100px;
           background: #fff;
           border: 2px solid #ccc;
       }

       @keyframes pop {
           from {
               transform: scale(0);
           }

           to {
               transform: scale(1);
           }
       }

       .btn-add {
           background: var(--sakhi-pink);
           color: white;
           border: none;
           padding: 12px 30px;
           border-radius: 25px;
           font-weight: bold;
           cursor: pointer;
           margin-top: 20px;
           width: 80%;
       }

       /* RIGHT: 4 MODERN BARS */
       .nutrition-panel {
           width: 30%;
           background: white;
           border-radius: 15px;
           box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
           padding: 20px;
           display: flex;
           flex-direction: column;
           gap: 18px;
       }

       .bar-wrap {
           margin-bottom: 5px;
       }

       .bar-label {
           display: flex;
           justify-content: space-between;
           font-size: 0.8rem;
           font-weight: bold;
           margin-bottom: 5px;
       }

       .bar-out {
           background: #eee;
           height: 20px;
           border-radius: 10px;
           overflow: hidden;
           border: 1px solid #ddd;
       }

       .bar-in {
           height: 100%;
           width: 0%;
           transition: width 0.5s ease-in-out;
           border-radius: 10px;
       }

       .iron {
           background: #d32f2f;
       }

       .calcium {
           background: #1976d2;
       }

       .protein {
           background: #388e3c;
       }

       .folic {
           background: #f9a825;
       }