.ll-account {
  --account-ink: #171717;
  --account-muted: #5f6266;
  --account-rule: #d8d8d8;
  --account-panel: #ffffff;
  --account-panel-alt: #f5f5f2;
  --account-accent: #2f7081;
  --account-danger: #9f3127;
  max-width: 760px;
  margin: 0 auto;
}

body.quarto-dark .ll-account {
  --account-ink: #eeeeee;
  --account-muted: #bbbbbb;
  --account-rule: #3d3d3d;
  --account-panel: #191919;
  --account-panel-alt: #242424;
  --account-accent: #82c4d4;
  --account-danger: #f08a7d;
}

.ll-account h1 {
  margin-bottom: 0.35rem;
}

.ll-account__intro {
  color: var(--account-muted);
  max-width: 58ch;
}

.ll-account__shell {
  border: 1px solid var(--account-rule);
  border-radius: 6px;
  background: var(--account-panel);
  padding: clamp(1rem, 3vw, 1.5rem);
  margin-top: 1.25rem;
}

.ll-account__tabs,
.ll-account__oauth,
.ll-account__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.ll-account button {
  min-height: 2.5rem;
  border: 1px solid var(--account-rule);
  border-radius: 4px;
  background: var(--account-panel-alt);
  color: var(--account-ink);
  font: inherit;
  cursor: pointer;
  padding: 0.55rem 0.85rem;
}

.ll-account button[aria-selected="true"],
.ll-account button[type="submit"] {
  border-color: var(--account-accent);
  background: var(--account-accent);
  color: #ffffff;
}

.ll-account button:disabled {
  cursor: wait;
  opacity: 0.7;
}

.ll-account__status {
  min-height: 1.6rem;
  margin: 1rem 0;
  color: var(--account-muted);
}

.ll-account__status[data-tone="success"] {
  color: var(--account-accent);
}

.ll-account__status[data-tone="warning"],
.ll-account__status[data-tone="error"] {
  color: var(--account-danger);
}

.ll-account form {
  display: grid;
  gap: 0.95rem;
}

.ll-account label {
  display: grid;
  gap: 0.35rem;
  color: var(--account-muted);
  font-size: 0.95rem;
}

.ll-account input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--account-rule);
  border-radius: 4px;
  background: var(--account-panel);
  color: var(--account-ink);
  font: inherit;
  padding: 0.7rem 0.75rem;
}

.ll-account__oauth {
  border-top: 1px solid var(--account-rule);
  margin-top: 1rem;
  padding-top: 1rem;
}

.ll-account__user {
  border: 1px solid var(--account-rule);
  border-radius: 4px;
  background: var(--account-panel-alt);
  padding: 1rem;
}

.ll-account__fine-print {
  color: var(--account-muted);
  font-size: 0.92rem;
}

.ll-account [hidden] {
  display: none !important;
}