:root {
  --bg: #1a1714;
  --bg-deep: #100e0c;
  --panel: #211d19;
  --wood: #302820;
  --wood-dark: #1d1814;
  --glass: rgba(223, 210, 184, 0.055);
  --gold: #d4a857;
  --gold-soft: #e7c47a;
  --gold-dim: rgba(212, 168, 87, 0.34);
  --ivory: #f2eadc;
  --muted: #9e9384;
  --line: rgba(231, 196, 122, 0.24);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --radius: 4px;
  --intro-time: 5s;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100svh;
  background:
    radial-gradient(circle at 50% 42%, rgba(212,168,87,.075), transparent 34%),
    linear-gradient(180deg, #211c18 0%, var(--bg) 54%, var(--bg-deep) 100%);
  color: var(--ivory);
  font-family: var(--sans);
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.008) 0 1px, transparent 1px 5px);
  opacity: .5;
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.app-shell { width: min(100%, 480px); min-height: 100svh; margin: 0 auto; position: relative; }
.entrance, .login-view, .next-screen { min-height: 100svh; }
.entrance {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: calc(22px + env(safe-area-inset-top)) 18px calc(20px + env(safe-area-inset-bottom));
  isolation: isolate;
}
.entrance::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-deep);
  z-index: 20;
  pointer-events: none;
  animation: intro-fade-out 1s 0s ease forwards;
}
.intro-wordmark {
  display: flex; align-items: center; gap: 11px;
  opacity: 0;
  transform: translateY(-5px);
  animation: wordmark-in .8s .55s ease forwards;
}
.brand-mark {
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--gold-dim); color: var(--gold-soft);
  font: 600 20px/1 var(--serif); border-radius: 50%;
}
.intro-name { font: 600 29px/.85 var(--serif); letter-spacing: .025em; }
.wardrobe-stage { flex: 1; display: grid; place-items: center; padding: 28px 0 22px; }

/* Stage 1 wardrobe foundation — retained and animated only for the entrance scene. */
.wardrobe-frame {
  position: relative; width: min(92vw, 432px); height: min(116vw, 545px);
  min-height: 480px; max-height: 545px;
  padding: 14px 12px 28px;
  background: linear-gradient(145deg, #4a3a2c, #241d18 28%, #171310 72%, #3a2c21);
  border: 1px solid rgba(231,196,122,.38);
  box-shadow: 18px 18px 55px rgba(0,0,0,.5), inset 0 0 0 3px rgba(0,0,0,.45), 0 0 28px rgba(212,168,87,.08);
  opacity: .18;
  filter: blur(8px);
  transform: scale(.72);
  animation: wardrobe-arrive 3.35s .15s cubic-bezier(.18,.8,.2,1) forwards;
}
.crown { position: absolute; left: 5px; right: 5px; top: 5px; height: 8px; background: linear-gradient(90deg,#211a15,#70573b,#211a15); border: 1px solid rgba(212,168,87,.3); }
.interior { position: absolute; inset: 25px 16px 39px; display: grid; grid-template-columns: 1.34fr .78fr .76fr; gap: 5px; background: #120f0d; border: 1px solid rgba(212,168,87,.2); overflow: hidden; }
.interior::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 20% 5%, rgba(231,196,122,.11), transparent 32%); pointer-events:none; }
.hanging-zone, .shelf-zone, .accessory-zone { position: relative; background: linear-gradient(90deg, #181411, #241c16 50%, #120f0d); border-right: 1px solid rgba(231,196,122,.12); overflow: hidden; }
.hanging-zone { padding: 34px 8px 8px; }
.rail { position:absolute; left: 8px; right: 8px; top: 22px; height: 5px; border-radius: 8px; background: linear-gradient(#d6bd8b,#72552d); box-shadow: 0 0 9px rgba(212,168,87,.45); }
.garment { position: absolute; top: 30px; width: 31px; height: 156px; border-radius: 7px 7px 10px 10px; background: linear-gradient(90deg,#211d1b,#403833 48%,#181513); box-shadow: 3px 7px 8px rgba(0,0,0,.3); }
.garment::before { content:""; position:absolute; left:7px; right:7px; top:-3px; height:12px; border: 2px solid #a58c65; border-bottom: 0; border-radius:50%; }
.garment span { position:absolute; top: 20px; left: 3px; right:3px; height:1px; background:rgba(255,255,255,.08); }
.garment-1{left:7%;}.garment-2{left:27%;height:174px;background:linear-gradient(90deg,#27211d,#5a5048,#1a1613)}.garment-3{left:47%;height:145px;background:linear-gradient(90deg,#3c3027,#8a7251,#2a211b)}.garment-4{left:66%;height:166px;background:linear-gradient(90deg,#17191a,#343b3b,#151515)}.garment-5{left:84%;height:151px;background:linear-gradient(90deg,#32251d,#5c4330,#211914)}
.shelf-zone { display:flex; flex-direction:column; gap:0; padding-top:12px; }
.shelf { position:relative; flex:1; border-bottom:4px solid #0c0a09; box-shadow: 0 7px 12px rgba(0,0,0,.38); display:flex; align-items:flex-end; justify-content:center; gap:3px; padding:0 5px 8px; }
.shelf::before { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg,#57422c,#b08a4e,#57422c); }
.folded { width:43%; height:22px; border-radius:2px; background:linear-gradient(180deg,#66594d,#302a25); box-shadow: inset 0 -2px rgba(0,0,0,.28); }
.folded-3,.folded-4 { background:linear-gradient(180deg,#5a4737,#2d2119); }.folded-5,.folded-6 { background:linear-gradient(180deg,#4c4f4c,#252725); }
.accessory-zone { padding: 14px 6px; }
.shoe-pair { position:absolute; left:10px; top:27px; width:68px; height:37px; }
.shoe-pair span { position:absolute; bottom:0; width:34px; height:14px; border-radius:16px 9px 5px 5px; background:linear-gradient(145deg,#5e5145,#191613); transform:rotate(-8deg); box-shadow:0 4px 5px rgba(0,0,0,.35); }
.shoe-pair span+span { left:24px; bottom:6px; transform:rotate(8deg); }
.pair-2 { top:97px; transform:scale(.86); transform-origin:left top; }.pair-2 span { background:linear-gradient(145deg,#43382e,#141210); }
.bag { position:absolute; bottom:65px; left:18px; width:57px; height:72px; border-radius:5px; background:linear-gradient(145deg,#604a35,#211914); box-shadow:0 7px 10px rgba(0,0,0,.4); }
.bag .handle { position:absolute; left:13px; top:-19px; width:31px; height:27px; border:4px solid #75573a; border-bottom:0; border-radius:18px 18px 0 0; }
.small-box { position:absolute; bottom:25px; right:7px; width:42px; height:28px; border:1px solid #705633; background:#211a15; }
.glass { position:absolute; top:25px; bottom:39px; width:49%; z-index:5; background:linear-gradient(105deg, rgba(255,255,255,.025), rgba(223,210,184,.085) 46%, rgba(255,255,255,.015)); border:1px solid rgba(231,196,122,.19); box-shadow: inset 0 0 20px rgba(255,255,255,.025), 0 0 18px rgba(212,168,87,.035); }
.glass-left { left:16px; border-right:0; animation: glass-left-open 1.05s 3.55s cubic-bezier(.65,0,.2,1) forwards; }
.glass-right { right:16px; border-left:0; animation: glass-right-open 1.05s 3.55s cubic-bezier(.65,0,.2,1) forwards; }
.glass::after { content:""; position:absolute; top:0; bottom:0; width:1px; background:rgba(255,255,255,.13); transform:skewX(-8deg); left:23%; }
.glass-seam { position:absolute; z-index:7; top:25px; bottom:39px; left:50%; width:1px; background:rgba(231,196,122,.25); box-shadow:0 0 8px rgba(212,168,87,.18); animation: seam-fade 1s 3.55s ease forwards; }
.handle { position:absolute; z-index:8; top:46%; width:3px; height:82px; background:linear-gradient(#b99455,#e2c47f,#7b5b31); box-shadow:0 0 7px rgba(212,168,87,.45); }
.handle::before { content:""; position:absolute; inset:-2px -5px; border:1px solid rgba(231,196,122,.25); border-radius:5px; }
.handle-left { left:48.1%; animation: handle-left-open 1.05s 3.55s cubic-bezier(.65,0,.2,1) forwards; }
.handle-right { right:48.1%; animation: handle-right-open 1.05s 3.55s cubic-bezier(.65,0,.2,1) forwards; }
.led { position:absolute; z-index:9; pointer-events:none; background:var(--gold); opacity:0; box-shadow:0 0 8px var(--gold), 0 0 20px rgba(212,168,87,.6), 0 0 38px rgba(212,168,87,.18); animation: led-on 1.7s 2.15s ease forwards; }
.led-top { left:28px; right:28px; top:29px; height:2px; }.led-side { top:47px; bottom:53px; left:27px; width:2px; animation-delay:2.35s; }
.base { position:absolute; bottom:8px; left:5px; right:5px; height:18px; background:linear-gradient(180deg,#4d3b2a,#211a15); border-top:1px solid rgba(231,196,122,.35); }
.entrance-caption { margin: 0; align-self: center; color:#756b5e; font-size:8px; letter-spacing:.18em; font-weight:600; opacity:0; animation: caption-in .8s 4.1s ease forwards; }

.login-view {
  position: absolute; inset: 0; z-index: 30; display: grid; place-items: center;
  padding: 28px 20px calc(70px + env(safe-area-inset-bottom));
  opacity: 0; visibility: hidden; pointer-events: none;
  background: rgba(16,14,12,.68);
  transition: opacity .75s ease, visibility 0s linear .75s;
}
.login-view::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 50% 35%, rgba(212,168,87,.09), transparent 42%); }
.login-view.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.login-backdrop { position:absolute; inset:0; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); opacity: 0; transition: opacity 1s ease; }
.login-view.is-visible .login-backdrop { opacity: 1; }
.login-card {
  position: relative; z-index: 1; width: min(100%, 360px); padding: 32px 26px 27px;
  background: linear-gradient(145deg, rgba(47,40,33,.74), rgba(24,20,17,.68));
  border: 1px solid rgba(231,196,122,.28);
  box-shadow: 0 25px 70px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.045), 0 0 34px rgba(212,168,87,.055);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  transform: translateY(22px) scale(.97); opacity: 0;
}
.login-view.is-visible .login-card { animation: card-in .8s .18s cubic-bezier(.2,.8,.2,1) forwards; }
.login-heading { text-align:center; }
.login-kicker { color:var(--gold); font-size:8px; font-weight:600; letter-spacing:.23em; }
.login-heading h1 { margin: 10px 0 4px; font: 600 34px/.95 var(--serif); letter-spacing:.01em; }
.login-heading h1 em { color:var(--gold-soft); font-style:normal; }
.login-heading p { margin:0 0 28px; color:var(--muted); font-size:11px; letter-spacing:.01em; }
.login-form { display:grid; gap:14px; }
.field { position:relative; display:block; }
.field input {
  width:100%; height:54px; padding:19px 15px 6px; color:var(--ivory); background:rgba(10,9,8,.28);
  border:0; border-bottom:1px solid rgba(231,196,122,.22); outline:0; border-radius:0;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.field input:focus { border-bottom-color:var(--gold); box-shadow:0 7px 18px -15px var(--gold), inset 0 -1px 0 var(--gold); background:rgba(10,9,8,.4); }
.field span { position:absolute; left:15px; top:17px; color:#a99d8d; font-size:12px; pointer-events:none; transform-origin:left top; transition: transform .2s ease, color .2s ease; }
.field input:focus + span, .field input:not(:placeholder-shown) + span { transform:translateY(-9px) scale(.72); color:var(--gold-soft); }
.login-button {
  height:52px; margin-top:7px; border:1px solid rgba(231,196,122,.42); border-radius:2px;
  background:linear-gradient(180deg, #dcb66d, #bd8f43); color:#17120d; font-weight:600; letter-spacing:.08em; font-size:11px;
  box-shadow:0 8px 22px rgba(0,0,0,.25), 0 0 20px rgba(212,168,87,.09); cursor:pointer;
  transition:transform .12s ease, box-shadow .2s ease;
}
.login-button:active { transform:scale(.97); box-shadow:0 3px 10px rgba(0,0,0,.25); }
.sound-toggle {
  position:absolute; z-index:2; bottom:calc(20px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:7px; padding:7px 10px; border:0; background:transparent; color:#7e7467;
  font-size:8px; letter-spacing:.14em; cursor:pointer;
}
.sound-icon { font-size:13px; filter:grayscale(.5); }
.sound-toggle.is-on { color:var(--gold-soft); }
.next-screen { display:grid; place-items:center; align-content:center; text-align:center; padding:30px; background:radial-gradient(circle at 50% 42%, rgba(212,168,87,.09), transparent 35%), var(--bg-deep); }
.next-screen[hidden] { display:none; }
.next-kicker { color:var(--gold); font-size:8px; letter-spacing:.23em; font-weight:600; }
.next-screen h2 { margin:9px 0 4px; font:600 48px/.9 var(--serif); color:var(--ivory); }
.next-screen p { margin:0; color:var(--muted); font-size:11px; }

@keyframes intro-fade-out { from { opacity:1; } to { opacity:0; } }
@keyframes wardrobe-arrive { 0% { opacity:.18; filter:blur(8px); transform:scale(.72); } 55% { opacity:.82; filter:blur(2.2px); transform:scale(.91); } 100% { opacity:1; filter:blur(0); transform:scale(1); } }
@keyframes led-on { 0% { opacity:0; } 55% { opacity:.35; } 100% { opacity:1; } }
@keyframes glass-left-open { to { transform:translateX(-58%); opacity:.72; } }
@keyframes glass-right-open { to { transform:translateX(58%); opacity:.72; } }
@keyframes handle-left-open { to { transform:translateX(-58%); opacity:.72; } }
@keyframes handle-right-open { to { transform:translateX(58%); opacity:.72; } }
@keyframes seam-fade { to { opacity:0; } }
@keyframes wordmark-in { to { opacity:1; transform:translateY(0); } }
@keyframes caption-in { to { opacity:1; } }
@keyframes card-in { to { opacity:1; transform:translateY(0) scale(1); } }

@media (max-width: 360px) {
  .entrance { padding-inline:12px; }
  .wardrobe-frame { min-height:455px; height:132vw; }
  .garment { width:25px; }
  .shoe-pair { transform:scale(.82); transform-origin:left top; }
  .bag { transform:scale(.86); transform-origin:left bottom; }
  .login-card { padding-inline:21px; }
}
@media (prefers-reduced-motion: reduce) {
  .entrance::after, .wardrobe-frame, .glass-left, .glass-right, .glass-seam, .handle-left, .handle-right, .led, .intro-wordmark, .entrance-caption { animation-duration:1ms !important; animation-delay:0ms !important; animation-iteration-count:1 !important; }
}

/* Stage 4 — clothing capture & upload */
.auth-mode-toggle {
  border: 0; background: transparent; color: var(--gold-soft); padding: 2px 0 0;
  font-size: 10px; letter-spacing: .04em; cursor: pointer;
}
.auth-status { min-height: 17px; margin: 2px 0 0; color: #8f8679; font-size: 9px; line-height: 1.5; text-align: center; }
.auth-status.is-error, .upload-status.is-error { color: #d6a17f; }
.login-button:disabled { opacity: .55; cursor: wait; }

.next-screen { position: relative; }
.add-item-button {
  margin-top: 24px; min-width: 190px; height: 48px; padding: 0 20px;
  border: 1px solid rgba(231,196,122,.48); border-radius: 2px;
  background: linear-gradient(180deg, rgba(220,182,109,.16), rgba(189,143,67,.08));
  color: var(--gold-soft); font-size: 11px; font-weight: 600; letter-spacing: .11em;
  cursor: pointer; transition: transform .12s ease, background .2s ease, box-shadow .2s ease;
}
.add-item-button:active { transform: scale(.97); }
.add-item-button:disabled { opacity: .45; cursor: not-allowed; }
.sign-out-button {
  margin-top: 12px; border: 0; background: transparent; color: #756b5e;
  font-size: 8px; letter-spacing: .16em; cursor: pointer;
}

.upload-view {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: end center;
  padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
  background: rgba(9,8,7,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
.upload-view[hidden] { display: none; }
.upload-view.is-visible { opacity: 1; pointer-events: auto; }
.upload-panel {
  position: relative; width: min(100%, 456px); max-height: min(88svh, 720px); overflow: auto;
  padding: 28px 18px 20px; border: 1px solid rgba(231,196,122,.26);
  background: linear-gradient(145deg, rgba(45,38,31,.96), rgba(20,17,15,.97));
  box-shadow: 0 28px 80px rgba(0,0,0,.65), 0 0 38px rgba(212,168,87,.08);
  transform: translateY(28px); transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.upload-view.is-visible .upload-panel { transform: translateY(0); }
.upload-close {
  position: absolute; top: 10px; right: 12px; width: 34px; height: 34px;
  border: 0; background: transparent; color: #9e9384; font-size: 27px; line-height: 1; cursor: pointer;
}
.upload-heading { padding-right: 30px; }
.upload-kicker, .progress-eyebrow { color: var(--gold); font-size: 8px; font-weight: 600; letter-spacing: .22em; }
.upload-heading h2 { margin: 7px 0 3px; font: 600 31px/.95 var(--serif); color: var(--ivory); }
.upload-heading p { margin: 0 0 20px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.photo-slot {
  position: relative; min-height: 142px; overflow: hidden; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 12px; border: 1px solid rgba(231,196,122,.18);
  background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(5,5,5,.25));
  cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease;
}
.photo-slot:nth-child(4) { min-height: 118px; }
.photo-slot:hover, .photo-slot.is-selected { border-color: rgba(231,196,122,.46); box-shadow: inset 0 0 25px rgba(212,168,87,.055); }
.photo-slot input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.slot-preview { position: absolute; inset: 0; background-position: center; background-size: cover; opacity: 0; transition: opacity .2s ease; }
.slot-preview.has-image { opacity: .76; }
.slot-preview::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 30%, rgba(8,7,6,.84) 100%); }
.slot-role, .slot-label { position: relative; z-index: 1; }
.slot-role { color: var(--gold-soft); font-size: 7px; font-weight: 600; letter-spacing: .17em; }
.slot-label { margin-top: 4px; color: #9d9386; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photo-slot.is-selected .slot-label { color: var(--ivory); }

.upload-progress {
  display: flex; align-items: center; gap: 14px; margin: 18px 2px 14px; min-height: 54px;
}
.progress-ring {
  --progress: 0deg; width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--gold) var(--progress), rgba(231,196,122,.11) 0deg);
  box-shadow: 0 0 22px rgba(212,168,87,.11);
}
.progress-ring::before { content:""; position:absolute; inset:5px; border-radius:50%; background:#211c18; border:1px solid rgba(231,196,122,.13); }
.progress-ring span { position:relative; z-index:1; color:var(--gold-soft); font-size:9px; font-weight:600; }
.progress-ring.is-uploading { animation: ring-breathe 1.4s ease-in-out infinite; }
.upload-progress p { margin: 5px 0 0; color: #918779; font-size: 9px; line-height: 1.4; }
.upload-submit {
  width: 100%; height: 49px; border: 1px solid rgba(231,196,122,.4); border-radius: 2px;
  background: linear-gradient(180deg, #dcb66d, #bd8f43); color:#17120d;
  font-size: 10px; font-weight: 600; letter-spacing: .11em; cursor:pointer;
  transition: transform .12s ease, opacity .2s ease;
}
.upload-submit:active:not(:disabled) { transform: scale(.97); }
.upload-submit:disabled { opacity: .42; cursor:not-allowed; }

@keyframes ring-breathe { 50% { box-shadow: 0 0 28px rgba(212,168,87,.25); } }

@media (max-width: 360px) {
  .photo-slot { min-height: 125px; }
  .photo-slot:nth-child(4) { min-height: 105px; }
  .upload-panel { padding-inline: 14px; }
}

/* Stage 7 — item collection + detail viewer */
body.detail-open { overflow: hidden; }
.wardrobe-home-head { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; width:100%; }
.wardrobe-home-head > div { text-align:left; }
.wardrobe-home-head h2 { margin:5px 0 3px; }
.wardrobe-home-head p { margin:0; }
.wardrobe-home-head .add-item-button { width:auto; min-width:126px; margin:0; padding:0 14px; white-space:nowrap; }
.item-grid { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:24px; }
.item-card { position:relative; min-width:0; padding:0; border:1px solid rgba(231,196,122,.16); background:#211c18; color:var(--ivory); text-align:left; cursor:pointer; overflow:hidden; transition:border-color .25s ease, transform .18s ease, box-shadow .25s ease; }
.item-card:active { transform:scale(.985); }
.item-card:hover { border-color:rgba(231,196,122,.42); box-shadow:0 14px 32px rgba(0,0,0,.22); }
.item-card-image { display:grid; place-items:center; aspect-ratio: .82; background:radial-gradient(circle at 50% 35%,rgba(231,196,122,.07),transparent 52%),#171411; overflow:hidden; }
.item-card-image img { width:100%; height:100%; object-fit:cover; display:block; }
.item-card-placeholder { color:rgba(231,196,122,.35); font:500 42px var(--serif); }
.item-card-meta { display:flex; flex-direction:column; gap:3px; padding:11px 12px 13px; }
.item-card-meta strong { font:600 17px/1 var(--serif); letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.item-card-meta small { color:#857b6d; font-size:8px; text-transform:uppercase; letter-spacing:.14em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.item-card-arrow { position:absolute; top:9px; right:10px; width:25px; height:25px; display:grid; place-items:center; border:1px solid rgba(231,196,122,.2); background:rgba(10,9,8,.58); color:var(--gold-soft); font-size:13px; }
.item-loading { grid-column:1/-1; padding:30px 0; color:#80776a; font-size:10px; letter-spacing:.12em; text-align:center; }
.item-empty { width:100%; margin-top:28px; padding:36px 20px; border-top:1px solid rgba(231,196,122,.13); border-bottom:1px solid rgba(231,196,122,.13); display:flex; flex-direction:column; align-items:center; gap:7px; color:#8c8173; font-size:9px; }
.item-empty strong { color:var(--ivory); font:600 20px var(--serif); }
.empty-glyph { color:var(--gold); font:400 28px var(--serif); margin-bottom:3px; }

.item-detail-view { position:fixed; inset:0; z-index:120; background:#100e0c; opacity:0; pointer-events:none; transition:opacity .3s ease; overflow:auto; }
.item-detail-view[hidden] { display:none; }
.item-detail-view.is-visible { opacity:1; pointer-events:auto; }
.item-detail-shell { width:min(100%,480px); min-height:100%; margin:0 auto; background:linear-gradient(180deg,#14110f 0%,#100e0c 100%); padding-bottom:30px; }
.detail-header { position:sticky; top:0; z-index:5; height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; border-bottom:1px solid rgba(231,196,122,.1); background:rgba(16,14,12,.88); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.detail-back,.detail-delete { border:0; background:transparent; cursor:pointer; font-size:8px; letter-spacing:.15em; }
.detail-back { color:#9a8f80; }
.detail-back span { margin-left:5px; }
.detail-delete { color:#987b6b; }
.detail-kicker { color:var(--gold); font-size:7px; letter-spacing:.24em; }
.frame-viewer { position:relative; height:min(68svh,560px); min-height:380px; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 50% 42%,rgba(212,168,87,.07),transparent 48%),#151210; touch-action:pan-y; user-select:none; }
.viewer-glow { position:absolute; width:52%; aspect-ratio:1; border-radius:50%; background:rgba(212,168,87,.08); filter:blur(42px); }
.detail-frame { position:relative; z-index:2; width:100%; height:100%; object-fit:contain; padding:28px 18px 34px; opacity:0; transform:scale(.985); transition:opacity .2s ease, transform .28s ease; filter:drop-shadow(0 20px 24px rgba(0,0,0,.32)); }
.detail-frame.is-loaded { opacity:1; transform:scale(1); }
.detail-frame.is-crossfading { opacity:.1; transform:scale(.985); }
.viewer-vignette { position:absolute; inset:0; z-index:3; pointer-events:none; box-shadow:inset 0 0 70px rgba(0,0,0,.34); }
.frame-counter { position:absolute; z-index:4; left:16px; bottom:16px; color:#c6b8a6; font-size:8px; letter-spacing:.14em; }
.frame-counter i { color:#62594e; padding:0 4px; font-style:normal; }
.swipe-hint { position:absolute; z-index:4; right:16px; bottom:16px; color:#766d61; font-size:7px; letter-spacing:.18em; }
.detail-info { padding:22px 17px 0; }
.detail-title-row { display:flex; justify-content:space-between; align-items:flex-start; gap:15px; padding-bottom:18px; border-bottom:1px solid rgba(231,196,122,.12); }
.detail-label { color:var(--gold); font-size:7px; letter-spacing:.22em; }
.detail-title-row h1 { margin:5px 0 0; color:var(--ivory); font:600 31px/.95 var(--serif); }
.detail-status { margin-top:4px; padding:5px 7px; border:1px solid rgba(231,196,122,.22); color:var(--gold-soft); font-size:7px; letter-spacing:.15em; }
.detail-status.is-processing { color:#9b8c79; border-color:rgba(155,140,121,.2); }
.detail-fields { display:grid; grid-template-columns:1fr 1fr; gap:11px; padding:18px 0 14px; }
.detail-fields label:last-child { grid-column:1/-1; }
.detail-fields label { display:flex; flex-direction:column; gap:6px; }
.detail-fields span { color:#7f7568; font-size:7px; text-transform:uppercase; letter-spacing:.16em; }
.detail-fields input { width:100%; height:43px; padding:0 11px; border:1px solid rgba(231,196,122,.16); border-radius:0; outline:none; background:#181512; color:var(--ivory); font:400 10px Inter,sans-serif; transition:border-color .2s ease,box-shadow .2s ease; }
.detail-fields input:focus { border-color:rgba(212,168,87,.58); box-shadow:0 0 0 1px rgba(212,168,87,.1),0 0 18px rgba(212,168,87,.07); }
.detail-fields input::placeholder { color:#5e574f; }
.detail-save { width:100%; height:46px; border:1px solid rgba(231,196,122,.36); background:#c89b50; color:#17120d; font-size:9px; font-weight:600; letter-spacing:.15em; cursor:pointer; transition:transform .12s ease,opacity .2s ease; }
.detail-save:active:not(:disabled) { transform:scale(.98); }
.detail-save:disabled { opacity:.55; }
.detail-message { min-height:16px; margin:9px 0 0; color:#81766a; text-align:center; font-size:8px; }

@media (max-width:380px) {
  .wardrobe-home-head { align-items:flex-start; flex-direction:column; }
  .wardrobe-home-head .add-item-button { width:100%; }
  .frame-viewer { min-height:350px; }
  .detail-fields { grid-template-columns:1fr; }
  .detail-fields label:last-child { grid-column:auto; }
}

/* Stage 8 — Garderob saved outfits / boutique windows */
.wardrobe-actions { display:flex; align-items:center; gap:7px; }
.outfits-nav-button { height:38px; padding:0 12px; border:1px solid rgba(231,196,122,.28); background:rgba(231,196,122,.05); color:var(--gold-soft); font-size:8px; font-weight:600; letter-spacing:.12em; cursor:pointer; }
.outfits-nav-button:disabled { opacity:.35; cursor:not-allowed; }
.outfits-view { position:fixed; inset:0; z-index:130; background:#100e0c; opacity:0; pointer-events:none; transition:opacity .28s ease; overflow:auto; }
.outfits-view[hidden] { display:none; }
.outfits-view.is-visible { opacity:1; pointer-events:auto; }
.outfits-shell { width:min(100%,480px); min-height:100%; margin:0 auto; padding:22px 15px 34px; background:linear-gradient(180deg,#171310 0%,#100e0c 100%); }
.outfits-header { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding-bottom:20px; border-bottom:1px solid rgba(231,196,122,.12); }
.outfits-kicker { color:var(--gold); font-size:7px; letter-spacing:.24em; }
.outfits-header h2 { margin:6px 0 3px; color:var(--ivory); font:600 34px/.9 var(--serif); }
.outfits-header p { margin:0; color:#83796c; font-size:9px; line-height:1.4; max-width:220px; }
.outfit-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:22px; }
.outfit-card { position:relative; border:1px solid rgba(231,196,122,.17); background:#1b1714; padding:0; text-align:left; color:var(--ivory); cursor:pointer; overflow:hidden; transition:border-color .2s ease,transform .15s ease; }
.outfit-card:active { transform:scale(.985); }
.outfit-card:hover { border-color:rgba(231,196,122,.42); }
.outfit-window { position:relative; display:block; height:220px; overflow:hidden; background:linear-gradient(145deg,#211b17,#0e0d0b); }
.outfit-window::before { content:""; position:absolute; inset:10px; border:1px solid rgba(231,196,122,.14); z-index:3; pointer-events:none; }
.outfit-led { position:absolute; z-index:2; left:10px; top:10px; bottom:10px; width:2px; background:var(--gold); box-shadow:0 0 13px rgba(212,168,87,.7); opacity:.72; }
.outfit-preview-grid { position:absolute; inset:18px 16px 12px 20px; display:grid; grid-template-columns:1fr 1fr; gap:5px; align-items:center; justify-items:center; }
.outfit-preview-grid img { width:100%; height:100%; max-height:190px; object-fit:contain; filter:drop-shadow(0 12px 15px rgba(0,0,0,.32)); }
.outfit-preview-grid img:only-child { grid-column:1/-1; }
.outfit-placeholder { display:grid; place-items:center; width:100%; height:100%; color:rgba(231,196,122,.3); font:40px var(--serif); }
.outfit-glass { position:absolute; inset:0; z-index:4; pointer-events:none; background:linear-gradient(112deg,rgba(255,255,255,.08),transparent 22%,transparent 72%,rgba(255,255,255,.025)); border-left:1px solid rgba(255,255,255,.06); }
.outfit-meta { display:flex; flex-direction:column; gap:4px; padding:12px; }
.outfit-meta strong { font:600 19px/1 var(--serif); }
.outfit-meta small { color:#7d7367; font-size:7px; letter-spacing:.17em; }
.outfit-arrow { position:absolute; top:14px; right:14px; z-index:5; width:24px; height:24px; display:grid; place-items:center; background:rgba(10,9,8,.62); border:1px solid rgba(231,196,122,.22); color:var(--gold-soft); }
.outfit-empty { margin-top:28px; padding:42px 20px; display:flex; flex-direction:column; align-items:center; gap:7px; border-top:1px solid rgba(231,196,122,.12); border-bottom:1px solid rgba(231,196,122,.12); color:#81776a; text-align:center; font-size:9px; }
.outfit-empty strong { color:var(--ivory); font:600 21px var(--serif); }
.outfit-expanded { margin-top:24px; padding-top:18px; border-top:1px solid rgba(231,196,122,.14); }
.outfit-expanded[hidden] { display:none; }
.outfit-expanded.is-visible { animation: outfit-reveal .28s ease both; }
.outfit-expanded-top { display:flex; align-items:center; justify-content:space-between; }
.outfit-expanded-title { padding:18px 0 12px; }
.outfit-expanded-title h3 { margin:5px 0 0; color:var(--ivory); font:600 29px/.95 var(--serif); }
.outfit-items { display:flex; flex-direction:column; gap:8px; }
.outfit-item-row { display:grid; grid-template-columns:58px 1fr 18px; align-items:center; gap:11px; width:100%; padding:7px; border:1px solid rgba(231,196,122,.12); background:#181411; color:var(--ivory); text-align:left; cursor:pointer; }
.outfit-item-image { width:58px; height:70px; display:grid; place-items:center; overflow:hidden; background:#211c18; }
.outfit-item-image img { width:100%; height:100%; object-fit:contain; }
.outfit-item-row strong { display:block; font:600 17px/1 var(--serif); }
.outfit-item-row small { display:block; margin-top:5px; color:#7f7569; font-size:7px; letter-spacing:.1em; text-transform:uppercase; }
.outfit-item-arrow { color:var(--gold-soft); }
@keyframes outfit-reveal { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (max-width:380px) { .outfits-header { flex-direction:column; } .wardrobe-actions { width:100%; } .outfits-nav-button,.wardrobe-home-head .add-item-button { flex:1; min-width:0; } .outfit-window { height:195px; } }


/* Stage 9 — weather-aware outfit generator */
.outfit-generator { margin-top:22px; padding:16px; border-top:1px solid rgba(231,196,122,.16); border-bottom:1px solid rgba(231,196,122,.12); background:rgba(24,20,17,.72); }
.generator-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.generator-kicker { color:var(--gold); font-size:7px; letter-spacing:.22em; }
.generator-head h3,.generated-head h3 { margin:5px 0 0; color:var(--ivory); font:600 27px/.95 var(--serif); }
.location-button { height:31px; padding:0 9px; border:1px solid rgba(231,196,122,.2); background:transparent; color:#9d907f; font-size:7px; letter-spacing:.13em; cursor:pointer; }
.generator-form { margin-top:15px; }
.destination-field { position:relative; display:block; }
.destination-field input { width:100%; height:49px; padding:18px 12px 5px; border:1px solid rgba(231,196,122,.2); outline:none; background:#171411; color:var(--ivory); font:400 12px Inter,sans-serif; }
.destination-field span { position:absolute; left:12px; top:17px; color:#756b5f; font-size:8px; pointer-events:none; transition:transform .18s ease,font-size .18s ease,color .18s ease; }
.destination-field input:focus+span,.destination-field input:not(:placeholder-shown)+span { transform:translateY(-9px); font-size:6px; color:var(--gold); }
.weather-card { margin-top:9px; display:flex; align-items:center; gap:10px; min-height:58px; padding:8px 10px; border-left:2px solid var(--gold); background:#1c1815; transition:opacity .2s ease; }
.weather-card.is-loading { opacity:.5; }
.weather-symbol { color:var(--gold); font:26px var(--serif); }
.weather-card strong { display:block; color:var(--ivory); font:600 21px/1 var(--serif); }
.weather-card small { display:block; margin-top:4px; color:#7e7468; font-size:7px; letter-spacing:.08em; }
.generate-outfit-button { width:100%; height:46px; margin-top:10px; border:1px solid rgba(231,196,122,.36); background:#c89b50; color:#17120d; font-size:8px; font-weight:600; letter-spacing:.16em; cursor:pointer; transition:transform .12s ease,opacity .2s ease; }
.generate-outfit-button:active:not(:disabled) { transform:scale(.98); }
.generate-outfit-button:disabled { opacity:.4; cursor:not-allowed; }
.generate-outfit-button.is-loading { animation:generator-pulse 1s ease-in-out infinite; }
.generator-status { min-height:13px; margin:8px 0 0; color:#81776b; text-align:center; font-size:7px; }
.generator-status.is-error { color:#b38b78; }
.generated-outfit { margin-top:20px; padding:16px; border:1px solid rgba(231,196,122,.18); background:linear-gradient(145deg,#211b17,#151210); }
.generated-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.generated-weather-label { color:var(--gold-soft); font-size:7px; letter-spacing:.1em; }
.generated-items { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:14px; }
.generated-item { min-width:0; padding:7px; border:1px solid rgba(231,196,122,.12); background:#181411; color:var(--ivory); text-align:left; cursor:pointer; }
.generated-image { display:grid; place-items:center; height:150px; background:#211c18; overflow:hidden; color:rgba(231,196,122,.3); font:32px var(--serif); }
.generated-image img { width:100%; height:100%; object-fit:contain; }
.generated-item strong { display:block; margin-top:7px; font:600 16px/1 var(--serif); }
.generated-item small { display:block; margin-top:4px; color:#7f7569; font-size:7px; letter-spacing:.1em; text-transform:uppercase; }
.generated-reason { margin:13px 0; color:#a19689; font-size:9px; line-height:1.55; }
@keyframes generator-pulse { 50% { opacity:.65; } }
@media (max-width:380px) { .generated-image { height:130px; } }

/* Stage 10 — final loading, error, responsive and performance polish */
.global-loading {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  padding: 22px; background: rgba(10,9,8,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.global-loading[hidden], .offline-notice[hidden] { display: none; }
.global-loading-card {
  width: min(100%, 320px); display:flex; align-items:center; gap:15px; padding:17px 18px;
  border:1px solid rgba(231,196,122,.2); background:rgba(29,24,20,.92);
  box-shadow:0 20px 55px rgba(0,0,0,.45),0 0 28px rgba(212,168,87,.08);
}
.loading-orbit {
  width:38px; height:38px; flex:0 0 38px; border-radius:50%; position:relative;
  border:1px solid rgba(231,196,122,.12); border-top-color:var(--gold);
  box-shadow:0 0 18px rgba(212,168,87,.15); animation:loading-spin 1.4s linear infinite;
}
.loading-orbit::after { content:""; position:absolute; inset:7px; border:1px solid rgba(231,196,122,.22); border-bottom-color:var(--gold-soft); border-radius:50%; }
.loading-kicker { display:block; color:var(--gold); font-size:7px; letter-spacing:.2em; }
.global-loading-card strong { display:block; margin-top:4px; color:var(--ivory); font:600 20px/1 var(--serif); }
.global-loading-card small { display:block; margin-top:5px; color:#82786c; font-size:8px; line-height:1.4; }
.offline-notice {
  position:fixed; left:50%; bottom:calc(12px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:990;
  width:min(calc(100% - 24px),456px); padding:10px 13px; border:1px solid rgba(231,196,122,.2);
  background:#201b17; color:#b7aa99; text-align:center; font-size:8px; line-height:1.35; box-shadow:0 10px 28px rgba(0,0,0,.35);
}
body.is-busy { overflow:hidden; }
.skeleton-card { min-width:0; border:1px solid rgba(231,196,122,.12); background:#1b1714; overflow:hidden; }
.skeleton-image { aspect-ratio:.82; background:#211c18; }
.skeleton-lines { padding:11px 12px 13px; display:grid; gap:7px; }
.skeleton-lines i { display:block; height:8px; width:62%; background:rgba(231,196,122,.09); }
.skeleton-lines i + i { width:42%; height:6px; }
.outfit-skeleton .skeleton-image { aspect-ratio:.95; }
.shimmer { position:relative; overflow:hidden; }
.shimmer::after {
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(231,196,122,.07),transparent);
  animation:shimmer 1.8s ease-in-out infinite;
}
.load-error {
  grid-column:1/-1; display:flex; flex-direction:column; align-items:center; gap:7px; padding:30px 18px;
  border-top:1px solid rgba(231,196,122,.12); border-bottom:1px solid rgba(231,196,122,.12); text-align:center;
}
.load-error strong { color:var(--ivory); font:600 20px var(--serif); }
.load-error span { max-width:280px; color:#857a6d; font-size:8px; line-height:1.5; }
.load-error button { margin-top:4px; padding:8px 13px; border:1px solid rgba(231,196,122,.28); background:transparent; color:var(--gold-soft); font-size:7px; letter-spacing:.14em; cursor:pointer; }
.weather-card.is-loading { position:relative; overflow:hidden; opacity:1; }
.weather-card.is-loading::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(231,196,122,.05),transparent); transform:translateX(-100%); animation:shimmer 1.6s ease-in-out infinite; }
.generate-outfit-button.is-loading { position:relative; overflow:hidden; }
.generate-outfit-button.is-loading::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent); transform:translateX(-100%); animation:shimmer 1.5s ease-in-out infinite; }
.upload-submit:disabled, .login-button:disabled, .generate-outfit-button:disabled { cursor:wait; }
img { content-visibility:auto; }
@keyframes loading-spin { to { transform:rotate(360deg); } }
@keyframes shimmer { 100% { transform:translateX(100%); } }

@media (min-width:481px) {
  body { display:grid; place-items:center; padding:0 18px; }
  .app-shell { min-height:100svh; box-shadow:0 0 80px rgba(0,0,0,.28); }
}
@media (max-width:420px) {
  .next-screen { padding:24px 14px; }
  .wardrobe-home-head { gap:10px; }
  .wardrobe-actions { flex-shrink:0; }
  .outfit-generator { padding:14px; }
  .outfits-shell { padding-inline:13px; }
}
@media (max-width:340px) {
  .wardrobe-actions { flex-direction:column; align-items:stretch; }
  .wardrobe-home-head .add-item-button, .outfits-nav-button { width:100%; min-width:0; }
  .item-grid, .outfit-grid { gap:7px; }
  .generated-items { grid-template-columns:1fr 1fr; gap:6px; }
  .login-card { width:100%; padding-inline:18px; }
  .login-heading h1 { font-size:30px; }
  .photo-grid { gap:6px; }
  .photo-slot { min-height:116px; }
}
@media (prefers-reduced-motion: reduce) {
  .loading-orbit, .shimmer::after, .weather-card.is-loading::after, .generate-outfit-button.is-loading::after { animation:none !important; }
}