:root{
  --bg:#0c0b0e;
  --bg2:#141218;
  --card:#1a1720;
  --line:#2b2733;
  --text:#ece7de;
  --muted:#9a929f;
  --gold:#c9a45c;
  --gold2:#e3c98c;
  --err:#e06c6c;
  --ok:#7fc98c;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:Georgia,'Times New Roman',serif;
  min-height:100vh;
  display:flex;flex-direction:column;
}
main{flex:1;width:100%;max-width:960px;margin:0 auto;padding:2rem 1.25rem}
.hidden{display:none !important}

/* Topbar */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.5rem;border-bottom:1px solid var(--line);
  background:var(--bg2);position:sticky;top:0;z-index:10;
}
.brand{font-size:1.2rem;letter-spacing:.35em;cursor:pointer;font-weight:bold}
.brand span{color:var(--gold)}
.brand.small{font-size:.85rem}
.nav{display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap}
.nav a{color:var(--muted);text-decoration:none;font-size:.9rem;letter-spacing:.05em}
.nav a:hover{color:var(--gold2)}
.nav a.cta{color:var(--gold);border:1px solid var(--gold);padding:.35rem .9rem;border-radius:2px}
#nav-authed{display:inline-flex;gap:1.1rem;align-items:center}

/* Hero */
.hero{text-align:center;padding:4rem 0 3rem}
.eyebrow{color:var(--gold);letter-spacing:.3em;text-transform:uppercase;font-size:.75rem;margin-bottom:1.2rem}
.hero h1{font-size:2.4rem;font-weight:normal;line-height:1.25;margin-bottom:1.2rem}
.hero h1 em{color:var(--gold2)}
.lede{color:var(--muted);max-width:560px;margin:0 auto 2rem;line-height:1.7}
.hero-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* Buttons */
.btn{
  font-family:inherit;font-size:.95rem;letter-spacing:.08em;
  padding:.7rem 1.6rem;border-radius:2px;cursor:pointer;border:1px solid transparent;
}
.btn.gold{background:var(--gold);color:#151218;border-color:var(--gold)}
.btn.gold:hover{background:var(--gold2)}
.btn.ghost{background:transparent;color:var(--gold);border-color:var(--gold)}
.btn.ghost:hover{color:var(--gold2);border-color:var(--gold2)}
.btn.wide{width:100%}
.btn:disabled{opacity:.5;cursor:wait}

/* Dimensions strip on landing */
.dims-strip{border-top:1px solid var(--line);padding-top:2.5rem;text-align:center}
.dims-strip h3{letter-spacing:.25em;text-transform:uppercase;font-size:.85rem;color:var(--gold);margin-bottom:1.5rem}
.dims-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.75rem}
.dims-grid .dim-chip{
  border:1px solid var(--line);background:var(--card);
  padding:.75rem .5rem;font-size:.8rem;color:var(--muted);letter-spacing:.05em;
}

/* Cards & forms */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:4px;
  padding:2rem;margin:1rem auto;max-width:720px;
}
.card.narrow{max-width:440px}
.card h2{font-weight:normal;letter-spacing:.05em;margin-bottom:.4rem}
label{display:block;margin:1rem 0 .25rem;color:var(--muted);font-size:.85rem;letter-spacing:.05em}
input,textarea{
  width:100%;padding:.65rem .8rem;margin-top:.3rem;
  background:var(--bg);border:1px solid var(--line);border-radius:2px;
  color:var(--text);font-family:inherit;font-size:.95rem;
}
input:focus,textarea:focus{outline:none;border-color:var(--gold)}
form .btn{margin-top:1.4rem}

.muted{color:var(--muted);line-height:1.6}
.small{font-size:.8rem;margin-top:1rem}
.error{color:var(--err);margin-top:.9rem;font-size:.9rem;line-height:1.5}
.success{color:var(--ok);margin-top:1rem;font-size:1rem;line-height:1.6}
a{color:var(--gold)}

/* Interview */
.iv-progress{height:4px;background:var(--line);border-radius:2px;margin:1.5rem 0 .5rem;overflow:hidden}
#iv-progress-bar{height:100%;width:0;background:var(--gold);transition:width .4s ease}
.iv-count{color:var(--muted);font-size:.8rem;letter-spacing:.1em;margin-bottom:1rem}
.iv-question{font-weight:normal;font-size:1.25rem;line-height:1.5;margin-bottom:1rem;color:var(--gold2)}
.iv-actions{display:flex;gap:1rem;margin-top:1rem;flex-wrap:wrap}
#btn-voice.listening{border-color:var(--err);color:var(--err)}
#iv-live-model{margin-top:2rem}

/* Dimension bars */
.dim-bars{margin-top:1.5rem}
.dim-row{margin-bottom:1rem}
.dim-row .dim-label{display:flex;justify-content:space-between;font-size:.85rem;color:var(--muted);letter-spacing:.05em;margin-bottom:.3rem}
.dim-row .dim-label b{color:var(--text);font-weight:normal}
.dim-track{height:8px;background:var(--bg);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.dim-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2));width:0;transition:width .6s ease}

/* Matches */
.match-card{
  border:1px solid var(--line);background:var(--bg2);border-radius:4px;
  padding:1.25rem;margin-top:1rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.match-card .m-name{font-size:1.1rem;color:var(--gold2);letter-spacing:.05em}
.match-card .m-dims{color:var(--muted);font-size:.85rem;margin-top:.4rem;line-height:1.5}
.match-score{
  min-width:84px;text-align:center;align-self:center;
  border:1px solid var(--gold);border-radius:50%;width:84px;height:84px;
  display:flex;flex-direction:column;justify-content:center;
}
.match-score .n{font-size:1.3rem;color:var(--gold)}
.match-score .t{font-size:.6rem;letter-spacing:.15em;color:var(--muted);text-transform:uppercase}

.footer{
  border-top:1px solid var(--line);padding:1.5rem;text-align:center;
  display:flex;flex-direction:column;gap:.5rem;align-items:center;background:var(--bg2);
}

@media (max-width:600px){
  .hero h1{font-size:1.7rem}
  .card{padding:1.25rem}
  .topbar{flex-direction:column;gap:.75rem}
}