/* ── Auth pages — shared base ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #0f172a;
  color: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
}

.card {
  background: #1e293b;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  width: 100%;
}

body.auth-login     .card { max-width: 380px; padding: 2.5rem 2rem; text-align: center }
body.auth-setup     .card { max-width: 440px; padding: 2rem }
body.auth-forbidden .card { max-width: 400px; padding: 2rem; text-align: center }
body.auth-admin     .card { max-width: 560px; padding: 2rem }

.icon { font-size: 2.4rem; margin-bottom: .75rem }

h1 { font-size: 1.25rem; color: #f1f5f9; margin-bottom: 1.5rem }
body.auth-forbidden h1 { font-size: 1.15rem; color: #f87171; margin-bottom: 1rem }
body.auth-admin h1 { margin-bottom: 1.5rem }

label {
  display: block;
  font-size: .85rem;
  color: #94a3b8;
  margin-bottom: .35rem;
  text-align: left;
}

input {
  width: 100%;
  padding: .7rem;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #e2e8f0;
  font-size: 1rem;
  outline: none;
  margin-bottom: .75rem;
}
input:focus { border-color: #3b82f6 }

.err { color: #f87171; font-size: .85rem; margin-top: .5rem }
.code { font-size: 1.6rem; letter-spacing: .5em; text-align: center }

/* ── Login ── */
body.auth-login .btn {
  display: block; width: 100%; padding: .75rem;
  background: #3b82f6; color: #fff;
  border: none; border-radius: 6px;
  font-size: 1rem; font-weight: 600; cursor: pointer; margin-top: .75rem;
}
body.auth-login .btn:hover { background: #2563eb }

/* ── Forbidden ── */
body.auth-forbidden p { font-size: .875rem; color: #94a3b8 }

/* ── Setup ── */
.sub { font-size: .85rem; color: #64748b; margin-bottom: 1.25rem }
.username-highlight { color: #7dd3fc }
.step { background: #0f172a; border-radius: 8px; padding: 1rem; margin-bottom: .75rem }
.step-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: #64748b; margin-bottom: .7rem;
}
.qr { text-align: center }
.qr img { max-width: 180px; height: auto; background: #fff; padding: 8px; border-radius: 6px }
.key {
  font-family: monospace; font-size: .8rem; color: #7dd3fc;
  word-break: break-all; background: #020617;
  padding: .5rem .6rem; border-radius: 4px; margin-top: .6rem;
}
body.auth-setup input {
  background: #020617; font-size: 1.5rem;
  letter-spacing: .5em; text-align: center;
}
body.auth-setup .btn {
  display: block; width: 100%; padding: .75rem;
  background: #3b82f6; color: #fff;
  border: none; border-radius: 6px;
  font-size: 1rem; font-weight: 600; cursor: pointer; margin-top: .75rem;
}
body.auth-setup .btn:hover { background: #2563eb }
.hint { font-size: .75rem; color: #475569; margin-top: .5rem }

/* ── Admin ── */
.sec { background: #0f172a; border-radius: 8px; padding: 1rem; margin-bottom: 1rem }
.lbl { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #64748b; margin-bottom: .75rem }

body.auth-admin input[type=text] {
  background: #020617; border: 1px solid #334155; border-radius: 6px;
  color: #e2e8f0; font-size: .9rem; padding: .55rem .7rem;
  outline: none; width: 200px; margin-bottom: 0;
}
body.auth-admin input[type=text]:focus { border-color: #3b82f6 }

body.auth-admin .btn {
  display: inline-block; padding: .6rem 1.1rem;
  background: #3b82f6; color: #fff;
  border: none; border-radius: 6px;
  font-size: .9rem; font-weight: 600; cursor: pointer; margin-left: .5rem; vertical-align: middle;
}
body.auth-admin .btn:hover { background: #2563eb }

.url-box {
  background: #020617; border: 1px solid #334155; border-radius: 6px;
  padding: .6rem .75rem; margin-top: .75rem;
  word-break: break-all; font-family: monospace; font-size: .78rem; color: #7dd3fc; line-height: 1.5;
}
.btn-copy {
  width: 100%; padding: .6rem;
  background: #1e3a5f; color: #93c5fd; border: 1px solid #1e3a5f;
  border-radius: 6px; font-size: .85rem; font-weight: 600; cursor: pointer; margin-top: .4rem;
}
.btn-copy:hover { background: #1e40af }
.expires { font-size: .72rem; color: #475569; margin-top: .4rem }
.ok-msg { color: #4ade80; font-size: .78rem; margin-top: .3rem; display: none }
.err-box { color: #f87171; font-size: .8rem; margin-top: .5rem; display: none }
#link-result { display: none; margin-top: .75rem }
.back { display: inline-block; margin-top: 1.25rem; font-size: .85rem; color: #3b82f6; text-decoration: none }
.back:hover { text-decoration: underline }

/* ── Admin table ── */
.admin-table { width: 100%; border-collapse: collapse }
.admin-table th {
  text-align: left; font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: #64748b; padding: .5rem .75rem; border-bottom: 1px solid #1e293b;
}
.admin-td-user { padding: .6rem .75rem; font-family: monospace; color: #e2e8f0 }
.admin-td      { padding: .6rem .75rem }
.admin-btn-link {
  background: #3b82f6; border: none; border-radius: 5px;
  color: #fff; font-size: .8rem; padding: 4px 10px; cursor: pointer;
}
.admin-btn-del {
  background: #ef4444; border: none; border-radius: 5px;
  color: #fff; font-size: .8rem; padding: 4px 10px; cursor: pointer;
}
.admin-badge-ok      { color: #4ade80; font-size: .75rem }
.admin-badge-pending { color: #f87171; font-size: .75rem }
.admin-empty { font-size: .85rem; color: #64748b }
#link-user {
  background: #020617; border: 1px solid #334155; border-radius: 6px;
  color: #e2e8f0; font-size: .9rem; padding: .55rem .7rem; outline: none;
}
.admin-hint { font-size: .85rem; color: #94a3b8; margin-bottom: .75rem }
.admin-select-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap }