/* ============================================================
   account.css -- the customer account portal

   Loaded only by /account/. Everything that already exists in styles.css --
   the palette, the nav, .btn-primary, the auth modal -- comes from there;
   this file is the portal shell and the screens inside it.

   The page ships EMPTY. Every value on it arrives from the Nexus account API
   and is written in by account.js, so what is styled here are the states that
   rendering passes through: loading, loaded, and the empty case. There is no
   copy in the markup for a stylesheet to work around.
   ============================================================ */

.acct-page {
  /* The nav is fixed at 64px; the portal starts under it. */
  padding-top: 64px;
  min-height: 100vh;
}

/* [hidden] HAS TO WIN, and by default it does not.
   The browser's own rule is `[hidden] { display: none }`, and any author rule
   that sets display -- .acct-boot's `display: flex`, for one -- beats it. So
   `boot.hidden = true` did nothing: the 60vh boot block stayed above the
   portal and pushed the whole thing most of a screen down, with the spinner
   still turning over it. */
[hidden] { display: none !important; }

/* Signed in: no marketing nav, and the portal takes the top of the screen. */
body.acct-signed-in #site-header { display: none; }
body.acct-signed-in .acct-page { padding-top: 0; }
body.acct-signed-in .acct-rail { top: 0; height: 100vh; }

/* ── loading / error / gate ─────────────────────────────────── */

.acct-boot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; min-height: 60vh; padding: 40px 20px; text-align: center;
}
.acct-boot h1 { font-family:'Exo 2',sans-serif; font-size: 26px; font-weight: 800; color: var(--white); }
.acct-boot p { font-size: 15px; color: var(--muted); max-width: 54ch; }
.acct-boot .btn-primary { margin-top: 4px; }

/* The signed-out sign-in form. Narrow, centred, and the same controls the rest
   of the portal uses -- it is the first thing anyone sees of this page. */
.acct-signin {
  width: 100%; max-width: 340px; margin: 4px auto 0;
  display: flex; flex-direction: column; gap: 13px; text-align: left;
}
.acct-signin .acct-alert { margin-bottom: 0; }
.acct-signin-foot { text-align: center; font-size: 12.5px; }
.acct-signin-foot a { color: var(--blue); text-decoration: none; }
.acct-signin-foot a:hover { text-decoration: underline; }
.acct-btn.btn-block { width: 100%; }

.acct-spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.12); border-top-color: var(--cyan);
  animation: acct-spin 0.8s linear infinite;
}
@keyframes acct-spin { to { transform: rotate(360deg); } }

/* ── shell ──────────────────────────────────────────────────── */

.acct-shell { display: grid; grid-template-columns: 224px minmax(0,1fr); align-items: start; }

.acct-rail {
  position: sticky; top: 64px; align-self: start;
  height: calc(100vh - 64px); overflow-y: auto;
  border-right: 1px solid var(--border); background: var(--dark2);
  padding: 18px 12px; display: flex; flex-direction: column; gap: 2px;
}
.acct-brand {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 4px 10px 14px; margin-bottom: 4px;
  background: none; border: none; border-bottom: 1px solid var(--border);
  font-family: inherit; text-align: left; cursor: pointer;
}
.acct-brand img { height: 30px; width: auto; flex-shrink: 0; }
.acct-brand > span { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.acct-brand-name {
  font-family:'Exo 2',sans-serif; font-weight: 700; font-size: 16px;
  letter-spacing: 0.09em; color: var(--white);
}
.acct-brand-sub {
  font-family:'Exo 2',sans-serif; font-size: 8.5px; font-weight: 600;
  letter-spacing: 0.22em; margin-top: 3px;
  background: linear-gradient(90deg, var(--blue), var(--purple));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.acct-brand:hover .acct-brand-name { color: var(--cyan); }

.acct-rail-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: #626b7e; padding: 14px 10px 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acct-nav {
  display: flex; align-items: center; gap: 10px; width: 100%; position: relative;
  padding: 8px 10px; border-radius: 8px; border: none; background: none;
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  color: var(--muted); cursor: pointer; text-align: left;
  transition: color .15s, background .15s;
}
.acct-nav:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.acct-nav.on { color: var(--white); background: rgba(59,111,245,0.14); font-weight: 600; }
.acct-nav.on::before {
  content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px;
  background: var(--cyan); border-radius: 0 3px 3px 0;
}
.acct-nav svg { flex-shrink: 0; }
.acct-rail-spacer { flex: 1 1 auto; min-height: 16px; min-width: 12px; }
.acct-signout { border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; padding-top: 12px; }
.acct-signout:hover { color: #ff9aa3; background: rgba(232,49,63,0.08); }
.acct-nav .acct-count {
  margin-left: auto; font-size: 11px; font-weight: 700; padding: 1px 7px;
  border-radius: 999px; background: rgba(255,255,255,0.08); color: var(--muted);
}
.acct-nav .acct-count.alert { background: rgba(232,49,63,0.14); color: #ff9aa3; }

.acct-main { padding: 26px 30px 70px; max-width: 1180px; }
.acct-view { display: none; }
.acct-view.on { display: block; }

/* ── site chooser ────────────────────────────────────────────────
   Only drawn for an account holding more than one site. It is the first thing
   in the content column rather than an item in the rail, because on a
   multi-site account it decides what every screen below it is ABOUT -- the
   invoices, the card, the people. Buried in the rail it read as a filter; at
   the top it reads as the subject. */
.acct-chooser {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 20px;
  background: var(--dark3); border: 1px solid var(--border); border-radius: 12px;
}
.acct-chooser-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: #626b7e; white-space: nowrap;
}
.acct-chooser .acct-chooser-meta {
  margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted);
}

.acct-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
.acct-head h1 { font-family:'Exo 2',sans-serif; font-size: 25px; font-weight: 800; color: var(--white); }
.acct-head p { font-size: 13.5px; color: var(--muted); margin-top: 3px; }
.acct-head .acct-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── the TEST marker ────────────────────────────────────────────
   A site built against test databases and Stripe test mode. It rides on every
   shape the API returns that names a site, and it is deliberately loud: a
   customer reading an amount that will never appear on a statement should see
   why without working it out. */
.acct-test {
  display: inline-flex; align-items: center;
  padding: 1px 7px; margin-left: 7px; border-radius: 4px;
  font-family:'Exo 2',sans-serif; font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: #101218; background: var(--amber, #f59e0b);
  vertical-align: middle; white-space: nowrap;
}
.acct-test.ghost { color: #fbc35c; background: rgba(245,158,11,0.14); border: 1px solid rgba(245,158,11,0.4); }

/* ── cards ──────────────────────────────────────────────────── */

.acct-card { background: var(--dark3); border: 1px solid var(--border); border-radius: 12px; }
.acct-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.acct-card-head h3 { font-family:'Exo 2',sans-serif; font-size: 14.5px; font-weight: 700; color: var(--white); }
.acct-card-head .sub { font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 1px; font-family:'Inter',sans-serif; }
.acct-card-body { padding: 18px; }
.acct-card-foot {
  padding: 12px 18px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: 12.5px; color: var(--muted); flex-wrap: wrap;
}

.acct-grid { display: grid; gap: 16px; }
.acct-g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.acct-g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.acct-stack { display: flex; flex-direction: column; gap: 16px; }
.acct-section-title { font-family:'Exo 2',sans-serif; font-size: 15px; font-weight: 700; color: var(--white); margin: 24px 0 12px; }

/* ── the lockout banner ─────────────────────────────────────── */

.acct-banner {
  display: flex; gap: 15px; padding: 17px 19px; border-radius: 12px; margin-bottom: 16px;
  border: 1px solid rgba(232,49,63,0.36);
  background: linear-gradient(120deg, rgba(232,49,63,0.14), rgba(232,49,63,0.05));
}
.acct-banner .acct-banner-icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
  background: rgba(232,49,63,0.18); color: #ff8a94;
  display: flex; align-items: center; justify-content: center;
}
.acct-banner h2 { font-family:'Exo 2',sans-serif; font-size: 16.5px; font-weight: 800; color: #ffb4bb; margin-bottom: 4px; }
.acct-banner p { font-size: 13.5px; color: #e6c3c7; max-width: 68ch; }
.acct-banner-facts { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 11px; font-size: 12.5px; color: #d2a9ae; }
.acct-banner-facts b { color: #ffd0d5; font-weight: 600; }
.acct-banner-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

.acct-banner.warn { border-color: rgba(245,158,11,0.36); background: linear-gradient(120deg, rgba(245,158,11,0.13), rgba(245,158,11,0.04)); }
.acct-banner.warn .acct-banner-icon { background: rgba(245,158,11,0.18); color: #fbc35c; }
.acct-banner.warn h2 { color: #fbc35c; }
.acct-banner.warn p { color: #ddc79b; }
.acct-banner.warn .acct-banner-facts { color: #c9b287; }
.acct-banner.warn .acct-banner-facts b { color: #f7dfae; }

.acct-banner.info { border-color: rgba(59,111,245,0.36); background: linear-gradient(120deg, rgba(59,111,245,0.13), rgba(59,111,245,0.04)); }
.acct-banner.info .acct-banner-icon { background: rgba(59,111,245,0.2); color: #93b0fb; }
.acct-banner.info h2 { color: #b9caff; }
.acct-banner.info p { color: #c2ccea; }

/* ── pills ──────────────────────────────────────────────────── */

.acct-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px; border: 1px solid transparent;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap;
}
.acct-pill::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: currentColor; }
.acct-pill.ok   { background: rgba(34,197,94,0.12);  border-color: rgba(34,197,94,0.3);  color: #7ee2a4; }
.acct-pill.bad  { background: rgba(232,49,63,0.12);  border-color: rgba(232,49,63,0.32); color: #ff9aa3; }
.acct-pill.warn { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.32);color: #fbc35c; }
.acct-pill.info { background: rgba(59,111,245,0.13); border-color: rgba(59,111,245,0.3); color: #93b0fb; }
.acct-pill.mute { background: rgba(255,255,255,0.05);border-color: rgba(255,255,255,0.13);color: var(--muted); }
.acct-pill.plain::before { display: none; }

/* ── definition rows ────────────────────────────────────────── */

.acct-dl { display: flex; flex-direction: column; }
.acct-dl > div {
  display: grid; grid-template-columns: 138px minmax(0,1fr); gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.acct-dl > div:last-child { border-bottom: none; }
.acct-dl dt { font-size: 12.5px; color: var(--muted); }
.acct-dl dd { font-size: 13.5px; color: var(--text); min-width: 0; overflow-wrap: anywhere; }

.acct-mono { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; font-size: 12.5px; }
.acct-num, .acct-amount { font-variant-numeric: tabular-nums; }
.acct-amount { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; }

/* ── tables ─────────────────────────────────────────────────── */

.acct-tw { overflow-x: auto; }
.acct-tw table { width: 100%; border-collapse: collapse; }
.acct-tw thead th {
  text-align: left; padding: 9px 14px; white-space: nowrap;
  font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: #626b7e; background: rgba(255,255,255,0.02); border-bottom: 1px solid var(--border);
}
.acct-tw tbody td { padding: 11px 14px; font-size: 13.5px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.acct-tw tbody tr:last-child td { border-bottom: none; }
.acct-tw tbody tr:hover td { background: rgba(255,255,255,0.022); }
.acct-tw tbody tr.flag td { background: rgba(232,49,63,0.06); }
.acct-tw tbody tr.flag:hover td { background: rgba(232,49,63,0.09); }
.acct-tw td.right, .acct-tw th.right { text-align: right; }
.acct-tw td.acts { white-space: nowrap; text-align: right; }
.acct-tw td.acts > * { margin-left: 6px; }

.acct-person { display: flex; align-items: center; gap: 10px; }

/* The statement card: period picker and its date range on the left, the three
   document actions on the right, then the totals and the timeline. */
.acct-statement-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.acct-statement-range { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; }
.acct-statement-acts { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.acct-date {
  padding: 5px 8px; font-family: inherit; font-size: 12.5px; color-scheme: dark;
  background: var(--dark2); border: 1px solid rgba(255,255,255,0.13); border-radius: 8px; color: var(--text);
}
.acct-date:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,111,245,0.15); }
.acct-facts.acct-facts-3 { grid-template-columns: repeat(3, minmax(0,1fr)); margin: 14px; }
.acct-pos { color: #7ee2a4; }

/* The figure is monospace so columns of money line up; the caption under it is
   a sentence and should read like one. Without this, "Across every site" and a
   statement's date range came out in the code font too. */
.acct-amount small { font-family: 'Inter', system-ui, sans-serif; letter-spacing: 0; }
.acct-neg { color: #ff9aa3; }

/* Site users: filter tabs and search above the list, actions that wrap rather
   than pushing the table sideways, and disabled rows dimmed so the eye lands on
   the people who can actually sign in. */
.acct-users-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.acct-users-search {
  width: 100%; max-width: 260px; padding: 7px 11px; font-family: inherit; font-size: 13px;
  background: var(--dark2); border: 1px solid rgba(255,255,255,0.13);
  border-radius: 8px; color: var(--text);
}
.acct-users-search:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,111,245,0.15); }
/* No wrapping: folded onto two lines the actions made every row twice as tall,
   and the exact sign-in time broke "9:31 / AM" across lines. The table already
   scrolls sideways on its own when there is not room. */
.acct-user-acts { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: nowrap; }
.acct-tw td.acct-subject small { white-space: nowrap; }
.acct-tw tbody tr.acct-row-off td { opacity: 0.62; }
.acct-tw tbody tr.acct-row-off td.acts { opacity: 1; }
.acct-avatar {
  width: 30px; height: 30px; border-radius: 999px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family:'Exo 2',sans-serif; font-size: 11.5px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--violet));
}
.acct-person .pn { font-weight: 600; font-size: 13.5px; color: var(--text); }
.acct-person .pe { font-size: 11.5px; color: var(--muted); }

.acct-subject { font-weight: 500; color: var(--text); }
.acct-subject small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; }

/* ── site cards ─────────────────────────────────────────────── */

.acct-site {
  display: flex; flex-direction: column; gap: 13px; padding: 17px;
  background: var(--dark3); border: 1px solid var(--border); border-radius: 12px;
  transition: border-color .18s;
}
.acct-site:hover { border-color: rgba(255,255,255,0.13); }
.acct-site.suspended { border-color: rgba(232,49,63,0.3); }
.acct-site.test { border-color: rgba(245,158,11,0.3); }
.acct-site-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.acct-site h3 { font-family:'Exo 2',sans-serif; font-size: 16px; font-weight: 700; color: var(--white); }
.acct-site .acct-site-prod { font-size: 12px; color: var(--muted); margin-top: 2px; }
.acct-site-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12px; color: var(--muted); }
.acct-site-meta b { color: var(--text); font-weight: 500; }
.acct-site-foot { display: flex; gap: 8px; margin-top: auto; padding-top: 3px; flex-wrap: wrap; }

/* ── facts strip ────────────────────────────────────────────── */

.acct-facts {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  background: var(--dark3); margin-bottom: 16px;
}
.acct-facts > div { padding: 14px 17px; border-right: 1px solid var(--border); }
.acct-facts > div:last-child { border-right: none; }
.acct-facts dt { font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: #626b7e; margin-bottom: 5px; }
.acct-facts dd { font-size: 15px; font-weight: 600; color: var(--text); }
.acct-facts dd small { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); margin-top: 2px; }

/* ── segmented control ──────────────────────────────────────── */

.acct-seg { display: inline-flex; gap: 3px; padding: 3px; background: var(--dark2); border: 1px solid var(--border); border-radius: 999px; }
.acct-seg button {
  padding: 5px 15px; font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--muted); background: none; border: none; border-radius: 999px;
  cursor: pointer; transition: color .15s, background .15s;
}
.acct-seg button:hover { color: var(--text); }
.acct-seg button.on { background: rgba(59,111,245,0.2); color: var(--white); }

/* ── roles ──────────────────────────────────────────────────── */

.acct-role { display: flex; flex-direction: column; gap: 8px; padding: 15px 16px; background: var(--dark3); border: 1px solid var(--border); border-radius: 12px; }
.acct-role.builtin { background: var(--dark2); }
.acct-role h4 { font-family:'Exo 2',sans-serif; font-size: 14px; font-weight: 700; color: var(--white); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acct-role p { font-size: 12.5px; color: var(--muted); }
.acct-role .acct-role-count { font-size: 12px; color: #626b7e; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--border); }
.acct-matrix td.c { text-align: center; }
.acct-yes { color: #22c55e; }
.acct-no  { color: #3a4256; }

/* ── billing ────────────────────────────────────────────────── */

.acct-pm {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 15px 16px; border: 1px solid rgba(255,255,255,0.13); border-radius: 12px;
  background: linear-gradient(120deg, rgba(59,111,245,0.09), rgba(124,58,237,0.06));
}
.acct-pm-brand {
  width: 48px; height: 32px; border-radius: 5px; background: #0d1220;
  border: 1px solid rgba(255,255,255,0.13); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family:'Exo 2',sans-serif; font-weight: 800; font-size: 11px;
  letter-spacing: 0.06em; color: #cfd6e6; text-transform: uppercase;
}
.acct-pm-num { font-family: ui-monospace, Menlo, monospace; font-size: 13.5px; color: var(--text); }
.acct-pm-sub { font-size: 12px; color: var(--muted); }

.acct-note {
  display: flex; gap: 9px; padding: 11px 13px; border-radius: 8px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  font-size: 12.5px; color: var(--muted); line-height: 1.5;
}
.acct-note svg { flex-shrink: 0; margin-top: 1px; color: #626b7e; }
/* Body copy inside a card. The only prose the portal has that is not a note,
   a subtitle or an empty state. */
.acct-p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--muted); }
.acct-note.warn { border-color: rgba(245,158,11,0.3); background: rgba(245,158,11,0.07); color: #e3c489; }
.acct-note.warn svg { color: #fbc35c; }

/* ── tickets ────────────────────────────────────────────────── */

.acct-prio { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); }
.acct-prio i { width: 3px; height: 13px; border-radius: 2px; display: block; background: #3a4256; }
.acct-prio.high i, .acct-prio.urgent i { background: #e8313f; }
.acct-prio.medium i { background: var(--blue); }

.acct-thread { display: flex; flex-direction: column; gap: 14px; }
.acct-msg { padding: 13px 15px; border-radius: 10px; border: 1px solid var(--border); background: var(--dark2); }
.acct-msg.support { border-color: rgba(59,111,245,0.28); background: rgba(59,111,245,0.06); }
.acct-msg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.acct-msg-who { font-size: 13px; font-weight: 600; color: var(--white); }
.acct-msg-when { font-size: 11.5px; color: var(--muted); }
.acct-msg-body { font-size: 13.5px; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ── security ───────────────────────────────────────────────── */

.acct-sessions { list-style: none; }
.acct-sessions li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.acct-sessions li:last-child { border-bottom: none; }
.acct-sessions .s-main { flex: 1; min-width: 160px; }
.acct-sessions .s-name { font-size: 13.5px; font-weight: 500; color: var(--text); }
.acct-sessions .s-sub { font-size: 11.5px; color: var(--muted); }

/* ── forms ──────────────────────────────────────────────────── */

.acct-field { display: block; }
.acct-field label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.acct-field .acct-label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.acct-field .acct-seg { flex-wrap: wrap; }
.acct-kind { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.acct-kind.req { background: rgba(59,111,245,0.18); color: #9db6ff; }
.acct-field .hint { font-size: 11.5px; color: #626b7e; margin-top: 5px; }
.acct-field input[type=text], .acct-field input[type=email], .acct-field input[type=password], .acct-field input[type=tel],
.acct-field select, .acct-field textarea, .acct-inline-select, .acct-chooser select {
  width: 100%; padding: 9px 11px; font-family: inherit; font-size: 13.5px;
  background: var(--dark2); border: 1px solid rgba(255,255,255,0.13);
  border-radius: 8px; color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.acct-field input:focus, .acct-field select:focus, .acct-field textarea:focus,
.acct-inline-select:focus, .acct-chooser select:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,111,245,0.15);
}
.acct-field textarea { resize: vertical; min-height: 110px; line-height: 1.55; }
/* After the shared rule above, not before it: that one sets width:100% and the
   two selectors are equally specific, so source order decides. */
.acct-chooser select { width: auto; max-width: 340px; flex: 1 1 220px; font-weight: 600; }
.acct-inline-select { width: auto; max-width: 160px; padding: 5px 9px; font-size: 12.5px; }
.acct-two { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; }

/* Password reveal. 44px of hit area, which is the smallest a thumb reliably
   finds -- the icon inside it is 18px and that is not a target. */
.acct-peek-wrap { position: relative; }
.acct-peek-wrap input { padding-right: 46px; }
.acct-peek {
  position: absolute; top: 0; right: 0; width: 44px; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--muted); border-radius: 0 8px 8px 0;
}
.acct-peek:hover { color: var(--text); }
.acct-peek svg { display: block; }

.acct-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 15px; font-family: inherit; font-size: 13.5px; font-weight: 600;
  white-space: nowrap; color: var(--text);
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.13);
  border-radius: 8px; cursor: pointer; text-decoration: none;
  transition: background .16s, border-color .16s, color .16s, transform .12s;
}
.acct-btn:hover { background: rgba(255,255,255,0.1); color: var(--white); }
.acct-btn[disabled] { opacity: .5; cursor: not-allowed; }
.acct-btn.primary { background: linear-gradient(135deg, var(--blue), var(--violet)); border-color: transparent; color: #fff; }
.acct-btn.primary:hover { opacity: .93; transform: translateY(-1px); }
.acct-btn.danger { background: rgba(232,49,63,0.12); border-color: rgba(232,49,63,0.35); color: #ff9aa3; }
.acct-btn.danger:hover { background: rgba(232,49,63,0.2); color: #ffb4bb; }
.acct-btn.sm { padding: 5px 11px; font-size: 12.5px; }

.acct-alert { display: none; margin-bottom: 14px; padding: 11px 14px; border-radius: 9px; font-size: 13.5px; line-height: 1.5; }
.acct-alert.show { display: block; }
.acct-alert.err { background: rgba(232,49,63,0.12); border: 1px solid rgba(232,49,63,0.3); color: #ff9aa3; }
.acct-alert.ok  { background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.3); color: #7ee2a4; }

.acct-empty { padding: 30px 18px; text-align: center; color: var(--muted); font-size: 13.5px; }

/* ── modal ──────────────────────────────────────────────────── */

.acct-overlay {
  position: fixed; inset: 0; z-index: 1400; padding: 22px;
  display: none; align-items: center; justify-content: center;
  background: rgba(6,8,13,0.74);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.acct-overlay.open { display: flex; }
.acct-modal {
  width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto;
  background: linear-gradient(180deg, var(--dark4), var(--dark3));
  border: 1px solid rgba(255,255,255,0.13); border-radius: 16px;
  box-shadow: 0 28px 80px rgba(0,0,0,0.65);
}
.acct-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 0; }
.acct-modal-head h3 { font-family:'Exo 2',sans-serif; font-size: 18px; font-weight: 800; color: var(--white); }
.acct-modal-head p { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.acct-modal-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 13px; }
.acct-modal-foot { padding: 15px 22px 20px; display: flex; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.acct-x {
  background: none; border: none; color: var(--muted); cursor: pointer;
  padding: 4px; border-radius: 6px; line-height: 0;
}
.acct-x:hover { color: var(--white); background: rgba(255,255,255,0.07); }
body.acct-lock { overflow: hidden; }

/* ── toast ──────────────────────────────────────────────────── */

.acct-toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 1500;
  transform: translateX(-50%) translateY(14px);
  display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 11px;
  background: rgba(22,25,35,0.97); border: 1px solid rgba(255,255,255,0.13);
  color: var(--text); font-size: 13.5px; box-shadow: 0 16px 44px rgba(0,0,0,0.5);
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
}
.acct-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.acct-toast svg { color: #22c55e; flex-shrink: 0; }
.acct-toast.err svg { color: #ff9aa3; }

/* ── responsive ─────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .acct-g3, .acct-facts { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .acct-facts > div:nth-child(2) { border-right: none; }
}
@media (max-width: 860px) {
  .acct-shell { grid-template-columns: minmax(0,1fr); }
  /* The rail becomes a slide-out menu (opened from the phone top bar), full height,
     every label visible and every entry a comfortable tap. */
  .acct-rail, body.acct-signed-in .acct-rail {
    position: fixed; left: 0; top: 0; bottom: 0; width: 280px; max-width: 86vw; height: 100vh;
    flex-direction: column; overflow-y: auto; gap: 2px; z-index: 70; padding: 16px 12px;
    border-right: 1px solid var(--border); border-bottom: none; background: var(--dark2);
    transform: translateX(-102%); transition: transform .2s ease, visibility .2s; align-items: stretch;
    visibility: hidden;
  }
  body.acct-drawer-open .acct-rail { transform: none; visibility: visible; box-shadow: 0 0 40px rgba(0,0,0,.6); }
  .acct-rail-label { display: block; }
  .acct-brand, body.acct-signed-in .acct-brand { display: flex; }
  .acct-nav { width: auto; white-space: nowrap; min-height: 48px; }
  .acct-signout { border-radius: 8px; }
  .acct-main { padding: 16px 16px 96px; }
  .acct-btn { min-height: 44px; }
  .acct-chooser select, .acct-rule select, .acct-inline-select { min-height: 44px; }
  .acct-g2, .acct-two { grid-template-columns: minmax(0,1fr); }
  .acct-chooser { padding: 11px 13px; }
  .acct-users-search { max-width: none; }
  .acct-statement-acts { margin-left: 0; }
  .acct-chooser select { max-width: none; flex: 1 1 100%; }
  .acct-chooser .acct-chooser-meta { margin-left: 0; }
  .acct-dl > div { grid-template-columns: minmax(0,1fr); gap: 2px; }
}
@media (max-width: 560px) {
  .acct-facts { grid-template-columns: minmax(0,1fr); }
  .acct-facts > div { border-right: none; border-bottom: 1px solid var(--border); }
  .acct-facts > div:last-child { border-bottom: none; }
}
@media (prefers-reduced-motion: reduce) {
  .acct-spinner { animation-duration: 2s; }
  .acct-toast, .acct-btn, .acct-nav { transition-duration: 0.01ms; }
}

/* Services view and the "raised for" marks on tickets */
.acct-svc-name { font-weight: 600; }
.acct-sub { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.acct-note-inline { color: var(--muted); font-size: 12px; }
.acct-actions select { max-width: 220px; }

/* ── Phone shell: top bar, bottom tabs, the menu's scrim (hidden on wide screens) ── */
.acct-mbar, .acct-mtabs, .acct-scrim { display: none; }
@media (max-width: 860px) {
  .acct-mbar { display: flex; align-items: center; gap: 6px; position: sticky; top: 0; z-index: 50; height: 60px;
               padding: 0 8px; background: var(--dark2); border-bottom: 1px solid var(--border); }
  .acct-mbar-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
                   border: 0; background: transparent; color: inherit; border-radius: 10px; cursor: pointer; }
  .acct-mbar-title { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
  .acct-mbar-k { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .acct-mbar-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .acct-mtabs { display: flex; position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 55; height: 64px;
                margin: 0; padding: 0 0 env(safe-area-inset-bottom); background: var(--dark2); border-top: 1px solid var(--border); }
  .acct-mtab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
               min-height: 56px; border: 0; background: transparent; color: var(--muted); font-family: inherit; font-size: 11px; font-weight: 500; cursor: pointer; }
  .acct-mtab.on { color: #fff; }
  body.acct-drawer-open .acct-scrim { display: block; position: fixed; inset: 0; z-index: 60; border: 0;
                                      background: rgba(0,0,0,.55); cursor: pointer; }
  body:not(.acct-signed-in) .acct-mbar, body:not(.acct-signed-in) .acct-mtabs { display: none; }
  .acct-overlay .acct-modal, .acct-modal { width: auto; max-width: calc(100vw - 24px); }
  .acct-tw { -webkit-overflow-scrolling: touch; }
}
@media (prefers-reduced-motion: reduce) { .acct-rail, body.acct-signed-in .acct-rail { transition: none; } }

/* Account settings rows */
.acct-rule { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
             padding: 12px 0; border-top: 1px solid var(--border); }
.acct-rule:first-child { border-top: 0; padding-top: 0; }
.acct-rule b { display: block; font-weight: 600; }
.acct-rule small { color: var(--muted); font-size: 12.5px; }

.acct-inline-select { height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border);
                      background: var(--dark4); color: var(--text); font: inherit; max-width: 100%; }
.acct-stack { display: flex; flex-direction: column; gap: 18px; }

/* ── website files ─────────────────────────────────────────────
   /site-files.css is a synced copy of the Nexus console's file manager
   stylesheet, written against Nexus's color names. They are mapped onto
   this palette here, on :root, because its prompts and preview open on
   <body>, outside the card. */
:root {
  --surface: var(--dark3); --surface2: var(--dark2); --surface3: var(--dark4);
  --border2: rgba(255,255,255,0.11); --row-border: rgba(255,255,255,0.05);
  --row-hover: rgba(255,255,255,0.04); --heading: var(--white); --dim: #5c6578;
  --accent: var(--blue); --accent-text: #fff; --accent-dim: rgba(59,111,245,0.2);
  --bg: var(--dark); --amber: #f5b53d; --red: #ff6b6b; --green: #7ee2a8;
  --radius-lg: 12px;
}
.acct-files-card { padding: 0; overflow: hidden; }
/* .nxf (site-files.css) sets height:100% on the same element and loads later,
   so the height here needs the extra class to win. */
.acct-files.nxf, .acct-files { height: min(680px, calc(100vh - 230px)); min-height: 440px; }
.acct-files-note { text-align: left; padding: 12px 2px 0; font-size: 12.5px; }
@media (max-width: 860px) {
  .acct-files.nxf, .acct-files { height: calc(100vh - 210px); min-height: 380px; }
}

/* ── Website Control Panel ──────────────────────────────────────
   One hosted website: section list on the left, the section on the right.
   At phone width the list becomes a strip of tabs that scrolls sideways on
   its own, so the page itself never does. */
.acct-wcp { display: grid; grid-template-columns: 196px minmax(0,1fr); gap: 20px; align-items: start; }
.acct-wcp-nav {
  position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px;
  padding: 8px; background: var(--dark3); border: 1px solid var(--border); border-radius: 12px;
}
.acct-wcp-tab {
  display: block; width: 100%; padding: 8px 11px; border: none; border-radius: 8px; background: none;
  font-family: inherit; font-size: 13px; font-weight: 500; color: var(--muted); text-align: left;
  cursor: pointer; white-space: nowrap; transition: color .15s, background .15s;
}
.acct-wcp-tab:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.acct-wcp-tab.on { color: var(--white); background: rgba(59,111,245,0.16); font-weight: 600; }
.acct-wcp-body { min-width: 0; }
.acct-wcp-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: -10px 0 18px; }
.acct-wcp-gap { margin-top: 16px; }
.acct-wcp-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.acct-card-head .acct-wcp-acts { margin-top: 0; }
.acct-wcp-loading { display: flex; align-items: center; gap: 10px; padding: 14px 4px; color: var(--muted); font-size: 13px; }
.acct-wcp-loading .acct-spinner { width: 18px; height: 18px; border-width: 2px; }
.acct-linkbtn {
  background: none; border: none; padding: 0; font: inherit; color: var(--blue);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.acct-linkbtn:hover { color: var(--cyan); }

/* Overview tiles */
.acct-wcp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 12px; }
.acct-wcp-live { margin-bottom: 12px; }
.acct-wcp-tile { padding: 14px 16px; background: var(--dark3); border: 1px solid var(--border); border-radius: 12px; min-width: 0; }
.acct-wcp-tile .k { font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: #626b7e; margin-bottom: 5px; }
.acct-wcp-tile .v { font-size: 16px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.acct-wcp-tile .s { font-size: 12px; color: var(--muted); margin-top: 3px; overflow-wrap: anywhere; }
.acct-wcp-tile.warn { border-color: rgba(245,158,11,0.32); }
.acct-wcp-tile.warn .v { color: #fbc35c; }
.acct-wcp-tile.bad { border-color: rgba(232,49,63,0.32); }
.acct-wcp-tile.bad .v { color: #ff9aa3; }
.acct-wcp-cur { margin-top: 4px; }

/* Settings */
.acct-wcp-group {
  font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: #626b7e; margin: 18px 0 8px;
}
.acct-wcp-group:first-child { margin-top: 0; }
.acct-wcp-feat { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--border); }
.acct-wcp-group + .acct-wcp-feat, .acct-card-body > .acct-wcp-feat:first-child { border-top: 0; padding-top: 0; }
.acct-wcp-fbody { flex: 1 1 auto; min-width: 0; }
.acct-wcp-fname { font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acct-wcp-desc { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin-top: 3px; }
.acct-wcp .hint, .acct-wcp-hint { font-size: 11.5px; color: #7a8396; margin-top: 5px; line-height: 1.5; }
.acct-wcp-warn { font-size: 12px; color: #fbc35c; margin-top: 6px; line-height: 1.5; }
.acct-wcp-err { color: #ff9aa3; }
small.acct-wcp-err { display: block; font-size: 12px; margin-top: 3px; white-space: pre-wrap; }
.acct-wcp-msg { font-size: 12.5px; margin-top: 8px; color: var(--muted); }
.acct-wcp-msg.ok { color: #7ee2a4; }
.acct-wcp-msg.err { color: #ff9aa3; }
.acct-wcp-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 12px; }
.acct-wcp-wide { grid-column: 1 / -1; min-width: 0; }
.acct-wcp-label { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
/* A list row: its fields side by side, wrapping on a narrow screen, Remove last. */
.acct-wcp-li {
  display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end;
  padding: 10px 0; border-top: 1px dashed var(--border);
}
.acct-wcp-li:nth-child(2) { border-top: 0; padding-top: 0; }
.acct-wcp-li > .acct-field { flex: 1 1 160px; min-width: 0; }
.acct-wcp-li > .acct-wcp-w2 { flex: 2 1 260px; }
.acct-wcp-li > .acct-check, .acct-wcp-li-del { flex: 0 0 auto; }
.acct-card-body > .acct-wcp-feat:only-child { padding-bottom: 0; }
.acct-wcp input[type=number] {
  width: 100%; padding: 9px 11px; font-family: inherit; font-size: 13.5px;
  background: var(--dark2); border: 1px solid rgba(255,255,255,0.13); border-radius: 8px; color: var(--text);
}
.acct-wcp input[type=number]:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,111,245,0.15); }
.acct-wcp-env { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
.acct-wcp-env-row { display: flex; gap: 10px; font-size: 12px; padding: 2px 0; min-width: 0; }
.acct-wcp-env-row .k { flex: 0 0 auto; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.acct-wcp-env-row .v { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.acct-wcp-links { margin-top: 8px; font-size: 13px; }
.acct-wcp-links a { color: var(--blue); }
.acct-wcp-panel { margin-top: 12px; min-width: 0; }
.acct-card-body > .acct-wcp-panel { margin-top: 0; }
.acct-wcp-ctl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; margin-bottom: 12px; }
.acct-wcp-pre { margin: 0; font-size: 11.5px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 140px; overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); }
.acct-log {
  margin: 0; max-height: 440px; overflow: auto; padding: 10px 12px; border-radius: 8px;
  background: var(--dark2); border: 1px solid var(--border); color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.acct-modal.wide { max-width: 860px; }
.acct-wcp-copyrow { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.acct-wcp-copyrow .acct-mono { overflow-wrap: anywhere; }

/* A checkbox with its label beside it. */
.acct-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--text); cursor: pointer; }
.acct-check input { margin: 3px 0 0; flex: 0 0 auto; accent-color: var(--blue); }

/* An on/off switch: a real checkbox under the drawing. */
.acct-switch { position: relative; flex: 0 0 auto; width: 40px; height: 22px; display: inline-block; }
.acct-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.acct-switch span { position: absolute; inset: 0; border-radius: 22px; background: rgba(255,255,255,0.14); transition: background .15s; }
.acct-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.acct-switch input:checked + span { background: #22a06b; }
.acct-switch input:checked + span::after { left: 21px; }
.acct-switch input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.acct-switch input[disabled] { cursor: not-allowed; }
/* Texts about one support ticket (off unless the customer asks and replies YES) */
.acct-tx { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 12px 14px; margin-bottom: 14px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--dark2); font-size: 13.5px; color: var(--text); }
.acct-tx-text { flex: 1 1 180px; min-width: 0; }
.acct-tx-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.acct-tx-err { flex-basis: 100%; font-size: 12.5px; color: #ff9aa3; }
.acct-tx-err:empty { display: none; }
.acct-switch.pending input:checked + span { background: #d98c00; }
.acct-tx-lead { font-size: 13.5px; color: var(--text); line-height: 1.55; margin: 0 0 14px; }
.acct-tx-agree { margin: 14px 0 10px; font-size: 12.5px; line-height: 1.5; }
.acct-tx-by { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600;
  vertical-align: 1px; background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.3); color: #7ee2a4; }
.acct-switch.off span, .acct-switch input[disabled] + span { opacity: .55; }

@media (max-width: 860px) {
  .acct-wcp { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .acct-wcp-nav {
    position: static; flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; padding: 6px;
  }
  .acct-wcp-tab { width: auto; flex: 0 0 auto; min-height: 40px; }
  .acct-wcp-pills { margin-top: -8px; }
  .acct-switch { width: 46px; height: 26px; }
  .acct-switch span::after { width: 20px; height: 20px; }
  .acct-switch input:checked + span::after { left: 23px; }
}

/* Usage account */
.acct-usage-bal { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.acct-usage-k { font-size: 12.5px; color: var(--muted); }
.acct-usage-n { font-family: 'Exo 2', sans-serif; font-size: 40px; font-weight: 700; line-height: 1.1; color: var(--white); font-variant-numeric: tabular-nums; }
.acct-usage-auto { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; }
.acct-usage-auto b { display: block; color: var(--white); font-weight: 600; font-size: 13.5px; }
.acct-usage-chip { display: inline-block; margin: 2px 6px 2px 0; padding: 3px 9px; border-radius: 999px; font-size: 12px; border: 1px solid var(--border); color: var(--muted); }
.acct-usage-chip.on { color: var(--text); border-color: rgba(0, 207, 255, .35); }
.acct-usage-t td .acct-sub { margin-top: 4px; }
/* At phone width each service is a small card: the label beside its value,
   so nothing scrolls sideways. */
@media (max-width: 560px) {
  .acct-usage-t thead { display: none; }
  .acct-usage-t table, .acct-usage-t tbody, .acct-usage-t tr, .acct-usage-t td { display: block; width: 100%; }
  .acct-usage-t tbody tr { padding: 10px 14px; border-bottom: 1px solid var(--border); }
  .acct-usage-t tbody tr:last-child { border-bottom: none; }
  .acct-usage-t tbody td { display: grid; grid-template-columns: 9em minmax(0,1fr); gap: 8px; padding: 4px 0; border-bottom: none; overflow-wrap: anywhere; }
  .acct-usage-t tbody td::before { content: attr(data-label); font-size: 12px; color: var(--muted); }
  .acct-usage-t tbody tr:hover td { background: none; }
}