/* Queye Authenticator — follows the Queye design language
   (grey/white/black neutrals, Information Yellow selection, light+dark). */

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  --canvas: #f2f2f2;
  --panel: #ffffff;
  --ink: #202124;
  --muted: #4d5156;
  --line: #dadce0;
  --input-border: #dfe1e5;
  --input-bg: #ffffff;
  --hover: #f1f3f4;
  --accent: #ffbd16;
  --danger: #c5221f;
  --btn-bg: #333333;
  --btn-ink: #ffffff;
  --shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #000000;
    --panel: #111111;
    --ink: #dddddd;
    --muted: #bbbbbb;
    --line: #333333;
    --input-border: #333333;
    --input-bg: #222222;
    --hover: #1c1c1c;
    --danger: #f28b82;
    --btn-bg: #dddddd;
    --btn-ink: #111111;
    --shadow: none;
  }
}

* { box-sizing: border-box; }
::selection { background: rgba(255, 189, 22, .6); }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: 'Wix Madefor Text', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: 'Wix Madefor Display', system-ui, sans-serif; }
.title, .brand-name { font-family: 'Climate Crisis', system-ui, sans-serif; }

/* ---------- landing ---------- */
.landing { max-width: 560px; margin: 12vh auto 0; padding: 0 24px; text-align: center; }
.landing-logo { width: 60px; height: 60px; color: var(--ink); }
.landing h1 { font-size: 2.2rem; margin: 20px 0 8px; }
.landing-sub { color: var(--muted); font-size: 1.05rem; line-height: 1.5; margin: 0 0 28px; }
.landing-points { text-align: left; color: var(--muted); line-height: 1.6; margin: 36px 0; padding-left: 20px; }
.landing-points strong { color: var(--ink); }

/* ---------- app chrome ---------- */
#app { max-width: 680px; margin: 0 auto; padding: 0 16px 80px; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 0 14px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { display: block; }
.brand-mark { color: var(--ink); display: block; }
.brand-name { font-weight: 700; font-size: 1.1rem; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.account-link img { width: 34px; height: 34px; border-radius: 50%; display: block; border: 1px solid var(--line); }
.sync-status { font-size: .8rem; color: var(--muted); }
.sync-status.offline { color: var(--danger); }

.view { margin-top: 8px; }
.loading { color: var(--muted); text-align: center; padding: 60px 0; }

/* ---------- buttons & inputs ---------- */
.btn {
  display: inline-block; border: 0; border-radius: 24px; cursor: pointer;
  font: inherit; font-weight: 600; padding: 11px 22px; text-decoration: none;
  background: var(--hover); color: var(--ink);
}
.btn:hover { filter: brightness(.96); }
.btn-primary { background: var(--btn-bg); color: var(--btn-ink); }
.btn-danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.btn-small { padding: 6px 14px; font-size: .85rem; }
.icon-btn {
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  border-radius: 18px; padding: 6px 14px; cursor: pointer; font: inherit; font-size: .85rem;
}
.icon-btn:hover { background: var(--hover); }
.icon-btn.icon-only {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border-radius: 50%;
}

input[type=text], input[type=password], input[type=number], select {
  width: 100%; padding: 11px 14px; font: inherit; color: var(--ink);
  background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 10px;
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
label { display: block; font-size: .85rem; color: var(--muted); margin: 14px 0 6px; }

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px; box-shadow: var(--shadow);
}
.card h2 { margin-top: 0; }
.hint { color: var(--muted); font-size: .88rem; line-height: 1.5; }
.error-text { color: var(--danger); font-size: .88rem; min-height: 1.2em; margin-top: 10px; }

/* ---------- unlock / setup ---------- */
.gate { max-width: 440px; margin: 8vh auto 0; }
.gate .btn { width: 100%; margin-top: 18px; }
.recovery-key {
  font-family: 'JetBrains Mono', monospace; font-size: 1.02rem; letter-spacing: .5px;
  background: var(--hover); border: 1px dashed var(--line); border-radius: 10px;
  padding: 14px; text-align: center; user-select: all; word-break: break-all; margin: 14px 0;
}
.checkline { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0; font-size: .9rem; color: var(--muted); }
.checkline input { margin-top: 3px; }

/* ---------- entry list ---------- */
.list-head { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 14px; }
.list-head h2 { margin: 0; font-size: 1.15rem; }
.searchbox { margin-bottom: 14px; }
.entries { display: flex; flex-direction: column; gap: 10px; }
.entry {
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 18px; box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.entry:hover { background: var(--hover); }
.entry-meta { flex: 1; min-width: 0; }
.entry-issuer { font-weight: 600; }
.entry-account { color: var(--muted); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-code {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 1.55rem;
  letter-spacing: 1px; font-variant-numeric: tabular-nums; text-align: right;
}
.entry-code.expiring { color: var(--danger); }
.entry-timer {
  position: absolute; left: 0; bottom: 0; height: 3px; background: var(--accent);
  transition: width 1s linear; border-radius: 0 2px 2px 0;
}
.entry-copied {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--panel); font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .15s;
}
.entry-copied.show { opacity: .96; }

.empty { text-align: center; color: var(--muted); padding: 48px 12px; }

.fab-row { position: fixed; left: 0; right: 0; bottom: 24px; display: flex; justify-content: center; gap: 10px; pointer-events: none; }
.fab-row .btn { pointer-events: auto; box-shadow: 0 4px 14px rgba(0,0,0,.18); }

/* ---------- modal ---------- */
.modal-back {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .45);
  display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; z-index: 20;
  overflow: auto;
}
.modal { width: 100%; max-width: 480px; }
.modal-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.modal-tabs button {
  flex: 1; border: 1px solid var(--line); background: transparent; color: var(--muted);
  padding: 9px; border-radius: 10px; cursor: pointer; font: inherit; font-size: .88rem;
}
.modal-tabs button.active { background: var(--btn-bg); color: var(--btn-ink); border-color: transparent; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
details.advanced { margin-top: 16px; }
details.advanced summary { cursor: pointer; color: var(--muted); font-size: .88rem; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

/* ---------- devices & settings ---------- */
.section-title { font-size: 1.05rem; margin: 28px 0 10px; }
.device-row {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px;
}
.device-row .entry-meta { flex: 1; }
.device-revoked { opacity: .55; }
.badge { font-size: .72rem; border: 1px solid var(--line); color: var(--muted); border-radius: 8px; padding: 2px 8px; }
.badge.current { border-color: var(--accent); color: var(--ink); }

.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.settings-row:last-child { border-bottom: 0; }
.settings-row .hint { margin: 4px 0 0; }

@media (max-width: 480px) {
  .entry-code { font-size: 1.3rem; }
  .grid2 { grid-template-columns: 1fr; }
}


/* ---------- PIN keypad ---------- */

.pinpad { text-align: center; }
.pinpad h2 { margin-bottom: 6px; }
.pinpad .hint { margin: 0 auto 4px; max-width: 34ch; }

.pin-dots {
  display: flex; justify-content: center; gap: 12px;
  margin: 26px 0 6px; min-height: 16px;
}
.pin-dot {
  width: 13px; height: 13px; border-radius: 50%;
  border: 1.5px solid var(--line); background: transparent;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.pin-dot.filled {
  background: var(--accent); border-color: var(--accent); transform: scale(1.08);
}

.pin-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin: 18px auto 0; max-width: 264px;
}
.pin-grid.busy { opacity: .5; pointer-events: none; }
.pin-key {
  /* Display face with tabular figures: the keypad wants even digit widths, but
     it is a control, not data — mono here read as a terminal. */
  font-family: 'Wix Madefor Display', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 1.4rem; font-weight: 500;
  color: var(--ink); background: var(--hover);
  border: 1px solid transparent; border-radius: 14px;
  padding: 15px 0; cursor: pointer;
  transition: background .12s ease, transform .06s ease;
}
.pin-key:hover { background: var(--input-bg); border-color: var(--line); }
.pin-key:active { transform: scale(.96); }
.pin-key:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pin-key-del { font-size: 1.1rem; color: var(--muted); background: transparent; }
.pin-key-del:hover { background: var(--hover); }

.pinpad .error-text { min-height: 2.4em; margin: 8px 0 0; }
.pinpad .btn { width: 100%; margin-top: 14px; }

/* ---------- QR upload ---------- */

.upload-frame {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  border: 1px dashed var(--line); border-radius: 14px;
  padding: 36px 20px;
  text-align: center;
}
.upload-frame .btn { width: auto; }


/* The pinpad sits on the canvas, not in a card — matched to Queye Wallet's
   treatment 2026-08-31. `.gate` already centres and constrains it; these rules
   restore the breathing room the card's padding used to provide. */
.gate.pinpad { padding: 8px 4px 0; }
.gate.pinpad h2 { margin-bottom: 6px; }
.btn-below { margin-top: 12px; }

/* The brand name must not wrap.
   "Queye Authenticator" was wrapping to two lines at narrow widths, which made
   that product's top bar 80px against the Wallet's 68px and pushed everything
   below it — including the PIN pad — 12px down. The two products then did not
   line up on screens that are meant to be identical. */
.brand-name { white-space: nowrap; }
@media (max-width: 430px) {
  .brand-name { font-size: .98rem; }
}