/* === 1. Theme Variables === */
    :root {
        --clr-bg: #f4f7fc;
        --clr-card: #ffffff;
        --clr-accent: #5568fe;
        --clr-success: #00c853;
        --clr-danger: #ff6b6b;
        --clr-warning: #ff9800;
        --clr-text: #333333;
        --clr-light: #666666;
        --radius: 8px;
        --shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        --font: 'Inter', sans-serif;
        --transition: 0.3s ease;
      }
  
      /* === 2. Global Reset & Typography === */
      *, *::before, *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      body {
        font-family: var(--font);
        background: var(--clr-bg);
        color: var(--clr-text);
        line-height: 1.5;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
      }
  
      /* === 3. Header === */
      .site-header {
        background: var(--clr-card);
        padding: 1rem 2rem;
        box-shadow: var(--shadow);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .site-header .logo {
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--clr-accent);
      }
  
      /* === 4. Main Container === */
      .container {
        flex: 1;
        max-width: 800px;
        width: 90%;
        margin: 2rem auto;
        background: var(--clr-card);
        padding: 2rem;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        text-align: center;
      }
      h1 {
        font-size: 2rem;
        margin-bottom: 1.5rem;
      }
  
      /* === 5. Drop Zone === */
      .drop-zone {
        position: relative;
        border: 2px dashed var(--clr-accent);
        border-radius: var(--radius);
        padding: 2rem;
        margin-bottom: 1.5rem;
        cursor: pointer;
        transition: var(--transition);
      }
      .drop-zone.dragover {
        background: rgba(85, 104, 254, 0.1);
      }
      .upload-label {
        display: block;
        color: var(--clr-light);
        font-weight: 600;
      }
      input[type="file"] { display: none; }
  
      /* === 6. Dropdown === */
      .dropdown {
        position: relative;
        margin-bottom: 1.5rem;
      }
      .dropdown-btn {
        width: 100%;
        padding: 0.75rem;
        background: var(--clr-accent);
        color: #fff;
        border: none;
        border-radius: var(--radius);
        font-weight: 700;
        cursor: pointer;
        transition: var(--transition);
      }
      .dropdown-btn:after {
        content: '▾';
        float: right;
        transition: transform var(--transition);
      }
      .dropdown-btn.open:after {
        transform: rotate(180deg);
      }
      .dropdown-content {
        position: absolute;
        top: 110%;
        width: 100%;
        background: var(--clr-card);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        overflow: hidden;
        max-height: 0;
        transition: max-height var(--transition);
      }
      .dropdown-content.show {
        max-height: 240px;
        overflow-y: scroll;
      }
      .dropdown-content li {
        list-style: none;
        padding: 0.75rem 1rem;
        cursor: pointer;
        transition: background var(--transition);
      }
      .dropdown-content li:hover {
        background: var(--clr-bg);
      }
  
      /* === 7. Buttons === */
      button,
      .download-all-btn {
        width: 100%;
        padding: 0.9rem;
        border: none;
        border-radius: var(--radius);
        font-size: 1rem;
        font-weight: 700;
        cursor: pointer;
        transition: var(--transition);
      }
      #convertBtn {
        background: var(--clr-success);
        color: #fff;
        margin-top: 1rem;
      }
      #convertBtn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }
      .download-all-btn {
        background: var(--clr-warning);
        color: #fff;
        display: none;
        margin-top: 1.5rem;
        text-decoration: none;
        line-height: 1.2;
      }
  
      /* === 8. Loading & Messages === */
      .loading {
        margin: 1rem 0;
        font-weight: 600;
        display: none;
      }
      .loading::after {
        content: '';
        display: inline-block;
        width: 1.2rem;
        height: 1.2rem;
        margin-left: 0.5rem;
        border: 3px solid var(--clr-success);
        border-top-color: transparent;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
      }
      .success-message {
        background: var(--clr-success);
        color: #fff;
        padding: 0.75rem;
        border-radius: var(--radius);
        margin-top: 1rem;
        display: none;
      }
  
      /* === 9. Image Cards === */
      #imageCards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 1rem;
        margin: 1.5rem 0;
      }
      .card {
        background: var(--clr-card);
        border-radius: var(--radius);
        padding: 0.75rem;
        box-shadow: var(--shadow);
        text-align: center;
        transition: transform var(--transition);
      }
      .card:hover {
        transform: translateY(-5px);
      }
      .card img {
        width: 100%;
        height: 100px;
        border-radius: var(--radius);
        margin-bottom: 0.5rem;
      }
      .download-btn {
        display: block;
        background: var(--clr-danger);
        color: #fff;
        padding: 0.5rem;
        border-radius: var(--radius);
        text-decoration: none;
        font-weight: 600;
        transition: background var(--transition);
      }
      .download-btn:hover {
        background: #d44949;
      }
  
      /* === 10. Footer === */
      .site-footer {
        background: var(--clr-card);
        padding: 1rem 2rem;
        text-align: center;
        box-shadow: var(--shadow);
        margin-top: auto;
      }
      .site-footer p {
        color: var(--clr-light);
        margin-bottom: 0.5rem;
      }
  
      /* === 11. Mobile Responsive === */
      @media (max-width: 600px) {
        .container { padding: 1rem; }
      }
  
      /* === 12. Animations === */
      @keyframes spin {
        from { transform: rotate(0deg); }
        to   { transform: rotate(360deg); }
      }