/* ============================================================
   Virtual Fitting Room — shared design system ("Boutique Noir")
   ============================================================ */
:root{
  --bg:#0c0b0a; --bg-2:#151210;
  --ink:#f4efe9; --ink-soft:rgba(244,239,233,.62); --ink-faint:rgba(244,239,233,.38);
  --gold:#e6cca0; --gold-2:#c9a875; --gold-glow:rgba(230,204,160,.35);
  --line:rgba(244,239,233,.10); --line-2:rgba(244,239,233,.20);
  --card:rgba(255,255,255,.045); --card-2:rgba(255,255,255,.08);
  --danger:#e5867a;
  --radius:22px; --radius-sm:14px;
  --serif:'Cormorant Garamond','Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --shadow:0 24px 70px -24px rgba(0,0,0,.75);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0; color:var(--ink); font-family:var(--sans);
  background:
    radial-gradient(1200px 700px at 78% -8%, #221b14 0%, rgba(34,27,20,0) 60%),
    radial-gradient(900px 600px at 0% 100%, #191411 0%, rgba(25,20,17,0) 55%),
    linear-gradient(160deg, var(--bg-2), var(--bg));
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* faint film grain for depth */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.035; z-index:9999;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
button{font-family:inherit}
img{display:block}

/* ---------- brand ---------- */
.wordmark{font-family:var(--serif); font-weight:600; letter-spacing:.42em;
  text-transform:uppercase; color:var(--ink)}
.monogram{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;
  border:1px solid var(--gold-2); color:var(--gold);
  font-family:var(--serif); font-size:22px; font-weight:600;
  box-shadow:inset 0 0 20px rgba(230,204,160,.12);
}
.brandbar{display:flex;align-items:center;gap:16px}
.brandbar .tag{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-faint)}

/* ---------- buttons ---------- */
.btn{
  border:1px solid var(--line-2); background:var(--card); color:var(--ink);
  padding:16px 30px; border-radius:100px; font-size:16px; letter-spacing:.06em;
  cursor:pointer; transition:.25s ease; backdrop-filter:blur(6px); display:inline-flex;
  align-items:center; gap:12px;
}
.btn:hover{background:var(--card-2); border-color:var(--line-2)}
.btn:active{transform:scale(.97)}
.btn-gold{
  border:none; color:#241b10; font-weight:600; letter-spacing:.08em;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  box-shadow:0 12px 34px -10px var(--gold-glow);
}
.btn-gold:hover{filter:brightness(1.06)}
.btn-ghost{background:transparent;border-color:var(--line)}
.btn-ghost:hover{background:var(--card)}
.btn[disabled]{opacity:.4;pointer-events:none}

/* ---------- chips / tags ---------- */
.tagpill{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);border:1px solid rgba(230,204,160,.3);border-radius:100px;
  padding:4px 12px;background:rgba(230,204,160,.06)}

/* ---------- generic overlay ---------- */
.overlay{position:fixed;inset:0;z-index:50;display:grid;place-items:center;
  background:radial-gradient(1000px 700px at 50% 20%,rgba(20,16,12,.6),rgba(8,7,6,.94));
  backdrop-filter:blur(14px);animation:fade .5s ease both;padding:6vh 5vw}

@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(.8)}60%{transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
@keyframes breathe{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
@keyframes shimmer{100%{background-position:200% 0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes flash{0%{opacity:0}12%{opacity:.95}100%{opacity:0}}

/* shimmering loader text */
.shimmer{
  background:linear-gradient(100deg,var(--ink-faint) 20%,var(--ink) 45%,var(--ink-faint) 70%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 2.2s linear infinite;
}
.ring-spin{width:56px;height:56px;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--gold);animation:spin 1s linear infinite}

.dot-breathe{width:12px;height:12px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 24px 6px var(--gold-glow);animation:breathe 2.4s ease-in-out infinite}

/* ---------- camera picker (mirror + studio) ---------- */
.campick{position:fixed;right:20px;bottom:18px;z-index:60;font-size:13px}
.cam-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  color:var(--ink-soft);background:rgba(12,11,10,.55);border:1px solid var(--line);
  backdrop-filter:blur(8px);opacity:.45;transition:.25s}
.cam-btn:hover{opacity:1;color:var(--gold);border-color:var(--line-2)}
.cam-panel{position:absolute;right:0;bottom:56px;width:290px;padding:16px;border-radius:18px;
  background:rgba(16,14,12,.94);border:1px solid var(--line-2);box-shadow:var(--shadow);
  backdrop-filter:blur(14px);animation:rise .22s ease both}
.cam-panel[hidden]{display:none}
.cam-h{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.cam-list{display:flex;flex-direction:column;gap:6px;max-height:44vh;overflow:auto}
.cam-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  padding:10px 12px;border-radius:12px;color:var(--ink-soft);font-size:13px;line-height:1.35;
  background:var(--card);border:1px solid transparent;transition:.2s}
.cam-item:hover{background:var(--card-2);color:var(--ink)}
.cam-item.on{border-color:rgba(230,204,160,.45);color:var(--ink)}
.cam-item.busy{opacity:.5;pointer-events:none}
.cam-item .dot{width:7px;height:7px;border-radius:50%;background:var(--line-2);flex:none}
.cam-item.on .dot{background:var(--gold);box-shadow:0 0 10px 2px var(--gold-glow)}
.cam-item .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cam-none{color:var(--ink-faint);line-height:1.6;padding:6px 2px}
.cam-meta{margin-top:12px;color:var(--ink-faint);font-size:12px;letter-spacing:.04em}
.cam-meta .ok{color:#8fd39a}.cam-meta .bad{color:var(--danger)}
.cam-foot{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.cam-mini{cursor:pointer;text-decoration:none;font:inherit;font-size:12px;letter-spacing:.04em;
  padding:7px 13px;border-radius:100px;color:var(--ink-soft);background:transparent;
  border:1px solid var(--line);transition:.2s}
.cam-mini:hover{background:var(--card);color:var(--ink)}