@yss123/cage-admin 0.1.0 → 0.3.0

package/ui/style.css

@@ -1,42 +1,1658 @@
+/* 系统管理页面样式：基础变量、应用壳、表单表格、授权编辑与 AI 配置区按既有层叠顺序组织。
+ * 页面状态由 TS 添加类名或属性，CSS 只负责显示、布局和响应式适配，不承载授权判断或业务状态转换。 */
+/* 管理工作台采用同一套色彩与间距。仅为桌面排版，不引入远程字体或 UI 运行时。 */
 :root {
-  --bg: #f6f7f9; --panel: #fff; --text: #1f2328; --muted: #656d76; --line: #d8dee4;
-  --accent: #1f6feb; --accent-text: #fff; --danger: #cf222e; --ok: #1a7f37; --warn: #9a6700;
-}
-@media (prefers-color-scheme: dark) {
-  :root { --bg: #0d1117; --panel: #161b22; --text: #e6edf3; --muted: #8d96a0; --line: #30363d; --accent: #2f81f7; --danger: #f85149; --ok: #3fb950; --warn: #d29922; }
-}
-* { box-sizing: border-box; }
-body { margin: 0; font: 14px/1.5 system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--text); }
-header { display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
-header strong { font-size: 15px; }
-nav { display: flex; gap: 4px; flex-wrap: wrap; }
-nav a { padding: 4px 10px; border-radius: 6px; color: var(--muted); text-decoration: none; }
-nav a.on { background: var(--bg); color: var(--text); font-weight: 600; }
-header .me { margin-left: auto; color: var(--muted); display: flex; gap: 8px; align-items: center; }
-main { padding: 20px; max-width: 1200px; margin: 0 auto; }
-section { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px; margin-bottom: 16px; overflow-x: auto; }
-h2 { font-size: 16px; margin: 0 0 12px; }
-h3 { font-size: 14px; margin: 16px 0 8px; color: var(--muted); }
-table { border-collapse: collapse; width: 100%; }
-th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
-th { color: var(--muted); font-weight: 500; white-space: nowrap; }
-td code, pre { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
-pre { margin: 0; white-space: pre-wrap; word-break: break-all; max-width: 420px; }
-form.row, .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
-input, select, textarea { font: inherit; color: inherit; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; }
-button { font: inherit; border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 6px; padding: 5px 12px; cursor: pointer; }
-button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
-button.danger { color: var(--danger); }
-button:disabled { opacity: .5; cursor: not-allowed; }
-.muted { color: var(--muted); }
-.tag { display: inline-block; padding: 0 6px; border-radius: 10px; border: 1px solid var(--line); font-size: 12px; margin: 1px; }
-.ok { color: var(--ok); } .bad { color: var(--danger); } .warn { color: var(--warn); }
-.caps { columns: 3 260px; }
-.caps label { display: block; break-inside: avoid; padding: 2px 0; }
-.toast { position: fixed; right: 16px; bottom: 16px; max-width: 420px; padding: 10px 14px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 4px 16px rgba(0,0,0,.15); }
-.login { max-width: 360px; margin: 10vh auto; }
-.login input { width: 100%; margin-bottom: 10px; }
-.split { display: grid; grid-template-columns: 280px 1fr; gap: 16px; }
-@media (max-width: 760px) { .split { grid-template-columns: 1fr; } main { padding: 12px; } }
-.list-item { padding: 6px 8px; border-radius: 6px; cursor: pointer; }
-.list-item.on { background: var(--bg); font-weight: 600; }
+  color-scheme: light;
+  --canvas: #f4f7f5;
+  --surface: #fff;
+  --ink: #23352f;
+  --secondary: #63756c;
+  --muted: #79887f;
+  --line: #e4ebe6;
+  --line-strong: #cfdad3;
+  --accent: #23765a;
+  --accent-dark: #175d45;
+  --accent-soft: #edf6f0;
+  --red: #b74c43;
+  --amber: #a87a32;
+  --radius: 12px;
+  --sidebar: 220px;
+  font-family: 'Microsoft YaHei UI', 'PingFang SC', 'Noto Sans CJK SC', sans-serif;
+  font-size: 13px;
+}
+* {
+  box-sizing: border-box;
+}
+[hidden] {
+  display: none !important;
+}
+body {
+  min-width: 1080px;
+  margin: 0;
+  background: var(--canvas);
+  color: var(--ink);
+  line-height: 1.6;
+}
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+button,
+a,
+input,
+select,
+textarea {
+  -webkit-tap-highlight-color: transparent;
+}
+button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  min-height: 36px;
+  padding: 7px 14px;
+  border: 1px solid var(--line-strong);
+  border-radius: 7px;
+  background: white;
+  color: var(--ink);
+  cursor: pointer;
+  transition:
+    background 0.15s,
+    border-color 0.15s,
+    box-shadow 0.15s;
+  white-space: nowrap;
+}
+button:hover {
+  background: #f6f9f7;
+  border-color: #a9beb0;
+}
+button.primary {
+  background: var(--accent);
+  color: #fff;
+  border-color: var(--accent);
+}
+button.primary:hover {
+  background: var(--accent-dark);
+  border-color: var(--accent-dark);
+}
+button.danger {
+  color: var(--red);
+}
+button.danger:hover {
+  border-color: #dfb9b4;
+  background: #fff7f5;
+}
+button:disabled {
+  opacity: 0.48;
+  cursor: not-allowed;
+}
+button.small {
+  min-height: 30px;
+  padding: 4px 10px;
+  font-size: 12px;
+}
+button.icon-button {
+  width: 34px;
+  min-height: 34px;
+  padding: 8px;
+  background: transparent;
+  border-color: transparent;
+  color: var(--secondary);
+}
+button.icon-button:hover {
+  background: var(--accent-soft);
+}
+button.text-button {
+  min-height: 26px;
+  padding: 2px 4px;
+  background: none;
+  border-color: transparent;
+  color: var(--accent);
+  font-size: 12px;
+}
+button.text-button.danger {
+  color: var(--red);
+}
+button.text-button:hover {
+  text-decoration: underline;
+}
+:focus-visible {
+  outline: 3px solid #8ab9a0;
+  outline-offset: 3px;
+}
+input:not([type='checkbox']),
+select,
+textarea {
+  width: 100%;
+  min-width: 0;
+  min-height: 38px;
+  padding: 8px 11px;
+  border: 1px solid var(--line-strong);
+  border-radius: 7px;
+  background: #fff;
+  color: var(--ink);
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s;
+}
+input::placeholder,
+textarea::placeholder {
+  color: #8a968f;
+}
+input:focus,
+select:focus,
+textarea:focus {
+  border-color: #71a88c;
+  outline: none;
+  box-shadow: 0 0 0 3px #23765a0d;
+}
+input:disabled,
+select:disabled,
+textarea:disabled {
+  background: #f5f7f5;
+  color: var(--secondary);
+  cursor: not-allowed;
+}
+input[type='checkbox'] {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  accent-color: var(--accent);
+  cursor: pointer;
+}
+textarea {
+  resize: vertical;
+}
+a {
+  color: var(--accent);
+  text-decoration: none;
+}
+h1,
+h2,
+h3,
+p {
+  margin: 0;
+}
+h1 {
+  font-size: 26px;
+  line-height: 1.5;
+  font-weight: 650;
+  letter-spacing: 0.5px;
+}
+h2 {
+  font-size: 15px;
+  font-weight: 650;
+}
+h3 {
+  font-size: 14px;
+  font-weight: 600;
+}
+strong {
+  font-weight: 600;
+}
+small {
+  font-size: 11px;
+}
+code,
+pre {
+  font-family: 'Cascadia Code', Consolas, monospace;
+  font-size: 11px;
+}
+code {
+  overflow-wrap: anywhere;
+}
+pre {
+  max-width: 520px;
+  max-height: 300px;
+  overflow: auto;
+  margin: 10px 0 0;
+  padding: 12px;
+  background: #f4f7f5;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  color: var(--secondary);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.icon {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  vertical-align: middle;
+}
+.muted {
+  color: var(--muted);
+}
+.eyebrow {
+  display: block;
+  margin-bottom: 4px;
+  font-size: 10px;
+  letter-spacing: 2px;
+  color: var(--muted);
+}
+
+/* 固定导航与独立内容滚动视觉，避免每个管理页面再创造一套页面骨架。 */
+.app-sidebar {
+  position: fixed;
+  inset: 0 auto 0 0;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  width: var(--sidebar);
+  padding: 29px 17px 20px;
+  background: #fbfcfa;
+  border-right: 1px solid var(--line);
+}
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  padding: 0 14px 30px;
+  color: var(--ink);
+}
+.brand > span:last-child {
+  font:
+    600 26px/1 Bahnschrift,
+    sans-serif;
+  letter-spacing: -0.8px;
+}
+.brand small {
+  display: block;
+  margin-top: 8px;
+  font:
+    10px/1.4 'Microsoft YaHei UI',
+    sans-serif;
+  letter-spacing: 3px;
+  color: var(--secondary);
+}
+.brand-mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 37px;
+  height: 40px;
+  border-radius: 10px;
+  background: var(--accent);
+  color: white;
+  box-shadow: inset 0 0 0 1px #ffffff20;
+}
+.brand-mark .icon {
+  width: 21px;
+  height: 21px;
+  stroke-width: 1.6;
+}
+.nav-group {
+  margin-top: 15px;
+}
+.nav-caption {
+  margin: 0 14px 10px;
+  color: #87938a;
+  font-size: 10px;
+  letter-spacing: 1px;
+}
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 45px;
+  margin: 4px 0;
+  padding: 10px 14px;
+  border-radius: 8px;
+  color: var(--secondary);
+}
+.nav-item:hover {
+  background: #f0f4ef;
+}
+.nav-item.active {
+  background: #e8f2eb;
+  color: var(--accent-dark);
+  font-weight: 600;
+}
+.nav-active-dot {
+  width: 5px;
+  height: 5px;
+  margin-left: auto;
+  border-radius: 100%;
+  background: var(--accent);
+}
+.sidebar-bottom {
+  margin-top: auto;
+  padding: 18px 11px 0;
+}
+.workspace-label {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 14px 0;
+  border-top: 1px solid var(--line);
+  font-size: 10px;
+  color: var(--muted);
+}
+.connection-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #69a27d;
+}
+.back-to-business {
+  display: flex;
+  gap: 7px;
+  align-items: center;
+  font-size: 11px;
+  color: var(--secondary);
+}
+.back-to-business .icon {
+  width: 14px;
+  height: 14px;
+}
+.app-main {
+  min-height: 100vh;
+  margin-left: var(--sidebar);
+}
+.app-topbar {
+  position: sticky;
+  top: 0;
+  z-index: 8;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 75px;
+  padding: 0 34px;
+  border-bottom: 1px solid var(--line);
+  background: #ffffffed;
+  backdrop-filter: blur(16px);
+}
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: var(--muted);
+  font-size: 11px;
+}
+.breadcrumb .icon {
+  width: 10px;
+  height: 10px;
+  color: #adb8b0;
+}
+.breadcrumb strong {
+  color: var(--ink);
+  font-weight: 500;
+}
+.account {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.avatar,
+.person-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: #e9efe9;
+  color: #49705c;
+  font-size: 12px;
+}
+.account-copy {
+  display: flex;
+  flex-direction: column;
+  min-width: 76px;
+  line-height: 1.7;
+}
+.account-copy strong {
+  font-size: 11px;
+}
+.account-copy small {
+  font-size: 9px;
+  color: var(--muted);
+}
+.page-container {
+  max-width: 1700px;
+  margin: 0 auto;
+  padding: 28px 34px 18px;
+}
+.page-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  margin-bottom: 25px;
+}
+.page-heading p {
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--secondary);
+}
+.refresh-button {
+  color: var(--secondary);
+  font-size: 12px;
+}
+.refresh-button .icon {
+  width: 14px;
+  height: 14px;
+}
+.page-content {
+  animation: enter 0.25s ease-out;
+}
+.page-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 28px;
+  padding-top: 18px;
+  border-top: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 10px;
+}
+.page-footer > span:last-child {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+.page-footer .icon {
+  width: 12px;
+  height: 12px;
+}
+
+/* 通用记录页面：低对比表头、可展开明细，中文名称始终比代码标识更醒目。 */
+.panel {
+  min-width: 0;
+  margin-bottom: 20px;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface);
+}
+.panel-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 21px 24px;
+}
+.panel-heading p {
+  margin-top: 5px;
+  font-size: 11px;
+  color: var(--secondary);
+}
+.table-wrap {
+  width: 100%;
+  overflow-x: auto;
+}
+table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+}
+th {
+  padding: 12px 22px;
+  border-block: 1px solid var(--line);
+  background: #f8faf8;
+  color: var(--secondary);
+  font-weight: 500;
+  font-size: 11px;
+  white-space: nowrap;
+}
+td {
+  padding: 16px 22px;
+  border-bottom: 1px solid #edf1ed;
+  vertical-align: middle;
+  font-size: 12px;
+}
+tbody tr:last-child td {
+  border-bottom: 0;
+}
+tbody tr:hover {
+  background: #fbfdfb;
+}
+td select {
+  min-width: 180px;
+  max-width: 260px;
+  font-size: 12px;
+}
+.table-empty {
+  height: 128px;
+  text-align: center;
+  color: var(--muted);
+}
+.stack-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 95px;
+}
+.stack-cell code,
+.stack-cell small {
+  color: var(--muted);
+}
+.entity-cell,
+.person-cell {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+}
+.entity-icon {
+  display: flex;
+  color: #76927f;
+}
+.person-cell small {
+  display: block;
+  color: var(--muted);
+}
+.tag-list,
+.row-actions,
+.section-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 7px;
+}
+.row-actions {
+  flex-wrap: nowrap;
+}
+.badge {
+  display: inline-flex;
+  align-items: center;
+  align-self: flex-start;
+  padding: 2px 8px;
+  border: 1px solid #e7ece7;
+  border-radius: 5px;
+  background: #f4f6f3;
+  color: #697970;
+  font-size: 10px;
+  line-height: 1.65;
+  white-space: nowrap;
+}
+.badge.green {
+  color: #338160;
+  background: #edf7f0;
+  border-color: #dceee2;
+}
+.badge.red {
+  color: var(--red);
+  background: #fdf1ee;
+  border-color: #f1dad6;
+}
+.badge.amber {
+  color: var(--amber);
+  background: #fcf6e9;
+  border-color: #f1e6cc;
+}
+.stats-row {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 18px;
+  margin-bottom: 22px;
+}
+.stat-card {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  padding: 22px 24px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface);
+}
+.stat-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 11px;
+  background: #f0f5ef;
+  color: #688e73;
+}
+.stat-card > div {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.stat-card > div > span {
+  font-size: 12px;
+  color: var(--secondary);
+}
+.stat-card strong {
+  font:
+    500 30px/1 Bahnschrift,
+    sans-serif;
+  color: var(--ink);
+}
+.stat-card.attention .stat-icon {
+  background: #fcf4e6;
+  color: var(--amber);
+}
+.table-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 0 24px 20px;
+}
+.table-toolbar .search-field {
+  max-width: 350px;
+}
+details summary {
+  cursor: pointer;
+  color: var(--accent);
+  font-size: 11px;
+}
+.failure-summary {
+  max-width: 320px;
+  color: var(--red);
+}
+.audit-filters,
+.sync-filters {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  align-items: end;
+  gap: 14px;
+  margin: 0 24px 24px;
+  padding: 18px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #fafcf9;
+}
+.audit-filters > button {
+  justify-self: end;
+}
+.sync-filters {
+  grid-template-columns: minmax(240px, 1fr) minmax(180px, 1fr) auto;
+}
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 24px;
+  border-top: 1px solid var(--line);
+  font-size: 11px;
+}
+
+/* 角色页把“选谁”和“配什么”分开；权限按业务对象分组，保留稳定标识便于排障。 */
+.role-workspace {
+  display: grid;
+  grid-template-columns: 244px minmax(0, 1fr);
+  gap: 22px;
+  align-items: start;
+}
+.role-sidebar {
+  position: sticky;
+  top: 99px;
+  padding: 21px 15px 16px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface);
+}
+.role-list-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 5px;
+}
+.sidebar-description {
+  margin: 10px 5px 17px;
+  font-size: 11px;
+  line-height: 1.9;
+}
+.role-sidebar .search-field {
+  margin: 0 3px 15px;
+}
+.role-sidebar .search-field input {
+  font-size: 10px;
+}
+.role-list {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  max-height: calc(100vh - 360px);
+  min-height: 80px;
+  overflow-y: auto;
+}
+.role-item {
+  width: 100%;
+  min-height: 65px;
+  padding: 10px;
+  gap: 10px;
+  border-color: transparent;
+  background: transparent;
+  text-align: left;
+  white-space: normal;
+}
+.role-item.selected {
+  border-color: #d8e8dc;
+  background: #eef6ef;
+}
+.role-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 31px;
+  height: 34px;
+  flex-shrink: 0;
+  border: 1px solid #e1e9e1;
+  border-radius: 7px;
+  background: #fafcf9;
+  color: #83968a;
+}
+.role-item.selected .role-avatar {
+  background: #fff;
+  color: var(--accent);
+  border-color: #d5e6d9;
+}
+.role-avatar .icon {
+  width: 16px;
+  height: 16px;
+}
+.role-item-copy {
+  flex: 1;
+  min-width: 0;
+}
+.role-item-copy strong {
+  display: block;
+  font-size: 12px;
+}
+.role-item-copy small {
+  display: block;
+  margin-top: 2px;
+  font:
+    10px/1.5 'Cascadia Code',
+    Consolas,
+    monospace;
+  overflow-wrap: anywhere;
+  color: var(--muted);
+}
+.role-item-count {
+  font:
+    12px/1 Bahnschrift,
+    sans-serif;
+  color: #829388;
+}
+.create-role {
+  width: 100%;
+  margin-top: 19px;
+}
+.list-empty {
+  padding: 25px 10px;
+  font-size: 11px;
+  text-align: center;
+  color: var(--muted);
+}
+.role-details {
+  min-width: 0;
+}
+.role-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 15px;
+  padding: 26px;
+  border: 1px solid var(--line);
+  border-bottom: 0;
+  border-radius: var(--radius) var(--radius) 0 0;
+  background: white;
+}
+.role-title {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  min-width: 0;
+}
+.role-emblem {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 52px;
+  border-radius: 11px;
+  background: #edf5ed;
+  color: var(--accent);
+}
+.role-emblem .icon {
+  width: 25px;
+  height: 25px;
+}
+.title-line {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.title-line h2 {
+  font-size: 20px;
+}
+.role-title p {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 5px;
+  color: var(--muted);
+  font-size: 10px;
+}
+.permission-total {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-left: 23px;
+  border-left: 1px solid var(--line);
+}
+.permission-total strong {
+  font:
+    500 28px/1 Bahnschrift,
+    sans-serif;
+  color: var(--accent);
+}
+.permission-total span {
+  font-size: 10px;
+  color: var(--secondary);
+}
+.role-tabs {
+  display: flex;
+  gap: 29px;
+  padding: 0 26px;
+  border: 1px solid var(--line);
+  border-top: 0;
+  border-radius: 0 0 var(--radius) var(--radius);
+  background: white;
+}
+.role-tabs button {
+  position: relative;
+  min-height: 51px;
+  padding: 12px 1px;
+  border: 0;
+  border-radius: 0;
+  background: none;
+  font-size: 12px;
+  color: var(--secondary);
+}
+.role-tabs .icon {
+  width: 15px;
+  height: 15px;
+}
+.role-tabs button.active {
+  color: var(--accent);
+  font-weight: 600;
+}
+.role-tabs button.active::after {
+  position: absolute;
+  bottom: 0;
+  inset-inline: 0;
+  height: 3px;
+  border-radius: 3px 3px 0 0;
+  background: var(--accent);
+  content: '';
+}
+.role-tab-body {
+  padding-top: 22px;
+}
+.permission-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.permission-toolbar .search-field {
+  max-width: 370px;
+}
+.search-field {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+  padding-left: 11px;
+  border: 1px solid var(--line-strong);
+  border-radius: 7px;
+  background: white;
+  color: #8a9a90;
+}
+.search-field .icon {
+  width: 15px;
+  height: 15px;
+}
+.search-field input {
+  min-height: 36px;
+  padding-left: 0;
+  border: 0;
+  background: transparent;
+  font-size: 11px;
+  box-shadow: none;
+}
+.search-field:focus-within {
+  border-color: #71a88c;
+  box-shadow: 0 0 0 3px #23765a0d;
+}
+.search-field input:focus {
+  box-shadow: none;
+}
+.segmented {
+  display: flex;
+  flex-shrink: 0;
+  padding: 3px;
+  gap: 2px;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  background: #eaf0eb;
+}
+.segmented button {
+  min-height: 29px;
+  padding: 4px 12px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  font-size: 11px;
+  color: var(--secondary);
+}
+.segmented button.active {
+  background: #fff;
+  color: var(--accent-dark);
+  box-shadow: 0 1px 4px #243e2912;
+}
+.permission-help {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 14px 0 17px;
+  font-size: 10px;
+  color: var(--secondary);
+}
+.permission-help > span:first-child {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+}
+.permission-help .icon {
+  width: 13px;
+  height: 13px;
+  color: #94a59a;
+}
+.result-count {
+  white-space: nowrap;
+}
+.permission-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-items: start;
+  gap: 16px;
+}
+.permission-card {
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface);
+}
+.permission-card-heading {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  padding: 17px 19px;
+  border-bottom: 1px solid var(--line);
+  background: #fcfdfb;
+}
+.group-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 33px;
+  height: 35px;
+  border: 1px solid #e1ebe1;
+  border-radius: 7px;
+  background: #f0f6ef;
+  color: #6a9477;
+}
+.group-icon.system {
+  background: #f4f1e9;
+  color: #9b8e69;
+  border-color: #ede7da;
+}
+.group-icon .icon {
+  width: 17px;
+  height: 17px;
+}
+.group-title {
+  flex: 1;
+  min-width: 0;
+}
+.group-title h3 {
+  font-size: 13px;
+}
+.group-title code {
+  color: var(--muted);
+  font-size: 10px;
+}
+.group-progress {
+  padding: 2px 7px;
+  border: 1px solid #e6ece6;
+  border-radius: 5px;
+  font:
+    10px/1.6 'Cascadia Code',
+    Consolas,
+    monospace;
+  color: var(--muted);
+}
+.permission-row {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  padding: 13px 19px;
+  border-bottom: 1px solid #f0f3ef;
+}
+.permission-row:last-child {
+  border-bottom: 0;
+}
+.permission-toggle {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  gap: 11px;
+  min-width: 0;
+  cursor: pointer;
+}
+/* 保留真实 checkbox 的键盘与读屏语义，仅替换视觉外观。 */
+.permission-toggle > input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+}
+.checkbox-visual {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  border: 1px solid #cdd9cf;
+  border-radius: 4px;
+  background: #fff;
+  transition: background 0.12s;
+}
+.checkbox-visual .icon {
+  width: 12px;
+  height: 12px;
+  stroke-width: 2.5;
+  opacity: 0;
+}
+.permission-toggle > input:checked + .checkbox-visual {
+  border-color: var(--accent);
+  background: var(--accent);
+  color: white;
+}
+.permission-toggle > input:checked + .checkbox-visual .icon {
+  opacity: 1;
+}
+.permission-toggle > input:focus-visible + .checkbox-visual {
+  outline: 3px solid #8ab9a0;
+  outline-offset: 3px;
+}
+.permission-toggle > input:disabled + .checkbox-visual {
+  opacity: 0.45;
+}
+.permission-toggle:has(input:disabled) {
+  cursor: not-allowed;
+}
+.permission-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+.permission-name {
+  font-size: 12px;
+  color: var(--ink);
+}
+.permission-copy code {
+  font-size: 10px;
+  color: #88968d;
+}
+.invocation-badge {
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: #f3f4ef;
+  font-size: 9px;
+  color: #8c947c;
+}
+.limit-form {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  width: 100%;
+  padding: 9px 0 1px 27px;
+  font-size: 10px;
+  color: var(--secondary);
+}
+.limit-form input {
+  width: 110px;
+  min-height: 29px;
+  padding: 4px 7px;
+  font-size: 11px;
+}
+.limit-form button {
+  min-height: 29px;
+  font-size: 10px;
+}
+.scope-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+  margin-top: 17px;
+  align-items: start;
+}
+.scope-card {
+  padding: 21px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: white;
+}
+.scope-card.default-scope {
+  grid-column: 1 / -1;
+  border-color: #cbded0;
+  background: #fafdf9;
+}
+.scope-heading {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 17px;
+}
+.scope-heading code {
+  display: block;
+  margin-top: 3px;
+  color: var(--muted);
+  font-size: 10px;
+}
+.scope-description {
+  min-height: 35px;
+  margin-top: 9px;
+  color: var(--secondary);
+  font-size: 11px;
+}
+.scope-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 13px;
+  padding-top: 13px;
+  border-top: 1px solid var(--line);
+}
+.save-state {
+  color: var(--muted);
+  font-size: 10px;
+}
+.save-state.pending {
+  color: var(--amber);
+}
+.department-options {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  max-height: 200px;
+  overflow: auto;
+  margin-top: 10px;
+  padding: 12px;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+}
+.department-options label {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 11px;
+}
+
+/* 表单和反馈共用清晰的保存状态；原生 dialog 提供焦点隔离与 Escape 关闭。 */
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  min-width: 0;
+}
+.field > span {
+  font-size: 12px;
+  font-weight: 500;
+}
+.field > small {
+  color: var(--muted);
+  line-height: 1.8;
+}
+.stack-form {
+  display: flex;
+  flex-direction: column;
+  gap: 19px;
+}
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 5px;
+  padding-top: 18px;
+  border-top: 1px solid var(--line);
+}
+.model-overview { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; }
+body:has(.model-overview) { min-width: 0; }
+.model-overview h2 { margin: 8px 0; font-size: 24px; font-weight: 500; }
+.model-overview p, .model-meta, .model-save-status { color: var(--muted); font-size: 12px; line-height: 1.8; }
+.model-meta { display: flex; gap: 18px; align-items: center; padding: 0 24px 20px; flex-wrap: wrap; }
+.model-form { padding: 0 24px 24px; }
+.model-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
+.model-fields input:not([type=checkbox]) { width: 100%; box-sizing: border-box; }
+.model-enabled { display: flex; gap: 10px; align-items: center; }
+.model-actions { display: flex; gap: 12px; align-items: center; border-top: 1px solid var(--line); margin-top: 24px; padding-top: 20px; }
+.model-save-status { flex: 1; }
+@media (max-width: 700px) { .model-fields { grid-template-columns: 1fr; } .model-actions, .model-overview { flex-wrap: wrap; } .model-save-status { flex-basis: 100%; } }
+.modal {
+  width: 470px;
+  max-width: 80vw;
+  max-height: 85vh;
+  padding: 25px;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background: white;
+  color: var(--ink);
+  box-shadow: 0 25px 100px #1c382b26;
+}
+.modal::backdrop {
+  background: #1a302c55;
+  backdrop-filter: blur(4px);
+}
+.modal-heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 22px;
+}
+.modal-heading h2 {
+  font-size: 18px;
+}
+.modal-heading .icon-button {
+  font-size: 23px;
+  font-weight: 300;
+}
+.choice-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 330px;
+  overflow: auto;
+}
+.choice-list label {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 13px;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  cursor: pointer;
+}
+.choice-list small {
+  display: block;
+  color: var(--muted);
+  font-family: 'Cascadia Code', Consolas, monospace;
+}
+.inline-info {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  padding: 12px 14px;
+  border: 1px solid #e0e9de;
+  border-radius: 7px;
+  background: #f4f8f1;
+  color: #6e8069;
+  font-size: 11px;
+  line-height: 1.9;
+}
+.inline-info .icon {
+  width: 15px;
+  height: 15px;
+  margin-top: 3px;
+}
+#notifications {
+  position: fixed;
+  top: 89px;
+  right: 28px;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+  pointer-events: none;
+}
+.toast {
+  display: flex;
+  align-items: flex-start;
+  gap: 9px;
+  max-width: 420px;
+  padding: 14px 18px;
+  border: 1px solid #cde2d3;
+  border-radius: 9px;
+  background: #fafffa;
+  box-shadow: 0 6px 24px #20382a12;
+  color: var(--accent-dark);
+  font-size: 12px;
+  animation: enter 0.2s ease-out;
+}
+.toast .icon {
+  width: 16px;
+  height: 16px;
+  margin-top: 2px;
+}
+.toast.error {
+  border-color: #e9c9c3;
+  background: #fff9f7;
+  color: var(--red);
+}
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 280px;
+  padding: 40px;
+  text-align: center;
+}
+.empty-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 60px;
+  margin-bottom: 19px;
+  border: 1px solid #e1eadf;
+  border-radius: 18px;
+  background: #f3f7f0;
+  color: #8aa080;
+}
+.empty-icon .icon {
+  width: 27px;
+  height: 27px;
+}
+.empty-state h3 {
+  margin-bottom: 9px;
+  font-size: 16px;
+}
+.empty-state p {
+  max-width: 440px;
+  color: var(--secondary);
+  font-size: 12px;
+  line-height: 1.9;
+}
+.permission-grid > .empty-state {
+  grid-column: 1 / -1;
+  border: 1px dashed var(--line-strong);
+  border-radius: var(--radius);
+}
+.loading-panel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  min-height: 180px;
+  color: var(--secondary);
+}
+.spinner {
+  width: 17px;
+  height: 17px;
+  border: 2px solid #e0ebe1;
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: rotate 0.7s linear infinite;
+}
+.error-panel {
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+  padding: 28px;
+  border: 1px solid #eadbd4;
+  border-radius: var(--radius);
+  background: #fffdfa;
+}
+.error-panel > .icon {
+  margin-top: 3px;
+  color: var(--amber);
+}
+.error-panel > div {
+  flex: 1;
+}
+.error-panel p {
+  margin-top: 8px;
+  color: var(--secondary);
+  font-size: 12px;
+}
+.task-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+  min-width: 280px;
+}
+.task-actions input {
+  width: 100%;
+}
+
+/* 登录页保持同一品牌色，以较大的留白和标题区分日常数据页面。 */
+.login-layout {
+  display: grid;
+  grid-template-columns: 1.08fr 1fr;
+  min-height: 100vh;
+  background: #fbfcf9;
+}
+.login-story {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: hidden;
+  padding: 48px 66px 38px;
+  background: #214a3b;
+  color: #fff;
+}
+.login-story::after {
+  position: absolute;
+  width: 660px;
+  height: 660px;
+  right: -380px;
+  bottom: -290px;
+  border: 1px solid #abc8a933;
+  border-radius: 50%;
+  box-shadow:
+    0 0 0 60px #abc8a90a,
+    0 0 0 120px #abc8a90a,
+    0 0 0 180px #abc8a909;
+  content: '';
+  pointer-events: none;
+}
+.login-story > * {
+  position: relative;
+  z-index: 1;
+}
+.login-brand {
+  display: flex;
+  align-items: center;
+  gap: 13px;
+  font:
+    500 31px/1 Bahnschrift,
+    sans-serif;
+  letter-spacing: -0.7px;
+}
+.login-brand .brand-mark {
+  background: #ffffff12;
+  border: 1px solid #ffffff30;
+}
+.login-story .eyebrow {
+  margin-bottom: 19px;
+  color: #a8c6b4;
+  font-size: 11px;
+}
+.login-story h1 {
+  margin-bottom: 25px;
+  font-size: 42px;
+  line-height: 1.6;
+  letter-spacing: 3px;
+  font-weight: 500;
+}
+.login-story p {
+  color: #bbd1c3;
+  font-size: 13px;
+  line-height: 2.1;
+}
+.login-story > small {
+  color: #9fbdac;
+  font-size: 10px;
+  letter-spacing: 2px;
+}
+.login-panel {
+  align-self: center;
+  width: 100%;
+  max-width: 490px;
+  padding: 50px 55px;
+  margin: 0 auto;
+}
+.login-panel > .eyebrow {
+  margin-bottom: 12px;
+  color: var(--accent);
+}
+.login-panel h2 {
+  margin-bottom: 10px;
+  font-size: 26px;
+}
+.login-panel > p {
+  font-size: 12px;
+}
+.login-panel .stack-form {
+  margin-top: 38px;
+}
+.login-panel .stack-form > button {
+  justify-content: space-between;
+  min-height: 44px;
+  margin-top: 7px;
+}
+.sso-link {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 9px;
+  margin-top: 22px;
+  font-size: 11px;
+}
+.sso-link .icon {
+  width: 13px;
+  height: 13px;
+}
+.login-footnote {
+  display: flex;
+  align-items: flex-start;
+  gap: 7px;
+  margin-top: 46px;
+  color: var(--muted);
+  font-size: 10px !important;
+}
+.login-footnote .icon {
+  width: 13px;
+  height: 13px;
+  margin-top: 2px;
+}
+.connection-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  min-height: 100vh;
+}
+.connection-state p {
+  color: var(--secondary);
+}
+@keyframes enter {
+  from {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
+/* 助理性格：预设卡片与并排试聊，沿用管理工作台的绿色和纸面层次。 */
+body:has(.persona-overview) { min-width: 0; }
+.persona-overview { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 4px 28px; }
+.persona-overview h2 { margin: 8px 0; font-size: 26px; letter-spacing: -.4px; }
+.persona-overview p { color: var(--secondary); }
+.persona-default { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 24px; border: 1px solid var(--line); border-radius: 12px; background: #fff; margin-bottom: 18px; }
+.persona-default p { margin: 4px 0 0; font-size: 11px; color: var(--muted); }
+.persona-default-actions { display: flex; align-items: center; gap: 10px; }
+.persona-default select { min-width: 180px; }
+.persona-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
+.persona-card { display: flex; position: relative; gap: 13px; align-items: flex-start; min-width: 0; padding: 21px 18px 42px; border: 1px solid var(--line); border-radius: 12px; background: #fff; text-align: left; white-space: normal; }
+.persona-card.selected { border-color: #7baf8f; background: #f0f7ed; box-shadow: inset 0 0 0 1px #7baf8f; }
+.persona-avatar { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border: 1px solid #e2eadc; border-radius: 11px; background: #f8faf5; font-size: 22px; }
+.persona-card-copy { display: block; min-width: 0; }
+.persona-card-copy strong { display: block; color: #284f3e; font-size: 14px; margin-bottom: 5px; }
+.persona-card-copy small { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--secondary); font-size: 11px; line-height: 1.8; font-weight: 400; }
+.persona-card-tags { position: absolute; right: 16px; bottom: 12px; }
+.persona-card-tags .badge { font-size: 9px; }
+.persona-editor-area { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: start; }
+.persona-form { padding: 27px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
+.persona-section-heading { margin-bottom: 23px; }
+.persona-section-heading h2, .persona-preview h2 { margin: 7px 0; font-size: 20px; }
+.persona-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
+.persona-form .field { margin-bottom: 17px; }
+.persona-form textarea { resize: vertical; min-height: 120px; }
+.persona-examples { display: grid; gap: 9px; margin: 5px 0 18px; }
+.persona-examples strong { font-size: 12px; font-weight: 500; }
+.persona-examples small { color: var(--muted); font-size: 10px; margin-top: -4px; }
+.persona-enabled { display: flex; align-items: center; gap: 9px; color: var(--secondary); font-size: 12px; }
+.persona-enabled input { width: auto; }
+.persona-save-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--line); }
+.persona-save-status { font-size: 10px; color: var(--secondary); margin: 0; }
+.persona-preview { position: sticky; top: 20px; padding: 27px; border: 1px solid #d4dfcb; border-radius: 14px; background: #f4f7ee; }
+.persona-preview-intro { font-size: 11px; color: #7a886d; margin: 0 0 23px; line-height: 1.9; }
+.persona-preview-answer { min-height: 220px; max-height: 390px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: 18px; border: 1px solid #e0e7d7; border-radius: 10px; background: #fffef9; color: #3d5943; font-size: 13px; line-height: 1.9; }
+.persona-preview-status { min-height: 20px; margin: 10px 0; color: var(--secondary); font-size: 10px; }
+.persona-preview textarea { width: 100%; resize: vertical; min-height: 75px; }
+.persona-preview-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 15px; }
+@media (max-width: 1250px) { .persona-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .persona-editor-area { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); } .persona-default { flex-wrap: wrap; } }
+@media (max-width: 900px) {
+  .persona-editor-area { grid-template-columns: minmax(0, 1fr); }
+  .persona-preview { position: static; }
+  .persona-overview { flex-wrap: wrap; }
+}
+@media (max-width: 700px) {
+  body:has(.persona-overview, .model-overview) .app-sidebar { position: static; width: auto; padding: 18px; border-right: 0; border-bottom: 1px solid var(--line); }
+  body:has(.persona-overview, .model-overview) .brand { padding: 0 0 10px; }
+  body:has(.persona-overview, .model-overview) .nav-group { margin-top: 8px; }
+  body:has(.persona-overview, .model-overview) .nav-caption { margin: 0 0 5px; }
+  body:has(.persona-overview, .model-overview) .app-sidebar nav { display: flex; flex-wrap: wrap; gap: 5px; }
+  body:has(.persona-overview, .model-overview) .nav-item { min-height: 38px; padding: 8px 10px; margin: 0; gap: 6px; }
+  body:has(.persona-overview, .model-overview) .sidebar-bottom { padding: 10px 0 0; }
+  body:has(.persona-overview, .model-overview) .workspace-label { display: none; }
+  body:has(.persona-overview, .model-overview) .app-main { margin-left: 0; }
+  body:has(.persona-overview, .model-overview) .app-topbar { padding: 0 18px; gap: 10px; }
+  body:has(.persona-overview, .model-overview) .breadcrumb > :not(strong), body:has(.persona-overview, .model-overview) .account-copy { display: none; }
+  body:has(.persona-overview, .model-overview) .page-container { padding: 24px 16px; }
+  body:has(.persona-overview, .model-overview) .page-heading, body:has(.persona-overview, .model-overview) .page-footer { align-items: flex-start; flex-wrap: wrap; }
+  .persona-grid { grid-template-columns: minmax(0, 1fr); }
+  .persona-default { padding: 18px; }
+  .persona-default-actions { width: 100%; flex-wrap: wrap; }
+  .persona-default select { flex: 1; min-width: 0; }
+  .persona-form, .persona-preview { padding: 20px; }
+  .persona-save-row { flex-wrap: wrap; }
+  .persona-overview h2 { font-size: 23px; }
+}