*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Syne', sans-serif;
      background: #f5f5f3;
      color: #1a1a1a;
      min-height: 100vh;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 3rem 1rem;
    }

    .container {
      width: 100%;
      max-width: 800px;
    }

    h1 {
      font-size: 22px;
      font-weight: 500;
      margin-bottom: 2rem;
      color: #1a1a1a;
    }

    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      align-items: start;
    }

    .col { display: flex; flex-direction: column; gap: 20px; }

    .form-block { display: flex; flex-direction: column; gap: 6px; }

    .field-label {
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.06em;
      color: #666;
      text-transform: uppercase;
    }

    input[type="text"],
    input[type="number"],
    select,
    textarea {
      width: 100%;
      padding: 9px 12px;
      font-family: 'Syne', sans-serif;
      font-size: 14px;
      color: #1a1a1a;
      background: #fff;
      border: 0.5px solid rgba(0,0,0,0.18);
      border-radius: 8px;
      outline: none;
      transition: border-color 0.15s;
      appearance: none;
    }
    input[type="text"]:focus,
    input[type="number"]:focus,
    select:focus,
    textarea:focus {
      border-color: rgba(0,0,0,0.4);
      box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
    }
    textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
    select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }

    .price-wrap { position: relative; }
    .price-suffix {
      position: absolute;
      right: 12px; top: 50%; transform: translateY(-50%);
      font-family: 'DM Mono', monospace;
      font-size: 12px;
      color: #999;
      pointer-events: none;
    }
    .price-input { padding-right: 52px !important; font-family: 'DM Mono', monospace !important; }

    .drop-zone {
      border: 1.5px dashed rgba(0,0,0,0.2);
      border-radius: 12px;
      background: #efefed;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 210px;
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s;
      position: relative;
      overflow: hidden;
    }
    .drop-zone:hover, .drop-zone.drag-over {
      border-color: rgba(0,0,0,0.4);
      background: #e8e8e6;
    }
    .drop-zone img {
      width: 100%; height: 210px; object-fit: cover;
      border-radius: 10px;
    }
    .drop-zone-label {
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      color: #888; pointer-events: none;
    }
    .drop-icon {
      width: 40px; height: 40px;
      border: 1.5px solid rgba(0,0,0,0.2);
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
    }
    .drop-icon svg { width: 20px; height: 20px; stroke: #888; fill: none; stroke-width: 1.5; }
    .drop-label-main { font-size: 13px; }
    .drop-label-sub { font-size: 11px; color: #aaa; }

    .preview-badge {
      position: absolute; top: 10px; right: 10px;
      background: #fff; border: 0.5px solid rgba(0,0,0,0.15);
      border-radius: 8px; padding: 4px 10px;
      font-size: 11px; color: #888;
    }
    .change-btn {
      position: absolute; bottom: 10px; right: 10px;
      background: #fff; border: 0.5px solid rgba(0,0,0,0.15);
      border-radius: 8px; padding: 5px 12px;
      font-size: 12px; cursor: pointer; color: #1a1a1a;
      font-family: 'Syne', sans-serif;
    }
    .change-btn:hover { background: #f5f5f3; }

    .tag-wrap { display: flex; gap: 8px; }
    .tag {
      font-size: 13px; padding: 7px 0;
      background: #efefed;
      border: 0.5px solid rgba(0,0,0,0.12);
      border-radius: 999px; cursor: pointer; color: #888;
      transition: all 0.15s; flex: 1; text-align: center;
      font-family: 'Syne', sans-serif;
    }
    .tag.active {
      background: #fff;
      border-color: rgba(0,0,0,0.35);
      color: #1a1a1a;
      font-weight: 500;
    }

    .list-btn {
      width: 100%; padding: 12px;
      border-radius: 8px;
      background: #1a1a1a; color: #fff;
      border: none;
      font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 500;
      cursor: pointer; transition: opacity 0.2s;
      letter-spacing: 0.04em;
    }
    .list-btn:hover { opacity: 0.85; }
    .list-btn:disabled { opacity: 0.35; cursor: not-allowed; }

    .success-banner {
      background: #eaf3de;
      border: 0.5px solid #639922;
      border-radius: 8px;
      padding: 12px 16px; font-size: 13px; color: #3b6d11;
      display: none; align-items: center; gap: 10px;
    }
    .success-banner.show { display: flex; }

    @media (max-width: 600px) {
      .grid { grid-template-columns: 1fr; }
    }