/*
 * ITSM 仍由 Django 渲染的业务页面样式。
 * 下方保留原有页面规则和变量作为兼容基线；导航、品牌、基础字号与按钮
 * 由基础模板最后加载的 design-system.css 统一覆盖。改跨页面外观时先改共享文件。
 */
:root {
  color-scheme: light dark;
  --bg: light-dark(#f4f6fa, #0f1219);
  --surface: light-dark(#ffffff, #181d27);
  --surface-2: light-dark(#f8f9fc, #202632);
  --text: light-dark(#172033, #edf1f9);
  --muted: light-dark(#6b7487, #a8b0c1);
  --border: light-dark(#e0e5ed, #303746);
  --primary: #5b57df;
  --primary-hover: #4c48c8;
  --primary-soft: light-dark(#efefff, #2d2c50);
  --success: light-dark(#22623d, #91e5af);
  --success-bg: light-dark(#e5f6eb, #203b2d);
  --warning: light-dark(#8a5700, #ffd58a);
  --warning-bg: light-dark(#fff2d8, #44351e);
  --info: light-dark(#275f9f, #9dc9ff);
  --info-bg: light-dark(#e5f0ff, #23374e);
  --radius: 13px;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 14px; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin-top: 0; }
button { cursor: pointer; }

/* 页面骨架：顶部栏固定，左侧导航与右侧内容组成两栏布局。 */
.app-shell { min-height: 100vh; }
.topbar {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand, .top-actions, .user-chip { display: flex; align-items: center; gap: 10px; }
.brand-mark, .assistant-avatar, .space-icon {
  width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto;
  border-radius: 10px; color: #fff; background: linear-gradient(135deg, #655cff, #4a91ff);
  box-shadow: 0 7px 20px rgb(76 91 255 / 24%);
}
.brand strong, .brand small, .user-chip strong, .user-chip small, .assistant-head strong, .assistant-head small { display: block; }
.brand small, .user-chip small, .assistant-head small { color: var(--muted); font-size: 12px; margin-top: 2px; }
.role-switch { display: flex; gap: 2px; padding: 3px; background: var(--surface-2); border-radius: 9px; }
.role-switch button { border: 0; border-radius: 7px; padding: 7px 10px; background: transparent; color: var(--muted); }
.role-switch button[aria-pressed="true"] { background: light-dark(#fff, #394151); color: var(--text); box-shadow: 0 1px 5px rgb(20 30 60 / 14%); }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #5470e8; color: #fff; }
.user-chip strong { font-size: 13px; font-weight: 600; }

.app-layout { display: grid; grid-template-columns: 218px minmax(0, 1fr); min-height: calc(100vh - 70px); }
/* Match the Vue shell's fixed desktop navigation geometry during cross-page moves. */
.sidebar { position: sticky; top: 70px; height: calc(100vh - 70px); overflow-y: auto; padding: 20px 12px; background: var(--surface); border-right: 1px solid var(--border); }
.nav-group { margin-bottom: 24px; }
.nav-group p { margin: 0 0 8px; padding: 0 10px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.nav-group a { min-height: 40px; display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 10px; color: var(--muted); margin: 2px 0; }
.nav-group a:hover { background: var(--surface-2); color: var(--text); }
.nav-group a[aria-current="page"] { background: var(--primary-soft); color: light-dark(#4338ca, #d4d2ff); font-weight: 600; }
.nav-group a span { width: 17px; text-align: center; }
.nav-group a em { margin-left: auto; min-width: 21px; padding: 2px 6px; border-radius: 99px; background: light-dark(#e8ebf1, #323846); color: var(--muted); font-style: normal; font-size: 11px; text-align: center; }
.mobile-ops { display: none; }

.main-content { min-width: 0; padding: 27px; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.page-header h1 { font-size: 24px; line-height: 1.3; margin-bottom: 5px; }
.page-header p { margin: 0; color: var(--muted); }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* 可复用按钮、面板和状态标签，保证各业务页面视觉一致。 */
.button, .icon-button, .text-button {
  border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text);
}
.button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 13px; }
.button:hover { background: var(--surface-2); }
.button.primary { border-color: var(--primary); background: var(--primary); color: #fff; }
.button.primary:hover { background: var(--primary-hover); }
.button:disabled { opacity: .55; cursor: wait; }
.text-button { border-color: transparent; background: transparent; padding: 5px; color: light-dark(#4c46be, #c8c5ff); }
.icon-button { width: 38px; height: 38px; display: grid; place-items: center; font-size: 23px; }

.panel, .space-card, .table-wrap, .stats article {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 5px 18px light-dark(rgb(31 46 78 / 5%), rgb(0 0 0 / 16%));
}
.panel { overflow: hidden; }
.panel-header { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.panel-header h2 { margin: 0; font-size: 17px; }
.panel-header > small { color: var(--muted); }
.panel-body { padding: 16px; }
.two-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.top-gap { margin-top: 18px; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.stats article { padding: 16px; }
.stats small, .stats strong, .stats span { display: block; }
.stats small { color: var(--muted); }
.stats strong { margin: 8px 0 5px; font-size: 28px; line-height: 1; }
.stats span { color: var(--muted); font-size: 12px; }
.stats .positive { color: var(--success); }
.warning-text { color: var(--warning) !important; }

.list article, .source { padding: 13px 0; border-bottom: 1px solid var(--border); }
.list article:first-child, .source:first-child { padding-top: 2px; }
.list article:last-child, .source:last-child { border-bottom: 0; padding-bottom: 2px; }
.list article > div { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.list article > div:first-child { justify-content: flex-start; }
.list small, .source small { display: block; margin-top: 7px; color: var(--muted); }
.source strong { display: block; }

.badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; white-space: nowrap; font-size: 11px; }
.badge.success { color: var(--success); background: var(--success-bg); }
.badge.warning { color: var(--warning); background: var(--warning-bg); }
.badge.info { color: var(--info); background: var(--info-bg); }
.badge.neutral { color: var(--muted); background: var(--surface-2); }

/* 智能问答区域：主对话和右侧引用信息使用响应式两栏布局。 */
.qa-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, .75fr); gap: 18px; }
.chat-panel { min-height: 600px; display: flex; flex-direction: column; }
.assistant-head { justify-content: flex-start; }
.assistant-head small i { width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: #28a768; }
.messages { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 20px; background: light-dark(#fbfcfe, #151a23); }
.message { max-width: 88%; }
.message.user { align-self: flex-end; }
.bubble { padding: 12px 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-2); line-height: 1.65; overflow-wrap: anywhere; }
.message.user .bubble { background: var(--primary); color: #fff; border-color: var(--primary); border-bottom-right-radius: 4px; }
.message.ai .bubble { border-top-left-radius: 4px; }
.bubble p:last-child { margin-bottom: 0; }
.bubble ol { padding-left: 21px; margin: 8px 0; }
.citation-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.citation-list a { padding: 5px 8px; border-radius: 7px; color: light-dark(#4138b5, #d0cdff); background: var(--primary-soft); font-size: 12px; }
.answer-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.answer-actions button, .answer-actions a, .suggestions button { padding: 5px 9px; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); background: transparent; }
.answer-actions button:hover, .answer-actions a:hover, .suggestions button:hover { color: var(--text); background: var(--surface); }
.composer-wrap { padding: 14px; border-top: 1px solid var(--border); background: var(--surface); }
.composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
input, select, textarea { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--text); }
input:focus, select:focus, textarea:focus { outline: 2px solid rgb(91 87 223 / 28%); border-color: var(--primary); }
.suggestions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.suggestions button { border-color: transparent; border-radius: 999px; background: var(--surface-2); }
.qa-side { display: flex; flex-direction: column; gap: 16px; }
.boundary p { color: var(--muted); line-height: 1.6; }
.boundary-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 12px; }
.qa-demand-note { margin: 9px 0 0; font-size: 12px; }

/* 运营指标、知识空间和资产卡片。 */
.coverage > div { padding: 10px 0; }
.coverage p { display: flex; justify-content: space-between; margin-bottom: 8px; }
.coverage i { display: block; height: 9px; border-radius: 99px; overflow: hidden; background: var(--surface-2); }
.coverage b { display: block; height: 100%; border-radius: inherit; background: var(--primary); }

.space-card { padding: 18px; }
.space-card > header { display: flex; align-items: center; gap: 11px; }
.space-card h2 { margin: 0 0 5px; font-size: 17px; }
.space-card dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.space-card dt, .space-card dd { margin: 0; }
.space-card dt { color: var(--muted); font-size: 11px; }
.space-card dd { margin-top: 4px; overflow-wrap: anywhere; }
.space-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); }
.compact-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.compact-grid strong, .compact-grid small { display: block; }
.compact-grid small { margin-top: 4px; color: var(--muted); }

/* 数据列表在桌面端显示为表格，在窄屏下转换为键值卡片。 */
.toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(130px, 180px)); gap: 10px; margin-bottom: 14px; }
.table-wrap { overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 14px; text-align: left; vertical-align: middle; }
th { background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 600; }
td { border-top: 1px solid var(--border); }
td strong, td small { display: block; }
td small { margin-top: 3px; color: var(--muted); }
tbody tr:hover { background: light-dark(#fafbfe, #202630); }

/* 全站工单弹窗与非阻塞消息提示。 */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; background: rgb(8 12 20 / 60%); }
.modal[hidden] { display: none; }
.modal-dialog { width: min(620px, 100%); max-height: calc(100vh - 48px); overflow: auto; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 24px 60px rgb(0 0 0 / 30%); }
.modal-dialog > header { display: flex; justify-content: space-between; gap: 16px; }
.modal-dialog h2 { margin-bottom: 5px; }
.modal-dialog header p { color: var(--muted); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0 18px; }
.form-grid label { color: var(--muted); font-size: 12px; }
.form-grid input, .form-grid select, .form-grid textarea { margin-top: 6px; color: var(--text); font-size: 14px; }
.form-grid textarea { min-height: 100px; resize: vertical; }
.form-grid .full { grid-column: 1 / -1; }
.modal-dialog footer { display: flex; justify-content: flex-end; gap: 8px; }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 70; max-width: 360px; padding: 11px 14px; border-radius: 10px; background: light-dark(#252b3a, #f0f3f8); color: light-dark(#fff, #141820); box-shadow: 0 10px 30px rgb(0 0 0 / 20%); opacity: 0; transform: translateY(8px); pointer-events: none; transition: .2s ease; }
.toast.visible { opacity: 1; transform: translateY(0); }

/* 系统设置：左侧目录负责定位，右侧卡片承载五类配置。 */
.settings-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; }
.settings-index { position: sticky; top: 86px; }
.settings-index nav { display: grid; gap: 5px; }
.settings-index a { display: flex; align-items: center; gap: 10px; padding: 9px; border-radius: 9px; }
.settings-index a:hover { background: var(--surface-2); }
.settings-index a > span:first-child { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--primary); background: var(--primary-soft); }
.settings-index strong, .settings-index small { display: block; }
.settings-index small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.settings-content { display: grid; gap: 18px; min-width: 0; }
.settings-section { scroll-margin-top: 86px; }
.settings-section .panel-header > div small { display: block; margin-top: 4px; color: var(--muted); }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.settings-grid label { color: var(--muted); font-size: 12px; }
.settings-grid label > input:not([type="checkbox"]), .settings-grid label > select { margin-top: 7px; color: var(--text); font-size: 14px; }
.settings-grid label > small { display: block; margin-top: 6px; line-height: 1.5; }
.settings-grid .full { grid-column: 1 / -1; }
.switch-field { display: flex; align-items: center; gap: 11px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.switch-field input { width: 18px; min-height: 18px; flex: 0 0 auto; accent-color: var(--primary); }
.switch-field strong, .switch-field small { display: block; }
.switch-field strong { color: var(--text); font-size: 14px; }
.read-only-field { padding-top: 2px; }
.read-only-field small, .read-only-field strong { display: block; }
.read-only-field strong { margin-top: 10px; font-size: 14px; }
.settings-help { display: flex; align-items: center; min-height: 48px; padding: 11px 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; line-height: 1.5; }
.settings-footer-actions { justify-content: space-between; gap: 12px; }
.settings-footer-actions .button { flex: 0 0 auto; }
.status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.status-grid article, .integration-grid article { padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.status-grid small, .status-grid strong, .status-grid span { display: block; }
.status-grid strong { margin: 8px 0; font-size: 21px; }
.status-grid span:not(.badge) { color: var(--muted); font-size: 12px; }
.integration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.integration-grid article header { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.integration-grid article p { margin: 12px 0 7px; }
.integration-grid article small { color: var(--muted); line-height: 1.5; }
.settings-savebar { position: sticky; bottom: 14px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: 0 8px 28px rgb(0 0 0 / 14%); backdrop-filter: blur(12px); }
.settings-savebar span { color: var(--muted); font-size: 12px; }
.notice { margin-bottom: 16px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px; }
.success-notice { color: var(--success); background: var(--success-bg); }
.error-notice, .errorlist { color: #c33; }
.errorlist { margin: 6px 0 0; padding-left: 18px; font-size: 12px; }

/* 身份验证页面：减少无关导航，让登录与首次改密流程更聚焦。 */
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 28px 16px; background: radial-gradient(circle at 20% 0%, var(--primary-soft), transparent 38%), var(--bg); }
.auth-shell { width: min(460px, 100%); }
.auth-brand { width: max-content; margin: 0 auto 20px; }
.auth-card { padding: 28px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: 0 22px 55px light-dark(rgb(31 46 78 / 12%), rgb(0 0 0 / 28%)); }
.auth-card > header { margin-bottom: 22px; }
.auth-card h1 { margin: 7px 0; font-size: 27px; }
.auth-card header p { margin: 0; color: var(--muted); line-height: 1.65; }
.auth-eyebrow { color: var(--primary); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.feishu-button, .auth-submit { width: 100%; }
.auth-back { width: 100%; margin-top: 12px; }
.feishu-button { min-height: 44px; font-weight: 600; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--muted); font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--border); }
.auth-form { display: grid; gap: 15px; }
.auth-form label > span, .account-form label > span { display: block; margin-bottom: 7px; font-weight: 600; }
.auth-form input { min-height: 44px; }
.auth-tip { display: grid; gap: 4px; margin-top: 19px; padding: 12px; border-radius: 10px; color: var(--muted); background: var(--surface-2); font-size: 12px; line-height: 1.55; }
.auth-tip strong { color: var(--text); }
.auth-footer { margin: 17px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.field-help { color: var(--muted); font-size: 12px; line-height: 1.5; }
.field-help ul { margin: 6px 0 0; padding-left: 18px; }

/* 账号管理：创建入口与账号清单并排，临时密码使用醒目的单次展示卡。 */
.account-layout { display: grid; grid-template-columns: minmax(260px, .55fr) minmax(0, 1.45fr); gap: 18px; align-items: start; }
.account-layout-full { grid-template-columns: minmax(0, 1fr); }
.account-form { display: grid; gap: 14px; }
.account-form label { color: var(--muted); font-size: 12px; }
.account-form label input, .account-form label select { color: var(--text); font-size: 14px; }
.account-table .panel-header { background: var(--surface); }
.row-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.row-actions form { margin: 0; }
.credential-notice { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; color: var(--success); background: var(--success-bg); }
.credential-notice strong, .credential-notice span { display: block; }
.credential-notice span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.credential-notice code { flex: 0 0 auto; padding: 9px 12px; border: 1px dashed currentColor; border-radius: 8px; background: var(--surface); color: var(--text); font-size: 15px; }

/* 响应式断点：逐步收起两栏布局、表格和用户信息。 */
@media (max-width: 980px) {
  .qa-layout, .two-columns { grid-template-columns: 1fr; }
  .stats, .compact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-index { position: static; }
  .settings-index nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-layout { grid-template-columns: 1fr; }
}

/* 与 Vue 页面使用同一个 920px 断点和折叠菜单，跨页面切换不会改变导航结构。 */
@media (max-width: 919px) {
  .topbar { gap: 12px; padding: 10px 16px; }
  .app-layout { display: block; }
  .sidebar { position: relative; top: auto; height: auto; overflow: visible; padding: 8px 14px; border-right: 0; border-bottom: 1px solid var(--border); }
  .sidebar nav, .sidebar .nav-group { display: flex; align-items: center; gap: 4px; width: max-content; margin: 0; }
  .sidebar .nav-group p, .sidebar .nav-group-ops { display: none; }
  .sidebar .nav-group a { margin: 0; white-space: nowrap; font-weight: 600; }
  .mobile-ops { position: relative; display: block; min-width: 0; }
  .mobile-ops summary { display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 7px 12px; border-radius: 10px; color: var(--muted); font-weight: 600; list-style: none; cursor: pointer; white-space: nowrap; }
  .mobile-ops summary::-webkit-details-marker { display: none; }
  .mobile-ops summary span { color: var(--primary); font-size: 17px; }
  .mobile-ops[open] summary, .mobile-ops summary:hover { background: var(--primary-soft); color: var(--primary); }
  .mobile-ops-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: min(72vw, 230px); max-height: min(65vh, 460px); overflow-y: auto; padding: 7px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 14px 34px rgb(24 39 74 / 12%); }
  .mobile-ops-menu a { display: flex; align-items: center; gap: 9px; min-height: 39px; padding: 8px 9px; border-radius: 8px; font-size: 12px; }
  .mobile-ops-menu a:hover, .mobile-ops-menu a[aria-current="page"] { background: var(--primary-soft); color: var(--primary); }
  .mobile-ops-menu a span { width: 18px; color: var(--primary); text-align: center; }
}

@media (max-width: 760px) {
  .main-content { padding: 20px 14px; }
  .page-header { align-items: stretch; flex-direction: column; }
  .toolbar { grid-template-columns: 1fr; }
  table, thead, tbody, tr, th, td { display: block; }
  thead { display: none; }
  tr { padding: 10px 14px; border-top: 1px solid var(--border); }
  tr:first-child { border-top: 0; }
  td { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 8px; padding: 6px 0; border: 0; overflow-wrap: anywhere; }
  td::before { content: attr(data-label); color: var(--muted); font-size: 12px; }
  .message { max-width: 96%; }
  .settings-grid, .status-grid, .integration-grid { grid-template-columns: 1fr; }
  .settings-grid .full { grid-column: auto; }
}

@media (max-width: 559px) {
  .sidebar { padding: 7px 8px; }
  .sidebar nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; width: 100%; }
  .sidebar nav.has-ops { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sidebar .nav-group { display: contents; }
  .sidebar .nav-group-ops { display: none; }
  .sidebar .nav-group a { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; min-height: 48px; padding: 4px 2px; text-align: center; font-size: 11px; }
  .sidebar .nav-group a span { width: auto; font-size: 17px; }
  .mobile-ops summary { flex-direction: column; justify-content: center; gap: 1px; min-height: 48px; padding: 4px 2px; font-size: 11px; }
}

@media (max-width: 460px) {
  .brand small { display: none; }
  .top-actions { gap: 3px; }
  .role-switch button { padding-inline: 5px; font-size: 11px; }
  .user-chip { display: none; }
  .stats, .compact-grid, .form-grid, .space-card dl { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .message { max-width: 100%; }
  .messages { padding: 16px; }
  .composer .button { padding-inline: 11px; }
  .modal { padding: 12px; }
  .settings-index nav { grid-template-columns: 1fr; }
  .settings-savebar { align-items: stretch; flex-direction: column; }
  .auth-card { padding: 22px 18px; }
  .credential-notice { align-items: stretch; flex-direction: column; }
}