/* Krishna Flow: account page only. Loaded after style.css and uses its
   tokens (--ink, --muted, --border, --surface, --accent-text, --danger,
   --radius-*, --font-*) so this page inherits the site's look without
   touching the shared stylesheet. */

.account-plan-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}
.account-plan-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

/* Flat hairline meter: a track and a solid fill, no gradient. */
.usage-meter { margin-bottom: 1.5rem; }
.usage-meter-track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--border);
  overflow: hidden;
}
.usage-meter-fill {
  height: 100%;
  width: 0%;
  background: var(--accent-text);
  border-radius: var(--radius-pill);
  transition: width 0.3s ease;
}
.usage-meter-resets {
  margin: 0.6rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--muted);
}

/* Both blocks below used to read background: var(--ground), a token that
   was never defined anywhere in style.css, so the declaration was invalid
   and silently dropped: no fill, just a border. --surface is the token the
   rest of the site actually uses for a card like this. */
.billing-block {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem;
  margin-bottom: 2rem;
}
.billing-block p { margin: 0.25rem 0 0; font-size: 0.95rem; color: var(--ink); }
.billing-warning { color: var(--danger) !important; font-size: 0.88rem !important; }

.upgrade-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem;
  margin-bottom: 2rem;
}
.upgrade-block p { margin: 0; font-size: 0.95rem; color: var(--ink); }
.upgrade-block a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }