/* The account page: one card in the middle, whether you are signing in or already in. */
.account { padding: 54px 0 80px; }
.acc-box { display: flex; justify-content: center; }

.acc-card {
  width: 100%; max-width: 420px; padding: 30px 28px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--card);
}
.acc-card.wide { max-width: 620px; }
.acc-card h1 { font-size: 22px; margin: 0 0 2px; }
.acc-card h2 { font-size: 15px; margin: 30px 0 6px; color: var(--text); }
.acc-card h2:first-of-type { margin-top: 22px; }
.acc-card .muted { font-size: 14px; margin: 0 0 12px; }

/* the two tabs at the top when you are signed out */
.acc-tabs { display: flex; gap: 6px; margin-bottom: 22px; background: var(--bg2); padding: 4px; border-radius: 12px; }
.acc-tab {
  flex: 1; padding: 9px 10px; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--muted); font: 600 14px system-ui;
}
.acc-tab.on { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.acc-tab:hover:not(.on) { color: var(--text); }

.acc-form { display: flex; flex-direction: column; gap: 14px; }
.acc-form label { display: flex; flex-direction: column; gap: 6px; font: 600 13.5px system-ui; color: var(--muted); }
.acc-form label small { font-weight: 400; }
.acc-form input {
  padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg2); color: var(--text); font: 400 15px system-ui;
}
.acc-form input:focus { outline: 2px solid var(--green); outline-offset: -1px; border-color: transparent; }
.acc-form button[type=submit] { margin-top: 4px; }
.acc-hint { font-size: 12.5px; color: var(--dim); margin: 0; }

/* the Google button, in Google's own white so people recognise it */
.btn.google {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  background: #fff; color: #1f1f1f; border: 1px solid #dadce0; font-weight: 600;
}
.btn.google:hover { background: #f5f6f7; }
.acc-or { position: relative; text-align: center; margin: 18px 0; }
.acc-or:before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line);
}
.acc-or span { position: relative; background: var(--card); padding: 0 12px; color: var(--dim); font-size: 13px; }

/* a line of feedback above the form */
.acc-note { padding: 11px 13px; border-radius: 10px; font-size: 14px; margin-bottom: 18px; }
.acc-note.bad { background: rgba(255, 90, 90, .1); color: #ff9b9b; border: 1px solid rgba(255, 90, 90, .25); }
.acc-note.good { background: rgba(0, 229, 138, .1); color: var(--green); border: 1px solid rgba(0, 229, 138, .25); }

.acc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }

/* the subscription block */
.acc-plan {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg2);
  font-size: 14px; color: var(--muted);
}
.acc-plan.live { border-color: rgba(0, 229, 138, .3); }
.acc-plan b { color: var(--text); font-size: 16px; }
.acc-plan .tag {
  background: var(--green); color: #05130d; font: 700 11.5px system-ui;
  padding: 4px 9px; border-radius: 999px;
}
.acc-plan .tag.off { background: var(--line); color: var(--muted); }
.acc-plan .btn { margin-left: auto; }

/* the licence key */
.acc-key { display: flex; gap: 10px; align-items: center; }
.acc-key code {
  flex: 1; padding: 12px 14px; border-radius: 10px; background: var(--bg2);
  border: 1px solid var(--line); font: 700 16px/1 ui-monospace, monospace;
  letter-spacing: 1px; color: var(--green); overflow-x: auto; white-space: nowrap;
}
.linky {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--green); font: inherit; text-decoration: underline;
}

@media (max-width: 560px) {
  .acc-card { padding: 24px 20px; }
  .acc-plan .btn { margin-left: 0; width: 100%; }
}

/* the username row: a field and a button side by side */
.acc-form.row { flex-direction: row; align-items: center; }
.acc-form.row input { flex: 1; }
.acc-form.row button { margin-top: 0; white-space: nowrap; }