@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
  --asphalt: #1D2D45;
  --paper: #F6F7FA;
  --paper-2: #EBEEF3;
  --ink: #1D2D45;
  --slate: #5B6270;
  --signal: #A8916B;
  --signal-deep: #8A7454;
  --route: #435773;
  --safety: #1F7A4D;
  --safety-tint: #E5F3EA;
  --danger: #C0362C;
  --danger-tint: #FCEBEA;
  --line: #DCE1EA;
  --radius: 14px;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: 'Inter', sans-serif; background: var(--paper); color: var(--ink);
  min-height: 100vh; display: flex; flex-direction: column;
}
h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; margin: 0; color: var(--ink); }
.mono { font-family: 'IBM Plex Mono', monospace; }
a { color: var(--route); }

.topbar {
  background: rgba(255,255,255,0.92); border-bottom: 1px solid var(--line);
  padding: 14px 24px; display: flex; align-items: center; gap: 10px;
}
.topbar .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.topbar .brand img { height: 32px; width: auto; }
.topbar .brand span { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 15px; color: var(--ink); }

.wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 32px; width: 100%; max-width: 400px; box-shadow: 0 1px 2px rgba(29,45,69,0.04);
}
.card.wide { max-width: 480px; }
.card h1 { font-size: 21px; margin-bottom: 6px; }
.card .sub { font-size: 13.5px; color: var(--slate); margin-bottom: 24px; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.field input, .field textarea {
  width: 100%; padding: 11px 13px; border-radius: 9px; border: 1px solid var(--line);
  font-family: 'Inter', sans-serif; font-size: 14px; background: #fff; color: var(--ink);
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--route); outline-offset: 1px; }
.hint { font-size: 12px; color: var(--slate); margin-top: 5px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px;
  padding: 12px 20px; border-radius: 9px; cursor: pointer; border: none;
  background: var(--signal); color: var(--asphalt);
  transition: transform .15s ease, opacity .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--line); }

.msg { border-radius: 9px; padding: 11px 14px; font-size: 13px; margin-bottom: 16px; display: none; }
.msg.error { background: var(--danger-tint); color: var(--danger); display: block; }
.msg.success { background: var(--safety-tint); color: var(--safety); display: block; }

.foot-link { text-align: center; margin-top: 20px; font-size: 13px; color: var(--slate); }

.stat-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.stat { flex: 1 1 140px; background: var(--paper-2); border-radius: 10px; padding: 14px 16px; }
.stat .label { font-size: 11.5px; color: var(--slate); text-transform: uppercase; letter-spacing: 0.03em; }
.stat .value { font-family: 'IBM Plex Mono', monospace; font-size: 18px; font-weight: 600; margin-top: 4px; }

.table-wrap { overflow-x: auto; margin-top: 20px; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--slate); padding: 0 12px 10px; }
td { font-size: 13.5px; padding: 12px; border-top: 1px solid var(--line); }
.badge { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--safety-tint); color: var(--safety); }