/* Account layout only; typography, controls and focus feedback use ui-system.css. */
.auth-account-panel {
  width: min(620px, calc(100vw - 32px));
  padding: 20px;
  scroll-padding-top: 80px;
  scrollbar-color: rgba(165, 213, 191, .25) transparent;
}
.auth-account-panel[data-role="admin"] { width: min(1020px, calc(100vw - 32px)); }
.auth-account-panel .auth-account-head {
  position: sticky;
  top: -20px;
  z-index: 2;
  align-items: center;
  margin: -20px -20px 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: #142b21;
}
.account-dashboard, .account-settings-stack { display: grid; gap: 12px; min-width: 0; }
.account-section {
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-radius-card);
  background: rgba(5, 17, 12, .3);
}
.account-section-title {
  margin: 0;
  color: var(--orange);
  font-family: inherit;
  font-size: var(--ui-text-section);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .06em;
}
.account-section-head, .account-section .user-quota-manager-head,
.account-section .onboarding-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
  margin: 0 0 8px;
}
.account-tools-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.account-tools-grid > .quota-usage,
.account-usage-grid .quota-usage {
  min-width: 0;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(165, 213, 191, .12);
  border-radius: 10px;
  background: rgba(165, 213, 191, .045);
}
.account-tools-grid .quota-usage-head { min-height: 32px; }
.account-tools-grid p { margin: 8px 0 0; }
.account-usage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
[data-role="admin"] .account-usage-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.account-usage-grid .provider-usage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column: span 2; gap: 10px; margin: 0; }
.account-usage-grid .quota-usage { min-height: 140px; }
.account-usage-grid .quota-usage-head { align-items: start; gap: 6px; min-height: 30px; }
.account-usage-grid .quota-usage-state { font-weight: 500; }
.account-usage-grid .quota-usage-reading { margin-top: 8px; gap: 4px; }
.account-usage-grid .quota-usage-reading small { flex-basis: 100%; margin: 2px 0 0; }
.account-usage-grid .quota-usage-track { margin: 8px 0 6px; height: 4px; }
.account-usage-grid .quota-usage-foot { gap: 3px 8px; line-height: 1.5; }
.account-usage-grid .quota-usage-message { margin-top: 6px; }
.account-usage-grid .quota-usage-meter + .quota-usage-meter { margin-top: 8px; }
.account-usage-details { margin-top: 8px; }
.account-usage-details:not(:has([data-usage-extra] > *, [data-usage-time]:not(:empty))) { display: none; }
.account-usage-details summary, .account-password summary {
  width: fit-content;
  min-height: 24px;
  padding-block: 4px;
  color: var(--mint);
  font-size: var(--ui-text-label);
  line-height: 1.6;
  cursor: pointer;
}
.account-usage-details summary:hover, .account-password summary:hover { color: var(--ink); }
.account-usage-details summary:focus-visible, .account-password summary:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; border-radius: 4px; }
.account-usage-details .provider-usage-details { margin-top: 4px; }
.account-usage-grid .quota-usage-time { margin-top: 4px; overflow-wrap: anywhere; }
.account-details-grid { display: grid; gap: 14px; min-width: 0; }
[data-role="admin"] .account-details-grid { grid-template-columns: minmax(0, 1fr) 290px; align-items: start; }
.account-section.user-quota-manager { margin: 0; padding: 12px; }
.account-section .user-quota-list { max-height: 420px; min-height: 280px; padding-right: 6px; overscroll-behavior: contain; align-content: start; }
.account-section .user-quota-row { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) 48px; padding-block: 12px; gap: 12px; }
.account-section .user-quota-meter { grid-column: 2; grid-row: 1; }
.account-section .user-quota-row:first-child { border-top: 0; padding-top: 0; }
.account-section .user-quota-identity { gap: 3px; }
.account-section .personal-usage-labels { margin-top: 6px; }
.account-section.onboarding-settings { padding: 12px; }
.account-section.onboarding-settings select { padding: 9px 10px; }
.account-section .onboarding-settings-foot { gap: 8px; }
.account-section .onboarding-settings-foot button { white-space: nowrap; }
.account-personal > .account-section-title { margin-bottom: 14px; }
.account-personal #auth-profile-form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.account-personal #auth-profile-form .auth-form-message { grid-column: 1 / -1; grid-row: 2; margin: 0; }
.account-personal #auth-profile-form .auth-form-message:empty { display: none; }
.account-personal #auth-profile-form .auth-account-submit { grid-column: 2; grid-row: 1; }
.account-personal .auth-google-account { margin-top: 16px; }
.account-password { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 8px; }
.account-password:has(#auth-change-password-form[hidden]) { display: none; }
.account-password .auth-account-form { margin-top: 8px; }
.account-personal .auth-logout-button { margin-top: 14px; width: 100%; }

@media (max-width: 900px) {
  [data-role="admin"] .account-usage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-role="admin"] .account-details-grid { grid-template-columns: minmax(0, 1fr); }
  [data-role="admin"] .account-settings-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 600px) {
  .auth-account-panel, .auth-account-panel[data-role="admin"] { width: calc(100vw - 20px); padding: 12px; max-height: calc(100svh - 20px); scroll-padding-top: 64px; }
  .auth-account-panel .auth-account-head { top: -12px; margin: -12px -12px 12px; padding: 12px; }
  .account-dashboard, .account-details-grid, .account-settings-stack { gap: 12px; }
  .account-section, .account-section.user-quota-manager, .account-section.onboarding-settings { padding: 12px; }
  .account-tools-grid, [data-role="admin"] .account-settings-stack { grid-template-columns: minmax(0, 1fr); }
  .account-tools-grid { gap: 8px; }
  .account-usage-grid, .account-usage-grid .provider-usage { gap: 8px; }
  .account-usage-grid .quota-usage { padding: 10px; }
  .account-usage-grid .quota-usage-head { flex-wrap: wrap; }
  .account-usage-grid .quota-usage-state { white-space: normal; }
  .account-section .user-quota-list { max-height: 360px; }
  .account-section .user-quota-row { grid-template-columns: minmax(0, 1fr) 48px; gap: 8px; }
  .account-section .user-quota-meter { grid-column: 1 / -1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-account-panel { animation: none; }
}

.model-settings { min-width: 0; container-type: inline-size; }
.model-settings .quota-usage-head { min-height: 26px; }

.model-settings .auth-field-hint { margin: 6px 0 0; }
.model-settings-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.model-settings-fields label { display: grid; gap: 7px; }
.model-settings-fields select { width: 100%; min-width: 0; padding: 9px 12px; color-scheme: dark; }
.model-settings-fields select:focus-visible { outline: 2px solid #83b99b; outline-offset: 2px; }
.model-settings-fields select:disabled { opacity: .55; }
.model-settings-hint { margin-top: 9px; }
.model-settings-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.model-settings-footer .auth-form-message { flex: 1 1 180px; margin: 0; }
.model-settings-footer [data-tone="error"] { color: #efaaa0; }
.model-settings-actions { display: flex; flex-shrink: 0; gap: 8px; margin-left: auto; }
@container (max-width: 420px) {
  .model-settings-fields { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .model-settings-footer { align-items: flex-start; }
  .model-settings-actions { width: 100%; }
  .model-settings-actions button { flex: 1; }
}