:root{
  --bg:#0a0a0a;
  --bg-panel:#141414;
  --bg-input:#1c1c1c;
  --gold:#c9a876;
  --gold-dim:#8f7a55;
  --white:#f5f5f3;
  --grey:#9a9a94;
  --danger:#c96a5a;
  --ok:#7fae7f;
  --radius:2px;
  --maxw:640px;
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--bg);
  color:var(--white);
  font-family:'Work Sans',system-ui,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.logo{
  font-family:'Oswald',system-ui,sans-serif;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-weight:600;
  margin:0 0 .4em 0;
}

a{color:var(--gold);}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 24px;
  border-bottom:1px solid #232323;
}

.logo{font-size:22px;color:var(--white);letter-spacing:.06em;}
.logo span{color:var(--gold);}

.topnav{display:flex;gap:18px;font-size:14px;}
.topnav a{color:var(--grey);text-decoration:none;}
.topnav a:hover{color:var(--gold);}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:40px 20px 90px;
}

.wrap.wide{max-width:920px;}

.intro{
  background:var(--bg-panel);
  border:1px solid #232323;
  border-left:3px solid var(--gold);
  padding:20px 22px;
  border-radius:var(--radius);
  margin-bottom:34px;
  color:#cfcfca;
  font-size:14.5px;
}

.section-title{
  font-size:13px;
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.12em;
  margin:38px 0 16px;
  padding-bottom:8px;
  border-bottom:1px solid #232323;
}
.section-title:first-of-type{margin-top:0;}

.field{margin-bottom:20px;}
.field label{
  display:block;
  font-size:14.5px;
  margin-bottom:6px;
  color:var(--white);
}
.field .hint{
  display:block;
  font-size:12.5px;
  color:var(--grey);
  margin-top:5px;
}
.field .req{color:var(--danger);font-size:12px;margin-left:6px;}

input[type=text],input[type=email],input[type=number],input[type=tel],textarea,select{
  width:100%;
  background:var(--bg-input);
  border:1px solid #2c2c2c;
  color:var(--white);
  padding:11px 12px;
  border-radius:var(--radius);
  font-size:15px;
  font-family:inherit;
}
input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:var(--gold);
}
textarea{resize:vertical;min-height:80px;}

.radio-row{display:flex;gap:22px;margin-top:4px;}
.radio-row label{display:flex;align-items:center;gap:7px;font-size:14.5px;color:var(--white);margin:0;}
.radio-row input{width:auto;}

.file-field{
  border:1px dashed #333;
  border-radius:var(--radius);
  padding:16px;
  background:var(--bg-input);
}
.file-field input{border:none;background:none;padding:0;color:var(--grey);}
.file-preview{margin-top:10px;max-width:140px;border-radius:var(--radius);display:none;}
.file-preview.show{display:block;}

.scale-row{display:flex;align-items:center;gap:12px;}
.scale-row input[type=range]{flex:1;accent-color:var(--gold);}
.scale-val{width:28px;text-align:center;color:var(--gold);font-weight:600;}

button,.btn{
  display:inline-block;
  background:var(--gold);
  color:#141108;
  border:none;
  padding:14px 22px;
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:14px;
  font-weight:600;
  border-radius:var(--radius);
  cursor:pointer;
  text-decoration:none;
  text-align:center;
}
button:hover,.btn:hover{background:#dbb98a;}
button.secondary,.btn.secondary{
  background:transparent;
  color:var(--gold);
  border:1px solid var(--gold-dim);
}
button.secondary:hover{background:#1c1a14;}
button:disabled{opacity:.4;cursor:not-allowed;}

.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;}

.card{
  background:var(--bg-panel);
  border:1px solid #232323;
  border-radius:var(--radius);
  padding:20px 22px;
  margin-bottom:14px;
}

.code-display{
  font-family:'Oswald',monospace;
  font-size:32px;
  letter-spacing:.12em;
  color:var(--gold);
  text-align:center;
  padding:18px;
  border:1px solid var(--gold-dim);
  border-radius:var(--radius);
  margin:18px 0;
}

.toast{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  background:#1c1c1c;
  border:1px solid var(--gold-dim);
  color:var(--white);
  padding:13px 20px;
  border-radius:var(--radius);
  font-size:14px;
  max-width:90%;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
  z-index:50;
}

.badge{
  display:inline-block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:3px 8px;
  border-radius:var(--radius);
  background:#1c1a14;
  color:var(--gold);
  border:1px solid var(--gold-dim);
}
.badge.mock{color:var(--danger);border-color:var(--danger);}

table{width:100%;border-collapse:collapse;font-size:14px;}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid #232323;}
th{color:var(--grey);font-weight:500;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;}
.delta-up{color:var(--ok);}
.delta-down{color:var(--danger);}

.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:640px){.compare-grid{grid-template-columns:1fr;}}

.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px;}
.photo-grid img{width:100%;border-radius:var(--radius);border:1px solid #232323;}

.photo-grid.clickable .photo-thumb{cursor:pointer;display:flex;flex-direction:column;gap:5px;}
.photo-grid.clickable .photo-thumb img{transition:border-color .15s;}
.photo-grid.clickable .photo-thumb:hover img{border-color:var(--gold);}
.photo-thumb-label{font-size:10.5px;color:var(--grey);text-align:center;text-transform:uppercase;letter-spacing:.06em;}

.photo-compare-panel img{
  width:100%;
  border-radius:var(--radius);
  border:1px solid #232323;
  cursor:zoom-in;
  margin-top:10px;
}

.fullscreen-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.92);
  z-index:100;
  align-items:center;
  justify-content:center;
  padding:30px;
  cursor:zoom-out;
}
.fullscreen-overlay.show{display:flex;}
.fullscreen-overlay img{max-width:100%;max-height:100%;border-radius:var(--radius);}

.chart-card{margin-bottom:22px;}
.chart-wrap{position:relative;height:280px;margin-top:6px;}

.empty{
  text-align:center;
  color:var(--grey);
  padding:50px 20px;
  border:1px dashed #2c2c2c;
  border-radius:var(--radius);
}

footer{
  text-align:center;
  color:#5a5a55;
  font-size:12px;
  padding:30px 20px;
}

.progress-track{height:3px;background:#232323;border-radius:2px;margin-bottom:30px;overflow:hidden;}
.progress-fill{height:100%;background:var(--gold);width:0%;transition:width .3s;}