/* ── Reset & base ─────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
      background: #f5f5f7;
      color: #1d1d1f;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* ── Header ───────────────────────────────────── */
    header {
      width: 100%;
      padding: 2rem 0 1rem;
      text-align: center;
    }
    header h1 {
      font-size: 1.75rem;
      font-weight: 700;
      letter-spacing: -0.02em;
    }
    header h1 span { color: #6e6e73; font-weight: 400; }
    header p {
      margin-top: 0.35rem;
      color: #6e6e73;
      font-size: 0.95rem;
    }

    /* ── Card ─────────────────────────────────────── */
    .card {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.06);
      width: 100%;
      max-width: 560px;
      padding: 2rem;
      margin: 1rem 1rem 2rem;
    }

    /* ── Drop zone ────────────────────────────────── */
    .dropzone {
      border: 2px dashed #d2d2d7;
      border-radius: 12px;
      padding: 2rem 1.5rem;
      text-align: center;
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s;
      position: relative;
    }
    .dropzone:hover,
    .dropzone.drag-over {
      border-color: #0071e3;
      background: #f0f5ff;
    }
    .dropzone input[type="file"] {
      position: absolute;
      inset: 0;
      opacity: 0;
      cursor: pointer;
    }
    .dropzone-icon {
      font-size: 2rem;
      margin-bottom: 0.5rem;
      color: #86868b;
    }
    .dropzone-label {
      font-size: 0.95rem;
      color: #1d1d1f;
    }
    .dropzone-hint {
      font-size: 0.8rem;
      color: #86868b;
      margin-top: 0.25rem;
    }

    /* ── File list ────────────────────────────────── */
    .file-list {
      margin-top: 0.75rem;
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
    }
    .file-tag {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      background: #f5f5f7;
      border: 1px solid #e5e5ea;
      border-radius: 6px;
      padding: 0.25rem 0.6rem;
      font-size: 0.78rem;
      color: #1d1d1f;
    }
    .file-tag button {
      background: none;
      border: none;
      cursor: pointer;
      color: #86868b;
      font-size: 0.9rem;
      line-height: 1;
      padding: 0;
    }
    .file-tag button:hover { color: #ff3b30; }

    /* ── Divider ──────────────────────────────────── */
    .divider {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin: 1.5rem 0;
      color: #86868b;
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .divider::before,
    .divider::after {
      content: "";
      flex: 1;
      height: 1px;
      background: #e5e5ea;
    }

    /* ── Textarea ─────────────────────────────────── */
    label.field-label {
      display: block;
      font-size: 0.85rem;
      font-weight: 600;
      margin-bottom: 0.4rem;
    }
    textarea {
      width: 100%;
      min-height: 90px;
      border: 1px solid #d2d2d7;
      border-radius: 10px;
      padding: 0.75rem;
      font-family: inherit;
      font-size: 0.88rem;
      resize: vertical;
      transition: border-color 0.2s;
    }
    textarea:focus {
      outline: none;
      border-color: #0071e3;
      box-shadow: 0 0 0 3px rgba(0,113,227,0.15);
    }
    textarea::placeholder { color: #aeaeb2; }

    .csv-meta {
      margin-top: 0.35rem;
      font-size: 0.72rem;
      color: #6e6e73;
      line-height: 1.35;
    }

    /* ── Form sections ────────────────────────────── */
    .quality-section {
      margin-top: 1.25rem;
    }
    .checkbox-row {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      font-size: 0.9rem;
      color: #1d1d1f;
      user-select: none;
    }
    .checkbox-row input[type="checkbox"] {
      width: 16px;
      height: 16px;
      accent-color: #0071e3;
      cursor: pointer;
    }
    .quality-section .section-label,
    .mode-section .section-label {
      font-size: 0.85rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
    }
    .mode-section {
      margin-top: 1.25rem;
    }
    .advanced-section {
      margin-top: 1.25rem;
    }
    .advanced-panel {
      margin-top: 0.7rem;
      padding: 0.8rem;
      border: 1px solid #e5e5ea;
      border-radius: 10px;
      background: #fafafc;
    }
    .advanced-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.65rem;
    }
    .bulk-rename-section {
      margin-top: 0.8rem;
      padding-top: 0.75rem;
      border-top: 1px solid #e5e5ea;
    }
    .bulk-rename-title {
      font-size: 0.8rem;
      font-weight: 600;
      color: #3a3a3c;
      margin-bottom: 0.35rem;
    }
    .bulk-rename-list {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.5rem;
      max-height: 240px;
      overflow: auto;
      padding-right: 0.2rem;
      margin-top: 0.45rem;
    }
    .bulk-rename-row {
      display: grid;
      grid-template-columns: 88px 1fr;
      gap: 0.5rem;
      align-items: center;
    }
    .bulk-rename-row .bulk-label {
      font-size: 0.76rem;
      color: #6e6e73;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .bulk-rename-row input[type="text"] {
      width: 100%;
      border: 1px solid #d2d2d7;
      border-radius: 7px;
      padding: 0.45rem 0.55rem;
      font-size: 0.8rem;
      font-family: inherit;
      background: #fff;
    }
    .bulk-rename-row input[type="text"]:focus {
      outline: none;
      border-color: #0071e3;
      box-shadow: 0 0 0 3px rgba(0,113,227,0.12);
    }
    .advanced-field label {
      display: block;
      font-size: 0.8rem;
      font-weight: 600;
      margin-bottom: 0.35rem;
      color: #3a3a3c;
    }
    .advanced-field input[type="text"] {
      width: 100%;
      border: 1px solid #d2d2d7;
      border-radius: 8px;
      padding: 0.55rem 0.65rem;
      font-size: 0.84rem;
      font-family: inherit;
      background: #fff;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .advanced-field input[type="text"]:focus {
      outline: none;
      border-color: #0071e3;
      box-shadow: 0 0 0 3px rgba(0,113,227,0.15);
    }
    .field-note {
      font-size: 0.72rem;
      color: #6e6e73;
      margin-top: 0.2rem;
    }
    .seg-control {
      display: flex;
      background: #e5e5ea;
      border-radius: 10px;
      padding: 3px;
      gap: 2px;
    }
    .seg-control input[type="radio"] {
      display: none;
    }
    .seg-control label {
      flex: 1;
      text-align: center;
      padding: 0.5rem 0.25rem;
      border-radius: 8px;
      cursor: pointer;
      font-size: 0.82rem;
      font-weight: 500;
      color: #6e6e73;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
      line-height: 1.3;
    }
    .seg-control label .seg-title {
      display: block;
      font-weight: 600;
      color: inherit;
    }
    .seg-control label .seg-hint {
      display: block;
      font-size: 0.7rem;
      font-weight: 400;
      opacity: 0.7;
      margin-top: 0.1rem;
    }
    .seg-control input[type="radio"]:checked + label {
      background: #fff;
      color: #1d1d1f;
      box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    }

    /* ── Button ───────────────────────────────────── */
    .submit-btn {
      margin-top: 1.5rem;
      width: 100%;
      padding: 0.85rem;
      font-size: 1rem;
      font-weight: 600;
      color: #fff;
      background: #0071e3;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      transition: background 0.2s, transform 0.1s;
    }
    .submit-btn:hover { background: #0077ed; }
    .submit-btn:active { transform: scale(0.98); }
    .submit-btn:disabled {
      background: #a1c4f1;
      cursor: not-allowed;
      transform: none;
    }

    /* ── Status bar ───────────────────────────────── */
    .status {
      margin-top: 1rem;
      text-align: center;
      font-size: 0.88rem;
      min-height: 1.4em;
    }
    .status.info  { color: #0071e3; }
    .status.ok    { color: #34c759; }
    .status.error { color: #ff3b30; }

    /* ── Spinner ──────────────────────────────────── */
    .spinner {
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid #0071e3;
      border-top-color: transparent;
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
      vertical-align: middle;
      margin-right: 0.35rem;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── Footer ───────────────────────────────────── */
    footer {
      padding: 1rem;
      color: #86868b;
      font-size: 0.78rem;
    }