:root { color-scheme: dark; }
* { margin: 0; box-sizing: border-box; }
body {
  min-height: 100dvh;
  background: #0b0f14;
  color: #d7dde4;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---- auth card layout (login/setup) ---- */
.auth-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem; }
.card {
  width: 100%; max-width: 380px;
  background: #10161d; border: 1px solid #1c2530; border-radius: 14px;
  padding: 2rem 1.75rem; text-align: center;
}
.shield { width: 52px; height: 52px; margin: 0 auto 0.9rem; color: #4a9eda; display: block; }
.brand {
  font-size: 1.35rem; letter-spacing: 0.32em; text-indent: 0.32em;
  font-weight: 600; text-transform: uppercase; margin-bottom: 1.4rem;
}
.sub { color: #7d8894; font-size: 0.9rem; margin: -0.9rem 0 1.4rem; }

label { display: block; text-align: left; font-size: 0.8rem; color: #93a0ad; margin: 0.9rem 0 0.3rem; }
input {
  width: 100%; padding: 0.7rem 0.85rem;
  background: #0b1017; border: 1px solid #253141; border-radius: 9px;
  color: #e6ecf2; font-size: 1rem; outline: none;
}
input:focus { border-color: #4a9eda; }
input.code { text-align: center; font-size: 1.5rem; letter-spacing: 0.5em; text-indent: 0.5em; font-variant-numeric: tabular-nums; }

.btn {
  display: block; width: 100%; margin-top: 1.2rem; padding: 0.8rem;
  border: none; border-radius: 9px; font-size: 1rem; font-weight: 600;
  cursor: pointer; background: #1d6fb8; color: #fff;
}
.btn:hover { background: #2580d1; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.ghost { background: transparent; border: 1px solid #253141; color: #aeb9c4; font-weight: 500; }
.btn.ghost:hover { border-color: #3a4c61; }

.divider {
  display: flex; align-items: center; gap: 0.8rem;
  color: #55606c; font-size: 0.8rem; margin: 1.3rem 0 0.2rem;
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: #1c2530; }

.error {
  display: none; margin-top: 1rem; padding: 0.65rem 0.8rem;
  background: #2a1215; border: 1px solid #5c2229; border-radius: 9px;
  color: #f0a9ae; font-size: 0.88rem; text-align: left;
}
.error.show { display: block; }
.hidden { display: none !important; }

.qr-box { margin: 1rem auto 0.4rem; background: #fff; padding: 10px; border-radius: 10px; width: fit-content; }
.qr-box img { display: block; width: 200px; height: 200px; }
.secret {
  font-family: ui-monospace, monospace; font-size: 0.78rem; color: #93a0ad;
  word-break: break-all; margin-top: 0.5rem; user-select: all;
}
.hint { color: #7d8894; font-size: 0.85rem; margin-top: 0.9rem; line-height: 1.45; }

/* ---- logged-in shell ---- */
.topbar {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.7rem 1.1rem; background: #10161d; border-bottom: 1px solid #1c2530;
  position: sticky; top: 0;
}
.topbar .shield { width: 26px; height: 26px; margin: 0; }
.topbar .brand { font-size: 0.95rem; margin: 0; letter-spacing: 0.28em; }
.topbar .spacer { flex: 1; }
.topbar .who { color: #7d8894; font-size: 0.85rem; }
.topbar button {
  background: transparent; border: 1px solid #253141; color: #aeb9c4;
  border-radius: 7px; padding: 0.35rem 0.7rem; font-size: 0.82rem; cursor: pointer;
}
.topbar button:hover { border-color: #3a4c61; }

.main { max-width: 900px; margin: 0 auto; padding: 2rem 1.2rem; }
.empty {
  text-align: center; padding: 4rem 1rem; color: #7d8894;
  border: 1px dashed #253141; border-radius: 14px;
}
.empty .big { font-size: 2.2rem; margin-bottom: 0.6rem; }
.notice {
  margin-bottom: 1.2rem; padding: 0.9rem 1rem;
  background: #10202e; border: 1px solid #1d3a52; border-radius: 12px;
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
}
.notice p { flex: 1; font-size: 0.9rem; color: #aec6d8; min-width: 220px; }
.notice button {
  background: #1d6fb8; color: #fff; border: none; border-radius: 8px;
  padding: 0.55rem 0.95rem; font-size: 0.88rem; font-weight: 600; cursor: pointer;
}
.ok-flash { border-color: #1d5236; background: #102e1d; }
.ok-flash p { color: #a9d8b8; }