/* Basic Reset */
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -webkit-tap-highlight-color: transparent; }
        body { background-color: #e9ecef; display: flex; justify-content: center; height: 100vh; overflow: hidden; }

        /* Mobile App Container */
        .app-container { width: 100%; max-width: 480px; background-color: #f8f9fa; height: 100%; position: relative; display: flex; flex-direction: column; box-shadow: 0 0 20px rgba(0,0,0,0.15); }

        /* Elegant Header */
        .app-header { background: #ffffff; padding: 25px 20px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; z-index: 10; }
        .user-info h2 { font-size: 20px; font-weight: 700; color: #2c3e50; }
        .user-info p { font-size: 13px; color: #7f8c8d; margin-top: 2px;}
        .user-avatar { width: 45px; height: 45px; background: #fce8eb; color: #d4828f; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 18px; font-weight: bold; }

        /* Scrollable Content */
        .app-content { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; justify-content: flex-start; }
        .app-content::-webkit-scrollbar { display: none; }

        /* Rate Us Box (Optional) */
        .rate-us-box { background: #ffffff; border-radius: 16px; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); border: 1px solid #e0e0e0; transition: 0.3s; }
        .rate-content { display: flex; align-items: center; gap: 15px; }
        .rate-text h4 { font-size: 15px; color: #2c3e50; font-weight: 700; margin-bottom: 2px; }
        .rate-text p { font-size: 11px; color: #7f8c8d; }
        .rate-actions { display: flex; align-items: center; gap: 12px; }
        .rate-btn { background: #4285F4; color: #fff; padding: 8px 15px; border-radius: 20px; text-decoration: none; font-size: 12px; font-weight: 600; box-shadow: 0 2px 5px rgba(66, 133, 244, 0.3); transition: 0.2s; }
        .rate-btn:active { transform: scale(0.95); }
        .dismiss-btn { background: none; border: none; color: #b2bec3; font-size: 16px; cursor: pointer; padding: 5px; }

        /* 4 BIG BOXES GRID */
        .big-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 5px; margin-bottom: 20px; }
        
        .big-box { background: #ffffff; border-radius: 20px; padding: 30px 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: 0 8px 20px rgba(0,0,0,0.04); border: 1px solid #f0f0f0; cursor: pointer; transition: 0.3s; aspect-ratio: 1 / 1.1; }
        .big-box:active { transform: scale(0.96); }
        
        .icon-wrapper { width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 15px; }
        
        .box-title { font-size: 16px; font-weight: 700; color: #2c3e50; margin-bottom: 5px; }
        .box-desc { font-size: 11px; color: #95a5a6; font-weight: 500; }

        /* Specific Box Colors */
        .box-orders .icon-wrapper { background: #e8f0fe; color: #4285f4; }
        .box-raise .icon-wrapper { background: #fef1e6; color: #fa903e; }
        .box-history .icon-wrapper { background: #f4f0fd; color: #8e24aa; }
        .box-wa .icon-wrapper { background: #e6f4ea; color: #34a853; }
        
        /* Modals */
        .modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 100; display: none; align-items: flex-end; justify-content: center; backdrop-filter: blur(2px); }
        .modal-overlay.active { display: flex; animation: slideUp 0.3s ease-out; }
        .modal-content { background: #fff; width: 100%; border-top-left-radius: 25px; border-top-right-radius: 25px; padding: 25px; padding-bottom: 40px; box-shadow: 0 -10px 20px rgba(0,0,0,0.1); }
        
        @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .modal-header h2 { font-size: 18px; color: #2c3e50; display: flex; align-items: center; gap: 10px; }
        .close-btn { background: none; border: none; font-size: 22px; color: #888; cursor: pointer; }

        /* WhatsApp Templates List */
        .wa-template-list { display: flex; flex-direction: column; gap: 12px; }
        .wa-template-btn { background: #f8f9fa; border: 1px solid #e0e0e0; padding: 15px; border-radius: 12px; text-align: left; font-size: 14px; font-weight: 500; color: #333; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: 0.2s; }
        .wa-template-btn:hover, .wa-template-btn:active { background: #e8f5e9; border-color: #81c784; }
        .wa-template-btn i { color: #25D366; font-size: 18px; }

        /* Views */
        .view-section { display: none; }
        .view-section.active { display: block; animation: fadeIn 0.3s; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

        /* Form Elements (Raise Order) */
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; font-size: 13px; color: #7f8c8d; margin-bottom: 8px; font-weight: 600; }
        .form-control { width: 100%; padding: 12px 15px; border: 1px solid #e0e0e0; border-radius: 12px; font-size: 14px; background: #fff; outline: none; transition: 0.3s; }
        .form-control:focus { border-color: #d4828f; }
        textarea.form-control { resize: vertical; }
        
        .chips-container { display: flex; flex-wrap: wrap; gap: 8px; }
        .chip { padding: 10px 15px; background: #fff; border-radius: 20px; font-size: 13px; color: #555; cursor: pointer; border: 1px solid #e0e0e0; font-weight: 500;}
        .chip.active { background: #fce8eb; color: #d4828f; border-color: #d4828f; font-weight: 600; }

        .qty-stepper { display: flex; align-items: center; gap: 15px; }
        .qty-btn { width: 35px; height: 35px; border-radius: 50%; background: #fff; border: 1px solid #e0e0e0; font-size: 18px; font-weight: bold; color: #333; cursor: pointer; }
        .qty-val { font-size: 16px; font-weight: bold; width: 30px; text-align: center; }

        .extra-item { display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 12px 15px; border-radius: 10px; border: 1px solid #e0e0e0; cursor: pointer; margin-bottom: 10px;}
        .extra-item label { margin: 0; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer; color: #2c3e50;}
        .extra-item input { width: 18px; height: 18px; accent-color: #d4828f; cursor: pointer;}
        
        .total-display { background: #2c3e50; color: white; padding: 15px; border-radius: 12px; display: flex; justify-content: space-between; align-items: center; margin-top: 10px; margin-bottom: 15px; }
        .total-display h3 { font-size: 22px; margin: 0; color: #d4828f;}
        
        .submit-btn { width: 100%; background: #d4828f; color: #fff; border: none; padding: 15px; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; margin-bottom: 20px;}

        .section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
        .back-icon { font-size: 20px; color: #2c3e50; cursor: pointer; }
        .section-title { font-size: 18px; font-weight: 700; color: #2c3e50; }

        /* Order Cards & Tracking Timeline */
        .order-list { display: flex; flex-direction: column; gap: 15px; padding-bottom: 20px; }
        .tracker-card { background: white; border-radius: 16px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); border: 1px solid #f0f0f0; position: relative; overflow: hidden;}
        .tracker-card::before { content:''; position:absolute; top:0; left:0; width:4px; height:100%; background:#d4828f; }
        .tracker-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; }
        .tracker-header h4 { color: #2c3e50; font-size: 16px; margin-bottom: 4px;}
        .tracker-header p { font-size: 12px; color: #7f8c8d; }
        .tracker-price { font-size: 16px; color: #d4828f; font-weight: 700; }
        
        .timeline { display: flex; justify-content: space-between; position: relative; margin-top: 20px; }
        .timeline::before { content: ''; position: absolute; top: 12px; left: 10%; width: 80%; height: 2px; background: #eee; z-index: 1; }
        .timeline-step { text-align: center; position: relative; z-index: 2; width: 33%; }
        .step-icon { width: 26px; height: 26px; border-radius: 50%; background: #eee; color: #aaa; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; font-size: 12px; border: 3px solid white; transition: 0.3s;}
        .timeline-step.active .step-icon { background: #d4828f; color: white; box-shadow: 0 0 0 3px #fce8eb; }
        .timeline-step.done .step-icon { background: #34a853; color: white; }
        .step-text { font-size: 10px; font-weight: 600; color: #7f8c8d; }
        .timeline-step.active .step-text { color: #d4828f; }

        .empty-state { text-align: center; padding: 40px 20px; color: #95a5a6; }
        .empty-state i { font-size: 40px; margin-bottom: 15px; opacity: 0.5; }

    </style>