/* ═══════════════════════════════════════
   FashionBySonli — Clean Aesthetic
   ═══════════════════════════════════════ */

:root {
  --pink-50:  #FFF8FA;
  --pink-100: #FFF0F4;
  --pink-200: #FADDE6;
  --pink-300: #F5C2D4;
  --pink-400: #EFA2BF;
  --pink-500: #E88AAC;
  --pink-600: #D46993;
  --pink-700: #B84E76;
  --cream-50:  #FFFFFC;
  --cream-100: #FFFAF5;
  --cream-200: #FEF3E8;
  --gold: #C9A96E;
  --gold-light: #E0CEA8;
  --rose-gold: #E8C4B8;
  --bg: #FDFAFB;
  --bg-card: #FFFFFF;
  --text: #4A3540;
  --text-dim: #A88A98;
  --text-bright: #2E1E28;
  --accent: #D46993;
  --accent-soft: rgba(212,105,147,0.08);
  --shadow-xs: 0 1px 3px rgba(180,80,120,0.04);
  --shadow-sm: 0 2px 10px rgba(180,80,120,0.05);
  --shadow-md: 0 4px 24px rgba(180,80,120,0.07);
  --shadow-lg: 0 8px 40px rgba(180,80,120,0.09);
  --shadow-glow: 0 0 30px rgba(212,105,147,0.12);
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-full: 9999px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.28s;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Cormorant Upright', 'Cormorant SC', Georgia, serif;
  font-weight: 300;
  color: var(--text);
  background: var(--bg);
  background-image:
    /* ── Fine lace diamonds ── */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M60 5 L115 60 L60 115 L5 60Z' fill='none' stroke='%23d46993' stroke-width='0.6' opacity='0.18'/%3E%3Cpath d='M60 20 L100 60 L60 100 L20 60Z' fill='none' stroke='%23e88aac' stroke-width='0.5' opacity='0.14'/%3E%3Ccircle cx='60' cy='60' r='5' fill='none' stroke='%23e88aac' stroke-width='0.8' opacity='0.2'/%3E%3Ccircle cx='60' cy='60' r='1.5' fill='%23d46993' opacity='0.18'/%3E%3C/svg%3E"),
    /* ── Scalloped circles ── */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='38' fill='none' stroke='%23e88aac' stroke-width='0.5' opacity='0.12'/%3E%3Ccircle cx='50' cy='50' r='28' fill='none' stroke='%23d46993' stroke-width='0.4' stroke-dasharray='2 3' opacity='0.14'/%3E%3Ccircle cx='50' cy='50' r='18' fill='none' stroke='%23e88aac' stroke-width='0.4' opacity='0.1'/%3E%3Ccircle cx='50' cy='12' r='2.5' fill='none' stroke='%23d46993' stroke-width='0.5' opacity='0.15'/%3E%3Ccircle cx='88' cy='50' r='2.5' fill='none' stroke='%23d46993' stroke-width='0.5' opacity='0.15'/%3E%3Ccircle cx='50' cy='88' r='2.5' fill='none' stroke='%23d46993' stroke-width='0.5' opacity='0.15'/%3E%3Ccircle cx='12' cy='50' r='2.5' fill='none' stroke='%23d46993' stroke-width='0.5' opacity='0.15'/%3E%3C/svg%3E"),
    /* ── Corner flourishes ── */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath d='M15 100 Q15 15 100 15' fill='none' stroke='%23d46993' stroke-width='0.8' opacity='0.15'/%3E%3Cpath d='M25 100 Q25 25 100 25' fill='none' stroke='%23e88aac' stroke-width='0.5' opacity='0.12'/%3E%3Ccircle cx='15' cy='15' r='3' fill='none' stroke='%23d46993' stroke-width='0.6' opacity='0.2'/%3E%3C/svg%3E"),
    /* ── Tiny dots ── */
    radial-gradient(circle, rgba(212,105,147,0.06) 1px, transparent 1px);
  background-size: 120px 120px, 100px 100px, 200px 200px, 24px 24px;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Slow animated lace drift ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cpath d='M0 30 Q15 0 30 30 Q45 60 60 30 Q75 0 90 30 Q105 60 120 30 Q135 0 150 30 Q165 60 180 30 Q195 0 210 30 Q225 60 240 30 Q255 0 270 30 Q285 60 300 30' fill='none' stroke='%23e88aac' stroke-width='0.7' opacity='0.1'/%3E%3Cpath d='M0 270 Q15 300 30 270 Q45 240 60 270 Q75 300 90 270 Q105 240 120 270 Q135 300 150 270 Q165 240 180 270 Q195 300 210 270 Q225 240 240 270 Q255 300 270 270 Q285 240 300 270' fill='none' stroke='%23e88aac' stroke-width='0.7' opacity='0.1'/%3E%3Ccircle cx='150' cy='150' r='80' fill='none' stroke='%23d46993' stroke-width='0.5' opacity='0.06'/%3E%3Ccircle cx='150' cy='150' r='60' fill='none' stroke='%23e88aac' stroke-width='0.4' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  animation: laceDrift 90s linear infinite;
}
@keyframes laceDrift {
  0% { background-position: 0 0; }
  100% { background-position: 300px 300px; }
}

/* ── Sparkle layer ── */
.sparkle-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.sparkle {
  position: absolute;
  border-radius: 50%;
  animation: sparkleFloat var(--dur-s) ease-in-out infinite;
  opacity: 0;
}
@keyframes sparkleFloat {
  0% { opacity: 0; transform: translateY(0) scale(0); }
  20% { opacity: 0.6; transform: translateY(-15px) scale(1); }
  100% { opacity: 0; transform: translateY(-80px) scale(0.2); }
}

/* ═══════════ HEADER ═══════════ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(253,250,251,0.94);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(212,105,147,0.08);
  animation: headerSlide 0.5s var(--ease);
}
@keyframes headerSlide {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.5rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.header__logo { cursor: pointer; transition: transform var(--dur) var(--ease); }
.header__logo:hover { transform: scale(1.03); }

.logo-wrap {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

/* ── Swan ── */
.logo-swan {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}
.swan-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 4px rgba(212,105,147,0.12));
  animation: swanGlide 8s ease-in-out infinite;
}
@keyframes swanGlide {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.logo-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.logo-main {
  font-family: 'Cormorant SC', Georgia, serif;
  font-size: 1.65rem;
  font-weight: 300;
  color: var(--text-bright);
  line-height: 1;
  letter-spacing: 0.06em;
}
.logo-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.5rem;
  font-weight: 200;
  letter-spacing: 0.4em;
  color: var(--text-dim);
  text-transform: uppercase;
}

/* ── Nav ── */
.header__nav {
  display: flex;
  gap: 0.25rem;
  background: rgba(255,255,255,0.8);
  padding: 0.2rem;
  border-radius: var(--r-full);
  border: 1px solid rgba(212,105,147,0.06);
}
.nav-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 0.9rem;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-family: 'Cormorant Upright', Georgia, serif;
  font-size: 0.92rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  border-radius: var(--r-full);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
}
.nav-btn:hover { color: var(--accent); background: var(--accent-soft); }
.nav-btn.active {
  color: white;
  background: var(--accent);
  box-shadow: 0 1px 8px rgba(212,105,147,0.25);
  font-weight: 400;
}
.nav-icon { font-size: 0.9rem; }

/* ═══════════ PAGES ═══════════ */
.page { display: none; position: relative; z-index: 1; }
.page--active { display: block; animation: pageReveal 0.4s var(--ease); }
@keyframes pageReveal {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ═══════════ FILTERS ═══════════ */
.filters {
  position: sticky;
  top: 54px;
  z-index: 90;
  background: rgba(253,250,251,0.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(212,105,147,0.05);
}
.filters__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.8rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}
.search-box { position: relative; flex: 1; min-width: 200px; }
.search-icon {
  position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%);
  font-size: 0.85rem; pointer-events: none; opacity: 0.5;
}
.search-box input {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2.2rem;
  border: 1px solid rgba(212,105,147,0.12);
  border-radius: var(--r-full);
  font-family: 'Cormorant Upright', Georgia, serif;
  font-size: 0.95rem;
  font-weight: 300;
  background: rgba(255,255,255,0.8);
  color: var(--text);
  outline: none;
  transition: all var(--dur) var(--ease);
}
.search-box input:focus {
  border-color: var(--pink-400);
  box-shadow: 0 0 0 3px rgba(212,105,147,0.08);
}
.search-box input::placeholder { color: var(--text-dim); font-weight: 300; }

.filter-chips { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.chip {
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(212,105,147,0.1);
  background: rgba(255,255,255,0.7);
  border-radius: var(--r-full);
  font-family: 'Cormorant Upright', Georgia, serif;
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--text-dim);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.chip:hover { border-color: var(--pink-400); color: var(--accent); background: white; }
.chip--active, .chip.chip--active {
  background: var(--accent);
  color: white;
  border-color: transparent;
  font-weight: 400;
  box-shadow: 0 1px 8px rgba(212,105,147,0.25);
}

.sort-control { display: flex; align-items: center; gap: 0.4rem; }
.sort-control select {
  padding: 0.35rem 0.6rem;
  border: 1px solid rgba(212,105,147,0.1);
  border-radius: var(--r-sm);
  font-family: 'Cormorant Upright', Georgia, serif;
  font-size: 0.88rem;
  font-weight: 300;
  background: rgba(255,255,255,0.8);
  color: var(--text);
  cursor: pointer;
  outline: none;
}
.sort-control select:focus { border-color: var(--pink-400); }

/* ═══════════ STATS ═══════════ */
.stats-bar__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.5rem 1.5rem;
  display: flex;
  gap: 1.5rem;
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--text-dim);
}
.stats-bar__inner span { display: flex; align-items: center; gap: 0.3rem; }

/* ═══════════ WARDROBE ═══════════ */
.wardrobe {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
}
.wardrobe__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.1rem;
}

/* ── Item Card ── */
.item-card {
  background: var(--bg-card);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  border: 1px solid rgba(212,105,147,0.05);
  position: relative;
  transition: all var(--dur) var(--ease);
  cursor: pointer;
  animation: cardIn 0.45s var(--ease) backwards;
}
.item-card:nth-child(odd) { animation-delay: 0.04s; }
.item-card:nth-child(even) { animation-delay: 0.09s; }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.item-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(212,105,147,0.12);
}

.item-card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--pink-50), var(--cream-50));
  overflow: hidden;
}
.item-card__img-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.45s var(--ease);
}
.item-card:hover .item-card__img-wrap img { transform: scale(1.04); }

.item-card__placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.8rem;
  background: linear-gradient(135deg, var(--pink-50), var(--cream-50));
}

.item-card__badge {
  position: absolute; top: 0.5rem; left: 0.5rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--r-full);
  font-family: 'Cormorant Upright', Georgia, serif;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(4px);
  color: var(--accent);
  box-shadow: var(--shadow-xs);
}

.item-card__actions {
  position: absolute; bottom: 0.5rem; right: 0.5rem;
  display: flex; gap: 0.25rem;
  opacity: 0; transform: translateY(4px);
  transition: all var(--dur) var(--ease);
}
.item-card:hover .item-card__actions { opacity: 1; transform: translateY(0); }
.item-card__action-btn {
  width: 30px; height: 30px;
  border-radius: var(--r-full);
  border: none;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(4px);
  font-size: 0.8rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-xs);
  transition: all var(--dur) var(--ease);
}
.item-card__action-btn:hover { box-shadow: var(--shadow-sm); transform: scale(1.08); }
.item-card__action-btn--delete:hover { background: #FFF0F2; }

.item-card__info { padding: 0.65rem 0.75rem 0.75rem; }
.item-card__name {
  font-family: 'Cormorant SC', Georgia, serif;
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--text-bright);
  margin-bottom: 0.15rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.item-card__brand {
  font-family: 'Cormorant Upright', Georgia, serif;
  font-size: 0.8rem;
  color: var(--gold);
  font-weight: 400;
  margin-bottom: 0.15rem;
}
.item-card__meta {
  font-family: 'Cormorant Upright', Georgia, serif;
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--text-dim);
  display: flex; gap: 0.5rem;
}

/* ═══════════ EMPTY ═══════════ */
.wardrobe__empty, .outfits__empty { text-align: center; padding: 4rem 1rem; }
.empty-illustration {
  font-size: 4.5rem; margin-bottom: 1rem;
  animation: floatBounce 3s ease-in-out infinite;
}
@keyframes floatBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.wardrobe__empty h2, .outfits__empty h3 {
  font-family: 'Cormorant SC', Georgia, serif;
  font-size: 2rem;
  font-weight: 300;
  color: var(--text-bright);
  margin-bottom: 0.4rem;
}
.wardrobe__empty p, .outfits__empty p {
  font-family: 'Cormorant Upright', Georgia, serif;
  font-weight: 300;
  font-size: 1rem;
  color: var(--text-dim);
  margin-bottom: 1.5rem;
}

/* ═══════════ ADD FORM ═══════════ */
.add-form-wrap { max-width: 700px; margin: 2rem auto; padding: 0 1.5rem 3rem; }
.add-form-card {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  padding: 2.2rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(212,105,147,0.05);
  animation: cardIn 0.45s var(--ease);
}
.form-title {
  font-family: 'Cormorant SC', Georgia, serif;
  font-size: 2rem;
  font-weight: 300;
  color: var(--text-bright);
  margin-bottom: 0.2rem;
  letter-spacing: 0.02em;
}
.form-subtitle {
  font-family: 'Cormorant Upright', Georgia, serif;
  font-weight: 300;
  color: var(--text-dim);
  font-size: 0.92rem;
  margin-bottom: 1.5rem;
}

.photo-upload {
  width: 100%;
  aspect-ratio: 16/10;
  border: 1.5px dashed rgba(212,105,147,0.2);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  overflow: hidden;
  margin-bottom: 1rem;
  background: rgba(255,248,250,0.5);
}
.photo-upload:hover {
  border-color: var(--pink-400);
  background: rgba(255,240,244,0.5);
  box-shadow: var(--shadow-glow);
}
.photo-preview {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.3rem;
}
.photo-preview img {
  width: 100%; height: 100%; object-fit: cover;
}
.photo-placeholder-icon {
  font-size: 2.5rem;
  animation: floatBounce 3s ease-in-out infinite;
}
.photo-hint {
  font-family: 'Cormorant Upright', Georgia, serif;
  font-size: 0.85rem;
  color: var(--text-dim);
  font-weight: 300;
}
.photo-sub-hint {
  font-family: 'Cormorant Upright', Georgia, serif;
  font-size: 0.72rem;
  color: var(--accent);
  font-weight: 300;
}

.bg-progress { margin-bottom: 1rem; }
.bg-progress__bar {
  width: 100%; height: 3px;
  background: var(--pink-100);
  border-radius: var(--r-full);
  overflow: hidden;
  margin-bottom: 0.3rem;
}
.bg-progress__fill {
  height: 100%; width: 30%;
  background: var(--accent);
  border-radius: var(--r-full);
  animation: progressPulse 1.5s ease-in-out infinite;
}
@keyframes progressPulse {
  0% { width: 10%; }
  50% { width: 70%; }
  100% { width: 10%; }
}
.bg-progress__text {
  font-family: 'Cormorant Upright', Georgia, serif;
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 300;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem 1.1rem;
}
.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-family: 'Cormorant Upright', Georgia, serif;
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--text-dim);
}
.field input, .field select, .field textarea {
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(212,105,147,0.1);
  border-radius: var(--r-sm);
  font-family: 'Cormorant Upright', Georgia, serif;
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--text);
  background: rgba(255,252,253,0.8);
  outline: none;
  transition: all var(--dur) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--pink-400);
  box-shadow: 0 0 0 3px rgba(212,105,147,0.06);
}
.field input::placeholder, .field textarea::placeholder { color: var(--pink-200); }
.field textarea { resize: vertical; }

.form-actions {
  display: flex; justify-content: flex-end; gap: 0.6rem;
  margin-top: 1.5rem; padding-top: 1.2rem;
  border-top: 1px solid rgba(212,105,147,0.06);
}

/* ═══════════ BUTTONS ═══════════ */
.btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.5rem 1.1rem;
  border: none;
  border-radius: var(--r-full);
  font-family: 'Cormorant Upright', Georgia, serif;
  font-size: 0.88rem;
  font-weight: 400;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
}
.btn--primary {
  background: var(--accent);
  color: white;
  box-shadow: 0 1px 8px rgba(212,105,147,0.25);
}
.btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 16px rgba(212,105,147,0.3);
}
.btn--secondary {
  background: var(--accent-soft);
  color: var(--accent);
}
.btn--secondary:hover { background: rgba(212,105,147,0.12); }
.btn--ghost {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid rgba(212,105,147,0.1);
}
.btn--ghost:hover { border-color: rgba(212,105,147,0.2); color: var(--text); background: rgba(215,105,147,0.03); }

/* ═══════════ OUTFITS ═══════════ */
.outfits {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 3rem;
}
.outfits__header { text-align: center; margin-bottom: 1.5rem; }
.outfits__header h2 {
  font-family: 'Cormorant SC', Georgia, serif;
  font-size: 2.2rem;
  font-weight: 300;
  color: var(--text-bright);
  letter-spacing: 0.02em;
}
.outfits__header p {
  font-family: 'Cormorant Upright', Georgia, serif;
  font-weight: 300;
  color: var(--text-dim);
  margin-top: 0.2rem;
}

.outfit-builder {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(212,105,147,0.05);
  margin-bottom: 2rem;
}

.outfit-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.8rem;
  margin-bottom: 1.2rem;
}
.outfit-slot {
  border: 1.5px dashed rgba(212,105,147,0.12);
  border-radius: var(--r-md);
  padding: 0.6rem;
  text-align: center;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  min-height: 140px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(255,252,253,0.5);
}
.outfit-slot:hover {
  border-color: var(--pink-400);
  background: rgba(255,245,248,0.5);
}
.outfit-slot.filled {
  border-style: solid;
  border-color: rgba(212,105,147,0.15);
  background: white;
}
.slot-label {
  font-family: 'Cormorant Upright', Georgia, serif;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--text-dim);
  margin-bottom: 0.4rem;
}
.slot-plus {
  font-size: 1.8rem;
  color: var(--pink-200);
  font-weight: 300;
}
.slot-content img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-sm);
  margin-bottom: 0.3rem;
}
.slot-content .slot-item-name {
  font-family: 'Cormorant Upright', Georgia, serif;
  font-size: 0.72rem;
  color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.slot-content .slot-item-brand {
  font-family: 'Cormorant Upright', Georgia, serif;
  font-size: 0.65rem;
  color: var(--gold);
}

.outfit-actions-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(212,105,147,0.06);
}

.saved-outfits h3 {
  font-family: 'Cormorant SC', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--text-bright);
  margin-bottom: 0.8rem;
}
.outfits__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.outfit-card {
  background: var(--bg-card);
  border-radius: var(--r-md);
  padding: 1rem;
  box-shadow: var(--shadow-xs);
  border: 1px solid rgba(212,105,147,0.05);
}
.outfit-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
}
.outfit-card__style {
  font-family: 'Cormorant Upright', Georgia, serif;
  font-size: 0.72rem;
  padding: 0.15rem 0.5rem;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--r-full);
}
.outfit-card__delete {
  background: none; border: none; cursor: pointer;
  font-size: 0.9rem; color: var(--text-dim);
  transition: color var(--dur);
}
.outfit-card__delete:hover { color: var(--pink-600); }
.outfit-card__items {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.outfit-card__item {
  width: 60px; height: 60px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--pink-50);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
}
.outfit-card__item img {
  width: 100%; height: 100%; object-fit: cover;
}

/* ═══════════ MODALS ═══════════ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(74,53,64,0.3);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur);
}
.modal-overlay.show { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  padding: 1.8rem;
  max-width: 500px; width: 92%;
  max-height: 85vh; overflow-y: auto;
  box-shadow: var(--shadow-lg);
  position: relative;
  animation: modalIn 0.3s var(--ease);
}
.modal--wide { max-width: 650px; }
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal__close {
  position: absolute; top: 0.8rem; right: 0.8rem;
  background: none; border: none;
  font-size: 1.4rem; color: var(--text-dim);
  cursor: pointer; line-height: 1;
  transition: color var(--dur);
}
.modal__close:hover { color: var(--accent); }

.modal-detail-img {
  width: 100%; aspect-ratio: 16/10; object-fit: cover;
  border-radius: var(--r-md); margin-bottom: 1rem;
}
.modal-detail-placeholder {
  width: 100%; aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--pink-50), var(--cream-50));
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem; margin-bottom: 1rem;
}
.modal__content h3 {
  font-family: 'Cormorant SC', Georgia, serif;
  font-size: 1.6rem; font-weight: 300;
  color: var(--text-bright); margin-bottom: 0.8rem;
}
.modal-detail-fields { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.modal-detail-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(212,105,147,0.05);
}
.modal-detail-row .label {
  font-family: 'Cormorant Upright', Georgia, serif;
  font-size: 0.8rem; font-weight: 300;
  color: var(--text-dim);
}
.modal-detail-row .value {
  font-family: 'Cormorant Upright', Georgia, serif;
  font-size: 0.88rem; font-weight: 400;
  color: var(--text);
}
.modal-detail-actions {
  display: flex; gap: 0.5rem; justify-content: flex-end;
}

.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.6rem;
  margin-top: 1rem;
}
.picker-item {
  border: 1.5px solid rgba(212,105,147,0.08);
  border-radius: var(--r-sm);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  background: var(--pink-50);
  text-align: center;
}
.picker-item:hover, .picker-item.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(212,105,147,0.12);
}
.picker-item img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
}
.picker-item__placeholder {
  width: 100%; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; background: linear-gradient(135deg, var(--pink-50), var(--cream-50));
}
.picker-item__name {
  font-family: 'Cormorant Upright', Georgia, serif;
  font-size: 0.72rem; font-weight: 300;
  color: var(--text-dim);
  padding: 0.3rem 0.2rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ═══════════ TOAST ═══════════ */
.toast {
  position: fixed; bottom: 2rem; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--text-bright);
  color: white;
  padding: 0.6rem 1.2rem;
  border-radius: var(--r-full);
  font-family: 'Cormorant Upright', Georgia, serif;
  font-size: 0.85rem;
  font-weight: 300;
  box-shadow: var(--shadow-lg);
  z-index: 300;
  opacity: 0; pointer-events: none;
  transition: all var(--dur) var(--ease);
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 768px) {
  .header__inner { padding: 0.4rem 1rem; }
  .logo-main { font-size: 1.3rem; }
  .filters__inner { padding: 0.7rem 1rem; }
  .wardrobe__grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.8rem; }
  .form-grid { grid-template-columns: 1fr; }
  .outfit-slots { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .modal { padding: 1.2rem; width: 95%; }
}
@media (max-width: 480px) {
  .header__nav { gap: 0.15rem; padding: 0.15rem; }
  .nav-btn { padding: 0.4rem 0.6rem; font-size: 0.82rem; }
  .wardrobe__grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .item-card__info { padding: 0.5rem; }
  .item-card__name { font-size: 0.82rem; }
}