.page-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 900px;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
  width: 100%;
}

.chat-section {
  display: grid;
  gap: 20px;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  overflow: hidden;
  max-width: none;
  padding-right: 0;
}

#tab-accounts,
#tab-keys {
  overflow: hidden;
  padding-right: 0;
}

#tab-accounts {
  max-width: none;
}

.settings-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 0;
}

.settings-card {
  border-left: 3px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-left: 20px;
  transition: border-color var(--transition-smooth);
}

.settings-card:hover {
  border-left-color: var(--color-accent);
}

.settings-card h3 {
  margin: 0;
}

.settings-form {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

.batch-account-form {
  border-top: 1px solid var(--color-border-soft);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
}

.batch-account-form textarea {
  min-height: 120px;
}

.account-admin {
  display: grid;
  gap: 14px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  width: 100%;
}

.key-admin {
  display: grid;
  gap: 14px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  width: 100%;
}

.key-admin-toolbar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px;
}

.key-create-form {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(180px, 1fr) minmax(160px, 0.7fr) minmax(180px, 0.8fr) auto;
}

.key-create-form .input-group {
  min-width: 0;
}

.key-table {
  min-width: 760px;
  table-layout: auto;
}

.table-actions {
  flex-wrap: nowrap;
}

.account-admin-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
}

.account-toolbar-main {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(180px, auto) minmax(0, 1fr) auto;
}

.account-toolbar-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.account-toolbar-title h3 {
  margin: 0;
}

.account-admin-actions {
  gap: 8px;
  justify-content: flex-start;
}

.usage-summary {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}

.usage-summary article {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-height: 34px;
  min-width: 132px;
  padding: 6px 10px;
}

.usage-summary article:nth-child(2) {
  min-width: 174px;
}

.usage-summary span,
.account-usage-cell span {
  color: var(--color-muted);
  font-size: 0.78rem;
}

.usage-summary strong,
.account-usage-cell strong {
  color: var(--color-highlight);
  font-size: 0.92rem;
}

.usage-summary strong {
  font-variant-numeric: tabular-nums;
  overflow: visible;
  white-space: nowrap;
}

.account-table-wrap {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  min-height: 0;
  overflow: auto;
}

.account-table {
  border-collapse: collapse;
  min-width: 980px;
  table-layout: fixed;
  width: 100%;
}

.account-table:not(.key-table) th:nth-child(1),
.account-table:not(.key-table) td:nth-child(1) {
  width: 48px;
}

.account-table:not(.key-table) th:nth-child(2),
.account-table:not(.key-table) td:nth-child(2) {
  width: 30%;
}

.account-table:not(.key-table) th:nth-child(3),
.account-table:not(.key-table) td:nth-child(3) {
  width: 108px;
}

.account-table:not(.key-table) th:nth-child(4),
.account-table:not(.key-table) td:nth-child(4) {
  width: 112px;
}

.account-table:not(.key-table) th:nth-child(5),
.account-table:not(.key-table) td:nth-child(5) {
  width: 96px;
}

.account-table:not(.key-table) th:nth-child(6),
.account-table:not(.key-table) td:nth-child(6) {
  width: 180px;
}

.account-table:not(.key-table) th:nth-child(7),
.account-table:not(.key-table) td:nth-child(7) {
  width: 128px;
}

.account-table:not(.key-table) th:nth-child(8),
.account-table:not(.key-table) td:nth-child(8) {
  width: 170px;
}

.account-table th,
.account-table td {
  border-bottom: 1px solid var(--color-border-soft);
  padding: 14px 16px;
  text-align: left;
  vertical-align: middle;
}

.account-select-cell {
  text-align: center;
  width: 44px;
}

.account-select-cell input {
  width: auto;
}

.account-table th {
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.account-table tbody tr:hover {
  background: var(--color-input-bg);
}

.account-table tbody tr.selected-row {
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

.account-table tbody tr:last-child td {
  border-bottom: 0;
}

.account-cell-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.account-cell-main strong {
  color: var(--color-highlight);
  overflow-wrap: anywhere;
}

.account-cell-main span {
  color: var(--color-muted);
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

.account-usage-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.account-usage-cell span {
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.account-owner,
.time-cell {
  color: var(--color-muted);
}

.number-cell {
  color: var(--color-highlight);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.action-cell {
  white-space: nowrap;
}

.account-row-actions {
  flex-wrap: nowrap;
  gap: 8px;
}

.account-pagination {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 12px 14px;
}

.account-modal {
  background: transparent;
  border: 0;
  max-width: min(560px, calc(100vw - 32px));
  padding: 0;
  width: 100%;
}

.account-modal::backdrop,
.confirm-modal::backdrop,
#admin-user-edit-modal::backdrop {
  background: rgba(15, 23, 42, 0.38);
  backdrop-filter: blur(4px);
}

.confirm-modal {
  background: transparent;
  border: 0;
  max-width: min(460px, calc(100vw - 32px));
  padding: 0;
  width: 100%;
}

.confirm-card {
  gap: 18px;
}

.confirm-message {
  line-height: 1.75;
  margin: 0;
}

.confirm-actions {
  justify-content: flex-end;
}

.modal-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px var(--color-shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
}

.modal-header {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.modal-header h3 {
  margin: 0;
}

.settings-toggle {
  flex: 1;
  min-width: 260px;
}

.shared-mode-panel {
  border-top: 1px solid var(--color-border-soft);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 18px;
}

.account-item {
  align-items: center;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 16px 18px;
}

.account-item.active {
  border-color: var(--color-accent-strong);
  box-shadow: 0 12px 28px var(--color-shadow);
}

.account-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.account-actions {
  align-items: center;
  flex-shrink: 0;
}

.account-meta {
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.admin-grid {
  overflow: hidden;
  min-height: 0;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

#tab-admin,
#tab-logs,
#tab-models {
  display: grid;
  gap: 18px;
  grid-template-rows: minmax(0, 1fr);
  max-width: none;
  overflow: hidden;
  padding-right: 0;
}

#tab-admin > .admin-grid {
  min-height: 0;
}

#tab-accounts > .settings-grid {
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

#tab-keys {
  max-width: none;
}

#tab-explorer {
  max-width: none;
}

.explorer-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.explorer-endpoint-panel {
  gap: 14px;
  padding: 16px;
}

#account-binding-card,
#incognito-card {
  min-height: 0;
  overflow: auto;
}

#account-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

#admin-user-card {
  min-height: 0;
  overflow: auto;
}

#admin-model-alias-card {
  min-height: 0;
  overflow: auto;
}

#admin-user-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

#model-alias-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.model-alias-toolbar {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(150px, 0.7fr) minmax(210px, 1fr) minmax(260px, 1.4fr) auto;
  padding: 14px 16px;
}

.model-alias-search {
  min-width: 0;
}

.admin-user-toolbar {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(240px, 1fr) auto;
  padding: 14px 16px;
}

.admin-user-search {
  min-width: 0;
}

.admin-user-pager {
  align-items: center;
  justify-content: flex-end;
}

.admin-table-wrap {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  min-height: 0;
  overflow: auto;
}

.admin-data-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

.admin-data-table th,
.admin-data-table td {
  border-bottom: 1px solid var(--color-border-soft);
  padding: 10px 14px;
  text-align: left;
  vertical-align: middle;
}

.admin-data-table th {
  color: var(--color-muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.admin-data-table tbody tr:hover {
  background: var(--color-input-bg);
}

.admin-data-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-data-table td {
  color: var(--color-subtle);
  font-size: 0.9rem;
}

.admin-data-table strong {
  color: var(--color-highlight);
}

.admin-table-select {
  text-align: center;
  width: 46px;
}

.admin-table-select input {
  width: auto;
}

.admin-table-ellipsis {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-alias-table {
  min-width: 980px;
}

.model-alias-table th:nth-child(1),
.model-alias-table td:nth-child(1) {
  width: 24%;
}

.model-alias-table th:nth-child(2),
.model-alias-table td:nth-child(2) {
  text-align: center;
  width: 58px;
}

.model-alias-table th:nth-child(3),
.model-alias-table td:nth-child(3) {
  width: 23%;
}

.model-alias-table th:nth-child(4),
.model-alias-table td:nth-child(4) {
  width: 128px;
}

.model-alias-table th:nth-child(5),
.model-alias-table td:nth-child(5) {
  width: 22%;
}

.model-alias-table th:nth-child(6),
.model-alias-table td:nth-child(6) {
  width: 142px;
}

.model-alias-table th:nth-child(7),
.model-alias-table td:nth-child(7) {
  width: 126px;
}

.model-alias-arrow-cell {
  color: var(--color-accent-strong);
  font-weight: 700;
}

.admin-user-table {
  min-width: 1040px;
}

.admin-user-table th:nth-child(2),
.admin-user-table td:nth-child(2) {
  width: 30%;
}

.admin-user-table th:nth-child(3),
.admin-user-table td:nth-child(3) {
  width: 110px;
}

.admin-user-table th:nth-child(4),
.admin-user-table td:nth-child(4) {
  width: 100px;
}

.admin-user-table th:nth-child(5),
.admin-user-table td:nth-child(5) {
  width: 150px;
}

.admin-user-table th:nth-child(6),
.admin-user-table td:nth-child(6) {
  width: 190px;
}

.admin-user-table th:nth-child(7),
.admin-user-table td:nth-child(7) {
  width: 184px;
}

.inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-list-item {
  align-items: flex-start;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  display: grid;
  gap: 14px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 16px 18px;
}

.admin-user-item {
  align-items: center;
  grid-template-columns: 34px minmax(190px, 1.1fr) minmax(92px, 0.46fr) 96px minmax(150px, 0.62fr) minmax(180px, 0.78fr) auto;
}

.admin-select {
  align-items: center;
  color: var(--color-subtle);
  display: inline-flex;
  gap: 10px;
  min-height: 40px;
}

.admin-select input {
  width: auto;
}

.admin-list-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.admin-list-copy strong {
  color: var(--color-highlight);
  font-size: 1rem;
}

.admin-list-copy span {
  color: var(--color-muted);
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.cell-label {
  color: var(--color-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.success-chip {
  background: rgba(17, 138, 178, 0.1);
  border-color: rgba(17, 138, 178, 0.22);
  color: var(--color-accent-strong);
}

.danger-chip {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.2);
  color: #b91c1c;
}

.log-admin {
  display: grid;
  gap: 14px;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

.log-toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
}

.log-toolbar-head {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.log-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.log-switch {
  align-items: center;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  gap: 10px;
  min-height: 40px;
  padding: 7px 12px 7px 8px;
  transition:
    background var(--transition-smooth),
    border-color var(--transition-smooth),
    box-shadow var(--transition-smooth);
  user-select: none;
  white-space: nowrap;
}

.log-switch:has(input:checked) {
  background: rgba(17, 138, 178, 0.1);
  border-color: rgba(17, 138, 178, 0.32);
  box-shadow: 0 10px 24px rgba(17, 138, 178, 0.12);
}

.log-switch input {
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 1px;
}

.log-switch-track {
  background: rgba(102, 121, 139, 0.34);
  border-radius: 999px;
  display: inline-flex;
  height: 24px;
  padding: 3px;
  position: relative;
  transition: background var(--transition-smooth);
  width: 44px;
}

.log-switch-track::after {
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
  content: "";
  height: 18px;
  left: 3px;
  position: absolute;
  top: 3px;
  transition: transform var(--transition-smooth);
  width: 18px;
}

.log-switch input:checked + .log-switch-track {
  background: var(--color-accent-strong);
}

.log-switch input:checked + .log-switch-track::after {
  transform: translateX(20px);
}

.log-switch:focus-within {
  box-shadow: 0 0 0 4px var(--color-focus-ring);
}

.log-switch-text {
  color: var(--color-subtle);
  font-weight: 650;
}

.log-switch:has(input:checked) .log-switch-text {
  color: var(--color-accent-strong);
}

.log-filter-grid {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(118px, 0.46fr) minmax(180px, 0.7fr) minmax(96px, 0.32fr) minmax(240px, 1fr) auto;
}

.log-search {
  min-width: 0;
}

.log-list {
  min-height: 0;
  overflow: auto;
}

.log-table {
  min-width: 980px;
}

.log-table th:nth-child(1),
.log-table td:nth-child(1) {
  width: 116px;
}

.log-table th:nth-child(2),
.log-table td:nth-child(2) {
  width: 210px;
}

.log-table th:nth-child(4),
.log-table td:nth-child(4) {
  width: 170px;
}

.log-table th:nth-child(6),
.log-table td:nth-child(6) {
  width: 82px;
}

.log-event-cell,
.log-request-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.log-event-cell strong {
  color: var(--color-highlight);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.log-request-cell {
  color: var(--color-muted);
  font-size: 0.78rem;
}

.log-summary-cell {
  color: var(--color-subtle);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.log-row-disconnect td:first-child {
  border-left: 3px solid #7c3aed;
}

.log-row-error td:first-child {
  border-left: 3px solid #dc2626;
}

.log-row-upstream td:first-child {
  border-left: 3px solid #0284c7;
}

.log-chip {
  font-size: 0.72rem;
  width: fit-content;
}

.log-chip-disconnect {
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.22);
  color: #6d28d9;
}

.log-chip-error {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.2);
  color: #b91c1c;
}

.log-chip-upstream {
  background: rgba(2, 132, 199, 0.08);
  border-color: rgba(2, 132, 199, 0.22);
  color: #0369a1;
}

.log-chip-attachment {
  background: rgba(17, 138, 178, 0.08);
  border-color: rgba(17, 138, 178, 0.2);
  color: var(--color-accent-strong);
}

.log-chip-tool,
.log-chip-info {
  background: var(--color-input-bg);
  border-color: var(--color-border-soft);
  color: var(--color-muted);
}

.log-details {
  min-width: 0;
  position: relative;
}

.log-details summary {
  color: var(--color-accent-strong);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 650;
}

.log-details pre {
  background: var(--color-input-bg);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  color: var(--color-subtle);
  font-size: 0.76rem;
  line-height: 1.55;
  margin: 10px 0 0;
  max-height: 320px;
  min-width: min(560px, calc(100vw - 72px));
  overflow: auto;
  padding: 10px;
  white-space: pre-wrap;
}

.log-pagination {
  margin-top: -2px;
}