:root {
  --accent: #7c5cff;
  --accent-dark: #6444e0;
  --bg: #f6f5fb;
  --card-bg: #ffffff;
  --text: #201f2b;
  --text-dim: #75718c;
  --danger: #e5484d;
  --danger-bg: #fdeceb;
  --danger-border: #f6c9c8;
  --border: #e7e5f2;
  --input-bg: #ffffff;
  --empty-slot-border: #d8d4ee;
  --photo-surface: #ffffff;
  --radius: 14px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #9179ff;
    --accent-dark: #7c5cff;
    --bg: #131220;
    --card-bg: #1e1c2c;
    --text: #f1eefa;
    --text-dim: #a49dc7;
    --danger: #ff7a7e;
    --danger-bg: #3a2226;
    --danger-border: #5c2f34;
    --border: #34314a;
    --input-bg: #26243a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --accent: #9179ff;
  --accent-dark: #7c5cff;
  --bg: #131220;
  --card-bg: #1e1c2c;
  --text: #f1eefa;
  --text-dim: #a49dc7;
  --danger: #ff7a7e;
  --danger-bg: #3a2226;
  --danger-border: #5c2f34;
  --border: #34314a;
  --input-bg: #26243a;
  --empty-slot-border: #423e5e;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overscroll-behavior: none;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  background: var(--bg);
}

/* Closet-door open animation played once per session on launch. */
.closet-intro {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: 100dvh;
  display: flex;
  z-index: 999;
  pointer-events: none;
  overflow: hidden;
}
.closet-door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: linear-gradient(135deg, #8a5a3b, #5c3a22);
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.35);
  transition: transform 0.85s cubic-bezier(0.65, 0, 0.35, 1);
}
.closet-door::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e9d8ae;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}
.closet-door-left { left: 0; }
.closet-door-left::after { right: 16px; }
.closet-door-right { right: 0; }
.closet-door-right::after { left: 16px; }
.closet-intro.opening .closet-door-left {
  transform: translateX(-100%) rotate(-6deg);
}
.closet-intro.opening .closet-door-right {
  transform: translateX(100%) rotate(6deg);
}

.update-banner[hidden] {
  display: none;
}
.update-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
}
.update-banner button {
  background: #fff;
  color: var(--accent);
  border: none;
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: env(safe-area-inset-top, 16px) 20px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--card-bg);
}
.topbar h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 16px;
  line-height: 1;
  padding: 0;
}
.profile-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  max-width: 110px;
  padding: 0 12px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
.profile-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#views {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  min-height: 0;
}

.view { display: none; }
.view.active { display: block; }
#view-closet.active { padding-bottom: 74px; }
#view-builder.active,
#view-outfits.active {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 10px;
}

.filter-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.filter-chip {
  flex: 0 0 auto;
  border-radius: 16px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-dim);
}
.filter-chip.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.section-block { margin-bottom: 22px; }
.section-block h2 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin: 0;
}
.section-toggle-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 8px 2px;
  cursor: pointer;
}
.section-chevron {
  color: var(--text-dim);
  font-size: 13px;
  padding-right: 4px;
  transition: transform 0.15s;
}
.section-block.collapsed .section-chevron { transform: rotate(-90deg); }

.item-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
/* Collapsed sections drop to a single horizontally-swipeable row instead of
   the full grid, so a big closet doesn't push everything else off screen. */
.section-block.collapsed .item-grid {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  padding-bottom: 2px;
  scroll-snap-type: x proximity;
}
.section-block.collapsed .item-grid .item-card {
  flex: 0 0 84px;
  width: 84px;
  scroll-snap-align: start;
}
.section-block.collapsed .item-grid .empty-grid-hint {
  flex: 1;
  white-space: nowrap;
}

.item-card {
  position: relative;
  background: var(--photo-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.item-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}
.item-card .item-name {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  font-size: 10px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  padding: 3px 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-card .item-delete {
  position: absolute;
  top: 4px; right: 4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(20,20,30,0.55);
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  padding: 0;
}

.empty-grid-hint {
  grid-column: 1 / -1;
  color: var(--text-dim);
  font-size: 13px;
  padding: 10px 2px;
}

/* Tab bar */
.tabbar {
  display: flex;
  border-top: 1px solid var(--border);
  background: var(--card-bg);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.tab-btn {
  flex: 1;
  border: none;
  background: none;
  padding: 12px 0 10px;
  font-size: 13px;
  color: var(--text-dim);
  font-weight: 600;
}
.tab-btn.active { color: var(--accent); }

/* FAB */
.fab {
  position: absolute;
  right: 18px;
  bottom: 78px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 28px;
  line-height: 54px;
  padding: 0;
  box-shadow: 0 6px 16px rgba(124,92,255,0.45);
}

/* Builder */
.builder-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card-bg);
  font-size: 16px;
  line-height: 1;
  padding: 0;
}
.sources-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sources-icon-img {
  width: 68%;
  height: 68%;
  object-fit: contain;
}
.change-buttons-row {
  display: flex;
  gap: 8px;
}
.change-btn {
  font-size: 12px;
  padding: 10px 10px;
  white-space: nowrap;
}

/* Wraps the fixed-proportion stage box and centers it within whatever
   vertical space is left over - this is what lets the Builder and
   Outfits views fit any screen height with no scrollbar, while the
   stage box itself always keeps the same shape so item placements
   (stored as percentages of the stage) look identical in both views
   regardless of how much other UI surrounds each one. */
.stage-slot {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}
/* Outfit cards size to their (fixed, JS-matched-to-Builder) stage box
   instead of stretching to fill the card - the card hugs its content. */
.outfit-card .stage-slot {
  flex: 0 0 auto;
}

.mannequin-stage, .outfit-stage {
  position: relative;
  background: var(--photo-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  touch-action: none;
  user-select: none;
}
/* Outfit cards aren't draggable like the Builder's stage - touch-action:
   none there would swallow the swipe gesture needed to scroll the rail. */
.outfit-card .outfit-stage {
  touch-action: pan-x;
}
.mannequin-backdrop {
  position: absolute;
  inset: 0;
}

.slot-layer {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed transparent;
}
.slot-layer.empty {
  border-color: var(--empty-slot-border);
  background: rgba(124,92,255,0.08);
  cursor: pointer;
}
.slot-label {
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  padding: 4px;
}
.slot-layer.filled .slot-label { display: none; }

/* The display rule on .slot-layer beats the hidden attribute on its own -
   the same trap that kept the update banner permanently on screen - so
   hiding a slot needs this explicit guard. */
.slot-layer[hidden] { display: none; }

#slot-top { left: 26%; top: 17%; width: 48%; height: 29%; }
#slot-bottom { left: 27%; top: 45%; width: 46%; height: 39%; }
#slot-onepiece { left: 25%; top: 15%; width: 50%; height: 70%; }
#slot-shoes { left: 33%; top: 79%; width: 34%; height: 11%; }

.placed-item {
  position: absolute;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}
.placed-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 4px 7px rgba(20,15,10,0.3));
}

.hint {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  margin: 10px 4px;
}
.suggest-hint {
  margin-top: -4px;
  margin-bottom: 12px;
}

/* Outfits / hanger rail. .hanger-rod is a stationary metal bar; the deck
   scrolls beneath it and each card's hook rises into the deck's own top
   padding to meet it, so hangers appear to slide along a fixed rod. */
.hanger-rail-wrap {
  position: relative;
  flex: 0 1 auto; /* only as tall as its content (hook + box + title) -
                      never stretches to fill leftover view height, which
                      is what was pulling the hook away from the rod */
  max-height: 100%;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  margin: 0 -16px; /* full-bleed: cancels #views' padding so the rod
                       reaches the true screen edges and cards can peek
                       past the view's normal content width */
}
.hanger-rod {
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(180deg, #f2f3f5, #9aa0aa 55%, #6f7580);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
  z-index: 1;
}
.outfit-deck {
  width: 100%;
  flex: 0 1 auto;
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  gap: 16px;
  padding: 44px 16px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.outfit-deck::-webkit-scrollbar { display: none; }
.outfit-card {
  position: relative;
  flex: 0 0 auto;
  scroll-snap-align: center;
  background: var(--photo-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
}
.outfit-card .placed-item { cursor: default; touch-action: pan-x; }
.outfit-card .outfit-stage::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 9px;
  border-radius: 0 0 9px 9px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-top: none;
  z-index: 3;
}
.hanger-hook {
  position: absolute;
  bottom: calc(100% - 4px);
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 40px;
  z-index: 2;
  pointer-events: none;
}
.hanger-hook svg { width: 100%; height: 100%; display: block; }
.outfit-card .outfit-title {
  padding: 10px 14px;
  font-weight: 700;
  color: #201f2b;
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
}

.deck-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--text-dim);
}

.deck-actions {
  display: flex;
  gap: 10px;
}
.deck-actions button { flex: 1; }

.empty-state {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  text-align: center;
  padding: 44px 20px 0;
  font-size: 14px;
}
.empty-state .hanger-hook {
  position: absolute;
  top: 0;
  bottom: auto;
}
.empty-state p { margin: 40px 0 0; }

/* Buttons */
.primary-btn, .ghost-btn, .danger-btn {
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
}
.primary-btn {
  background: var(--accent);
  color: #fff;
  width: 100%;
  border: none;
}
.primary-btn:disabled { opacity: 0.5; }
.primary-btn:active { background: var(--accent-dark); }
.shuffle-btn {
  width: 100%;
  margin-bottom: 10px;
}
.ghost-btn {
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
}
.danger-btn {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger-border);
}

/* Modals */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20,18,35,0.45);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 50;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--card-bg);
  width: 100%;
  max-width: 480px;
  border-radius: 18px 18px 0 0;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0));
  max-height: 85vh;
  overflow-y: auto;
}
.modal h2 { margin: 0 0 14px; font-size: 17px; }

.photo-tip {
  font-size: 12px;
  color: var(--text-dim);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0 0 14px;
  line-height: 1.4;
}
.sources-rules {
  margin: 0 0 16px;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.sources-rules li { margin-bottom: 10px; }
.sources-rules li:last-child { margin-bottom: 0; }
.sources-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
}
.sources-links a {
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
}
.sources-links a:active { opacity: 0.7; }
.photo-input-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}
.photo-btn {
  flex: 1;
  text-align: center;
  padding: 12px 8px;
  border: 1px dashed var(--accent);
  border-radius: 10px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
}

.add-preview[hidden] {
  display: none;
}
.add-preview {
  display: block;
  max-width: 100%;
  max-height: 180px;
  margin: 0 auto 14px;
  border-radius: 10px;
  object-fit: contain;
}

.field-label {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin: 10px 0 4px 2px;
}

select, input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-size: 14px;
  background: var(--input-bg);
  color: var(--text);
}

.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.modal-actions button { flex: 1; }

#picker-grid {
  grid-template-columns: repeat(3, 1fr);
  max-height: 50vh;
  overflow-y: auto;
}

.profile-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  max-height: 40vh;
  overflow-y: auto;
}
.profile-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
}
.profile-row.active { border-color: var(--accent); background: rgba(124, 92, 255, 0.08); }
.profile-row-name {
  flex: 1;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-row-check { color: var(--accent); font-weight: 700; }
.profile-row-delete {
  background: none;
  border: none;
  color: var(--danger);
  font-size: 13px;
  padding: 4px 8px;
}

.backdrop-swatch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 6px;
}
.backdrop-swatch {
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  border: 2px solid var(--border);
  padding: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.backdrop-swatch.selected { border-color: var(--accent); }
.backdrop-swatch span {
  width: 100%;
  background: rgba(0,0,0,0.4);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 2px;
  text-align: center;
}

.color-swatch-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 6px;
}
.color-swatch {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--border);
  padding: 0;
  box-shadow: inset 0 0 0 2px var(--card-bg);
}
.color-swatch.selected {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--card-bg), 0 0 0 2px var(--accent);
}

.shoe-shape {
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 4px 7px rgba(20,15,10,0.3));
}
.shoe-shape svg {
  width: 100%;
  height: 100%;
  display: block;
}

.photo-view-overlay {
  align-items: center;
  background: rgba(10,9,18,0.85);
}
.photo-view-box {
  position: relative;
  width: 100%;
  max-width: 480px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Swiping to the next/previous item is handled entirely in JS (see
     photoViewStep) - pan-y keeps a horizontal drag from also being
     interpreted as a page scroll attempt on touch devices. */
  touch-action: pan-y;
  user-select: none;
}
.photo-view-box img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 10px;
  background: var(--photo-surface);
  -webkit-user-drag: none;
}
.photo-view-name {
  color: #fff;
  margin: 12px 0 0;
  font-weight: 600;
  font-size: 14px;
}
.photo-view-position {
  color: rgba(255,255,255,0.65);
  margin: 2px 0 0;
  font-size: 12px;
}
.photo-view-field {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 13px;
  margin-top: 14px;
}
.photo-view-field select {
  width: auto;
  margin: 0;
  padding: 6px 10px;
  font-size: 13px;
}
.photo-view-close {
  position: absolute;
  top: 0;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 16px;
}