:root {
  --bg: #f5f5f4;
  --surface: #ffffff;
  --surface-alt: rgba(255, 255, 255, 0.78);
  --surface-elevated: rgba(255, 255, 255, 0.78);
  --text: #111827;
  --muted: #737373;
  --border: #e5e5e5;
  --accent: #111827;
  --accent-text: #ffffff;
  --accent-subtle: #ededed;
  --danger: #B42318;
  --success: #1F7A4D;
  --code-bg: #101418;
  --code-text: #E6EDF3;
  --warning: #B7791F;
  --skin-shadow-panel: 0 26px 76px rgba(17,24,39,.12);
  --skin-gradient: linear-gradient(135deg, #fafafa, #ffffff 58%, #f2f2f2);
  --skin-radius: 18px;
  --skin-font-display: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
  --primary: var(--accent);
  --primary-subtle: var(--accent-subtle);
  --border-color: var(--border);
  --text-primary: var(--text);
  --text-secondary: var(--muted);
  --card-inset-bg: color-mix(in srgb, var(--accent-subtle) 22%, var(--surface));
  --account-pill-fg: var(--accent);
  --account-pill-bg: var(--accent-subtle);
  --account-pill-border: color-mix(in srgb, var(--accent) 26%, var(--border));
  --secret-panel-bg: color-mix(in srgb, var(--accent-subtle) 55%, var(--surface));
  --secret-panel-border: color-mix(in srgb, var(--accent) 24%, var(--border));
  --status-success-fg: var(--success);
  --status-success-bg: color-mix(in srgb, var(--success) 12%, var(--surface));
  --status-charge-fg: var(--warning);
  --status-charge-bg: color-mix(in srgb, var(--warning) 14%, var(--surface));
}

:root[data-admin-theme],
.admin-shell {
  --admin-background: oklch(1 0 0);
  --admin-foreground: oklch(0.145 0 0);
  --admin-card: oklch(1 0 0);
  --admin-card-foreground: oklch(0.145 0 0);
  --admin-popover: oklch(1 0 0);
  --admin-popover-foreground: oklch(0.145 0 0);
  --admin-primary: oklch(0.205 0 0);
  --admin-primary-foreground: oklch(0.985 0 0);
  --admin-secondary: oklch(0.97 0 0);
  --admin-secondary-foreground: oklch(0.205 0 0);
  --admin-muted: oklch(0.97 0 0);
  --admin-muted-foreground: oklch(0.556 0 0);
  --admin-accent: oklch(0.97 0 0);
  --admin-accent-foreground: oklch(0.205 0 0);
  --admin-destructive: oklch(0.577 0.245 27.325);
  --admin-border: oklch(0.922 0 0);
  --admin-input: oklch(0.922 0 0);
  --admin-ring: oklch(0.708 0 0);
  --admin-radius: 0.625rem;
  --admin-sidebar: oklch(0.985 0 0);
  --admin-sidebar-foreground: oklch(0.145 0 0);
  --admin-sidebar-primary: oklch(0.205 0 0);
  --admin-sidebar-primary-foreground: oklch(0.985 0 0);
  --admin-sidebar-accent: oklch(0.97 0 0);
  --admin-sidebar-accent-foreground: oklch(0.205 0 0);
  --admin-sidebar-border: oklch(0.922 0 0);
  --admin-sidebar-ring: oklch(0.708 0 0);
  --admin-success: oklch(0.55 0.12 150);
  --admin-success-soft: oklch(0.95 0.03 150);
  --admin-info: oklch(0.5 0.09 250);
  --admin-info-soft: oklch(0.955 0.02 250);
  --admin-warn: oklch(0.62 0.13 75);
  --admin-warn-soft: oklch(0.96 0.04 80);
  --admin-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --admin-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  --admin-row-h: 42px;
  --admin-shadow-sm: 0 1px 2px oklch(0.145 0 0 / 0.05);
  --admin-shadow-pop: 0 4px 16px oklch(0.145 0 0 / 0.10), 0 1px 3px oklch(0.145 0 0 / 0.06);
}

body.admin-page,
.admin-shell {
  --bg: var(--admin-background);
  --surface: var(--admin-card);
  /* 消息气泡等需要与面板背景区分的浅色块：复用 --admin-secondary（对齐原型 .msg-item.external 用 var(--secondary)），
     而不是遗漏映射、退回全局皮肤的半透明白（那套 token 在 admin 灰阶主题下不成立）。 */
  --surface-alt: var(--admin-secondary);
  --text: var(--admin-foreground);
  --muted: var(--admin-muted-foreground);
  --border: var(--admin-border);
  --accent: var(--admin-primary);
  --accent-text: var(--admin-primary-foreground);
  --accent-subtle: var(--admin-secondary);
  --danger: var(--admin-destructive);
  --success: var(--admin-success);
  --warning: var(--admin-warn);
  font-family: var(--admin-font-sans);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  width: 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
}

body {
  max-width: 100%;
  overflow: hidden;
  color: var(--text);
  background: var(--bg);
  font: 400 14px/1.5 ui-sans-serif, "Segoe UI", "Microsoft YaHei", sans-serif;
}

button,
input,
select,
textarea {
  max-width: 100%;
  font: inherit;
}

button,
select,
input,
textarea {
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  background: var(--surface);
}

button {
  min-height: 36px;
  padding: 0 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

button:disabled,
textarea:disabled,
input:disabled,
select:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

textarea,
input,
select {
  width: 100%;
  padding: 9px 10px;
}

textarea {
  resize: vertical;
}

label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.auth-page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 0;
  background: #F7F8FA;
}

.admin-login-shell {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 0;
  overflow: auto;
  padding: 20px;
}

.login-shell {
  width: min(100%, 360px);
}

.auth-page .login-shell {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  padding: 72px clamp(18px, 5vw, 56px);
}

.admin-login-shell .login-panel {
  width: min(100%, 420px);
}

.login-brand p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.login-panel,
.session-sidebar,
.chat-workspace,
.admin-detail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.login-panel {
  min-width: 0;
  padding: 18px;
}

.auth-page .login-panel {
  width: min(420px, 100%);
  padding: 28px;
  box-shadow: 0 22px 70px rgba(15, 23, 42, 0.08);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: var(--accent-text);
  background: var(--accent);
  font-weight: 900;
}

.login-brand h1,
.section-heading h1,
.panel h1,
.panel h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
}

.stack-form {
  display: grid;
  gap: 9px;
}

.inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.secondary-button {
  color: var(--accent);
  background: var(--accent-subtle);
  border-color: #B7D9D2;
}

.compact-button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

.sidebar-collapse-button {
  justify-self: end;
  min-width: 28px;
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  color: var(--accent);
  background: var(--accent-subtle);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: 999px;
  font-size: 15px;
  line-height: 1;
}

.admin-section-nav > .sidebar-collapse-button {
  margin-bottom: 10px;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, padding 160ms ease;
}

.admin-section-nav > .sidebar-collapse-button:hover {
  background: var(--accent-subtle);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  color: var(--text);
}

.sidebar-heading-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 6px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(21, 24, 28, 0.48);
}

.modal-panel {
  width: min(100%, 560px);
  max-height: min(720px, calc(100vh - 40px));
  min-width: 0;
  overflow: auto;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(21, 24, 28, 0.18);
}

.modal-head,
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modal-head {
  margin-bottom: 14px;
}

.modal-head h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
}

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

.segmented-field {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.segmented-field legend {
  width: 100%;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.segmented-field label,
.checkbox-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.segmented-field input,
.checkbox-line input {
  width: auto;
  margin: 0;
}

.feedback-workspace {
  display: grid;
  gap: 12px;
  min-height: 0;
}

.feedback-list,
.feedback-detail-pane,
.feedback-detail-body {
  min-width: 0;
}

.feedback-row {
  display: grid;
  width: 100%;
  min-height: 54px;
  margin-bottom: 8px;
  padding: 8px 10px;
  text-align: left;
  background: var(--surface);
}

.feedback-row.active {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.feedback-row strong,
.feedback-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feedback-row span,
.feedback-text-block h3,
.feedback-github-box h3 {
  color: var(--muted);
  font-size: 12px;
}

.feedback-text-value {
  max-height: 220px;
  min-width: 0;
  overflow: auto;
  padding: 10px;
  color: var(--admin-foreground);
  background: var(--admin-muted);
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.feedback-github-box {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.landing-button {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.danger-button {
  color: var(--danger);
  background: #FFF5F3;
  border-color: #F0B8B2;
}

.error-line,
.status-line {
  min-height: 18px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

.error-line:not(:empty) {
  color: var(--danger);
}

.success-line {
  color: var(--success, #2e7d32);
  min-height: 18px;
  margin: 0;
}

.app-shell {
  height: 100vh;
  min-width: 0;
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr);
}

.landing-page {
  overflow: auto;
}

.landing-shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.landing-topbar,
.landing-footer {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(18px, 5vw, 56px);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.landing-footer {
  align-items: start;
  border-top: 1px solid var(--border);
  border-bottom: 0;
}

.landing-brand,
.landing-nav,
.landing-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.landing-brand {
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
}

.landing-nav {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.landing-nav a,
.portal-logout-button,
.portal-user-pill {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.auth-page .login-brand {
  margin-bottom: 22px;
}

.auth-page .login-brand h1 {
  font-size: 22px;
}

.auth-page .stack-form {
  gap: 10px;
}

.auth-page .stack-form input {
  min-height: 42px;
  background: #FFFFFF;
}

.auth-page .primary-button {
  min-height: 42px;
  margin-top: 2px;
}

.portal-auth-slot {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.portal-user-pill {
  max-width: 160px;
  padding: 0 10px;
  color: var(--text);
  background: var(--accent-subtle);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-logout-button {
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.auth-topbar {
  width: 100%;
  flex: 0 0 auto;
  z-index: 20;
}

.landing-hero,
.landing-section {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 42px clamp(18px, 5vw, 56px);
}

.landing-hero {
  min-height: min(560px, calc(100vh - 160px));
  display: grid;
  align-content: center;
  gap: 16px;
}

.landing-kicker,
.landing-lede,
.landing-section p,
.landing-quickstart li {
  color: var(--muted);
}

.landing-kicker {
  margin: 0;
  font-size: 13px;
  font-weight: 900;
}

.landing-hero h1 {
  margin: 0;
  color: var(--text);
  font-size: 48px;
  line-height: 1.06;
}

.landing-lede {
  max-width: 680px;
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
}

.landing-actions {
  flex-wrap: wrap;
  margin-top: 8px;
}

.landing-section {
  display: grid;
  gap: 18px;
  border-top: 1px solid var(--border);
}

.landing-section-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.landing-section h2,
.landing-section h3 {
  margin: 0;
}

.landing-section h2 {
  font-size: 20px;
  line-height: 1.25;
}

.landing-feature-grid,
.landing-practice-grid {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.landing-feature-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.landing-practice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.landing-feature-grid article,
.landing-practice-grid article {
  min-width: 0;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.landing-feature-grid p,
.landing-practice-grid p {
  margin: 8px 0 0;
  overflow-wrap: anywhere;
}

.landing-quickstart ol {
  margin: 0;
  padding-left: 20px;
}

.portal-page,
.ticket-page {
  background: #F7F8FA;
}

.portal-topbar {
  position: sticky;
  top: 0;
  z-index: 12;
}

.portal-nav {
  row-gap: 4px;
}

.portal-nav a {
  padding: 0 4px;
}

.portal-hero,
.ticket-hero {
  min-height: min(500px, calc(100vh - 150px));
}

.portal-hero-rail {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.portal-hero-rail span,
.capability-index {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 2px 8px;
  color: var(--accent);
  background: var(--accent-subtle);
  border: 1px solid #B7D9D2;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.portal-capability-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.portal-capability-grid article {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.portal-capability-grid article:nth-child(1),
.portal-capability-grid article:nth-child(2),
.portal-capability-grid article:nth-child(3) {
  grid-column: span 2;
}

.portal-capability-grid article:nth-child(4),
.portal-capability-grid article:nth-child(5) {
  grid-column: span 3;
}

.portal-capability-grid h3,
.portal-capability-grid p,
.ticket-query-card h2,
.ticket-query-card p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.portal-capability-grid p,
.soon-card p {
  color: var(--muted);
}

.announcements-home-section {
  gap: 14px;
}

.announcements-list {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.announcements-home-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.announcement-card {
  min-width: 0;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.announcement-card.is-unread {
  border-color: #84B8B0;
  box-shadow: inset 3px 0 0 var(--accent);
}

.announcement-card-compact {
  display: grid;
  align-content: start;
  gap: 8px;
}

.announcement-card-head {
  min-width: 0;
}

.announcement-card h3,
.announcement-card p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.announcement-card h3 {
  font-size: 15px;
  line-height: 1.3;
}

.announcement-card p,
.announcement-body {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.announcement-body p,
.announcement-modal-body p {
  white-space: pre-wrap;
}

.announcement-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.announcement-type,
.announcement-unread-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.announcement-type-announcement {
  color: #0D504A;
  background: #E6F4F1;
  border-color: #B7D9D2;
}

.announcement-type-news {
  color: #3D4E12;
  background: #F0F6DA;
  border-color: #D5E6A4;
}

.announcement-type-release_note {
  color: #5B3D00;
  background: #FFF3CF;
  border-color: #E7C778;
}

.announcement-type-changelog {
  color: #334155;
  background: #EEF2F7;
  border-color: #CBD5E1;
}

.announcement-unread-badge {
  color: var(--accent);
  background: var(--accent-subtle);
  border-color: #B7D9D2;
}

.announcement-filter {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.announcement-filter-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 9px;
  background: #FAFBFC;
}

.announcement-filter-button.active {
  color: var(--surface);
  background: var(--accent);
  border-color: var(--accent);
}

.announcement-filter-button span {
  min-width: 20px;
  padding: 1px 5px;
  color: inherit;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
}

.announcement-summary-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(140px, 0.28fr) minmax(0, 1fr);
  gap: 10px;
  cursor: pointer;
}

.announcement-summary-title {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.announcement-summary-title strong,
.announcement-summary-title span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.announcement-summary-title span {
  color: var(--muted);
  font-size: 13px;
}

.announcement-body {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.announcement-modal-panel {
  display: grid;
  gap: 14px;
}

.announcement-modal-body {
  display: grid;
  gap: 10px;
}

.portal-footer-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.donation-footer-link {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 10px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.donation-footer-link span {
  font-size: 13px;
  font-weight: 900;
}

.donation-footer-link small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.donation-section {
  display: grid;
  justify-items: center;
  padding-top: 22px;
}

.donation-panel {
  width: min(760px, 100%);
}

.ticket-system-layout {
  align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
}

.ticket-system-layout.sidebar-collapsed {
  grid-template-columns: minmax(0, 1fr) 56px;
}

.ticket-system-main,
.ticket-system-side {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.ticket-system-side {
  position: relative;
}

.ticket-sidebar-toggle {
  justify-self: end;
}

.ticket-system-layout.sidebar-collapsed .ticket-system-side {
  justify-items: end;
}

.ticket-system-layout.sidebar-collapsed .ticket-system-side > :not(.ticket-sidebar-toggle) {
  display: none;
}

.single-workflow-layout {
  width: min(820px, 100%);
  display: grid;
  gap: 14px;
}

.ticket-query-card {
  min-width: 0;
  display: grid;
  gap: 14px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.ticket-card-head {
  min-width: 0;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.ticket-card-head h2 {
  margin-top: 2px;
}

.feedback-ticket-form {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.feedback-ticket-form label {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.feedback-ticket-form input[type="file"] {
  min-width: 0;
  max-width: 100%;
  color: var(--muted);
  background: #FAFBFC;
}

.feedback-category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.feedback-category-grid label {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 38px;
  padding: 8px 10px;
  color: var(--text);
  background: #FAFBFC;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

.feedback-category-grid input {
  width: auto;
  margin: 0;
}

.feedback-category-grid label:has(input:checked) {
  color: var(--accent);
  background: var(--accent-subtle);
  border-color: var(--accent);
}

.feedback-category-grid span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.form-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.form-actions .status-line {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ticket-result {
  min-width: 0;
}

.ticket-result:empty {
  display: none;
}

.ticket-result-card {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 14px;
  background: #FAFBFC;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.ticket-result-card h3 {
  margin: 0;
  color: var(--accent);
  overflow-wrap: anywhere;
}

.ticket-message-thread {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.ticket-message-thread h4 {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.ticket-message {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-alt);
}

.ticket-message.internal {
  border-style: dashed;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.ticket-message-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.ticket-message-head strong {
  color: var(--text);
}

.ticket-message-badge {
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  font-size: 11px;
}

.ticket-message-text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
}

.ticket-reply-form {
  margin-top: 8px;
}

.ticket-result-fields {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ticket-result-fields div {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.ticket-result-fields span,
.my-ticket-row small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.ticket-result-fields strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.my-ticket-list {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.my-ticket-row {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 10px;
  background: #FAFBFC;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}

.my-ticket-row:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.my-ticket-row div {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.my-ticket-row strong,
.my-ticket-row p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.my-ticket-row span {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.soon-card {
  gap: 8px;
  background: #FAFBFC;
}

.donation-card {
  gap: 16px;
}

.donation-purpose {
  color: var(--muted);
}

.donation-amounts {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.donation-amounts legend {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.donation-amounts label {
  min-width: 0;
  min-height: 38px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  color: var(--text);
  background: #FAFBFC;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
}

.donation-amounts input[type="radio"] {
  width: auto;
  margin: 0;
}

.donation-amounts label:has(input:checked) {
  color: var(--accent);
  background: var(--accent-subtle);
  border-color: var(--accent);
}

.donation-custom-amount {
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) !important;
}

.donation-custom-amount input {
  min-width: 0;
  height: 30px;
  padding: 5px 8px;
}

.donation-selected-amount {
  color: var(--accent);
  font-weight: 800;
}

.donation-channel-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.donation-channel {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #FAFBFC;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.donation-channel h3 {
  margin: 0;
  font-size: 14px;
}

.donation-qr {
  min-width: 0;
  display: grid;
  place-items: center;
  min-height: 128px;
  padding: 10px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 8px;
}

.donation-qr img {
  width: min(160px, 100%);
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 6px;
}

.donation-link {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  text-align: center;
}

.donation-unavailable {
  min-width: 0;
  margin: 0;
  padding: 10px;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 8px;
  font-weight: 800;
  text-align: center;
}

.datasheet-submit-card {
  background: var(--surface);
}

.account-application-card {
  background: var(--surface);
}

.recommended-field input {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  background: #FAFFFD;
}

.ticket-admin-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.ticket-admin-toolbar {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(112px, 1fr)) auto auto;
  gap: 8px;
  align-items: end;
  min-width: 0;
}

.ticket-admin-toolbar label {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.ticket-admin-grid {
  display: grid;
  grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
}

.ticket-admin-list,
.ticket-admin-detail,
.ticket-admin-attachment-list,
.ticket-admin-detail-body {
  min-width: 0;
}

.ticket-admin-detail {
  display: grid;
  gap: 12px;
}

.ticket-admin-detail .feedback-detail-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: 210px;
  overflow: auto;
  padding-right: 4px;
}

.ticket-admin-detail .feedback-text-block {
  min-width: 0;
}

.ticket-admin-detail .feedback-text-block h3 {
  margin: 0 0 4px;
}

.ticket-admin-detail .feedback-text-value {
  max-height: 72px;
  padding: 8px 9px;
  font-size: 12px;
  line-height: 1.45;
}

.ticket-admin-card {
  min-height: auto;
  padding: 10px 12px;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-card);
}

.ticket-admin-card:hover {
  background: var(--admin-secondary);
}

.ticket-admin-card.selected {
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 1px var(--admin-primary);
}

.ticket-admin-card-head {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ticket-admin-card-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  color: var(--admin-muted-foreground);
  background: var(--admin-secondary);
  font-size: 10px;
  font-weight: 750;
}

.ticket-admin-card-head strong {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  white-space: nowrap;
}

.ticket-admin-card-flag {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--admin-warn);
}

.ticket-admin-detail-head {
  min-width: 0;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.ticket-admin-detail-head h2 {
  margin: 0;
}

.ticket-admin-detail-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.46fr);
  gap: 14px;
  align-items: start;
}

.ticket-admin-conversation,
.ticket-admin-side-section,
.ticket-admin-review-card,
.ticket-admin-application-actions {
  min-width: 0;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-card);
  padding: 12px;
}

.ticket-admin-sidecar {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.ticket-admin-reply-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ticket-admin-type-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  color: var(--accent);
  background: var(--accent-subtle);
  border: 1px solid var(--admin-border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.ticket-admin-attachment-list {
  display: grid;
  gap: 8px;
}

.ticket-admin-attachment-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  background: var(--admin-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.ticket-admin-attachment-info {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.ticket-admin-attachment-info strong,
.ticket-admin-attachment-info span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ticket-admin-attachment-info span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.ticket-admin-attachment-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.ticket-admin-download,
.ticket-admin-preview-button {
  justify-self: end;
}

.ticket-admin-preview {
  min-width: 0;
  max-width: 100%;
  max-height: 280px;
  margin: 10px 0 0;
  overflow: auto;
  padding: 12px;
  color: var(--admin-primary-foreground);
  background: var(--admin-primary);
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.datasheet-review-panel {
  display: grid;
  grid-template-columns: minmax(120px, 0.35fr) minmax(0, 1fr);
  gap: 10px 12px;
  min-width: 0;
}

.datasheet-review-panel legend,
.datasheet-review-panel .status-line {
  grid-column: 1 / -1;
}

.ticket-admin-application-actions {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.account-shell {
  height: auto;
  min-height: 100vh;
  grid-template-rows: auto auto;
  overflow: visible;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
}

.account-status {
  min-height: 20px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.account-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.account-metric-grid article,
.account-ledger-row,
.account-key-row,
.account-secret-panel {
  min-width: 0;
  padding: 16px;
  background: var(--card-inset-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.account-metric-grid article {
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.account-metric-grid article:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  box-shadow: var(--skin-shadow-panel);
}

.account-metric-grid span,
.account-ledger-row span,
.account-key-info span,
.account-secret-panel p {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.account-metric-grid strong {
  display: block;
  margin-top: 6px;
  overflow-wrap: anywhere;
  font-size: 22px;
  line-height: 1.2;
}

.account-form,
.account-key-form {
  display: grid;
  gap: 10px;
}

.account-form label,
.account-key-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.account-profile-panel .account-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-profile-panel label:nth-of-type(n + 6),
.account-form-actions {
  grid-column: 1 / -1;
}

.compact-account-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.account-form-actions,
.account-secret-actions,
.account-key-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.account-locale-control {
  display: grid;
  grid-template-columns: minmax(0, 140px) minmax(160px, 1fr);
  align-items: center;
  gap: 8px;
}

.account-onboarding-list {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.account-onboarding-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: var(--card-inset-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.account-onboarding-row.completed {
  background: var(--accent-subtle);
}

.account-onboarding-row a {
  min-width: 0;
  overflow-wrap: anywhere;
}

.account-onboarding-hint,
.mcp-access-onboarding-hint {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.mcp-access-onboarding-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--card-inset-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.account-readonly-grid,
.account-credits-list,
.account-key-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.account-readonly-grid h3 {
  margin: 0 0 8px;
  font-size: 13px;
}

.account-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.account-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  max-width: 100%;
  padding: 0 10px;
  overflow-wrap: anywhere;
  color: var(--accent);
  background: var(--accent-subtle);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
}

.account-policy-list {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
  gap: 6px 10px;
  margin: 0;
}

.account-policy-list dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.account-policy-list dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 800;
}

.account-mode-list {
  display: grid;
  gap: 8px;
}

.account-mode-row {
  display: grid;
  grid-template-columns: minmax(82px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 8px 10px;
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 800;
  border-radius: 999px;
}

.status-badge.success {
  color: var(--status-success-fg);
  background: var(--status-success-bg);
}

.status-badge.charge {
  color: var(--status-charge-fg);
  background: var(--status-charge-bg);
}

.status-badge .tick {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}

.account-key-form {
  grid-template-columns: minmax(160px, 1fr) minmax(150px, 0.7fr) auto;
  align-items: end;
}

.account-secret-panel {
  display: grid;
  grid-template-columns: minmax(160px, 0.8fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-color: var(--secret-panel-border);
  background: var(--secret-panel-bg);
}

.account-secret-panel code,
.account-key-info code {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--code-text);
  background: var(--code-bg);
  border-radius: 6px;
}

.account-secret-panel code {
  padding: 8px;
}

.account-key-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(120px, 0.8fr) auto;
  align-items: center;
  gap: 12px;
}

.account-key-info,
.account-ledger-row {
  display: grid;
  gap: 5px;
}

.account-key-info code {
  padding: 5px 7px;
}

.account-key-grants {
  min-width: 0;
}

.account-ledger-row small {
  min-width: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.mcp-access-keys-panel,
.mcp-access-permissions-panel,
.mcp-access-template-panel,
.mcp-access-smoke-panel,
.mcp-access-security-panel {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 14px;
}

.mcp-access-template-panel {
  grid-row: span 2;
}

.mcp-access-kicker {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.mcp-access-server-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mcp-access-server-grid article,
.mcp-access-key-row,
.mcp-access-public-note,
.mcp-access-security-list p {
  min-width: 0;
  padding: 12px;
  background: #FAFBFC;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.mcp-access-server-grid article {
  display: grid;
  gap: 8px;
}

.mcp-access-server-grid span,
.mcp-access-key-row small,
.mcp-access-public-note,
.mcp-access-security-list p {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

.mcp-access-server-grid code,
.mcp-access-key-row code,
.mcp-access-template-code {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--code-text);
  background: var(--code-bg);
  border: 1px solid #2A3A38;
  border-radius: 8px;
}

.mcp-access-server-grid code,
.mcp-access-key-row code {
  padding: 8px;
}

.mcp-access-key-list,
.mcp-access-download-list,
.mcp-access-security-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.mcp-access-key-row {
  display: grid;
  gap: 10px;
}

.mcp-access-key-row.unavailable {
  background: #FFF7F0;
  border-color: #F2C6A0;
}

.mcp-access-key-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.mcp-access-key-head strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mcp-access-template-tabs,
.mcp-access-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.mcp-access-template-tabs button {
  min-width: 0;
}

.mcp-access-template-tabs button[aria-selected="true"] {
  color: #0D504A;
  background: #E6F4F1;
  border-color: #B7D9D2;
}

.mcp-access-template-tabs button:disabled {
  color: #9AA4A1;
  cursor: not-allowed;
}

.mcp-access-template-code {
  min-height: 260px;
  max-height: 420px;
  margin: 0;
  padding: 14px;
  overflow: auto;
  line-height: 1.55;
}

.mcp-access-template-code code {
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  font-size: 12px;
}

.mcp-access-download-list a {
  width: fit-content;
}

.mcp-client-hero {
  min-height: min(500px, calc(100vh - 160px));
}

.mcp-client-hero code,
.mcp-fast-path code,
.mcp-template-grid code,
.mcp-step-list code,
.mcp-boundary-section code {
  padding: 2px 6px;
  color: #0D504A;
  background: #E6F4F1;
  border: 1px solid #B7D9D2;
  border-radius: 6px;
  font-size: 0.92em;
}

.mcp-fast-path {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.mcp-fast-path li {
  min-width: 0;
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.mcp-fast-path strong {
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.mcp-fast-path span {
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.mcp-template-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.mcp-template-grid article {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.mcp-template-title {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mcp-template-title span {
  flex: 0 0 auto;
  padding: 3px 8px;
  color: #0D504A;
  background: #E6F4F1;
  border: 1px solid #B7D9D2;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.mcp-template-grid p {
  margin: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.mcp-template-grid pre {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 14px;
  overflow: auto;
  color: #DDE7E6;
  background: #17201F;
  border: 1px solid #2A3A38;
  border-radius: 8px;
  line-height: 1.55;
}

.mcp-template-grid pre code {
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 12px;
}

.mcp-step-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 22px;
}

.mcp-step-list li {
  color: var(--muted);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.product-version {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.product-changelog {
  min-width: min(420px, 100%);
  color: var(--muted);
  font-size: 12px;
}

.product-changelog summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 900;
}

.product-changelog h3 {
  margin: 10px 0 4px;
  color: var(--text);
  font-size: 12px;
}

.product-changelog ul {
  margin: 0;
  padding-left: 18px;
}

.product-shell-panel {
  min-width: 0;
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  font-size: 12px;
}

.fingerprint-summary {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.fingerprint-entry {
  color: var(--muted);
}

.product-shell-panel a,
.product-signature-top a,
.landing-footer a {
  color: var(--muted);
  font-weight: 800;
}

.product-signature-top {
  min-width: 0;
  max-width: 180px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-changelog-top {
  min-width: 0;
}

.product-changelog-top .product-changelog {
  min-width: 0;
}

.topbar {
  position: relative;
  /* 建立高于主体面板的层叠上下文，确保用户菜单下拉浮于最上层、可点击（修复 admin 下拉被压住）。 */
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding: 0 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.brand {
  min-width: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

.topbar-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.meta-pill,
.text-link {
  min-width: 0;
  max-width: 34vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta-pill {
  padding: 4px 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--border);
  border-radius: 999px;
}

.meta-pill:empty {
  display: none;
}

/* ===== 统一门户导航（product-shell 单一数据源渲染） ===== */
/* 首页胶囊：槽位用 display:contents，让注入的链接直接参与 .portal-nav 的 flex，
   沿用既有 .portal-nav a 样式与 .active 高亮。 */
.portal-nav [data-portal-nav] {
  display: contents;
}

/* 普通 topbar（account / admin）：槽位本身即导航容器。 */
.topbar-nav {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  min-width: 0;
}

.topbar-nav .portal-nav-link {
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
}

.topbar-nav .portal-nav-link:hover {
  background: var(--accent-subtle);
  color: var(--text);
}

.topbar-nav .portal-nav-link.active {
  color: var(--accent);
  background: var(--accent-subtle);
}

.compact-field {
  display: flex;
  align-items: center;
  gap: 6px;
}

.compact-field select {
  width: 112px;
  padding: 5px 8px;
}

/* ---- Admin FE1 shared design-system components ---- */
.admin-primary-button,
.admin-secondary-button,
.admin-danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: calc(var(--admin-radius) - 2px);
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 530;
  line-height: 1;
}

.admin-primary-button {
  color: var(--admin-primary-foreground);
  background: var(--admin-primary);
  border-color: var(--admin-primary);
}

.admin-secondary-button {
  color: var(--admin-foreground);
  background: var(--admin-card);
  border-color: var(--admin-border);
}

.admin-danger-button {
  color: var(--admin-destructive);
  background: var(--admin-card);
  border-color: color-mix(in oklch, var(--admin-destructive) 32%, var(--admin-border));
}

.admin-danger-button:hover {
  background: color-mix(in oklch, var(--admin-destructive) 8%, var(--admin-card));
}

.admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--admin-border);
  background: var(--admin-secondary);
  color: var(--admin-secondary-foreground);
  font-size: 11px;
  font-weight: 550;
  white-space: nowrap;
}

.admin-badge-dot::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.admin-badge-success {
  background: var(--admin-success-soft);
  color: var(--admin-success);
  border-color: color-mix(in oklch, var(--admin-success) 22%, transparent);
}

.admin-badge-info {
  background: var(--admin-info-soft);
  color: var(--admin-info);
  border-color: color-mix(in oklch, var(--admin-info) 22%, transparent);
}

.admin-badge-warn {
  background: var(--admin-warn-soft);
  color: var(--admin-warn);
  border-color: color-mix(in oklch, var(--admin-warn) 26%, transparent);
}

.admin-badge-danger {
  background: color-mix(in oklch, var(--admin-destructive) 12%, transparent);
  color: var(--admin-destructive);
  border-color: color-mix(in oklch, var(--admin-destructive) 30%, transparent);
}

.admin-badge-muted {
  background: var(--admin-secondary);
  color: var(--admin-muted-foreground);
}

.admin-badge-solid {
  background: var(--admin-primary);
  color: var(--admin-primary-foreground);
  border-color: transparent;
}

.admin-dense-table {
  overflow: auto;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  background: var(--admin-card);
}

.admin-dense-table table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 13px;
}

.admin-dense-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 9px 12px;
  border-bottom: 1px solid var(--admin-border);
  background: var(--admin-card);
  color: var(--admin-muted-foreground);
  font-size: 11.5px;
  font-weight: 550;
  text-align: left;
  white-space: nowrap;
}

.admin-dense-table td {
  height: var(--admin-row-h);
  padding: 0 12px;
  border-bottom: 1px solid var(--admin-border);
  color: var(--admin-foreground);
  vertical-align: middle;
  white-space: nowrap;
}

.admin-dense-table tbody tr:hover {
  background: var(--admin-secondary);
}

.admin-dense-table tbody tr.selected {
  background: color-mix(in oklch, var(--admin-primary) 5%, var(--admin-card));
}

.admin-dense-table tbody tr.selected td:first-child {
  box-shadow: inset 2px 0 0 var(--admin-primary);
}

/* 批次B（2.2.27）：运行诊断追踪记录表 —— 复用 .admin-dense-table，detail 收进「默认折叠、点箭头展开」
   的明细行；对齐原型 settings.html 的 diag-expand-btn/diag-detail-row，修「行高参差、无法扫读」。 */
.discovery-traces-table .discovery-trace-row.has-detail {
  cursor: pointer;
}
.discovery-traces-table .trace-expand-cell {
  width: 34px;
  padding-right: 0;
}
.discovery-trace-expand {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--admin-muted-foreground);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.discovery-trace-expand:hover:not(:disabled) {
  background: var(--admin-secondary);
  color: var(--admin-foreground);
}
.discovery-trace-expand.open {
  transform: rotate(90deg);
  color: var(--admin-foreground);
}
.discovery-trace-expand:disabled {
  opacity: 0.28;
  cursor: default;
}
.discovery-trace-row.expanded {
  background: var(--admin-secondary);
}
.discovery-trace-detail-row > .discovery-trace-detail-cell {
  height: auto;
  padding: 10px 16px 13px 44px;
  white-space: normal;
  background: color-mix(in oklch, var(--admin-foreground) 3%, transparent);
}
.discovery-trace-detail-row > .discovery-trace-detail-cell .debug-trace-kv {
  margin: 0;
}

/* pipeline 类型徽标三色区分（对齐原型 badge-pipeline-*），全走 token、无硬编码色。 */
.admin-badge-pipeline-single {
  background: var(--admin-secondary);
  color: var(--admin-muted-foreground);
  border-color: var(--admin-border);
}
.admin-badge-pipeline-twostage {
  background: var(--admin-info-soft);
  color: var(--admin-info);
  border-color: color-mix(in oklch, var(--admin-info) 24%, transparent);
}
.admin-badge-pipeline-global {
  background: color-mix(in oklch, var(--admin-foreground) 8%, transparent);
  color: var(--admin-foreground);
  border-color: color-mix(in oklch, var(--admin-foreground) 22%, transparent);
}

/* E2：紧凑单行筛选条——原型 .filterbar 的等价实现，用户/会话历史筛选条共用同一套规则，
   不再各自堆叠 label + 大号提交按钮。 */
.admin-filterbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.admin-filterbar .admin-filterbar-search {
  position: relative;
  min-width: 230px;
  flex: 0 0 auto;
}

.admin-filterbar .admin-filterbar-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--admin-muted-foreground);
  pointer-events: none;
}

.admin-filterbar .admin-filterbar-search input {
  width: 100%;
  min-width: 0;
  padding-left: 32px;
}

.admin-filterbar > label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--admin-muted-foreground);
  flex: 0 0 auto;
}

.admin-filterbar input,
.admin-filterbar select {
  width: auto;
  min-width: 118px;
  height: 34px;
  flex: 0 0 auto;
}

.admin-filterbar input[type="date"] {
  width: 140px;
  min-width: 0;
}

.admin-filterbar .admin-filterbar-date-sep {
  color: var(--admin-muted-foreground);
  font-size: 12.5px;
}

.admin-filterbar .admin-filterbar-spacer {
  flex: 1 1 auto;
}

.admin-filterbar button {
  flex: 0 0 auto;
}

/* E5：面板标题行右上角承载紧凑操作按钮（如芯片目录「+ 新建芯片」/「保存芯片配置」），
   替代原先表格下方的整行大按钮。 */
.admin-panel-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-panel-heading-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.admin-master-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  height: 100%;
  min-width: 0;
}

.admin-master-detail.detail-open {
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
}

.admin-master-detail:not(.detail-open) .user-detail-panel {
  display: none;
}

.admin-master-detail.detail-open .full-only {
  display: none;
}

.admin-master-col,
.admin-detail-col {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 批次A（2.2.27）：抽屉遮罩层级抬到顶栏（.topbar z-index:50）之上，
   使遮罩覆盖顶栏、抽屉关闭 X 不再被顶栏账号胶囊物理遮挡（痛点C 根因）。 */
.admin-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: color-mix(in oklch, var(--admin-foreground) 28%, transparent);
}

.admin-drawer {
  position: fixed;
  top: 0;
  right: 0;
  /* 批次A（2.2.27）：抬到顶栏（z-index:50）之上，关闭 X 才可点（痛点C）。 */
  z-index: 56;
  width: min(640px, 92vw);
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--admin-card);
  border-left: 1px solid var(--admin-border);
  box-shadow: var(--admin-shadow-pop);
  transform: translateX(0);
  transition: transform 160ms ease;
}

.admin-drawer[hidden],
.admin-drawer.is-closed {
  transform: translateX(100%);
}

.admin-drawer-header,
.admin-drawer-footer {
  flex: 0 0 auto;
  padding: 16px 20px;
  border-bottom: 1px solid var(--admin-border);
}

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

/* H1：抽屉标题——对齐原型 .drawer-head h2（第 395 行，16.5px/620）。 */
.admin-drawer-header h3 {
  margin: 0;
  font-size: 16.5px;
  font-weight: 620;
  letter-spacing: -0.01em;
}

.admin-drawer-header .selected-user-meta {
  margin-top: 4px;
}

.admin-drawer-footer {
  display: flex;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--admin-border);
  border-bottom: none;
}

.admin-drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 18px 20px;
}

/* H1：抽屉关闭按钮——对齐原型 .drawer-close（第 397-398 行），30px 描边图标按钮。
   会话详情浮层复用同一组件，避免与芯片编辑器抽屉分叉出两套关闭按钮视觉。 */
.admin-drawer-close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  background: var(--admin-card);
  color: var(--admin-muted-foreground);
  cursor: pointer;
}

.admin-drawer-close:hover {
  background: var(--admin-secondary);
}

.admin-form-hint {
  margin: 0 0 10px;
  color: var(--admin-muted-foreground);
  font-size: 12px;
  line-height: 1.5;
}

/* 归组共用组件（品牌 + 产品线 + 应用标签）：与「文档与 Scope」资源治理的分类字段视觉一致，
   仅用 token，不新增硬编码色值（B6）。 */
.taxonomy-block {
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  background: var(--admin-secondary);
}

.taxonomy-block > label:first-child {
  margin-top: 0;
}

/* H2：taxonomy-block 内每个字段的行容器——对齐原型 .tx-row（第 405-406 行）。 */
.taxonomy-block .tx-row {
  margin-bottom: 12px;
}

.taxonomy-block .tx-row:last-child {
  margin-bottom: 0;
}

/* 危险操作确认框：红色危险操作（如删除）的独立视觉容器（B2）。 */
.confirm-box {
  padding: 14px;
  border: 1px solid color-mix(in oklch, var(--admin-destructive) 40%, var(--admin-border));
  border-radius: var(--admin-radius);
  background: color-mix(in oklch, var(--admin-destructive) 4%, var(--admin-card));
}

.confirm-box h4 {
  margin: 0 0 8px;
  color: var(--admin-destructive);
}

.chip-catalog-row {
  cursor: pointer;
}

.chip-catalog-row:focus-visible,
.chip-catalog-row:hover {
  outline: 2px solid color-mix(in srgb, var(--admin-primary) 48%, transparent);
  outline-offset: -2px;
}

/* E5：工作区路径列——图标 + 纯色文字，替代方框徽标（对齐原型 ✓ 路径已存在 / ❗ 路径缺失）。 */
.admin-workspace-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.admin-workspace-status-icon {
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1;
}

.admin-workspace-status-success {
  color: var(--admin-success);
}

.admin-workspace-status-warn {
  color: var(--admin-warn);
}

#chip-editor-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  grid-template-columns: 1fr;
  align-items: stretch;
}

#chip-editor-form .admin-drawer-tabpanel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  align-items: start;
}

#chip-editor-form .admin-drawer-tabpanel[hidden] {
  display: none;
}

#chip-editor-form label {
  margin-top: 6px;
  color: var(--admin-muted-foreground);
  font-size: 12px;
  font-weight: 650;
}

#chip-editor-form label:first-child {
  margin-top: 0;
}

.chip-document-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 36px;
  align-items: center;
}

.chip-document-link {
  min-height: 28px;
  padding: 0 9px;
  border-radius: 6px;
  color: var(--admin-foreground);
  background: var(--admin-secondary);
  border: 1px solid var(--admin-border);
  font-size: 12px;
  font-weight: 650;
}

.chip-document-link:hover,
.chip-document-link:focus-visible {
  color: var(--admin-primary-foreground);
  background: var(--admin-primary);
  border-color: var(--admin-primary);
}

.admin-drawer-head,
.ticket-material-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-muted-note {
  color: var(--admin-muted-foreground);
  margin: 10px 0 0;
}

.prompt-history-list,
.session-analysis-bubbles {
  display: grid;
  gap: 8px;
}

.prompt-history-entry,
.session-analysis-bubble,
.session-analysis-ledger,
.announcement-admin-preview {
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  background: var(--admin-card);
  padding: 10px 12px;
}

.prompt-history-entry {
  text-align: left;
}

.session-analysis-bubble p,
.session-analysis-ledger p,
.announcement-admin-preview p {
  margin: 4px 0 0;
}

.session-analysis-bubble.user {
  border-color: color-mix(in srgb, var(--admin-primary) 38%, var(--admin-border));
}

.ticket-admin-more-filters {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  width: 460px;
  max-width: calc(100vw - 32px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  padding: 14px;
  background: var(--admin-popover);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  box-shadow: var(--admin-shadow-pop);
}

.admin-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--admin-border);
}

.admin-tabs button {
  position: relative;
  margin-bottom: -1px;
  padding: 9px 13px;
  border: none;
  background: transparent;
  color: var(--admin-muted-foreground);
  font-size: 13px;
  font-weight: 510;
}

.admin-tabs button:hover,
.admin-tabs button.active {
  color: var(--admin-foreground);
}

.admin-tabs button.active::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--admin-primary);
}

.admin-tabs button.danger.active {
  color: var(--admin-destructive);
}

.admin-tabs button.danger.active::after {
  background: var(--admin-destructive);
}

.admin-tab-pip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--admin-secondary);
  color: var(--admin-muted-foreground);
  font-size: 10.5px;
  font-weight: 600;
  vertical-align: middle;
}

/* G1：token 选择器——外层仅作纵向容器（标签 + 边框输入框），边框/最小高度移到 .admin-token-field。
   原型对照：docs/superpowers/prototypes/2026-07-02-admin-redesign/users-access.html 第 262-297 行。 */
.admin-token-picker {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-token-picker-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--admin-foreground);
}

.admin-token-field {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 38px;
  padding: 5px 8px;
  background: var(--admin-card);
  border: 1px solid var(--admin-input);
  border-radius: calc(var(--admin-radius) - 2px);
  cursor: text;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.admin-token-field:focus-within {
  border-color: var(--admin-ring);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--admin-ring) 18%, transparent);
}

.admin-chip-document-list {
  list-style: none;
  padding: 6px 8px;
  margin: 0;
  min-height: 38px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border: 1px dashed var(--admin-input);
  border-radius: calc(var(--admin-radius) - 2px);
  background: color-mix(in oklch, var(--admin-card) 88%, transparent);
}

.admin-chip-document-empty {
  color: var(--admin-muted);
  font-size: 12px;
  font-style: italic;
  align-self: center;
}

.admin-chip-document-link {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--admin-accent) 14%, transparent);
  color: var(--admin-accent);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid color-mix(in oklch, var(--admin-accent) 24%, transparent);
  transition: background-color 120ms ease, color 120ms ease;
  cursor: pointer;
}

.admin-chip-document-link:hover,
.admin-chip-document-link:focus-visible {
  background: color-mix(in oklch, var(--admin-accent) 24%, transparent);
  color: var(--admin-accent-fg);
  outline: none;
}

/* .admin-token-chip 保留为 .admin-token 的兼容别名（部分测试/历史标记按此类名断言）；
   JS 已改为输出 <span class="admin-token">…</span>，两个类名共用同一视觉规则。 */
.admin-token-chip,
.admin-token {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 5px 0 9px;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  background: var(--admin-secondary);
  color: var(--admin-secondary-foreground);
  font-size: 12px;
  font-weight: 500;
}

.admin-token-x {
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  color: var(--admin-muted-foreground);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  border: none;
  background: transparent;
  padding: 0;
}

.admin-token-x:hover,
.admin-token-x:focus-visible {
  background: color-mix(in oklch, var(--admin-destructive) 14%, transparent);
  color: var(--admin-destructive);
  outline: none;
}

.admin-token-input {
  flex: 1 1 90px;
  min-width: 90px;
  height: 24px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--admin-foreground);
  font-size: 13px;
  font-family: inherit;
}

.admin-token-input::placeholder {
  color: var(--admin-muted-foreground);
}

.admin-token-pop {
  position: absolute;
  z-index: 40;
  margin-top: 4px;
  min-width: 220px;
  background: var(--admin-popover);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  box-shadow: var(--admin-shadow-pop);
  padding: 5px;
  display: none;
}

.admin-token-pop.open {
  display: block;
}

.admin-token-pop .admin-token-pop-opt {
  padding: 7px 9px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-token-pop .admin-token-pop-opt:hover,
.admin-token-pop .admin-token-pop-opt.hl {
  background: var(--admin-secondary);
}

.admin-token-pop .admin-token-pop-opt .admin-token-pop-meta {
  font-size: 11px;
  color: var(--admin-muted-foreground);
}

/* G2：芯片授权复选列表——原型 .chip-list/.chip-row/.cbx/.id（第 449-475 行）。
   单一带边框容器 + 行内分隔线，取代原先「每行一张独立卡片 + 原生 checkbox」的空旷版式。 */
.admin-chip-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.admin-chip-search {
  position: relative;
  flex: 1;
  max-width: 280px;
}

.admin-chip-search svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--admin-muted-foreground);
  pointer-events: none;
}

.admin-chip-search .admin-check-list-search,
.admin-chip-search input {
  padding-left: 32px;
  height: 32px;
  margin-bottom: 0;
}

.admin-check-list {
  display: grid;
  gap: 6px;
}

.admin-check-list-search {
  margin-bottom: 4px;
}

.admin-check-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--admin-border);
  border-radius: calc(var(--admin-radius) - 2px);
  background: var(--admin-card);
}

.admin-check-list-item.is-explicit,
.admin-check-list-item[data-admin-state="explicit"] {
  background: color-mix(in oklch, var(--admin-primary) 3.5%, var(--admin-card));
  box-shadow: inset 2px 0 0 var(--admin-foreground);
}

.admin-check-list-item.is-inherited,
.admin-check-list-item[data-admin-state="inherited"] {
  color: var(--admin-muted-foreground);
}

.admin-chip-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  overflow: hidden;
}

.admin-chip-row {
  display: grid;
  grid-template-columns: 26px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--admin-border);
  transition: background 100ms ease;
  cursor: pointer;
}

.admin-chip-row:last-child {
  border-bottom: none;
}

.admin-chip-row:hover {
  background: var(--admin-secondary);
}

.admin-chip-row.overridden {
  background: color-mix(in oklch, var(--admin-foreground) 3.5%, transparent);
  box-shadow: inset 2px 0 0 var(--admin-foreground);
}

.admin-chip-row.derived {
  background: var(--admin-info-soft);
  box-shadow: inset 2px 0 0 var(--admin-info);
}

.admin-chip-cbx {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--admin-input);
  display: grid;
  place-items: center;
  cursor: pointer;
  background: var(--admin-card);
  transition: all 120ms ease;
  flex: 0 0 auto;
}

.admin-chip-cbx.on {
  background: var(--admin-primary);
  border-color: var(--admin-primary);
  color: var(--admin-primary-foreground);
}

.admin-chip-cbx.locked {
  background: var(--admin-info-soft);
  border-color: color-mix(in oklch, var(--admin-info) 40%, transparent);
  color: var(--admin-info);
  cursor: not-allowed;
}

.admin-chip-cbx svg {
  width: 12px;
  height: 12px;
  opacity: 0;
}

.admin-chip-cbx.on svg,
.admin-chip-cbx.locked svg {
  opacity: 1;
}

.admin-chip-cbx-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.admin-chip-id {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.admin-chip-cid {
  font-weight: 550;
  font-size: 13px;
}

.admin-chip-cdesc {
  font-size: 11px;
  color: var(--admin-muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-chip-state {
  justify-self: end;
}

.admin-chip-restore {
  visibility: hidden;
}

.admin-chip-row.overridden .admin-chip-restore {
  visibility: visible;
}

/* G3：生效权限总览——原型 .eff-card/.eff-head/.eff-grid/.eff-row/.eff-items/.legend（第 414-426 行）。 */
.admin-access-summary-grid {
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  background: var(--admin-card);
  overflow: hidden;
  margin-bottom: 18px;
}

.admin-access-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 11px 14px;
  background: var(--admin-secondary);
  border-bottom: 1px solid var(--admin-border);
}

.admin-access-summary-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--admin-foreground);
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-access-summary-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--admin-muted-foreground);
}

.admin-access-summary-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.admin-access-summary-legend-swatch {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  display: inline-block;
}

.admin-access-summary-legend-swatch.admin-legend-swatch-muted {
  background: var(--admin-secondary);
  border: 1px solid var(--admin-border);
}

.admin-access-summary-legend-swatch.admin-legend-swatch-info {
  background: color-mix(in oklch, var(--admin-foreground) 35%, transparent);
}

.admin-access-summary-legend-swatch.admin-legend-swatch-warn {
  background: color-mix(in oklch, var(--admin-info) 55%, transparent);
}

.admin-access-summary-body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.admin-access-summary-card {
  padding: 12px 14px;
  border-bottom: 1px solid var(--admin-border);
}

.admin-access-summary-card:nth-child(odd) {
  border-right: 1px solid var(--admin-border);
}

.admin-access-summary-card > h3 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--admin-muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.admin-access-summary-card .admin-access-summary-count {
  font-weight: 600;
  color: var(--admin-foreground);
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: normal;
}

.admin-access-summary-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-access-summary-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--admin-foreground);
}

.admin-access-summary-none {
  font-size: 12px;
  color: var(--admin-muted-foreground);
  font-style: italic;
}

/* G4：来源徽标——原型 .src-role/.src-user/.src-derive（第 256-259 行），叠加在 .admin-badge 基础形状之上，
   与既有 .admin-badge-muted/-info/-warn 语义类共存（后声明覆盖颜色），避免破坏既有断言。 */
.admin-src-role {
  background: var(--admin-secondary);
  color: var(--admin-muted-foreground);
  border-color: var(--admin-border);
}

.admin-src-user {
  background: color-mix(in oklch, var(--admin-foreground) 6%, transparent);
  color: var(--admin-foreground);
  border-color: color-mix(in oklch, var(--admin-foreground) 24%, transparent);
}

.admin-src-derive {
  background: var(--admin-info-soft);
  color: var(--admin-info);
  border-color: color-mix(in oklch, var(--admin-info) 22%, transparent);
}

@media (max-width: 1200px) {
  .admin-access-summary-body {
    grid-template-columns: 1fr;
  }

  .admin-access-summary-card:nth-child(odd) {
    border-right: none;
  }
}

/* 密集表跨区链接（如用户表「芯片访问摘要」跳芯片目录、「积分余额」跳成本观测）。 */
.admin-cell-link {
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--admin-primary);
  text-decoration: underline;
  text-decoration-color: transparent;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.admin-cell-link:hover,
.admin-cell-link:focus-visible {
  text-decoration-color: currentColor;
}

/* E3：芯片访问摘要单元格——保留跨区跳转行为，但外观改为柔和着色胶囊而非纯文字链接。 */
.admin-cell-link-badge {
  border: 1px solid color-mix(in oklch, var(--admin-info) 22%, transparent);
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-cell-link-badge:hover,
.admin-cell-link-badge:focus-visible {
  background: color-mix(in oklch, var(--admin-info) 16%, var(--admin-info-soft));
}

/* 密集表等宽文本工具类（时间戳、sessionId、userId 等），对齐原型 .mono。 */
.mono {
  font-family: var(--admin-font-mono);
  font-size: 12px;
}

/* E3：用户名单元格——用户名加粗 + 第二行 userId（小号等宽、弱化色），复用原型 .cell-stack 语汇。 */
.cell-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1.25;
}

.cell-stack-primary {
  font-weight: 550;
  color: var(--admin-foreground);
}

.cell-stack-sub {
  font-size: 11.5px;
  color: var(--admin-muted-foreground);
  font-weight: 400;
}

/* E3：状态列——圆点 + 文字，替代方框徽标。 */
.admin-status-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--admin-foreground);
}

.admin-status-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--admin-muted-foreground);
  flex: 0 0 auto;
}

.admin-status-dot.active::before {
  background: var(--admin-success);
}

.admin-status-dot.disabled::before,
.admin-status-dot.expired::before {
  background: var(--admin-destructive);
}

.admin-empty-state {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 160px;
  color: var(--admin-muted-foreground);
  text-align: center;
}

.admin-empty-inner {
  max-width: 300px;
}

.admin-error-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in oklch, var(--admin-destructive) 28%, var(--admin-border));
  border-radius: var(--admin-radius);
  background: color-mix(in oklch, var(--admin-destructive) 8%, var(--admin-card));
  color: var(--admin-destructive);
}

.admin-danger-confirm {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid color-mix(in oklch, var(--admin-destructive) 32%, var(--admin-border));
  border-radius: var(--admin-radius);
  background: var(--admin-card);
}

.admin-danger-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.chat-grid,
.admin-grid {
  min-height: 0;
  height: 100%;
  display: grid;
  gap: 16px;
  overflow: hidden;
  padding: 16px;
}

.chat-grid {
  grid-template-columns: 280px minmax(0, 1fr);
}

.chat-grid.sidebar-collapsed {
  grid-template-columns: 64px minmax(0, 1fr);
}

.admin-grid {
  min-width: 0;
  height: calc(100vh - 48px);
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  /* 约束单行高=容器高，内容列才能受限滚动（否则隐式 auto 行随内容撑高、超出被 overflow:hidden 裁切 → admin 操作区整页无法滚动）。 */
  grid-template-rows: minmax(0, 1fr);
  align-items: start;
  overflow: hidden;
  transition: grid-template-columns 0.18s ease;
}

.admin-grid.sidebar-collapsed {
  grid-template-columns: 64px minmax(0, 1fr);
}

.session-sidebar,
.admin-users,
.admin-detail {
  min-width: 0;
  min-height: 0;
}

.session-sidebar {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 16px;
}

.chat-grid.sidebar-collapsed .session-sidebar {
  padding: 12px;
  justify-items: center;
}

.chat-grid.sidebar-collapsed .session-sidebar .section-heading {
  display: grid;
  justify-items: center;
}

.chat-grid.sidebar-collapsed .session-sidebar .section-heading h1,
.chat-grid.sidebar-collapsed .session-sidebar #new-session,
.chat-grid.sidebar-collapsed .session-sidebar .session-list,
.chat-grid.sidebar-collapsed .session-sidebar .sidebar-footer-stack {
  display: none;
}

.sidebar-footer-stack {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.session-list,
.user-list,
.key-list {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 8px;
}

.chip-mapping-list {
  min-height: 0;
  overflow: visible;
  display: grid;
  align-content: start;
  gap: 8px;
}

.editable-chip-list {
  max-height: none;
}

.chip-editor-row {
  width: 100%;
  min-width: 0;
  padding: 12px;
  background: var(--admin-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.chip-editor-fields {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(128px, 1fr));
  gap: 10px;
}

.chip-editor-fields label,
.chip-access-option {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.chip-editor-fields input {
  min-height: 36px;
  padding: 7px 9px;
  font-size: 13px;
}

.chip-remove-button {
  min-height: 36px;
  padding: 0 12px;
  align-self: end;
}

.restart-notice {
  padding: 8px 10px;
  color: var(--warning);
  background: var(--admin-warn-soft);
  border: 1px solid var(--admin-warn);
  border-radius: 6px;
}

.chip-access-list {
  display: grid;
  gap: 8px;
}

.user-admin-actions {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}

.user-admin-actions .inline-form {
  min-width: 0;
}

.chip-access-option {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  color: var(--text);
  font-size: 13px;
}

.chip-access-row {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  background: var(--admin-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.chip-access-row.granted .chip-access-status {
  color: var(--accent);
}

.chip-access-row.denied .chip-access-status {
  color: var(--muted);
}

.chip-access-status,
.chip-access-source {
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.chip-access-chip {
  min-width: 0;
  overflow-wrap: anywhere;
}

.chip-access-source {
  color: var(--muted);
}

.chip-access-option input {
  width: auto;
  margin: 0;
}

.chip-access-frozen {
  padding: 10px 12px;
  color: var(--muted);
  background: var(--admin-secondary);
  border: 1px dashed var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
}

.chip-mapping-row {
  width: 100%;
  min-width: 0;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chip-mapping-id {
  font-weight: 600;
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", monospace;
  font-size: 13px;
  color: var(--accent);
}

.chip-mapping-label {
  font-size: 13px;
  color: var(--muted);
}

.chip-mapping-dir {
  font-size: 12px;
  color: var(--muted);
  word-break: break-all;
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", monospace;
}

.session-row,
.key-row {
  width: 100%;
  min-width: 0;
  padding: 10px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.session-row.active {
  background: var(--accent-subtle);
  border-color: var(--accent);
}

.empty-state {
  padding: 16px;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: 8px;
}

.chat-workspace {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}

.session-meta {
  min-width: 0;
  padding: 10px 14px;
  color: var(--muted);
  background: #FAFBFC;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.conversation {
  min-height: 0;
  overflow: auto;
  padding: 18px;
  display: grid;
  align-content: start;
  gap: 12px;
}

.message {
  max-width: min(760px, 100%);
  padding: 10px 12px;
  overflow-wrap: anywhere;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.message.user {
  justify-self: end;
  color: #FFFFFF;
  background: var(--accent);
  border-color: var(--accent);
}

.message.pending {
  opacity: 0.78;
}

.message.failed {
  color: var(--danger);
  background: #FFF5F3;
  border-color: #F0B8B2;
}

.message-status {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
}

.message.assistant {
  justify-self: start;
  background: var(--surface);
}

.message-content {
  display: grid;
  gap: 8px;
}

.message-content p,
.message-content blockquote,
.message-content ul,
.message-content ol,
.message-content pre,
.message-content table {
  margin: 0;
}

.message-content h3,
.message-content h4,
.message-content h5 {
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
}

.message-content blockquote {
  padding-left: 10px;
  color: var(--muted);
  border-left: 3px solid var(--border-strong);
}

.message-content hr {
  border: none;
  border-top: 0.5px solid var(--border);
  margin: 14px 0;
}

.message-content pre {
  max-width: 100%;
  overflow: auto;
  padding: 10px;
  color: #101828;
  background: #F6F8FA;
  border: 1px solid var(--border);
  border-radius: 6px;
  white-space: pre;
}

.message-content code {
  padding: 1px 4px;
  color: #101828;
  background: #F6F8FA;
  border-radius: 4px;
  font-size: 0.92em;
}

.message-content pre code {
  padding: 0;
  background: transparent;
}

.message-content a {
  color: var(--accent);
  overflow-wrap: anywhere;
}

.message.user .message-content a {
  color: #FFFFFF;
  text-decoration: underline;
}

.message-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.message-content table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.message-content th,
.message-content td {
  padding: 6px 8px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.message-content img {
  max-width: min(100%, 520px);
  max-height: 360px;
  border-radius: 8px;
  border: 1px solid var(--border);
  object-fit: contain;
}

.message-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}

.message-action-button,
.message-feedback-compact button {
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1.2;
}

.message-feedback-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  max-width: 100%;
}

.message-feedback-compact label {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}

.message-feedback-status {
  font-size: 12px;
  color: var(--muted);
}

.message-citations {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
}

.message-citations-title {
  color: var(--text);
  font-weight: 700;
}

.message-citations ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
}

.message-citations li {
  min-width: 0;
  overflow-wrap: anywhere;
}

.message-citations strong {
  color: var(--text);
  margin-right: 6px;
}

.message-activity-dots {
  display: inline-block;
  width: 1.6em;
  text-align: left;
}

.chat-mode-panel {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px 10px;
  align-items: start;
  padding: 10px 14px 0;
  border-top: 1px solid var(--border);
}

.chat-mode-options {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.chat-mode-segment,
.chat-image-upload {
  min-width: 0;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.chat-mode-segment {
  min-height: 66px;
  align-items: flex-start;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.chat-mode-segment.selected {
  color: var(--text);
  border-color: var(--accent);
  background: #F1FBF9;
}

.chat-mode-segment.disabled {
  opacity: 0.72;
}

.chat-mode-segment input {
  flex: 0 0 auto;
  width: auto;
  margin-top: 2px;
}

.chat-mode-segment-content {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.chat-mode-title {
  color: var(--text);
}

.chat-mode-meta {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.chat-image-upload.disabled {
  opacity: 0.58;
}

.chat-composer {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 14px;
  border-top: 1px solid var(--border);
}

.chat-composer .error-line {
  grid-column: 1 / -1;
}

.admin-users {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 12px;
  align-content: stretch;
}

.admin-section-nav {
  position: sticky;
  top: 0;
  align-self: start;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--admin-shadow-sm);
}

.admin-topbar .topbar-meta {
  gap: 10px;
}

.admin-env-pill,
.admin-return-link {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.admin-return-link {
  color: var(--text);
}

.admin-return-link:hover {
  background: var(--accent-subtle);
  color: var(--accent);
}

.admin-nav-group {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.admin-nav-group-toggle {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: left;
}

.admin-nav-group-toggle:hover {
  background: var(--accent-subtle);
  color: var(--text);
}

.admin-nav-group-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-nav-group-chevron {
  flex: 0 0 auto;
  color: inherit;
  font-size: 12px;
  line-height: 1;
}

.admin-nav-group-items {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.admin-nav-group[data-expanded="false"] .admin-nav-group-items {
  display: none;
}

.admin-nav-footer {
  margin-top: auto;
  padding-top: 14px;
}

.admin-nav-footer-divider {
  border-top: 1px solid var(--border);
  margin-bottom: 10px;
}

.admin-nav-footer-version {
  padding: 0 9px;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-section-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 36px;
  padding: 8px 11px;
  color: var(--muted);
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 9px;
  overflow: hidden;
  white-space: nowrap;
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, padding 160ms ease;
}

.admin-nav-icon {
  flex: 0 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.admin-nav-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.admin-nav-text {
  transition: opacity 120ms ease;
}

.admin-section-nav a:hover {
  background: var(--accent-subtle);
  color: var(--text);
  border-color: transparent;
}

.admin-section-nav a[aria-current="page"],
.admin-section-nav a.active {
  color: var(--accent);
  background: var(--accent-subtle);
  border-color: transparent;
  font-weight: 700;
}

.admin-workspace-shell {
  min-width: 0;
  min-height: 0;
  height: 100%;
  align-self: stretch;
  display: grid;
  /* E1：新增子视图 tab 条为第三行（auto 高度），只有面包屑下的工作区主体占用剩余空间（1fr）。 */
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  overflow: hidden;
}

.admin-breadcrumb {
  min-width: 0;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
}

.admin-breadcrumb button {
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
}

.admin-breadcrumb button:hover {
  color: var(--accent);
}

.admin-breadcrumb-separator {
  color: var(--muted);
}

.admin-breadcrumb-current {
  min-width: 0;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* E1：分区内子视图 tab 条，紧贴面包屑下方，供 5 组 admin 分区各自的子视图切换使用 */
.admin-page-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  width: fit-content;
  max-width: 100%;
  background: var(--admin-secondary);
  border-radius: var(--admin-radius);
  overflow-x: auto;
}

.admin-page-tabs button {
  min-height: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 520;
  color: var(--admin-muted-foreground);
  padding: 6px 16px;
  border-radius: calc(var(--admin-radius) - 3px);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s, box-shadow .12s;
}

.admin-page-tabs button:hover {
  color: var(--admin-foreground);
}

.admin-page-tabs button:focus-visible {
  outline: 2px solid var(--admin-ring);
  outline-offset: 2px;
}

.admin-page-tabs button.active {
  background: var(--admin-card);
  color: var(--admin-foreground);
  box-shadow: var(--admin-shadow-sm);
}

.diagnostics-system-cards {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.diagnostics-system-card {
  min-width: 0;
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--admin-muted);
}

.diagnostics-system-card-head h3 {
  margin: 0 0 4px;
}

.diagnostics-system-card-head p {
  margin: 0;
}

.diagnostics-system-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.diagnostics-system-grid div {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.diagnostics-system-grid dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.diagnostics-system-grid dd {
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.diagnostics-config-status-list {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.diagnostics-config-status-row {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-size: 12.5px;
}

.diagnostics-config-status-main {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.diagnostics-config-status-name {
  min-width: 0;
  color: var(--text);
  font-weight: 650;
  overflow-wrap: anywhere;
}

.diagnostics-config-status-detail {
  min-width: 0;
  color: var(--admin-muted-foreground);
  font-family: var(--admin-font-mono);
  font-size: 11.5px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.admin-workspace {
  min-width: 0;
  min-height: 0;
  /* 撑满 .admin-grid 受限行高（align-self:stretch 覆盖父 align-items:start），使下方 overflow:auto 真正触发；
     否则 height:auto 让本列高度永远等于内容高度、overflow 永不触发、内容超视口被父 overflow:hidden 裁切。 */
  height: 100%;
  align-self: stretch;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 4px;
}

.admin-section {
  min-width: 0;
  min-height: 0;
}

.users-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
  min-height: 0;
  /* 不裁切：让高内容（授权/芯片访问 tab）溢出到 .admin-workspace，由其 overflow:auto 统一滚动，
     与其它 .admin-section 一致；用 overflow:hidden 会把超出视口的 tab 内容裁掉且无滚动条。 */
  overflow: visible;
}

.admin-workspace > .admin-detail {
  padding: 0;
  background: transparent;
  border: 0;
}

.admin-model-routing-panel {
  display: grid;
  gap: 14px;
}

.admin-model-routing-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.admin-model-routing-form {
  display: grid;
  gap: 14px;
}

.admin-mode-routing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.admin-mode-card {
  min-width: 0;
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  background: var(--admin-card);
  box-shadow: var(--admin-shadow-sm);
}

.admin-mode-card-head {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.admin-mode-card-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: calc(var(--admin-radius) + 1px);
  background: var(--admin-secondary);
  color: var(--admin-foreground);
}

.admin-mode-card-icon svg {
  width: 17px;
  height: 17px;
}

.admin-mode-card h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
}

.admin-mode-card p {
  margin: 4px 0 0;
  color: var(--admin-muted-foreground);
  font-size: 12px;
  line-height: 1.6;
}

.admin-mode-card label {
  display: grid;
  gap: 6px;
  color: var(--admin-muted-foreground);
  font-size: 12px;
  font-weight: 650;
}

.admin-mode-card select {
  width: 100%;
}

.admin-mode-card-multiplier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border: 1px dashed var(--admin-border);
  border-radius: var(--admin-radius);
  background: var(--admin-secondary);
}

.admin-mode-card-multiplier span {
  color: var(--admin-muted-foreground);
  font-size: 11.5px;
}

.admin-mode-card-multiplier strong {
  color: var(--admin-foreground);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.admin-model-routing-actions {
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 1200px) {
  .admin-mode-routing-grid {
    grid-template-columns: 1fr;
  }
}

.observability-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.observability-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.observability-toolbar label {
  color: var(--admin-muted-foreground);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

.observability-toolbar select {
  min-height: 34px;
  width: 140px;
  padding: 0 10px;
  color: var(--admin-foreground);
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: 8px;
}

.observability-card,
.observability-row {
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  padding: 12px;
  background: var(--admin-card);
}

.observability-card strong {
  display: block;
  font-size: 1.35rem;
  line-height: 1.2;
}

.observability-card span,
.observability-row span {
  color: var(--muted);
  font-size: 0.9rem;
}

.observability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.observability-grid section {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-card);
}

.observability-grid section h3 {
  margin: 0;
  padding: 11px 14px;
  border-bottom: 1px solid var(--admin-border);
  background: var(--admin-secondary);
  font-size: 13px;
  font-weight: 650;
}

.observability-list {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
}

.observability-row {
  display: grid;
  gap: 4px;
}

.observability-grid .observability-row {
  grid-template-columns: minmax(96px, 0.9fr) minmax(80px, 1fr) minmax(64px, 0.55fr);
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
}

.observability-grid .observability-row.is-actionable {
  cursor: pointer;
  border-radius: 6px;
}

.observability-grid .observability-row.is-actionable:hover,
.observability-grid .observability-row.is-actionable:focus-visible {
  background: var(--admin-accent);
  outline: 2px solid var(--admin-ring);
  outline-offset: 2px;
}

.observability-grid .observability-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.observability-bar-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--admin-secondary);
}

.observability-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--admin-primary);
}

.observability-anomaly-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 13px;
  border: 1px solid var(--admin-warn);
  border-radius: 8px;
  background: var(--admin-warn-soft);
}

.observability-anomaly-item strong,
.observability-anomaly-item span {
  display: block;
}

.observability-anomaly-item strong {
  font-size: 13px;
  font-weight: 650;
}

.observability-anomaly-item span {
  color: var(--admin-muted-foreground);
  font-size: 12px;
}

.observability-severity {
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--admin-warn);
  background: color-mix(in oklch, var(--admin-warn) 12%, transparent);
  font-size: 12px;
  font-weight: 650;
}

.observability-anomaly-item.observability-severity-error {
  border-color: var(--admin-destructive);
  background: color-mix(in oklch, var(--admin-destructive) 8%, var(--admin-card));
}

.observability-anomaly-item.observability-severity-error .observability-severity {
  color: var(--admin-destructive);
  background: color-mix(in oklch, var(--admin-destructive) 14%, transparent);
}

.observability-anomaly-item.observability-severity-warn {
  border-color: var(--admin-warn);
  background: color-mix(in oklch, var(--admin-warn) 8%, var(--admin-card));
}

.observability-anomaly-item.observability-severity-warn .observability-severity {
  color: var(--admin-warn);
  background: color-mix(in oklch, var(--admin-warn) 14%, transparent);
}

.observability-anomaly-item.observability-severity-info {
  border-color: var(--admin-info, var(--admin-muted));
  background: color-mix(in oklch, var(--admin-info, var(--admin-muted)) 8%, var(--admin-card));
}

.observability-anomaly-item.observability-severity-info .observability-severity {
  color: var(--admin-info, var(--admin-muted));
  background: color-mix(in oklch, var(--admin-info, var(--admin-muted)) 14%, transparent);
}

.observability-anomaly-item.observability-severity-neutral {
  border-color: var(--admin-input);
  background: var(--admin-card);
}

.observability-anomaly-item.observability-severity-neutral .observability-severity {
  color: var(--admin-muted);
  background: color-mix(in oklch, var(--admin-muted) 14%, transparent);
}

.observability-row.warning {
  border-color: var(--admin-warn);
  background: var(--admin-warn-soft);
}

.observability-anomalies {
  margin-top: 18px;
}

.observability-anomalies h3 {
  margin-bottom: 10px;
}

@media (max-width: 1300px) {
  .observability-grid {
    grid-template-columns: 1fr;
  }
}

.announcements-admin-panel {
  display: grid;
  gap: 14px;
  min-height: 0;
}

.announcement-admin-two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  align-items: end;
}

.announcement-admin-toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  align-items: end;
}

.announcement-admin-toolbar label,
.announcement-admin-two-col label {
  min-width: 0;
}

.announcement-admin-toolbar label {
  display: grid;
  gap: 3px;
  color: var(--admin-muted-foreground);
  font-size: 12px;
  font-weight: 650;
}

.announcement-admin-toolbar button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 13px;
}

.announcement-admin-more-filters {
  grid-column: 1 / -1;
}

.announcement-admin-more-filters summary {
  cursor: pointer;
  color: var(--admin-muted-foreground);
  font-size: 12px;
  font-weight: 650;
  list-style: none;
}

.announcement-admin-more-filters summary::-webkit-details-marker {
  display: none;
}

.announcement-admin-more-filters[open] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding-top: 4px;
}

.announcement-admin-more-filters[open] summary,
.announcement-admin-more-filters[open] .announcement-admin-filter-actions {
  grid-column: 1 / -1;
}

.announcement-admin-filter-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.announcements-admin-grid {
  display: grid;
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr) minmax(240px, 280px);
  gap: 14px;
  align-items: stretch;
  min-height: 0;
}

.announcement-admin-list-col,
.announcement-admin-editor-col,
.announcement-admin-preview-col {
  min-width: 0;
}

.announcement-admin-list-col,
.announcement-admin-preview-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

/* 中列做成纵向 flex，让「未选中」空态填满并居中（与角色模板/提示词等详情面板一致，
   对齐原型的大编辑画布），而不是挤在列顶的小盒；选中后表单靠 [hidden] 隐藏空态、正常自顶排布。 */
.announcement-admin-editor-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.announcement-admin-editor-col > .empty-state:not([hidden]) {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 260px;
}

.announcement-admin-list {
  display: grid;
  gap: 8px;
  min-height: 0;
  max-height: calc(100vh - 320px);
  overflow: auto;
}

.announcement-admin-row {
  width: 100%;
  display: grid;
  gap: 4px;
  padding: 12px;
  text-align: left;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.announcement-admin-row:hover,
.announcement-admin-row.active {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.announcement-admin-row span {
  color: var(--muted);
  font-size: 0.88rem;
}

.announcement-admin-editor {
  display: grid;
  gap: 10px;
  align-content: start;
}

.announcement-admin-editor[hidden] {
  display: none;
}

.announcement-admin-editor-head,
.announcement-admin-editor-footer,
.announcement-admin-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.announcement-admin-read-summary {
  padding: 10px 12px;
  color: var(--muted);
  background: var(--admin-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.announcement-admin-preview-col .section-title {
  margin-bottom: 0;
}

.announcement-preview-card-outer {
  overflow: hidden;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  background: var(--admin-card);
}

.announcement-preview-card-head {
  padding: 10px 12px;
  color: var(--admin-muted-foreground);
  background: var(--admin-secondary);
  border-bottom: 1px solid var(--admin-border);
  font-size: 11.5px;
  font-weight: 650;
}

.announcement-preview-card-outer .announcement-admin-preview {
  margin: 14px;
}

.muted-inline {
  color: var(--muted);
  font-size: 0.9rem;
}

.admin-user-context {
  min-width: 0;
  min-height: 0;
  display: grid;
  gap: 16px;
  overflow: auto;
}

.admin-user-context-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.user-list-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  align-content: start;
  gap: 12px;
  overflow: hidden;
}

.user-master-panel,
.user-detail-panel {
  min-width: 0;
  min-height: 0;
}

.collapsible-panel {
  padding: 0;
  overflow: hidden;
}

.collapsible-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0 14px;
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.collapsible-panel summary::-webkit-details-marker {
  display: none;
}

.collapsible-panel summary::after {
  content: "+";
  color: var(--accent);
  font-size: 18px;
  line-height: 1;
}

.collapsible-panel[open] summary {
  border-bottom: 1px solid var(--border);
}

.collapsible-panel[open] summary::after {
  content: "-";
}

.collapsible-panel > :not(summary) {
  margin: 14px;
}

.chip-access-panel {
  align-content: start;
}

.key-management {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.grant-editor-panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}

.grant-grid {
  display: grid;
  grid-template-columns: minmax(120px, 0.35fr) minmax(0, 1fr);
  gap: 8px 12px;
  align-items: center;
  margin-top: 10px;
}

.grant-grid input,
.key-edit-form input {
  min-width: 0;
}

.admin-chip-panel .panel {
  overflow: visible;
}

.admin-detail {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  padding: 16px;
}

.detail-head {
  display: grid;
  gap: 12px;
}

.detail-subhead {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
}

.selected-user-meta {
  min-width: 0;
  margin-top: 5px;
  color: var(--muted);
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.user-status-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.user-filter-form,
.profile-form,
.key-edit-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
}

.user-filter-form label,
.profile-form label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.user-filter-form button,
.profile-form button,
.key-edit-form button {
  min-width: 0;
}

.user-filter-panel {
  padding: 0;
}

.user-filter-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.user-filter-form button {
  grid-column: 1 / -1;
}

.key-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.key-value,
.generated-key code {
  min-width: 0;
  overflow-wrap: anywhere;
}

.key-value {
  display: grid;
  gap: 6px;
}

.key-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.key-value code {
  min-width: 0;
  padding: 8px;
  color: var(--code-text);
  background: var(--code-bg);
  border-radius: 6px;
  overflow-wrap: anywhere;
}

.key-actions {
  display: flex;
  gap: 8px;
}

.key-edit-form {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

.key-sensitive-warning {
  margin: 0;
  color: var(--warning);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.generated-key {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.generated-key:empty {
  display: none;
}

.generated-key code {
  padding: 8px;
  color: var(--code-text);
  background: var(--code-bg);
  border-radius: 6px;
}

@media (max-width: 1299px) {
  .users-section {
    grid-template-columns: 1fr;
  }

  .announcements-admin-grid {
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  }

  .announcement-admin-preview-col {
    display: none;
  }

  .user-list-panel .user-list {
    max-height: min(420px, 45vh);
  }
}

@media (max-width: 899px) {
  body {
    overflow: auto;
  }

  .mcp-access-server-grid {
    grid-template-columns: 1fr;
  }

  .account-profile-panel .account-form,
  .compact-account-form,
  .account-key-form,
  .account-secret-panel,
  .account-key-row {
    grid-template-columns: 1fr;
  }

  .account-key-actions,
  .account-secret-actions {
    justify-content: flex-start;
  }

  .chat-mode-panel,
  .chat-composer,
  .inline-form,
  .generated-key,
  .key-row,
  .key-actions,
  .key-actions {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .chat-mode-options {
    grid-template-columns: 1fr;
  }

  .topbar {
    min-height: 48px;
    flex-wrap: wrap;
    padding: 10px 16px;
  }

  .topbar-meta {
    justify-content: flex-start;
  }

  .modal-backdrop {
    align-items: start;
    padding: 12px;
  }

  .modal-panel {
    max-height: calc(100vh - 24px);
  }

  .product-signature-top {
    max-width: 100%;
  }

  .landing-topbar,
  .landing-footer,
  .landing-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .landing-nav,
  .landing-actions {
    justify-content: flex-start;
  }

  .landing-hero,
  .landing-section {
    padding: 32px 18px;
  }

  .landing-hero {
    min-height: auto;
  }

  .landing-hero h1 {
    font-size: 36px;
  }

  .landing-lede {
    font-size: 16px;
  }

  .landing-feature-grid,
  .landing-practice-grid,
  .portal-capability-grid,
  .announcements-home-list,
  .announcement-admin-toolbar,
  .announcement-admin-two-col,
  .announcements-admin-grid,
  .ticket-system-layout,
  .ticket-admin-toolbar,
  .ticket-admin-grid,
  .feedback-category-grid,
  .donation-amounts,
  .donation-channel-grid,
  .ticket-result-fields,
  .mcp-fast-path,
  .mcp-template-grid {
    grid-template-columns: 1fr;
  }

  .portal-nav {
    width: 100%;
    justify-content: flex-start;
  }

  .portal-nav a {
    max-width: 100%;
    white-space: normal;
  }

  .portal-capability-grid article:nth-child(n) {
    grid-column: auto;
  }

  .announcement-summary-row {
    grid-template-columns: 1fr;
  }

  .ticket-card-head,
  .ticket-admin-detail-head,
  .form-actions,
  .my-ticket-row div {
    align-items: stretch;
    flex-direction: column;
  }

  .ticket-query-card,
  .feedback-ticket-form,
  .datasheet-submit-card,
  .ticket-admin-panel,
  .ticket-admin-detail,
  .ticket-admin-attachment-row,
  .ticket-result,
  .my-ticket-list {
    max-width: 100%;
    min-width: 0;
  }

  .ticket-admin-attachment-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .ticket-admin-attachment-actions {
    justify-content: flex-start;
  }

  .ticket-admin-download,
  .ticket-admin-preview-button {
    justify-self: stretch;
  }

  .landing-button {
    white-space: normal;
  }

  .app-shell {
    min-height: 100vh;
    height: auto;
  }

  .chat-grid,
  .admin-grid {
    grid-template-columns: 1fr;
  }

  .admin-section-nav {
    position: static;
    max-height: none;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: visible;
  }

  .admin-section-nav > .sidebar-collapse-button {
    display: none;
  }

  .admin-grid.sidebar-collapsed .admin-section-nav a .admin-nav-text {
    opacity: 1;
  }

  .admin-grid.sidebar-collapsed .admin-nav-group-toggle {
    display: flex;
  }

  .admin-grid.sidebar-collapsed .admin-section-nav a {
    padding-left: 11px;
    padding-right: 11px;
  }

  .users-section,
  .admin-user-context-grid {
    grid-template-columns: 1fr;
  }

  .admin-grid,
  .admin-workspace-shell,
  .admin-workspace {
    height: auto;
    overflow: visible;
  }

  .admin-workspace {
    padding-right: 0;
  }

  .diagnostics-system-cards,
  .diagnostics-system-card,
  .diagnostics-system-grid {
    grid-template-columns: 1fr;
  }

  .user-list-panel .user-list {
    max-height: none;
  }

  .chat-grid {
    grid-template-rows: auto minmax(55vh, 1fr);
  }

  .compact-field {
    align-items: stretch;
  }

  .compact-field select {
    width: 100%;
  }

  .chip-editor-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .admin-user-context-grid {
    grid-template-columns: 1fr;
  }

  .chip-editor-fields {
    grid-template-columns: minmax(120px, 1fr) minmax(140px, 1fr);
  }

  .chip-editor-fields label:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 559px) {
  .chip-editor-row {
    grid-template-columns: 1fr;
  }

  .chip-editor-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .chip-remove-button {
    width: 100%;
  }
}

/* Prompt editor */
.prompt-admin-detail {
  grid-column: 1 / -1;
  /* 2.2.30：作为 .admin-workspace（flex column，overflow:auto）的直接子项填满可用高度，
     使提示词面板改由两栏各自内部滚动承载，而非整体无界拉高把工作台撑爆（图3 溢出修复）。 */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.prompt-split-pane {
  min-width: 0;
  /* 2.2.30：填满 .prompt-admin-detail 剩余高度并交给两栏内部滚动；去掉原先的固定最小高度
     无界拉高——chip 多时它会把右侧编辑区一并撑成大片空白并溢出可视区。 */
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  /* 单行填满容器高度（min 0），保证左右两栏都撑满、各自内部滚动生效。 */
  grid-template-rows: minmax(0, 1fr);
  gap: 12px;
}

.prompt-nav-pane,
.prompt-editor-pane,
.prompt-editor-container {
  min-width: 0;
  min-height: 0;
}

/* 2.2.30：左栏 = 固定头部（标题 + 已建计数）+ 内部滚动的卡片列表；右栏编辑区独立滚动。 */
.prompt-nav-pane {
  display: flex;
  flex-direction: column;
}

.prompt-editor-pane {
  overflow-y: auto;
}

.prompt-nav-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.prompt-nav-head h2 {
  margin-bottom: 4px;
}

.prompt-nav-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.prompt-chip-list {
  display: grid;
  gap: 8px;
  align-content: start;
  /* 2.2.30：卡片列表在左栏内部竖向滚动，头部保持固定；避免 chip 多时整页拉高。 */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

/* H4：芯片提示词卡片——对齐原型 .prompt-card（第 431-435 行：11/13 padding，selected = primary 描边 + ring）。 */
.prompt-chip-card {
  width: 100%;
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  background: var(--admin-card);
  cursor: pointer;
  font-size: 13px;
  text-align: left;
  display: grid;
  gap: 6px;
  overflow: hidden;
  white-space: normal;
  transition: border-color .12s, background .12s;
}

.prompt-chip-card:hover {
  background: var(--admin-secondary);
}

.prompt-chip-card.active {
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 1px var(--admin-primary);
}

.prompt-chip-card.missing {
  color: var(--muted);
  border-style: dashed;
}

.prompt-chip-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.prompt-chip-card-name {
  min-width: 0;
  color: var(--admin-foreground);
  font-weight: 650;
  overflow-wrap: anywhere;
}

.prompt-chip-card-label,
.prompt-chip-card-meta {
  min-width: 0;
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

.prompt-chip-card-label {
  color: var(--admin-foreground);
  line-height: 1.35;
}

.prompt-chip-card-meta {
  color: var(--muted);
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", monospace;
  font-size: 12px;
}

.chip-prompt-jump {
  cursor: pointer;
}

.prompt-editor-pane {
  display: grid;
}

.prompt-editor-container {
  display: grid;
  grid-template-rows: auto auto minmax(320px, 1fr);
  gap: 12px;
}

/* B7：正文 + 版本历史改为左右布局——正文占满剩余宽度，历史时间线收进右侧 240px 侧栏，
   对齐原型 .prompt-body-grid（grid-template-columns: minmax(0,1fr) 240px）。 */
.prompt-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 12px;
  min-height: 0;
}

.prompt-textarea-wrap {
  min-width: 0;
  min-height: 0;
  display: flex;
}

/* H4：工具条——对齐原型 .prompt-toolbar（第 437 行）分隔线，标记正文区与顶部操作行的边界。 */
.prompt-editor-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.prompt-editor-header h3 {
  min-width: 0;
  flex: 1;
  margin: 0;
  overflow-wrap: anywhere;
}

/* H4：正文文本域字号/行高对齐原型 .prompt-textarea（第 440 行：12.5px/1.6）。 */
.prompt-content {
  width: 100%;
  min-height: 0;
  height: 100%;
  overflow: auto;
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", monospace;
  font-size: 12.5px;
  line-height: 1.6;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  resize: none;
  box-sizing: border-box;
}

.prompt-placeholder,
.prompt-error-panel {
  color: var(--muted);
  text-align: center;
  padding: 40px;
  border: 1px dashed var(--border);
  border-radius: 8px;
}

.prompt-error-panel {
  display: grid;
  justify-items: center;
  gap: 10px;
  color: var(--danger);
  background: color-mix(in oklch, var(--admin-destructive) 10%, var(--admin-card));
  border-color: color-mix(in oklch, var(--admin-destructive) 32%, var(--admin-border));
}

.prompt-error-panel[hidden] {
  display: none;
}

.prompt-editor-status {
  min-height: 26px;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 4px;
}
.prompt-editor-status.error,
.prompt-editor-status.load-failed,
.prompt-editor-status.save-failed { color: var(--danger); background: color-mix(in oklch, var(--admin-destructive) 10%, var(--admin-card)); }
.prompt-editor-status.success,
.prompt-editor-status.ready { color: var(--admin-success); background: var(--admin-success-soft); }
.prompt-editor-status.warning,
.prompt-editor-status.loading { color: var(--admin-warn); background: var(--admin-warn-soft); }

.prompt-history-panel {
  padding: 16px 14px;
  border-left: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

/* B7：版本历史侧栏——240px 右侧栏，正文与操作按纵向时间线排布，内部独立滚动。
   H4：对齐原型 .history-rail（第 441-448 行）——左侧线时间轴 + 大写小号标题。 */
.prompt-history-rail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
}

.hr-title {
  font-size: 11.5px;
  font-weight: 650;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.prompt-history-summary {
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.prompt-history-list {
  display: grid;
  gap: 0;
}

/* H4：每条版本历史用左侧线 + 圆点标记的时间轴节点，对齐原型 .history-item（第 443-448 行）。 */
.prompt-history-entry {
  position: relative;
  padding: 0 0 16px 18px;
  border-left: 2px solid var(--border);
}

.prompt-history-entry:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.prompt-history-entry::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--admin-primary);
  border: 2px solid var(--admin-card);
}

.prompt-history-entry .ht-time {
  font-size: 11px;
  color: var(--muted);
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", monospace;
}

.prompt-history-entry .ht-author {
  font-size: 12px;
  font-weight: 550;
  color: var(--admin-foreground);
  margin-top: 2px;
}

.prompt-history-entry .ht-actions {
  margin-top: 6px;
}

.prompt-history-rollback {
  white-space: nowrap;
}

@media (max-width: 899px) {
  .prompt-split-pane {
    grid-template-columns: 1fr;
  }

  .prompt-editor-container {
    grid-template-rows: auto auto minmax(360px, 60vh);
  }

  /* 窄屏降级为上下堆叠：正文在上，版本历史侧栏收窄为整宽横条（与其它 admin 响应式规则一致）。 */
  .prompt-body-grid {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(240px, 1fr) auto;
  }

  .prompt-history-rail {
    max-height: 260px;
  }
}

/* ---- Tab bar ---- */
.tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  background: var(--surface);
}
.tab-bar button {
  padding: 10px 20px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 14px;
  transition: color 0.15s, border-color 0.15s;
}
.tab-bar button:hover {
  color: var(--text);
}
.tab-bar button[aria-selected="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* ---- Role management panel ---- */
.role-admin-detail {
  /* 不钉死视口：角色区随内容长高、交给 .admin-workspace 统一滚动（与 prompts/chips 等单一滚动面一致，
     避免左右栏各自出滚动条造成的滚动割裂）。 */
  min-width: 0;
}
.role-split-pane {
  display: grid;
  grid-template-columns: minmax(280px, 300px) minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
}
.role-list-pane {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.role-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.role-list-header h2 {
  margin: 0;
}

.role-list {
  display: grid;
  gap: 8px;
}

/* G5：角色卡——原型 .role-card（第 491-501 行），间距/字重逐值对齐。 */
.role-row {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 13px;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  background: var(--admin-card);
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  transition: border-color 120ms ease, background 120ms ease;
}
.role-row:hover {
  background: var(--admin-secondary);
}

.role-row.selected {
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 1px var(--admin-primary);
}

.role-card-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.role-card-name {
  font-size: 14px;
  font-weight: 600;
}

.role-card-desc {
  min-width: 0;
  color: var(--admin-muted-foreground);
  font-size: 12px;
  margin-top: 5px;
  line-height: 1.45;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.role-card-foot {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.role-card-actions {
  display: inline-flex;
  gap: 5px;
  margin-left: auto;
  opacity: 0;
  transition: opacity 120ms ease;
}

.role-row:hover .role-card-actions,
.role-row:focus-within .role-card-actions,
.role-row.selected .role-card-actions {
  opacity: 1;
}

.role-perm-count {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.role-edit-btn,
.role-delete-btn {
  min-height: 24px;
  padding: 2px 7px;
  font-size: 12px;
  flex-shrink: 0;
}

.role-delete-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.role-editor-pane {
  min-width: 0;
}

.role-editor-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--admin-border);
}

.role-editor-header h3 {
  margin: 0;
}

.role-editor-header p {
  margin: 4px 0 0;
  color: var(--admin-muted-foreground);
  font-size: 13px;
}

.role-editor-actions {
  flex-shrink: 0;
}

.role-core-grid {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 10px 14px;
  max-width: 620px;
  margin: 16px 0;
  align-items: center;
}

.role-core-grid label {
  color: var(--admin-muted-foreground);
  font-size: 12px;
  font-weight: 650;
}

.role-core-grid input,
.role-core-grid select {
  min-width: 0;
}

.role-workbench-section {
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  padding: 13px 14px;
  margin-bottom: 16px;
}

.role-workbench-section legend {
  padding: 0 6px;
  color: var(--admin-muted-foreground);
  font-size: 12px;
  font-weight: 650;
}

.role-access-full-notice {
  margin: 0;
  padding: 11px 13px;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-secondary);
  color: var(--admin-muted-foreground);
  font-size: 13px;
  line-height: 1.5;
}

.role-permission-list {
  min-width: 0;
  display: grid;
  gap: 8px;
}
.permission-option {
  min-width: 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 9px 10px;
  background: var(--admin-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  line-height: 1.35;
}
.permission-option:hover {
  background: var(--admin-accent);
  border-color: var(--accent);
}
.permission-option input[type="checkbox"] {
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  max-width: 14px;
  max-height: 14px;
  margin: 2px 0 0;
  padding: 0;
  justify-self: center;
  align-self: start;
}
.permission-option span {
  min-width: 0;
  max-width: 100%;
  display: block;
  font-size: 13px;
  line-height: 1.35;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}
.role-access-mode {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.role-access-mode label,
.role-chip-access-option {
  min-width: 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--admin-muted);
  font-size: 13px;
}
.role-chip-access-list {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
}
.role-chip-access-option span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.role-chip-access-option input:disabled + span {
  color: var(--muted);
}
.role-placeholder {
  display: grid;
  place-items: center;
  min-height: 260px;
  color: var(--admin-muted-foreground);
  text-align: center;
}

.role-placeholder-inner {
  max-width: 320px;
}

.role-placeholder-inner h3 {
  margin-bottom: 6px;
  color: var(--admin-foreground);
}
.role-editor-form fieldset {
  min-width: 0;
}
.role-editor-form legend {
  font-weight: 600;
  margin-bottom: 8px;
}

@media (max-width: 899px) {
  .role-split-pane {
    grid-template-columns: 1fr;
    height: auto;
  }

  .role-list-pane,
  .role-editor-pane {
    overflow: visible;
  }
}

@media (max-width: 559px) {
  .role-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .role-perm-count {
    justify-self: start;
  }

  .role-access-mode {
    grid-template-columns: 1fr;
  }
}

/* ---- User role selector ---- */
/* 旧的卡片式 .user-row 网格布局与 .user-row-role/-key-count/-profile 子元素已废弃，
   用户列表 2.1.15 起改为 .user-table 真表格（见下方 .user-table 规则）。 */
.user-info-btn {
  min-width: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  padding: 4px;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.role-selector {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

/* ---- Admin resources governance workspace ---- */
/* 批次E（2.2.27）：资源编辑器改为共享 .admin-drawer 浮层（固定定位、出流），
   列表面板占满整宽——不再是常驻双列面板，与芯片编辑器/会话详情统一为右侧滑出抽屉。 */
.resources-admin-workspace {
  min-width: 0;
  min-height: 0;
  display: block;
}

/* 批次E（2.2.27）：资源编辑器在抽屉内改单列堆叠（标签在上、控件在下），与芯片编辑器抽屉一致，
   避免共享 .profile-form 的 2 列网格把标签挤到控件右侧、视觉脱节。仅作用于抽屉内，不影响用户资料/积分表单。 */
.admin-drawer .profile-form {
  grid-template-columns: 1fr;
}

.resources-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.resources-pane {
  overflow: auto;
}

.resource-grants-fieldset {
  display: grid;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin: 12px 0;
}

.resource-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.resource-status-flow,
.resource-status-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* H3：状态流条——对齐原型 knowledge.html .flow-strip/.flow-step（第 414-418 行）：
   24px 高、999px 药丸，current 为 primary 实心填充，rejected.current 为 destructive 浅染。 */
.resource-flow-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0 14px;
}

.resource-flow-step {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--admin-border);
  background: var(--admin-secondary);
  color: var(--admin-muted-foreground);
  font-size: 11px;
  font-weight: 600;
}

.resource-flow-step.current {
  background: var(--admin-primary);
  color: var(--admin-primary-foreground);
  border-color: transparent;
}

.resource-flow-step.current.rejected {
  background: color-mix(in oklch, var(--admin-destructive) 12%, var(--admin-card));
  color: var(--admin-destructive);
  border-color: color-mix(in oklch, var(--admin-destructive) 30%, transparent);
}

.resource-flow-arrow {
  font-size: 11px;
  color: var(--admin-muted-foreground);
}

@media (max-width: 1080px) {
  .resources-admin-workspace {
    grid-template-columns: 1fr;
  }
}

/* ---- Admin history workspace ---- */
/* F1：会话历史列表始终占满整宽；打开会话详情不再挤压表格列宽，
   而是以固定右侧滑出浮层覆盖显示（与知识库 chip 编辑器的 .admin-drawer 同款模式）。 */
.history-workspace {
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.history-main,
.history-pane,
.session-detail-drawer {
  min-width: 0;
  min-height: 0;
}

.history-main {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 12px;
}

.history-toolbar {
  display: grid;
  gap: 12px;
}

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

.history-summary {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

/* E2：会话历史筛选条已并入共享 .admin-filterbar 单行布局（见前文注释），
   .history-filter-form 仅保留类名兼容既有测试契约，不再重复/覆盖布局属性。 */
.history-filter-form input:not([type="date"]) {
  min-width: 150px;
}

.history-filter-form button {
  min-width: 0;
}

/* E4：历史浏览方式 tab（按用户/最新 Chat/问题台账）复用 .admin-page-tabs 下划线/分段样式，
   不再是独立的按钮胶囊；这里不再重复/覆盖颜色与背景。 */

.history-pane {
  overflow: auto;
}

.history-session-row,
.history-question-row {
  cursor: pointer;
}

.history-session-row:hover,
.history-question-row:hover {
  background: var(--admin-secondary);
}

.history-session-row.selected {
  background: color-mix(in oklch, var(--admin-primary) 5%, var(--admin-card));
}

.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 1px 7px;
  color: var(--muted);
  background: var(--admin-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.status-badge.done {
  color: var(--admin-success);
  background: var(--admin-success-soft);
  border-color: color-mix(in oklch, var(--admin-success) 34%, var(--admin-border));
}

.status-badge.completed {
  color: var(--admin-success);
  background: var(--admin-success-soft);
  border-color: color-mix(in oklch, var(--admin-success) 34%, var(--admin-border));
}

.status-badge.disabled,
.status-badge.expired {
  color: var(--danger);
  background: color-mix(in oklch, var(--admin-destructive) 10%, var(--admin-card));
  border-color: color-mix(in oklch, var(--admin-destructive) 32%, var(--admin-border));
}

.status-badge.error {
  color: var(--danger);
  background: color-mix(in oklch, var(--admin-destructive) 10%, var(--admin-card));
  border-color: color-mix(in oklch, var(--admin-destructive) 32%, var(--admin-border));
}

.status-badge.interrupted {
  color: var(--admin-warn);
  background: var(--admin-warn-soft);
  border-color: color-mix(in oklch, var(--admin-warn) 34%, var(--admin-border));
}

.status-badge.credits {
  color: var(--admin-warn);
  background: var(--admin-warn-soft);
  border-color: color-mix(in oklch, var(--admin-warn) 34%, var(--admin-border));
}

.status-badge.running {
  color: var(--admin-info);
  background: var(--admin-info-soft);
  border-color: color-mix(in oklch, var(--admin-info) 34%, var(--admin-border));
}

.history-pagination {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* 批次A（2.2.27）：会话详情浮层收敛为 .admin-drawer 三段式组件（固定头 .admin-drawer-header +
   独立滚动体 .admin-drawer-body），仅保留宽度覆盖（会话内容多、略宽）。定位/层级/隐藏滑出
   统一由 .admin-drawer 提供，修复「顶栏遮挡关闭 X」+「长内容滚动后 X 滚出视口」，
   并消除与 .admin-drawer 分叉的第二套抽屉实现（架构漂移 P1）。 */
.session-detail-drawer {
  width: min(680px, 92vw);
}

.session-detail-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.session-detail-header h2,
.session-detail-section h3 {
  margin: 0;
}

.session-detail-meta {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.session-detail-section {
  display: grid;
  gap: 10px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}

.session-detail-transcript,
.session-detail-info,
.session-detail-debug,
.debug-event-list {
  display: grid;
  gap: 8px;
}

.transcript-entry {
  min-width: 0;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow-wrap: anywhere;
}

.transcript-entry.turn_result {
  grid-template-columns: 92px auto minmax(0, 1fr);
  background: var(--admin-muted);
}

.session-info-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.session-info-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.session-info-row code {
  min-width: 0;
  padding: 8px;
  color: var(--admin-foreground);
  background: var(--admin-muted);
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.debug-output {
  min-width: 0;
  padding: 8px;
  color: var(--code-text);
  background: var(--code-bg);
  border-radius: 6px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.debug-toggle {
  justify-self: start;
}

.debug-notice {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.debug-output {
  max-height: 260px;
  overflow: auto;
}

.debug-event-row {
  padding: 8px 10px;
  background: var(--admin-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow-wrap: anywhere;
}

.debug-trace-timeline {
  display: grid;
  gap: 6px;
}

.debug-trace-step {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--admin-muted);
  overflow: hidden;
}

.debug-trace-step.is-skipped {
  opacity: 0.6;
  background: var(--admin-muted);
}

.debug-trace-step-head {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
}

.debug-trace-step-head.has-artifact {
  cursor: pointer;
  user-select: none;
}

.debug-trace-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
}

.debug-trace-icon-ok {
  background: color-mix(in oklch, var(--admin-success) 18%, transparent);
  color: var(--admin-success);
}

.debug-trace-icon-error {
  background: color-mix(in oklch, var(--admin-destructive) 18%, transparent);
  color: var(--admin-destructive);
}

.debug-trace-icon-skipped {
  background: color-mix(in oklch, var(--admin-muted-foreground) 18%, transparent);
  color: var(--admin-muted-foreground);
}

.debug-trace-stage {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.debug-trace-stage-name {
  font-weight: 700;
  font-size: 13px;
}

.debug-trace-stage-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.debug-trace-kv {
  background: var(--admin-card, var(--card));
  border: 1px solid var(--admin-border);
  border-radius: 4px;
  padding: 2px 6px;
  overflow-wrap: anywhere;
}

/* 阶段主行的行内 KV 摘要片（对齐原型 .trace-step .tc .detail .kv）：无边框、key 强调、value 承袭 muted。 */
.debug-trace-kv-chip {
  min-width: 0;
  overflow-wrap: anywhere;
}

.debug-trace-kv-chip b {
  color: var(--text);
  font-weight: 600;
}

.debug-trace-dur {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.debug-trace-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: transform 120ms ease;
}

.debug-trace-toggle.open {
  transform: rotate(90deg);
}

.debug-trace-artifact {
  border-top: 1px solid var(--border);
  padding: 10px;
  background: var(--admin-card, var(--card));
}

.debug-candidate-list {
  display: grid;
  gap: 6px;
}

.debug-candidate-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: start;
  padding: 6px 8px;
  background: var(--admin-muted);
  border-radius: 6px;
  overflow-wrap: anywhere;
}

.debug-candidate-reason {
  color: var(--muted);
  font-size: 12px;
}

.debug-file-tree {
  display: grid;
  gap: 1px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  padding: 4px 0;
}

.debug-ft-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 6px;
  align-items: center;
  padding: 2px 4px;
  border-radius: 3px;
}

.debug-ft-indent-0 { padding-left: 4px; }
.debug-ft-indent-1 { padding-left: 18px; }
.debug-ft-indent-2 { padding-left: 32px; }
.debug-ft-indent-3 { padding-left: 46px; }
.debug-ft-indent-4 { padding-left: 60px; }
.debug-ft-indent-5 { padding-left: 74px; }
.debug-ft-indent-6 { padding-left: 88px; }

.debug-ft-dir {
  font-weight: 700;
  color: var(--muted);
}

.debug-ft-size {
  color: var(--muted);
  font-size: 11px;
}

.debug-simple-list {
  display: grid;
  gap: 4px;
}

.debug-sl-row {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.debug-artifact-block {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  background: var(--admin-card, var(--card));
  overflow-wrap: anywhere;
}

.debug-artifact-block summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 12.5px;
}

.debug-failure-banner {
  margin-bottom: 10px;
}

.debug-session-link {
  text-decoration: none;
}

.debug-artifact-title {
  font-weight: 700;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.debug-error-block {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: color-mix(in oklch, var(--admin-destructive) 10%, transparent);
  color: var(--admin-destructive);
  font-size: 12px;
}

.debug-trace-prompt-block summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}

.debug-trace-prompt-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}

.debug-candidate-file {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.debug-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 11px;
}

@media (max-width: 899px) {
  .history-filter-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 窄屏下右侧浮层收窄为整宽，与 .admin-drawer 窄屏行为一致。 */
  .session-detail-drawer {
    width: 100vw;
    max-width: 100vw;
  }
}

@media (max-width: 559px) {
  .history-filter-form,
  .session-detail-header,
  .transcript-entry,
  .transcript-entry.turn_result,
  .session-info-row {
    grid-template-columns: 1fr;
  }
}

/* ---- Merlin WebUI skin system ---- */
html[data-agentx-skin="cal"] {
  --bg: #f5f5f4;
  --surface: #ffffff;
  --surface-alt: rgba(255,255,255,.78);
  --surface-elevated: rgba(255,255,255,.78);
  --text: #111827;
  --muted: #737373;
  --border: #e5e5e5;
  --accent: #111827;
  --accent-text: #ffffff;
  --accent-subtle: #ededed;
  --primary: var(--accent);
  --primary-subtle: var(--accent-subtle);
  --border-color: var(--border);
  --text-primary: var(--text);
  --text-secondary: var(--muted);
  --skin-shadow-panel: 0 26px 76px rgba(17,24,39,.12);
  --skin-gradient: linear-gradient(135deg, #fafafa, #ffffff 58%, #f2f2f2);
  --skin-radius: 18px;
  --skin-font-display: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
}

html[data-agentx-skin="voltagent"] {
  --bg: #06110a;
  --surface: #0a1a10;
  --surface-alt: rgba(10,26,16,.82);
  --surface-elevated: rgba(10,26,16,.82);
  --text: #ecfff4;
  --muted: #89f0b8;
  --border: #0d6b3c;
  --accent: #00d47e;
  --accent-text: #031008;
  --accent-subtle: #0d2a19;
  --primary: var(--accent);
  --primary-subtle: var(--accent-subtle);
  --border-color: var(--border);
  --text-primary: var(--text);
  --text-secondary: var(--muted);
  --skin-shadow-panel: 0 24px 80px rgba(0,212,126,.13);
  --skin-gradient: radial-gradient(circle at 15% 0%, rgba(0,212,126,.18), transparent 32%), #06110a;
  --skin-radius: 14px;
  --skin-font-display: "JetBrains Mono", "Cascadia Code", monospace;
}

html[data-agentx-skin] body {
  background: var(--skin-gradient);
  transition: background 280ms ease, color 200ms ease;
}

html[data-agentx-skin] body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(115deg, rgba(255,255,255,.32), transparent 28%, rgba(255,255,255,.18) 55%, transparent 72%),
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 28%);
}

html[data-agentx-skin] .landing-topbar,
html[data-agentx-skin] .topbar {
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(18px);
}

html[data-agentx-skin] .landing-hero {
  width: min(1280px, calc(100% - 40px));
  margin-top: clamp(24px, 6vh, 72px);
  margin-bottom: 24px;
  padding: clamp(48px, 7vw, 110px);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  border-radius: var(--skin-radius);
  box-shadow: var(--skin-shadow-panel);
  backdrop-filter: blur(22px);
  animation: agentx-page-rise 620ms cubic-bezier(.16, 1, .3, 1) both;
}

html[data-agentx-skin] .landing-hero h1 {
  font-family: var(--skin-font-display);
  font-size: 76px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: .95;
}

.admin-grid.sidebar-collapsed .admin-section-nav a .admin-nav-text,
.admin-grid.sidebar-collapsed .admin-section-nav > .sidebar-collapse-button .admin-nav-text {
  opacity: 0;
}

.admin-grid.sidebar-collapsed .admin-nav-group-toggle {
  display: none;
}

.admin-grid.sidebar-collapsed .admin-section-nav a,
.admin-grid.sidebar-collapsed .admin-section-nav > .sidebar-collapse-button {
  padding-left: 6px;
  padding-right: 6px;
}

.admin-grid.sidebar-collapsed .admin-nav-footer-version {
  opacity: 0;
}

html[data-agentx-skin] .landing-kicker {
  color: var(--accent);
  letter-spacing: .04em;
}

html[data-agentx-skin] .landing-lede {
  max-width: 760px;
  font-size: 22px;
}

html[data-agentx-skin] .login-panel,
html[data-agentx-skin] .panel,
html[data-agentx-skin] .session-sidebar,
html[data-agentx-skin] .chat-workspace,
html[data-agentx-skin] .landing-feature-grid article,
html[data-agentx-skin] .landing-practice-grid article,
html[data-agentx-skin] .portal-capability-grid article,
html[data-agentx-skin] .ticket-query-card,
html[data-agentx-skin] .ticket-result-card,
html[data-agentx-skin] .my-ticket-row,
html[data-agentx-skin] .donation-channel,
html[data-agentx-skin] .mcp-fast-path li,
html[data-agentx-skin] .mcp-template-grid article,
html[data-agentx-skin] .modal-panel {
  background: var(--surface-alt);
  border-color: color-mix(in srgb, var(--accent) 14%, var(--border));
  border-radius: min(var(--skin-radius), 22px);
  box-shadow: 0 14px 42px rgba(15, 23, 42, .08);
  backdrop-filter: blur(18px);
}

html[data-agentx-skin] .landing-feature-grid article,
html[data-agentx-skin] .landing-practice-grid article,
html[data-agentx-skin] .portal-capability-grid article,
html[data-agentx-skin] .ticket-query-card,
html[data-agentx-skin] .my-ticket-row,
html[data-agentx-skin] .donation-channel,
html[data-agentx-skin] .mcp-fast-path li,
html[data-agentx-skin] .mcp-template-grid article,
html[data-agentx-skin] .session-row,
html[data-agentx-skin] .key-row {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

html[data-agentx-skin] .landing-feature-grid article:hover,
html[data-agentx-skin] .landing-practice-grid article:hover,
html[data-agentx-skin] .portal-capability-grid article:hover,
html[data-agentx-skin] .ticket-query-card:hover,
html[data-agentx-skin] .my-ticket-row:hover,
html[data-agentx-skin] .donation-channel:hover,
html[data-agentx-skin] .mcp-fast-path li:hover,
html[data-agentx-skin] .mcp-template-grid article:hover,
html[data-agentx-skin] .session-row:hover,
html[data-agentx-skin] .key-row:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border));
  box-shadow: 0 18px 48px rgba(15, 23, 42, .12);
}

html[data-agentx-skin] .primary-button,
html[data-agentx-skin] button[type="submit"],
html[data-agentx-skin] .message.user {
  color: var(--accent-text);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 22%, transparent);
}

html[data-agentx-skin] .secondary-button,
html[data-agentx-skin] .meta-pill,
html[data-agentx-skin] .history-tabs button,
html[data-agentx-skin] .tab-bar button {
  background: color-mix(in srgb, var(--accent-subtle) 72%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
}

html[data-agentx-skin] .conversation .message {
  animation: agentx-message-in 260ms ease both;
}

html[data-agentx-skin] .admin-section:not([hidden]),
html[data-agentx-skin] .history-pane:not([hidden]) {
  animation: agentx-tab-panel-in 260ms ease both;
}

html[data-agentx-skin] .session-detail-drawer:not([hidden]),
html[data-agentx-skin] .modal-backdrop:not([hidden]) .modal-panel {
  animation: agentx-drawer-slide 260ms ease both;
}

.auth-skin-toolbar {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 20;
}

html[data-agentx-skin="voltagent"] .landing-hero h1,
html[data-agentx-skin="voltagent"] .brand,
html[data-agentx-skin="voltagent"] .landing-brand,
html[data-agentx-skin="voltagent"] .panel h1,
html[data-agentx-skin="voltagent"] .panel h2 {
  font-family: "JetBrains Mono", "Cascadia Code", monospace;
}

@keyframes agentx-page-rise {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes agentx-message-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes agentx-tab-panel-in {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes agentx-drawer-slide {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-agentx-skin] *,
  html[data-agentx-skin] *::before,
  html[data-agentx-skin] *::after {
    animation-duration: 1ms !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

@media (max-width: 899px) {
  html[data-agentx-skin] .landing-hero {
    width: min(100% - 24px, 720px);
    padding: 36px 22px;
  }

  html[data-agentx-skin] .landing-hero h1 {
    font-size: 44px;
  }

  .auth-skin-toolbar {
    top: 12px;
    right: 12px;
  }
}

/* ---- AgentX V1.8 homepage fusion redesign ---- */
body.portal-page {
  min-height: 100%;
  overflow: auto;
  background: var(--skin-gradient, linear-gradient(135deg, #fbfbff, #ffffff));
  letter-spacing: 0;
}

/* 背景连续性：皮肤渐变默认随内容滚动（attachment:scroll），与固定的 ::before / bgfx
   叠层错位形成接缝。视口锚定渐变，让所有背景层一起固定，滚动时背景保持连续无缝。
   选择器需压过 `html[data-agentx-skin] body` 的 background 简写（其会把 attachment 重置为 scroll）。 */
html[data-agentx-skin] body.portal-page {
  background-attachment: fixed;
}

body.portal-page::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(900px 360px at 70% -120px, color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%),
    radial-gradient(680px 320px at 12% -90px, color-mix(in srgb, var(--accent-subtle) 58%, transparent), transparent 60%),
    var(--bg);
}

.portal-bgfx {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.portal-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  background: transparent;
}

body.portal-page .portal-topbar {
  position: sticky;
  top: 18px;
  z-index: 20;
  width: min(1080px, calc(100% - 32px));
  min-height: 58px;
  margin: 18px auto 0;
  padding: 10px 12px 10px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
  border-radius: 999px;
  box-shadow: 0 16px 48px rgb(15 23 42 / 0.12);
  backdrop-filter: saturate(180%) blur(18px);
  animation: portal-nav-drop 540ms cubic-bezier(.16, 1, .3, 1) both;
}

body.portal-page .landing-brand {
  flex: 0 0 auto;
  font: 900 16px/1 var(--skin-font-display, ui-sans-serif, "Segoe UI", "Microsoft YaHei", sans-serif);
  gap: 10px;
}

body.portal-page .landing-brand .brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: var(--accent-text);
  background: var(--accent);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 28%, transparent);
  transition: transform 340ms cubic-bezier(.16, 1, .3, 1);
}

body.portal-page .portal-topbar:hover .brand-mark {
  transform: rotate(-8deg) scale(1.06);
}

body.portal-page .portal-nav {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  gap: 4px;
  flex-wrap: nowrap;
}

body.portal-page .portal-nav a,
body.portal-page .portal-auth-slot a,
body.portal-page .portal-logout-button,
body.portal-page .portal-user-pill {
  min-height: 36px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  border-radius: 999px;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

body.portal-page .portal-nav a:hover,
body.portal-page .portal-auth-slot a:hover,
body.portal-page .portal-logout-button:hover {
  background: color-mix(in srgb, var(--accent-subtle) 70%, transparent);
  transform: translateY(-1px);
}

body.portal-page .portal-nav a.active {
  color: var(--accent);
  background: var(--accent-subtle);
}

body.portal-page .portal-auth-slot {
  flex: 0 0 auto;
}

body.portal-page .portal-user-pill {
  max-width: 150px;
  color: var(--accent);
  background: var(--accent-subtle);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
}

body.portal-page .portal-logout-button {
  padding: 0 10px;
  color: var(--muted);
  background: transparent;
  border: 0;
}

body.portal-page .portal-skin-slot {
  flex: 0 0 auto;
  display: inline-flex;
  justify-content: flex-end;
}

.portal-main {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 0 0 72px;
}

body.portal-page .portal-hero {
  width: 100%;
  min-height: min(540px, calc(100vh - 138px));
  margin: 0;
  padding: clamp(70px, 12vh, 128px) 0 42px;
  display: grid;
  align-content: center;
  gap: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  animation: none;
}

body.portal-page .landing-kicker {
  width: fit-content;
  margin: 0;
  padding: 5px 13px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent-subtle) 74%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
}

body.portal-page .portal-hero h1 {
  max-width: 720px;
  margin: 24px 0 0;
  color: var(--text);
  font: 900 clamp(42px, 6.2vw, 74px)/0.98 var(--skin-font-display, ui-sans-serif, "Segoe UI", "Microsoft YaHei", sans-serif);
  letter-spacing: 0;
}

body.portal-page .landing-lede {
  max-width: 650px;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.6;
}

body.portal-page .portal-hero-actions {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

body.portal-page .landing-button {
  min-height: 48px;
  padding: 0 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 900;
  transition: transform 140ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

body.portal-page .landing-button:active {
  transform: translateY(1px);
}

body.portal-page .portal-action-primary {
  color: var(--accent-text);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 26%, transparent);
}

body.portal-page .portal-action-primary:hover {
  box-shadow: 0 16px 34px color-mix(in srgb, var(--accent) 34%, transparent);
  transform: translateY(-2px);
}

body.portal-page .portal-action-ghost {
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  border-color: color-mix(in srgb, var(--accent) 14%, var(--border));
}

body.portal-page .portal-action-ghost:hover {
  background: color-mix(in srgb, var(--accent-subtle) 42%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  transform: translateY(-2px);
}

body.portal-page .landing-section {
  width: 100%;
  padding: 0;
  border-top: 0;
}

.portal-capabilities-section {
  margin-top: 36px;
}

body.portal-page .portal-section-title {
  min-width: 0;
  margin: 0 0 18px;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}

body.portal-page .portal-section-title h2 {
  min-width: min(100%, 620px);
  margin: 0;
  color: var(--text);
  font: 900 24px/1.18 var(--skin-font-display, ui-sans-serif, "Segoe UI", "Microsoft YaHei", sans-serif);
  letter-spacing: 0;
}

.portal-section-kicker {
  max-width: none;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
}

body.portal-page .product-version {
  margin-left: auto;
}

.portal-bento-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

body.portal-page .portal-capability-grid article,
body.portal-page .portal-bento-card {
  min-width: 0;
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 26px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
  border-radius: min(var(--skin-radius, 20px), 22px);
  box-shadow: 0 2px 8px rgb(15 23 42 / 0.04);
  backdrop-filter: blur(16px);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease, background 200ms ease;
}

body.portal-page .portal-bento-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  box-shadow: 0 18px 46px rgb(15 23 42 / 0.1);
}

.portal-bento-wide {
  grid-column: span 8;
}

.portal-bento-small {
  grid-column: span 4;
}

.portal-bento-half {
  grid-column: span 6;
}

.portal-bento-full {
  grid-column: span 12;
}

body.portal-page .capability-index {
  width: fit-content;
  min-height: 24px;
  padding: 2px 9px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 72%, var(--accent-subtle));
  border-color: color-mix(in srgb, var(--accent) 12%, var(--border));
  border-radius: 8px;
  font-size: 11px;
  font-weight: 900;
}

body.portal-page .portal-bento-card h3 {
  margin: 8px 0 0;
  color: var(--text);
  font: 900 20px/1.25 var(--skin-font-display, ui-sans-serif, "Segoe UI", "Microsoft YaHei", sans-serif);
  letter-spacing: 0;
}

body.portal-page .portal-bento-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.portal-chip-set {
  min-width: 0;
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.portal-chip-set span {
  min-height: 38px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 78%, var(--accent-subtle));
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
}

.portal-inline-link {
  width: fit-content;
  max-width: 100%;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
}

.portal-step-list {
  margin-top: 8px;
  display: grid;
  gap: 10px;
}

.portal-step-list span {
  min-width: 0;
  min-height: 44px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 13%, var(--border));
  border-radius: 12px;
  font-size: 13px;
  font-weight: 850;
}

.portal-step-list b {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: var(--accent-subtle);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 999px;
  font-size: 12px;
}

.portal-security-mark {
  min-height: 94px;
  display: grid;
  place-items: center;
}

.portal-security-icon {
  position: relative;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: var(--accent-subtle);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 18px;
  font-size: 42px;
  line-height: 1;
}

.portal-security-check {
  position: absolute;
  right: calc(50% - 44px);
  top: calc(50% - 42px);
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--accent-text);
  background: var(--accent);
  border: 2px solid var(--surface);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
}

.portal-feature-row {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.portal-feature-row article {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.portal-feature-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent-subtle) 65%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 12px;
  font-size: 22px;
  font-weight: 900;
}

.portal-feature-row h3 {
  margin: 6px 0 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
}

.portal-feature-row p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.portal-updates-section {
  margin-top: 64px;
}

body.portal-page .portal-announcements-list,
body.portal-page .announcements-home-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

body.portal-page .announcement-card {
  padding: 18px 20px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  border-color: color-mix(in srgb, var(--accent) 12%, var(--border));
  border-radius: min(var(--skin-radius, 20px), 18px);
  backdrop-filter: blur(16px);
}

body.portal-page .portal-footer {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 26px 0 40px;
  align-items: center;
  background: transparent;
  border-top: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border));
  border-bottom: 0;
}

body.portal-page .donation-footer-link {
  min-height: 38px;
  padding: 7px 13px;
  background: color-mix(in srgb, var(--accent-subtle) 64%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 12px;
}

.reveal {
  animation: portal-rise 560ms cubic-bezier(.16, 1, .3, 1) both;
}

.reveal.d1 { animation-delay: 60ms; }
.reveal.d2 { animation-delay: 120ms; }
.reveal.d3 { animation-delay: 180ms; }
.reveal.d4 { animation-delay: 240ms; }
.reveal.d5 { animation-delay: 300ms; }
.reveal.d6 { animation-delay: 360ms; }

@keyframes portal-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes portal-nav-drop {
  from {
    opacity: 0;
    transform: translateY(-18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .portal-bgfx {
    display: none;
  }

  .reveal,
  body.portal-page .portal-topbar {
    animation: none !important;
  }
}

@media (max-width: 980px) {
  body.portal-page .portal-topbar {
    align-items: flex-start;
    border-radius: 24px;
    flex-wrap: wrap;
  }

  body.portal-page .portal-nav {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  body.portal-page .portal-nav a,
  body.portal-page .portal-auth-slot a,
  body.portal-page .portal-logout-button,
  body.portal-page .portal-user-pill {
    flex: 0 0 auto;
  }

  body.portal-page .portal-skin-slot {
    margin-left: auto;
  }

  .portal-bento-wide,
  .portal-bento-small,
  .portal-bento-half,
  .portal-bento-full {
    grid-column: span 12;
  }

  .portal-feature-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .portal-main,
  body.portal-page .portal-footer {
    width: min(100% - 28px, 640px);
  }

  body.portal-page .portal-topbar {
    top: 12px;
    width: min(100% - 24px, 640px);
    padding: 10px;
  }

  body.portal-page .landing-brand {
    padding-left: 2px;
  }

  body.portal-page .portal-hero {
    min-height: auto;
    padding: 54px 0 34px;
  }

  body.portal-page .portal-hero h1 {
    font-size: 42px;
  }

  body.portal-page .landing-lede {
    font-size: 16px;
  }

  body.portal-page .landing-button {
    width: 100%;
  }

  body.portal-page .portal-section-title h2 {
    font-size: 22px;
  }

  body.portal-page .portal-bento-card {
    padding: 20px;
  }

  .portal-feature-row,
  body.portal-page .portal-announcements-list,
  body.portal-page .announcements-home-list {
    grid-template-columns: 1fr;
  }

  body.portal-page .portal-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

body.portal-page .portal-bento-wide {
  grid-column: span 8;
}

body.portal-page .portal-bento-small {
  grid-column: span 4;
}

body.portal-page .portal-bento-half {
  grid-column: span 6;
}

body.portal-page .portal-bento-full {
  grid-column: span 12;
}

@media (max-width: 980px) {
  body.portal-page .portal-bento-wide,
  body.portal-page .portal-bento-small,
  body.portal-page .portal-bento-half,
  body.portal-page .portal-bento-full {
    grid-column: span 12;
  }
}

@media (max-width: 980px) {
  body.portal-page .portal-nav {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }

  body.portal-page .portal-topbar {
    overflow: hidden;
  }
}

/* ---- AgentX V1.8 public workspace pages ---- */
body.portal-workspace-page {
  min-height: 100%;
  overflow-x: hidden;
  background: var(--skin-gradient, linear-gradient(135deg, #fbfbff, #ffffff));
  letter-spacing: 0;
}

body.portal-workspace-page::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 30%),
    radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--accent-subtle) 52%, transparent), transparent 32%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 35%, transparent), transparent 48%);
}

body.portal-workspace-page .portal-topbar {
  position: sticky;
  top: 18px;
  z-index: 20;
  width: min(1080px, calc(100% - 32px));
  min-height: 58px;
  margin: 18px auto 0;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
  border-radius: 999px;
  box-shadow: 0 18px 60px rgb(15 23 42 / 0.1);
  backdrop-filter: blur(18px);
}

body.portal-workspace-page .landing-brand {
  flex: 0 0 auto;
  gap: 10px;
  font: 900 16px/1 var(--skin-font-display, ui-sans-serif, "Segoe UI", "Microsoft YaHei", sans-serif);
}

body.portal-workspace-page .brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: var(--accent-text);
  background: var(--accent);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 28%, transparent);
}

body.portal-workspace-page .portal-nav {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  gap: 4px;
  flex-wrap: nowrap;
}

body.portal-workspace-page .portal-nav a,
body.portal-workspace-page .portal-auth-slot a,
body.portal-workspace-page .portal-logout-button,
body.portal-workspace-page .portal-user-pill {
  min-height: 36px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  transition: transform 140ms ease, background 160ms ease, color 160ms ease;
}

body.portal-workspace-page .primary-button,
body.portal-workspace-page .secondary-button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}

body.portal-workspace-page .portal-nav a:hover,
body.portal-workspace-page .portal-auth-slot a:hover,
body.portal-workspace-page .portal-logout-button:hover {
  background: color-mix(in srgb, var(--accent-subtle) 70%, transparent);
  transform: translateY(-1px);
}

body.portal-workspace-page .portal-nav a.active,
body.portal-workspace-page .portal-nav a[aria-current="page"] {
  color: var(--accent);
  background: var(--accent-subtle);
}

body.portal-workspace-page .portal-skin-slot {
  flex: 0 0 auto;
  display: inline-flex;
  justify-content: flex-end;
}

.portal-workspace-shell {
  min-width: 0;
}

.portal-workspace-main {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(34px, 6vw, 70px) 0 64px;
}

body.portal-workspace-page .portal-workspace-hero {
  width: 100%;
  margin: 0 0 34px;
  padding: clamp(24px, 4vw, 44px) 0 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

body.portal-workspace-page .portal-workspace-hero h1 {
  max-width: 760px;
  margin: 16px 0 0;
  color: var(--text);
  font: 900 clamp(36px, 5vw, 64px)/1.02 var(--skin-font-display, ui-sans-serif, "Segoe UI", "Microsoft YaHei", sans-serif);
  letter-spacing: 0;
}

body.portal-workspace-page .portal-workspace-hero .landing-lede,
body.portal-workspace-page .portal-workspace-lede {
  max-width: 720px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.65;
}

.portal-hero-status-card {
  min-width: 240px;
  padding: 16px;
  display: grid;
  gap: 10px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
  border-radius: min(var(--skin-radius, 20px), 18px);
  box-shadow: 0 14px 42px rgb(15 23 42 / 0.08);
  backdrop-filter: blur(16px);
}

.portal-hero-actions.compact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.portal-workspace-section {
  width: 100%;
  margin: 0 0 34px;
}

.portal-card-grid {
  display: grid;
  gap: 16px;
}

.portal-card-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.portal-workspace-panel,
body.portal-workspace-page .ticket-query-card {
  min-width: 0;
  padding: 22px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
  border-radius: min(var(--skin-radius, 20px), 18px);
  box-shadow: 0 14px 42px rgb(15 23 42 / 0.07);
  backdrop-filter: blur(16px);
}

body.portal-workspace-page .ticket-query-card:hover,
.portal-workspace-panel:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
}

.portal-workspace-note {
  margin-top: 14px;
  padding: 14px 16px;
  color: var(--muted);
  background: color-mix(in srgb, var(--accent-subtle) 42%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 14px;
}

body.portal-workspace-page .single-workflow-layout {
  width: min(860px, 100%);
  margin: 0 auto;
}

body.portal-workspace-page .feedback-ticket-form label,
body.portal-workspace-page .feedback-ticket-form fieldset {
  min-width: 0;
}

body.portal-workspace-page .feedback-category-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.portal-file-dropzone {
  padding: 18px;
  color: var(--muted);
  background: color-mix(in srgb, var(--accent-subtle) 30%, var(--surface));
  border: 1px dashed color-mix(in srgb, var(--accent) 34%, var(--border));
  border-radius: 14px;
  text-align: center;
}

.portal-file-dropzone input[type="file"] {
  margin-top: 10px;
}

body.portal-workspace-page .ticket-system-layout {
  align-items: start;
}

body.portal-workspace-page .mcp-access-server-grid code,
body.portal-workspace-page .mcp-access-key-row code,
body.portal-workspace-page .mcp-access-template-code {
  color: color-mix(in srgb, var(--text) 86%, var(--accent));
  background: color-mix(in srgb, var(--accent-subtle) 34%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
}

body.portal-workspace-page .mcp-access-template-code {
  min-height: 300px;
  max-height: 420px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 70%, transparent);
}

body.portal-workspace-page .mcp-access-template-tabs button[aria-selected="true"] {
  color: var(--accent);
  background: var(--accent-subtle);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
}

body.portal-workspace-page .mcp-step-list li,
body.portal-workspace-page .mcp-access-security-list p {
  background: color-mix(in srgb, var(--surface) 76%, var(--accent-subtle));
  border-color: color-mix(in srgb, var(--accent) 12%, var(--border));
}

.updates-main {
  width: min(1180px, calc(100% - 40px));
  padding-top: clamp(54px, 6vw, 82px);
}

.updates-hero {
  grid-template-columns: minmax(0, 1fr) auto;
}

.updates-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}

.updates-filter-button {
  min-height: 38px;
  padding: 0 16px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
  border-radius: 999px;
  font-weight: 900;
}

.updates-filter-button.active {
  color: var(--accent-text);
  background: var(--accent);
  border-color: var(--accent);
}

.updates-filter-button span {
  margin-left: 6px;
  opacity: .78;
}

.updates-split-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.86fr) minmax(0, 1.35fr);
  gap: 20px;
  align-items: start;
}

.updates-list-panel,
.updates-detail-panel {
  min-width: 0;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
  border-radius: min(var(--skin-radius, 20px), 18px);
  box-shadow: 0 14px 42px rgb(15 23 42 / 0.07);
  backdrop-filter: blur(16px);
}

.updates-list-panel {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 118px);
  overflow: auto;
  padding: 10px;
}

.updates-list {
  display: grid;
  gap: 10px;
}

.updates-list-item {
  width: 100%;
  min-width: 0;
  padding: 14px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  color: var(--text);
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 14px;
}

.updates-list-item:hover,
.updates-list-item.active {
  background: color-mix(in srgb, var(--accent-subtle) 58%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
}

.updates-date {
  display: grid;
  justify-items: center;
  align-content: center;
  color: var(--text);
}

.updates-date strong,
.updates-detail-date strong {
  font-size: 28px;
  line-height: 1;
}

.updates-date small,
.updates-detail-date span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.updates-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.updates-copy strong {
  overflow-wrap: anywhere;
}

.updates-copy > span:last-child {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.updates-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.updates-meta em,
.updates-meta small {
  padding: 3px 8px;
  color: var(--accent);
  background: var(--accent-subtle);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-radius: 999px;
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}

.updates-detail-panel {
  position: relative;
  padding: clamp(24px, 4vw, 42px);
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 24px;
}

.updates-detail-header,
.updates-detail-body,
.updates-detail-actions {
  grid-column: 2;
}

.updates-detail-date {
  grid-row: 1 / span 3;
  display: grid;
  justify-items: center;
  align-content: start;
  padding-top: 8px;
}

.updates-detail-header h2 {
  margin: 14px 0 10px;
  color: var(--text);
  font: 900 clamp(26px, 3.4vw, 42px)/1.1 var(--skin-font-display, ui-sans-serif, "Segoe UI", "Microsoft YaHei", sans-serif);
}

.updates-detail-header p,
.updates-detail-body p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.78;
}

.updates-detail-body {
  display: grid;
  gap: 12px;
}

.updates-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

@media (max-width: 980px) {
  body.portal-workspace-page .portal-topbar {
    align-items: flex-start;
    border-radius: 24px;
    flex-wrap: wrap;
    overflow: hidden;
  }

  body.portal-workspace-page .portal-nav {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  body.portal-workspace-page .portal-nav a,
  body.portal-workspace-page .portal-auth-slot a,
  body.portal-workspace-page .portal-logout-button,
  body.portal-workspace-page .portal-user-pill {
    flex: 0 0 auto;
  }

  body.portal-workspace-page .portal-skin-slot {
    margin-left: auto;
  }

  body.portal-workspace-page .portal-workspace-hero,
  .updates-hero,
  .portal-card-grid.two,
  .updates-split-layout {
    grid-template-columns: 1fr;
  }

  .portal-hero-status-card {
    width: 100%;
  }

  .updates-list-panel {
    position: static;
    max-height: none;
  }
}

@media (max-width: 720px) {
  .portal-workspace-main,
  .updates-main,
  body.portal-workspace-page .portal-footer {
    width: min(100% - 28px, 640px);
  }

  body.portal-workspace-page .portal-topbar {
    top: 12px;
    width: min(100% - 24px, 640px);
    padding: 10px;
  }

  .portal-workspace-main {
    padding-top: 36px;
  }

  body.portal-workspace-page .portal-workspace-hero h1 {
    font-size: 40px;
  }

  body.portal-workspace-page .feedback-category-grid {
    grid-template-columns: 1fr 1fr;
  }

  .updates-detail-panel {
    grid-template-columns: 1fr;
  }

  .updates-detail-header,
  .updates-detail-body,
  .updates-detail-actions,
  .updates-detail-date {
    grid-column: 1;
  }

  .updates-detail-date {
    grid-row: auto;
    justify-items: start;
  }
}

@media (max-width: 460px) {
  body.portal-workspace-page .feedback-category-grid {
    grid-template-columns: 1fr;
  }

  .updates-list-item {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
  }
}

/* ---- AgentX V1.8 reference replica shell ---- */
body.portal-workspace-page .page,
body.portal-page .page {
  min-height: 100vh;
}

body.portal-workspace-page .shell-mk,
body.portal-page .shell-mk {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 0 0 80px;
}

body.portal-workspace-page .float-nav,
body.portal-page .float-nav,
body.portal-workspace-page .portal-topbar,
body.portal-page .portal-topbar {
  position: sticky;
  top: 18px;
  z-index: 20;
  width: min(1080px, calc(100% - 32px));
  min-height: 58px;
  margin: 18px auto 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 12px 10px 20px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
  border-radius: 999px;
  box-shadow: var(--skin-shadow-panel, 0 10px 34px rgb(12 14 16 / .10));
  backdrop-filter: saturate(180%) blur(16px);
}

body.portal-workspace-page .landing-brand,
body.portal-page .landing-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  color: var(--text);
  font-weight: 900;
  font-size: 16px;
  text-decoration: none;
}

body.portal-workspace-page .brand-mark,
body.portal-page .brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: var(--accent-text, #fff);
  background: var(--accent);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent);
  font-size: 12px;
  font-weight: 900;
}

body.portal-workspace-page .portal-nav,
body.portal-page .portal-nav {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0 auto;
}

body.portal-workspace-page .portal-nav a,
body.portal-page .portal-nav a,
body.portal-workspace-page .portal-auth-slot a,
body.portal-page .portal-auth-slot a,
body.portal-workspace-page .portal-logout-button,
body.portal-page .portal-logout-button,
body.portal-workspace-page .portal-user-pill,
body.portal-page .portal-user-pill {
  min-height: 36px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background .14s ease, color .14s ease, transform .16s ease;
}

body.portal-workspace-page .portal-nav a:hover,
body.portal-page .portal-nav a:hover,
body.portal-workspace-page .portal-auth-slot a:hover,
body.portal-page .portal-auth-slot a:hover,
body.portal-workspace-page .portal-logout-button:hover,
body.portal-page .portal-logout-button:hover {
  background: color-mix(in srgb, var(--accent-subtle) 70%, transparent);
  transform: translateY(-1px);
}

body.portal-workspace-page .portal-nav a.active,
body.portal-page .portal-nav a.active,
body.portal-workspace-page .portal-nav a[aria-current="page"],
body.portal-page .portal-nav a[aria-current="page"] {
  color: var(--accent);
  background: var(--accent-subtle);
  font-weight: 850;
}

body.portal-workspace-page .portal-skin-slot,
body.portal-page .portal-skin-slot,
body.portal-workspace-page [data-agentx-skin-root],
body.portal-page [data-agentx-skin-root] {
  flex: 0 0 auto;
  display: inline-flex;
  justify-content: flex-end;
}

.portal-workspace-main,
.portal-main {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(34px, 6vw, 70px) 0 64px;
}

.portal-workspace-main.narrow-workspace,
.narrow-workspace {
  width: min(820px, calc(100% - 40px));
  margin-left: auto;
  margin-right: auto;
}

.hero,
body.portal-workspace-page .portal-workspace-hero,
body.portal-page .portal-hero {
  padding: clamp(48px, 8vw, 84px) 0 40px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.workspace-title-block {
  width: 100%;
  margin: 0 0 20px;
  padding-top: clamp(30px, 5vw, 54px);
}

.workspace-title-block h1,
.hero h1,
body.portal-workspace-page .portal-workspace-hero h1,
body.portal-page .portal-hero h1 {
  color: var(--text);
  letter-spacing: 0;
  font-weight: 900;
}

.hero h1,
body.portal-workspace-page .portal-workspace-hero h1,
body.portal-page .portal-hero h1 {
  max-width: 760px;
  margin: 22px 0 0;
  font-size: clamp(40px, 6vw, 68px);
  line-height: 1.03;
}

.workspace-title-block h1 {
  font-size: 24px;
  line-height: 1.15;
}

.kicker,
.landing-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px;
  color: var(--accent);
  background: var(--accent-subtle);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 999px;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0;
}

.lede,
.landing-lede,
.portal-workspace-lede {
  max-width: 720px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.6;
}

.btn,
.primary-button,
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  text-decoration: none;
}

.btn-lg { min-height: 48px; padding: 0 24px; font-size: 15px; border-radius: 12px; }
.btn-sm { min-height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 8px; }
.btn-primary,
.primary-button { color: var(--accent-text, #fff); background: var(--accent); border: 1px solid var(--accent); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 24%, transparent); }
.btn-ghost,
.secondary-button { color: var(--text); background: var(--surface); border: 1px solid var(--border); }
.btn-ghost:hover,
.secondary-button:hover { background: color-mix(in srgb, var(--accent-subtle) 40%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 22%, var(--border)); }

.panel,
.portal-workspace-panel,
body.portal-workspace-page .ticket-query-card,
.portal-bento-card,
.bento-card {
  min-width: 0;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border));
  border-radius: min(var(--skin-radius, 16px), 16px);
  padding: 22px;
  box-shadow: var(--skin-shadow-panel, 0 1px 2px rgb(12 14 16 / .05));
  backdrop-filter: blur(16px);
}

.panel-head,
.section-heading,
.section-title,
.landing-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.panel-head h2,
.section-title h2 { font-size: 22px; font-weight: 900; }
.panel-head .sub { color: var(--muted); font-size: 13px; margin-top: 3px; }
.badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 8px; font-size: 12px; font-weight: 850; }
.badge.gray { color: var(--muted); background: color-mix(in srgb, var(--surface) 80%, var(--border)); border: 1px solid var(--border); }
.badge.teal { color: var(--accent); background: var(--accent-subtle); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); }

.bento,
.portal-bento-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.portal-bento-card { grid-column: span 6; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.portal-bento-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 22%, var(--border)); }
.portal-bento-wide { grid-column: span 8; }
.portal-bento-small { grid-column: span 4; }
.portal-bento-half { grid-column: span 6; }
.portal-bento-full { grid-column: 1 / -1; }
.portal-bento-card h3 { margin: 14px 0 8px; font-size: 18px; font-weight: 900; }
.portal-bento-card p { color: var(--muted); line-height: 1.65; }
.idx,
.capability-index { display: inline-flex; padding: 3px 8px; color: var(--muted); background: color-mix(in srgb, var(--surface) 75%, var(--border)); border: 1px solid var(--border); border-radius: 7px; font-size: 11px; font-weight: 900; }
.portal-chip-set { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.portal-chip-set span { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; color: var(--accent); background: var(--accent-subtle); border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border)); border-radius: 999px; font-size: 12.5px; font-weight: 800; }
.portal-step-list { display: grid; gap: 8px; margin-top: 14px; }
.portal-step-list span { color: var(--muted); }
.portal-feature-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin: 34px 0; }
.portal-feature-row h3 { margin: 10px 0 6px; font-size: 15px; }
.portal-feature-row p { color: var(--muted); font-size: 13px; line-height: 1.55; }
.portal-feature-icon { color: var(--accent); font-weight: 900; }

.step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.step .n { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--accent-text, #fff); background: var(--accent); font-weight: 900; font-size: 14px; }
.step h3 { margin: 12px 0 6px; font-size: 15px; }
.step p { color: var(--muted); font-size: 13px; line-height: 1.6; }

.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.flex { display: flex; }
.center { align-items: center; }
.between { justify-content: space-between; }
.gap8 { gap: 8px; }
.gap12 { gap: 12px; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.mt8 { margin-top: 8px; }
.mt16 { margin-top: 16px; }
.small { font-size: 13px; }
.muted,
.muted-line { color: var(--muted); }
.more,
.text-link { color: var(--accent); font-weight: 800; text-decoration: none; }

.field,
.reference-form label,
.reference-form fieldset { display: grid; gap: 7px; margin: 0 0 14px; color: var(--text); font-weight: 800; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.input,
.textarea,
.reference-form input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.reference-form textarea,
.reference-form select {
  width: 100%;
  min-width: 0;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 12px;
  font: inherit;
  font-weight: 500;
}
.textarea,
.reference-form textarea { resize: vertical; line-height: 1.55; }
.choice-grid,
.feedback-category-grid,
.donation-amounts { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; border: 0; padding: 0; }
.choice,
.feedback-category-grid label,
.donation-amounts label { display: flex; align-items: center; gap: 8px; min-height: 42px; margin: 0; padding: 10px 12px; background: color-mix(in srgb, var(--surface) 92%, var(--accent-subtle)); border: 1px solid var(--border); border-radius: 10px; font-weight: 800; }
.file-drop,
.portal-file-dropzone { padding: 18px; color: var(--muted); background: color-mix(in srgb, var(--accent-subtle) 30%, var(--surface)); border: 1px dashed color-mix(in srgb, var(--accent) 34%, var(--border)); border-radius: 14px; text-align: center; }
.file-drop input[type="file"] { margin-top: 10px; }

.code-inline,
.mcp-access-server-grid code { display: inline-block; max-width: 100%; overflow-x: auto; padding: 10px 11px; color: color-mix(in srgb, var(--text) 84%, var(--accent)); background: color-mix(in srgb, var(--accent-subtle) 28%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.code-block,
.mcp-access-template-code { width: 100%; min-height: 300px; max-height: 420px; overflow: auto; margin: 0; padding: 18px; color: color-mix(in srgb, var(--text) 90%, var(--accent)); background: color-mix(in srgb, var(--surface) 74%, var(--accent-subtle)); border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); border-radius: 14px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12.5px; line-height: 1.65; }
html[data-agentx-skin="voltagent"] .code-block,
html[data-agentx-skin="voltagent"] .mcp-access-template-code { background: color-mix(in srgb, var(--surface) 84%, #000); color: var(--text); }
.mode-slider,
.mcp-access-template-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; padding: 4px; background: color-mix(in srgb, var(--accent-subtle) 24%, var(--surface)); border: 1px solid var(--border); border-radius: 12px; }
.seg,
.mcp-access-template-tabs button { min-height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid transparent; color: var(--text); background: transparent; font-weight: 850; }
.seg.active,
.mcp-access-template-tabs button[aria-selected="true"] { color: var(--accent); background: var(--surface); border-color: color-mix(in srgb, var(--accent) 20%, var(--border)); }
.mcp-step-list { display: grid; gap: 10px; padding-left: 20px; color: var(--muted); }
.mcp-access-security-list { display: grid; gap: 10px; }

.updates-main { width: min(1180px, calc(100% - 40px)); }
.updates-title-block { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.updates-filter-row,
.ann-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.updates-filter-button,
.ann-fbtn { min-height: 38px; padding: 0 16px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; font-weight: 900; }
.updates-filter-button.active,
.ann-fbtn.active { color: var(--accent-text, #fff); background: var(--accent); border-color: var(--accent); }
.updates-split-layout { display: grid; grid-template-columns: minmax(300px, .86fr) minmax(0, 1.35fr); gap: 20px; align-items: start; }
.updates-list-panel,
.updates-detail-panel { min-width: 0; background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border)); border-radius: min(var(--skin-radius, 16px), 16px); box-shadow: var(--skin-shadow-panel, 0 1px 2px rgb(12 14 16 / .05)); }
.updates-list-panel { position: sticky; top: 96px; max-height: calc(100vh - 118px); overflow: auto; padding: 10px; }
.updates-list { display: grid; gap: 10px; }
.updates-list-item { width: 100%; min-width: 0; padding: 14px; display: grid; grid-template-columns: 56px minmax(0,1fr); gap: 14px; color: var(--text); text-align: left; background: transparent; border: 1px solid transparent; border-radius: 14px; }
.updates-list-item:hover,
.updates-list-item.active { background: color-mix(in srgb, var(--accent-subtle) 58%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 18%, var(--border)); }
.updates-date { display: grid; justify-items: center; align-content: center; }
.updates-date strong,
.updates-detail-date strong { font-size: 28px; line-height: 1; }
.updates-date small,
.updates-detail-date span { color: var(--muted); font-size: 12px; font-weight: 900; }
.updates-copy { min-width: 0; display: grid; gap: 6px; }
.updates-copy > span:last-child { color: var(--muted); font-size: 13px; line-height: 1.55; }
.updates-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.updates-meta em,
.updates-meta small { padding: 3px 8px; color: var(--accent); background: var(--accent-subtle); border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border)); border-radius: 999px; font-style: normal; font-size: 12px; font-weight: 900; }
.updates-detail-panel { padding: clamp(24px, 4vw, 42px); display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 24px; }
.updates-detail-header,
.updates-detail-body,
.updates-detail-actions { grid-column: 2; }
.updates-detail-date { grid-row: 1 / span 3; display: grid; justify-items: center; align-content: start; padding-top: 8px; }
.updates-detail-header h2 { margin: 14px 0 10px; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1; }
.updates-detail-header p,
.updates-detail-body p { color: var(--muted); font-size: 16px; line-height: 1.78; }
.updates-detail-body { display: grid; gap: 12px; }
.updates-detail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

@media (max-width: 980px) {
  body.portal-workspace-page .float-nav,
  body.portal-page .float-nav,
  body.portal-workspace-page .portal-topbar,
  body.portal-page .portal-topbar { align-items: flex-start; flex-wrap: wrap; border-radius: 24px; overflow: hidden; }
  body.portal-workspace-page .portal-nav,
  body.portal-page .portal-nav { order: 3; flex: 0 0 100%; width: 100%; justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; }
  body.portal-workspace-page .portal-auth-slot,
  body.portal-page .portal-auth-slot {
    position: sticky;
    left: 0;
    z-index: 2;
    order: -1;
    flex: 0 0 auto;
    margin-left: 0;
    padding-right: 8px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
  }
  body.portal-workspace-page .portal-nav a,
  body.portal-page .portal-nav a,
  body.portal-workspace-page .portal-auth-slot a,
  body.portal-page .portal-auth-slot a { flex: 0 0 auto; }
  .grid2,
  .step-grid,
  .portal-feature-row,
  .updates-split-layout { grid-template-columns: 1fr; }
  .portal-bento-wide,
  .portal-bento-small,
  .portal-bento-half { grid-column: 1 / -1; }
  .updates-list-panel { position: static; max-height: none; }
}

@media (max-width: 720px) {
  body.portal-workspace-page .shell-mk,
  body.portal-page .shell-mk,
  .portal-workspace-main,
  .portal-main,
  .portal-workspace-main.narrow-workspace,
  .narrow-workspace,
  .updates-main { width: min(100% - 28px, 640px); }
  body.portal-workspace-page .float-nav,
  body.portal-page .float-nav,
  body.portal-workspace-page .portal-topbar,
  body.portal-page .portal-topbar { top: 12px; width: min(100% - 24px, 640px); padding: 10px; }
  .hero h1,
  body.portal-workspace-page .portal-workspace-hero h1,
  body.portal-page .portal-hero h1 { font-size: 40px; }
  .choice-grid,
  .feedback-category-grid,
  .donation-amounts,
  .field-row { grid-template-columns: 1fr; }
  .updates-title-block { display: grid; }
  .updates-detail-panel { grid-template-columns: 1fr; }
  .updates-detail-header,
  .updates-detail-body,
  .updates-detail-actions,
  .updates-detail-date { grid-column: 1; }
  .updates-detail-date { grid-row: auto; justify-items: start; }
}

@media (max-width: 460px) {
  .updates-list-item { grid-template-columns: 46px minmax(0,1fr); gap: 10px; }
  .btn,
  .primary-button,
  .secondary-button { white-space: normal; text-align: center; }
}

/* ---- AgentX reference-page visual tightening pass ---- */
body.reference-page {
  background: var(--bg);
}

body.reference-page .page {
  min-height: 100vh;
  background:
    radial-gradient(900px 380px at 70% -120px, color-mix(in srgb, var(--accent-subtle) 52%, transparent) 0%, transparent 60%),
    radial-gradient(700px 320px at 10% -80px, color-mix(in srgb, var(--surface) 76%, var(--accent-subtle)) 0%, transparent 55%),
    var(--bg);
}

body.reference-page .shell-mk {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 80px;
}

body.reference-page .float-nav,
body.reference-page .portal-topbar {
  position: sticky;
  top: 18px;
  z-index: 30;
  width: min(1080px, calc(100% - 32px));
  margin: 18px auto 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 12px 10px 20px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  box-shadow: var(--skin-shadow-panel, 0 18px 52px rgba(12, 14, 16, .12));
  backdrop-filter: saturate(180%) blur(16px);
}

body.reference-page .landing-brand,
body.reference-page .brand {
  flex: 0 0 auto;
  min-width: 132px;
  color: var(--text);
  font-size: 16px;
  font-weight: 850;
}

body.reference-page .brand-mark,
body.reference-page .logo {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 12px;
  background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 72%, #052e2b));
}

body.reference-page .portal-nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  margin: 0 auto;
}

body.reference-page .portal-nav a,
body.reference-page .portal-auth-slot a,
body.reference-page .portal-user-pill,
body.reference-page .portal-logout-button {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

body.reference-page .portal-nav a.active,
body.reference-page .portal-nav a[aria-current="page"] {
  color: var(--accent);
  background: var(--accent-subtle);
}

body.reference-page [data-agentx-skin-root],
body.reference-page .portal-skin-slot {
  flex: 0 0 auto;
}

body.reference-page .reference-main,
body.reference-page .portal-workspace-main {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 30px 0 64px;
}

body.reference-page .reference-narrow,
body.reference-page .narrow-workspace {
  width: min(820px, calc(100% - 40px));
}

body.reference-page .reference-hero,
body.reference-page .portal-workspace-hero {
  display: block;
  padding: 48px 0 30px;
}

body.reference-page .reference-hero h1,
body.reference-page .portal-workspace-hero h1 {
  max-width: 760px;
  margin: 22px 0 0;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.06;
  font-weight: 900;
}

body.reference-page .portal-workspace-lede,
body.reference-page .reference-hero .lede {
  max-width: 690px;
  color: var(--muted);
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.58;
}

body.reference-page .workspace-title-block {
  width: 100%;
  max-width: none;
  margin: 0 0 20px;
  padding-top: 28px;
}

body.reference-page .workspace-title-block h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
}

body.reference-page .reference-section,
body.reference-page .portal-workspace-section {
  margin-top: 36px;
}

body.reference-page .panel,
body.reference-page .portal-workspace-panel,
body.reference-page .ticket-query-card,
body.reference-page .updates-list-panel,
body.reference-page .updates-detail-panel {
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 86%, var(--accent-subtle));
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 1px 2px rgba(12, 14, 16, .05);
  backdrop-filter: none;
}

body.reference-page .panel:hover,
body.reference-page .portal-workspace-panel:hover,
body.reference-page .ticket-query-card:hover {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  box-shadow: var(--skin-shadow-panel, 0 8px 24px rgba(12, 14, 16, .08));
}

body.reference-page .panel-head h2 {
  font-size: 17px;
  font-weight: 900;
}

body.reference-page .section-title h2 {
  font-size: 22px;
  font-weight: 900;
}

body.reference-page .btn,
body.reference-page .primary-button,
body.reference-page .secondary-button {
  border-radius: 10px;
  font-weight: 850;
}

body.reference-page .btn-primary,
body.reference-page .primary-button {
  color: var(--accent-text, #fff);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 24%, transparent);
}

body.reference-page .step-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

body.reference-page .step .n {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

body.reference-page .mcp-access-session-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
  color: var(--muted);
}

body.reference-page .mcp-access-account-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: linear-gradient(135deg, var(--accent-subtle), color-mix(in srgb, var(--surface) 82%, var(--accent-subtle)));
  border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
}

body.reference-page .mcp-access-account-cta h3 {
  color: var(--accent);
  font-size: 17px;
  font-weight: 900;
}

body.reference-page .mcp-access-public-note,
body.reference-page .mcp-access-onboarding-hint {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 82%, var(--accent-subtle));
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
}

body.reference-page .code-block,
body.reference-page .mcp-access-template-code {
  min-height: 260px;
  max-height: 420px;
  background: color-mix(in srgb, #0b1113 88%, var(--accent));
  color: #edf8f7;
  border-color: color-mix(in srgb, var(--accent) 18%, #1d262b);
  border-radius: 12px;
}

body.reference-page .ticket-system-layout {
  align-items: start;
}

body.reference-page .ticket-result:not(:empty),
body.reference-page .reference-ticket-result:not(:empty) {
  margin-top: 16px;
  padding: 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 82%, var(--accent-subtle));
  border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border));
}

body.reference-page .list-row,
body.reference-page .my-ticket-list > * {
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, var(--accent-subtle));
  background: var(--surface);
}

body.reference-page .reference-form {
  display: block;
}

body.reference-page .reference-form .field,
body.reference-page .reference-form label,
body.reference-page .reference-form fieldset {
  margin-bottom: 14px;
}

body.reference-page .input,
body.reference-page .textarea,
body.reference-page .reference-form input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
body.reference-page .reference-form textarea {
  border-color: color-mix(in srgb, var(--border) 80%, var(--accent-subtle));
  background: color-mix(in srgb, var(--surface) 98%, var(--accent-subtle));
}

body.reference-page .input:focus,
body.reference-page .textarea:focus,
body.reference-page .reference-form input:focus,
body.reference-page .reference-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-subtle) 68%, transparent);
}

body.reference-page .choice-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.reference-page .choice,
body.reference-page .feedback-category-grid label {
  min-height: 42px;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}

body.reference-page .choice:hover,
body.reference-page .feedback-category-grid label:hover {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  background: color-mix(in srgb, var(--accent-subtle) 34%, var(--surface));
}

body.reference-page .choice:has(input:checked) {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
  background: var(--accent-subtle);
}

body.reference-page .file-drop,
body.reference-page .portal-file-dropzone {
  border: 1.5px dashed color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent-subtle) 26%, var(--surface));
}

body.reference-page .updates-main {
  width: min(1120px, calc(100% - 40px));
}

body.reference-page .updates-title-block {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

body.reference-page .ann-filter,
body.reference-page .updates-filter-row {
  margin: 0 0 16px;
}

body.reference-page .ann-fbtn,
body.reference-page .updates-filter-button {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 94%, var(--accent-subtle));
}

body.reference-page .updates-split-layout {
  grid-template-columns: minmax(0, 820px);
  gap: 20px;
  justify-content: start;
}

body.reference-page .updates-split-layout.has-selection {
  grid-template-columns: minmax(330px, .88fr) minmax(0, 1.22fr);
}

body.reference-page .updates-list-panel {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.reference-page .updates-list {
  gap: 12px;
}

body.reference-page .updates-list-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, var(--accent-subtle));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 1px 2px rgba(12, 14, 16, .04);
}

body.reference-page .updates-list-item.unread {
  box-shadow: inset 3px 0 0 var(--accent), 0 1px 2px rgba(12, 14, 16, .04);
}

body.reference-page .updates-list-item.active,
body.reference-page .updates-list-item:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: color-mix(in srgb, var(--accent-subtle) 36%, var(--surface));
}

body.reference-page .updates-detail-panel {
  display: none;
  position: sticky;
  top: 104px;
  max-height: calc(100vh - 124px);
  overflow: auto;
}

body.reference-page .updates-split-layout.has-selection .updates-detail-panel {
  display: grid;
}

body.reference-page .updates-detail-header h2 {
  font-weight: 900;
}

@media (max-width: 980px) {
  body.reference-page .float-nav,
  body.reference-page .portal-topbar {
    align-items: flex-start;
    flex-wrap: wrap;
    border-radius: 24px;
  }

  body.reference-page .portal-nav {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  body.reference-page .step-grid,
  body.reference-page .grid2,
  body.reference-page .updates-split-layout.has-selection,
  body.reference-page .updates-split-layout {
    grid-template-columns: 1fr;
  }

  body.reference-page .updates-detail-panel {
    position: static;
    max-height: none;
  }
}

@media (max-width: 720px) {
  body.reference-page .float-nav,
  body.reference-page .portal-topbar {
    top: 12px;
    width: min(100% - 24px, 640px);
    padding: 10px;
  }

  body.reference-page .reference-main,
  body.reference-page .portal-workspace-main,
  body.reference-page .reference-narrow,
  body.reference-page .narrow-workspace,
  body.reference-page .updates-main {
    width: min(100% - 28px, 640px);
  }

  body.reference-page .reference-hero h1,
  body.reference-page .portal-workspace-hero h1 {
    font-size: 40px;
  }

  body.reference-page .choice-grid,
  body.reference-page .field-row {
    grid-template-columns: 1fr;
  }

  body.reference-page .updates-title-block,
  body.reference-page .mcp-access-account-cta {
    display: grid;
  }

  body.reference-page .updates-detail-panel {
    grid-template-columns: 1fr;
  }

  body.reference-page .updates-detail-header,
  body.reference-page .updates-detail-body,
  body.reference-page .updates-detail-actions,
  body.reference-page .updates-detail-date {
    grid-column: 1;
  }
}

body.chat-page {
  color: var(--text);
  background: var(--skin-gradient);
}

body.chat-page .chat-hifi-shell {
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  height: auto;
  padding: 26px clamp(12px, 2vw, 24px) 22px clamp(8px, 1.2vw, 16px);
  background: transparent;
  border: 0;
  box-shadow: none;
  display: block;
  overflow-x: hidden;
}

.chat-floating-nav {
  position: sticky;
  top: 18px;
  z-index: 30;
  width: min(1080px, calc(100% - 48px));
  min-height: 58px;
  margin: 0 auto 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 9px 12px 9px 20px;
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow: var(--skin-shadow-panel);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
}

.chat-floating-brand {
  flex: 0 0 auto;
  min-width: 148px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-size: 16px;
  font-weight: 850;
}

body.chat-page .brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: var(--accent-text);
  background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 72%, var(--surface)));
  font-size: 12px;
  letter-spacing: 0;
}

.chat-floating-links {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.chat-floating-links::-webkit-scrollbar {
  display: none;
}

.chat-floating-links a {
  color: var(--text);
  text-decoration: none;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.chat-floating-links a.active {
  color: var(--accent);
  background: var(--accent-subtle);
}

.chat-floating-actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.chat-bell-button {
  position: relative;
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.chat-bell-button svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.chat-bell-button::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warning);
  border: 2px solid var(--surface);
}

.chat-version-pill,
.chat-user-pill {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 168px;
  padding: 0 12px;
  color: var(--muted);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-user-pill:empty,
.chat-version-pill:empty {
  display: none;
}

.chat-floating-actions #logout {
  min-height: 34px;
  padding: 0 13px;
  color: var(--accent);
  background: var(--accent-subtle);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 999px;
  font-weight: 800;
}

body.chat-page .agentx-skin-button {
  min-height: 34px;
}

body.chat-page .chat-hifi-grid {
  width: 100%;
  max-width: none;
  min-height: calc(100vh - 124px);
  height: auto;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: clamp(236px, 18vw, 320px) minmax(0, 1fr);
  gap: clamp(14px, 1.4vw, 24px);
  overflow: visible;
  transition: grid-template-columns 0.22s ease;
}

body.chat-page .chat-hifi-grid.sidebar-collapsed {
  grid-template-columns: 76px minmax(0, 1fr);
}

body.chat-page .chat-hifi-sessions {
  min-width: 0;
  height: calc(100vh - 124px);
  min-height: 560px;
  padding: 16px 12px;
  border: 1px solid var(--border);
  border-radius: var(--skin-radius);
  background: var(--surface-alt);
  box-shadow: var(--skin-shadow-panel);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.chat-session-head {
  margin-bottom: 14px;
}

.chat-session-head h1 {
  margin: 0;
  font-size: 15px;
  line-height: 1.2;
}

.chat-session-head #new-session {
  min-height: 31px;
  padding: 0 12px;
  color: #FFFFFF;
  background: var(--accent);
  border-color: var(--accent);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
}

.chat-session-search {
  min-height: 36px;
  margin-bottom: 18px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  background: var(--surface-alt);
  font-size: 13px;
  font-weight: 650;
}

.chat-session-search::before {
  content: "⌕";
  color: var(--muted);
}

body.chat-page .session-list {
  gap: 4px;
  padding-right: 2px;
}

body.chat-page .session-row {
  min-height: 40px;
  padding: 11px 12px;
  color: var(--text);
  background: transparent;
  border-color: transparent;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

body.chat-page .session-row.active {
  position: relative;
  padding-left: 26px;
  color: var(--accent);
  background: var(--accent-subtle);
  border-color: transparent;
}

body.chat-page .session-row.active::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
}

body.chat-page .chat-hifi-grid.sidebar-collapsed .chat-hifi-sessions {
  justify-items: center;
  padding: 16px 10px;
}

body.chat-page .chat-hifi-grid.sidebar-collapsed .chat-session-head {
  width: 100%;
  justify-content: center;
}

body.chat-page .chat-hifi-grid.sidebar-collapsed .chat-session-head h1,
body.chat-page .chat-hifi-grid.sidebar-collapsed .chat-session-head #new-session,
body.chat-page .chat-hifi-grid.sidebar-collapsed .chat-session-search,
body.chat-page .chat-hifi-grid.sidebar-collapsed .session-list,
body.chat-page .chat-hifi-grid.sidebar-collapsed .sidebar-footer-stack {
  display: none;
}

body.chat-page .chat-hifi-workspace {
  min-width: 0;
  height: calc(100vh - 124px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--skin-radius);
  background: var(--surface);
  box-shadow: var(--skin-shadow-panel);
  overflow: hidden;
}

body.chat-page .session-meta {
  grid-row: 1;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-alt);
}

body.chat-page .conversation {
  grid-row: 2;
  min-height: 0;
  padding: 22px clamp(18px, 2vw, 34px) 16px;
  display: grid;
  align-content: start;
  gap: 22px;
  overflow: auto;
}

body.chat-page .message {
  max-width: min(920px, 92%);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  line-height: 1.55;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}

body.chat-page .message.user {
  justify-self: end;
  align-items: flex-end;
  max-width: min(720px, 74%);
  background: transparent;
  border: 0;
  box-shadow: none;
}

body.chat-page .message.assistant {
  justify-self: start;
  align-items: flex-start;
  width: min(920px, 92%);
}

body.chat-page .message-bubble {
  max-width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  line-height: 1.55;
  box-shadow: 0 1px 0 rgba(23, 33, 31, 0.03);
}

body.chat-page .message.user .message-bubble {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 1px 2px rgba(23, 33, 31, 0.05);
  border-bottom-right-radius: 6px;
}

body.chat-page .message.user .message-bubble a {
  color: var(--accent);
  text-decoration: underline;
}

body.chat-page .message.user .message-bubble code {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

body.chat-page .message.assistant .message-bubble {
  width: 100%;
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 1px 2px rgba(23, 33, 31, 0.05);
  border-bottom-left-radius: 6px;
}

body.chat-page .message-bubble.is-error {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

body.chat-page .message.assistant .message-bubble.is-error {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

body.chat-page .message.failed .message-bubble {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--danger) 30%, var(--border));
}

body.chat-page .message-error-card {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border));
  border-left: 3px solid var(--danger);
  border-radius: 12px;
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
  color: var(--text);
}

body.chat-page .message-error-card__title {
  font-size: 13px;
  font-weight: 750;
  color: var(--danger);
}

body.chat-page .message-error-card__body {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}

body.chat-page .message-error-card__actions {
  display: flex;
  gap: 8px;
}

body.chat-page .message-error-card__retry {
  min-height: 28px;
  padding: 0 12px;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border));
  border-radius: 7px;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}

body.chat-page .message-error-card__retry:hover {
  color: var(--accent-text);
  background: var(--danger);
  border-color: var(--danger);
}

body.chat-page .message-error-card__retry:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

body.chat-page .message-error-card__details {
  font-size: 12px;
  color: var(--muted);
}

body.chat-page .message-error-card__details summary {
  cursor: pointer;
  user-select: none;
}

body.chat-page .message-error-card__raw {
  margin: 8px 0 0;
  padding: 8px 10px;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--text);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
}

body.chat-page .message-citations {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--muted);
}

body.chat-page .message-citations-title {
  flex: 0 0 100%;
  color: var(--text);
  font-size: 12px;
}

body.chat-page .message-citations ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-left: 0;
  list-style: none;
}

body.chat-page .message-citations li {
  min-height: 24px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-alt);
  font-size: 12px;
  font-weight: 750;
}

body.chat-page .message-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

body.chat-page .message.user .message-actions {
  justify-content: flex-end;
  background: transparent;
  border: 0;
  box-shadow: none;
}

body.chat-page .message.assistant .message-actions {
  justify-content: flex-start;
}

body.chat-page .message-action-button,
body.chat-page .message-feedback-compact button {
  min-height: 28px;
  padding: 0 10px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
}

body.chat-page .message-icon-button {
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}

body.chat-page .message-icon-button svg {
  display: block;
  width: 16px;
  height: 16px;
}

body.chat-page .message-icon-button:hover {
  color: var(--accent);
  background: var(--accent-subtle);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

body.chat-page .message-icon-button.active,
body.chat-page .message-icon-button.copied {
  color: var(--accent-text);
  background: var(--accent);
  border-color: var(--accent);
}

body.chat-page .message-icon-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px;
}

body.chat-page .message-feedback {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body.chat-page .message-feedback-thumb.dim {
  opacity: 0.4;
}

body.chat-page .message-feedback-thumb[aria-pressed="true"] {
  color: var(--accent-text);
  background: var(--accent);
  border-color: var(--accent);
}

body.chat-page .message-feedback-popover {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 30;
  min-width: 240px;
  max-width: min(320px, 80vw);
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.chat-page .message-feedback-arrow {
  position: absolute;
  top: -6px;
  left: 18px;
  width: 12px;
  height: 12px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: rotate(45deg);
}

body.chat-page .message-feedback-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body.chat-page .feedback-chip {
  padding: 4px 10px;
  font-size: 12px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}

body.chat-page .feedback-chip:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

body.chat-page .feedback-chip.sel {
  color: var(--accent-text);
  background: var(--accent);
  border-color: var(--accent);
}

body.chat-page .message-feedback-note-toggle {
  align-self: flex-start;
  padding: 2px 0;
  font-size: 12px;
  color: var(--accent);
  background: transparent;
  border: 0;
  cursor: pointer;
}

body.chat-page .message-feedback-note-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.chat-page .message-feedback-note {
  width: 100%;
  resize: vertical;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
}

body.chat-page .message-feedback-note-submit {
  align-self: flex-end;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--accent-text);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  cursor: pointer;
}

.chat-hifi-composer-wrap {
  grid-row: 3;
  padding: 12px 18px 16px;
  background: transparent;
  border-top: 0;
}

.composer-floatbar {
  position: relative;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.chat-chip-pill {
  position: relative;
  z-index: 2;
  width: fit-content;
  min-height: 34px;
  margin: 0;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(23, 33, 31, 0.06);
  font-size: 13px;
  font-weight: 850;
}

.chat-chip-pill select {
  width: auto;
  min-width: 120px;
  max-width: min(260px, 44vw);
  min-height: 28px;
  padding: 3px 8px;
  color: var(--accent);
  background: transparent;
  border: 0;
  font-weight: 800;
}

body.chat-page .chat-hifi-composer {
  min-height: 102px;
  padding: 15px 16px 14px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 14px 36px rgba(23, 33, 31, 0.09);
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) minmax(138px, 168px) 46px;
  grid-template-rows: minmax(44px, auto) auto;
  column-gap: 12px;
  row-gap: 4px;
  align-items: center;
}

body.chat-page .chat-hifi-image-upload {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: start;
  width: 40px;
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: var(--accent-subtle);
  cursor: pointer;
  font-size: 0;
}

body.chat-page .chat-hifi-image-upload svg {
  display: block;
  width: 18px;
  height: 18px;
  color: var(--accent);
}

body.chat-page .chat-hifi-image-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

body.chat-page .chat-hifi-image-upload.disabled {
  opacity: 0.58;
}

body.chat-page .chat-hifi-composer textarea {
  grid-column: 2 / 4;
  grid-row: 1;
  min-width: 0;
  min-height: 44px;
  max-height: 132px;
  padding: 9px 0;
  color: var(--text);
  background: transparent;
  border: 0;
  resize: vertical;
  font-size: 15px;
  line-height: 1.35;
}

body.chat-page .chat-hifi-composer textarea:focus {
  outline: 0;
  box-shadow: none;
}

body.chat-page .chat-hifi-send {
  grid-column: 4;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--accent-text);
  background: var(--accent);
  box-shadow: 0 9px 20px color-mix(in srgb, var(--accent) 25%, transparent);
  line-height: 0;
}

body.chat-page .chat-hifi-send svg {
  width: 20px;
  height: 20px;
  display: block;
  stroke: currentColor;
}

body.chat-page .chat-hifi-modes {
  min-width: max-content;
  height: auto;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 3px;
  background: var(--surface-alt);
}

body.chat-page .chat-hifi-modes .chat-mode-segment {
  min-height: 23px;
  min-width: 45px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

body.chat-page .chat-hifi-modes .chat-mode-segment.selected {
  color: var(--accent-text);
  background: var(--accent);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--accent) 22%, transparent);
}

body.chat-page .chat-hifi-modes .chat-mode-segment.locked,
body.chat-page .chat-hifi-modes .chat-mode-segment.disabled {
  cursor: not-allowed;
}

body.chat-page .composer-floatbar:has(.chat-mode-segment.locked) .chat-hifi-modes {
  opacity: 0.5;
  pointer-events: none;
}

body.chat-page .chat-hifi-modes .chat-mode-segment input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* 检索模式分段文字跟随查询范围（.chat-scope-mode）配色：
   文字包在 .chat-mode-title 内，而全局 .chat-mode-title{color:var(--text)} 会覆盖
   分段颜色——这里让其继承分段（未选=var(--muted)，选中=var(--accent-text)），
   保证 notion/cal 等深色 accent 皮肤下选中文字与查询范围一致、不再深字压深底。 */
body.chat-page .chat-hifi-modes .chat-mode-segment .chat-mode-title {
  color: inherit;
}

/* ── Scope selector（展开态三步：查询范围 → 内容 → 查询模式）─────────────
   皮肤可切换硬约束：以下所有控件一律用 var(--*) token + color-mix(var(--accent)…)
   着色，绝不硬编码颜色值；跟随 agentx-webui 皮肤切换与暗色模式自动变色。 */
.chat-scope-selector {
  --scope-anim: 0.22s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-bottom: 8px;
  transition: opacity var(--scope-anim), transform var(--scope-anim);
}

.chat-scope-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 520px;
  opacity: 1;
  overflow: visible;
  transition: max-height var(--scope-anim), opacity var(--scope-anim),
    margin var(--scope-anim);
}

.chat-scope-selector.collapsed .chat-scope-steps {
  max-height: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

.chat-scope-pillbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--scope-anim), transform var(--scope-anim);
}

.chat-scope-pill-chip {
  gap: 6px;
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  color: var(--accent);
  cursor: pointer;
  transition: background var(--scope-anim), color var(--scope-anim), border-color var(--scope-anim);
}

.chat-scope-pill-chip:hover {
  background: var(--accent-subtle);
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
}

.chat-scope-pill-key {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.chat-scope-pill-value {
  max-width: min(180px, 40vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--accent);
  font-weight: 850;
}

.chat-scope-pill-arrow {
  color: var(--accent);
  font-size: 13px;
  line-height: 1;
  transform: translateY(-1px);
}

.chat-scope-selector.scope-locked .chat-scope-pill-chip {
  opacity: 0.5;
  pointer-events: none;
}

.chat-scope-selector.scope-locked .chat-scope-modes,
.chat-scope-selector.scope-locked .chat-scope-content {
  opacity: 0.6;
  pointer-events: none;
}

.chat-scope-step {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.chat-scope-step-label {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.chat-scope-modes {
  min-width: max-content;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--surface-alt);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.chat-scope-modes .chat-scope-mode {
  min-height: 24px;
  min-width: 56px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.chat-scope-modes .chat-scope-mode.selected {
  color: var(--accent-text);
  background: var(--accent);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--accent) 22%, transparent);
}

.chat-scope-modes .chat-scope-mode input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.chat-scope-content {
  position: relative;
  flex: 1 1 min(540px, 100%);
  min-width: 0;
  width: 100%;
  max-height: 320px;
  overflow: visible;
  transition: max-height 0.2s ease, opacity 0.2s ease;
}

.chat-scope-content.is-global {
  max-height: none;
}

.chat-scope-content-trigger {
  width: 100%;
  min-height: 44px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--text) 6%, transparent);
  cursor: pointer;
  transition: border-color var(--scope-anim), box-shadow var(--scope-anim), background var(--scope-anim);
}

.chat-scope-content-trigger:hover,
.chat-scope-content.is-open .chat-scope-content-trigger {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 13%, transparent);
}

.chat-scope-selected-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.chat-scope-selected-tag,
.chat-scope-add-tag,
.chat-scope-candidate-pill {
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  background: var(--accent-subtle);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
  transition: background var(--scope-anim), color var(--scope-anim), border-color var(--scope-anim),
    transform var(--scope-anim);
}

.chat-scope-add-tag {
  border-style: dashed;
  background: var(--surface);
}

.chat-scope-dropdown {
  position: absolute;
  z-index: 30;
  top: auto;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: min(340px, 46vh);
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--text) 13%, transparent);
  overflow-x: hidden;
  overflow-y: auto;
}

/* 入场动画只在「打开」那一刻播放（chat.js 加 .is-entering）；
   面板内重渲染（选中分组/芯片、改筛选、输入搜索）不重放动画，消除闪烁。 */
.chat-scope-dropdown.is-entering {
  animation: scope-dropdown-in var(--scope-anim);
}

@keyframes scope-dropdown-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-scope-global-hint {
  margin: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 14px;
  display: flex;
  align-items: center;
  color: var(--accent);
  background: var(--accent-subtle);
  font-size: 13px;
  font-weight: 800;
}

.chat-scope-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.chat-scope-filter-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.chat-scope-filter-select {
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  background: var(--surface-alt);
  font-size: 12px;
  font-weight: 800;
}

.chat-scope-search {
  width: 100%;
  min-height: 32px;
  margin-bottom: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  background: var(--surface-alt);
  font-size: 13px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.chat-scope-search:focus,
.chat-scope-filter-select:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.chat-scope-candidate-list,
.chat-scope-group-list {
  max-height: 190px;
  padding-right: 4px;
  overflow: auto;
}

.chat-scope-group-title {
  margin: 8px 4px 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.chat-scope-group-title:first-child {
  margin-top: 2px;
}

.chat-scope-chip-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 0 4px;
}

.chat-scope-candidate-pill {
  min-height: 30px;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
}

.chat-scope-candidate-pill:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  color: var(--accent);
  transform: translateY(-1px);
}

.chat-scope-candidate-pill.selected {
  color: var(--accent-text);
  background: var(--accent);
  border-color: var(--accent);
}

.chat-scope-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text);
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.chat-scope-option:hover {
  background: var(--accent-subtle);
}

.chat-scope-option.selected {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 800;
}

.chat-scope-option input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

.chat-scope-option-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-scope-count {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-alt);
  font-size: 11px;
  font-weight: 800;
}

.chat-scope-badge {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 999px;
  color: var(--accent);
  background: var(--accent-subtle);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.chat-scope-summary,
.chat-scope-list-footer {
  margin: 8px 4px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.chat-scope-empty {
  padding: 10px 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

body.chat-page .chat-hifi-composer .error-line {
  grid-column: 1 / -1;
  margin: 2px 0 0;
}

@media (max-width: 860px) {
  body.chat-page .chat-hifi-shell {
    padding: 14px 12px 16px;
  }

  .chat-floating-nav {
    width: 100%;
    top: 10px;
    min-height: 52px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 22px;
    flex-wrap: wrap;
  }

  .chat-floating-brand {
    min-width: 0;
  }

  .chat-floating-links {
    order: 3;
    flex: 0 0 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .chat-floating-links a {
    padding: 8px 12px;
    font-size: 13px;
  }

  .chat-floating-actions {
    flex: 1 1 100%;
    justify-content: flex-start;
    margin-left: 0;
    overflow-x: auto;
  }

  .chat-version-pill {
    display: none;
  }

  body.chat-page .chat-hifi-grid,
  body.chat-page .chat-hifi-grid.sidebar-collapsed {
    width: 100%;
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
  }

  body.chat-page .chat-hifi-sessions {
    display: none;
  }

  body.chat-page .chat-hifi-workspace {
    height: calc(100vh - 130px);
  }

  body.chat-page .conversation {
    min-height: 0;
    padding-top: 8px;
  }

  body.chat-page .message.assistant {
    margin-left: 0;
    width: 100%;
  }

  body.chat-page .chat-hifi-composer {
    min-height: 128px;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    grid-template-rows: minmax(42px, auto) 28px auto auto;
    padding: 13px;
    border-radius: 20px;
  }

  body.chat-page .chat-hifi-image-upload {
    width: 38px;
    height: 38px;
  }

  body.chat-page .chat-hifi-composer textarea {
    grid-column: 2 / 3;
    min-height: 42px;
    padding: 7px 0;
  }

  body.chat-page .chat-hifi-send {
    grid-column: 3;
    width: 40px;
    height: 40px;
    min-height: 40px;
  }

  body.chat-page .chat-hifi-modes {
    min-width: 0;
    max-width: 100%;
  }

  body.chat-page .chat-hifi-modes .chat-mode-segment {
    min-width: 42px;
    padding: 0 9px;
  }

}

/* ===== Portal 用户名下拉菜单（V2.1 全站统一用户区） ===== */
.portal-user-menu {
  position: relative;
  display: inline-flex;
}

.portal-user-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 3px 12px 3px 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color 140ms ease, background 140ms ease;
}

.portal-user-trigger:hover {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.portal-user-avatar {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-subtle);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.portal-user-trigger .portal-user-caret {
  font-size: 10px;
  line-height: 1;
  color: var(--muted);
}

.portal-user-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  min-width: 172px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 12px 34px rgba(21, 24, 28, 0.14);
  overflow: hidden;
  display: none;
}

.portal-user-menu.open .portal-user-dropdown,
.portal-user-dropdown.is-floating {
  display: block;
}

/* 下拉被移到 <body> 下浮动时，确保层级高于胶囊/顶栏与页面内容。 */
.portal-user-dropdown.is-floating {
  z-index: 1000;
}

.portal-user-dropdown a,
.portal-user-dropdown button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 0;
  padding: 10px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.portal-user-dropdown a:hover,
.portal-user-dropdown button:hover {
  background: var(--accent-subtle);
}

.portal-user-dropdown .portal-user-separator {
  height: 1px;
  background: var(--border);
}

.portal-user-dropdown .portal-user-logout {
  color: var(--danger);
}

/* ===== Account 工作台壳层（V2.1 满屏改版） ===== */
.account-workbench {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 0;
}

.account-sidenav {
  position: sticky;
  top: 90px;
  align-self: start;
  max-height: calc(100vh - 104px);
  overflow-x: hidden;
  overflow-y: auto;
  margin: 14px 4px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 0;
  border-radius: var(--account-inset-radius);
  background: transparent;
  box-shadow: none;
}

.account-sidenav-head {
  padding: 4px 10px 10px;
}

.account-sidenav-kicker {
  display: block;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.account-sidenav-link {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 11px;
  border: 0;
  border-radius: var(--account-control-radius);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.account-sidenav-text {
  transition: opacity 120ms ease;
}

.account-sidenav-icon {
  flex: 0 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.account-sidenav-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.account-sidenav-link:hover {
  background: var(--accent-subtle);
  color: var(--text);
}

.account-sidenav-link.active {
  background: var(--accent-subtle);
  color: var(--accent);
  font-weight: 700;
}

.account-main {
  min-width: 0;
  max-width: 1440px;
  padding: 22px 28px 60px;
}

.account-shell {
  --account-inset-radius: calc(var(--skin-radius) / 2);
  --account-control-radius: calc(var(--skin-radius) / 2.2);
}

.account-shell .status-badge.error,
.account-shell .status-badge.error-line {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--danger) 32%, var(--border));
}

.account-view-panel[hidden] {
  display: none;
}

.account-view-panel {
  min-width: 0;
}

.account-view-panel > h2 {
  margin: 0 0 14px;
  color: var(--text);
}

.account-overview-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}

.account-overview-card {
  min-width: 0;
  padding: 20px;
  border-radius: var(--skin-radius);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border));
  box-shadow: var(--skin-shadow-panel);
}

.account-overview-hero,
.account-overview-settings {
  grid-column: 1 / -1;
}

.account-overview-access,
.account-overview-credits {
  grid-column: span 7;
}

.account-overview-keys,
.account-overview-placeholder {
  grid-column: span 5;
}

.account-card-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.account-card-heading h2 {
  min-width: 0;
  flex: 1;
  margin: 0;
  color: var(--text);
  font-size: 18px;
}

.account-card-heading > span:first-child {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.account-card-heading button {
  min-height: 0;
  padding: 0;
  border: 0;
  color: var(--accent);
  background: transparent;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.account-overview-hero-body {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  align-items: center;
  gap: 18px;
}

.account-overview-status,
.account-overview-metrics,
.account-card-actions,
.account-settings-grid {
  display: flex;
  align-items: center;
  gap: 12px;
}

.account-overview-status {
  display: grid;
  gap: 3px;
  padding: 14px;
  border-radius: var(--account-inset-radius);
  background: var(--accent-subtle);
}

.account-overview-status strong {
  color: var(--text);
}

.account-overview-status span,
.account-overview-summary,
.account-overview-credit-balance span {
  color: var(--muted);
}

.account-overview-summary {
  margin: 14px 0;
  font-weight: 700;
}

.account-overview-metrics {
  justify-content: flex-end;
}

.account-overview-metrics > div {
  min-width: 92px;
  text-align: center;
}

.account-overview-metrics strong,
.account-overview-metrics span,
.account-overview-credit-balance strong,
.account-overview-credit-balance span,
.account-settings-grid strong,
.account-settings-grid span {
  display: block;
}

.account-overview-metrics strong,
.account-overview-credit-balance strong {
  color: var(--text);
  font-size: 22px;
}

.account-overview-metrics span,
.account-overview-credit-balance span,
.account-settings-grid span {
  color: var(--muted);
  font-size: 12px;
}

.account-card-actions {
  justify-content: flex-end;
}

.account-key-preview,
.account-credit-recent {
  display: grid;
  gap: 10px;
}

.account-key-preview-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.account-key-preview-row:last-child {
  border-bottom: 0;
}

.account-key-preview-row code {
  min-width: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.account-key-preview-row span {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
}

.account-overview-credit-balance {
  margin-bottom: 12px;
}

.account-credit-recent strong,
.account-credit-recent span {
  display: block;
}

.account-credit-recent span,
.account-planning-placeholder p {
  color: var(--muted);
}

.account-planning-placeholder {
  min-height: 120px;
  display: grid;
  align-content: center;
  padding: 14px;
  border-radius: var(--account-inset-radius);
  background: var(--surface-alt);
}

.account-planning-placeholder p {
  margin: 4px 0 0;
}

.account-settings-grid > button {
  min-width: 0;
  flex: 1;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--account-inset-radius);
  color: var(--text);
  background: var(--surface-alt);
  text-align: left;
  cursor: pointer;
}

.account-settings-grid span {
  margin-top: 4px;
}

.account-access-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
  margin-bottom: 12px;
}

.account-access-grid + .panel {
  margin-bottom: 12px;
}

.account-keys-panel,
.account-preferences-panel {
  display: grid;
  gap: 14px;
}

.account-sidenav-group-label {
  margin: 16px 10px 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.account-sidenav-tabs {
  display: grid;
  gap: 4px;
}

.account-sidenav-help {
  margin-top: auto;
  padding: 12px;
  border-radius: var(--account-inset-radius);
  color: var(--muted);
  background: var(--surface-alt);
  font-size: 12px;
}

.account-sidenav-help strong,
.account-sidenav-help a {
  display: block;
}

.account-pagehead-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.account-form-cols .account-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.account-form-cols .account-form .account-form-actions,
.account-form-cols .account-form .account-form-span {
  grid-column: 1 / -1;
}

@media (max-width: 1099px) {
  .account-overview-access,
  .account-overview-keys,
  .account-overview-credits,
  .account-overview-placeholder {
    grid-column: span 6;
  }

  .account-access-grid {
    grid-template-columns: 1fr;
  }

  .account-overview-hero-body {
    grid-template-columns: 1fr auto;
  }

  .account-card-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  .account-workbench {
    width: min(100% - 28px, 640px);
    grid-template-columns: 1fr;
  }

  .account-sidenav {
    position: static;
    height: auto;
    max-height: none;
    overflow-y: visible;
    overflow-x: auto;
    flex-direction: row;
    margin: 14px;
  }

  .account-form-cols .account-form,
  .account-metric-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 719px) {
  .account-sidenav {
    position: static;
    min-height: auto;
    max-height: none;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: visible;
  }

  .account-sidenav-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .account-sidenav-link {
    justify-content: center;
    text-align: center;
  }

  .account-main {
    padding-inline: 14px;
  }

  .account-overview-grid {
    grid-template-columns: 1fr;
  }

  .account-overview-hero,
  .account-overview-access,
  .account-overview-keys,
  .account-overview-credits,
  .account-overview-placeholder,
  .account-overview-settings {
    grid-column: 1;
  }

  .account-overview-hero-body {
    grid-template-columns: 1fr;
  }

  .account-overview-metrics,
  .account-settings-grid {
    align-items: stretch;
    flex-direction: column;
  }

  .account-overview-metrics > div,
  .account-settings-grid > button {
    width: 100%;
  }

  .account-card-actions {
    grid-column: auto;
    flex-wrap: wrap;
  }
}

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

/* ===== 2.1.15 UI Kit：toast / modal / chip 输入 / 用户表格 / 详情标签页 ===== */

.agentx-toast-host {
  position: fixed;
  top: 64px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1300;
  pointer-events: none;
}

.agentx-toast {
  pointer-events: auto;
  min-width: 240px;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  cursor: pointer;
}

.agentx-toast.show {
  opacity: 1;
  transform: translateX(0);
}

.agentx-toast-success { border-left-color: var(--success); }
.agentx-toast-error { border-left-color: var(--danger); }

.agentx-toast strong {
  font-size: 13px;
  color: var(--text);
}

.agentx-toast-detail {
  font-size: 12px;
  color: var(--muted);
}

.agentx-modal-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--text) 42%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: 24px;
}

.agentx-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.24);
  width: min(440px, 100%);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.agentx-modal h3 {
  margin: 0;
  font-size: 16px;
  color: var(--text);
}

.agentx-modal-body {
  font-size: 13px;
  color: var(--muted);
}

.agentx-modal label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

.agentx-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.agentx-chip-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  position: relative;
}

.agentx-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 10px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
}

.agentx-chip > span {
  white-space: nowrap;
}

.agentx-chip button {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  transition: background 120ms ease, color 120ms ease;
}

.agentx-chip button:hover {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--danger);
}

.agentx-chip button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  color: var(--danger);
}

.agentx-chip-field input {
  flex: 1;
  min-width: 120px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.agentx-chip-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
  z-index: 40;
  max-height: 180px;
  overflow-y: auto;
}

.agentx-chip-suggest button {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
}

.agentx-chip-suggest button:hover,
.agentx-chip-suggest button.active {
  background: var(--accent-subtle);
  color: var(--accent);
}

/* account：紧凑页头 / 表单分组 / 账本表格 */

.account-pagehead {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.account-pagehead h1 {
  margin: 0;
  font-size: 20px;
}

.account-pagehead-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.account-form-group-title {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 900;
  color: var(--muted);
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
}

.account-ledger-scroll {
  width: 100%;
  overflow-x: auto;
}

.account-ledger-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.account-ledger-table th,
.account-ledger-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}

.account-ledger-table th {
  color: var(--muted);
  font-weight: 500;
  font-size: 12px;
}

.ledger-status {
  display: inline-flex;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--border);
  color: var(--muted);
  background: var(--card-inset-bg);
}

.ledger-status[data-status="committed"],
.ledger-status[data-status="success"],
.ledger-status[data-status="charged"] {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 40%, var(--border));
  background: color-mix(in srgb, var(--success) 12%, var(--surface));
}

.ledger-status[data-status="failed"],
.ledger-status[data-status="rejected"],
.ledger-status[data-status="failure"] {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
}

.ledger-status[data-status="free"] {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

/* admin 用户分区：工具条 / 筛选条 / 表格 / 标签页 */

/* E2：搜索框 + 创建按钮已并入下方 .admin-filterbar 单行筛选条（原型布局），
   .user-toolbar 仅保留空壳兼容既有测试契约，不再承载可见内容。 */
.user-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.user-toolbar:empty {
  display: none;
}

.user-toolbar input[type="search"] {
  flex: 1;
  min-width: 180px;
}

/* .user-filter-bar 的单行布局已并入共享 .admin-filterbar 规则（见前文 E2 注释），
   这里只保留类名以兼容既有测试契约，不再重复/覆盖布局属性。 */
.user-filter-bar label.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.user-rail-head {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 0;
}

.user-rail-head .t {
  color: var(--admin-muted-foreground);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.admin-rail-back {
  min-height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 650;
}

/* C6：去 table-layout:fixed + 省略号截断，改内容驱动列宽 + 横向滚动；对齐原型 .tbl-wrap/.tbl，
   保证 1440px 下用户名/公司等长文本不截断。 */
.user-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.user-table th {
  text-align: left;
  padding: 6px 8px;
  color: var(--admin-muted-foreground);
  font-weight: 500;
  font-size: 12px;
  border-bottom: 1px solid var(--admin-border);
  white-space: nowrap;
}

.user-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--admin-border);
  white-space: nowrap;
}

.user-table tbody tr {
  cursor: pointer;
}

.user-table tbody tr:hover {
  background: var(--admin-muted);
}

.user-table tbody tr[aria-selected="true"] {
  background: var(--admin-muted);
}

/* border-collapse 表格里 <tr> 的 box-shadow 多数浏览器不渲染，
   选中态左侧强调条改挂在首个单元格上以保证可见。 */
.user-table tbody tr[aria-selected="true"] td:first-child {
  box-shadow: inset 2px 0 0 var(--admin-primary);
}

.resource-required-grants {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  font-size: 11px;
  color: var(--admin-muted-foreground);
}

.resource-required-grants-key {
  padding: 1px 5px;
  border-radius: 4px;
  background: color-mix(in oklch, var(--admin-accent) 10%, transparent);
  color: var(--admin-accent);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.02em;
}

.resource-grants-cell {
  max-width: 280px;
  white-space: normal;
}

.resource-grants-cell .muted {
  color: var(--admin-muted);
}

.admin-master-detail.detail-open .user-list-panel {
  grid-template-rows: auto minmax(0, 1fr);
  padding: 12px;
}

.admin-master-detail.detail-open .user-rail-head {
  display: flex;
}

.user-rail-list {
  display: none;
}

.admin-master-detail.detail-open .user-rail-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  overflow-y: auto;
}

.user-table .user-compact-cell {
  padding: 6px;
  white-space: normal;
  border-bottom: 0;
}

.user-compact-item {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  color: var(--admin-foreground);
  background: transparent;
  border: 0;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
}

.user-compact-item:hover,
.user-compact-item.selected,
.user-compact-item[aria-selected="true"] {
  background: var(--admin-muted);
}

.user-compact-avatar {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 7px;
  color: var(--admin-foreground);
  background: var(--admin-secondary);
  border: 1px solid var(--admin-border);
  font-size: 12px;
  font-weight: 700;
}

.user-compact-item.selected .user-compact-avatar,
.user-compact-item[aria-selected="true"] .user-compact-avatar {
  color: var(--admin-primary-foreground);
  background: var(--admin-primary);
  border-color: transparent;
}

.user-compact-main {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.user-compact-name {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
}

.user-compact-meta {
  color: var(--admin-muted-foreground);
  font-size: 11px;
  line-height: 1.25;
}

.user-table .empty-state {
  cursor: default;
}

#user-tabpanel-profile {
  display: grid;
  gap: 12px;
}

#user-tabpanel-profile[hidden] {
  display: none;
}

#selected-user-role-form,
#selected-user-profile-form {
  grid-template-columns: 140px minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 10px;
  align-items: center;
}

#selected-user-role-form {
  grid-template-columns: 140px minmax(0, 1fr) auto;
}

#selected-user-role-form label,
#selected-user-profile-form label {
  color: var(--admin-muted-foreground);
  font-size: 13px;
  font-weight: 650;
}

#selected-user-role-form select,
#selected-user-profile-form input,
#selected-user-profile-form select {
  width: 100%;
}

#selected-user-role-save {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  box-shadow: none;
}

#selected-user-profile-form .user-profile-actions {
  grid-column: 2;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--admin-border);
}

#selected-user-profile-form .user-profile-actions button {
  width: auto;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 8px;
}

.admin-user-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin: 12px 0;
  flex-wrap: wrap;
}

.admin-user-tabs [role="tab"] {
  border: none;
  background: none;
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.admin-user-tabs [role="tab"][aria-selected="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.admin-user-tabpanel {
  display: block;
}