/* BecTech accounts: auth.bectech.co
   Buttons and text boxes are styled after Arc's: soft gradient faces with a top
   highlight, a hairline edge, layered shadows, and a squishy press. */

:root {
  --ink: #16161a;
  --muted: #6b6c72;
  --paper: #ffffff;
  --page: #f4f3f8;
  --accent: #6c5cff;          /* focus ring and links */
  --accent-soft: rgba(108, 92, 255, .2);
  --danger: #d92d20;
  --card-shadow: 0 1px 2px rgba(20, 16, 40, .06), 0 12px 40px -8px rgba(20, 16, 40, .18), 0 0 0 1px rgba(20, 16, 40, .05);
  --field: #f2f2f6;
  --field-edge: rgba(20, 16, 40, .08);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f4f4f6; --muted: #a3a4aa; --paper: #1c1c21; --page: #0f0f13;
    --accent: #8f83ff; --accent-soft: rgba(143, 131, 255, .28);
    --card-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 20px 50px -10px rgba(0, 0, 0, .6);
    --field: #26262d; --field-edge: rgba(255, 255, 255, .08);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center; padding: 32px 16px;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: var(--ink); -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(60% 50% at 15% 10%, rgba(255, 168, 140, .35), transparent 70%),
    radial-gradient(55% 50% at 90% 20%, rgba(140, 150, 255, .35), transparent 70%),
    radial-gradient(60% 60% at 50% 100%, rgba(255, 140, 200, .25), transparent 70%),
    var(--page);
}

main { width: min(420px, 100%); }
.brand {
  display: block; margin: 0 0 22px; text-align: center; text-decoration: none; color: var(--ink);
  font-weight: 800; font-size: 26px; letter-spacing: -.035em;
}
.brand span { color: var(--muted); }

.card {
  width: 100%; padding: 30px 26px 26px; border-radius: 28px;
  background: var(--paper); box-shadow: var(--card-shadow);
}
.card h1 { margin: 0 0 6px; font-size: 25px; letter-spacing: -.03em; line-height: 1.15; }
.card p { margin: 0 0 20px; color: var(--muted); font-weight: 500; line-height: 1.5; font-size: 15px; }
.card p strong { color: var(--ink); }
.stack { display: grid; gap: 10px; }
.hidden { display: none !important; }

/* The site asking you to sign in */
.asking {
  display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 10px 14px;
  border-radius: 14px; background: var(--field); font-weight: 700; font-size: 14px;
}
.asking .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }

/* ---------------------------------------------------------------
   Arc buttons
   --------------------------------------------------------------- */
.btn {
  --top: #ffffff; --bottom: #eeeef3; --text: var(--ink);
  --edge: rgba(20, 16, 40, .1); --glow: rgba(20, 16, 40, .14);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 50px; padding: 0 20px; border: 0; border-radius: 15px;
  font: 700 15.5px/1 "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; letter-spacing: -.005em;
  color: var(--text); text-decoration: none; cursor: pointer; user-select: none;
  background: linear-gradient(180deg, var(--top), var(--bottom));
  box-shadow:
    0 0 0 1px var(--edge),
    0 1px 1px rgba(20, 16, 40, .06),
    0 2px 4px rgba(20, 16, 40, .06),
    0 8px 16px -8px var(--glow),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: transform .18s cubic-bezier(.3, .7, .4, 1.5), box-shadow .18s, filter .18s;
  -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.03); box-shadow:
    0 0 0 1px var(--edge), 0 2px 2px rgba(20, 16, 40, .06), 0 4px 8px rgba(20, 16, 40, .07),
    0 14px 24px -10px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .9); }
.btn:active { transform: translateY(1px) scale(.98); filter: brightness(.98); transition-duration: .06s; box-shadow:
    0 0 0 1px var(--edge), 0 1px 1px rgba(20, 16, 40, .05), inset 0 1px 3px rgba(20, 16, 40, .12); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--edge), 0 0 0 4px var(--accent-soft), inset 0 1px 0 rgba(255, 255, 255, .9); }
.btn:disabled { cursor: default; opacity: .55; transform: none; filter: none; }
.btn.busy { color: transparent; }
.btn.busy::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid var(--text); border-right-color: transparent; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* The main action: dark and glossy */
.btn.primary {
  --top: #3e3e47; --bottom: #141418; --text: #fff;
  --edge: rgba(0, 0, 0, .55); --glow: rgba(20, 16, 40, .45);
}
.btn.primary { box-shadow:
    0 0 0 1px var(--edge), 0 1px 1px rgba(0, 0, 0, .1), 0 2px 4px rgba(0, 0, 0, .12),
    0 10px 20px -8px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .35); }
.btn.primary:hover { box-shadow:
    0 0 0 1px var(--edge), 0 2px 2px rgba(0, 0, 0, .1), 0 4px 8px rgba(0, 0, 0, .14),
    0 16px 28px -10px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 -1px 0 rgba(0, 0, 0, .35); }
.btn.primary:active { box-shadow: 0 0 0 1px var(--edge), inset 0 2px 4px rgba(0, 0, 0, .45); }

/* Removing things */
.btn.danger { --text: var(--danger); }
.btn.small { width: auto; height: 36px; padding: 0 14px; border-radius: 11px; font-size: 13.5px; }
.btn.text {
  --top: transparent; --bottom: transparent; width: auto; height: 36px; padding: 0 10px;
  color: var(--muted); box-shadow: none; font-size: 14px;
}
.btn.text:hover { color: var(--ink); box-shadow: none; transform: none; }

@media (prefers-color-scheme: dark) {
  .btn { --top: #34343c; --bottom: #26262d; --edge: rgba(255, 255, 255, .1); --glow: rgba(0, 0, 0, .6); }
  .btn { box-shadow: 0 0 0 1px var(--edge), 0 2px 4px rgba(0, 0, 0, .3), 0 8px 16px -8px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .1); }
  .btn:hover { box-shadow: 0 0 0 1px var(--edge), 0 4px 8px rgba(0, 0, 0, .35), 0 14px 24px -10px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .12); }
  .btn.primary { --top: #ffffff; --bottom: #e4e4ea; --text: #16161a; --edge: rgba(255, 255, 255, .3); }
  .btn.primary, .btn.primary:hover { box-shadow: 0 0 0 1px var(--edge), 0 2px 4px rgba(0, 0, 0, .3), 0 10px 20px -8px rgba(0, 0, 0, .6), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, .12); }
}

/* ---------------------------------------------------------------
   Arc text boxes
   --------------------------------------------------------------- */
.field { display: grid; gap: 6px; }
.field label { font-size: 13px; font-weight: 700; padding-left: 4px; }
.field label small { color: var(--muted); font-weight: 600; }
.field input {
  width: 100%; height: 50px; padding: 0 16px; border: 0; border-radius: 15px;
  font: 600 16px "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; color: var(--ink);
  background: var(--field);
  box-shadow: inset 0 0 0 1px var(--field-edge), inset 0 1px 2px rgba(20, 16, 40, .06);
  transition: background .15s, box-shadow .15s;
}
.field input::placeholder { color: var(--muted); opacity: .7; }
.field input:hover { box-shadow: inset 0 0 0 1px rgba(20, 16, 40, .14), inset 0 1px 2px rgba(20, 16, 40, .06); }
.field input:focus {
  outline: none; background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px var(--accent-soft);
}
.field .hint { font-size: 12.5px; color: var(--muted); padding-left: 4px; }

.or { display: flex; align-items: center; gap: 12px; margin: 6px 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--field-edge); }

.error { min-height: 20px; margin-top: 12px; color: var(--danger); font-weight: 700; font-size: 14px; }
.note { margin-top: 18px; font-size: 13px; color: var(--muted); text-align: center; line-height: 1.5; }
.note a, .link { color: var(--accent); font-weight: 700; text-decoration: none; }

/* Who's signed in */
.who { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.avatar {
  width: 46px; height: 46px; border-radius: 15px; flex: none; display: grid; place-items: center;
  font-weight: 800; font-size: 19px; color: #fff;
  background: linear-gradient(135deg, #ff8a5c, #b05cff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 12px -4px rgba(176, 92, 255, .6);
}
.who b { display: block; font-size: 17px; letter-spacing: -.01em; }
.who span { color: var(--muted); font-size: 14px; font-weight: 600; }
.badge { display: inline-block; margin-left: 6px; padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; background: #fff4d6; color: #8a5a00; }
@media (prefers-color-scheme: dark) { .badge { background: #3a2f12; color: #ffd37a; } }

/* Passkey list */
.keys { display: grid; gap: 8px; margin: 4px 0 14px; }
.key {
  display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 16px;
  background: var(--field); box-shadow: inset 0 0 0 1px var(--field-edge);
}
.key svg { width: 22px; height: 22px; flex: none; color: var(--muted); }
.key div { flex: 1; min-width: 0; }
.key b { display: block; font-size: 14.5px; }
.key small { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.section-title { margin: 22px 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

.done-icon {
  width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 16px;
  color: #fff; background: linear-gradient(135deg, #34c77b, #1f9d5c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 16px -6px rgba(31, 157, 92, .7);
}
.done-icon svg { width: 28px; height: 28px; }

@media (prefers-reduced-motion: reduce) { .btn, .btn:hover, .btn:active { transition: none; transform: none; } }