*, *::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 }

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 }

.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;
}
.btn:hover { background: #2563eb }
body.auth-login .btn,
body.auth-setup .btn {
  display: block;
  width: 100%;
  padding: .75rem;
  font-size: 1rem;
  margin-top: .75rem;
}

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

.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;
}
.hint { font-size: .75rem; color: #475569; margin-top: .5rem }

.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 .btn { margin-left: .5rem; vertical-align: middle }

.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;
}
.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 { 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 }