* { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
      color: #333;
      background: #f9f9f9;
    }
    .page-wrapper { width:100%;}
    .main-container { max-width:700px; margin:0 auto; text-align:left; }
    .tool-card {
      background:#fff; padding:40px; border-radius:16px;
      box-shadow:0 5px 25px rgba(0,0,0,0.07);
    }
    .title-container { display:flex; align-items:center; gap:15px; margin-bottom:15px; }
    .meesho-logo { width:50px; height:50px; object-fit:contain; }
    h1 { margin:0; }
    .subtitle { color:#666; margin-bottom:15px; line-height:1.6; text-align: justify;}
    .upload-container { 
      margin-top: 20px;
      position: relative;
    }
    
    .upload-wrapper {
      position: relative;
      display: inline-block;
      width: 100%;
    }
    
    #pdfUpload {
      width: 100%;
      padding: 16px 20px;
      border: 2px dashed #d1d5db;
      border-radius: 8px;
      background: #f8f9fa;
      cursor: pointer;
      font-size: 16px;
      color: #6b7280;
      text-align: center;
    }
    
    #pdfUpload::before {
      content: '';
      display: none;
    }
    
    #pdfUpload.drag-over {
      border-color: #6b7280;
      background: #e5e7eb;
    }
    
    #pdfUpload.drag-over::before {
      content: '🎯 Drop your PDF files here';
      color: #374151;
      font-weight: 600;
    }
    #process-btn {
      background:#9f2089; color:#fff; width:100%; padding:16px;
      border:none; border-radius:8px; font-weight:bold;
      cursor:pointer; margin-top:25px; white-space:nowrap;
      transition:filter .2s;
    }
    #process-btn:disabled { background:#c579b8; cursor:not-allowed; }

    .sorting-buttons {
      display: flex;
      gap: 12px;
      margin-top: 15px;
    }

    .sort-btn {
      display: flex;
      align-items: center;
      cursor: pointer;
      padding: 8px 16px;
      background: #f8f9fa;
      border: 1px solid #e1e5e9;
      border-radius: 6px;
      transition: all 0.2s ease;
      font-size: 14px;
    }

    .sort-btn:hover {
      background: #fcf5fa;
      border-color: #9f2089;
    }

    .sort-btn input[type="radio"] {
      margin: 0 6px 0 0;
      transform: scale(1.1);
    }

    .sort-btn input[type="radio"]:checked + span {
      color: #9f2089;
      font-weight: 600;
    }

    .sort-btn:has(input[type="radio"]:checked) {
      background: #fcf5fa;
      border-color: #9f2089;
    }

    .radio-label {
      font-size: 0.95rem;
      color: #555;
      user-select: none;
    }

    .radio-option:hover .radio-label {
      color: #9f2089;
    }

    .status-area { margin-top:20px; font-size:16px; min-height:55px; }

    #sku-summary { margin-top:20px; }
    .sku-card {
      background:#fff; border-radius:14px; box-shadow:0 16px 40px rgba(0,0,0,0.06);
      padding:18px 22px; overflow-x:auto; margin-top:10px;
    }
    .sku-title {
      display:flex; justify-content:space-between; align-items:center;
      flex-wrap:wrap; gap:8px; margin-bottom:10px;
    }
    .sku-title h3 {
      margin:0; font-size:1rem; letter-spacing:0.5px;
    }
    .sku-badge {
      background:#f3e8ff; color:#6a2fa0; padding:6px 12px;
      border-radius:999px; font-weight:600; font-size:0.75rem;
    }
    .sku-table {
      width:100%; border-collapse:collapse; font-size:0.9rem;
      min-width:240px;
    }
    .sku-table thead {
      background:linear-gradient(90deg,#9f2089,#d37fcf); color:#fff;
    }
    .sku-table th, .sku-table td {
      padding:10px 14px; text-align:left; border-bottom:1px solid #f0edf5;
    }
    .sku-table tbody tr:nth-child(odd) { background:#f9f7fc; }
    .sku-table tbody tr.total-row {
      background:#efe8fb; font-weight:600;
    }

    .faq-section { 
      margin-top: 40px; 
    }
    
    .faq-section h2 { 
      font-weight: 700; 
      margin-bottom: 20px;
    }
    
    .faq-section details {
      background: #fff; 
      border: 1px solid #eee; 
      border-radius: 8px;
      margin-bottom: 10px; 
      padding: 15px 20px;
    }
    
    .faq-section details[open] {
      margin-top: 15px;
    }
    
    .faq-section details summary { 
      font-weight: 700; 
      cursor: pointer;
    }
    
    .faq-section details p {
      margin-top: 10px;
      margin-bottom: 0px;
    }

    @media (max-width:767px) {
      .page-wrapper { 
        padding: 20px 0px; 
      }
      
      .main-container { 
        max-width: 100%; 
        padding: 0 5px;
      }
      
      .tool-card { 
        padding: 30px 20px; 
        border-radius: 12px;
      }
      
      .title-container { 
        display: flex;
        text-align: left;
        gap: 10px;
        margin-bottom: 20px;
      }
      
      .meesho-logo { 
        width: 40px; 
        height: 40px; 
      }
      
      h1 { 
        font-size: 1.4rem;
        line-height: 1.3;
      }
      
      .subtitle { 
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 12px;
        text-align: left;
      }
      
      .upload-container { 
        margin-top: 15px; 
      }
      
      #pdfUpload {
        padding: 12px 14px;
        font-size: 14px;
        border-radius: 6px;
      }
      
      #pdfUpload::before {
        font-size: 12px;
        margin-bottom: 6px;
      }
      
      .sorting-buttons {
        flex-direction: column;
        gap: 8px;
        align-items: center;
        margin-top: 12px;
      }
      
      .sort-btn {
        width: 100%;
        justify-content: left;
        padding: 10px 16px;
        font-size: 12px;
      }
      
      #process-btn {
        padding: 14px;
        font-size: 15px;
        margin-top: 20px;
      }
      
      .status-area { 
        font-size: 12px; 
        min-height: 45px;
        margin-top: 15px;
      }
      
      .sku-card {
        padding: 15px 18px;
        margin-top: 8px;
      }
      
      .sku-title h3 {
        font-size: 0.9rem;
      }
      
      .sku-badge {
        font-size: 0.7rem;
        padding: 4px 8px;
      }
      
      .sku-table {
        font-size: 0.8rem;
      }
      
      .sku-table th, .sku-table td {
        padding: 8px 10px;
      }
      
      .faq-section {
        margin-top: 30px;
      }
      
      .faq-section h2 {
        font-size: 1.2rem;
        margin-bottom: 15px;
      }
      
      .faq-section details {
        padding: 12px 15px;
        margin-bottom: 8px;
      }
      
      .faq-section details summary {
        font-size: 0.9rem;
      }
      
      .faq-section details p {
        font-size: 0.85rem;
        line-height: 1.4;
      }
    }