.account-shell { width: min(1180px, calc(100% - 32px)); }
.account-main { display: grid; gap: 20px; padding: 34px 0 52px; }
.account-header::before { content: "ACCOUNTS  •  REPORTS  •  MONITORING"; }
.account-header-status {
  display: flex;
  grid-column: 3;
  grid-row: 1;
  align-items: center;
  gap: 8px;
  justify-self: end;
  padding: 10px 13px;
  border: 1px solid rgba(255, 208, 106, .38);
  border-radius: 999px;
  color: #ffd06a;
  background: rgba(82, 58, 9, .24);
  font: 760 .62rem/1.2 var(--font-mono);
  letter-spacing: .08em;
}
.account-identity { color: #9fb4ce; letter-spacing: 0; text-transform: none; }
.staging-dot { width: 8px; height: 8px; border-radius: 50%; background: #ffd06a; box-shadow: 0 0 12px rgba(255, 208, 106, .72); }
.account-inline-form { display: inline-flex; margin: 0; }
.account-link-button {
  padding: 10px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #8fa7c8;
  background: transparent;
  font-size: .8rem;
  font-weight: 650;
  cursor: pointer;
}
.account-link-button:hover { color: var(--ink); border-color: var(--line); }
.account-welcome {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 6px 8px;
}
.account-welcome h1, .account-card h1, .account-card h2, .account-section-heading h2 { margin: 0; color: #f0fbff; }
.account-welcome h1 { margin-top: 7px; font-size: clamp(2rem, 4vw, 3.6rem); letter-spacing: -.045em; }
.account-welcome p:not(.account-kicker), .account-card p { color: #91a8c6; line-height: 1.65; }
.account-kicker { margin: 0 0 8px; color: var(--cyan) !important; font: 760 .69rem/1.35 var(--font-mono); letter-spacing: .15em; text-transform: uppercase; }
.account-plan, .account-badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid rgba(83, 226, 255, .3);
  border-radius: 999px;
  color: #a8f5ff;
  background: rgba(4, 25, 52, .62);
  font: 700 .62rem/1.25 var(--font-mono);
  white-space: nowrap;
}
.account-card {
  padding: 24px;
  border: 1px solid rgba(83, 221, 255, .24);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(7, 26, 57, .92), rgba(13, 20, 57, .9));
  box-shadow: 0 20px 62px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .04);
}
.account-narrow { width: min(100%, 590px); margin: 38px auto 0; }
.account-auth-card { padding: clamp(24px, 5vw, 42px); }
.account-auth-card h1 { margin-bottom: 10px; font-size: clamp(1.7rem, 4vw, 2.45rem); }
.account-form { display: grid; gap: 16px; margin-top: 24px; }
/* Preserve the dark field appearance when browsers autofill credentials. */
.account-form input { color-scheme: dark; }
.account-form input:autofill {
  box-shadow: 0 0 0 1000px #101e34 inset !important;
  color: #eef8ff !important;
  caret-color: #eef8ff;
}
.account-form input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #101e34 inset !important;
  -webkit-text-fill-color: #eef8ff !important;
  caret-color: #eef8ff;
}
.account-form label { display: grid; gap: 7px; color: #c9dfed; font-size: .76rem; font-weight: 700; }
.account-form label > span, .account-form legend { color: #91a8c6; font: 680 .66rem/1.35 var(--font-mono); letter-spacing: .04em; }
.account-form input, .account-form select {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(83, 226, 255, .28);
  border-radius: 12px;
  outline: 0;
  color: #e8f9ff;
  background: rgba(3, 15, 38, .88);
  font: 620 .79rem/1.4 var(--font-display);
}
.account-form input:focus, .account-form select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(83, 232, 255, .1); }
.account-form small { color: #7189a7; font: .59rem/1.45 var(--font-mono); }
.account-form-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.account-form [hidden] { display: none !important; }
.account-form fieldset { margin: 0; padding: 15px; border: 1px solid rgba(83, 221, 255, .16); border-radius: 14px; }
.account-form legend { padding: 0 6px; }
.account-primary-button, .account-secondary-button, .account-danger-button {
  display: inline-flex;
  min-height: 44px;
  width: fit-content;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #f3fdff;
  font-size: .75rem;
  font-weight: 760;
  cursor: pointer;
}
.account-primary-button { background: linear-gradient(135deg, #5745e9, #ab3cdb); box-shadow: 0 12px 32px rgba(102, 52, 222, .22); }
.account-secondary-button { border-color: rgba(83, 226, 255, .35); background: rgba(14, 86, 115, .28); }
.account-danger-button { border-color: rgba(255, 91, 137, .4); background: rgba(122, 28, 64, .35); }
.account-primary-button:hover, .account-secondary-button:hover, .account-danger-button:hover { filter: brightness(1.1); }
.account-auth-note { display: grid; gap: 3px; margin-top: 25px; padding: 15px; border: 1px solid rgba(71, 239, 176, .23); border-radius: 13px; background: rgba(18, 92, 75, .16); }
.account-auth-note strong { color: #aef4d2; font-size: .74rem; }
.account-auth-note span { color: #7798a9; font: .61rem/1.45 var(--font-mono); }
.account-flash { padding: 14px 16px; border: 1px solid rgba(83, 226, 255, .28); border-radius: 13px; color: #bdecf5; background: rgba(13, 70, 94, .3); font-size: .75rem; line-height: 1.5; }
.account-flash-error { border-color: rgba(255, 91, 137, .44); color: #ffc0d4; background: rgba(115, 23, 57, .32); }
.account-flash-success { border-color: rgba(71, 239, 176, .4); color: #b7f5d8; background: rgba(18, 92, 75, .26); }
.account-flash-info { border-color: rgba(255, 208, 106, .4); color: #ffe1a0; background: rgba(98, 70, 12, .25); }
.account-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.account-stat span { color: #7f9ab8; font: 700 .65rem var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.account-stat strong { display: block; margin: 12px 0 7px; color: #f1fcff; font: 780 2.35rem/1 var(--font-mono); }
.account-stat small { color: #6e87a5; font-size: .7rem; }
.account-dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.account-card-heading, .account-settings, .account-section-heading, .account-user-identity { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.account-badge-ready { border-color: rgba(71, 239, 176, .35); color: #9cf2c9; background: rgba(16, 105, 82, .25); }
.account-badge-locked { border-color: rgba(255, 208, 106, .35); color: #f5d482; background: rgba(98, 70, 12, .22); }
.account-health-empty, .account-health-score { display: flex; align-items: flex-end; gap: 8px; margin: 24px 0 10px; }
.account-health-empty strong, .account-health-score strong { color: var(--cyan); font: 800 4rem/.9 var(--font-mono); }
.account-health-empty span, .account-health-score span { color: #819ab5; font: 680 .72rem var(--font-mono); }
.account-muted { color: #728aa6 !important; font-size: .75rem; }
.account-feature-list { display: grid; gap: 12px; padding: 0; margin: 24px 0 0; list-style: none; }
.account-feature-list li { position: relative; padding-left: 23px; color: #afc5d8; font-size: .77rem; }
.account-feature-list li::before { position: absolute; left: 0; color: var(--green); content: "✓"; font-family: var(--font-mono); }
.account-empty-state { padding: 30px 0 8px; text-align: center; }
.account-empty-state strong { font-size: 1.05rem; }
.account-empty-state p { max-width: 660px; margin: 10px auto 20px; }
.account-empty-state code, .account-settings code, .account-user-card code { color: #8fe8f4; font-family: var(--font-mono); }
.account-settings { flex-wrap: wrap; }
.account-footer { padding: 0 4px; color: #506985; font: .59rem/1.5 var(--font-mono); text-align: center; }
.account-create-form { margin-top: 18px; }
.account-user-list { display: grid; gap: 14px; }
.account-section-heading { padding: 12px 6px 4px; }
.account-section-heading p:last-child { max-width: 460px; color: #6f89a7; font-size: .7rem; line-height: 1.55; text-align: right; }
.account-user-card { padding: 22px; border: 1px solid rgba(83, 221, 255, .2); border-radius: 19px; background: rgba(5, 18, 43, .84); }
.account-user-deleted { background: #202733; border-color: #596270; }
.group-page-heading { align-items:center; }
.group-page-heading > div { min-width:0; }
.group-page-heading > a { flex-shrink:0; white-space:nowrap; }
.account-form.group-create-form { grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:18px; }
.group-assignment-list { margin-top:24px; border-top:1px solid #294563; }
.account-form.group-assignment-form { display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,1fr) auto; gap:24px; align-items:end; margin:0; padding:22px 0; border-bottom:1px solid #294563; }
.group-member-identity { display:grid; align-self:center; gap:6px; min-width:0; overflow-wrap:anywhere; }
.group-member-identity strong { color:#edf8ff; font-size:.94rem; }
.group-member-identity code { color:#74dced; font-size:.72rem; }
.group-member-identity small { color:#e9be7e; font-size:.72rem; }
.group-assignment-form label { min-width:0; }
.group-assignment-form select { width:100%; min-width:0; text-overflow:ellipsis; }
.group-assignment-form button { min-height:48px; white-space:nowrap; }
.group-assignment-note { margin:20px 0 0; font-size:.78rem; }
@media(max-width:700px) {
 .group-page-heading { align-items:flex-start; flex-direction:column; gap:12px; }
 .account-form.group-create-form { grid-template-columns:1fr; }
 .account-form.group-assignment-form { grid-template-columns:minmax(0,1fr) auto; gap:16px 12px; }
 .group-member-identity { grid-column:1 / -1; }
}
@media(max-width:420px) {
 .account-form.group-assignment-form { grid-template-columns:minmax(0,1fr); }
 .group-assignment-form button { width:100%; }
}
.delivery-usage-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:24px 0 30px; }
.delivery-usage-card { background:#0a1930; border:1px solid #244764; border-radius:14px; padding:20px; }
.delivery-usage-card h3 { margin:0 0 20px; font-size:1.05rem; }
.delivery-usage-card h3 span { display:block; margin-top:6px; color:#9db3cf; font-size:.75rem; font-weight:400; }
.delivery-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0; }
.delivery-metrics dt { font-size:.7rem; color:#a9bdd5; }
.delivery-metrics dd { margin:8px 0 0; font-size:1.6rem; font-weight:700; color:#58e8ff; }
.delivery-metrics dd small { display:block; font-size:.72rem; color:#a9bdd5; font-weight:400; margin-top:5px; }
.delivery-admin-usage { border-top:1px solid #244764; padding-top:14px; margin:18px 0 0; font-size:.72rem; color:#9db3cf; line-height:1.6; }
.delivery-settings-heading,.delivery-save-row { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.delivery-settings-heading h3 { margin:0; }
.delivery-settings-heading a { color:#58e8ff; font-size:.8rem; }
.delivery-table-wrap { overflow-x:auto; max-width:100%; }
.delivery-table { border-collapse:collapse; width:100%; text-align:left; font-size:.82rem; }
.delivery-table th,.delivery-table td { padding:14px 12px; border-bottom:1px solid #25435e; vertical-align:middle; }
.delivery-table thead th { color:#58e8ff; background:#0b1930; font-size:.75rem; }
.delivery-table tbody th { font-weight:600; }
.delivery-table small { display:block; margin-top:6px; color:#98afca; font-size:.7rem; line-height:1.5; font-weight:400; }
.delivery-settings-table th:first-child { width:56%; }
.delivery-table input.delivery-limit-input { min-width:90px; width:100%; max-width:170px; min-height:44px; padding:10px 12px; font-size:.88rem; }
.delivery-save-row { padding-top:18px; }
.delivery-save-row label { max-width:410px; flex:1 1 240px; }
.delivery-footnote { margin-top:20px; }
.delivery-group-limits { margin-bottom:24px; padding-bottom:20px; }
.delivery-group-limits summary { color:#58e8ff; }
@media(max-width:700px) {
 .delivery-usage-grid { grid-template-columns:1fr; gap:12px; }
 .delivery-table th,.delivery-table td { padding:12px 6px; }
 .delivery-settings-table th:first-child { width:42%; }
 .delivery-settings-table tbody th small { display:none; }
 .delivery-table input.delivery-limit-input { min-width:70px; padding:10px 6px; }
 .delivery-save-row button { width:100%; }
}
.account-user-deleted .account-user-identity, .account-user-deleted > p { color: #c2c7cf; filter: grayscale(1); }
.account-user-deleted .account-user-identity code { color: #b1b9c5; }
.account-user-identity > div { display: grid; gap: 5px; }
.account-user-identity strong { font-size: 1rem; }
.account-user-identity code { font-size: .66rem; }
.account-user-form { padding-top: 2px; }
.account-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
.account-form .account-check { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.account-form .account-check input { width: 17px; min-height: 17px; accent-color: #56e6ff; }
.account-form .account-check span { color: #aac0d4; font-family: var(--font-display); font-size: .7rem; letter-spacing: 0; }
.account-reset { margin-top: 16px; border-top: 1px solid rgba(83, 221, 255, .12); padding-top: 14px; }
.account-reset summary { width: fit-content; color: #849db9; cursor: pointer; font-size: .68rem; font-weight: 680; }
.account-reset-form { grid-template-columns: minmax(200px, 420px) auto; align-items: end; }

@media (max-width: 820px) {
  .account-header-status { grid-column: 1 / -1; grid-row: 3; justify-self: center; }
  .account-welcome, .account-section-heading { align-items: flex-start; flex-direction: column; }
  .account-section-heading p:last-child { text-align: left; }
  .account-stat-grid, .account-dashboard-grid { grid-template-columns: 1fr; }
  .account-form-row, .account-check-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .account-card { padding: 19px; border-radius: 17px; }
  .account-welcome h1 { font-size: 2rem; }
  .account-card-heading, .account-settings, .account-user-identity { align-items: flex-start; flex-direction: column; }
  .account-reset-form { grid-template-columns: 1fr; }
}