/* ─── Fonts ─────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/cormorant-garamond-300.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  src: url('fonts/cormorant-garamond-300-italic.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/cormorant-garamond-400.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/cormorant-garamond-400-italic.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/cormorant-garamond-500.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  src: url('fonts/cormorant-garamond-500-italic.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/inter-300.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/inter-400.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/inter-500.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/inter-600.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/noto-sans-sc-400.woff2') format('woff2');
  font-display: swap;
}

/* ─── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --bg:         #0d0d0d;
  --bg-panel:   #161616;
  --bg-card:    #1e1e1e;
  --bg-card-h:  #252525;
  --text:       #f0ece4;
  --text2:      rgba(240,236,228,.65);
  --text3:      rgba(240,236,228,.38);
  --gold:       #c9a84c;
  --gold-l:     #e8c97a;
  --gold-d:     #9a7a2e;
  --gold-f:     rgba(201,168,76,.08);
  --gold-b:     rgba(201,168,76,.22);
  --gg:         linear-gradient(135deg, #7a5a1e 0%, #e8c97a 45%, #c9a84c 100%);
  --border:     rgba(201,168,76,.16);
  --border-s:   rgba(255,255,255,.06);

  --fs: 'Cormorant Garamond', Georgia, serif;
  --fn: 'Inter', 'Noto Sans SC', system-ui, sans-serif;

  --tab-h:      52px;
  --sidebar-w:  230px;
  --bar-h:      62px;
  --radius:     10px;
  --ease:       cubic-bezier(.16,1,.3,1);
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--fn);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
button { cursor: pointer; border: none; background: none; color: inherit; font: inherit; }
select { font: inherit; }
input  { font: inherit; }

/* ─── Screens ────────────────────────────────────────────────────────────── */
#screen-landing,
#screen-loading,
#camera-error-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  z-index: 100;
}
[hidden] { display: none !important; }

/* ─── Landing screen ──────────────────────────────────────────────────────── */
#screen-landing {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201,168,76,.08) 0%, transparent 70%),
    var(--bg);
}
.landing-inner {
  text-align: center;
  padding: 2rem;
  max-width: 480px;
}
.landing-brand {
  font-family: var(--fs);
  font-weight: 300;
  font-size: 3.4rem;
  letter-spacing: .32em;
  background: var(--gg);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: .5rem;
}
.landing-title {
  font-family: var(--fs);
  font-weight: 300;
  font-size: 2rem;
  color: var(--text);
  letter-spacing: .04em;
  margin-bottom: 1rem;
}
.landing-sub {
  font-size: .95rem;
  color: var(--text2);
  line-height: 1.6;
  margin-bottom: 2.5rem;
  letter-spacing: .02em;
}
.landing-privacy {
  font-size: .78rem;
  color: var(--text3);
  margin-top: 1.2rem;
  letter-spacing: .01em;
}

/* ─── Primary button ─────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 2.8rem;
  background: var(--gg);
  color: #1a1200;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: opacity .2s, transform .2s var(--ease);
}
.btn-primary:hover  { opacity: .88; transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); opacity: 1; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .7rem 1.6rem;
  border: 1px solid var(--border);
  color: var(--gold);
  font-size: .88rem;
  letter-spacing: .08em;
  border-radius: var(--radius);
  transition: background .15s, border-color .15s;
}
.btn-ghost:hover { background: var(--gold-f); border-color: var(--gold); }

.btn-lang {
  font-size: .78rem;
  color: var(--text3);
  letter-spacing: .08em;
  padding: .4rem .8rem;
  border: 1px solid var(--border-s);
  border-radius: 20px;
  margin-top: .8rem;
  transition: color .15s, border-color .15s;
}
.btn-lang:hover { color: var(--gold-l); border-color: var(--border); }

/* ─── Loading screen ──────────────────────────────────────────────────────── */
#screen-loading {
  background: var(--bg);
}
.loading-inner {
  text-align: center;
  padding: 2rem;
  width: 340px;
}
.loading-brand {
  font-family: var(--fs);
  font-weight: 300;
  font-size: 2.8rem;
  letter-spacing: .32em;
  background: var(--gg);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 2rem;
}
.loading-tagline {
  font-family: var(--fs);
  font-size: 1.1rem;
  color: var(--text2);
  letter-spacing: .06em;
  margin-bottom: 1.5rem;
}
.loading-bar-track {
  height: 3px;
  background: rgba(201,168,76,.15);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: .8rem;
}
#loading-progress {
  height: 100%;
  width: 0%;
  background: var(--gg);
  border-radius: 3px;
  transition: width .35s var(--ease);
}
.loading-status {
  font-size: .8rem;
  color: var(--text3);
  letter-spacing: .05em;
}

/* ─── Camera error ────────────────────────────────────────────────────────── */
.camera-error-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  z-index: 100;
}
.camera-error-inner {
  text-align: center;
  padding: 2rem;
  max-width: 400px;
}
.error-icon {
  font-size: 3rem;
  color: var(--gold);
  margin-bottom: 1rem;
}
.error-msg {
  font-size: 1rem;
  color: var(--text2);
  line-height: 1.6;
  margin-bottom: 2rem;
}

/* ─── Main try-on layout ──────────────────────────────────────────────────── */
#screen-main {
  display: grid;
  grid-template-rows: var(--tab-h) 1fr var(--bar-h);
  grid-template-columns: 1fr var(--sidebar-w);
  grid-template-areas:
    "tabs    tabs"
    "viewport sidebar"
    "bar     bar";
  height: 100dvh;
  height: 100vh; /* fallback */
  background: var(--bg);
}

/* ─── Mode tabs ──────────────────────────────────────────────────────────── */
#mode-tabs {
  grid-area: tabs;
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: 0 1rem;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-s);
  position: relative;
  z-index: 10;
}
.tab {
  padding: .4rem 1.2rem;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text3);
  border-radius: 6px;
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.tab:hover  { color: var(--text2); background: var(--gold-f); }
.tab.active {
  color: var(--gold);
  background: var(--gold-f);
  border: 1px solid var(--border);
}
.model-badge {
  font-size: .72rem;
  color: var(--gold);
  letter-spacing: .08em;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity:.4 } 50% { opacity:1 } }

/* Engine mode indicator */
.engine-badge {
  margin-left: auto;
  font-size: .72rem;
  letter-spacing: .08em;
  padding: .2rem .65rem;
  border-radius: 10px;
  font-weight: 500;
  flex-shrink: 0;
}
.engine-ai {
  background: rgba(100,220,120,.12);
  color: #60dd80;
  border: 1px solid rgba(100,220,120,.25);
}
.engine-ar {
  background: var(--gold-f);
  color: var(--gold);
  border: 1px solid var(--border);
}

/* ─── Viewport ────────────────────────────────────────────────────────────── */
#viewport {
  grid-area: viewport;
  position: relative;
  overflow: hidden;
  background: #000;
}
#video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scaleX(-1); /* centered + mirror */
  display: block;
  /* Width/height set by JS via syncCanvasToVideo() to match object-fit:cover */
}
#overlay {
  position: absolute;
  /* inset/size set by JS via syncCanvasToVideo() to exactly match video */
  pointer-events: none;
  /* NO scaleX(-1) — mirror is handled in JS landmark math */
}

/* ─── Guide text ─────────────────────────────────────────────────────────── */
#guide-text {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(13,13,13,.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text2);
  font-size: .8rem;
  letter-spacing: .05em;
  padding: .45rem 1rem;
  border-radius: 20px;
  border: 1px solid var(--border-s);
  white-space: nowrap;
  pointer-events: none;
}

/* ─── FPS counter ────────────────────────────────────────────────────────── */
#fps-counter {
  position: absolute;
  top: .6rem;
  left: .6rem;
  background: rgba(0,0,0,.6);
  color: #00ff88;
  font-size: .75rem;
  font-family: monospace;
  padding: .25rem .5rem;
  border-radius: 4px;
  pointer-events: none;
}

/* ─── Finger selector ────────────────────────────────────────────────────── */
#finger-selector {
  position: absolute;
  top: .7rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .3rem;
  background: rgba(13,13,13,.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-s);
  border-radius: 20px;
  padding: .3rem .5rem;
}
.finger-btn {
  font-size: .72rem;
  letter-spacing: .08em;
  padding: .25rem .7rem;
  border-radius: 14px;
  color: var(--text3);
  transition: color .15s, background .15s;
}
.finger-btn:hover  { color: var(--text2); background: var(--gold-f); }
.finger-btn.active { color: var(--gold);  background: var(--gold-f); border: 1px solid var(--border); }

/* ─── Product sidebar ────────────────────────────────────────────────────── */
#product-sidebar {
  grid-area: sidebar;
  background: var(--bg-panel);
  border-left: 1px solid var(--border-s);
  overflow-y: auto;
  padding: .75rem .5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
#product-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.product-card {
  background: var(--bg-card);
  border: 1px solid var(--border-s);
  border-radius: var(--radius);
  padding: .6rem;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s var(--ease);
}
.product-card:hover  { background: var(--bg-card-h); border-color: var(--border); }
.product-card.active { background: var(--bg-card-h); border-color: var(--gold);
                       box-shadow: 0 0 0 1px var(--gold-b); }
.product-card:hover  { transform: translateY(-1px); }
.product-thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  display: block;
  margin-bottom: .4rem;
}
.product-name {
  font-family: var(--fs);
  font-size: .95rem;
  color: var(--text2);
  text-align: center;
  line-height: 1.3;
}
.product-price {
  font-size: .72rem;
  color: var(--gold);
  text-align: center;
  margin-top: .15rem;
  letter-spacing: .05em;
}

/* ─── Bottom bar ─────────────────────────────────────────────────────────── */
#bottom-bar {
  grid-area: bar;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 0 1rem;
  background: var(--bg-panel);
  border-top: 1px solid var(--border-s);
}
.bar-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: .4rem .8rem;
  border-radius: 8px;
  color: var(--text3);
  transition: color .15s, background .15s;
  flex-shrink: 0;
}
.bar-btn:hover { color: var(--gold); background: var(--gold-f); }
.bar-icon  { font-size: 1.1rem; line-height: 1; }
.bar-label { font-size: .68rem; letter-spacing: .06em; }
.bar-lang  { font-size: .78rem; flex-direction: row; gap: .3rem; }
.bar-camera {
  margin-left: auto;
}
#camera-select {
  background: var(--bg-card);
  border: 1px solid var(--border-s);
  color: var(--text2);
  font-size: .75rem;
  padding: .35rem .5rem;
  border-radius: 6px;
  max-width: 140px;
  cursor: pointer;
}
#camera-select:focus { outline: 1px solid var(--border); }

/* ─── Panels (settings, compare, snapshot) ───────────────────────────────── */
#settings-panel,
#snapshot-preview,
#compare-panel {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(10,10,10,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 400px;
  margin-bottom: 1.2rem;
}
.panel-header h2 {
  font-family: var(--fs);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--gold);
  letter-spacing: .06em;
}
.btn-close {
  font-size: 1.1rem;
  color: var(--text3);
  padding: .3rem .6rem;
  border-radius: 6px;
  transition: color .15s;
}
.btn-close:hover { color: var(--text); }

/* Settings form */
.panel-body {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.setting-row {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: .85rem;
  color: var(--text2);
}
.setting-row span:first-child { min-width: 110px; flex-shrink: 0; }
.setting-row input[type="range"] { flex: 1; accent-color: var(--gold); }
.slider-val { min-width: 46px; text-align: right; color: var(--gold); font-size: .8rem; }
.setting-check {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .85rem;
  color: var(--text2);
  cursor: pointer;
}
.setting-check input { accent-color: var(--gold); width: 16px; height: 16px; cursor: pointer; }
.setting-divider { height: 1px; background: var(--border-s); }
.setting-hint {
  font-size: .72rem;
  color: var(--text3);
  letter-spacing: .04em;
  line-height: 1.5;
}

/* Snapshot preview */
#snapshot-preview {
  gap: 1rem;
}
.snap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 600px;
}
.snap-header h2 {
  font-family: var(--fs);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--gold);
  letter-spacing: .06em;
}
#snapshot-preview canvas {
  max-width: 100%;
  max-height: 50vh;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.snap-actions {
  display: flex;
  gap: .8rem;
}

/* Compare panel */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  width: 100%;
  max-width: 900px;
  margin-bottom: 1rem;
}
.compare-grid canvas {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #111;
}
.compare-actions {
  display: flex;
  gap: .6rem;
}

/* ─── Responsive: mobile / tablet ────────────────────────────────────────── */
@media (max-width: 700px) {
  :root {
    --sidebar-w: 0px;
    --tab-h: 46px;
    --bar-h: 56px;
  }

  #screen-main {
    grid-template-rows: var(--tab-h) 1fr auto var(--bar-h);
    grid-template-columns: 1fr;
    grid-template-areas:
      "tabs"
      "viewport"
      "sidebar"
      "bar";
  }

  #product-sidebar {
    border-left: none;
    border-top: 1px solid var(--border-s);
    height: 120px;
    overflow-y: hidden;
    overflow-x: auto;
    padding: .5rem .75rem;
  }

  #product-list {
    flex-direction: row;
    gap: .5rem;
    height: 100%;
  }

  .product-card {
    min-width: 80px;
    flex-shrink: 0;
  }

  .product-thumb {
    height: 60px;
  }

  #guide-text {
    font-size: .72rem;
    bottom: .6rem;
  }

  .tab { padding: .3rem .8rem; font-size: .75rem; }

  .bar-label { display: none; }
  .bar-btn   { padding: .4rem .6rem; }
}

@media (max-width: 400px) {
  .landing-brand { font-size: 2.6rem; }
  .landing-title { font-size: 1.5rem; }
  #camera-select { max-width: 100px; }
}