:root {
  --ink-950: #0c0b09;
  --ink-900: #141210;
  --ink-800: #1c1915;
  --cream: #f3ece0;
  --brass: #c4a574;
  --brass-light: #d8bf91;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Segoe UI", Manrope, Helvetica, Arial, sans-serif;
  color: var(--cream);
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(196,165,116,.16), transparent),
    linear-gradient(180deg, #0c0b09 0%, #141210 50%, #0c0b09 100%);
}
a { color: var(--brass); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 2rem 1.25rem 3rem; }
.display {
  font-family: Impact, "Arial Narrow", Haettenschweiler, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.eyebrow { color: var(--brass); letter-spacing: .28em; font-size: .8rem; }
.muted { color: rgba(243,236,224,.65); }
.card {
  border: 1px solid rgba(196,165,116,.3);
  background: rgba(20,18,16,.9);
  border-radius: 12px;
  padding: 1.1rem;
}
.field {
  height: 40px;
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(243,236,224,.15);
  background: var(--ink-800);
  color: var(--cream);
  padding: 0 .75rem;
  font-size: .95rem;
}
textarea.field { height: auto; min-height: 88px; padding: .65rem .75rem; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border: 0;
  border-radius: 8px;
  padding: 0 1rem;
  height: 40px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-brass { background: var(--brass); color: var(--ink-950); }
.btn-cream { background: var(--cream); color: var(--ink-950); }
.btn-ok { background: #059669; color: #fff; }
.btn-ghost { background: transparent; color: rgba(243,236,224,.7); border: 1px solid rgba(243,236,224,.15); }
.grid-form {
  display: grid;
  gap: .75rem;
  grid-template-columns: 6.5rem 9rem 1fr auto;
}
@media (max-width: 800px) {
  .grid-form { grid-template-columns: 1fr; }
}
.badge {
  display: inline-block;
  border-radius: 999px;
  padding: .15rem .6rem;
  font-size: .75rem;
  border: 1px solid rgba(196,165,116,.35);
  color: var(--brass);
  background: rgba(196,165,116,.12);
}
.layout { display: grid; gap: 1.25rem; grid-template-columns: 1.25fr .75fr; margin-top: 1.5rem; }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }
.msg {
  margin-top: 1rem;
  border: 1px solid rgba(196,165,116,.35);
  background: rgba(196,165,116,.1);
  color: var(--brass);
  border-radius: 8px;
  padding: .65rem .8rem;
}
.login-wrap { max-width: 420px; margin: 12vh auto; padding: 0 1.25rem; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
ul.clean { margin: .6rem 0 0; padding-left: 1rem; color: rgba(243,236,224,.65); }
dl.kv { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 1rem 0 0; }
dl.kv dt { color: rgba(243,236,224,.45); font-size: .8rem; }
dl.kv dd { margin: .15rem 0 0; }
.hidden { display: none !important; }