:root {
  color-scheme: light dark;
  --bg: #0b0d12;
  --panel: #141821;
  --line: #232936;
  --text: #e8ecf4;
  --muted: #94a0b5;
  --accent: #6d8cff;
  --danger: #ff6b6b;
  --ok: #4ade80;
  --radius: 14px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f5f7fb;
    --panel: #ffffff;
    --line: #e2e7f0;
    --text: #131722;
    --muted: #5d6880;
    --accent: #3457e8;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 2.5rem 1.25rem;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.shell { max-width: 62rem; margin: 0 auto; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1.75rem;
  color: var(--text);
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
}
.brand b { font-weight: 700; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}

.card, .wide, section {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
}
.card { max-width: 26rem; margin: 0 auto; }
.wide, section { margin-bottom: 1.25rem; }
.wide { padding: 0; border: 0; background: none; }

h1 { margin: 0 0 .35rem; font-size: 1.4rem; }
h2 { margin: 0 0 .9rem; font-size: 1.05rem; }
h3 { margin: 0 0 .3rem; font-size: 1rem; }

.sub { margin: 0 0 1.4rem; color: var(--muted); }
.muted { color: var(--muted); font-size: .9rem; }
a { color: var(--accent); }

.form { display: grid; gap: .9rem; }
.form.row { grid-auto-flow: column; justify-content: end; gap: .6rem; }
label { display: grid; gap: .35rem; font-size: .88rem; }
label em { color: var(--muted); font-style: normal; }
input, select {
  padding: .65rem .75rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* The country selector and the number are one control split in two, so they
   have to line up as one. Without this the native select keeps its own height
   and sits a few pixels off the input beside it. */
.phone-field {
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) 1fr;
  gap: .5rem;
}
.phone-field select {
  min-width: 0;
  text-overflow: ellipsis;
}
.phone-field input { min-width: 0; }
.form.resend { margin-top: .6rem; justify-items: start; }
.auth .form.resend button { width: auto; }

@media (max-width: 26rem) {
  .phone-field { grid-template-columns: 1fr; }
}

button, .primary {
  padding: .65rem 1.05rem;
  border: 1px solid transparent;
  border-radius: 9px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.primary { background: var(--accent); color: #fff; }
.ghost { background: transparent; border-color: var(--line); color: var(--text); }
.small { padding: .4rem .8rem; font-size: .85rem; }

.alert {
  margin: 0 0 1rem;
  padding: .6rem .8rem;
  border-radius: 9px;
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  color: var(--danger);
  font-size: .9rem;
}

/* The sign-in and approval screens. They are the first thing anybody sees of
   the ecosystem, and they are shown under an app's name — so they get a little
   more room and a header naming that app. */
.auth { padding: 2rem 1.75rem; box-shadow: 0 18px 40px -28px rgba(15, 20, 40, .55); }
.auth h1 { font-size: 1.25rem; line-height: 1.3; }
.auth .form { margin-top: 1.25rem; }
.auth button.primary { width: 100%; padding: .75rem 1.05rem; }
.auth .form.row button.primary, .auth .form.row .ghost { width: auto; }

.app-head { display: flex; align-items: center; gap: .85rem; margin-bottom: 1rem; }
.app-head .sub { margin: .15rem 0 0; font-size: .88rem; }
.app-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  font-weight: 700;
  letter-spacing: .02em;
}

.hint { margin: 1rem 0 0; line-height: 1.5; font-size: .85rem; }

.notice {
  margin: 0 0 1.25rem;
  padding: .7rem .85rem;
  border-radius: 9px;
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  color: var(--ok);
  font-size: .88rem;
}

.divider { display: flex; align-items: center; gap: .75rem; margin: 1.35rem 0 1rem; color: var(--muted); font-size: .8rem; }
.divider::before, .divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }

.providers { display: grid; gap: .55rem; }
.provider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .7rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: border-color .15s, background-color .15s;
}
.provider:hover { border-color: var(--accent); }

/* The provider mark keeps its own colours and its own size whatever the theme
   does to the button around it. */
.provider-mark { width: 18px; height: 18px; flex: 0 0 auto; }

/* Google asks for its button on white with its own grey border, in light and
   in dark alike, so the mark is always on the background it was drawn for. */
.provider-google { background: #fff; color: #1f1f1f; border-color: #dadce0; }
.provider-google:hover { background: #f7f8f8; border-color: #d2d5d9; }

.scopes { margin: 0 0 1.5rem; padding: 0; list-style: none; display: grid; gap: .55rem; }
.scopes li { display: flex; gap: .55rem; align-items: baseline; }
.tick { color: var(--ok); font-weight: 700; }

.account {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.75rem;
  margin-bottom: 1.25rem;
}
.account h1 { font-size: 1.2rem; }
.account form { margin-left: auto; }
.avatar {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.badge {
  padding: .1rem .45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
  font-size: .78rem;
}

.balance { margin: 0 0 .3rem; font-size: 2rem; font-weight: 700; }
.balance span { font-size: .95rem; color: var(--muted); font-weight: 500; }

.ledger { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: .88rem; }
.ledger th, .ledger td { padding: .5rem .4rem; border-bottom: 1px solid var(--line); text-align: left; }
.ledger th { color: var(--muted); font-weight: 500; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.debit { color: var(--danger); }
.credit { color: var(--ok); }

.apps { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.app { border: 1px solid var(--line); border-radius: 11px; padding: 1rem; }
.app p { margin: 0 0 .9rem; color: var(--muted); font-size: .88rem; }
.app-foot { display: flex; gap: .5rem; align-items: center; }

.foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  color: var(--muted);
  font-size: .82rem;
}

@media (max-width: 34rem) {
  .account { flex-wrap: wrap; }
  .account form { margin-left: 0; width: 100%; }
  .form.row { grid-auto-flow: row; }
}