/* The account pages, in the launcher's colours and font. */
@font-face {
  font-family: "Chakra Petch";
  src: url("/font.ttf") format("truetype");
  font-weight: 700;
}
:root {
  --background: #0c0c0d;
  --panel: #161618;
  --text: #dbdbd6;
  --dim: #8c8c88;
  --orange: #ff7900;
  --red: #ff5c48;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font: 16px/1.5 system-ui, sans-serif;
}
main { max-width: 34rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
.logo img { display: block; width: 12rem; height: auto; margin-bottom: 2rem; }
h1, h2, button, .button {
  font-family: "Chakra Petch", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}
h1 { font-size: 1.75rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 0 0 0.5rem; color: var(--orange); text-transform: uppercase; }
section { background: var(--panel); padding: 1rem 1.25rem; margin: 0 0 1rem; border-radius: 4px; }
p { margin: 0 0 0.75rem; }
.dim { color: var(--dim); }
.error { color: var(--red); }
.done { color: var(--orange); }
a { color: var(--orange); }
form { margin: 0 0 0.5rem; }
form.inline { display: inline; }
input[type="text"] {
  width: 100%;
  padding: 0.6rem 0.75rem;
  margin: 0 0 0.5rem;
  background: var(--background);
  color: var(--text);
  border: 1px solid #333;
  border-radius: 3px;
  font: inherit;
}
input[type="text"]:focus { outline: 2px solid var(--orange); border-color: transparent; }
button, .button {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  background: var(--orange);
  color: var(--background);
  border: 0;
  border-radius: 3px;
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
button.quiet { background: transparent; color: var(--orange); border: 1px solid var(--orange); }
button.danger { background: var(--red); }
.providers { display: grid; gap: 0.5rem; }
.providers .button { text-align: center; }
ul.rows { list-style: none; padding: 0; margin: 0; }
ul.rows li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.5rem 0; border-top: 1px solid #222; }
ul.rows li:first-child { border-top: 0; }
ul.rows li form { margin: 0; flex-shrink: 0; }
ul.rows + form { margin-top: 0.75rem; }
.code { font-family: "Chakra Petch", monospace; font-size: 1.5rem; letter-spacing: 0.15em; text-transform: uppercase; }