*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #ffffff;
  --surface2: #f5f5f5;
  --border: #e0e0e0;
  --text: #1a1a1a;
  --text2: #888;
  --text3: #aaa;
  --accent: #1a1a1a;
  --accent-hover: #333;
  --error: #c0392b;
  --font: 'Inter', -apple-system, system-ui, sans-serif;
}
html { font-size: 16px; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
.app { max-width: 720px; margin: 0 auto; padding: 0 20px 100px; }

/* Header */
header {
  text-align: center;
  padding: 48px 0 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 40px;
}
.brand {
  font-size: 1.7rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text);
}
.brand-sub {
  display: block; font-size: .7rem; font-weight: 400;
  letter-spacing: .25em; text-transform: uppercase;
  color: var(--text2); margin-top: 6px;
}

/* Steps */
.steps { display: flex; flex-direction: column; gap: 36px; }
.step-label {
  font-size: .65rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text3); margin-bottom: 12px;
}

/* Upload zone (shared by step 1 and step 2 photo tab) */
.upload-zone {
  border: 1px solid var(--border); padding: 40px 20px;
  text-align: center; cursor: pointer; transition: all .2s;
  position: relative; overflow: hidden;
}
.upload-zone:hover, .upload-zone.drag-over { border-color: var(--accent); }
.upload-zone.has-image { padding: 16px; border-color: var(--accent); }
.upload-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-icon {
  font-size: .75rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text3); margin-bottom: 6px;
}
.upload-text { color: var(--text2); font-size: .8rem; font-weight: 300; }
.upload-text span {
  color: var(--text); text-decoration: underline;
  text-underline-offset: 3px; font-weight: 400;
}
#model-preview, #garment-preview {
  max-width: 280px; max-height: 400px; object-fit: contain; display: none;
}
.remove-btn {
  position: absolute; top: 10px; right: 10px; width: 28px; height: 28px;
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  font-size: 1rem; display: none; align-items: center; justify-content: center; z-index: 5;
}

/* Inputs */
.input-group { display: flex; flex-direction: column; gap: 8px; }
.input-group label { font-size: .75rem; color: var(--text2); font-weight: 400; }
.input-row { display: flex; gap: 0; position: relative; }
.url-wrapper { flex: 1; position: relative; display: flex; }
.url-wrapper input { flex: 1; padding-right: 36px; }
.url-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border: none; background: var(--border);
  color: #fff; font-size: .75rem; cursor: pointer; display: none;
  align-items: center; justify-content: center; border-radius: 50%;
  line-height: 1;
}
.url-clear.visible { display: flex; }

input[type="text"], input[type="url"] {
  flex: 1; background: var(--bg); border: 1px solid var(--border);
  padding: 13px 14px; color: var(--text); font-family: var(--font);
  font-size: .85rem; outline: none; transition: border-color .2s;
}
input:focus { border-color: var(--accent); }
input::placeholder { color: #ccc; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 13px 24px; border: none; cursor: pointer;
  font-family: var(--font); font-weight: 500; font-size: .8rem;
  letter-spacing: .06em; text-transform: uppercase; transition: all .2s;
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:disabled { opacity: .3; cursor: not-allowed; }
.btn-secondary { background: var(--bg); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--accent); }

/* Tabs */
.tabs {
  display: flex; gap: 0; margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.tab {
  padding: 10px 20px; border: none; background: none;
  font-family: var(--font); font-size: .75rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text3); cursor: pointer; transition: all .2s;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Gallery */
.garment-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px; margin-top: 14px;
}
.garment-card {
  position: relative; aspect-ratio: 3/4; overflow: hidden;
  border: 1px solid var(--border); cursor: pointer;
  transition: all .2s; background: var(--surface2);
}
.garment-card:hover { border-color: var(--accent); }
.garment-card.selected { border-color: var(--accent); border-width: 2px; }
.garment-card img { width: 100%; height: 100%; object-fit: cover; }
.garment-card .check {
  position: absolute; top: 0; right: 0; width: 22px; height: 22px;
  background: var(--accent); display: none; align-items: center;
  justify-content: center; font-size: .7rem; color: #fff;
}
.garment-card.selected .check { display: flex; }
.gallery-empty { text-align: center; padding: 20px; color: var(--text3); font-size: .8rem; }

.comment-hint { font-size: .7rem; color: var(--text3); margin-top: 2px; font-weight: 300; }

/* Try-On action + status */
.tryon-action { text-align: center; padding-top: 8px; }
.btn-tryon {
  padding: 15px 56px; font-size: .8rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  background: var(--accent); color: #fff; border: none;
  cursor: pointer; transition: all .2s; font-family: var(--font);
}
.btn-tryon:hover { background: var(--accent-hover); }
.btn-tryon:disabled { opacity: .25; cursor: not-allowed; }

.tryon-status-wrap {
  display: none; flex-direction: column; align-items: center;
  gap: 14px; padding: 24px 20px 8px; text-align: center;
}
.tryon-status-wrap.visible { display: flex; }
.loader-dots { display: flex; gap: 6px; }
.loader-dots span {
  width: 6px; height: 6px; background: var(--text);
  border-radius: 50%; animation: dotPulse 1.2s ease-in-out infinite;
}
.loader-dots span:nth-child(2) { animation-delay: .15s; }
.loader-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes dotPulse {
  0%, 80%, 100% { opacity: .15; transform: scale(.8); }
  40% { opacity: 1; transform: scale(1); }
}
.status-text {
  font-size: .85rem; color: var(--text2); font-weight: 300;
  font-style: italic; min-height: 1.4em; transition: opacity .3s;
}

/* Scrape loader */
.scrape-status-bar {
  display: none; flex-direction: column; align-items: center;
  gap: 12px; padding: 24px 20px; text-align: center; margin-top: 12px;
}
.scrape-status-bar.visible { display: flex; }

/* Result */
.result-area { display: none; }
.result-area.visible { display: block; }
.result-image-single { text-align: center; margin-top: 16px; }
.result-image-single img {
  max-width: 100%; max-height: 600px; object-fit: contain; border: 1px solid var(--border);
}
.result-actions { display: flex; gap: 8px; justify-content: center; margin-top: 20px; }

/* Toast */
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--accent); color: #fff; padding: 12px 28px;
  font-size: .8rem; font-weight: 400; z-index: 100;
  transition: transform .3s ease; max-width: 90vw; text-align: center;
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.error { background: var(--error); }

.divider { width: 40px; height: 1px; background: var(--border); margin: 0 auto; }

/* Mobile */
@media (max-width: 600px) {
  .app { padding: 0 16px 80px; }
  header { padding: 32px 0 16px; margin-bottom: 28px; }
  .brand { font-size: 1.4rem; }
  .steps { gap: 28px; }
  .garment-gallery { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
  .input-row { flex-direction: column; }
  .input-row .btn { width: 100%; }
  .btn-tryon { width: 100%; }
}