:root {
  --bg: #1b1a17;
  --panel: #232119;
  --panel-2: #2b2820;
  --brass: #c9a23f;
  --brass-dim: #8a713a;
  --text: #ece4d2;
  --muted: #9a9080;
  --border: #3a362b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Oswald', sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(201,162,63,0.08), transparent 60%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.015) 0px, transparent 2px, transparent 4px),
    var(--bg);
  display: flex;
  justify-content: center;
  padding: 52px 20px;
}

.wrap { width: 100%; max-width: 480px; }

header { margin-bottom: 24px; }
.tag {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 10px;
  font-weight: 500;
}
h1 {
  font-weight: 600;
  font-size: 30px;
  letter-spacing: 0.01em;
  margin: 0 0 12px;
  text-transform: uppercase;
}
.desc { font-size: 13.5px; color: var(--muted); line-height: 1.7; margin: 0; font-family: 'Space Mono', monospace; }
.desc code { color: var(--brass); background: rgba(201,162,63,0.1); padding: 1px 5px; font-size: 12px; }

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 22px;
  box-shadow: inset 0 0 0 1px rgba(201,162,63,0.06), 0 24px 50px -30px rgba(0,0,0,0.6);
}
.panel + .panel { margin-top: 16px; }
.panel strong { font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 13px; color: var(--brass); }

.pw-out { display: flex; gap: 8px; margin-bottom: 16px; margin-top: 14px; }
input[type=text], input[readonly] {
  flex: 1;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--brass);
  font-family: 'Space Mono', monospace;
  font-size: 15px;
  padding: 10px 12px;
}
input::placeholder { color: #595345; }
input:focus { outline: none; border-color: var(--brass-dim); }

button {
  background: var(--brass);
  color: #1b1a17;
  border: none;
  border-radius: 6px;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 12.5px;
  padding: 10px 16px;
  cursor: pointer;
}
button:hover { filter: brightness(1.1); }
button.ghost { background: transparent; border: 1px solid var(--brass-dim); color: var(--brass); }

.slider-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 12.5px; color: var(--muted); }
.slider-row input[type=range] { flex: 1; accent-color: var(--brass); }
.options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; font-size: 12px; color: var(--muted); }
.options label { display: flex; align-items: center; gap: 6px; }
.options input[type=checkbox] { accent-color: var(--brass); }

#check { width: 100%; margin: 12px 0 18px; }

.dial-wrap { display: flex; flex-direction: column; align-items: center; }
.dial { width: 220px; height: auto; overflow: visible; }
.dial-track { fill: none; stroke: var(--border); stroke-width: 10; stroke-linecap: round; }
.dial-fill { fill: none; stroke: var(--brass-dim); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .3s ease, stroke .3s ease; }
#needle-group { transform-origin: 70px 70px; transition: transform .3s ease; }
.needle { stroke: var(--text); stroke-width: 3; stroke-linecap: round; }
.hub { fill: var(--brass); }

.strength-label { margin-top: 6px; font-family: 'Space Mono', monospace; font-size: 13px; color: var(--muted); text-align: center; }
.issues { font-size: 12px; color: var(--muted); margin-top: 8px; text-align: center; font-family: 'Space Mono', monospace; }

footer { margin-top: 24px; text-align: center; }
footer a { color: var(--muted); font-size: 12px; text-decoration: none; font-family: 'Space Mono', monospace; }
footer a:hover { color: var(--brass); }

@media (prefers-reduced-motion: reduce) {
  .dial-fill, #needle-group { transition: none; }
}