/* Components: buttons, forms, cards, badges, tables, dialogs, drawers, menus, toasts, and states. */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-h); padding: 0 var(--space-4);
  border: var(--border-width) solid transparent; border-radius: var(--radius-md);
  font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: 1; white-space: nowrap;
  text-decoration: none; cursor: pointer; user-select: none;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; box-shadow: none; pointer-events: none; }
.btn--primary { background: var(--color-primary); color: var(--white); box-shadow: var(--shadow-xs); }
.btn--primary:hover { background: var(--color-primary-hover); color: var(--white); }
.btn--secondary { background: var(--color-surface); border-color: var(--color-border-strong); color: var(--color-text); box-shadow: var(--shadow-xs); }
.btn--secondary:hover { background: var(--gray-50); border-color: var(--gray-400); color: var(--color-text); }
.btn--ghost { background: transparent; color: var(--color-text-muted); }
.btn--ghost:hover { background: var(--gray-100); color: var(--color-text); }
.btn--danger { background: var(--color-danger); color: var(--white); }
.btn--danger:hover { background: var(--color-danger-hover); color: var(--white); }
.btn--danger-ghost { background: transparent; border-color: var(--color-danger-border); color: var(--color-danger); }
.btn--danger-ghost:hover { background: var(--color-danger-soft); color: var(--color-danger-hover); }
.btn--sm { min-height: var(--control-h-sm); padding: 0 var(--space-3); font-size: var(--text-sm); border-radius: var(--radius-sm); }
.btn--block { width: 100%; }
.btn--lg { min-height: 3rem; padding: 0 var(--space-6); font-size: var(--text-md); }
.btn--icon { width: var(--control-h); padding: 0; }
.btn--icon.btn--sm { width: var(--control-h-sm); }
.btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy > * { visibility: hidden; }
.btn.is-busy::after { content: ""; position: absolute; width: 1rem; height: 1rem; border: 2px solid currentColor; border-color: var(--btn-spinner, var(--white)) transparent var(--btn-spinner, var(--white)) transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
.btn--secondary.is-busy, .btn--ghost.is-busy, .btn--danger-ghost.is-busy { --btn-spinner: var(--color-primary); }
@keyframes spin { to { transform: rotate(360deg); } }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.btn-row--end { justify-content: flex-end; }
.btn-row--between { justify-content: space-between; }

/* ---------- Form controls ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.field__label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); }
.field__optional { font-weight: var(--weight-medium); color: var(--color-text-subtle); font-size: var(--text-xs); }
.field__help { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-snug); }
.field__error { font-size: var(--text-sm); color: var(--color-danger); font-weight: var(--weight-semibold); }
.input, .select, .textarea {
  width: 100%; min-height: var(--control-h); padding: 0 var(--space-3);
  border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text); font-size: var(--text-base);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.textarea { padding: var(--space-2) var(--space-3); min-height: 5.5rem; resize: vertical; line-height: var(--leading-normal); }
.textarea--sm { min-height: 4.25rem; }
.textarea--lg { min-height: 11rem; }
.select { appearance: none; padding-right: 2.25rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2356637b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; }
.input::placeholder, .textarea::placeholder { color: var(--gray-400); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--gray-400); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring); }
.input[readonly] { background: var(--gray-50); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--color-danger); }
.input--mono { font-family: var(--font-mono); font-size: var(--text-sm); }
.input--lg { min-height: 3.25rem; font-size: var(--text-lg); letter-spacing: 0.3em; text-align: center; }
.input[type="file"] { padding: 0.4rem var(--space-2); }
.input[type="file"] { color: var(--color-text-muted); font-size: var(--text-sm); cursor: pointer; }
.input[type="file"]::file-selector-button { margin-right: var(--space-3); min-height: var(--control-h-sm); padding: 0 var(--space-3); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font: inherit; font-weight: var(--weight-semibold); box-shadow: var(--shadow-xs); cursor: pointer; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.input[type="file"]:hover::file-selector-button { background: var(--gray-50); border-color: var(--gray-400); }
.input[type="color"] { padding: 0.25rem; width: 3.25rem; cursor: pointer; }
.input-group { display: flex; gap: var(--space-2); align-items: stretch; }
.input-group > .input, .input-group > .select { flex: 1; }
.input-affix { position: relative; display: flex; align-items: center; }
.input-affix > .icon { position: absolute; left: var(--space-3); color: var(--color-text-subtle); pointer-events: none; }
.input-affix > .input { padding-left: 2.35rem; }
.input-affix--end > .input { padding-left: var(--space-3); padding-right: 2.75rem; }
.input-affix__btn { position: absolute; right: 0.3rem; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-muted); }
.input-affix__btn:hover { background: var(--gray-100); color: var(--color-text); }

/* Checkbox and switch rows */
.check { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; }
.check input[type="checkbox"], .check input[type="radio"] { width: 1.1rem; height: 1.1rem; margin: 0.15rem 0 0; flex: none; accent-color: var(--color-primary); cursor: pointer; }
.check__text { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-base); font-weight: var(--weight-semibold); }
.check__text small { font-weight: var(--weight-regular); color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--leading-snug); }
.switch { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; }
.switch:hover { border-color: var(--color-border-strong); }
.switch input { appearance: none; position: relative; flex: none; width: 2.5rem; height: 1.4rem; margin: 0.1rem 0 0; border-radius: var(--radius-full); background: var(--gray-300); cursor: pointer; transition: background-color var(--dur) var(--ease); }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.4rem - 6px); height: calc(1.4rem - 6px); border-radius: 50%; background: var(--white); box-shadow: var(--shadow-xs); transition: transform var(--dur) var(--ease); }
.switch input:checked { background: var(--color-primary); }
.switch input:checked::after { transform: translateX(1.1rem); }
.switch input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.check-grid .check { padding: var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); }

/* Segmented control (radio group) */
.segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--radius-md); background: var(--gray-100); border: var(--border-width) solid var(--color-border); }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented span { display: inline-flex; align-items: center; gap: var(--space-1); min-height: calc(var(--control-h) - 8px); padding: 0 var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-muted); white-space: nowrap; }
.segmented input:checked + span { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-xs); }
.segmented input:focus-visible + span { box-shadow: var(--focus-ring); }
.segmented label:hover span { color: var(--color-text); }

/* Form layout */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); }
.form-grid > .span-2, .form-grid > .switch, .form-grid > .check { grid-column: 1 / -1; }
.form-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.form-section { display: flex; flex-direction: column; gap: var(--space-4); }
.form-section + .form-section { padding-top: var(--space-5); border-top: var(--border-width) solid var(--color-border); }
.form-section__head { display: flex; flex-direction: column; gap: 2px; }
.form-section__title { font-size: var(--text-base); font-weight: var(--weight-bold); }
.form-section__desc { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Disclosure groups for optional settings */
.disclosure { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.disclosure + .disclosure { margin-top: var(--space-3); }
.disclosure > summary { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); list-style: none; cursor: pointer; border-radius: var(--radius-lg); }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary:hover { background: var(--gray-50); }
.disclosure > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.disclosure__icon { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: none; border-radius: var(--radius-md); background: var(--color-primary-soft); color: var(--color-primary); }
.disclosure__text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.disclosure__text b { font-size: var(--text-base); }
.disclosure__text span { font-size: var(--text-sm); color: var(--color-text-muted); }
.disclosure__chevron { color: var(--color-text-subtle); transition: transform var(--dur) var(--ease); }
.disclosure[open] > summary .disclosure__chevron { transform: rotate(180deg); }
.disclosure[open] > summary { border-bottom: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.disclosure__body { padding: var(--space-5) var(--space-4); }

/* ---------- Cards ---------- */
.card { display: flex; flex-direction: column; min-width: 0; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-xs); }
.card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-5) 0; }
.card__header--divided { padding-bottom: var(--space-4); border-bottom: var(--border-width) solid var(--color-border); }
.card__heading { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.card__title { font-size: var(--text-md); font-weight: var(--weight-bold); }
.card__desc { font-size: var(--text-sm); color: var(--color-text-muted); }
.card__body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); flex: 1; }
.card__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: var(--border-width) solid var(--color-border); background: var(--gray-50); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.card__footer--between { justify-content: space-between; }
.card--flush .card__body { padding: 0; }

/* KPI tiles */
.kpi { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-xs); min-width: 0; }
.kpi__label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-muted); }
.kpi__label .icon { color: var(--color-primary); }
.kpi__value { font-size: var(--text-2xl); font-weight: var(--weight-heavy); letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 1.5rem; padding: 0 0.6rem; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-full); background: var(--gray-50); color: var(--gray-700); font-size: var(--text-xs); font-weight: var(--weight-bold); white-space: nowrap; line-height: 1; }
.badge::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; flex: none; }
.badge--plain::before { display: none; }
.badge--success { background: var(--color-success-soft); border-color: var(--color-success-border); color: var(--color-success); }
.badge--warning { background: var(--color-warning-soft); border-color: var(--color-warning-border); color: var(--color-warning); }
.badge--danger { background: var(--color-danger-soft); border-color: var(--color-danger-border); color: var(--color-danger); }
.badge--info { background: var(--color-info-soft); border-color: var(--color-info-border); color: var(--color-info); }
.badge--neutral { background: var(--gray-100); border-color: var(--color-border); color: var(--gray-700); }
.tag { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 1.35rem; padding: 0 0.5rem; border-radius: var(--radius-sm); background: var(--gray-100); color: var(--gray-700); font-size: var(--text-xs); font-weight: var(--weight-semibold); white-space: nowrap; }
.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-1); }

/* ---------- Notices ---------- */
.notice { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-info-border); border-radius: var(--radius-md); background: var(--color-info-soft); color: var(--gray-800); font-size: var(--text-sm); line-height: var(--leading-snug); }
.notice > .icon { color: var(--color-info); margin-top: 1px; }
.notice--warning { border-color: var(--color-warning-border); background: var(--color-warning-soft); }
.notice--warning > .icon { color: var(--color-warning); }
.notice--danger { border-color: var(--color-danger-border); background: var(--color-danger-soft); }
.notice--danger > .icon { color: var(--color-danger); }
.notice--success { border-color: var(--color-success-border); background: var(--color-success-soft); }
.notice--success > .icon { color: var(--color-success); }
.notice ul { margin-top: var(--space-1); padding-left: var(--space-5); list-style: disc; }
.notice > div { min-width: 0; }

/* ---------- Lists (settings rows, sessions, keys, logs) ---------- */
.list { display: flex; flex-direction: column; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.list:empty { display: none; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--color-surface); min-width: 0; }
.list-row--more { justify-content: center; padding: var(--space-2) var(--space-4); }
.list-row + .list-row { border-top: var(--border-width) solid var(--color-border); }
.list-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.list-row__title { font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.list-row__meta { font-size: var(--text-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.list-row__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); flex: none; }
.list-row > .badge, .card__header > .badge { flex: none; align-self: flex-start; }
.meta-list { display: grid; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-muted); }
.meta-row { display: grid; grid-template-columns: minmax(9rem, max-content) minmax(0, 1fr); align-items: baseline; gap: var(--space-2) var(--space-5); }
.meta-row dt { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); white-space: nowrap; }
.meta-row dd { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--leading-snug); overflow-wrap: anywhere; }

/* ---------- Tables ---------- */
.table-wrap { width: 100%; overflow-x: auto; border-top: var(--border-width) solid var(--color-border); }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th { position: sticky; top: 0; padding: var(--space-3) var(--space-4); background: var(--gray-50); border-bottom: var(--border-width) solid var(--color-border); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-bold); text-align: left; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.table td { padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--color-border); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: #fafbfe; }
.table tbody tr.is-selected td { background: var(--color-primary-soft); }
.table .col-check { width: 2.75rem; padding-right: 0; }
.table .col-actions { width: 1%; text-align: right; white-space: nowrap; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table input[type="checkbox"] { width: 1.05rem; height: 1.05rem; margin: 0.15rem 0 0; accent-color: var(--color-primary); cursor: pointer; }
.cell-title { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-semibold); color: var(--color-text); font-size: var(--text-base); }
.cell-sub { display: block; margin-top: 2px; color: var(--color-text-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.cell-link { display: inline-flex; align-items: center; gap: var(--space-1); max-width: 100%; font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--color-primary); text-decoration: none; overflow-wrap: anywhere; }
.cell-link:hover { text-decoration: underline; }

/* ---------- Pagination ---------- */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-top: var(--border-width) solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-muted); }
.pager__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.pager__controls .select { width: auto; min-height: var(--control-h-sm); font-size: var(--text-sm); }

/* ---------- Dialogs and drawers (native <dialog>) ---------- */
.dialog { width: min(520px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 0; border-radius: var(--radius-xl); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-lg); overflow: hidden; }
.dialog[open] { display: flex; flex-direction: column; animation: dialog-in var(--dur) var(--ease); }
.dialog::backdrop { background: rgba(6, 22, 55, 0.5); }
.dialog--wide { width: min(720px, calc(100vw - 2rem)); }
.dialog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-bottom: var(--border-width) solid var(--color-border); }
.dialog__title { font-size: var(--text-lg); }
.dialog__subtitle { margin-top: 2px; font-size: var(--text-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.dialog__body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); overflow-y: auto; }
.dialog__footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-top: var(--border-width) solid var(--color-border); background: var(--gray-50); }
.dialog--confirm .dialog__body { flex-direction: row; align-items: flex-start; gap: var(--space-4); }
.dialog__icon { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none; border-radius: 50%; background: var(--color-info-soft); color: var(--color-info); }
.dialog__icon--danger { background: var(--color-danger-soft); color: var(--color-danger); }
.dialog__icon--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.drawer { margin: 0 0 0 auto; width: min(640px, 100vw); height: 100vh; max-height: 100vh; max-width: 100vw; border-radius: 0; }
.drawer[open] { animation: drawer-in var(--dur) var(--ease); }
.drawer .dialog__body { flex: 1; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } }
body.has-dialog { overflow: hidden; }

/* ---------- Dropdown menu ---------- */
.menu { position: fixed; z-index: var(--z-menu); min-width: 220px; padding: var(--space-1); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-md); }
.menu__item { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 2.25rem; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text); font-size: var(--text-sm); font-weight: var(--weight-medium); text-align: left; }
.menu__item .icon { color: var(--color-text-subtle); }
.menu__item:hover, .menu__item:focus-visible { outline: none; background: var(--gray-100); }
.menu__item--danger, .menu__item--danger .icon { color: var(--color-danger); }
.menu__item--danger:hover, .menu__item--danger:focus-visible { background: var(--color-danger-soft); }
.menu__sep { height: 1px; margin: var(--space-1) 0; background: var(--color-border); }

/* ---------- Toasts ---------- */
.toast-region { position: fixed; z-index: var(--z-toast); inset: var(--space-4) var(--space-4) auto auto; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; color: inherit; height: auto; display: flex; flex-direction: column; gap: var(--space-2); width: min(400px, calc(100vw - 2rem)); pointer-events: none; }
.toast { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-border); border-left: 4px solid var(--toast-accent, var(--color-info)); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-md); pointer-events: auto; opacity: 0; transform: translateY(-6px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.toast.is-visible { opacity: 1; transform: none; }
.toast__icon { color: var(--toast-accent, var(--color-info)); margin-top: 1px; }
.toast__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toast__title { font-size: var(--text-sm); font-weight: var(--weight-bold); }
.toast__message { font-size: var(--text-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.toast__close { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-subtle); }
.toast__close:hover { background: var(--gray-100); color: var(--color-text); }
.toast--success { --toast-accent: var(--color-success); }
.toast--error { --toast-accent: var(--color-danger); }
.toast--warning { --toast-accent: var(--color-warning); }
.toast--info { --toast-accent: var(--color-info); }
@media (max-width: 640px) {
  .toast-region { inset: auto 50% var(--space-4) auto; transform: translateX(50%); }
  .toast { transform: translateY(6px); }
}

/* ---------- Empty, loading, skeleton ---------- */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-8) var(--space-4); text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); }
.empty__icon { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--gray-100); color: var(--color-text-subtle); }
.empty__title { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--color-text); }
.empty--compact { padding: var(--space-5) var(--space-4); }
.skeleton { display: block; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--gray-100), var(--gray-200), var(--gray-100)); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.spinner { width: 1.25rem; height: 1.25rem; border: 2px solid var(--gray-300); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
.loading-row { display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-6); color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---------- Bars (breakdowns) ---------- */
.bars { display: flex; flex-direction: column; gap: var(--space-3); }
.bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); align-items: center; }
.bar__label { font-size: var(--text-sm); font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar__value { font-size: var(--text-sm); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.bar__track { grid-column: 1 / -1; height: 0.5rem; border-radius: var(--radius-full); background: var(--gray-100); overflow: hidden; }
.bar__fill { height: 100%; border-radius: inherit; background: var(--color-primary); }

/* ---------- Copy field ---------- */
.copy-field { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); border: var(--border-width) solid var(--color-primary-border); border-radius: var(--radius-md); background: var(--color-primary-soft); }
.copy-field__value { flex: 1; min-width: 0; font-weight: var(--weight-bold); color: var(--blue-700); overflow-wrap: anywhere; }
.secret { padding: var(--space-3); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); background: var(--gray-50); font-family: var(--font-mono); font-size: var(--text-sm); overflow-wrap: anywhere; user-select: all; }

/* Layout primitives shared by every page */
.stack { display: flex; flex-direction: column; gap: var(--space-5); }
.stack--tight { gap: var(--space-2); }
.text-muted { color: var(--color-text-muted); }
.u-self-start { align-self: flex-start; }
.u-fieldset-reset { min-width: 0; margin: 0; padding: 0; border: 0; }
.u-contents { display: contents; }
.u-span-all { grid-column: 1 / -1; }
.u-justify-end { justify-content: flex-end; }
.u-w-70 { width: 70%; }
.u-mt-2 { margin-top: var(--space-2); }
.u-mt-5 { margin-top: var(--space-5); }
.u-mb-2 { margin-bottom: var(--space-2); }
.u-mb-5 { margin-bottom: var(--space-5); }
.skeleton--line { height: 12px; }
.form-grid--key { grid-template-columns: minmax(0, 1fr) 200px auto; align-items: end; }
@media (max-width: 640px) { .form-grid--key { grid-template-columns: minmax(0, 1fr); } }