:root {
  color-scheme: light;
  --bg: #f3f5f8;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --sidebar: #172033;
  --sidebar-hover: #222d44;
  --text: #172033;
  --muted: #667085;
  --muted-2: #98a2b3;
  --border: #e4e7ec;
  --border-strong: #d0d5dd;
  --primary: #2563eb;
  --primary-soft: #eff6ff;
  --green: #079455;
  --green-soft: #ecfdf3;
  --amber: #b54708;
  --amber-soft: #fffaeb;
  --red: #d92d20;
  --red-soft: #fef3f2;
  --shadow: 0 1px 2px rgb(16 24 40 / 5%), 0 8px 24px rgb(16 24 40 / 5%);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; max-width: 100%; }
body { margin: 0; overflow-x: hidden; background: var(--bg); color: var(--text); font-family: Inter, "Microsoft YaHei UI", "PingFang SC", "Segoe UI", sans-serif; font-size: 15px; line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }
.muted { color: var(--muted); }

.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 15% 10%, #e8efff, transparent 32%), var(--bg); }
.login-card { width: min(440px, 100%); padding: 38px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: 0 22px 60px rgb(16 24 40 / 12%); }
.login-brand, .brand { display: flex; align-items: center; gap: 11px; }
.login-brand { margin-bottom: 28px; }
.login-brand strong, .brand strong { display: block; font-size: 17px; }
.login-brand small, .brand small { display: block; margin-top: 1px; color: var(--muted-2); font-size: 12px; }
.login-card h1 { margin: 0 0 5px; font-size: 28px; letter-spacing: -.02em; }
.login-card > .muted { margin: 0 0 24px; }
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; background: linear-gradient(145deg, #3974f6, #1d4ed8); color: #fff; font-size: 17px; font-weight: 900; box-shadow: 0 8px 18px rgb(37 99 235 / 22%); }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 232px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; min-width: 0; flex-direction: column; padding: 22px 14px 16px; background: var(--sidebar); color: #fff; }
.brand { padding: 0 8px 23px; }
.brand small { color: #98a2b3; }
.nav-list { display: grid; gap: 5px; }
.nav-item { position: relative; width: 100%; min-height: 42px; display: flex; align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #aeb8ca; text-align: left; cursor: pointer; transition: .15s ease; }
.nav-item:hover { border-color: rgb(255 255 255 / 6%); background: var(--sidebar-hover); color: #fff; }
.nav-item.active { border-color: rgb(255 255 255 / 8%); background: linear-gradient(90deg, #31415f, #27354e); color: #fff; font-weight: 700; box-shadow: inset 3px 0 #7aa2ff; }
.nav-item.active::after { content: ""; position: absolute; right: 9px; width: 5px; height: 5px; border-radius: 50%; background: #8fb2ff; box-shadow: 0 0 0 4px rgb(143 178 255 / 10%); }
.nav-icon { width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 7px; background: rgb(255 255 255 / 6%); color: #c7d2e5; font-size: 13px; }
.nav-item.active .nav-icon { background: rgb(122 162 255 / 15%); color: #b9ceff; }
.nav-icon { width: 19px; color: #a9bbdb; text-align: center; }
.sidebar-spacer { flex: 1; }
.fleet-card { display: flex; align-items: flex-start; gap: 9px; margin: 0 6px 12px; padding: 12px; border-radius: 10px; background: rgb(255 255 255 / 5%); }
.fleet-card strong, .fleet-card small { display: block; }
.fleet-card strong { font-size: 14px; }
.fleet-card small { margin-top: 2px; color: #98a2b3; font-size: 12px; }
.live-dot { width: 8px; height: 8px; margin-top: 6px; flex: 0 0 auto; border-radius: 50%; background: #32d583; box-shadow: 0 0 0 4px rgb(50 213 131 / 12%); }
.nav-item.logout { color: #98a2b3; }

.workspace { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 20; min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 18px; border-bottom: 1px solid var(--border); background: rgb(255 255 255 / 96%); backdrop-filter: blur(12px); }
.topbar h1 { margin: 0; font-size: 20px; line-height: 1.15; letter-spacing: -.025em; }
.topbar p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.realtime-state { min-width: 132px; display: flex; align-items: center; gap: 9px; padding: 6px 10px; border: 1px solid #abefc6; border-radius: 9px; background: var(--green-soft); }
.realtime-state .live-dot { margin: 0; }
.realtime-state strong, .realtime-state small { display: block; line-height: 1.2; }
.realtime-state strong { color: var(--green); font-size: 12px; }
.realtime-state small { margin-top: 2px; color: #475467; font-size: 10px; white-space: nowrap; }
.realtime-state.busy { border-color: #b2ccff; background: var(--primary-soft); }
.realtime-state.busy .live-dot { background: var(--primary); box-shadow: 0 0 0 4px rgb(37 99 235 / 12%); animation: live-pulse 1.2s ease-in-out infinite alternate; }
.realtime-state.busy strong { color: var(--primary); }
.realtime-state.paused { border-color: var(--border); background: var(--surface-soft); }
.realtime-state.paused .live-dot { background: var(--muted-2); box-shadow: none; }
.realtime-state.paused strong { color: var(--muted); }
@keyframes live-pulse { from { opacity: .55; } to { opacity: 1; } }
.switch-label { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; cursor: pointer; }
.switch-label input { position: absolute; opacity: 0; pointer-events: none; }
.switch { width: 34px; height: 20px; position: relative; border-radius: 999px; background: #d0d5dd; transition: .18s ease; }
.switch::after { content: ""; position: absolute; width: 16px; height: 16px; top: 2px; left: 2px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(16 24 40 / 28%); transition: .18s ease; }
.switch-label input:checked + .switch { background: var(--primary); }
.switch-label input:checked + .switch::after { transform: translateX(14px); }

.view { display: none; width: 100%; min-width: 0; padding: 14px 18px 24px; }
.view.active { display: block; }
.panel { min-width: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 1px 2px rgb(16 24 40 / 4%); }
.metrics-grid { display: grid; gap: 10px; margin-bottom: 10px; }
.primary-metrics, .pool-metrics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric-card { min-width: 0; padding: 9px 13px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); box-shadow: 0 1px 2px rgb(16 24 40 / 3%); }
.metric-card span { color: var(--muted); font-size: 12px; }
.metric-card strong { display: block; margin: 1px 0; font-size: clamp(20px, 1.55vw, 25px); line-height: 1.05; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.metric-card small { color: var(--muted-2); font-size: 11px; }
.metric-card.attention strong { color: var(--amber); }
.metric-card.success strong { color: var(--green); }
.secondary-stats { display: flex; align-items: center; gap: 0; overflow-x: auto; margin-bottom: 10px; padding: 7px 13px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--muted); white-space: nowrap; }
.secondary-stats span { padding: 0 18px; border-right: 1px solid var(--border); font-size: 13px; }
.secondary-stats span:first-child { padding-left: 0; }
.secondary-stats span:last-child { border-right: 0; }
.secondary-stats strong { margin-left: 5px; color: var(--text); font-size: 15px; }

.overview-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 12px; align-items: start; }
.node-panel, .inspector, .pool-tab-panel, .settings-card { padding: 12px; }
.section-heading, .inspector-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.section-heading { margin-bottom: 10px; }
.section-heading h2, .inspector-heading h2, .settings-card h2 { margin: 0; font-size: 17px; letter-spacing: -.01em; }
.section-heading .muted { display: block; margin-top: 2px; font-size: 12px; }
.heading-line { display: flex; align-items: center; gap: 8px; }
.live-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 11px; font-weight: 800; white-space: nowrap; }
.live-badge.busy { background: var(--primary-soft); color: var(--primary); }
.live-badge.warn { background: #fff7ed; color: #b54708; }
.live-badge.paused { background: var(--surface-soft); color: var(--muted); }
.filters { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.pool-account-search { width: min(360px, 42vw); }
.pool-account-filters { flex: 1 1 620px; }
input, select, textarea { max-width: 100%; min-height: 36px; padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: 7px; outline: 0; background: #fff; color: var(--text); transition: .15s ease; }
input:focus, select:focus, textarea:focus { border-color: #84adff; box-shadow: 0 0 0 3px rgb(37 99 235 / 10%); }
input::placeholder, textarea::placeholder { color: #98a2b3; }
textarea { resize: vertical; }
#search-input { width: min(300px, 100%); }
.filters select { min-width: 126px; }
#sort-field { min-width: 126px; }
#sort-direction { min-width: 82px; }
.node-section-heading { margin-bottom: 9px; }
.node-heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.node-heading-actions .realtime-state { min-height: 34px; padding: 5px 9px; }
.node-heading-actions .switch-label { min-height: 34px; }
@media (max-width: 1450px) and (min-width: 761px) {
  .node-section-heading { align-items: center; }
  .node-heading-actions { flex-wrap: nowrap; gap: 5px; }
  .node-heading-actions .realtime-state { min-width: 0; padding-inline: 8px; }
  .node-heading-actions .realtime-state small { display: none; }
  .node-heading-actions .switch-label { gap: 5px; font-size: 0; }
  .node-heading-actions .switch-label::after { content: "自动"; font-size: 11px; }
  .node-heading-actions .button { padding-inline: 8px; font-size: 11px; white-space: nowrap; }
}
.node-toolbar { display: grid; grid-template-columns: auto auto minmax(220px, 1fr) minmax(126px, 150px) 82px 126px minmax(142px, 168px); gap: 7px; align-items: center; margin-bottom: 12px; padding: 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); }
.node-toolbar > * { min-width: 0; width: 100%; }
.node-toolbar .button { white-space: nowrap; }
.search-field { position: relative; display: block; min-width: 0; }
.search-field > span { position: absolute; z-index: 1; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted-2); font-size: 18px; pointer-events: none; }
.search-field input { width: 100% !important; padding-left: 34px; }

.button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--border-strong); border-radius: 7px; background: #fff; color: #344054; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; transition: .15s ease; }
.button:hover { background: #f9fafb; border-color: #98a2b3; }
.button:disabled { opacity: .45; cursor: not-allowed; }
.button.primary { border-color: var(--primary); background: var(--primary); color: #fff; }
.button.primary:hover { background: #1d4ed8; }
.button.dark { border-color: #172033; background: #172033; color: #fff; }
.button.secondary { background: #fff; }
.button.danger { border-color: var(--red); background: var(--red); color: #fff; }
.button.danger:hover { border-color: #b42318; background: #b42318; }
.button.wide { width: 100%; }
.button.compact { min-height: 32px; padding: 5px 9px; font-size: 12px; }
.text-button { padding: 4px 0; border: 0; background: transparent; color: var(--primary); font-weight: 700; cursor: pointer; }
.danger-text { color: var(--red); }
.icon-button { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--muted); font-size: 22px; cursor: pointer; }

.progress-strip { margin-bottom: 12px; padding: 10px 12px; border-radius: 9px; background: var(--primary-soft); color: #1d4ed8; }
.progress-strip > div:first-child { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.progress-track { height: 5px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: #dbeafe; }
.progress-track span { display: block; width: 0; height: 100%; background: var(--primary); transition: width .25s; }
.cleanup-progress { background: var(--red-soft); color: #b42318; }
.cleanup-progress .progress-track { background: #fee4e2; }
.cleanup-progress .progress-track span { background: var(--red); }
.cleanup-progress small { display: block; margin-top: 7px; color: #912018; font-size: 12px; }

.table-wrap { width: 100%; max-width: 100%; min-width: 0; overflow: auto; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.data-table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.server-table { width: 100%; min-width: 1105px; table-layout: fixed; }
.server-table col.server-column-node { width: 200px; }
.server-table col.server-column-status { width: 95px; }
.server-table col.server-column-quota { width: 90px; }
.server-table col.server-column-accounts { width: 115px; }
.server-table col.server-column-limited,
.server-table col.server-column-abnormal { width: 70px; }
.server-table col.server-column-mailboxes { width: 95px; }
.server-table col.server-column-expiry { width: 105px; }
.server-table col.server-column-note { width: 200px; }
.server-table col.server-column-checked { width: 160px; }
.pool-table { min-width: 1250px; }
.policy-table { min-width: 980px; }
.data-table th { padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--surface-soft); color: var(--muted); font-size: 11px; font-weight: 700; text-align: left; }
.data-table td { max-width: 250px; padding: 9px 10px; border-bottom: 1px solid #eef0f3; color: #344054; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.data-table tbody tr { transition: background .12s ease; }
.data-table tbody tr:hover { background: #f8fafc; }
.data-table tbody tr.selected { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
.data-table tbody tr.row-warn { background: #fffdf5; }
.data-table tbody tr.row-error { background: #fffafa; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.numeric { text-align: right; font-variant-numeric: tabular-nums; }
.server-table th,
.server-table td { box-sizing: border-box; vertical-align: middle; }
.server-table th.numeric,
.server-table td.numeric { padding-right: 16px; text-align: right; }
.server-table .server-column-node { width: 200px; }
.server-table .server-column-status { width: 95px; }
.server-table .server-column-quota { width: 90px; }
.server-table .server-column-accounts { width: 115px; }
.server-table .server-column-limited,
.server-table .server-column-abnormal { width: 70px; }
.server-table .server-column-mailboxes { width: 95px; }
.server-table .server-column-expiry { width: 105px; }
.server-table .server-column-note { width: 200px; }
.server-table .server-column-checked { width: 160px; }
.server-table .server-column-checked { font-variant-numeric: tabular-nums; }
.mailbox-group-metrics { margin: 0 0 8px; }
.mailbox-group-layout { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(560px, 1.7fr); gap: 18px; align-items: start; }
.mailbox-batch-item { width: 100%; text-align: left; cursor: pointer; }
.mailbox-batch-item.selected { border-color: var(--primary); background: var(--primary-soft); }
@media (max-width: 1100px) { .mailbox-group-layout { grid-template-columns: 1fr; } }
@media (min-width: 761px) {
  .server-table .server-text-column { text-align: left; }
}
.note-cell { max-width: 220px !important; color: var(--muted) !important; }
.node-name strong { display: block; color: var(--text); }
.node-name span { color: var(--muted); font-size: 12px; }
.status-text, .plain-state { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 700; }
.status-text::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #98a2b3; }
.status-text.ok { color: var(--green); }.status-text.ok::before { background: var(--green); }
.status-text.warn { color: var(--amber); }.status-text.warn::before { background: #f79009; }
.status-text.error { color: var(--red); }.status-text.error::before { background: var(--red); }
.status-text.pending { color: var(--muted); }
.plain-state.ok { color: var(--green); }
.plain-state.warn { color: var(--amber); }
.expiry-text { color: var(--muted); font-size: 13px; }
.expiry-text.warning, .expiry-text.critical { color: var(--amber); font-weight: 700; }
.expiry-text.expired { color: var(--red); font-weight: 700; }
.empty-state { padding: 22px 12px; color: var(--muted); text-align: center; }

.pagination-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding-top: 7px; color: var(--muted); font-size: 12px; }
.pagination-summary { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pagination-controls { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.pagination-controls label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pagination-controls select { width: auto; min-width: 68px; min-height: 36px; padding: 5px 28px 5px 9px; }
.pagination-controls strong { min-width: 80px; color: #475467; text-align: center; font-variant-numeric: tabular-nums; }
.page-button { min-height: 36px; padding: 6px 11px; border: 1px solid var(--border-strong); border-radius: 8px; background: #fff; color: #475467; font: inherit; font-weight: 700; cursor: pointer; }
.page-button:hover:not(:disabled) { background: #f9fafb; border-color: #98a2b3; }
.page-button:disabled { opacity: .42; cursor: not-allowed; }

.inspector { position: sticky; top: 76px; max-height: calc(100vh - 88px); min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; }
.inspector-empty { min-height: 480px; display: grid; place-content: center; padding: 28px; text-align: center; }
.inspector-empty h2 { margin: 10px 0 4px; font-size: 19px; }
.inspector-empty p { max-width: 250px; margin: auto; color: var(--muted); font-size: 13px; }
.empty-icon { width: 54px; height: 54px; display: grid; place-items: center; margin: auto; border-radius: 14px; background: var(--surface-soft); color: #98a2b3; font-size: 26px; }
.inspector-heading { margin-bottom: 14px; }
.inspector-heading .muted { margin: 3px 0 0; font-size: 13px; word-break: break-word; }
.detail-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; margin-bottom: 14px; }
.detail-actions .button { min-width: 0; padding-inline: 7px; font-size: 12px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 0 12px; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; }
.detail-grid > div { min-width: 0; padding: 10px 11px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.detail-grid > div:nth-child(2n) { border-right: 0; }
.detail-grid dt { color: var(--muted); font-size: 11px; }
.detail-grid dd { margin: 2px 0 0; color: var(--text); font-size: 14px; font-weight: 650; word-break: break-word; }
.note-card, .policy-card { margin-top: 12px; padding: 13px; border-radius: 10px; background: var(--surface-soft); }
.note-card span, .policy-card > div:first-child span { color: var(--muted); font-size: 12px; }
.note-card p { margin: 5px 0 0; white-space: pre-wrap; word-break: break-word; }
.inspector-footer { display: flex; justify-content: flex-end; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.field { min-width: 0; display: grid; gap: 5px; margin-bottom: 10px; }
.field > span { color: #475467; font-size: 13px; font-weight: 700; }
.checkbox-field { display: flex; align-items: center; gap: 8px; color: #475467; font-size: 13px; }
.checkbox-field input { width: 17px; height: 17px; min-height: auto; }
.policy-card > div:first-child { margin-bottom: 12px; }
.policy-card > div:first-child strong { display: block; }
.policy-fields-disabled { opacity: .48; }
.form-grid.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.form-grid.two > * { min-width: 0; }
.inspector input, .inspector select, .inspector textarea { width: 100%; box-sizing: border-box; }
.form-actions, .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.inline-message { margin: 10px 0; padding: 10px 12px; border-radius: 8px; background: var(--red-soft); color: var(--red); font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.inline-message.success { background: var(--green-soft); color: var(--green); }

.pool-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 14px; padding: 13px 16px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }
.pool-toolbar strong { display: block; font-size: 14px; }
.pool-toolbar .muted { display: block; margin-top: 2px; font-size: 12px; }
.subtabs { display: flex; gap: 4px; max-width: 100%; overflow-x: auto; margin-bottom: 12px; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: #e9edf3; }
.subtab { flex: 0 0 auto; min-height: 38px; padding: 7px 15px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-weight: 700; cursor: pointer; }
.subtab.active { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgb(16 24 40 / 12%); }
.pool-tab-panel { display: none; }
.pool-tab-panel.active { display: block; }
.mailbox-tab-panel, .registration-tab-panel { display: none; padding: 12px; }
.mailbox-tab-panel.active, .registration-tab-panel.active { display: block; }

.management-view { --management-accent: #6d5dfc; --management-soft: #f5f3ff; }
#mailboxes-view { --management-accent: #0891b2; --management-soft: #ecfeff; }
#registrations-view { --management-accent: #7c3aed; --management-soft: #f5f3ff; }
#api-docs-view { --management-accent: #2563eb; --management-soft: #eff6ff; }
.management-hero { position: relative; isolation: isolate; min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 18px; overflow: hidden; margin-bottom: 8px; padding: 10px 16px; border: 1px solid color-mix(in srgb, var(--management-accent) 18%, white); border-radius: 12px; background: linear-gradient(135deg, #fff 0%, var(--management-soft) 100%); box-shadow: 0 6px 18px rgb(33 27 70 / 5%); }
.management-hero::after { content: ""; position: absolute; z-index: -1; width: 250px; height: 250px; right: -75px; top: -105px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--management-accent) 18%, transparent), transparent 68%); }
.management-hero h2 { margin: 1px 0 2px; font-size: clamp(20px, 1.5vw, 25px); line-height: 1.06; letter-spacing: -.035em; }
.management-hero p { max-width: 680px; margin: 0; color: var(--muted); font-size: 13px; }
.eyebrow { color: var(--management-accent); font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.hero-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.hero-actions .button { min-height: 36px; padding-block: 7px; }
.hero-actions .button.primary { border-color: var(--management-accent); background: var(--management-accent); box-shadow: 0 8px 20px color-mix(in srgb, var(--management-accent) 22%, transparent); }
.hero-badge, .workspace-status { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 7px 11px; border: 1px solid color-mix(in srgb, var(--management-accent) 22%, white); border-radius: 999px; background: rgb(255 255 255 / 78%); color: var(--management-accent); font-size: 12px; font-weight: 800; white-space: nowrap; }
.workspace-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgb(7 148 85 / 10%); }

.management-tabs { align-items: center; gap: 4px; margin-bottom: 9px; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: #f7f8fb; box-shadow: 0 1px 2px rgb(16 24 40 / 3%); scrollbar-width: thin; }
.management-tabs .subtab { min-width: 136px; min-height: 40px; display: grid; grid-template-columns: 25px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 8px; row-gap: 0; padding: 5px 10px 5px 7px; border: 1px solid transparent; text-align: left; }
.management-tabs .subtab::before { content: attr(data-tab-index); width: 25px; height: 25px; display: grid; place-items: center; grid-row: 1 / 3; align-self: center; border-radius: 7px; background: #e8ecf3; color: #667085; font-size: 9px; font-weight: 900; letter-spacing: -.02em; }
.management-tabs .subtab span { grid-column: 2; color: inherit; font-size: 12px; line-height: 1.2; }
.management-tabs .subtab small { grid-column: 2; color: var(--muted-2); font-size: 9px; font-weight: 500; line-height: 1.2; }
.management-tabs .subtab:hover { border-color: color-mix(in srgb, var(--management-accent) 18%, var(--border)); background: #fff; color: var(--text); }
.management-tabs .subtab.active { border-color: color-mix(in srgb, var(--management-accent) 20%, white); background: #fff; color: var(--management-accent); box-shadow: 0 2px 8px rgb(16 24 40 / 8%); }
.management-tabs .subtab.active::before { background: var(--management-soft); color: var(--management-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--management-accent) 12%, transparent); }
.management-tabs .subtab.active small { color: color-mix(in srgb, var(--management-accent) 65%, #667085); }
.management-tab-actions { position: sticky; right: 0; display: flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-left: auto; padding: 1px 2px 1px 8px; background: linear-gradient(90deg, rgb(247 248 251 / 0%), #f7f8fb 12px); }
.management-tab-actions .button { min-height: 32px; padding: 6px 10px; }
.pool-metrics-grid { gap: 7px; margin-bottom: 7px; }
.pool-metrics-grid .metric-card { min-height: 60px; display: grid; align-content: center; padding: 7px 13px; }
.pool-metrics-grid .metric-card strong { margin: 0; font-size: clamp(19px, 1.4vw, 24px); }
.account-sync-strip { min-height: 42px; margin-bottom: 8px; padding: 6px 11px; }
.account-sync-strip > div { min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.account-sync-strip .muted { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-strip-actions { display: flex; align-items: center !important; justify-content: flex-end; gap: 7px !important; flex: 0 0 auto; }
.account-strip-actions .workspace-status { padding: 5px 9px; }
.account-overview-panel { padding: 14px; }
.account-lifecycle-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.account-lifecycle-grid article { min-width: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; padding: 11px; border: 1px solid var(--border); border-radius: 11px; background: linear-gradient(145deg, #fff, #faf9ff); }
.account-lifecycle-grid article > span { width: 32px; height: 32px; display: grid; place-items: center; grid-row: 1 / 3; border-radius: 9px; background: var(--management-soft); color: var(--management-accent); font-size: 10px; font-weight: 900; }
.account-lifecycle-grid strong, .account-lifecycle-grid small { display: block; }
.account-lifecycle-grid strong { font-size: 13px; }
.account-lifecycle-grid small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.account-lifecycle-grid em { grid-column: 2; color: var(--management-accent); font-size: 11px; font-style: normal; font-weight: 800; }
.account-overview-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 9px; }
.account-shortcut { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--text); text-align: left; cursor: pointer; transition: .16s ease; }
.account-shortcut:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--management-accent) 35%, var(--border)); box-shadow: 0 8px 22px rgb(35 28 80 / 8%); }
.account-shortcut > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--management-soft); color: var(--management-accent); font-weight: 900; }
.account-shortcut strong, .account-shortcut small { display: block; }
.account-shortcut strong { font-size: 12px; }
.account-shortcut small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.account-shortcut b { color: var(--management-accent); font-size: 17px; }

.mailbox-overview-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mailbox-overview-metrics .metric-card { min-height: 62px; display: grid; align-content: center; padding-block: 8px; }
.mailbox-overview-metrics .metric-card { position: relative; overflow: hidden; }
.mailbox-overview-metrics .metric-card::after { content: ""; position: absolute; width: 54px; height: 54px; right: -18px; top: -18px; border-radius: 50%; background: var(--management-soft); }
.mailbox-group-layout { grid-template-columns: minmax(280px, .72fr) minmax(620px, 1.7fr); }
.mailbox-batch-column, .mailbox-record-column { min-width: 0; }
.mailbox-batch-column { padding-right: 17px; border-right: 1px solid var(--border); }
.mailbox-server-summary { margin-bottom: 12px; }
.mailbox-table { min-width: 940px; }
.mailbox-inventory-table { min-width: 860px; }
.mailbox-usage-table { min-width: 900px; }
.mailbox-lifecycle-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mailbox-lifecycle-grid article { min-width: 0; display: grid; grid-template-columns: 31px minmax(0, 1fr); gap: 9px; padding: 13px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(145deg, #fff, #f7fdff); }
.mailbox-lifecycle-grid article > span { width: 31px; height: 31px; display: grid; place-items: center; grid-row: 1 / 3; border-radius: 9px; background: var(--management-soft); color: var(--management-accent); font-size: 10px; font-weight: 900; }
.mailbox-lifecycle-grid strong, .mailbox-lifecycle-grid small { display: block; }
.mailbox-lifecycle-grid strong { font-size: 13px; }
.mailbox-lifecycle-grid small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.mailbox-lifecycle-grid em { grid-column: 2; color: var(--management-accent); font-size: 10px; font-style: normal; font-weight: 800; }
.mailbox-inventory-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.mailbox-api-note { margin-bottom: 0; }

.api-docs-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 12px; align-items: start; }
.api-docs-index { position: sticky; top: 62px; display: grid; gap: 4px; padding: 8px; }
.api-index-heading { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 2px 5px 6px; }
.api-index-heading > strong { font-size: 13px; }
.api-index-heading .plain-state { padding: 4px 7px; font-size: 9px; }
.api-docs-index a { min-width: 0; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px; border: 1px solid transparent; border-radius: 8px; color: var(--text); text-decoration: none; transition: .15s ease; }
.api-docs-index a:hover, .api-docs-index a:focus-visible { border-color: #bfdbfe; background: var(--management-soft); outline: none; }
.api-docs-index a > span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: var(--management-soft); color: var(--management-accent); font-size: 9px; font-weight: 900; }
.api-docs-index a div, .api-docs-index a small { display: block; min-width: 0; }
.api-docs-index a div { font-size: 12px; font-weight: 800; }
.api-docs-index a small { margin-top: 1px; color: var(--muted); font-size: 9px; font-weight: 500; }
.api-docs-content { min-width: 0; display: grid; gap: 12px; }
.api-doc-card { scroll-margin-top: 62px; padding: 13px; }
.api-doc-card p { margin: 7px 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.api-doc-card pre { max-width: 100%; overflow: auto; margin: 8px 0 0; padding: 11px; border: 1px solid #dbeafe; border-radius: 8px; background: #0f172a; color: #e2e8f0; font-size: 11px; line-height: 1.5; }
.api-doc-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.api-doc-heading > div { display: flex; align-items: center; gap: 9px; min-width: 0; }
.api-doc-heading h3 { margin: 0; font-size: 16px; }
.api-doc-heading > code { max-width: 58%; overflow: hidden; padding: 6px 9px; border-radius: 8px; background: #f1f5f9; color: #334155; text-overflow: ellipsis; white-space: nowrap; }
.compact-heading { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--border); }
.api-method { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; padding: 5px 7px; border-radius: 7px; color: #fff; font-size: 9px; font-weight: 900; letter-spacing: .05em; }
.api-method.post { background: #16a34a; }
.api-method.get { background: #2563eb; }
.api-callout { padding: 10px 12px; border: 1px solid #bfdbfe; border-radius: 9px; background: #eff6ff; color: #1e40af; font-size: 12px; }
.api-status-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.api-status-list span { padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-soft); color: var(--muted); font-size: 11px; }
.api-status-list b { color: var(--text); }

.integration-grid, .system-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.integration-card { min-width: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-soft); }
.integration-card.ready { border-color: #abefc6; background: var(--green-soft); }
.integration-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #fff; color: var(--management-accent); font-size: 13px; font-weight: 900; box-shadow: 0 4px 12px rgb(16 24 40 / 8%); }
.integration-card strong, .integration-card span { display: block; }
.integration-card span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.integration-card em { padding: 4px 8px; border-radius: 999px; background: #fff; color: var(--muted); font-size: 10px; font-style: normal; font-weight: 800; }
.integration-card.ready em { color: var(--green); }
.architecture-note { margin-top: 14px; padding: 15px 17px; border: 1px dashed color-mix(in srgb, var(--management-accent) 35%, var(--border)); border-radius: 12px; background: var(--management-soft); }
.architecture-note p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

.registration-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.registration-summary-grid article { padding: 9px 13px; border: 1px solid var(--border); border-radius: 9px; background: #fff; }
.registration-summary-grid .registration-summary-status { border-color: #fed7aa; background: #fffaf5; }
.registration-summary-grid .registration-summary-total { border-color: #d8b4fe; background: #faf5ff; }
.registration-summary-grid .registration-summary-success { border-color: #abefc6; background: #ecfdf3; }
.registration-summary-grid .registration-summary-failed { border-color: #fecdca; background: #fff1f2; }
.registration-summary-grid span, .registration-summary-grid small { display: block; color: var(--muted); font-size: 11px; }
.registration-summary-grid strong { display: block; margin: 2px 0 1px; font-size: 20px; letter-spacing: -.03em; }
.registration-summary-grid .registration-summary-success > strong { color: var(--green); }
.registration-summary-grid .registration-summary-failed > strong { color: var(--red); }
.registration-summary-value.ok { color: var(--green); }
.registration-summary-value.warn { color: #dc6803; }
.registration-summary-value.error { color: var(--red); }
.registration-task-table { width: 100%; min-width: 1060px; table-layout: fixed; }
.registration-task-table th:nth-child(1) { width: 13%; }
.registration-task-table th:nth-child(2) { width: 10%; }
.registration-task-table th:nth-child(3) { width: 22%; }
.registration-task-table th:nth-child(4) { width: 12%; }
.registration-task-table th:nth-child(5) { width: 7%; }
.registration-task-table th:nth-child(6) { width: 10%; }
.registration-task-table th:nth-child(7) { width: 17%; }
.registration-task-table th:nth-child(8) { width: 9%; }
.registration-task-table th:nth-child(5), .registration-task-table td:nth-child(5) { text-align: center; }
.registration-task-table td:first-child strong, .registration-task-table td:first-child small { display: block; }
.registration-task-table td:first-child small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.registration-progress { min-width: 140px; }
.registration-progress > div { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 10px; }
.registration-progress > div b { color: var(--management-accent); }
.registration-progress > i { display: block; height: 5px; overflow: hidden; margin-top: 5px; border-radius: 999px; background: #e8eaf0; }
.registration-progress > i em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7c3aed, #a855f7); }
.table-actions { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.text-button.danger { color: var(--red); }
.ok-text { color: var(--green); }
.error-text { color: var(--red); }
.workspace-status.offline { color: var(--red); border-color: #fecaca; background: #fff1f2; }
.workspace-status.offline i { background: var(--red); box-shadow: 0 0 0 4px rgb(217 45 32 / 10%); }
.registration-engine-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.registration-engine-card { min-width: 0; padding: 13px; border: 1px solid var(--border); border-radius: 11px; background: linear-gradient(145deg, #fff, #faf8ff); }
.registration-engine-card.ready { border-color: #d8b4fe; box-shadow: 0 7px 20px rgb(124 58 237 / 7%); }
.registration-engine-card.disabled { opacity: .64; background: #f8fafc; }
.registration-engine-head { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.registration-engine-head > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; background: var(--management-soft); color: var(--management-accent); font-size: 9px; font-weight: 900; }
.registration-engine-head h3 { margin: 0; font-size: 14px; }
.registration-engine-head small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
.registration-engine-head em { padding: 4px 7px; border-radius: 999px; background: #ecfdf3; color: var(--green); font-size: 9px; font-style: normal; font-weight: 800; }
.registration-engine-card.disabled .registration-engine-head em { background: #f2f4f7; color: var(--muted); }
.registration-engine-card p { min-height: 34px; margin: 10px 0 8px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.registration-engine-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.registration-engine-tags span { padding: 4px 7px; border-radius: 6px; background: var(--management-soft); color: var(--management-accent); font-size: 9px; font-weight: 700; }
.registration-runtime-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; margin-top: 10px; padding: 10px 12px; border: 1px dashed #d8b4fe; border-radius: 9px; background: #faf5ff; font-size: 11px; }
.registration-runtime-note span { color: var(--muted); line-height: 1.55; }
.registration-detail-empty { display: grid; min-height: 150px; place-items: center; color: var(--muted); font-size: 12px; }
.registration-detail-layout { display: grid; gap: 10px; }
.registration-progress-layout, .registration-log-layout { display: grid; gap: 10px; }
.registration-batch-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-soft); }
.registration-batch-strip span { padding: 5px 8px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--muted); font-size: 10px; }
.registration-batch-strip strong { margin-left: 3px; color: var(--text); font-size: 11px; }
.registration-batch-strip .ok { border-color: #abefc6; background: #ecfdf3; color: var(--green); }
.registration-batch-strip .ok strong { color: var(--green); }
.registration-batch-strip .error { border-color: #fecdca; background: #fff1f2; color: var(--red); }
.registration-batch-strip .error strong { color: var(--red); }
.registration-detail-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-soft); }
.registration-detail-header strong, .registration-detail-header span { display: block; }
.registration-detail-header span { margin-top: 2px; color: var(--muted); font-size: 10px; }
.registration-item-table { width: 100%; min-width: 1120px; table-layout: fixed; }
.registration-item-table th:nth-child(1) { width: 25%; }
.registration-item-table th:nth-child(2) { width: 9%; }
.registration-item-table th:nth-child(3) { width: 12%; }
.registration-item-table th:nth-child(4) { width: 9%; }
.registration-item-table th:nth-child(5) { width: 10%; }
.registration-item-table th:nth-child(6) { width: 13%; }
.registration-item-table th:nth-child(7) { width: 22%; }
.registration-item-table td:first-child { word-break: break-all; }
.registration-item-table td span, .registration-item-table td small { display: block; }
.registration-item-table td small { margin-top: 3px; color: var(--muted); white-space: normal; word-break: break-word; line-height: 1.45; }
.registration-item-table .registration-error-detail { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: normal; }
.phase-badge { display: inline-flex !important; width: fit-content; align-items: center; padding: 4px 7px; border-radius: 999px; background: #f2f4f7; color: #475467; font-size: 10px; font-weight: 800; }
.phase-badge.ok { background: #ecfdf3; color: var(--green); }
.phase-badge.warn { background: #fff7ed; color: #dc6803; }
.phase-badge.error { background: #fff1f2; color: var(--red); }
.registration-detail-pagination { margin-top: 0; padding: 8px 2px 2px; }
.registration-log-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-soft); }
.registration-log-heading strong, .registration-log-heading span { display: block; }
.registration-log-heading strong { font-size: 13px; }
.registration-log-heading span { margin-top: 2px; color: var(--muted); font-size: 10px; }
.registration-event-list { display: grid; gap: 5px; max-height: 430px; overflow-y: auto; padding: 3px; }
.registration-event-list > div { display: grid; grid-template-columns: 72px 110px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.registration-event-list span { color: var(--muted); font-size: 10px; }
.registration-event-list b { color: var(--management-accent); font-size: 10px; }
.registration-event-list b.ok { color: var(--green); }
.registration-event-list b.warn { color: #dc6803; }
.registration-event-list b.error { color: var(--red); }
.registration-event-list p { margin: 0; color: var(--text); font-size: 11px; word-break: break-word; }
.registration-create-modal { width: min(780px, calc(100vw - 32px)); }
.registration-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.registration-proxy-field { grid-column: span 3; }
.registration-create-modal .mode-tip { margin-top: 10px; }
.system-card { min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: linear-gradient(180deg, #fff, #fafbff); }
.system-card.active { border-color: #c7d7fe; box-shadow: 0 10px 28px rgb(37 99 235 / 8%); }
.system-card-head { display: flex; align-items: center; gap: 11px; }
.system-card-head > div { min-width: 0; flex: 1; }
.system-card h3 { margin: 0; font-size: 15px; }
.system-card p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.system-logo { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; background: linear-gradient(145deg, #6d5dfc, #4f46e5); color: #fff; font-weight: 900; box-shadow: 0 7px 16px rgb(79 70 229 / 22%); }
.system-logo.microsoft { background: linear-gradient(145deg, #0891b2, #0e7490); }
.system-logo.custom { background: linear-gradient(145deg, #667085, #344054); }
.system-capabilities { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0; }
.system-capabilities span { padding: 4px 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: 10px; font-weight: 700; }
.system-capabilities.muted span { background: #f2f4f7; color: var(--muted); }
.system-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--muted); font-size: 11px; }
.pipeline-flow { display: grid; grid-template-columns: repeat(7, auto); align-items: center; justify-content: center; gap: 16px; min-height: 220px; }
.pipeline-flow > div { width: min(190px, 19vw); min-height: 118px; display: grid; align-content: center; gap: 3px; padding: 16px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-soft); }
.pipeline-flow > div span { color: var(--management-accent); font-size: 11px; font-weight: 900; }
.pipeline-flow > div small { color: var(--muted); font-size: 10px; }
.pipeline-flow > i { color: #b3b8c5; font-style: normal; }
.contract-layout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.contract-layout > div { padding: 17px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-soft); }
.contract-layout h3 { margin: 0 0 9px; font-size: 15px; }
.contract-layout code { display: block; overflow-x: auto; padding: 9px 10px; border-radius: 8px; background: #172033; color: #dbeafe; font-size: 11px; white-space: nowrap; }
.contract-layout p { margin: 9px 0 0; color: var(--muted); font-size: 12px; }
.policy-heading { align-items: center; margin-bottom: 11px; }
.sync-time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.policy-overview { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 11px; }
.policy-overview article { min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-soft); }
.policy-overview span, .policy-overview small { display: block; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.policy-overview strong { display: block; margin: 2px 0 1px; font-size: 21px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.policy-mode { display: inline-flex; padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.policy-mode.global { background: var(--primary-soft); color: var(--primary); }
.policy-mode.override { background: var(--amber-soft); color: var(--amber); }
.policy-table td > small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.quota-progress { min-width: 180px; }
.quota-progress > div:first-child { display: flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; }
.quota-progress strong { color: var(--text); }
.quota-progress span { color: var(--muted); font-size: 12px; }
.quota-progress em { margin-left: auto; color: var(--muted); font-size: 11px; font-style: normal; }
.quota-progress-track { height: 6px; margin-top: 6px; overflow: hidden; border-radius: 999px; background: #e4e7ec; }
.quota-progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2563eb, #3b82f6); }
.deficit-value { color: var(--amber); }
.table-subtext { text-align: right; }
.pool-table-wrap { min-height: 340px; max-height: 640px; }
.content-narrow { width: min(760px, 100%); margin: 0 auto; }
.file-drop { min-height: 110px; display: grid; place-content: center; gap: 4px; margin-bottom: 10px; border: 1px dashed #98a2b3; border-radius: 9px; background: var(--surface-soft); text-align: center; cursor: pointer; }
.file-drop:hover { border-color: var(--primary); background: var(--primary-soft); }
.file-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.file-drop span { color: var(--muted); font-size: 13px; }
.file-drop.compact-drop { min-height: 82px; margin-top: 10px; }
.security-note { display: grid; gap: 3px; margin-bottom: 14px; padding: 12px 14px; border: 1px solid #b2ddff; border-radius: 10px; background: #eff8ff; }
.security-note strong { color: #175cd3; font-size: 13px; }
.security-note span { color: #475467; font-size: 12px; }
.selected-file-list { margin: -4px 0 14px; padding: 10px 12px; border-radius: 9px; background: var(--surface-soft); color: #475467; font-size: 13px; overflow-wrap: anywhere; }
.inspect-result { margin: 13px 0; padding: 14px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-soft); }
.compact-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.compact-stats > div { min-width: 0; padding: 10px; border-radius: 8px; background: #fff; }
.compact-stats span { display: block; color: var(--muted); font-size: 11px; }
.compact-stats strong { display: block; margin-top: 2px; font-size: 20px; font-variant-numeric: tabular-nums; }
.coverage-list { display: grid; gap: 7px; margin-top: 12px; }
.coverage-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 12px; }
.coverage-track { height: 7px; overflow: hidden; border-radius: 999px; background: #e4e7ec; }
.coverage-track span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.warning-list { display: grid; gap: 6px; margin-top: 12px; }
.warning-item { padding: 8px 10px; border-radius: 7px; background: var(--amber-soft); color: var(--amber); font-size: 12px; }
.task-progress { margin: 12px 0; padding: 12px; border-radius: 9px; background: var(--primary-soft); color: #1d4ed8; }
.task-progress > div:first-child { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.task-progress .progress-track span { width: 75%; animation: task-pulse 1.2s ease-in-out infinite alternate; }
@keyframes task-pulse { from { opacity: .45; transform: translateX(-20%); } to { opacity: 1; transform: translateX(25%); } }
.inline-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.inline-actions.no-margin { margin: 0; }
.pool-job-list { display: grid; gap: 9px; }
.pool-job-item { padding: 13px 15px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); }
.pool-job-item.uncertain { border-color: #fedf89; background: #fffcf5; }
.pool-job-item > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pool-job-item p { margin: 6px 0 2px; color: #475467; font-size: 13px; }
.pool-job-item small { color: var(--muted); }
.api-section p { color: #475467; }
.api-section code { max-width: 100%; overflow-wrap: anywhere; color: #344054; font-family: "Cascadia Code", Consolas, monospace; }
.api-endpoint { display: flex; align-items: center; gap: 10px; max-width: 100%; margin: 18px 0; padding: 12px 14px; overflow: hidden; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-soft); }
.api-endpoint span { padding: 3px 7px; border-radius: 5px; background: var(--green-soft); color: var(--green); font-size: 12px; font-weight: 800; }
.api-endpoint code { min-width: 0; overflow-wrap: anywhere; }
.api-section pre { max-width: 100%; overflow: auto; padding: 16px; border-radius: 10px; background: #111827; color: #d1d5db; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.api-section pre code { color: inherit; }

.release-layout { display: grid; grid-template-columns: minmax(540px, 1.15fr) minmax(380px, .85fr); gap: 9px; align-items: stretch; margin-bottom: 9px; }
.release-upload-panel, .release-list-panel, .release-deploy-panel { padding: 12px; }
.release-upload-panel { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(280px, 1.2fr) auto; gap: 8px; align-items: end; }
.release-upload-panel .section-heading { grid-column: 1 / -1; margin-bottom: 0; }
.release-upload-panel .field { margin: 0; }
.release-upload-panel .inline-message { grid-column: 1 / -1; margin: 0; }
.release-upload-panel .inline-actions { align-self: end; margin: 0; }
.release-file-drop { min-height: 58px; margin: 0; padding: 9px 12px; }
#release-list-empty { min-height: 72px; display: grid; place-items: center; }
.release-list { max-height: 190px; overflow: auto; display: grid; gap: 6px; }
.release-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-soft); cursor: pointer; }
.release-item:hover, .release-item.selected { border-color: #84adff; background: var(--primary-soft); }
.release-item strong, .release-item span, .release-item small { display: block; }
.release-item strong { font-size: 14px; }
.release-item span { margin-top: 2px; overflow: hidden; color: #475467; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.release-item small { margin-top: 3px; color: var(--muted-2); font-size: 11px; }
.release-controls { display: grid; grid-template-columns: minmax(170px, .45fr) minmax(320px, 1fr) minmax(110px, .22fr); gap: 8px; align-items: end; padding: 8px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-soft); }
.release-controls .field { margin: 0; }
.release-selection-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0; }
.release-selection-toolbar > div { display: flex; gap: 7px; flex-wrap: wrap; }
.release-progress { margin-bottom: 12px; }
.release-node-table { min-width: 920px; table-layout: fixed; }
.release-node-table th:nth-child(1) { width: 46px; }
.release-node-table th:nth-child(2) { width: 190px; }
.release-node-table th:nth-child(3) { width: 105px; }
.release-node-table th:nth-child(4), .release-node-table th:nth-child(5) { width: 105px; }
.release-node-table th:nth-child(6) { width: 130px; }
.release-check-column { text-align: center; }
.release-check-column input { width: 16px; height: 16px; min-height: auto; accent-color: var(--primary); }
.release-node-table td strong, .release-node-table td small { display: block; }
.release-node-table td small { margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.release-node-table tr.row-success { background: #f6fef9; }
.release-stage { color: var(--muted); font-size: 12px; font-weight: 700; }
.release-stage.running, .release-stage.starting { color: var(--primary); }
.release-stage.completed { color: var(--green); }
.release-stage.failed { color: var(--red); }
.release-error { max-width: 260px; overflow: hidden; color: var(--red); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.settings-grid.single-row { grid-template-columns: 1fr; }
.settings-tab-panel { display: none; }
.settings-tab-panel.active { display: block; }
.settings-tabs { margin-bottom: 9px; }
.settings-inline-grid { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 8px; }
.registration-settings-grid { grid-template-columns: minmax(480px, 1.1fr) minmax(420px, .9fr); }
.registration-engine-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.registration-engine-grid.compact .registration-engine-card { padding: 9px; }
.registration-engine-grid.compact .registration-engine-card p { min-height: 0; margin: 7px 0; }
.settings-card { min-height: 100%; }
.settings-heading { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 10px; }
.settings-heading p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.settings-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; background: var(--primary-soft); color: var(--primary); font-weight: 800; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; padding: 8px 10px; border-radius: 8px; background: var(--surface-soft); }
.setting-row span strong, .setting-row span small { display: block; }
.setting-row span small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.setting-row input[type="checkbox"] { width: 30px; height: 17px; min-height: 17px; flex: 0 0 auto; accent-color: var(--primary); }
.switch-row { min-height: 42px; margin-bottom: 8px; padding: 6px 9px; }
.runtime-list { margin: 0; }
.runtime-list > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.runtime-list > div:last-child { border-bottom: 0; }
.runtime-list dt { color: var(--muted); font-size: 13px; }
.runtime-list dd { margin: 0; color: var(--text); font-weight: 700; text-align: right; }
.runtime-list .path-value { max-width: 190px; color: var(--muted); font-size: 11px; font-weight: 500; overflow-wrap: anywhere; }
.settings-actions { position: sticky; bottom: 8px; z-index: 10; display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 10px 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: rgb(255 255 255 / 94%); box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.settings-policy-panel { margin-top: 14px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgb(16 24 40 / 42%); backdrop-filter: blur(3px); }
.modal-card { width: min(430px, 100%); padding: 26px; border-radius: 15px; background: #fff; box-shadow: 0 24px 70px rgb(16 24 40 / 24%); }
.modal-card.modal-wide { width: min(780px, 100%); max-height: calc(100vh - 36px); overflow: auto; }
.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.modal-heading h2 { margin: 0 0 4px; }
.modal-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.modal-card.mailbox-import-modal { width: min(940px, 100%); padding: 18px; }
.mailbox-import-layout { display: grid; grid-template-columns: minmax(280px, .82fr) minmax(420px, 1.18fr); gap: 12px; margin-top: 14px; }
.mailbox-import-layout.inventory-mode { grid-template-columns: minmax(0, 1fr); }
.mailbox-import-fields { display: grid; align-content: start; gap: 10px; }
.mailbox-import-fields > .field, .mailbox-import-fields > .file-drop { margin: 0; }
.mailbox-import-target { min-width: 0; }
.mailbox-import-target .node-check-grid { max-height: 252px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mode-tip { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid #c7d7fe; border-radius: 8px; background: var(--primary-soft); font-size: 12px; line-height: 1.45; }
.mode-tip strong { flex: 0 0 auto; color: var(--primary); }
.mode-tip span { color: var(--muted); }
.mailbox-import-modal > .inspect-result, .mailbox-import-modal > .task-progress, .mailbox-import-modal > .inline-message { margin-top: 10px; }
.mailbox-import-modal > .modal-actions { margin-top: 10px; }

@media (max-width: 900px) {
  .mailbox-import-layout { grid-template-columns: 1fr; }
  .mailbox-import-target .node-check-grid { grid-template-columns: 1fr; }
}
.preview-list { max-height: 250px; overflow: auto; display: grid; gap: 6px; margin-top: 12px; }
.preview-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 8px 10px; border-radius: 7px; background: #fff; font-size: 12px; }
.preview-item strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-item span { color: var(--muted); }
.preview-action { font-weight: 700; }.preview-action.added { color: var(--green); }.preview-action.updated { color: var(--primary); }.preview-action.rejected { color: var(--red); }.preview-action.unchanged, .preview-action.skipped { color: var(--muted); }
.server-select-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.node-check-grid { max-height: 310px; overflow: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); }
.mailbox-node-empty { grid-column: 1 / -1; min-height: 72px; display: flex; align-items: center; justify-content: center; padding: 14px; text-align: center; }
.node-check { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px; border: 1px solid transparent; border-radius: 8px; background: #fff; cursor: pointer; }
.node-check:hover { border-color: #b2ccff; }
.node-check input { width: 16px; height: 16px; min-height: auto; flex: 0 0 auto; }
.node-check span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.modal-card h2 { margin: 13px 0 7px; font-size: 20px; }
.modal-card p { margin: 0; color: var(--muted); line-height: 1.65; }
.modal-card p strong { color: var(--text); }
.cleanup-warning { margin-top: 14px; padding: 11px 12px; border: 1px solid #fecdca; border-radius: 9px; background: var(--red-soft); color: #912018; font-size: 13px; line-height: 1.6; }
.modal-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; font-size: 20px; font-weight: 900; }
.modal-icon.danger { background: var(--red-soft); color: var(--red); }

.toast-stack { position: fixed; right: 18px; bottom: 18px; z-index: 1100; display: grid; gap: 8px; width: min(390px, calc(100vw - 36px)); pointer-events: none; }
.toast { padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--text); box-shadow: 0 12px 35px rgb(16 24 40 / 16%); animation: toast-in .2s ease both; }
.toast.success { border-left: 4px solid var(--green); }.toast.error { border-left: 4px solid var(--red); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1320px) {
  .settings-inline-grid { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
  .registration-settings-grid { grid-template-columns: 1fr; }
  .overview-layout { grid-template-columns: minmax(0, 1fr) 320px; }
  .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .runtime-card { grid-column: span 2; }
}

@media (max-width: 1500px) {
  .node-toolbar { grid-template-columns: auto auto minmax(150px, 1fr) minmax(140px, 1fr); grid-template-areas: "import export search search" "sort direction status expiry"; }
  .toolbar-import { grid-area: import; }
  .toolbar-export { grid-area: export; }
  .toolbar-search { grid-area: search; }
  .toolbar-sort { grid-area: sort; }
  .toolbar-direction { grid-area: direction; }
  .toolbar-status { grid-area: status; }
  .toolbar-expiry { grid-area: expiry; }
  .policy-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1050px) {
  .app-shell { grid-template-columns: 78px minmax(0, 1fr); }
  .sidebar { align-items: center; padding-inline: 10px; }
  .brand > div, .nav-item span:last-child, .fleet-card div, .logout span:last-child { display: none; }
  .brand { padding-inline: 0; }
  .nav-item { justify-content: center; padding-inline: 10px; }
  .nav-icon { width: auto; }
  .fleet-card { padding: 12px; }
  .overview-layout { grid-template-columns: 1fr; }
  .release-layout { grid-template-columns: 1fr; }
  .release-upload-panel { grid-template-columns: minmax(220px, .8fr) minmax(260px, 1.2fr) auto; }
  .inspector { position: static; max-height: none; min-height: auto; overflow: visible; }
  .inspector-empty { min-height: 220px; }
  .primary-metrics, .pool-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .integration-grid, .system-card-grid, .contract-layout { grid-template-columns: 1fr; }
  .account-lifecycle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .registration-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipeline-flow { grid-template-columns: 1fr; justify-items: stretch; }
  .pipeline-flow > div { width: 100%; min-height: auto; }
  .pipeline-flow > i { transform: rotate(90deg); text-align: center; }
}

@media (max-width: 760px) {
  .registration-engine-grid { grid-template-columns: 1fr; }
  .registration-form-grid { grid-template-columns: 1fr 1fr; }
  .registration-proxy-field { grid-column: 1 / -1; }
  .registration-event-list > div { grid-template-columns: 64px minmax(0, 1fr); }
  .registration-event-list p { grid-column: 1 / -1; }
  .settings-inline-grid { grid-template-columns: 1fr 1fr; }
  .registration-engine-grid.compact { grid-template-columns: 1fr; }
  .release-controls { grid-template-columns: 1fr; }
  .release-upload-panel { grid-template-columns: 1fr; }
  .release-upload-panel .section-heading, .release-upload-panel .inline-message { grid-column: 1; }
  .release-upload-panel .inline-actions .button { width: 100%; }
  .release-selection-toolbar { align-items: stretch; flex-direction: column; }
  .release-selection-toolbar .button { width: 100%; }
}

/* v1.3.1 UI density pass: light navigation, full-width settings and compact task creation. */
:root {
  --sidebar: #f8f5ff;
  --sidebar-hover: #f1ebff;
}

.app-shell { grid-template-columns: 218px minmax(0, 1fr); }
.sidebar {
  padding: 16px 12px 13px;
  border-right: 1px solid #ebe5f5;
  background:
    radial-gradient(circle at 12% 9%, rgb(236 72 153 / 8%), transparent 25%),
    radial-gradient(circle at 95% 42%, rgb(124 58 237 / 9%), transparent 34%),
    linear-gradient(180deg, #fffaff 0%, #f8f5ff 52%, #f5f8ff 100%);
  color: #514768;
  box-shadow: 10px 0 32px rgb(71 33 130 / 4%);
}
.brand { padding: 0 7px 17px; }
.brand strong { color: #332b45; }
.brand small { color: #9187a5; }
.brand-mark {
  background: linear-gradient(145deg, #ec4899, #8b5cf6);
  box-shadow: 0 8px 18px rgb(168 85 247 / 22%);
}
.nav-list { gap: 6px; }
.nav-item {
  min-height: 44px;
  gap: 11px;
  padding: 7px 10px;
  border-radius: 12px;
  color: #6f6683;
  font-weight: 650;
}
.nav-item:hover {
  border-color: #eadcff;
  background: rgb(255 255 255 / 72%);
  color: #4d3e67;
  box-shadow: 0 5px 14px rgb(91 33 182 / 7%);
}
.nav-item.active {
  border-color: rgb(255 255 255 / 60%);
  background: linear-gradient(100deg, #e86fd1 0%, #b56cf0 52%, #8b6cf4 100%);
  color: #fff;
  box-shadow: 0 8px 18px rgb(168 85 247 / 24%), inset 0 1px rgb(255 255 255 / 24%);
}
.nav-item.active::after {
  right: 11px;
  width: 6px;
  height: 6px;
  background: #fff;
  box-shadow: 0 0 0 4px rgb(255 255 255 / 12%);
}
.nav-icon,
.nav-item .nav-icon {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  flex: 0 0 29px;
  border-radius: 9px;
  background: #fff;
  color: #7c65a5;
  font-size: 13px;
  box-shadow: 0 5px 12px rgb(91 33 182 / 9%);
}
.nav-item:nth-child(1) .nav-icon { background: #e6f6ff; color: #1494c7; }
.nav-item:nth-child(2) .nav-icon { background: #f5e9ff; color: #a855f7; }
.nav-item:nth-child(3) .nav-icon { background: #ffe8f2; color: #ec4899; }
.nav-item:nth-child(4) .nav-icon { background: #fff4d8; color: #e99b13; }
.nav-item:nth-child(5) .nav-icon { background: #e5fbef; color: #16a36a; }
.nav-item:nth-child(6) .nav-icon { background: #e7f8ff; color: #0891b2; }
.nav-item:nth-child(7) .nav-icon { background: #eef1f6; color: #64748b; }
.nav-item.active .nav-icon {
  background: rgb(255 255 255 / 20%);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 28%);
}
.nav-item:focus-visible {
  outline: 2px solid rgb(168 85 247 / 26%);
  outline-offset: 2px;
}
.fleet-card {
  border: 1px solid #ebe5f5;
  background: rgb(255 255 255 / 66%);
  color: #4d4560;
}
.fleet-card small { color: #8b819d; }
.nav-item.logout { color: #8b819d; }

#settings-view .settings-tab-panel,
#settings-view .settings-tab-panel > .settings-grid.single-row,
#settings-view .settings-card {
  width: 100%;
  min-width: 0;
}
#settings-view .settings-tab-panel > .settings-grid.single-row {
  grid-template-columns: minmax(0, 1fr) !important;
}
#settings-view .settings-inline-grid {
  grid-template-columns: repeat(5, minmax(130px, 1fr));
}
#settings-view [data-settings-panel="accounts"] .settings-inline-grid {
  grid-template-columns: repeat(7, minmax(105px, 1fr));
}
#settings-view .switch-row input[type="checkbox"] {
  appearance: none;
  width: 34px;
  height: 19px;
  position: relative;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: #d0d5dd;
  cursor: pointer;
  transition: .16s ease;
}
#settings-view .switch-row input[type="checkbox"]::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(16 24 40 / 25%);
  transition: .16s ease;
}
#settings-view .switch-row input[type="checkbox"]:checked { background: #8b5cf6; }
#settings-view .switch-row input[type="checkbox"]:checked::after { transform: translateX(15px); }

.modal-card.modal-wide.registration-create-modal {
  width: min(680px, calc(100vw - 28px));
  padding: 18px;
}
.registration-create-modal .modal-heading { margin-bottom: 12px; }
.registration-create-modal .registration-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 10px;
  border: 1px solid #ece7f3;
  border-radius: 11px;
  background: linear-gradient(145deg, #fff, #fbf9ff);
}
.registration-create-modal .registration-engine-field { min-width: 0; }
.registration-create-modal .field > small,
.registration-proxy-card .field > small { display: block; margin-top: 4px; color: #8b8198; font-size: 9px; line-height: 1.4; }
.registration-workload-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 10px; min-width: 0; }
.registration-create-modal .registration-workload-fields .field { margin-bottom: 0; }
.registration-create-modal .registration-workload-fields input,
.registration-create-modal .registration-workload-fields .input-suffix { width: 100%; min-height: 36px; height: 36px; box-sizing: border-box; }
.input-suffix { position: relative; }
.input-suffix input { width: 100%; padding-right: 30px; }
.input-suffix > span { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #92879f; font-size: 10px; pointer-events: none; }
.registration-create-modal .registration-proxy-field { grid-column: 1 / -1; }
.registration-create-modal .modal-actions { margin-top: 13px; }
.registration-proxy-card { grid-column: 1 / -1; }
.registration-proxy-card .settings-heading { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; padding-bottom: 10px; border-bottom: 1px solid #eee9f5; }
.registration-proxy-body { margin-top: 10px; padding: 10px; border: 1px solid #eee9f5; border-radius: 10px; background: linear-gradient(145deg, #fff, #faf8ff); }
.registration-proxy-grid,
.registration-proxy-source-grid { display: grid; grid-template-columns: minmax(240px, .65fr) minmax(240px, .35fr); gap: 10px; }
.proxy-source-panel { margin-top: 10px; padding-top: 10px; border-top: 1px solid #eeeaf3; }
.registration-subscription-grid { display: grid; grid-template-columns: minmax(190px, 260px) minmax(420px, 1fr) max-content; align-items: start; gap: 10px; }
.registration-subscription-grid > .field,
.registration-node-picker > .field { min-width: 0; margin-bottom: 0; }
.registration-subscription-grid input,
.registration-node-picker select,
.subscription-url-field,
.subscription-url-field .proxy-input-wrap,
.subscription-url-field input { width: 100%; box-sizing: border-box; }
.registration-node-picker { display: grid; grid-template-columns: minmax(420px, 1fr) max-content; align-items: start; gap: 10px; margin-top: 10px; }
.proxy-inline-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; min-height: 36px; }
.registration-subscription-grid > .proxy-inline-actions,
.registration-node-picker > .proxy-inline-actions { margin-top: 21px; }
.button.compact { min-height: 34px; padding: 7px 11px; font-size: 10px; white-space: nowrap; }
.button.loading { opacity: .68; pointer-events: none; }
.button.loading::after { content: ""; width: 10px; height: 10px; margin-left: 6px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: proxy-button-spin .7s linear infinite; }
@keyframes proxy-button-spin { to { transform: rotate(360deg); } }
.proxy-node-detail { display: grid; gap: 3px; margin-top: 10px; padding: 9px 10px; border: 1px solid #e4dcf4; border-radius: 9px; background: #faf8ff; }
.proxy-node-detail > div { display: flex; align-items: center; gap: 7px; }
.proxy-node-detail strong { color: #403649; font-size: 11px; }
.proxy-node-detail span { padding: 2px 6px; border-radius: 999px; background: #eee7ff; color: #704ac9; font-size: 9px; font-weight: 800; }
.proxy-node-detail p, .proxy-node-detail small { margin: 0; color: #786d84; font-size: 9px; line-height: 1.45; }
.proxy-node-detail.empty { display: block; color: #8b8198; font-size: 10px; }
.registration-proxy-url-field { min-width: 0; }
.registration-proxy-url-field input { width: 100%; }
.proxy-input-wrap { position: relative; }
.proxy-input-wrap input { padding-right: 58px; }
.input-action { position: absolute; right: 5px; top: 50%; min-width: 46px; min-height: 28px; transform: translateY(-50%); border: 0; border-radius: 6px; background: #f1ecfb; color: #7251c7; font-size: 11px; font-weight: 750; cursor: pointer; transition: .18s ease; }
.input-action:hover { background: #e9defc; color: #5e39bd; }
.input-action:active { transform: translateY(-50%) scale(.97); }
.proxy-help-row { display: flex; align-items: center; gap: 8px; margin-top: 9px; padding-top: 9px; border-top: 1px solid #eeeaf3; }
.proxy-format-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.proxy-format-tags > span { padding: 3px 7px; border-radius: 999px; background: #f0eaff; color: #704ac9; font-size: 9px; font-weight: 800; }
.proxy-help-row p { margin: 0 0 0 auto; color: #776c86; font-size: 10px; line-height: 1.45; }
.proxy-help-row p strong { color: #51455f; }
.registration-inherited-note { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 9px; margin-top: 10px; padding: 9px 10px; border: 1px solid #e4dcf4; border-radius: 10px; background: linear-gradient(90deg, #f8f4ff, #f7f7fd); color: #72677f; font-size: 11px; }
.registration-inherited-note .proxy-note-icon { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border-radius: 8px; background: linear-gradient(145deg, #eee6ff, #e7efff); color: #714acb; font-weight: 900; }
.registration-inherited-note strong, .registration-inherited-note small { display: block; }
.registration-inherited-note strong { color: #403649; font-size: 11px; }
.registration-inherited-note small { margin-top: 1px; color: #82768f; font-size: 9px; line-height: 1.35; }
.registration-inherited-note .text-button { margin-left: auto; }
.mailbox-format-hint { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 7px; margin-top: -2px; padding: 7px 9px; border: 1px solid #ece7f3; border-radius: 8px; background: #fbf9ff; }
.mailbox-format-hint > span { color: #6f56bf; font-size: 9px; font-weight: 850; }
.mailbox-format-hint code { padding: 3px 6px; border-radius: 6px; background: #f0eaff; color: #5f3dab; font-size: 10px; }
.mailbox-format-hint small { color: #857a91; font-size: 9px; }

.management-tabs .subtab:focus-visible { outline: 2px solid rgb(168 85 247 / 22%); outline-offset: 1px; }

/* Registration and mailbox density pass: keep more operational data visible per screen. */
#registrations-view .registration-summary-grid {
  gap: 7px;
  margin-bottom: 7px;
}
#registrations-view .registration-summary-grid article {
  min-height: 50px;
  padding: 6px 10px;
  border-radius: 9px;
  box-shadow: 0 2px 8px rgb(58 35 91 / 4%);
}
#registrations-view .registration-summary-grid span {
  font-size: 9px;
  line-height: 1.2;
}
#registrations-view .registration-summary-grid strong {
  margin: 1px 0 0;
  font-size: 17px;
  line-height: 1.15;
}
#registrations-view .registration-summary-grid small {
  margin-top: 1px;
  font-size: 8px;
  line-height: 1.15;
}
#registrations-view .management-tabs {
  min-height: 38px;
  margin-bottom: 6px;
  padding: 3px;
}
#registrations-view .management-tabs .subtab {
  min-width: 104px;
  min-height: 30px;
  grid-template-columns: 21px minmax(0, 1fr);
  grid-template-rows: 1fr;
  gap: 6px;
  padding: 3px 8px 3px 5px;
}
#registrations-view .management-tabs .subtab::before {
  width: 21px;
  height: 21px;
  grid-row: 1;
  border-radius: 6px;
  font-size: 8px;
}
#registrations-view .management-tabs .subtab span {
  grid-column: 2;
  align-self: center;
  font-size: 11px;
  line-height: 1;
}
#registrations-view .management-tab-actions {
  gap: 4px;
  padding-left: 6px;
}
#registrations-view .management-tab-actions .workspace-status {
  padding: 5px 8px;
  font-size: 10px;
}
#registrations-view .management-tab-actions .button {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 10px;
}
#registrations-view .registration-tab-panel {
  padding: 7px;
}
#registrations-view .registration-progress-layout,
#registrations-view .registration-log-layout {
  gap: 6px;
}
#registrations-view .registration-item-table {
  min-width: 980px;
}
#registrations-view .registration-item-table th {
  padding: 6px 8px;
  font-size: 10px;
  letter-spacing: .01em;
}
#registrations-view .registration-item-table td {
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1.2;
}
#registrations-view .registration-item-table td:first-child strong {
  font-size: 11.5px;
  line-height: 1.2;
}
#registrations-view .registration-item-table td small {
  margin-top: 1px;
  font-size: 9px;
  line-height: 1.25;
}
#registrations-view .registration-error-label {
  display: block;
  overflow: hidden;
  color: #b54708;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#registrations-view .status-text {
  gap: 4px;
  font-size: 11px;
}
#registrations-view .status-text::before {
  width: 5px;
  height: 5px;
}
#registrations-view .phase-badge {
  padding: 3px 6px;
  font-size: 10px;
}
#registrations-view .registration-event-list {
  gap: 3px;
  min-height: 260px;
  max-height: calc(100vh - 272px);
  padding: 1px;
}
#registrations-view .registration-event-list > div {
  grid-template-columns: 62px 92px minmax(0, 1fr);
  gap: 6px;
  padding: 5px 7px;
  border-radius: 7px;
}
#registrations-view .registration-event-list span,
#registrations-view .registration-event-list b {
  font-size: 9px;
}
#registrations-view .registration-event-list p {
  font-size: 10px;
  line-height: 1.35;
}
#registrations-view .registration-detail-pagination {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  min-height: 31px;
  margin-top: 0;
  padding: 5px 2px 0;
  border-top: 1px solid #efebf4;
  color: var(--muted);
  font-size: 11px;
}
#registrations-view .registration-detail-pagination > span {
  min-width: 0;
  margin-right: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#registrations-view .registration-detail-pagination label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
#registrations-view .registration-detail-pagination select {
  width: auto;
  min-width: 52px;
  min-height: 27px;
  padding: 3px 22px 3px 7px;
  font-size: 11px;
}
#registrations-view .registration-detail-pagination .button {
  min-height: 27px;
  padding: 3px 7px;
  font-size: 11px;
}
#registrations-view .registration-detail-pagination strong {
  min-width: 54px;
  color: #554c63;
  text-align: center;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.registration-create-modal .field > span { font-size: 12px; }
.registration-create-modal input,
.registration-create-modal select { font-size: 12px; }
.registration-create-modal .registration-engine-field small,
.registration-create-modal .registration-inherited-note small { font-size: 10px; }
.registration-create-modal .button { min-height: 32px; padding: 6px 11px; font-size: 12px; }

#mailboxes-view .status-text.mailbox-available {
  color: #067647;
}
#mailboxes-view .status-text.mailbox-available::before {
  background: #12b76a;
  box-shadow: 0 0 0 3px rgb(18 183 106 / 10%);
}
#mailboxes-view .status-text.mailbox-used {
  color: #667085;
}
#mailboxes-view .status-text.mailbox-used::before {
  background: #98a2b3;
}
#mailboxes-view .status-text.mailbox-reserved {
  color: #b54708;
}
#mailboxes-view .status-text.mailbox-reserved::before {
  background: #f79009;
}
#mailboxes-view .status-text.mailbox-in-use {
  color: #175cd3;
}
#mailboxes-view .status-text.mailbox-in-use::before {
  background: #2e90fa;
  box-shadow: 0 0 0 3px rgb(46 144 250 / 10%);
}
#mailboxes-view .status-text.mailbox-distributed {
  color: #6941c6;
}
#mailboxes-view .status-text.mailbox-distributed::before {
  background: #9b8afb;
}
#mailboxes-view .mailbox-purpose {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #f2f4f7;
  color: #667085;
  font-size: 10px;
  font-weight: 700;
}
#mailboxes-view .mailbox-purpose.available { background: #ecfdf3; color: #067647; }
#mailboxes-view .mailbox-purpose.used { background: #f2f4f7; color: #475467; }
#mailboxes-view .mailbox-purpose.error { background: #fff1f2; color: #b42318; }
#mailboxes-view .mailbox-tab-panel .pagination-bar {
  min-height: 32px;
  padding-top: 5px;
  font-size: 10px;
}
#mailboxes-view .mailbox-tab-panel .pagination-controls {
  gap: 5px;
}
#mailboxes-view .mailbox-tab-panel .pagination-controls select,
#mailboxes-view .mailbox-tab-panel .page-button {
  min-height: 29px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 10px;
}
#mailboxes-view .mailbox-tab-panel .pagination-controls strong {
  min-width: 66px;
  font-size: 10px;
}
.management-tabs .subtab.active {
  border-color: rgb(255 255 255 / 62%);
  background: linear-gradient(105deg, #e879d8 0%, #bb6ce9 55%, #8b6cf4 100%);
  color: #fff;
  box-shadow: 0 7px 16px rgb(168 85 247 / 20%), inset 0 1px rgb(255 255 255 / 25%);
}
.management-tabs .subtab.active::before {
  background: rgb(255 255 255 / 20%);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 24%);
}
.management-tabs .subtab.active small { color: rgb(255 255 255 / 78%); }

@media (max-width: 1200px) {
  #settings-view .settings-inline-grid,
  #settings-view [data-settings-panel="accounts"] .settings-inline-grid {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
  }
}

@media (max-width: 1050px) {
  .app-shell { grid-template-columns: 78px minmax(0, 1fr); }
  .nav-icon, .nav-item .nav-icon { width: 31px; height: 31px; flex-basis: 31px; }
}

@media (max-width: 760px) {
  .app-shell { display: block; }
  .registration-create-modal .registration-form-grid { grid-template-columns: 1fr; }
  .registration-workload-fields { grid-template-columns: 1fr 1fr 1fr; }
  .registration-proxy-grid,
  .registration-proxy-source-grid,
  .registration-subscription-grid,
  .registration-node-picker { grid-template-columns: 1fr; }
  .proxy-inline-actions { justify-content: flex-start; flex-wrap: wrap; }
  .registration-subscription-grid > .proxy-inline-actions,
  .registration-node-picker > .proxy-inline-actions { margin-top: 0; }
  .proxy-help-row { align-items: flex-start; flex-direction: column; }
  .proxy-help-row p { margin-left: 0; }
  .mailbox-format-hint { grid-template-columns: auto minmax(0, 1fr); }
  .mailbox-format-hint small { grid-column: 1 / -1; }
  #settings-view .settings-inline-grid,
  #settings-view [data-settings-panel="accounts"] .settings-inline-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .registration-workload-fields { grid-template-columns: 1fr; }
  .registration-create-modal { padding: 14px; }
}

@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { position: sticky; top: 0; z-index: 40; width: 100%; height: auto; flex-direction: row; align-items: center; padding: 8px 10px; overflow-x: auto; }
  .brand, .sidebar-spacer, .fleet-card, .logout { display: none; }
  .nav-list { display: flex; width: 100%; gap: 4px; }
  .nav-item { flex: 1; min-width: 92px; min-height: 40px; padding: 7px 10px; }
  .nav-item span:last-child { display: inline; }
  .topbar { position: static; display: block; min-height: auto; padding: 10px 12px; }
  .topbar h1 { font-size: 19px; }
  .topbar-actions { justify-content: flex-start; margin-top: 12px; }
  .switch-label { width: 100%; }
  .view { padding: 12px; }
  .primary-metrics, .pool-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .metric-card { padding: 9px 10px; }
  .metric-card strong { font-size: 21px; }
  .secondary-stats { margin-bottom: 10px; }
  .section-heading { display: block; }
  .section-heading .filters { margin-top: 11px; }
  .node-heading-actions { justify-content: flex-start; margin-top: 10px; }
  .filters { width: 100%; justify-content: stretch; }
  .pool-account-search { width: 100%; }
  .pool-account-filters .button, .pool-account-filters select { flex: 1 1 auto; }
  #search-input, .filters select { width: 100%; min-width: 0; }
  .node-toolbar { grid-template-columns: 1fr 1fr; grid-template-areas: "import export" "search search" "sort direction" "status expiry"; }
  .node-panel, .inspector, .pool-tab-panel, .settings-card { padding: 10px; }
  .node-table-wrap { overflow: visible; border: 0; background: transparent; }
  .server-table { min-width: 0; table-layout: auto; white-space: normal; }
  .server-table colgroup { display: none; }
  .server-table thead { display: none; }
  .server-table, .server-table tbody, .server-table tr, .server-table td { display: block; width: 100%; }
  .server-table tr { position: relative; margin-bottom: 9px; padding: 13px; border: 1px solid var(--border); border-radius: 11px; background: #fff; }
  .server-table td { max-width: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border: 0; text-align: right; white-space: normal; word-break: break-word; }
  .server-table td::before { content: attr(data-label); flex: 0 0 76px; color: var(--muted); font-size: 12px; text-align: left; }
  .server-table td:first-child { display: block; padding: 0 0 9px; border-bottom: 1px solid var(--border); text-align: left; }
  .server-table td:first-child::before { display: none; }
  .server-table td:nth-child(5), .server-table td:nth-child(6), .server-table td:nth-child(8) { display: none; }
  .note-cell { max-width: none !important; }
  .pagination-bar { align-items: stretch; flex-direction: column; }
  .pagination-summary { text-align: center; }
  .pagination-controls { justify-content: center; }
  .detail-actions, .form-grid.two { grid-template-columns: 1fr; }
  .pool-toolbar { align-items: stretch; flex-direction: column; }
  .pool-toolbar .button { width: 100%; }
  .subtabs { position: sticky; top: 56px; z-index: 15; }
  .settings-grid { grid-template-columns: 1fr; }
  .runtime-card { grid-column: auto; }
  .settings-actions { align-items: stretch; flex-direction: column; bottom: 8px; }
  .settings-actions .button { width: 100%; }
  .api-section pre { font-size: 12px; }
  .compact-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coverage-row { grid-template-columns: 105px minmax(0, 1fr); }
  .coverage-row > :last-child { grid-column: 2; }
  .node-check-grid { grid-template-columns: 1fr 1fr; }
  .policy-heading { align-items: flex-start; }
  .policy-heading .sync-time { display: block; margin-top: 6px; }
  .policy-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .management-hero { min-height: 0; align-items: flex-start; flex-direction: column; gap: 12px; padding: 14px; }
  .hero-actions { width: 100%; }
  .hero-actions .button { flex: 1; }
  .management-tabs { position: static; }
  .management-tabs .subtab { min-width: 132px; }
  .management-tab-actions { position: static; padding-left: 6px; background: transparent; }
  .mailbox-overview-metrics, .registration-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mailbox-batch-column { padding-right: 0; padding-bottom: 15px; border-right: 0; border-bottom: 1px solid var(--border); }
  .mailbox-tab-panel, .registration-tab-panel { padding: 10px; }
  .account-overview-actions, .mailbox-inventory-actions { grid-template-columns: 1fr; }
  .account-sync-strip { align-items: flex-start; }
  .account-sync-strip > div { display: block; }
  .account-strip-actions { width: 100%; display: flex; align-items: center !important; }
  .account-strip-actions .workspace-status { margin-right: auto; }
  .account-sync-strip .muted { margin-top: 2px; white-space: normal; }
  .mailbox-lifecycle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .api-docs-layout { grid-template-columns: 1fr; }
  .api-docs-index { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .api-index-heading { grid-column: 1 / -1; }
  .api-doc-heading { align-items: flex-start; flex-direction: column; }
  .api-doc-heading > code { max-width: 100%; white-space: normal; word-break: break-all; }
}

@media (max-width: 420px) {
  .primary-metrics, .pool-metrics-grid { grid-template-columns: 1fr 1fr; }
  .metric-card span { font-size: 12px; }
  .metric-card small { display: none; }
  .node-heading-actions .button { flex: 1 1 auto; padding-inline: 9px; font-size: 12px; }
  .realtime-state { width: 100%; }
  .pagination-controls label { width: 100%; justify-content: center; }
  .pagination-controls strong { order: -1; width: 100%; }
  .node-check-grid { grid-template-columns: 1fr; }
  .mailbox-overview-metrics, .registration-summary-grid { grid-template-columns: 1fr 1fr; }
  .account-lifecycle-grid { grid-template-columns: 1fr; }
  .mailbox-lifecycle-grid { grid-template-columns: 1fr; }
  .api-docs-index { grid-template-columns: 1fr; }
}

/* Global workspace polish: cohesive with the pastel navigation while preserving dense layouts. */
body {
  background:
    radial-gradient(circle at 76% -8%, rgb(139 92 246 / 7%), transparent 27%),
    radial-gradient(circle at 28% 110%, rgb(14 165 233 / 5%), transparent 32%),
    #f6f7fb;
}
.workspace {
  min-height: 100vh;
  background: linear-gradient(180deg, rgb(255 255 255 / 55%), rgb(247 248 252 / 88%));
}
.topbar {
  border-bottom-color: #e8e5f0;
  background: rgb(255 255 255 / 88%);
  box-shadow: 0 5px 18px rgb(58 35 91 / 4%);
}
.topbar h1 { color: #282237; }
.topbar p { color: #827a91; }
.view { padding: 13px 18px 18px; }

.panel,
.metric-card,
.registration-summary-grid article {
  border-color: #e9e6f0;
  border-radius: 12px;
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 5px 18px rgb(58 35 91 / 5%);
}
.panel { overflow: clip; }
.metric-card,
.registration-summary-grid article {
  position: relative;
  overflow: hidden;
}
.metric-card::before,
.registration-summary-grid article::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, #c084fc, #60a5fa);
}
.metric-card.success::before { background: linear-gradient(180deg, #34d399, #22c55e); }
.metric-card.attention::before { background: linear-gradient(180deg, #fb923c, #f59e0b); }
.metric-card strong,
.registration-summary-grid strong { color: #292238; }

.section-heading {
  border-bottom-color: #eeeaf3;
}
.section-heading h2,
.section-heading h3 { color: #30283f; }

.button {
  border-radius: 8px;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:active:not(:disabled),
.nav-item:active,
.subtab:active,
.text-button:active,
.page-button:active:not(:disabled) { transform: scale(.98); }
.button.primary {
  border-color: #7c5cf0;
  background: linear-gradient(135deg, #8b5cf6, #6d5dfc);
  box-shadow: 0 6px 14px rgb(109 93 252 / 20%);
}
.button.primary:hover:not(:disabled) {
  border-color: #6949e5;
  background: linear-gradient(135deg, #7c4deb, #5e50ed);
  box-shadow: 0 8px 18px rgb(109 93 252 / 26%);
}
.button.secondary {
  border-color: #ded8e9;
  background: #fff;
  color: #574d68;
}
.button.secondary:hover:not(:disabled) { border-color: #cbbcec; background: #fbf9ff; }

input,
select,
textarea {
  border-color: #ddd8e7;
  border-radius: 8px;
  background: #fff;
}
input:hover,
select:hover,
textarea:hover { border-color: #c9bce3; }
input:focus,
select:focus,
textarea:focus {
  border-color: #9b7df3;
  box-shadow: 0 0 0 3px rgb(139 92 246 / 10%);
}

.filters,
.node-toolbar,
.pool-toolbar,
.release-controls,
.settings-actions {
  border-color: #ebe7f1;
  background: linear-gradient(180deg, #fbfaff, #f7f7fb);
}
.search-field { background: #fff; }

.table-wrap {
  border-color: #ebe7f1;
  border-radius: 10px;
  background: #fff;
}
.data-table thead th {
  border-bottom-color: #e7e2ee;
  background: linear-gradient(180deg, #faf8ff, #f3f1f8);
  color: #71677f;
}
.data-table tbody tr { transition: background .12s ease, box-shadow .12s ease; }
.data-table tbody tr:hover { background: #faf7ff; }
.data-table tbody td { border-bottom-color: #efedf3; }
.status-text,
.live-badge,
.workspace-status { border-radius: 999px; }

.pagination-bar {
  border-top-color: #ece8f1;
  background: linear-gradient(180deg, rgb(250 249 253 / 72%), #f8f7fb);
}
.page-button { border-color: #ded8e9; border-radius: 7px; background: #fff; }
.page-button:hover:not(:disabled) { border-color: #bfaee5; color: #704bd2; }

.management-tabs,
.subtabs {
  border-color: #e8e3ef;
  background: rgb(247 245 251 / 94%);
}
.management-tabs .subtab.active {
  border-color: rgb(255 255 255 / 62%);
  background: linear-gradient(105deg, #e879d8 0%, #bb6ce9 55%, #8b6cf4 100%);
  color: #fff;
  box-shadow: 0 7px 16px rgb(168 85 247 / 20%), inset 0 1px rgb(255 255 255 / 25%);
}
.management-tabs .subtab.active::before {
  background: rgb(255 255 255 / 20%);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 24%);
}
.management-tabs .subtab.active small { color: rgb(255 255 255 / 80%); }
.management-tabs .subtab:focus-visible { outline: 2px solid rgb(168 85 247 / 22%); outline-offset: 1px; }

.settings-card {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 97%), rgb(252 251 255 / 94%));
}
.settings-heading {
  border-bottom: 1px solid #efebf4;
}
.settings-icon {
  background: linear-gradient(145deg, #f1e8ff, #e6efff);
  color: #7654d7;
}
.switch-row {
  border: 1px solid #eeeaf3;
  border-radius: 9px;
  background: linear-gradient(90deg, #faf9fd, #f7f7fb);
}
.runtime-list > div { border-color: #ebe7f1; background: #fbfaff; }

.modal-card,
.registration-create-modal {
  border: 1px solid rgb(255 255 255 / 78%);
  border-radius: 15px;
  box-shadow: 0 24px 70px rgb(38 24 58 / 24%);
}
.modal-heading { border-bottom-color: #eeeaf3; }
.modal-overlay { backdrop-filter: blur(5px); }

.detail-panel,
.node-detail {
  border-color: #e8e4ef;
  background: linear-gradient(180deg, #fff, #faf9fd);
}
.empty-state { color: #8a8198; }

.skeleton { position: relative; overflow: hidden; border-radius: 6px; background: #ece9f1; color: transparent !important; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgb(255 255 255 / 72%), transparent); animation: skeleton-shimmer 1.35s infinite; }
@keyframes skeleton-shimmer { to { transform: translateX(100%); } }
.is-loading { pointer-events: none; opacity: .78; }
.is-loading .table-wrap { min-height: 120px; background: linear-gradient(180deg, #fff, #faf9fc); }

button:focus-visible,
a:focus-visible,
[role="tab"]:focus-visible {
  outline: 3px solid rgb(168 85 247 / 22%);
  outline-offset: 2px;
}

/* Unified desktop density for every primary page and tab. */
@media (min-width: 761px) {
  body { font-size: 13px; }
  .view { padding: 11px 16px 16px; }
  .topbar { min-height: 50px; padding: 6px 16px; }
  .topbar h1 { font-size: 19px; }
  .topbar p { margin-top: 1px; font-size: 10px; }

  .metrics-grid,
  .metric-grid,
  .registration-summary-grid,
  .mailbox-overview-metrics {
    gap: 7px;
    margin-bottom: 7px;
  }
  .metric-card,
  .mailbox-overview-metrics .metric-card {
    min-height: 51px;
    padding: 6px 10px;
    border-radius: 9px;
  }
  .metric-card span { font-size: 9px; line-height: 1.2; }
  .metric-card strong,
  .pool-metrics-grid .metric-card strong {
    margin: 1px 0;
    font-size: 18px;
    line-height: 1.12;
  }
  .metric-card small { font-size: 8.5px; line-height: 1.2; }
  .secondary-stats {
    min-height: 32px;
    margin-bottom: 7px;
    padding: 5px 10px;
  }
  .secondary-stats span { padding-inline: 12px; font-size: 10px; }
  .secondary-stats strong { font-size: 11px; }

  .management-tabs,
  .subtabs {
    min-height: 38px;
    gap: 3px;
    margin-bottom: 6px;
    padding: 3px;
    border-radius: 9px;
  }
  .management-tabs .subtab {
    min-width: 104px;
    min-height: 30px;
    grid-template-columns: 21px minmax(0, 1fr);
    grid-template-rows: 1fr;
    column-gap: 6px;
    padding: 3px 8px 3px 5px;
  }
  .management-tabs .subtab::before {
    width: 21px;
    height: 21px;
    grid-row: 1;
    border-radius: 6px;
    font-size: 8px;
  }
  .management-tabs .subtab span {
    align-self: center;
    font-size: 11px;
    line-height: 1;
  }
  .management-tabs .subtab small { display: none; }
  .management-tab-actions { gap: 4px; padding-left: 6px; }
  .management-tab-actions .button,
  .management-tab-actions .workspace-status {
    min-height: 28px;
    padding: 4px 8px;
    font-size: 10px;
  }

  .node-panel,
  .inspector,
  .pool-tab-panel,
  .mailbox-tab-panel,
  .registration-tab-panel,
  .settings-card,
  .release-upload-panel,
  .release-list-panel,
  .release-deploy-panel,
  .api-doc-card {
    padding: 9px;
  }
  .section-heading,
  .inspector-heading { gap: 10px; margin-bottom: 7px; }
  .section-heading h2,
  .section-heading h3,
  .inspector-heading h2,
  .settings-card h2 { font-size: 14px; line-height: 1.25; }
  .section-heading .muted,
  .inspector-heading .muted { margin-top: 1px; font-size: 10px; line-height: 1.3; }

  input,
  select,
  textarea {
    min-height: 31px;
    padding: 5px 8px;
    border-radius: 7px;
    font-size: 11px;
  }
  .field { gap: 4px; margin-bottom: 7px; }
  .field > span { font-size: 11px; }
  .filters { gap: 4px; }
  .filters select { min-width: 112px; }
  .search-field > span { left: 9px; font-size: 14px; }
  .search-field input { padding-left: 28px; }
  .button {
    min-height: 30px;
    gap: 4px;
    padding: 5px 9px;
    border-radius: 7px;
    font-size: 11px;
  }
  .button.compact {
    min-height: 28px;
    padding: 4px 8px;
    font-size: 10px;
  }
  .workspace-status,
  .live-badge,
  .plain-state { font-size: 10px; }

  .table-wrap { border-radius: 8px; }
  .data-table th {
    padding: 6px 8px;
    font-size: 9px;
    letter-spacing: .01em;
  }
  .data-table td {
    padding: 6px 8px;
    font-size: 11px;
    line-height: 1.3;
  }
  .data-table td strong { font-size: 11px; }
  .node-name span,
  .note-cell,
  .expiry-text { font-size: 10px; }
  .status-text,
  .plain-state {
    gap: 4px;
    font-size: 10px;
  }
  .status-text::before { width: 5px; height: 5px; }

  .pagination-bar,
  .registration-detail-pagination {
    width: 100%;
    min-height: 32px;
    padding-top: 5px;
    font-size: 10px;
  }
  .pagination-controls { gap: 5px; }
  .pagination-controls label { gap: 4px; }
  .pagination-controls select {
    min-width: 54px;
    min-height: 28px;
    padding: 3px 22px 3px 7px;
    font-size: 10px;
  }
  .pagination-controls strong { min-width: 66px; font-size: 10px; }
  .page-button {
    min-height: 28px;
    padding: 4px 8px;
    border-radius: 7px;
    font-size: 10px;
  }

  .account-sync-strip { min-height: 36px; margin-bottom: 6px; padding: 5px 9px; }
  .account-overview-panel { padding: 9px; }
  .account-lifecycle-grid,
  .mailbox-lifecycle-grid { gap: 7px; }
  .account-lifecycle-grid article,
  .mailbox-lifecycle-grid article { padding: 8px; border-radius: 9px; }
  .account-shortcut { padding: 7px 9px; }

  .api-docs-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 9px; }
  .api-docs-content { gap: 9px; }
  .api-doc-card p,
  .api-callout { font-size: 10.5px; }
  .api-doc-heading h3 { font-size: 14px; }
  .api-doc-heading > code { padding: 5px 7px; font-size: 10px; }
  .api-doc-card pre { padding: 9px; font-size: 10px; }

  .settings-heading { gap: 8px; padding-bottom: 7px; margin-bottom: 8px; }
  .settings-heading p { font-size: 10px; }
  .setting-row { padding: 8px 9px; }
  .setting-row strong { font-size: 11px; }
  .setting-row small { font-size: 9px; }
}

@media (max-width: 760px) {
  .view { padding: 10px; }
  .panel { border-radius: 10px; }
  .registration-proxy-grid { grid-template-columns: 1fr; }
  .registration-proxy-card .settings-heading { grid-template-columns: auto minmax(0, 1fr); }
  .registration-proxy-card .workspace-status { grid-column: 1 / -1; justify-self: start; }
  .registration-inherited-note { align-items: flex-start; flex-wrap: wrap; }
  .registration-inherited-note { grid-template-columns: 30px minmax(0, 1fr); }
  .registration-inherited-note .text-button { grid-column: 1 / -1; margin-left: 0; justify-self: start; }
  .proxy-help-row { align-items: flex-start; flex-wrap: wrap; }
  .proxy-help-row p { width: 100%; margin-left: 0; }
  .sidebar .nav-item, .sidebar .nav-icon, .button, .page-button { min-height: 44px; }
}