@yss123/cage-admin 0.0.0-stage → 0.2.0

package/ui/style.css

@@ -0,0 +1,1577 @@
+/* 管理工作台采用同一套色彩与间距。仅为桌面排版，不引入远程字体或 UI 运行时。 */
+:root {
+  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);
+}
+.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;
+  }
+}