/*
 * 2FA Authenticator - its own stylesheet.
 *
 * Deliberately shares nothing with the reseller app's CSS: this page is a
 * separate system that happens to live on the same domain, so it carries no
 * dependency on that theme and cannot be broken by a change to it.
 */

:root {
  color-scheme: dark;

  --bg:        #0a0d14;
  --bg-glow-1: rgba(99, 102, 241, .18);
  --bg-glow-2: rgba(16, 185, 129, .12);
  --surface:   #121724;
  --surface-2: #171d2e;
  --line:      #242c40;
  --line-soft: #1c2335;

  --text:      #e8ecf6;
  --text-dim:  #93a0bb;
  --text-mute: #64718c;

  --accent:    #6366f1;
  --accent-2:  #22d3ee;
  --accent-ink:#ffffff;
  --ok:        #34d399;
  --warn:      #fbbf24;
  --danger:    #f87171;

  --radius:    16px;
  --radius-sm: 10px;
  --shadow:    0 18px 48px rgba(0, 0, 0, .45);
  --ring:      0 0 0 3px rgba(99, 102, 241, .35);

  --mono: "SF Mono", "JetBrains Mono", "Cascadia Mono", ui-monospace, "Roboto Mono", Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg:        #f4f6fb;
  --bg-glow-1: rgba(99, 102, 241, .13);
  --bg-glow-2: rgba(34, 211, 238, .10);
  --surface:   #ffffff;
  --surface-2: #f7f9fd;
  --line:      #e2e7f1;
  --line-soft: #edf1f8;

  --text:      #111827;
  --text-dim:  #526079;
  --text-mute: #8593ad;

  --shadow:    0 14px 34px rgba(24, 39, 75, .10);
}

* { box-sizing: border-box; }

/* The browser hides [hidden] with `display: none`, but ANY author rule that
   sets display beats it - a plain `.modal { display: grid }` is enough. That
   left the QR dialog and the input's clear button on screen permanently, and
   made closing the dialog do nothing at all. Every element this page shows and
   hides relies on the attribute, so state it once, here, and loudly. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  padding: 0 16px calc(48px + env(safe-area-inset-bottom));
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Two soft lights behind everything, fixed so scrolling does not drag them. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60vw 60vw at 12% -10%, var(--bg-glow-1), transparent 62%),
    radial-gradient(52vw 52vw at 96% 4%, var(--bg-glow-2), transparent 60%);
}

/* ---------- top bar ---------- */

.bar {
  max-width: 760px;
  margin: 0 auto;
  padding: 22px 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand-mark {
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--accent);
}

.brand-text {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .2px;
  white-space: nowrap;
}

.brand-text b {
  font-weight: 600;
  color: var(--text-dim);
  margin-left: 6px;
}

.bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-dim);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}

.icon-btn svg { width: 17px; height: 17px; }

.icon-btn:hover { color: var(--text); border-color: var(--accent); }

.lang-btn {
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-dim);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}

.lang-btn:hover { color: var(--text); border-color: var(--accent); }

/* ---------- layout ---------- */

main {
  max-width: 760px;
  margin: 0 auto;
}

.hero {
  padding: 26px 2px 22px;
}

.hero h1 {
  margin: 0 0 8px;
  font-size: clamp(25px, 5.2vw, 33px);
  line-height: 1.2;
  letter-spacing: -.5px;
  font-weight: 650;
  background: linear-gradient(96deg, var(--text) 32%, var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p {
  margin: 0;
  max-width: 54ch;
  color: var(--text-dim);
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.card-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.split {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
}

.split .card { margin-bottom: 0; }

/* ---------- the input ---------- */

.field-label {
  display: block;
  margin-bottom: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.field { position: relative; }

.field input {
  width: 100%;
  height: 52px;
  padding: 0 44px 0 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .06em;
  transition: border-color .15s, box-shadow .15s;
}

.field input::placeholder {
  font-family: var(--sans);
  letter-spacing: normal;
  color: var(--text-mute);
}

.field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.in-field {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-mute);
  cursor: pointer;
}

.in-field svg { width: 15px; height: 15px; }
.in-field:hover { color: var(--text); background: var(--line-soft); }

.hint {
  min-height: 20px;
  margin: 9px 2px 0;
  font-size: 13px;
  color: var(--text-mute);
}

.hint.bad { color: var(--danger); }
.hint.good { color: var(--ok); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.btn {
  flex: 1 1 auto;
  min-width: 132px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-weight: 550;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .08s;
}

.btn:hover { border-color: var(--accent); }
.btn:active { transform: translateY(1px); }

.btn.primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
  color: var(--accent-ink);
  box-shadow: 0 8px 20px rgba(99, 102, 241, .3);
}

.btn.primary:hover { filter: brightness(1.08); }

.btn:disabled { opacity: .5; cursor: not-allowed; }

.link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.link:hover { color: var(--text); text-decoration: underline; }
.link.danger:hover { color: var(--danger); }

/* ---------- the live code ---------- */

.code-card {
  background:
    linear-gradient(180deg, rgba(99, 102, 241, .10), transparent 58%),
    var(--surface);
}

.tag {
  max-width: 55%;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--line-soft);
  color: var(--text-dim);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.code {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--text);
  font-family: var(--mono);
  font-size: clamp(34px, 9vw, 50px);
  font-weight: 600;
  letter-spacing: .1em;
  text-align: left;
  cursor: pointer;
  transition: color .2s;
}

.code:hover { color: var(--accent-2); }
.code.copied { color: var(--ok); }
.code.ending { color: var(--warn); }

.timer {
  position: relative;
  width: 52px;
  height: 52px;
  flex: none;
  display: grid;
  place-items: center;
}

.timer svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.timer circle {
  fill: none;
  stroke-width: 3.5;
  stroke-linecap: round;
}

.timer-track { stroke: var(--line); }

.timer-run {
  stroke: var(--accent-2);
  stroke-dasharray: 119.4;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .25s linear, stroke .3s;
}

.timer.ending .timer-run { stroke: var(--warn); }

.timer span {
  position: relative;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--text-dim);
}

.code-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-mute);
}

/* ---------- saved keys ---------- */

.saved {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.saved li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface-2);
  transition: border-color .15s;
}

.saved li:hover { border-color: var(--line); }

.saved-main {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.saved-name {
  display: block;
  font-weight: 550;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.saved-sub {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.saved-code {
  flex: none;
  padding: 4px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .08em;
  cursor: pointer;
  transition: color .2s, background .2s;
}

.saved-code:hover { background: var(--line-soft); color: var(--accent-2); }
.saved-code.copied { color: var(--ok); }

.saved-tools {
  flex: none;
  display: flex;
  gap: 2px;
}

.saved-tools button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-mute);
  cursor: pointer;
  transition: color .15s, background .15s;
}

.saved-tools button svg { width: 15px; height: 15px; }
.saved-tools button:hover { background: var(--line-soft); color: var(--text); }
.saved-tools button.del:hover { color: var(--danger); }

.empty {
  margin: 0;
  font-size: 13px;
  color: var(--text-mute);
}

/* ---------- help ---------- */

.demo-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--text-dim);
}

.demo-key {
  padding: 5px 11px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--accent-2);
  font-family: var(--mono);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s;
}

.demo-key:hover { border-color: var(--accent-2); }

.notes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
  font-size: 13.5px;
  color: var(--text-dim);
}

.notes li {
  position: relative;
  padding-left: 20px;
}

.notes li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.notes.warn li::before { background: var(--warn); }

.muted { color: var(--text-mute); }
.center { text-align: center; }

.foot {
  padding: 8px 2px 0;
  font-size: 12.5px;
  color: var(--text-mute);
  text-align: center;
}

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

.modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 20px;
}

.modal-back {
  position: absolute;
  inset: 0;
  background: rgba(3, 6, 12, .66);
  backdrop-filter: blur(3px);
}

.modal-box {
  position: relative;
  width: min(380px, 100%);
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  animation: pop .18s ease-out;
}

@keyframes pop {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

/* The QR itself is always dark-on-white: scanners want the contrast, and an
   inverted code is unreadable to a good many phone cameras. */
.qr {
  display: grid;
  place-items: center;
  padding: 14px;
  border-radius: 12px;
  background: #ffffff;
}

.qr svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 250px;
  /* A QR is square; state it, so the box can never collapse even if the
     svg reaches here without width/height attributes. */
  aspect-ratio: 1 / 1;
}

.qr-name {
  margin: 12px 0 6px;
  text-align: center;
  font-weight: 550;
  word-break: break-all;
}

/* ---------- toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 60;
  transform: translate(-50%, 12px);
  padding: 11px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 13.5px;
  box-shadow: var(--shadow);
  opacity: 0;
  transition: opacity .18s, transform .18s;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- narrow screens ---------- */

@media (max-width: 640px) {
  .split { grid-template-columns: 1fr; }
  .card { padding: 17px; }
  .btn { flex-basis: 100%; }
  .code { letter-spacing: .06em; }
  .saved li { flex-wrap: wrap; }
  .saved-main { flex-basis: calc(100% - 132px); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}