You are a precise frontend assistant.

Task: Extract CSS from the given HTML WITHOUT any modification.

STRICT RULES:
- DO NOT change CSS
- DO NOT change colors, layout, or theme
- DO NOT generate new styles
- ONLY extract existing CSS from <style> section
- DO NOT touch JavaScript
- DO NOT translate or modify any text

OUTPUT FORMAT:

=== css/styles.css ===
[EXACT CSS from <style> tag]

=== index.html ===
- Same HTML
- Remove ONLY the <style> section
- Keep everything else EXACTLY same
- Add this line inside <head>:
<link rel="stylesheet" href="css/styles.css">

Here is the HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="theme-color" content="#16a34a" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <meta name="apple-mobile-web-app-title" content="SabziPOS" />
  <meta name="description" content="Pakistani Sabzi & Fruit Vendor POS System" />
  <title>SabziPOS — پاکستانی سبزی و پھل</title>

  <!-- PWA Manifest -->
  <link rel="manifest" href="manifest.json" />
  <link rel="apple-touch-icon" href="icons/icon-192.png" />

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@400;500;600;700;800&family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet" />

  <!-- Tailwind CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: {
            display: ['"Baloo Bhaijaan 2"', 'cursive'],
            body: ['Nunito', 'sans-serif'],
          },
          colors: {
            sabzi: {
              50:  '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0',
              300: '#86efac', 400: '#4ade80', 500: '#22c55e',
              600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d'
            },
            mango: {
              50:  '#fffbeb', 100: '#fef3c7', 200: '#fde68a',
              300: '#fcd34d', 400: '#fbbf24', 500: '#f59e0b',
              600: '#d97706', 700: '#b45309', 800: '#92400e', 900: '#78350f'
            },
            tomato: { 500: '#ef4444', 600: '#dc2626', 700: '#b91c1c' },
            sky:    { 500: '#0ea5e9', 600: '#0284c7' },
          },
          boxShadow: {
            pos:   '0 8px 32px rgba(22,163,74,0.18), 0 2px 8px rgba(0,0,0,0.10)',
            card:  '0 4px 20px rgba(0,0,0,0.08)',
            btn:   '0 4px 14px rgba(22,163,74,0.35)',
            inner: 'inset 0 2px 8px rgba(0,0,0,0.07)',
          },
          animation: {
            'slide-up':   'slideUp 0.4s cubic-bezier(0.34,1.56,0.64,1) both',
            'fade-in':    'fadeIn 0.3s ease both',
            'pop':        'pop 0.25s cubic-bezier(0.34,1.56,0.64,1) both',
            'pulse-soft': 'pulseSoft 2s ease-in-out infinite',
          },
          keyframes: {
            slideUp:    { from: { opacity:0, transform:'translateY(30px)' }, to: { opacity:1, transform:'translateY(0)' } },
            fadeIn:     { from: { opacity:0 }, to: { opacity:1 } },
            pop:        { from: { transform:'scale(0.85)', opacity:0 }, to: { transform:'scale(1)', opacity:1 } },
            pulseSoft:  { '0%,100%': { opacity:1 }, '50%': { opacity:0.6 } },
          },
        }
      }
    };
  </script>

  <style>
    :root {
      --green: #16a34a; --green-light: #22c55e; --green-dark: #14532d;
      --mango: #f59e0b; --mango-light: #fcd34d;
      --bg: #f8fdf9; --card: #ffffff; --text: #1a2e1a; --muted: #6b7280;
    }
    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
    html, body { height: 100%; overflow: hidden; background: var(--bg); font-family: 'Nunito', sans-serif; }
    #app { height: 100%; display: flex; flex-direction: column; }

    /* Scrollbars */
    ::-webkit-scrollbar { width: 4px; height: 4px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #bbf7d0; border-radius: 999px; }

    /* Screen transitions */
    .screen { display: none; flex-direction: column; height: 100%; overflow: hidden; animation: fadeIn 0.3s ease; }
    .screen.active { display: flex; }

    /* Bottom nav */
    .nav-btn.active { color: var(--green); }
    .nav-btn.active svg { stroke: var(--green); }
    .nav-btn.active .nav-dot { opacity: 1; }
    .nav-dot { opacity: 0; width: 4px; height: 4px; background: var(--green); border-radius: 999px; margin: 0 auto; transition: opacity 0.2s; }

    /* POS numpad */
    .numpad-btn {
      background: white;
      border: 2px solid #e5f7ec;
      border-radius: 14px;
      font-size: 1.5rem;
      font-weight: 800;
      color: #166534;
      box-shadow: 0 3px 10px rgba(0,0,0,0.07);
      transition: all 0.12s;
      cursor: pointer;
      user-select: none;
      display: flex; align-items: center; justify-content: center;
      min-height: 56px;
    }
    .numpad-btn:active { transform: scale(0.93); background: #dcfce7; box-shadow: none; }
    .numpad-btn.btn-clear { background: #fef2f2; border-color: #fecaca; color: #dc2626; }
    .numpad-btn.btn-del   { background: #fff7ed; border-color: #fed7aa; color: #c2410c; }
    .numpad-btn.btn-ok    { background: linear-gradient(135deg, #16a34a, #22c55e); border-color: transparent; color: white; font-size: 1.6rem; box-shadow: 0 4px 14px rgba(22,163,74,0.4); }
    .numpad-btn.btn-ok:active { box-shadow: none; }

    /* Product card */
    .product-card {
      background: white;
      border-radius: 16px;
      border: 2px solid #e5f7ec;
      transition: all 0.15s;
      cursor: pointer;
    }
    .product-card:active { transform: scale(0.96); border-color: var(--green-light); background: #f0fdf4; }
    .product-card.selected { border-color: var(--green); background: #f0fdf4; box-shadow: 0 0 0 3px rgba(22,163,74,0.15); }

    /* Bill */
    .bill-paper {
      background: white;
      border-radius: 16px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.12);
      position: relative;
      overflow: hidden;
    }
    .bill-paper::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 6px;
      background: repeating-linear-gradient(90deg, #16a34a 0, #16a34a 12px, #f59e0b 12px, #f59e0b 24px);
    }
    .bill-tear-top, .bill-tear-bottom {
      height: 12px;
      background: radial-gradient(circle at 10px -2px, transparent 8px, white 8px) repeat-x;
      background-size: 20px 12px;
    }
    .bill-tear-bottom {
      background: radial-gradient(circle at 10px 14px, transparent 8px, white 8px) repeat-x;
      background-size: 20px 12px;
      transform: rotate(180deg);
    }

    /* Input styles */
    .pos-input {
      background: #f0fdf4;
      border: 2px solid #bbf7d0;
      border-radius: 12px;
      padding: 10px 14px;
      font-family: 'Nunito', sans-serif;
      font-weight: 700;
      font-size: 1rem;
      color: #14532d;
      width: 100%;
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .pos-input:focus { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.15); }

    /* Tag badge */
    .badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; }

    /* Toggle */
    .toggle { position: relative; width: 44px; height: 24px; }
    .toggle input { opacity: 0; width: 0; height: 0; }
    .toggle-slider {
      position: absolute; inset: 0; background: #d1d5db; border-radius: 999px;
      transition: background 0.2s; cursor: pointer;
    }
    .toggle-slider::before {
      content: ''; position: absolute; width: 18px; height: 18px;
      left: 3px; top: 3px; background: white; border-radius: 50%;
      transition: transform 0.2s; box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    }
    .toggle input:checked + .toggle-slider { background: #16a34a; }
    .toggle input:checked + .toggle-slider::before { transform: translateX(20px); }

    /* Hero gradient */
    .hero-gradient { background: linear-gradient(135deg, #14532d 0%, #15803d 40%, #16a34a 70%, #22c55e 100%); }
    .mango-gradient { background: linear-gradient(135deg, #92400e, #d97706, #f59e0b); }
    .mixed-gradient { background: linear-gradient(135deg, #14532d 0%, #16a34a 50%, #d97706 100%); }

    /* Stat card */
    .stat-card { background: white; border-radius: 16px; border: 2px solid #e5f7ec; padding: 16px; }

    /* Section scroll */
    .scroll-area { overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }

    /* AdSense container */
    #adsense-bar {
      height: 50px;
      background: #f0f0f0;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.7rem; color: #9ca3af; letter-spacing: 1px;
      border-top: 1px solid #e5e7eb;
      flex-shrink: 0;
    }

    /* Print */
    @media print {
      #app > *:not(#print-area) { display: none !important; }
      #print-area { display: block !important; position: fixed; inset: 0; background: white; z-index: 9999; padding: 20px; }
    }

    /* Shimmer loading */
    .shimmer {
      background: linear-gradient(90deg, #f0fdf4 25%, #dcfce7 50%, #f0fdf4 75%);
      background-size: 200% 100%;
      animation: shimmer 1.4s infinite;
    }
    @keyframes shimmer { 0% { background-position: -200% 0 } 100% { background-position: 200% 0 } }

    /* Floating action */
    .fab {
      position: fixed; bottom: 80px; right: 16px;
      width: 56px; height: 56px;
      background: linear-gradient(135deg, #16a34a, #22c55e);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 6px 20px rgba(22,163,74,0.45);
      cursor: pointer; z-index: 40;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .fab:active { transform: scale(0.9); box-shadow: 0 3px 10px rgba(22,163,74,0.3); }

    /* Modal */
    .modal-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.5);
      display: flex; align-items: flex-end; justify-content: center;
      z-index: 100; animation: fadeIn 0.2s ease;
    }
    .modal-sheet {
      background: white; border-radius: 24px 24px 0 0;
      width: 100%; max-width: 480px; padding: 24px;
      animation: slideUp 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
      max-height: 90vh; overflow-y: auto;
    }
    .modal-handle {
      width: 40px; height: 4px; background: #e5e7eb;
      border-radius: 999px; margin: 0 auto 20px;
    }

    /* Success toast */
    .toast {
      position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
      background: #14532d; color: white; padding: 10px 20px;
      border-radius: 999px; font-weight: 700; font-size: 0.9rem;
      box-shadow: 0 4px 16px rgba(0,0,0,0.2);
      z-index: 999; animation: slideUp 0.3s ease both;
    }
    .toast.error { background: #dc2626; }

    /* Category pills */
    .cat-pill {
      padding: 6px 14px; border-radius: 999px; font-size: 0.82rem;
      font-weight: 700; border: 2px solid transparent;
      white-space: nowrap; cursor: pointer; transition: all 0.15s;
    }
    .cat-pill.active { background: #16a34a; color: white; border-color: #16a34a; }
    .cat-pill:not(.active) { background: white; color: #374151; border-color: #e5e7eb; }

    /* Bill item row */
    .bill-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px dashed #e5e7eb; }
    .bill-row:last-child { border-bottom: none; }
  </style>
</head>
<body>

<div id="app">

  <!-- ══════════════════════════════════════════════════════════
       SCREEN 1: WELCOME / ONBOARDING
  ══════════════════════════════════════════════════════════ -->
  <div id="screen-welcome" class="screen active">
    <div class="hero-gradient flex-1 flex flex-col items-center justify-center px-6 py-8 relative overflow-hidden">
      <!-- Decorative circles -->
      <div class="absolute -top-16 -right-16 w-48 h-48 rounded-full bg-white opacity-5"></div>
      <div class="absolute -bottom-12 -left-12 w-40 h-40 rounded-full bg-white opacity-5"></div>
      <div class="absolute top-1/2 left-0 w-6 h-24 bg-mango-400 opacity-30 rounded-r-full"></div>

      <!-- Logo -->
      <div class="mb-6 animate-slide-up" style="animation-delay:0.05s">
        <div class="w-24 h-24 rounded-3xl bg-white bg-opacity-15 flex items-center justify-center shadow-pos border-4 border-white border-opacity-20 mx-auto">
          <span class="text-5xl">🥬</span>
        </div>
        <h1 class="font-display text-4xl font-extrabold text-white text-center mt-3 tracking-wide">SabziPOS</h1>
        <p class="text-green-100 text-center text-sm font-medium mt-1">پاکستانی سبزی و پھل فروش</p>
      </div>

      <!-- Welcome message -->
      <div class="bg-white bg-opacity-10 rounded-2xl p-5 w-full max-w-sm mb-8 animate-slide-up" style="animation-delay:0.1s">
        <p class="text-white text-center font-bold text-lg leading-relaxed">
          خوش آمدید! 🙏<br/>
          <span class="text-green-100 font-normal text-sm">آپ کے کاروبار کو ڈیجیٹل بنائیں</span>
        </p>
      </div>

      <!-- Business type selection -->
      <div class="w-full max-w-sm animate-slide-up" style="animation-delay:0.15s">
        <p class="text-green-100 text-center text-sm font-semibold mb-4 uppercase tracking-widest">اپنا کاروبار منتخب کریں</p>
        <div class="grid grid-cols-3 gap-3">
          <button onclick="selectBusinessType('vegetables')" class="biz-btn flex flex-col items-center bg-white bg-opacity-10 border-2 border-white border-opacity-20 rounded-2xl p-4 text-white transition-all active:scale-95 hover:bg-opacity-20">
            <span class="text-3xl mb-2">🥦</span>
            <span class="font-display font-bold text-xs text-center leading-tight">سبزیاں<br/>Only</span>
          </button>
          <button onclick="selectBusinessType('fruits')" class="biz-btn flex flex-col items-center bg-white bg-opacity-10 border-2 border-white border-opacity-20 rounded-2xl p-4 text-white transition-all active:scale-95 hover:bg-opacity-20">
            <span class="text-3xl mb-2">🍎</span>
            <span class="font-display font-bold text-xs text-center leading-tight">پھل<br/>Only</span>
          </button>
          <button onclick="selectBusinessType('both')" class="biz-btn flex flex-col items-center bg-white bg-opacity-10 border-2 border-white border-opacity-20 rounded-2xl p-4 text-white transition-all active:scale-95 hover:bg-opacity-20">
            <span class="text-3xl mb-2">🛒</span>
            <span class="font-display font-bold text-xs text-center leading-tight">دونوں<br/>Both</span>
          </button>
        </div>
      </div>

      <p class="text-green-200 text-xs mt-8 text-center animate-fade-in" style="animation-delay:0.3s">
        v1.0 • Offline PWA • Made for Pakistan 🇵🇰
      </p>
    </div>
  </div>

  <!-- ══════════════════════════════════════════════════════════
       SCREEN 2: SHOP SETUP
  ══════════════════════════════════════════════════════════ -->
  <div id="screen-setup" class="screen flex-col">
    <div class="hero-gradient px-4 pt-8 pb-6 flex-shrink-0">
      <h2 class="font-display text-2xl font-extrabold text-white">دکان کی معلومات</h2>
      <p class="text-green-100 text-sm">Shop Setup — ایک بار بھریں</p>
    </div>
    <div class="scroll-area px-4 py-5 space-y-4 bg-sabzi-50">

      <!-- Photo upload -->
      <div class="bg-white rounded-2xl p-4 border-2 border-sabzi-100">
        <label class="block text-sm font-bold text-gray-600 mb-2">دکان کی تصویر (اختیاری)</label>
        <div id="shop-photo-preview" class="w-full h-28 rounded-xl border-2 border-dashed border-sabzi-300 flex flex-col items-center justify-center cursor-pointer bg-sabzi-50" onclick="document.getElementById('shop-photo-input').click()">
          <span class="text-3xl">🏪</span>
          <span class="text-xs text-gray-400 mt-1 font-semibold">تصویر اپ لوڈ کریں</span>
        </div>
        <input type="file" id="shop-photo-input" accept="image/*" class="hidden" onchange="handleShopPhoto(this)" />
      </div>

      <div class="bg-white rounded-2xl p-4 border-2 border-sabzi-100 space-y-3">
        <div>
          <label class="block text-sm font-bold text-gray-600 mb-1">دکان کا نام *</label>
          <input id="setup-shop-name" type="text" placeholder="مثال: رحمت سبزی والا" class="pos-input" />
        </div>
        <div>
          <label class="block text-sm font-bold text-gray-600 mb-1">مالک کا نام</label>
          <input id="setup-owner-name" type="text" placeholder="مثال: محمد رحمت" class="pos-input" />
        </div>
        <div>
          <label class="block text-sm font-bold text-gray-600 mb-1">فون نمبر *</label>
          <input id="setup-phone" type="tel" placeholder="03XX-XXXXXXX" class="pos-input" />
        </div>
        <div>
          <label class="block text-sm font-bold text-gray-600 mb-1">پتہ / محلہ</label>
          <textarea id="setup-address" rows="2" placeholder="محلہ، گلی، شہر" class="pos-input resize-none"></textarea>
        </div>
        <div>
          <label class="block text-sm font-bold text-gray-600 mb-1">شہر</label>
          <input id="setup-city" type="text" placeholder="مثال: لاہور، کراچی، ملتان" class="pos-input" />
        </div>
      </div>

      <!-- Referral code -->
      <div class="bg-white rounded-2xl p-4 border-2 border-mango-200">
        <label class="block text-sm font-bold text-mango-700 mb-1">🎁 ریفرل کوڈ (اختیاری)</label>
        <input id="setup-referral" type="text" placeholder="کوڈ یہاں درج کریں" class="pos-input" style="border-color:#fde68a; background:#fffbeb;" />
      </div>

      <button onclick="saveSetup()" class="w-full py-4 rounded-2xl font-display font-extrabold text-xl text-white shadow-btn transition-all active:scale-95"
        style="background:linear-gradient(135deg,#16a34a,#22c55e)">
        شروع کریں 🚀
      </button>
    </div>
  </div>

  <!-- ══════════════════════════════════════════════════════════
       MAIN APP (with bottom nav)
  ══════════════════════════════════════════════════════════ -->
  <div id="screen-main" class="screen flex-col">

    <!-- Top Header -->
    <div id="main-header" class="hero-gradient px-4 pt-6 pb-4 flex-shrink-0 flex items-center justify-between">
      <div class="flex items-center gap-3">
        <div id="header-shop-img" class="w-10 h-10 rounded-xl bg-white bg-opacity-20 flex items-center justify-center text-xl border border-white border-opacity-30">🏪</div>
        <div>
          <p id="header-shop-name" class="font-display font-extrabold text-white text-base leading-tight">دکان</p>
          <p id="header-date" class="text-green-100 text-xs font-medium"></p>
        </div>
      </div>
      <div class="flex items-center gap-2">
        <div id="header-cash" class="bg-white bg-opacity-15 rounded-xl px-3 py-1.5 text-center border border-white border-opacity-20" onclick="showCashModal()">
          <p class="text-green-100 text-xs font-semibold">کیش</p>
          <p id="header-cash-amount" class="text-white font-extrabold text-sm font-display">₨0</p>
        </div>
        <button onclick="showScreen('screen-settings')" class="w-10 h-10 bg-white bg-opacity-15 rounded-xl flex items-center justify-center border border-white border-opacity-20">
          <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><circle cx="12" cy="12" r="3"/></svg>
        </button>
      </div>
    </div>

    <!-- Tab Content Area -->
    <div id="tab-content" class="flex-1 overflow-hidden flex flex-col bg-sabzi-50">

      <!-- ── TAB: SELL ── -->
      <div id="tab-sell" class="tab-panel flex flex-col h-full">
        <!-- Category filter -->
        <div class="flex gap-2 px-3 py-2.5 overflow-x-auto flex-shrink-0 bg-white border-b border-sabzi-100" id="cat-pills-container">
          <!-- Pills injected by JS -->
        </div>

        <!-- Product Grid -->
        <div id="product-grid" class="scroll-area px-3 py-2 grid grid-cols-3 gap-2 content-start">
          <!-- Cards injected by JS -->
        </div>

        <!-- Selected Product + Numpad -->
        <div id="sell-numpad-panel" class="hidden flex-shrink-0 bg-white border-t-2 border-sabzi-100 px-3 pt-3 pb-2">
          <div class="flex items-center gap-2 mb-2">
            <div id="sell-selected-emoji" class="text-3xl">🥦</div>
            <div class="flex-1">
              <p id="sell-selected-name" class="font-extrabold text-gray-800 text-sm leading-tight"></p>
              <p id="sell-selected-rate" class="text-sabzi-600 text-xs font-semibold"></p>
            </div>
            <div class="text-right">
              <p class="text-xs text-gray-400 font-medium">گرام</p>
              <p id="sell-qty-display" class="font-display font-extrabold text-2xl text-sabzi-700 leading-tight">0</p>
            </div>
          </div>
          <!-- Amount display -->
          <div class="bg-sabzi-50 rounded-xl px-4 py-2.5 mb-2 flex justify-between items-center border border-sabzi-200">
            <span class="text-gray-500 font-semibold text-sm">رقم</span>
            <span id="sell-amount-display" class="font-display font-extrabold text-2xl text-sabzi-700">₨ 0.00</span>
          </div>
          <!-- Numpad -->
          <div class="grid grid-cols-4 gap-1.5">
            <button class="numpad-btn" onclick="numpad('7')">7</button>
            <button class="numpad-btn" onclick="numpad('8')">8</button>
            <button class="numpad-btn" onclick="numpad('9')">9</button>
            <button class="numpad-btn btn-del" onclick="numpad('del')">⌫</button>
            <button class="numpad-btn" onclick="numpad('4')">4</button>
            <button class="numpad-btn" onclick="numpad('5')">5</button>
            <button class="numpad-btn" onclick="numpad('6')">6</button>
            <button class="numpad-btn btn-clear" onclick="numpad('clear')">C</button>
            <button class="numpad-btn" onclick="numpad('1')">1</button>
            <button class="numpad-btn" onclick="numpad('2')">2</button>
            <button class="numpad-btn" onclick="numpad('3')">3</button>
            <button class="numpad-btn btn-ok col-span-1 row-span-2" onclick="addToBill()" style="min-height:116px">✓</button>
            <button class="numpad-btn col-span-2" onclick="numpad('0')">0</button>
            <button class="numpad-btn" onclick="numpad('00')">00</button>
          </div>
          <!-- Quantity shortcuts -->
          <div class="flex gap-1.5 mt-1.5">
            <button onclick="setQty(250)"  class="flex-1 py-1.5 rounded-xl bg-sabzi-50 border border-sabzi-200 text-sabzi-700 font-extrabold text-sm active:bg-sabzi-100">250g</button>
            <button onclick="setQty(500)"  class="flex-1 py-1.5 rounded-xl bg-sabzi-50 border border-sabzi-200 text-sabzi-700 font-extrabold text-sm active:bg-sabzi-100">500g</button>
            <button onclick="setQty(1000)" class="flex-1 py-1.5 rounded-xl bg-sabzi-50 border border-sabzi-200 text-sabzi-700 font-extrabold text-sm active:bg-sabzi-100">1 kg</button>
            <button onclick="setQty(2000)" class="flex-1 py-1.5 rounded-xl bg-sabzi-50 border border-sabzi-200 text-sabzi-700 font-extrabold text-sm active:bg-sabzi-100">2 kg</button>
          </div>
        </div>
      </div>

      <!-- ── TAB: BILL ── -->
      <div id="tab-bill" class="tab-panel hidden flex flex-col h-full">
        <!-- Bill header with discount/tax toggles -->
        <div class="bg-white border-b border-sabzi-100 px-3 py-2 flex gap-2 flex-shrink-0">
          <div class="flex-1 flex items-center gap-2 bg-sabzi-50 rounded-xl px-3 py-2">
            <span class="text-xs font-bold text-gray-500">Discount%</span>
            <input id="bill-discount" type="number" min="0" max="100" value="0" class="w-14 text-center font-extrabold text-sabzi-700 bg-transparent outline-none text-sm" oninput="recalcBill()" />
          </div>
          <div class="flex-1 flex items-center gap-2 bg-sabzi-50 rounded-xl px-3 py-2">
            <span class="text-xs font-bold text-gray-500">Tax%</span>
            <input id="bill-tax" type="number" min="0" max="100" value="0" class="w-14 text-center font-extrabold text-mango-600 bg-transparent outline-none text-sm" oninput="recalcBill()" />
          </div>
          <button onclick="clearBill()" class="px-3 py-2 rounded-xl bg-red-50 border border-red-200 text-red-500 font-extrabold text-sm active:bg-red-100">
            Clear
          </button>
        </div>

        <!-- Bill items list -->
        <div id="bill-items-container" class="scroll-area px-3 py-2 flex-1">
          <div id="bill-empty" class="flex flex-col items-center justify-center h-full text-center py-12">
            <span class="text-5xl mb-3">🧾</span>
            <p class="font-bold text-gray-400">بل خالی ہے</p>
            <p class="text-sm text-gray-300 mt-1">سبزی/پھل منتخب کریں</p>
          </div>
          <div id="bill-items-list" class="space-y-2"></div>
        </div>

        <!-- Bill footer totals -->
        <div id="bill-footer" class="hidden bg-white border-t-2 border-sabzi-100 px-4 py-3 flex-shrink-0">
          <div class="space-y-1 mb-3">
            <div class="flex justify-between text-sm"><span class="text-gray-500 font-semibold">کل رقم</span><span id="bf-subtotal" class="font-bold text-gray-700">₨0</span></div>
            <div class="flex justify-between text-sm" id="bf-disc-row"><span class="text-red-500 font-semibold">رعایت</span><span id="bf-discount" class="font-bold text-red-500">-₨0</span></div>
            <div class="flex justify-between text-sm" id="bf-tax-row"><span class="text-mango-600 font-semibold">ٹیکس</span><span id="bf-tax" class="font-bold text-mango-600">+₨0</span></div>
            <div class="flex justify-between text-base border-t border-dashed border-gray-200 pt-2 mt-1"><span class="font-extrabold text-gray-800">واجب الادا</span><span id="bf-total" class="font-display font-extrabold text-xl text-sabzi-700">₨0</span></div>
          </div>
          <div class="grid grid-cols-2 gap-2">
            <button onclick="printBill()" class="py-3 rounded-2xl bg-sabzi-50 border-2 border-sabzi-300 text-sabzi-700 font-extrabold text-sm flex items-center justify-center gap-2 active:bg-sabzi-100">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg>
              پرنٹ / شیئر
            </button>
            <button onclick="finalizeSale()" class="py-3 rounded-2xl font-display font-extrabold text-base text-white flex items-center justify-center gap-2 active:scale-95 shadow-btn"
              style="background:linear-gradient(135deg,#16a34a,#22c55e)">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
              فروخت مکمل
            </button>
          </div>
        </div>
      </div>

      <!-- ── TAB: STOCK ── -->
      <div id="tab-stock" class="tab-panel hidden flex flex-col h-full">
        <div class="bg-white border-b border-sabzi-100 px-3 py-2 flex items-center gap-2 flex-shrink-0">
          <input type="text" id="stock-search" placeholder="🔍 تلاش کریں..." class="pos-input flex-1 text-sm py-2" oninput="filterStock(this.value)" />
          <button onclick="showAddProductModal()" class="px-3 py-2 rounded-xl font-extrabold text-sm text-white active:scale-95"
            style="background:linear-gradient(135deg,#16a34a,#22c55e)">+ شامل</button>
        </div>
        <div id="stock-list" class="scroll-area px-3 py-2 space-y-2"></div>
      </div>

      <!-- ── TAB: REPORTS ── -->
      <div id="tab-reports" class="tab-panel hidden flex flex-col h-full">
        <div class="scroll-area px-3 py-3 space-y-3">
          <!-- Today stats -->
          <div class="grid grid-cols-2 gap-2">
            <div class="stat-card">
              <p class="text-xs font-bold text-gray-400 mb-1">آج کی فروخت</p>
              <p id="rep-today-sales" class="font-display font-extrabold text-xl text-sabzi-700">₨0</p>
              <p id="rep-today-bills" class="text-xs text-gray-400 mt-0.5">0 بل</p>
            </div>
            <div class="stat-card" style="border-color:#fde68a;">
              <p class="text-xs font-bold text-gray-400 mb-1">کیش ان ہینڈ</p>
              <p id="rep-cash" class="font-display font-extrabold text-xl text-mango-600">₨0</p>
              <button onclick="showCashModal()" class="text-xs text-mango-500 font-bold mt-0.5 underline">نکالیں / شامل کریں</button>
            </div>
          </div>

          <!-- Weekly chart placeholder -->
          <div class="bg-white rounded-2xl border-2 border-sabzi-100 p-4">
            <p class="font-extrabold text-gray-700 mb-3 text-sm flex items-center gap-2"><span>📊</span> ہفتہ وار فروخت</p>
            <div id="weekly-chart" class="flex items-end gap-2 h-28">
              <!-- Bars injected by JS -->
            </div>
            <div id="weekly-labels" class="flex gap-2 mt-1">
              <!-- Labels injected by JS -->
            </div>
          </div>

          <!-- Top products -->
          <div class="bg-white rounded-2xl border-2 border-sabzi-100 p-4">
            <p class="font-extrabold text-gray-700 mb-3 text-sm flex items-center gap-2"><span>🏆</span> بہترین فروخت</p>
            <div id="top-products" class="space-y-2"></div>
          </div>

          <!-- Remaining stock -->
          <div class="bg-white rounded-2xl border-2 border-sabzi-100 p-4">
            <p class="font-extrabold text-gray-700 mb-3 text-sm flex items-center gap-2"><span>📦</span> بچا ہوا اسٹاک</p>
            <div id="remaining-stock" class="space-y-1.5"></div>
          </div>

          <!-- Cash transactions -->
          <div class="bg-white rounded-2xl border-2 border-sabzi-100 p-4 pb-20">
            <p class="font-extrabold text-gray-700 mb-3 text-sm flex items-center gap-2"><span>💰</span> کیش ریکارڈ</p>
            <div id="cash-log" class="space-y-1.5"></div>
          </div>
        </div>
      </div>

    </div>

    <!-- Bottom Nav -->
    <div class="flex-shrink-0 bg-white border-t border-sabzi-100 flex px-2 py-1 safe-bottom z-30">
      <button onclick="switchTab('sell')" id="nav-sell" class="nav-btn flex-1 flex flex-col items-center py-1.5 gap-0.5">
        <svg class="w-6 h-6" fill="none" stroke="#9ca3af" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-10H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
        <span class="text-xs font-bold text-gray-400" id="nav-sell-lbl">فروخت</span>
        <div class="nav-dot"></div>
      </button>
      <button onclick="switchTab('bill')" id="nav-bill" class="nav-btn flex-1 flex flex-col items-center py-1.5 gap-0.5 relative">
        <svg class="w-6 h-6" fill="none" stroke="#9ca3af" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
        <span class="text-xs font-bold text-gray-400" id="nav-bill-lbl">بل</span>
        <div class="nav-dot"></div>
        <div id="bill-badge" class="hidden absolute top-1.5 right-6 w-4 h-4 bg-red-500 rounded-full flex items-center justify-center text-white text-xs font-extrabold">0</div>
      </button>
      <button onclick="switchTab('stock')" id="nav-stock" class="nav-btn flex-1 flex flex-col items-center py-1.5 gap-0.5">
        <svg class="w-6 h-6" fill="none" stroke="#9ca3af" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
        <span class="text-xs font-bold text-gray-400" id="nav-stock-lbl">اسٹاک</span>
        <div class="nav-dot"></div>
      </button>
      <button onclick="switchTab('reports')" id="nav-reports" class="nav-btn flex-1 flex flex-col items-center py-1.5 gap-0.5">
        <svg class="w-6 h-6" fill="none" stroke="#9ca3af" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
        <span class="text-xs font-bold text-gray-400" id="nav-reports-lbl">رپورٹ</span>
        <div class="nav-dot"></div>
      </button>
    </div>

    <!-- AdSense bar -->
    <div id="adsense-bar">
      <span>AD • اشتہار</span>
      <!-- Replace below with actual AdSense code in production -->
      <!-- <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-XXXXXXXX" data-ad-slot="XXXXXXXX" data-ad-format="auto"></ins> -->
    </div>
  </div>

  <!-- ══════════════════════════════════════════════════════════
       SCREEN: SETTINGS
  ══════════════════════════════════════════════════════════ -->
  <div id="screen-settings" class="screen flex-col">
    <div class="hero-gradient px-4 pt-8 pb-5 flex items-center gap-3 flex-shrink-0">
      <button onclick="showScreen('screen-main')" class="w-9 h-9 bg-white bg-opacity-20 rounded-xl flex items-center justify-center">
        <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7"/></svg>
      </button>
      <div>
        <h2 class="font-display text-xl font-extrabold text-white">ترتیبات</h2>
        <p class="text-green-100 text-xs">Settings</p>
      </div>
    </div>
    <div class="scroll-area px-4 py-4 bg-sabzi-50 space-y-3">
      <div class="bg-white rounded-2xl p-4 border-2 border-sabzi-100 space-y-3">
        <h3 class="font-extrabold text-gray-700">دکان کی معلومات</h3>
        <div><label class="block text-xs font-bold text-gray-500 mb-1">نام</label><input id="s-shop-name" type="text" class="pos-input text-sm" /></div>
        <div><label class="block text-xs font-bold text-gray-500 mb-1">مالک</label><input id="s-owner-name" type="text" class="pos-input text-sm" /></div>
        <div><label class="block text-xs font-bold text-gray-500 mb-1">فون</label><input id="s-phone" type="tel" class="pos-input text-sm" /></div>
        <div><label class="block text-xs font-bold text-gray-500 mb-1">پتہ</label><textarea id="s-address" rows="2" class="pos-input text-sm resize-none"></textarea></div>
        <div><label class="block text-xs font-bold text-gray-500 mb-1">شہر</label><input id="s-city" type="text" class="pos-input text-sm" /></div>
        <button onclick="saveSettings()" class="w-full py-3 rounded-xl font-extrabold text-white text-sm active:scale-95" style="background:linear-gradient(135deg,#16a34a,#22c55e)">محفوظ کریں</button>
      </div>
      <div class="bg-white rounded-2xl p-4 border-2 border-sabzi-100">
        <h3 class="font-extrabold text-gray-700 mb-3">کاروبار کی قسم</h3>
        <div class="grid grid-cols-3 gap-2">
          <button onclick="changeBizType('vegetables')" id="biz-v" class="py-2 rounded-xl text-xs font-extrabold border-2 transition-all">🥦<br/>سبزیاں</button>
          <button onclick="changeBizType('fruits')"     id="biz-f" class="py-2 rounded-xl text-xs font-extrabold border-2 transition-all">🍎<br/>پھل</button>
          <button onclick="changeBizType('both')"       id="biz-b" class="py-2 rounded-xl text-xs font-extrabold border-2 transition-all">🛒<br/>دونوں</button>
        </div>
      </div>
      <div class="bg-white rounded-2xl p-4 border-2 border-red-100">
        <h3 class="font-extrabold text-red-600 mb-3">خطرناک زون</h3>
        <button onclick="confirmReset()" class="w-full py-2.5 rounded-xl border-2 border-red-300 text-red-500 font-extrabold text-sm active:bg-red-50">تمام ڈیٹا مٹائیں</button>
      </div>
      <div style="height:20px"></div>
    </div>
  </div>

</div>

<!-- ═══════════════════════ MODALS ═══════════════════════ -->

<!-- Stock edit modal -->
<div id="modal-stock" class="modal-overlay hidden" onclick="closeModalOnBackdrop(event,'modal-stock')">
  <div class="modal-sheet">
    <div class="modal-handle"></div>
    <div class="flex items-center gap-3 mb-4">
      <span id="ms-emoji" class="text-4xl">🥦</span>
      <div>
        <h3 id="ms-name" class="font-extrabold text-gray-800 text-lg"></h3>
        <p id="ms-type-badge" class="text-xs font-bold text-sabzi-600"></p>
      </div>
    </div>
    <div class="space-y-3">
      <div class="grid grid-cols-2 gap-3">
        <div>
          <label class="block text-xs font-bold text-gray-500 mb-1">خریداری ریٹ (فی کلو)</label>
          <input id="ms-buy-rate" type="number" class="pos-input text-sm" placeholder="₨" />
        </div>
        <div>
          <label class="block text-xs font-bold text-gray-500 mb-1">فروخت ریٹ (فی کلو)</label>
          <input id="ms-sell-rate" type="number" class="pos-input text-sm" placeholder="₨" />
        </div>
      </div>
      <div>
        <label class="block text-xs font-bold text-gray-500 mb-1">اسٹاک (گرام)</label>
        <div class="flex gap-2">
          <input id="ms-stock" type="number" class="pos-input text-sm flex-1" placeholder="مثال: 5000 = 5 کلو" />
          <span class="flex items-center text-xs text-gray-400 font-semibold whitespace-nowrap">گرام</span>
        </div>
        <p class="text-xs text-gray-400 mt-1" id="ms-stock-kg"></p>
      </div>
      <div class="flex items-center gap-3">
        <label class="flex-1 text-sm font-bold text-gray-600">اسٹاک میں فعال ہے؟</label>
        <label class="toggle"><input type="checkbox" id="ms-active" /><span class="toggle-slider"></span></label>
      </div>
    </div>
    <input type="hidden" id="ms-product-id" />
    <button onclick="saveStockEdit()" class="w-full mt-4 py-3.5 rounded-2xl font-display font-extrabold text-lg text-white shadow-btn active:scale-95"
      style="background:linear-gradient(135deg,#16a34a,#22c55e)">محفوظ کریں ✓</button>
  </div>
</div>

<!-- Cash modal -->
<div id="modal-cash" class="modal-overlay hidden" onclick="closeModalOnBackdrop(event,'modal-cash')">
  <div class="modal-sheet">
    <div class="modal-handle"></div>
    <h3 class="font-extrabold text-gray-800 text-lg mb-4 flex items-center gap-2"><span>💰</span> کیش مینجمنٹ</h3>
    <div class="bg-sabzi-50 rounded-xl p-3 mb-4 flex justify-between items-center border border-sabzi-200">
      <span class="font-semibold text-gray-600">موجودہ کیش</span>
      <span id="modal-cash-current" class="font-display font-extrabold text-2xl text-sabzi-700">₨0</span>
    </div>
    <div class="space-y-3">
      <div>
        <label class="block text-xs font-bold text-gray-500 mb-1">رقم</label>
        <input id="cash-amount-input" type="number" class="pos-input" placeholder="₨ رقم درج کریں" />
      </div>
      <div>
        <label class="block text-xs font-bold text-gray-500 mb-1">وضاحت</label>
        <input id="cash-note-input" type="text" class="pos-input" placeholder="مثال: صبح کی رقم، نکاسی" />
      </div>
      <div class="grid grid-cols-2 gap-2">
        <button onclick="cashTransaction('in')" class="py-3 rounded-2xl font-extrabold text-white text-sm active:scale-95" style="background:linear-gradient(135deg,#16a34a,#22c55e)">+ شامل کریں</button>
        <button onclick="cashTransaction('out')" class="py-3 rounded-2xl font-extrabold text-tomato-600 text-sm border-2 border-red-300 bg-red-50 active:bg-red-100">- نکالیں</button>
      </div>
    </div>
  </div>
</div>

<!-- Add product modal -->
<div id="modal-add-product" class="modal-overlay hidden" onclick="closeModalOnBackdrop(event,'modal-add-product')">
  <div class="modal-sheet">
    <div class="modal-handle"></div>
    <h3 class="font-extrabold text-gray-800 text-lg mb-4">نئی چیز شامل کریں</h3>
    <div class="space-y-3">
      <div class="grid grid-cols-2 gap-3">
        <div>
          <label class="block text-xs font-bold text-gray-500 mb-1">نام (اردو)</label>
          <input id="ap-name-ur" type="text" class="pos-input text-sm" placeholder="مثال: آلو" />
        </div>
        <div>
          <label class="block text-xs font-bold text-gray-500 mb-1">Name (English)</label>
          <input id="ap-name-en" type="text" class="pos-input text-sm" placeholder="e.g. Potato" />
        </div>
      </div>
      <div class="grid grid-cols-2 gap-3">
        <div>
          <label class="block text-xs font-bold text-gray-500 mb-1">ایموجی</label>
          <input id="ap-emoji" type="text" class="pos-input text-sm text-center" placeholder="🥦" maxlength="2" />
        </div>
        <div>
          <label class="block text-xs font-bold text-gray-500 mb-1">قسم</label>
          <select id="ap-type" class="pos-input text-sm">
            <option value="vegetable">سبزی</option>
            <option value="fruit">پھل</option>
          </select>
        </div>
      </div>
      <div class="grid grid-cols-2 gap-3">
        <div>
          <label class="block text-xs font-bold text-gray-500 mb-1">فروخت ریٹ (فی کلو)</label>
          <input id="ap-rate" type="number" class="pos-input text-sm" placeholder="₨" />
        </div>
        <div>
          <label class="block text-xs font-bold text-gray-500 mb-1">اسٹاک (گرام)</label>
          <input id="ap-stock" type="number" class="pos-input text-sm" placeholder="0" />
        </div>
      </div>
    </div>
    <button onclick="addNewProduct()" class="w-full mt-4 py-3.5 rounded-2xl font-display font-extrabold text-lg text-white shadow-btn active:scale-95"
      style="background:linear-gradient(135deg,#16a34a,#22c55e)">شامل کریں ✓</button>
  </div>
</div>

<!-- Bill Print Preview Modal -->
<div id="modal-bill-preview" class="modal-overlay hidden" onclick="closeModalOnBackdrop(event,'modal-bill-preview')">
  <div class="modal-sheet" style="max-height:95vh">
    <div class="modal-handle"></div>
    <div id="bill-preview-content" class="mb-4"></div>
    <div class="grid grid-cols-2 gap-2">
      <button onclick="document.getElementById('modal-bill-preview').classList.add('hidden')" class="py-3 rounded-2xl border-2 border-gray-200 font-extrabold text-gray-600 text-sm active:bg-gray-50">بند کریں</button>
      <button onclick="shareBill()" class="py-3 rounded-2xl font-extrabold text-white text-sm active:scale-95" style="background:linear-gradient(135deg,#0284c7,#0ea5e9)">
        📤 شیئر کریں
      </button>
    </div>
  </div>
</div>

<!-- Hidden print area -->
<div id="print-area" style="display:none"></div>

<script src="app.js"></script>
</body>
</html>