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

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  --ink:#1C2024; --graphite:#15181B; --concrete:#EDEEEA; --surface:#FFFFFF;
  --line:#D9DAD3; --muted:#6B7280; --accent:#FF6A1A; --good:#1F7A4D; --warn:#B8860B; --taken:#8A8F98;
  font-family:'Inter',sans-serif; color:var(--ink); background:var(--concrete);
}
.wrap { max-width:900px; margin:0 auto; padding:34px 24px 60px; }
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.brand { display:flex; align-items:center; gap:10px; font-family:'Oswald',sans-serif; font-weight:600; font-size:18px; }
.brand small { display:block; font-size:11px; color:var(--muted); font-weight:400; }
h1 { font-family:'Oswald',sans-serif; font-size:24px; margin:0 0 6px; }
p.lead { color:var(--muted); margin:0 0 20px; font-size:13.5px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:2px; padding:20px 22px; margin-bottom:18px; }
h3 { font-family:'Oswald',sans-serif; font-size:15px; margin:0 0 14px; }
.muted { color:var(--muted); }
.small { font-size:12px; }
.mono { font-family:'IBM Plex Mono',monospace; }

.field { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; font-size:12.5px; color:var(--muted); }
.field span { font-weight:500; }
.field input { font-family:inherit; font-size:14px; color:var(--ink); border:1px solid var(--line); border-radius:2px; padding:10px 12px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.btn { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-family:inherit; font-weight:600; padding:10px 16px; min-height:40px; border-radius:2px; cursor:pointer; border:1px solid transparent; }
.btn-primary { background:var(--accent); color:#1A0D00; border-color:var(--accent); }
.btn-primary:hover { filter:brightness(0.95); }
.btn-ghost { background:transparent; border-color:var(--line); color:var(--ink); }
.btn-ghost:hover { background:#E4E5E0; }
.btn-danger { color:#B4232C; border-color:#EBC3C5; background:#fff; }
.btn-danger:hover { background:#FBEEEE; }
.row-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.form-actions { display:flex; gap:12px; margin:14px 0 0; flex-wrap:wrap; }

.table { width:100%; border-collapse:collapse; }
.table th { text-align:left; font-size:11px; color:var(--muted); font-weight:600; padding:8px 10px; border-bottom:1px solid var(--line); }
.table td { padding:10px; border-bottom:1px solid var(--line); font-size:13px; vertical-align:middle; }

.badge { display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600; }
.badge-free { background:#E4F3EA; color:var(--good); }
.badge-taken { background:#EDEEEE; color:var(--taken); }
.badge-warn { background:#FBF0DA; color:#B8860B; }
.key-box { font-family:'IBM Plex Mono',monospace; font-size:13px; background:var(--concrete); border:1px solid var(--line); padding:10px 12px; border-radius:2px; word-break:break-all; user-select:all; }
textarea.field-textarea { font-family:inherit; font-size:14px; border:1px solid var(--line); border-radius:2px; padding:10px 12px; width:100%; resize:vertical; }

.login-root { width:100%; min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--graphite); padding:20px; }
.login-card { width:100%; max-width:340px; background:var(--surface); border-radius:4px; padding:30px 28px; }
.login-error { background:#FBE4E5; color:#B4232C; font-size:12.5px; padding:9px 12px; border-radius:2px; margin-bottom:12px; }
.ok-line { color:var(--good); display:flex; align-items:center; gap:6px; font-size:13px; margin:0 0 14px; }
.banner-info { background:#FFF3EA; border:1px solid #FFD9B8; padding:12px 14px; border-radius:2px; margin-bottom:18px; color:#7A3E12; font-size:13px; line-height:1.5; }