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

:root {
  --paper:#F2ECE1;
  --card:#FBF8F1;
  --ink:#17130F;
  --soft:#6E6459;
  --line:rgba(23,19,15,.55);
  --hair:rgba(23,19,15,.16);
  --carmine:#A8123E;
}

body {
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', 'Segoe UI', system-ui, sans-serif;
  min-height:100vh;
  background-image:
    radial-gradient(ellipse 900px 480px at 82% -6%, rgba(168,18,62,.09), transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='900' viewBox='0 0 1400 900'%3E%3Cg fill='none' stroke='%2317130F' stroke-opacity='.075' stroke-width='1.4'%3E%3Cpath d='M-40 660 C 260 480 320 220 560 260 S 940 620 1240 430 1460 120 1460 120'/%3E%3Cpath d='M-40 720 C 280 560 360 300 600 340 S 960 700 1260 510 1480 200 1480 200'/%3E%3Cpath d='M-40 780 C 300 640 400 380 640 420 S 980 780 1280 590 1500 280 1500 280'/%3E%3Cpath d='M180 -40 C 120 200 240 320 200 520 S 60 800 120 960'/%3E%3Cpath d='M240 -40 C 180 210 300 330 260 530 S 120 810 180 970'/%3E%3C/g%3E%3Cg fill='%23A8123E' fill-opacity='.06'%3E%3Cellipse cx='1130' cy='170' rx='170' ry='64' transform='rotate(-18 1130 170)'/%3E%3Cellipse cx='210' cy='740' rx='140' ry='52' transform='rotate(12 210 740)'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment:fixed;
  background-size:cover;
}

header {
  display:flex; align-items:baseline; justify-content:space-between;
  padding:26px 32px 18px;
  border-bottom:1px solid var(--line);
}
.mark {
  font-family:'Playfair Display', Georgia, serif;
  font-size:26px; font-weight:700; letter-spacing:.08em; color:var(--ink);
}
.mark em { font-style:italic; color:var(--carmine); }

.chip {
  font-family:'Space Mono', Consolas, monospace; font-size:12px; font-weight:700;
  letter-spacing:.14em; padding:6px 13px; border-radius:999px;
  border:1px solid var(--line); color:var(--soft); background:var(--card);
}
.chip.live { color:#1d6b3a; border-color:#1d6b3a; }
.chip.pending { color:var(--carmine); border-color:var(--carmine); }

.hero {
  max-width:820px; margin:0 auto; padding:52px 28px 10px;
}
.hero-line {
  font-family:'Playfair Display', Georgia, serif;
  font-style:italic; font-weight:500;
  font-size:clamp(30px, 4.6vw, 46px);
  line-height:1.12; margin-bottom:26px;
}
.hero-line b { font-style:italic; color:var(--carmine); }
#urlForm { display:flex; gap:0; border:1.5px solid var(--ink); background:var(--card); }
#urlForm input {
  flex:1; min-width:0; padding:19px 20px; font-size:16px; font-weight:500;
  background:transparent; border:none; color:var(--ink); outline:none;
}
#urlForm input::placeholder { color:var(--soft); }
#urlForm .primary { border-radius:0; }
.hero .status { margin-top:14px; }

main {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:22px;
  padding:34px 32px;
  max-width:1400px;
  margin:0 auto;
}

.panel {
  border:1px solid var(--line);
  background:var(--card);
  box-shadow:0 1px 0 var(--hair), 0 18px 40px -30px rgba(23,19,15,.35);
}

.panel-head {
  display:flex; align-items:baseline; gap:12px;
  padding:16px 20px;
  border-bottom:1px solid var(--line);
}
.step {
  font-family:'Space Mono', Consolas, monospace;
  font-size:12px; font-weight:700; color:var(--carmine); letter-spacing:.1em;
}
.panel-head h2 {
  font-family:'Playfair Display', Georgia, serif;
  font-size:21px; font-weight:700; font-style:italic; letter-spacing:.02em;
}
.hint {
  margin-left:auto; font-family:'Space Mono', Consolas, monospace;
  font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--soft);
}

.model-strip {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; padding:14px 20px 0;
}
.model-tile {
  aspect-ratio:3/4; overflow:hidden; padding:0;
  border:1.5px solid var(--hair); background:var(--paper); cursor:pointer;
  color:var(--soft); font-family:'Space Mono', Consolas, monospace;
  font-size:12px; font-weight:700; letter-spacing:.1em; line-height:1.5;
}
.model-tile img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.92); }
.model-tile.on { border-color:var(--carmine); box-shadow:0 0 0 1.5px var(--carmine); }
.model-tile.mine.on { color:var(--carmine); }
#panelBase .stage { margin-top:14px; }

.quiet { font-size:13px; font-weight:600; color:var(--soft); letter-spacing:.06em; text-align:center; }

.type-row { display:flex; gap:8px; padding:14px 20px 0; }
.type {
  flex:1; padding:10px 0; font-size:12px; font-weight:700; letter-spacing:.16em;
  background:transparent; color:var(--soft); border:1px solid var(--hair); cursor:pointer;
  font-family:'Inter', sans-serif;
}
.type.on { color:var(--card); background:var(--ink); border-color:var(--ink); }
#panelGarment .stage { margin-top:14px; }

.stage {
  position:relative;
  aspect-ratio:3/4;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper);
  border-top:1px solid var(--hair);
}
.stage video, .stage > img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:none;
}
.stage video.on, .stage > img.on { display:block; }

.stage-empty {
  display:flex; flex-direction:column; gap:14px; align-items:center;
  width:min(280px, 84%);
  z-index:2;
}
.stage-empty[hidden] { display:none; }

.stage-actions {
  position:absolute; bottom:14px; left:0; right:0;
  display:flex; gap:10px; justify-content:center; z-index:3;
}
.stage-actions[hidden] { display:none; }

button, .ghost, .primary {
  font-family:'Inter', sans-serif; font-size:13px; font-weight:700; letter-spacing:.2em;
  padding:14px 22px; cursor:pointer; border:none;
  text-decoration:none; text-align:center; display:inline-block;
}
.primary { background:var(--carmine); color:#FDF9F3; }
.primary:hover { background:#8c0f33; }
.primary:disabled { background:#B9AFA3; color:#F2ECE1; cursor:not-allowed; }
.primary.big { width:100%; padding:17px; font-size:14px; }
#urlForm .primary { padding:19px 30px; font-size:14px; }
.ghost {
  background:rgba(251,248,241,.92); color:var(--ink);
  border:1px solid var(--ink);
}
.ghost:hover { color:var(--carmine); border-color:var(--carmine); }

.stage-empty .primary, .stage-empty .ghost { width:100%; }

.status {
  font-family:'Space Mono', Consolas, monospace; font-size:13px; font-weight:700;
  letter-spacing:.1em; color:var(--carmine); min-height:18px;
}
.status.err { color:#8c1010; }

.closet { padding:8px 32px 46px; max-width:1400px; margin:0 auto; }
.closet .panel-head { border:none; padding-left:0; }
.closet-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:14px;
}
.closet-grid img {
  width:100%; aspect-ratio:3/4; object-fit:cover;
  border:1px solid var(--line); cursor:pointer; background:var(--card);
}
.closet-grid img:hover { border-color:var(--carmine); box-shadow:0 0 0 1px var(--carmine); }

@media (max-width:720px) {
  main { padding:18px; gap:16px; }
  header { padding:18px; }
  .hero { padding:34px 18px 6px; }
}