/* Viewport-sized shell; long details and compact/mobile panes remain scrollable. */
#app { height: 100dvh; min-height: 0; }
.sidebar, .login-rail {
  position: fixed; inset: 0 auto 0 0; width: var(--dash-nav-width); z-index: 40;
  background: var(--dash-nav-bg); color: var(--dash-nav-text); border-right: 1px solid var(--dash-nav-border);
}
.sidebar { display: flex; flex-direction: column; overflow: hidden; transition: width 150ms ease-out, transform 150ms ease-out; }
.main {
  margin-left: var(--dash-nav-width); height: 100dvh; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden; transition: margin-left 150ms ease-out;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 26px 24px; flex-shrink: 0; }
.mark { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: var(--dash-primary); color: var(--dash-on-primary); font-size: 22px; font-weight: 600; }
.sidebar .mark, .login-rail .mark { background: var(--dash-nav-mark); color: #fff; }
.brand-name, .user-copy { display: block; font-weight: 600; }
.brand-name { font-size: 16px; letter-spacing: -0.3px; }
.brand-note { display: block; margin-top: 3px; color: var(--dash-muted); font-size: 11px; }
.sidebar .brand-note, .sidebar .user-copy, .login-rail .brand-note { color: var(--dash-nav-muted); }
.nav-caption { padding: 0 28px 12px; font-size: 11px; color: var(--dash-nav-muted); }
.nav { display: flex; flex: 1; flex-direction: column; gap: 6px; min-height: 0; overflow: auto; padding: 0 16px 16px; }
.nav-btn { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 11px 14px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--dash-nav-muted); font-size: 13px; font-weight: 500; text-align: left; transition: background-color 150ms ease-out, color 150ms ease-out; }
.nav-btn:hover, .nav-btn[aria-current="page"] { background: var(--dash-nav-active); color: var(--dash-nav-text); }
.nav-btn[aria-current="page"] { border-color: var(--dash-nav-border); font-weight: 600; }
:root[data-theme="light"] .nav-btn[aria-current="page"] { color: var(--dash-primary); }
:root[data-theme="light"] .user-tab.is-active { border-color: #b8b4f5; }
.nav-btn:focus-visible { outline-color: var(--dash-nav-muted); }
.icon, .glyph { display: block; width: 18px; height: 18px; flex-shrink: 0; }
.sidebar-foot { display: flex; flex-shrink: 0; flex-direction: column; gap: 12px; padding: 18px 16px; border-top: 1px solid var(--dash-nav-border); }
.user-line { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0 12px; }
.mark-user { width: 30px; height: 30px; border-radius: 8px; background: var(--dash-primary-soft); color: var(--dash-primary); font-size: 12px; }
.sidebar .mark-user { background: var(--dash-nav-active); color: var(--dash-nav-text); }
.user-copy { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.page-head { display: flex; align-items: center; gap: 12px; flex-shrink: 0; min-height: 64px; padding: 12px var(--dash-edge); border-bottom: 1px solid var(--dash-border); background: var(--dash-surface); }
.toolbar-location { display: flex; gap: 12px; margin-right: auto; color: var(--dash-muted); font-size: 12px; white-space: nowrap; }
#toolbar-section { color: var(--dash-text); }
.toolbar-search { position: relative; display: flex; align-items: center; min-width: 0; }
.toolbar-search .glyph { position: absolute; left: 12px; width: 15px; color: var(--dash-muted); pointer-events: none; }
#search { width: 240px; min-height: 36px; padding: 8px 10px 8px 36px; font-size: 12px; }
.toolbar-user { display: flex; align-items: center; gap: 8px; margin-left: 4px; padding-left: 16px; border-left: 1px solid var(--dash-border); font-size: 12px; }
#toolbar-admin { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notification-btn { position: relative; }
#approval-dot { position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 3px; background: var(--dash-danger); }
.page-head { margin-bottom: 16px; }
.release-toolbar { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 16px; border-bottom: 1px solid var(--dash-border); padding-bottom: 10px; }
.release-toolbar .user-tabs { border: 0; padding: 0; }
.release-toolbar > .btn { margin: 0; flex-shrink: 0; }
.action-dialog { width: min(480px, calc(100% - 32px)); }
#action-message { margin-top: 14px; font-size: 14px; line-height: 1.7; }
#action-input { min-height: 96px; }
.sync-status { color: var(--dash-muted); font-size: 11px; }
.panel { flex: 1; min-width: 0; min-height: 0; width: 100%; margin: 0; padding: 0 var(--dash-edge) 16px; overflow: hidden; }
.kpi-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dash-gap); }
.overview-grid { flex-shrink: 0; padding: 0 var(--dash-edge); margin: 0 0 16px; }
.kpi-card { min-width: 0; border: 1px solid var(--dash-border); border-radius: var(--dash-radius); background: var(--dash-surface); box-shadow: 0 1px 2px var(--dash-shadow); padding: 14px 20px; text-align: left; }
.kpi-card h2, .kpi-title { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; color: var(--dash-muted); font-size: 12px; font-weight: 500; }
.kpi-card strong { display: block; font-size: 28px; line-height: 1.2; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.6px; overflow-wrap: anywhere; }
.kpi-card > span:not(.kpi-title) { display: block; margin-top: 6px; color: var(--dash-muted); font-size: 11px; }
.kpi-action { transition: background-color 150ms ease-out, border-color 150ms ease-out; }
.kpi-action:hover { background: var(--dash-control); border-color: var(--dash-primary); }
.kpi-action strong, .kpi-action .kpi-title > span { color: var(--dash-primary); }
#page-loading { position: fixed; bottom: 4px; right: var(--dash-edge); z-index: 10; margin: 0; font-size: 11px; pointer-events: none; }
.toast-region { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: flex; width: min(380px, calc(100vw - 32px)); flex-direction: column; gap: 10px; pointer-events: none; }
.toast { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px 44px 14px 42px; max-height: min(240px, calc(100dvh - 40px)); overflow: auto; overflow-wrap: anywhere; border: 1px solid var(--dash-border); border-radius: 12px; background: var(--dash-surface); box-shadow: var(--dash-shadow-lg); pointer-events: auto; animation: dash-feedback-in var(--dash-motion) both; }
.toast::before { content: ""; position: absolute; left: 18px; top: 20px; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 16%, transparent); }
.toast--success { color: var(--dash-success); border-color: var(--dash-success); }
.toast--error { color: var(--dash-danger); border-color: var(--dash-danger); }
.toast--warning { color: var(--dash-warning); border-color: var(--dash-warning); }
.toast--info { color: var(--dash-text); border-color: var(--dash-border); }
.toast-copy { display: grid; min-width: 0; gap: 2px; }
.toast-title { font-size: 12px; font-weight: 600; }
.toast-detail { font-size: 13px; line-height: 1.5; }
.toast-close { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--dash-muted); font-family: inherit; font-size: 20px; line-height: 1; cursor: pointer; transition: color 150ms ease-out, background-color 150ms ease-out; }
.toast-close:hover { background: var(--dash-control); color: var(--dash-text); }
.toast-close:focus-visible { outline: 2px solid var(--dash-focus); outline-offset: 1px; }
#panel-dashboard { display: flex; flex-direction: column; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, 1fr); grid-template-rows: minmax(0, 1.1fr) minmax(0, 0.9fr); flex: 1; min-height: 0; gap: var(--dash-gap); }
.dashboard-grid > .card { padding: 18px 20px; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
.request-total { display: flex; align-items: baseline; gap: 12px; margin: 12px 0; }
.request-total strong { font-size: 30px; line-height: 1.2; letter-spacing: -0.8px; font-weight: 600; font-variant-numeric: tabular-nums; }
.request-total > span { color: var(--dash-muted); font-size: 12px; }
.request-chart { display: flex; flex: 1; flex-direction: column; justify-content: space-evenly; gap: 10px; min-height: 110px; }
.metric-bar > div { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 12px; }
.metric-bar small { margin-left: 6px; color: var(--dash-muted); font-size: 10px; }
.metric-bar strong { font-weight: 500; font-variant-numeric: tabular-nums; }
.metric-bar meter { appearance: none; display: block; width: 100%; height: 6px; border: 0; border-radius: 4px; overflow: hidden; background: var(--dash-control-hover); }
.metric-bar meter::-webkit-meter-bar { background: var(--dash-control-hover); border: 0; border-radius: 4px; }
.metric-bar meter::-webkit-meter-optimum-value { background: var(--dash-primary); border-radius: 4px; }
#bar-server-errors::-webkit-meter-optimum-value { background: var(--dash-danger); }
#bar-client-errors::-webkit-meter-optimum-value { background: var(--dash-warning); }
.request-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--dash-border); color: var(--dash-muted); font-size: 10px; }
.request-foot strong { margin-left: 8px; color: var(--dash-text); font-weight: 500; }
.transfer-list { display: grid; flex: 1; grid-template-rows: repeat(5, minmax(32px, 1fr)); margin: 12px 0 0; }
.transfer-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--dash-border); }
.transfer-list > div:last-child { border: 0; }
.transfer-list dt { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--dash-muted); }
.transfer-list dt small { margin-left: 2px; font-size: 10px; }
.transfer-list dd { margin: 0; font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.metric-symbol, .recent-release__symbol { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 7px; background: var(--dash-control); color: var(--dash-primary); font-size: 16px; }
.recent-list { flex: 1; min-height: 0; overflow: auto; margin-top: 10px; }
.recent-release { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 0; border-bottom: 1px solid var(--dash-border); text-align: left; }
.recent-release:hover { background: var(--dash-control); }
.recent-release:last-child { border-bottom: 0; }
.recent-release__copy { flex: 1; min-width: 0; }
.recent-release__copy strong { display: block; font-size: 14px; font-weight: 600; }
.recent-release__copy small { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dash-muted); font-size: 11px; }
.workflow-steps { display: flex; flex: 1; flex-direction: column; justify-content: space-evenly; gap: 10px; margin: 12px 0; padding: 0; list-style: none; }
.workflow-steps li { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.workflow-steps li > span { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; border: 1px solid var(--dash-border); border-radius: 7px; color: var(--dash-primary); font-size: 12px; }
.workflow-steps small { display: block; margin-top: 2px; color: var(--dash-muted); font-size: 11px; }
.workflow-panel > .btn { width: 100%; margin: 0; }
.user-tabs { display: flex; flex-shrink: 0; gap: 8px; flex-wrap: wrap; margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--dash-border); }
.user-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 8px 12px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--dash-muted); font-size: 12px; font-weight: 500; }
.user-tab:hover { background: var(--dash-control); color: var(--dash-text); }
.user-tab.is-active { color: var(--dash-primary); background: var(--dash-primary-soft); }
.user-tab span { display: grid; place-items: center; min-width: 20px; padding: 0 5px; border-radius: 4px; background: var(--dash-control-hover); color: var(--dash-text); font-size: 10px; font-variant-numeric: tabular-nums; }
#panel-users, #panel-audit, #panel-releases { display: flex; flex-direction: column; }
.table-workspace { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 18px 22px 0; }
.table-workspace .table-host { flex: 1; min-height: 0; margin-top: 14px; }
#panel-users { overflow: hidden; }
.users-workspace { display: flex; flex-direction: column; flex: 1; width: 100%; min-height: 0; padding: 0; overflow: hidden; }
.users-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; flex-shrink: 0; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--dash-border); }
.users-toolbar .user-tabs { border: 0; padding: 0; }
.users-toolbar .lead { margin: 0; white-space: nowrap; }
.user-mobile-filter { display: none; }
.users-workspace #users { flex: 1; margin: 0; min-height: 0; }
#users table { table-layout: fixed; }
#users th { height: 44px; position: sticky; top: 0; z-index: 1; }
#users th:nth-child(1) { width: 26%; }
#users th:nth-child(2) { width: 100px; }
#users th:nth-child(3) { width: 180px; }
#users th:nth-child(4) { width: auto; }
#users th:nth-child(5) { width: 220px; }
#users th, #users td { text-align: left; }
#users td { height: 72px; padding: 10px 16px; }
#users th { padding: 10px 16px; }
#users th:last-child { text-align: right; }
.user-name { display: block; max-width: 100%; padding: 0; border: 0; background: transparent; color: var(--dash-link); font-size: 14px; font-weight: 500; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-meta { display: block; color: var(--dash-muted); font-size: 12px; overflow-wrap: anywhere; }
.user-name:hover { text-decoration: underline; }
#users th, #users td { text-align: center; vertical-align: middle; }
#users .user-actions { justify-content: center; flex-wrap: wrap; gap: 8px; }
#users .user-name { margin-inline: auto; text-align: center; }
#users .user-meta { text-align: center; }
#users td .row { justify-content: center; }
#users .user-actions .btn { white-space: nowrap; margin: 0; }
.user-actions .btn-danger-outline { color: var(--dash-danger); }
.user-pagination { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; flex-wrap: wrap; gap: 12px; padding: 12px 20px; min-height: 64px; border-top: 1px solid var(--dash-border); background: var(--dash-surface); color: var(--dash-muted); font-size: 12px; }
.user-pagination .btn { margin: 0; }
.user-mobile-filter { align-items: center; gap: 8px; }
.user-mobile-filter select { border: 1px solid var(--dash-border); border-radius: 8px; padding: 7px 10px; background: var(--dash-control); color: var(--dash-text); font: inherit; }
.user-loading { padding: 16px 20px; }
.user-loading-line { height: 40px; margin-top: 12px; border-radius: 8px; background: var(--dash-control); }
.user-loading-line:nth-child(3) { width: 82%; }
.user-loading-line:nth-child(4) { width: 64%; }
.user-load-error { display: flex; align-items: center; flex-shrink: 0; flex-wrap: wrap; gap: 12px; padding: 12px 20px; }
.user-load-error .btn, .user-load-error .err { margin: 0; }
.user-dialog { margin: 0 0 0 auto; width: min(520px, 100%); height: 100dvh; max-height: 100dvh; padding: 0; }
.user-dialog[open] { display: flex; flex-direction: column; }
.user-detail-head { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--dash-border); }
.user-detail-body { flex: 1; overflow: auto; min-height: 0; padding: 24px; }
.user-detail-body dl { margin: 0 0 24px; }
.user-detail-body dl > div { padding: 10px 0; }
.user-detail-body dt { color: var(--dash-muted); font-size: 12px; }
.user-detail-body dd { margin: 4px 0 0; overflow-wrap: anywhere; }
.user-detail-actions { flex-shrink: 0; padding: 16px 24px; border-top: 1px solid var(--dash-border); justify-content: flex-end; }
.user-history { margin: 12px 0; padding: 0; list-style: none; }
.user-history li { padding: 12px 0; border-bottom: 1px solid var(--dash-border); overflow-wrap: anywhere; }
.user-history p { white-space: pre-wrap; margin: 6px 0; }
.user-selectable, .user-selectable * { user-select: text; -webkit-user-select: text; }
@media (min-width: 768px) and (max-width: 1279px) {
  #users th:nth-child(1) { width: auto; }
  #users th:nth-child(4), #users td:nth-child(4) { display: none; }
  #users th:nth-child(3) { width: 165px; }
  #users th:nth-child(5) { width: 215px; }
}
.release-pagination { display: flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 16px; min-height: 64px; width: 100%; margin-top: auto; padding: 10px 12px; border-top: 1px solid var(--dash-border); background: var(--dash-surface); }
.release-pagination .btn { margin: 0; }
.release-pagination span { color: var(--dash-muted); font-size: 12px; }
#release-other { display: flex; flex: 1; flex-direction: column; min-height: 0; padding-top: 24px; }
.release-filter { display: flex; align-items: center; flex-shrink: 0; gap: 12px; margin-bottom: 8px; color: var(--dash-muted); font-size: 12px; }
.release-filter select { border: 1px solid var(--dash-border); border-radius: 8px; padding: 7px 12px; background: var(--dash-surface); color: var(--dash-text); font: inherit; }
#release-switch-hint { flex-shrink: 0; margin: 0; max-width: none; }
.release-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; align-items: stretch; align-content: start; flex: 1; min-height: 0; gap: var(--dash-gap); overflow: hidden; padding-bottom: 12px; }
.release-grid > .empty { grid-column: 1 / -1; }
.release-tile { display: flex; align-self: stretch; flex-direction: column; height: 100%; min-width: 0; min-height: 0; padding: 0; container-type: inline-size; }
.release-info { display: flex; flex: 1; flex-direction: column; min-height: 0; gap: 6px; padding: 12px; }
.release-heading { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; flex-wrap: wrap; gap: 8px 10px; }
.release-heading .release-version { min-width: 0; }
.release-heading .release-badges { flex: 1; min-width: 0; }
.release-heading .release-open { margin-left: 2px; }
/* Buttons wrap as one unit next to the badges instead of weaving between them. */
.release-heading__controls { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; margin-left: auto; }
/* Narrow tiles stack title, badges and buttons so a date or badge never gets clipped. */
@container (max-width: 430px) {
  .release-heading { flex-direction: column; align-items: stretch; gap: 6px; }
  .release-heading .release-badges { flex: 0 0 auto; }
  .release-heading .release-version { white-space: normal; }
  .release-heading__controls { margin-left: 0; }
  .release-date { margin-left: 0; }
}
.release-open { flex-shrink: 0; margin: 0; }
.release-version { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.release-badges, .release-detail-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.release-badges .status-badge { min-height: 26px; font-size: 12px; }
.release-date { margin-left: auto; color: var(--dash-muted); font-size: 12px; }
.release-tile:hover { border-color: var(--dash-primary); }
.release-notes { display: block; max-width: 65ch; margin: 0; color: var(--dash-muted); font-size: 13px; overflow-wrap: anywhere; white-space: pre-wrap; }
.release-card-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 6px; }
.link-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.link-row__value { display: block; flex: 1 1 auto; min-width: 0; padding: 9px 11px; border: 1px solid var(--dash-border); border-radius: 8px; background: var(--dash-control); color: var(--dash-text); font-family: "Cascadia Mono", Consolas, monospace; font-size: 12px; line-height: 1.5; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-row__value:hover { border-color: var(--dash-primary); color: var(--dash-link); }
.link-row .btn { flex-shrink: 0; min-height: 36px; margin: 0; padding: 6px 13px; font-size: 13px; }
.link-row--compact .link-row__value { padding: 8px 10px; font-size: 12px; }
.link-row--compact .btn { min-height: 32px; padding: 5px 11px; font-size: 12px; }
.link-stack { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.release-tile .release-actions { margin: 0; padding: 0; flex-shrink: 0; }
.release-tile .release-actions .btn { min-height: 32px; padding: 5px 13px; font-size: 13px; }
.release-lastest .release-version { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.release-lastest { border-style: dashed; }
#release-current { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dash-gap); flex-shrink: 0; max-height: none; padding-top: 16px; }
#release-current.has-integration { grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); }
#release-current > .card { min-height: 0; overflow: visible; }
.heading-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.heading-row > h2 { margin: 0; }
.current-placeholder-actions { min-height: 34px; align-items: center; justify-content: flex-end; color: var(--dash-muted); font-size: 13px; }
#current-release { display: flex; flex-direction: column; gap: 12px; }
.current-release-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.current-release-summary { min-width: 0; flex: 1 1 280px; }
.current-release-summary h2 { margin: 0 0 6px; }
.current-release-controls { display: flex; align-items: flex-start; justify-content: flex-end; flex-wrap: wrap; gap: 8px; flex-shrink: 0; }
.current-release-controls .release-actions { margin: 0; min-height: 36px; }
.current-release-controls .release-open { width: auto; margin: 0; }
#current-release .release-actions { min-height: 34px; }
.download { min-width: 0; color: var(--dash-muted); font-size: 13px; }
.public-address { display: flex; flex-direction: column; gap: 6px; }
.clipboard-buffer { position: fixed; left: -9999px; top: 0; }
.release-actions { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 12px; }
.release-actions .btn { margin: 0; }
:root[data-theme="dark"] .release-actions .btn-danger { color: var(--dash-danger); }
.release-actions .btn-danger { color: var(--dash-danger); border-color: var(--dash-danger); background: var(--dash-surface); }
.release-actions .btn-danger:hover:not(:disabled) { color: var(--dash-danger); background: var(--dash-danger-soft); filter: none; }
.current-component-meta { display: grid; gap: 4px; color: var(--dash-muted); font-size: 13px; }
.config-field { margin-top: 16px; }
.config-field > span { display: block; color: var(--dash-muted); font-size: 11px; }
.config-field .link-row { margin-top: 6px; }
#draft-dialog { width: min(600px, calc(100% - 32px)); padding: 28px; }
.release-dialog { width: min(720px, calc(100% - 32px)); padding: 28px; }
#release-detail { display: flex; flex-direction: column; gap: 20px; }
.release-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
#release-dialog-title { margin: 0; font-size: 22px; line-height: 1.3; }
#release-dialog-close { float: none; margin: 0; flex-shrink: 0; }
.release-dialog .field { margin-top: 0; }
.release-detail-summary { margin: 0; gap: 10px 18px; color: var(--dash-muted); font-size: 12px; }
.release-detail-notes { margin: 0; padding: 12px 14px; border-radius: 8px; background: var(--dash-control); max-height: 6em; }
.components-upload { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 20px 0; border-top: 1px solid var(--dash-border); }
.components-upload h3 { margin: 0; }
.components-upload .field { margin-top: 0; }
.components-upload > code { display: block; margin: 0; overflow-wrap: anywhere; font-size: 12px; }
.components-upload .download { margin: 0; }
.component-missing { margin: 0; color: var(--dash-muted); font-size: 12px; }
.component-upload input { max-width: 100%; padding: 9px 10px; font-size: 12px; }
#component-upload-progress { display: block; width: 100%; margin: 0; accent-color: var(--dash-primary); }
.component-upload-status { margin: 0; color: var(--dash-muted); overflow-wrap: anywhere; }
.component-upload-status:empty { display: none; }
.component-upload-status.err { padding: 12px 14px; border: 1px solid var(--dash-danger); border-radius: 8px; background: var(--dash-danger-soft); color: var(--dash-danger); }
.upload-actions { margin-top: 4px; justify-content: flex-start; gap: 12px 16px; }
.upload-actions .btn { margin: 0; }
.upload-actions .lead { flex: 1; margin: 0; max-width: none; }
.note-editor-actions { margin-top: 12px; gap: 10px; justify-content: flex-end; }
.note-editor-actions .btn { margin: 0; }
.release-dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px solid var(--dash-border); }
.release-dialog-footer > .btn, .release-dialog-footer .release-actions .btn { margin: 0; }
.release-dialog-footer .release-actions { margin: 0 0 0 auto; flex-shrink: 0; }
#draft-create .field { margin-top: 18px; }
#draft-create > .row { margin-top: 22px; }
#draft-create > .row .btn, .release-dialog .btn { min-height: 40px; padding: 9px 16px; margin-top: 0; }
.selected-file { font-size: 11px; color: var(--dash-muted); overflow-wrap: anywhere; }
.overlay { display: none; position: fixed; inset: 0; z-index: 30; border: 0; padding: 0; background: var(--dash-overlay); }
.menu-btn { display: none; }
.startup-screen { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; min-height: 100dvh; color: var(--dash-muted); font-size: 12px; }
.startup-screen strong { color: var(--dash-text); font-size: 20px; font-weight: 600; }
body:has(#app:not([hidden])) .startup-screen, body:has(#login-screen:not([hidden])) .startup-screen { display: none; }
.login-rail { position: absolute; width: auto; background: transparent; border: 0; }
.login-rail .brand { padding: 20px 24px; }
.login-main { position: relative; display: flex; align-items: center; justify-content: center; height: 100dvh; padding: 80px 32px 32px; overflow: auto; background: var(--dash-bg); }
.login-theme { position: fixed; top: 20px; right: 24px; }
.login-card { width: min(420px, 100%); padding: 28px; }
.login-card h1 { font-size: 25px; }
.login-card__icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 22px; border-radius: 10px; background: var(--dash-primary-soft); color: var(--dash-primary); font-size: 24px; font-weight: 600; }
.login-card .field:first-of-type { margin-top: 28px; }
.login-card .btn { justify-content: space-between; width: 100%; min-height: 44px; margin-top: 24px; }
.login-card__note { margin: 20px 0 0; color: var(--dash-muted); font-size: 11px; }
@media (min-width: 768px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  #app.collapsed .sidebar { width: 64px; }
  #app.collapsed .main { margin-left: 64px; }
  #app.collapsed .brand-copy, #app.collapsed .nav-label, #app.collapsed .user-copy, #app.collapsed .nav-caption { display: none; }
  #app.collapsed .brand, #app.collapsed .nav-btn, #app.collapsed .user-line { justify-content: center; padding-left: 0; padding-right: 0; }
  #app.collapsed .nav, #app.collapsed .sidebar-foot { padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 1279px) {
  :root { --dash-row-height: 76px; }
  .toolbar-location { display: none; }
  .toolbar-search { margin-left: auto; }
  .kpi-card { padding: 10px 16px; }
  .kpi-card h2, .kpi-title { margin-bottom: 4px; }
  .kpi-card strong { font-size: 24px; }
  .overview-grid { gap: 10px; margin-bottom: 12px; }
  .release-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .menu-btn { display: inline-flex; }
  .collapse-btn { display: none; }
  .main { margin-left: 0; }
  .sidebar { transform: translateX(-100%); }
  #app.nav-open .sidebar { transform: translateX(0); }
  #app.nav-open .overlay { display: block; }
}
@media (max-width: 767px) {
  :root { --dash-edge: 16px; --dash-row-height: 116px; --dash-tile-height: 220px; }
  .page-head { gap: 8px; padding: 10px 16px; flex-wrap: wrap; }
  .toolbar-search { flex: 1; }
  #search { width: 100%; }
  .toolbar-user { display: none; }
  .release-toolbar { gap: 8px; }
  .release-toolbar > .btn { padding: 8px 10px; font-size: 12px; }
  .sync-status { display: none; }
  .overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi-card { padding: 10px 12px; }
  .kpi-card strong { font-size: 22px; }
  .kpi-card > span:not(.kpi-title) { font-size: 10px; margin-top: 4px; }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: auto; overflow: auto; align-content: start; gap: 12px; }
  .dashboard-grid > .card { overflow: visible; padding: 16px; }
  .request-chart { min-height: 124px; }
  .recent-list { overflow: visible; }
  .section-head { gap: 10px; }
  .section-head .btn { padding: 6px 10px; font-size: 11px; }
  .table-workspace { padding: 14px 12px 0; }
  .user-tabs { gap: 4px; padding-bottom: 10px; }
  .user-tab { padding: 6px 8px; }
  .users-toolbar { padding: 12px; gap: 8px; }
  .users-toolbar #user-tabs { display: none; }
  .user-mobile-filter { display: flex; }
  #user-sort { font-size: 11px; }
  #users { padding: 0 12px; }
  #users table, #users tbody { display: block; }
  #users thead { display: none; }
  #users tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--dash-border); }
  #users tr:last-child { border: 0; }
  #users td { display: block; padding: 0; height: auto; border: 0; min-width: 0; font-size: 13px; }
  #users td:nth-child(3), #users td:nth-child(5) { grid-column: 1 / -1; }
  #users td:nth-child(3)::before { content: '申请时间：'; color: var(--dash-muted); }
  #users td:nth-child(4) { display: none; }
  #users .user-actions { justify-content: flex-start; flex-wrap: wrap; }
  #users .user-actions .btn, .user-pagination .btn { min-height: 44px; }
  .user-pagination { padding: 12px; gap: 10px; justify-content: center; }
  #user-total { flex-basis: 100%; text-align: center; }
  .user-pagination .row { gap: 6px; }
  .user-pagination .btn { padding: 8px; }
  .user-dialog { width: 100%; border-radius: 12px; }
  .user-detail-head, .user-detail-body { padding: 16px; }
  .user-detail-actions { padding: 12px 16px; }
  .user-detail-actions .btn, .user-detail-head .icon-btn { min-height: 44px; }
  .action-dialog .btn { min-height: 44px; }
  .release-pagination { gap: 10px; min-height: 60px; padding: 10px 4px; }
  .release-pagination .btn { padding: 6px 10px; }
  .release-pagination span { font-size: 11px; }
  #release-current, #release-current.has-integration { grid-template-columns: minmax(0, 1fr); max-height: none; gap: 12px; }
  #release-current > .card { padding: 16px; }
  .release-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .login-rail { display: none; }
  .login-main { padding: 64px 20px 20px; }
  .login-card { padding: 24px; }
}
/* Visual depth and motion pass: layered theme shadows and lifecycle-safe entrances. */
.sidebar { box-shadow: 1px 0 0 var(--dash-nav-border), 10px 0 32px color-mix(in srgb, var(--dash-nav-bg) 18%, transparent); }
.page-head { box-shadow: var(--dash-shadow-sm); position: relative; z-index: 2; }
.kpi-card { box-shadow: var(--dash-shadow-sm); transition: border-color var(--dash-motion), box-shadow var(--dash-motion), transform var(--dash-motion); }
.kpi-card:hover { box-shadow: var(--dash-shadow-md); transform: translateY(-2px); }
.release-tile, .users-workspace, .table-workspace, .release-dialog, .user-dialog, .action-dialog { box-shadow: var(--dash-shadow-md); }
.release-tile { transition: border-color var(--dash-motion), box-shadow var(--dash-motion), transform var(--dash-motion); }
.release-tile:hover { box-shadow: var(--dash-shadow-lg); transform: translateY(-2px); }
.user-pagination, .release-pagination { box-shadow: var(--dash-shadow-inset); }
.panel:not([hidden]) { animation: dash-panel-in var(--dash-motion) both; }
.kpi-grid > .kpi-card { animation: dash-panel-in var(--dash-motion) both; }
.kpi-grid > .kpi-card:nth-child(2) { animation-delay: 35ms; }
.kpi-grid > .kpi-card:nth-child(3) { animation-delay: 70ms; }
.kpi-grid > .kpi-card:nth-child(4) { animation-delay: 105ms; }
.release-grid > .release-tile, #releases .release-tile { animation: dash-panel-in var(--dash-motion) both; }
@keyframes dash-panel-in {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes dash-feedback-in {
  from { opacity: 0; transform: translate3d(14px, 6px, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
html[data-motion="compact"] *,
html[data-motion="compact"] *::before,
html[data-motion="compact"] *::after {
  animation-duration: 60ms !important;
  transition-duration: 60ms !important;
}
@media (max-height: 760px) and (min-width: 768px) {
  .page-head { min-height: 56px; padding-top: 8px; padding-bottom: 8px; }
  .dashboard-grid > .card { padding: 12px 16px; }
  .request-chart { min-height: 96px; gap: 6px; }
  .request-total { margin: 8px 0; }
  .request-foot { margin-top: 8px; padding-top: 6px; }
  .dashboard-grid .lead { font-size: 11px; }
  .workflow-steps { gap: 6px; margin: 8px 0; }
  .transfer-list { margin-top: 6px; }
}