:root {
  --bg: #14161a;
  --panel: #1c1f26;
  --line: #2c313b;
  --text: #e6e8ec;
  --dim: #99a1b0;
  --green: #44d62c;      /* Razer green */
  --amber: #f0a839;
  --red: #ef5350;
}

* { box-sizing: border-box; }

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

.hidden { display: none !important; }

/* --- header --- */

header {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: 60rem;
  margin: 0 auto;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
}

header h1 { font-size: 1.1rem; margin: 0; }
header nav { display: flex; gap: .25rem; margin-left: auto; }

section#app, .panel { max-width: 60rem; margin: 0 auto; }
.panel { padding-top: 1.5rem; }

/* --- controls --- */

button {
  padding: .5rem .85rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--green); }
button:disabled { opacity: .45; cursor: not-allowed; }

button.primary { background: var(--green); border-color: var(--green); color: #05210b; font-weight: 600; }
button.link { background: none; border: none; color: var(--dim); padding: .25rem .4rem; text-decoration: underline; }
button.link:hover:not(:disabled) { color: var(--text); }

.tab { background: none; border: none; color: var(--dim); }
.tab.active { color: var(--text); border-bottom: 2px solid var(--green); border-radius: 0; }

input, select {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #12141a;
  color: var(--text);
  font: inherit;
}
input:focus, select:focus { outline: none; border-color: var(--green); }

label { display: block; margin: .9rem 0 .35rem; font-size: .87rem; color: var(--dim); }
.hint { color: #6b7383; font-size: .8rem; }

.row { display: flex; gap: .6rem; align-items: flex-end; }
.row > div { flex: 1; }
.row > select { flex: 1; }
.row > button { flex: 0 0 auto; }
.row > div > label:first-child { margin-top: 0; }

/* --- cards --- */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.1rem 1.25rem 1.4rem;
  margin-bottom: 1rem;
}
.card > button[type="submit"], .card > button.primary { margin-top: 1.2rem; }

details summary { cursor: pointer; color: var(--dim); padding: .6rem 0; }
details[open] summary { margin-bottom: .5rem; }

/* --- accounts: sections and grouping --- */

.section { margin-bottom: 2.25rem; }

.section > h2 {
  font-size: .95rem;
  margin: 0 0 .9rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: .7rem;
  margin-bottom: .7rem;
  border-bottom: 1px solid var(--line);
}
.section-head h2 { font-size: .95rem; margin: 0; }
.count { color: var(--dim); font-weight: 400; font-size: .85rem; }
.section-hint { margin: -.2rem 0 1rem; }

/* The three ways to add accounts, shown as tidy stacked cards. */
.method {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  padding: 0 1.15rem;
  margin-bottom: .8rem;
}
.method > summary { color: var(--text); font-weight: 500; padding: .9rem 0; }
.method[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.method .card { border: none; background: none; padding: 0 0 1.1rem; margin: 0; }

/* --- table --- */

/* A wrapper that scrolls sideways so a long email or the row buttons never
   stretch or break the page on a narrow screen. */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.table-wrap table { margin: 0; }
.table-wrap thead th { background: #171a20; position: sticky; top: 0; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
th { color: var(--dim); font-weight: 500; font-size: .82rem; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.actions { text-align: right; white-space: nowrap; }
td.actions button { margin-left: .3rem; }

.badge {
  display: inline-block;
  padding: .12rem .55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .75rem;
  color: var(--dim);
  white-space: nowrap;
}
.when { color: var(--dim); font-size: .82rem; white-space: nowrap; }

small { color: var(--dim); font-size: .82rem; }
small.error-text { color: var(--red); }
.empty { color: var(--dim); padding: 1.5rem 0; }

/* --- job banner --- */

.job {
  display: flex;
  align-items: center;
  gap: .7rem;
  max-width: 60rem;
  margin: 1rem auto 0;
  padding: .7rem 1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: 8px;
  background: var(--panel);
}
.job button { margin-left: auto; }

.spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--line);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- messages --- */

.message {
  max-width: 60rem;
  margin: 1rem auto 0;
  padding: .7rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  background: var(--panel);
}
.message.error { border-left-color: var(--red); }
.error { color: var(--red); min-height: 1.2rem; margin: .6rem 0 0; }

/* --- results and codes --- */

#codes-actions:not(:empty) { margin-bottom: 1.1rem; }

.result { border-left: 3px solid var(--line); }
.result.running { border-left-color: var(--dim); }
.result.ok { border-left-color: var(--green); }
/* Paid for, code on its way. */
.result.processing { border-left-color: #3ba0f0; }
.result.ambiguous { border-left-color: var(--amber); }
.result.failed { border-left-color: var(--red); }
.result p { color: var(--dim); margin: .5rem 0; }
.result-head { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .3rem; }

.code {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: .7rem;
  padding: .6rem .8rem;
  background: #12141a;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.code-value {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 1.05rem;
  letter-spacing: .04em;
  color: var(--green);
  user-select: all;
  word-break: break-all;
}
.code button { margin-left: auto; }

/* --- sign in --- */

.login { max-width: 22rem; margin: 15vh auto 0; }
.login h1 { margin: 0 0 .5rem; font-size: 1.2rem; }
.login button { width: 100%; margin-top: 1.2rem; }

@media (max-width: 34rem) {
  .row { flex-direction: column; align-items: stretch; }
  header nav { margin-left: 0; width: 100%; }
  th:nth-child(4), td:nth-child(4), th:nth-child(5), td:nth-child(5) { display: none; }
}