openxiangda-cli 2.0.0-alpha.67 → 2.0.0-alpha.69

package/template/apps/web/src/styles.css

@@ -3,14 +3,14 @@ body,
 #root {
   min-height: 100%;
   margin: 0;
-  background: #f3f7fd;
+  background: var(--oxa-shell-bg, #f5f5f5);
 }
 
 body {
-  color: #172033;
-  font-family:
-    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
-    "Microsoft YaHei", sans-serif;
+  color: var(--oxa-shell-text, #1f1f1f);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei",
+    sans-serif;
 }
 
 * {
@@ -26,26 +26,38 @@ body {
 
 .oxa-global-request-loading {
   position: fixed;
-  z-index: 1200;
-  top: 14px;
-  left: 50%;
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 7px 13px;
-  border: 1px solid #dbe7f7;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.96);
-  box-shadow: 0 8px 24px rgba(31, 59, 102, 0.15);
-  color: #355070;
-  font-size: 13px;
+  z-index: 1300;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 2px;
+  overflow: hidden;
   pointer-events: none;
-  transform: translateX(-50%);
+}
+
+.oxa-global-request-loading span {
+  position: absolute;
+  width: 38%;
+  height: 100%;
+  border-radius: 2px;
+  background: var(--oxa-shell-primary, #1677ff);
+  animation: oxa-request-progress 1.1s ease-in-out infinite;
+  box-shadow: 0 0 8px var(--oxa-shell-primary, #1677ff);
+}
+
+@keyframes oxa-request-progress {
+  from {
+    transform: translateX(-120%);
+  }
+
+  to {
+    transform: translateX(380%);
+  }
 }
 
 .oxa-app-layout {
   min-height: 100vh;
-  background: #f3f7fd;
+  background: var(--oxa-shell-bg, #f5f5f5);
 }
 
 .oxa-sider {
@@ -53,8 +65,8 @@ body {
   top: 0;
   z-index: 20;
   height: 100vh;
-  border-right: 1px solid #e5eaf2;
-  background: #fff !important;
+  border-right: 1px solid var(--oxa-shell-border, #f0f0f0);
+  background: var(--oxa-shell-surface, #fff) !important;
   box-shadow: none;
 }
 
@@ -66,17 +78,18 @@ body {
 
 .oxa-brand {
   display: flex;
-  min-height: 104px;
+  min-height: 64px;
   align-items: center;
-  gap: 14px;
-  padding: 20px 22px;
+  gap: 12px;
+  border-bottom: 1px solid var(--oxa-shell-border, #f0f0f0);
+  padding: 12px 18px;
 }
 
 .oxa-brand-mark {
   position: relative;
-  width: 38px;
-  min-width: 38px;
-  height: 44px;
+  width: 32px;
+  min-width: 32px;
+  height: 36px;
 }
 
 .oxa-brand-mark::before,
@@ -84,31 +97,31 @@ body {
   position: absolute;
   bottom: 2px;
   width: 10px;
-  height: 42px;
+  height: 34px;
   border-radius: 3px 3px 1px 1px;
-  background: linear-gradient(180deg, #1f78ff, #315eea);
+  background: var(--oxa-shell-primary, #1677ff);
   content: "";
   transform-origin: bottom;
 }
 
 .oxa-brand-mark::before {
-  left: 6px;
+  left: 5px;
   transform: rotate(27deg);
 }
 
 .oxa-brand-mark::after {
-  right: 6px;
+  right: 5px;
   transform: rotate(-27deg);
 }
 
 .oxa-brand-mark span {
   position: absolute;
   z-index: 1;
-  right: 5px;
+  right: 4px;
   bottom: 3px;
   width: 15px;
   height: 9px;
-  background: #fff;
+  background: var(--oxa-shell-surface, #fff);
   transform: skewX(-27deg);
 }
 
@@ -120,8 +133,8 @@ body {
 
 .oxa-brand-copy strong {
   overflow: hidden;
-  color: #101828;
-  font-size: 19px;
+  color: var(--oxa-shell-text, #1f1f1f);
+  font-size: 16px;
   line-height: 1.2;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -129,8 +142,8 @@ body {
 
 .oxa-brand-copy span {
   overflow: hidden;
-  color: #667792;
-  font-size: 13px;
+  color: var(--oxa-shell-text-secondary, #595959);
+  font-size: 12px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -148,7 +161,7 @@ body {
   min-height: 44px;
   margin-inline: 0;
   margin-block: 4px;
-  color: #47566f;
+  color: var(--oxa-shell-text-secondary, #595959);
   font-weight: 600;
 }
 
@@ -157,8 +170,8 @@ body {
 }
 
 .oxa-menu .ant-menu-item-selected {
-  color: #1677ff;
-  background: #eaf3ff !important;
+  color: var(--oxa-shell-primary, #1677ff);
+  background: var(--oxa-shell-primary-bg, #e6f4ff) !important;
 }
 
 .oxa-sider-footer {
@@ -166,21 +179,21 @@ body {
   right: 12px;
   bottom: 16px;
   left: 12px;
-  border-top: 1px solid #edf0f5;
-  background: #fff;
+  border-top: 1px solid var(--oxa-shell-border, #f0f0f0);
+  background: var(--oxa-shell-surface, #fff);
   padding-top: 12px;
 }
 
 .oxa-sider-footer .ant-btn {
   min-height: 42px;
   justify-content: flex-start;
-  color: #52627a;
+  color: var(--oxa-shell-text-secondary, #595959);
   font-weight: 600;
 }
 
 .oxa-workspace {
   min-width: 0;
-  background: #f3f7fd;
+  background: var(--oxa-shell-bg, #f5f5f5);
 }
 
 .oxa-topbar {
@@ -188,59 +201,156 @@ body {
   top: 0;
   z-index: 15;
   display: flex;
-  height: 92px;
+  height: 52px;
   align-items: center;
   justify-content: space-between;
-  border-bottom: 1px solid #edf0f5;
-  background: #fff !important;
-  padding: 14px 28px !important;
+  border-bottom: 1px solid var(--oxa-shell-border, #f0f0f0);
+  background: var(--oxa-shell-surface, #fff) !important;
+  padding: 0 20px !important;
   line-height: normal;
 }
 
-.oxa-topbar-page {
-  display: grid;
-  gap: 8px;
-}
-
-.oxa-topbar-page .ant-breadcrumb {
-  color: #64748b;
+.oxa-topbar .ant-breadcrumb {
+  color: var(--oxa-shell-text-secondary, #595959);
   font-weight: 500;
 }
 
-.oxa-topbar-page .ant-typography {
-  margin: 0;
-  color: #101828;
-  font-size: 22px;
+.oxa-topbar .ant-breadcrumb-link {
+  cursor: pointer;
 }
 
 .oxa-current-user {
-  min-width: 180px;
+  display: inline-flex;
+  min-width: 0;
+  height: 36px;
+  align-items: center;
+  gap: 8px;
   justify-content: flex-end;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  padding: 3px 6px;
+  color: var(--oxa-shell-text, #1f1f1f);
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.oxa-current-user:hover,
+.oxa-current-user:focus-visible {
+  background: var(--oxa-shell-hover, rgb(0 0 0 / 6%));
+  outline: 0;
 }
 
 .oxa-current-user-avatar {
-  background: linear-gradient(135deg, #2868f0, #2ea8f2);
+  background: var(--oxa-shell-primary, #1677ff);
 }
 
-.oxa-current-user-copy {
+.oxa-current-user strong {
+  max-width: 96px;
+  overflow: hidden;
+  font-size: 13px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.oxa-current-user-chevron {
+  color: var(--oxa-shell-text-tertiary, #8c8c8c);
+  font-size: 10px;
+}
+
+.oxa-user-dropdown {
+  width: 292px;
+  overflow: hidden;
+  border: 1px solid var(--oxa-shell-border, #f0f0f0);
+  border-radius: 8px;
+  background: var(--oxa-shell-elevated, #fff);
+  box-shadow: var(--oxa-shell-shadow, 0 1px 6px rgb(0 0 0 / 8%));
+  padding-top: 4px;
+}
+
+.oxa-user-dropdown-profile {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px 10px;
+}
+
+.oxa-user-dropdown-profile > div:last-child {
   display: grid;
-  gap: 4px;
+  min-width: 0;
+  flex: 1;
+  gap: 2px;
 }
 
-.oxa-current-user-copy strong {
-  color: #101828;
-  font-size: 15px;
+.oxa-user-dropdown-profile strong,
+.oxa-user-dropdown-profile span,
+.oxa-user-dropdown-profile small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.oxa-current-user-copy span {
-  color: #75839a;
+.oxa-user-dropdown-profile span,
+.oxa-user-dropdown-profile small,
+.oxa-user-dropdown-roles > span,
+.oxa-user-dropdown-theme > span {
+  color: var(--oxa-shell-text-secondary, #595959);
   font-size: 12px;
 }
 
+.oxa-user-dropdown-roles,
+.oxa-user-dropdown-theme {
+  display: grid;
+  gap: 7px;
+  margin: 0 12px;
+  border-top: 1px solid var(--oxa-shell-border, #f0f0f0);
+  padding: 10px 4px;
+}
+
+.oxa-user-dropdown > .ant-dropdown-menu {
+  border-top: 1px solid var(--oxa-shell-border, #f0f0f0);
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.oxa-route-history {
+  position: sticky;
+  z-index: 14;
+  top: 52px;
+  height: 36px;
+  overflow: hidden;
+  border-bottom: 1px solid var(--oxa-shell-border, #f0f0f0);
+  background: var(--oxa-shell-surface, #fff);
+  padding: 0 12px;
+}
+
+.oxa-route-history .ant-tabs,
+.oxa-route-history .ant-tabs-nav {
+  height: 35px;
+  margin: 0;
+}
+
+.oxa-route-history .ant-tabs-content-holder {
+  display: none;
+}
+
+.oxa-route-history .ant-tabs-tab {
+  border: 0 !important;
+  border-right: 1px solid var(--oxa-shell-border, #f0f0f0) !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  padding: 5px 12px !important;
+}
+
+.oxa-route-history .ant-tabs-tab-active {
+  background: var(--oxa-shell-primary-bg, #e6f4ff) !important;
+}
+
 .oxa-mobile-page {
   min-height: 100vh;
   box-sizing: border-box;
-  background: #f3f7fd;
+  background: var(--oxa-shell-bg, #f5f5f5);
   padding: 16px;
 }
 
@@ -266,17 +376,18 @@ body {
   width: 100%;
   min-height: 42px;
   box-sizing: border-box;
-  border: 1px solid #d9e2f0;
+  border: 1px solid var(--oxa-shell-border-strong, #d9d9d9);
   border-radius: 8px;
-  background: #fff;
+  background: var(--oxa-shell-surface, #fff);
   padding: 9px 11px;
-  color: #172033;
+  color: var(--oxa-shell-text, #1f1f1f);
   font: inherit;
 }
 
 .oxa-mobile-input:focus {
-  border-color: #1677ff;
-  outline: 2px solid rgb(22 119 255 / 15%);
+  border-color: var(--oxa-shell-primary, #1677ff);
+  outline: 2px solid
+    color-mix(in srgb, var(--oxa-shell-primary, #1677ff) 15%, transparent);
 }
 
 .oxa-mobile-filter,
@@ -298,7 +409,7 @@ body {
 }
 
 .oxa-mobile-record-card {
-  border-color: #dfe6ef;
+  border-color: var(--oxa-shell-border, #f0f0f0);
 }
 
 .oxa-mobile-record-heading {
@@ -308,7 +419,7 @@ body {
 
 .oxa-mobile-record-heading a {
   overflow: hidden;
-  color: #1677ff;
+  color: var(--oxa-shell-primary, #1677ff);
   font-size: 16px;
   font-weight: 650;
   text-overflow: ellipsis;
@@ -334,32 +445,27 @@ body {
   justify-self: end;
 }
 
-.oxa-current-user-chevron {
-  color: #65748a;
-  font-size: 12px;
-}
-
 .oxa-content {
   min-width: 0;
-  background: #f3f7fd;
+  background: var(--oxa-shell-bg, #f5f5f5);
 }
 
 .oxa-main {
   width: 100%;
   max-width: 1680px;
-  min-height: calc(100vh - 92px);
+  min-height: calc(100vh - 88px);
   margin: 0 auto;
-  padding: 24px 28px 48px;
+  padding: 20px 24px 48px;
 }
 
 .oxa-title {
   margin: 0;
-  color: #172033;
+  color: var(--oxa-shell-text, #1f1f1f);
   font-size: 19px;
 }
 
 .oxa-muted {
-  color: #7b879b;
+  color: var(--oxa-shell-text-secondary, #595959);
 }
 
 .oxa-page-heading {
@@ -375,36 +481,101 @@ body {
 .oxa-section-card,
 .oxa-detail-hero,
 .oxa-edit-hero {
-  border-color: #dfe6ef;
-  box-shadow: 0 1px 3px rgb(28 44 72 / 5%);
+  border-color: var(--oxa-shell-border, #f0f0f0);
+  background: var(--oxa-shell-surface, #fff);
+  box-shadow: var(--oxa-shell-shadow, 0 1px 6px rgb(0 0 0 / 8%));
 }
 
 .oxa-list-card > .ant-card-body {
-  padding: 22px;
+  padding: 0;
+}
+
+.oxa-list-surface {
+  display: grid;
+}
+
+.oxa-search-panel {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 12px;
+  border-bottom: 1px solid var(--oxa-shell-border, #f0f0f0);
+  padding: 16px;
 }
 
 .oxa-filter-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(170px, 1fr));
   gap: 12px;
-  border: 1px solid #e5eaf1;
-  border-radius: 8px;
-  background: #fbfcfe;
-  padding: 16px;
+}
+
+.oxa-filter-item > .ant-select,
+.oxa-filter-item > .ant-picker {
+  width: 100%;
+}
+
+.oxa-filter-item.is-collapsed {
+  display: none;
+}
+
+.oxa-filter-actions,
+.oxa-list-toolbar,
+.oxa-list-toolbar-primary,
+.oxa-list-toolbar-secondary {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.oxa-filter-actions {
+  align-items: flex-start;
+}
+
+.oxa-list-toolbar {
+  min-height: 56px;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--oxa-shell-border, #f0f0f0);
+  padding: 10px 16px;
+}
+
+.oxa-list-toolbar-secondary .ant-btn {
+  color: var(--oxa-shell-text-secondary, #595959);
+}
+
+.oxa-batch-bar {
+  display: flex;
+  min-height: 52px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  border-bottom: 1px solid var(--oxa-shell-border, #f0f0f0);
+  background: var(--ant-color-primary-bg, #e6f4ff);
+  padding: 8px 16px;
+}
+
+.oxa-import-errors {
+  max-height: 180px;
+  margin: 8px 0 0;
+  overflow: auto;
+  padding-left: 20px;
 }
 
 .oxa-list-card .ant-table-wrapper {
-  border: 1px solid #e5eaf1;
-  border-radius: 8px;
+  border: 0;
+  border-radius: 0;
   overflow: hidden;
 }
 
 .oxa-list-card .ant-table-thead > tr > th {
-  background: #fafbfd;
-  color: #27364d;
+  background: var(--oxa-shell-subtle, #fafafa);
+  color: var(--oxa-shell-text, #1f1f1f);
   font-weight: 600;
 }
 
+.oxa-list-card .ant-table-pagination {
+  margin: 16px !important;
+}
+
 .oxa-sections {
   display: grid;
   gap: 16px;
@@ -441,8 +612,12 @@ body {
   display: flex;
   justify-content: flex-end;
   gap: 10px;
-  border-top: 1px solid #e7ebf1;
-  background: rgb(255 255 255 / 96%);
+  border-top: 1px solid var(--oxa-shell-border, #f0f0f0);
+  background: color-mix(
+    in srgb,
+    var(--oxa-shell-surface, #fff) 96%,
+    transparent
+  );
   padding: 14px 0;
   backdrop-filter: blur(8px);
 }
@@ -450,7 +625,7 @@ body {
 .oxa-form-full .oxa-actions {
   margin-top: 4px;
   padding-inline: 18px;
-  box-shadow: 0 -3px 12px rgb(25 43 70 / 4%);
+  box-shadow: 0 -3px 12px color-mix(in srgb, var(--oxa-shell-text, #1f1f1f) 4%, transparent);
 }
 
 .oxa-authoritative-selector {
@@ -480,7 +655,7 @@ body {
 .oxa-selector-option-copy small,
 .oxa-selector-tag small,
 .oxa-resolved-item small {
-  color: #7b879b;
+  color: var(--oxa-shell-text-secondary, #595959);
   font-size: 11px;
 }
 
@@ -490,14 +665,14 @@ body {
   height: 28px;
   place-items: center;
   border-radius: 7px;
-  background: #eaf3ff;
-  color: #1677ff;
+  background: var(--oxa-shell-primary-bg, #e6f4ff);
+  color: var(--oxa-shell-primary, #1677ff);
   font-size: 14px;
 }
 
 .oxa-selector-avatar {
-  background: #eaf3ff;
-  color: #1677ff;
+  background: var(--oxa-shell-primary-bg, #e6f4ff);
+  color: var(--oxa-shell-primary, #1677ff);
   font-size: 12px;
 }
 
@@ -506,8 +681,8 @@ body {
   height: 26px;
   align-items: center;
   gap: 5px;
-  border-color: #dbe5f2;
-  background: #f6f9fd;
+  border-color: var(--oxa-shell-border, #f0f0f0);
+  background: var(--oxa-shell-subtle, #fafafa);
   padding-inline: 4px 7px;
 }
 
@@ -530,9 +705,9 @@ body {
   min-height: 30px;
   align-items: center;
   gap: 7px;
-  border: 1px solid #dce5f0;
+  border: 1px solid var(--oxa-shell-border, #f0f0f0);
   border-radius: 7px;
-  background: #f8faff;
+  background: var(--oxa-shell-subtle, #fafafa);
   padding: 4px 8px;
 }
 
@@ -542,9 +717,9 @@ body {
 }
 
 .oxa-resolved-resource .oxa-resolved-item {
-  border-color: #cfe1ff;
-  background: #eff6ff;
-  color: #155fc7;
+  border-color: var(--oxa-shell-primary-border, #91caff);
+  background: var(--oxa-shell-primary-bg, #e6f4ff);
+  color: var(--oxa-shell-primary, #1677ff);
 }
 
 .oxa-directory-trigger {
@@ -552,9 +727,10 @@ body {
   min-height: 38px;
   align-items: center;
   gap: 8px;
-  border: 1px solid #d9d9d9;
+  border: 1px solid var(--oxa-shell-border-strong, #d9d9d9);
   border-radius: 8px;
-  background: #fff;
+  background: var(--oxa-shell-surface, #fff);
+  color: var(--oxa-shell-text, #1f1f1f);
   padding: 3px 5px 3px 10px;
   cursor: pointer;
   transition: border-color 0.2s, box-shadow 0.2s;
@@ -562,20 +738,21 @@ body {
 
 .oxa-directory-trigger:hover,
 .oxa-directory-trigger:focus-visible {
-  border-color: #1677ff;
-  box-shadow: 0 0 0 2px rgb(22 119 255 / 10%);
+  border-color: var(--oxa-shell-primary, #1677ff);
+  box-shadow: 0 0 0 2px
+    color-mix(in srgb, var(--oxa-shell-primary, #1677ff) 10%, transparent);
   outline: 0;
 }
 
 .oxa-directory-trigger.is-disabled {
-  border-color: #d9d9d9;
-  background: #f5f5f5;
-  color: rgb(0 0 0 / 25%);
+  border-color: var(--oxa-shell-border-strong, #d9d9d9);
+  background: var(--oxa-shell-subtle, #fafafa);
+  color: var(--oxa-shell-text-disabled, rgb(0 0 0 / 25%));
   cursor: not-allowed;
 }
 
 .oxa-directory-trigger-icon {
-  color: #1677ff;
+  color: var(--oxa-shell-primary, #1677ff);
 }
 
 .oxa-directory-trigger-values {
@@ -588,7 +765,7 @@ body {
 }
 
 .oxa-directory-placeholder {
-  color: rgb(0 0 0 / 25%);
+  color: var(--oxa-shell-text-disabled, rgb(0 0 0 / 25%));
 }
 
 .oxa-directory-panel {
@@ -601,9 +778,9 @@ body {
   min-height: 460px;
   grid-template-columns: 220px minmax(280px, 1fr) 240px;
   overflow: hidden;
-  border: 1px solid #e5eaf1;
+  border: 1px solid var(--oxa-shell-border, #f0f0f0);
   border-radius: 8px;
-  background: #fff;
+  background: var(--oxa-shell-surface, #fff);
 }
 
 .oxa-directory-tree-pane,
@@ -614,8 +791,8 @@ body {
 }
 
 .oxa-directory-tree-pane {
-  border-right: 1px solid #edf0f5;
-  background: #fafbfd;
+  border-right: 1px solid var(--oxa-shell-border, #f0f0f0);
+  background: var(--oxa-shell-subtle, #fafafa);
 }
 
 .oxa-directory-member-pane {
@@ -632,7 +809,7 @@ body {
 
 .oxa-directory-member-row {
   min-height: 58px;
-  border-bottom: 1px solid #edf0f5;
+  border-bottom: 1px solid var(--oxa-shell-border, #f0f0f0);
   padding: 8px 4px;
 }
 
@@ -654,8 +831,8 @@ body {
 
 .oxa-directory-department-row:hover,
 .oxa-directory-department-row:focus-visible {
-  border-color: #cfe1ff;
-  background: #f2f7ff;
+  border-color: var(--oxa-shell-primary-border, #91caff);
+  background: var(--oxa-shell-primary-bg, #e6f4ff);
   outline: 0;
 }
 
@@ -667,13 +844,13 @@ body {
 }
 
 .oxa-directory-department-row small {
-  color: #7b879b;
+  color: var(--oxa-shell-text-secondary, #595959);
   font-size: 11px;
 }
 
 .oxa-directory-selected-pane {
-  border-left: 1px solid #edf0f5;
-  background: #fafbfd;
+  border-left: 1px solid var(--oxa-shell-border, #f0f0f0);
+  background: var(--oxa-shell-subtle, #fafafa);
 }
 
 .oxa-directory-pane-title,
@@ -688,7 +865,7 @@ body {
 .oxa-directory-pane-title {
   min-height: 32px;
   margin-bottom: 10px;
-  color: #27364d;
+  color: var(--oxa-shell-text, #1f1f1f);
   font-weight: 600;
 }
 
@@ -711,7 +888,7 @@ body {
 .oxa-directory-member-row small,
 .oxa-directory-selected-item small {
   overflow: hidden;
-  color: #7b879b;
+  color: var(--oxa-shell-text-secondary, #595959);
   font-size: 11px;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -726,9 +903,9 @@ body {
   display: flex;
   align-items: center;
   gap: 8px;
-  border: 1px solid #e1e7f0;
+  border: 1px solid var(--oxa-shell-border, #f0f0f0);
   border-radius: 7px;
-  background: #fff;
+  background: var(--oxa-shell-surface, #fff);
   padding: 7px;
 }
 
@@ -738,7 +915,7 @@ body {
 
 .oxa-directory-footer {
   justify-content: flex-end;
-  border-top: 1px solid #edf0f5;
+  border-top: 1px solid var(--oxa-shell-border, #f0f0f0);
   padding-top: 14px;
 }
 
@@ -749,28 +926,28 @@ body {
 
 .oxa-file-dropzone .ant-upload-drag {
   min-height: 72px;
-  border-color: #dbe3ee;
-  background: #fbfcfe;
+  border-color: var(--oxa-shell-border-strong, #d9d9d9);
+  background: var(--oxa-shell-subtle, #fafafa);
   padding: 12px;
 }
 
 .oxa-file-dropzone .ant-upload-drag-container {
   display: grid;
   gap: 5px;
-  color: #52627a;
+  color: var(--oxa-shell-text-secondary, #595959);
 }
 
 .oxa-file-dropzone small {
-  color: #8a96a9;
+  color: var(--oxa-shell-text-tertiary, #8c8c8c);
 }
 
 .oxa-file-dropzone kbd {
-  border: 1px solid #d8dee8;
+  border: 1px solid var(--oxa-shell-border-strong, #d9d9d9);
   border-bottom-width: 2px;
   border-radius: 4px;
-  background: #fff;
+  background: var(--oxa-shell-surface, #fff);
   padding: 1px 5px;
-  color: #35445b;
+  color: var(--oxa-shell-text, #1f1f1f);
   font-family: inherit;
 }
 
@@ -785,9 +962,9 @@ body {
   min-height: 50px;
   align-items: center;
   gap: 10px;
-  border: 1px solid #e2e8f0;
+  border: 1px solid var(--oxa-shell-border, #f0f0f0);
   border-radius: 8px;
-  background: #fff;
+  background: var(--oxa-shell-surface, #fff);
   padding: 7px 9px;
 }
 
@@ -797,8 +974,8 @@ body {
   height: 32px;
   place-items: center;
   border-radius: 7px;
-  background: #edf5ff;
-  color: #1677ff;
+  background: var(--oxa-shell-primary-bg, #e6f4ff);
+  color: var(--oxa-shell-primary, #1677ff);
 }
 
 .oxa-file-meta {
@@ -819,7 +996,7 @@ body {
 }
 
 .oxa-file-name-button:hover strong {
-  color: #1677ff;
+  color: var(--oxa-shell-primary, #1677ff);
 }
 
 .oxa-file-name-button:disabled {
@@ -835,14 +1012,14 @@ body {
 
 .oxa-file-meta small,
 .oxa-file-empty {
-  color: #7b879b;
+  color: var(--oxa-shell-text-secondary, #595959);
   font-size: 12px;
 }
 
 .oxa-file-error {
-  border-color: #ffccc7;
-  background: #fff2f0;
-  color: #cf1322;
+  border-color: var(--oxa-shell-error-border, #ffccc7);
+  background: var(--oxa-shell-error-bg, #fff2f0);
+  color: var(--oxa-shell-error, #ff4d4f);
 }
 
 .oxa-file-error > span {
@@ -850,7 +1027,7 @@ body {
 }
 
 .oxa-file-empty {
-  border: 1px dashed #dbe3ee;
+  border: 1px dashed var(--oxa-shell-border-strong, #d9d9d9);
   border-radius: 8px;
   padding: 10px;
   text-align: center;
@@ -881,7 +1058,7 @@ body {
 
 .oxa-file-preview-page {
   min-height: 100vh;
-  background: #eef2f7;
+  background: var(--oxa-shell-bg, #f5f5f5);
 }
 
 .oxa-file-preview-toolbar {
@@ -893,10 +1070,14 @@ body {
   align-items: center;
   justify-content: space-between;
   gap: 20px;
-  border-bottom: 1px solid #dfe5ee;
-  background: rgb(255 255 255 / 96%);
+  border-bottom: 1px solid var(--oxa-shell-border, #f0f0f0);
+  background: color-mix(
+    in srgb,
+    var(--oxa-shell-surface, #fff) 96%,
+    transparent
+  );
   padding: 10px 20px;
-  box-shadow: 0 2px 12px rgb(26 45 75 / 6%);
+  box-shadow: var(--oxa-shell-shadow, 0 1px 6px rgb(0 0 0 / 8%));
   backdrop-filter: blur(12px);
 }
 
@@ -913,7 +1094,7 @@ body {
 }
 
 .oxa-file-preview-title > .anticon {
-  color: #1677ff;
+  color: var(--oxa-shell-primary, #1677ff);
   font-size: 26px;
 }
 
@@ -931,7 +1112,7 @@ body {
 }
 
 .oxa-file-preview-title span {
-  color: #7b879b;
+  color: var(--oxa-shell-text-secondary, #595959);
   font-size: 12px;
 }
 
@@ -947,7 +1128,7 @@ body {
   height: calc(100vh - 106px);
   border: 0;
   border-radius: 8px;
-  background: #fff;
+  background: var(--oxa-shell-surface, #fff);
   box-shadow: 0 8px 32px rgb(24 42 72 / 10%);
 }
 
@@ -965,13 +1146,13 @@ body {
   height: calc(100vh - 106px);
   overflow: auto;
   border-radius: 8px;
-  background: #fff;
+  background: var(--oxa-shell-surface, #fff);
   box-shadow: 0 8px 32px rgb(24 42 72 / 10%);
 }
 
 .oxa-docx-preview .docx-wrapper {
   min-height: 100%;
-  background: #dfe4eb;
+  background: var(--oxa-shell-subtle, #fafafa);
   padding: 24px;
 }
 
@@ -989,7 +1170,7 @@ body {
   min-height: 0;
   flex: 1;
   overflow: auto;
-  border-top: 1px solid #e5eaf1;
+  border-top: 1px solid var(--oxa-shell-border, #f0f0f0);
 }
 
 .oxa-spreadsheet-scroll table {
@@ -1003,10 +1184,10 @@ body {
 .oxa-spreadsheet-scroll td {
   min-width: 96px;
   max-width: 360px;
-  border-right: 1px solid #e5eaf1;
-  border-bottom: 1px solid #e5eaf1;
+  border-right: 1px solid var(--oxa-shell-border, #f0f0f0);
+  border-bottom: 1px solid var(--oxa-shell-border, #f0f0f0);
   padding: 7px 9px;
-  background: #fff;
+  background: var(--oxa-shell-surface, #fff);
   text-align: left;
   vertical-align: top;
   white-space: pre-wrap;
@@ -1018,8 +1199,8 @@ body {
   z-index: 1;
   left: 0;
   min-width: 52px;
-  background: #f5f7fa;
-  color: #7b879b;
+  background: var(--oxa-shell-subtle, #fafafa);
+  color: var(--oxa-shell-text-secondary, #595959);
   text-align: center;
 }
 
@@ -1054,7 +1235,7 @@ body {
 }
 
 .oxa-record-meta {
-  color: #7b879b;
+  color: var(--oxa-shell-text-secondary, #595959);
   font-size: 12px;
 }
 
@@ -1069,10 +1250,7 @@ body {
 }
 
 .oxa-detail-layout {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 320px;
-  align-items: start;
-  gap: 16px;
+  display: block;
 }
 
 .oxa-detail-main,
@@ -1088,14 +1266,51 @@ body {
 
 .oxa-detail-main .ant-descriptions-item-label,
 .oxa-detail-aside .ant-descriptions-item-label {
-  color: #7b879b;
+  color: var(--oxa-shell-text-secondary, #595959);
+}
+
+.oxa-audit-collapse {
+  overflow: hidden;
+  border: 1px solid var(--oxa-shell-border, #f0f0f0);
+  border-radius: 8px;
+  background: var(--oxa-shell-surface, #fff);
+}
+
+.oxa-audit-collapse > .ant-collapse-item > .ant-collapse-header {
+  min-height: 52px;
+  align-items: center;
+  padding: 14px 18px;
+}
+
+.oxa-audit-collapse .ant-collapse-content-box {
+  padding: 0 18px 12px !important;
+}
+
+.oxa-audit-collapse-heading {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.oxa-audit-collapse-heading span {
+  color: var(--oxa-shell-text-secondary, #595959);
+  font-size: 12px;
+}
+
+.oxa-audit-loading {
+  padding: 18px 0;
+  color: var(--oxa-shell-text-secondary, #595959);
+  text-align: center;
 }
 
 .oxa-audit-entry {
   display: grid;
   gap: 4px;
   padding: 10px 0;
-  border-bottom: 1px solid #edf0f5;
+  border-bottom: 1px solid var(--oxa-shell-border, #f0f0f0);
 }
 
 .oxa-audit-entry:last-child {
@@ -1116,7 +1331,7 @@ body {
 
 .oxa-audit-meta {
   flex-wrap: wrap;
-  color: #7b879b;
+  color: var(--oxa-shell-text-secondary, #595959);
   font-size: 12px;
 }
 
@@ -1135,12 +1350,12 @@ body {
   gap: 3px;
   padding: 7px 8px;
   border-radius: 6px;
-  background: #f7f9fc;
+  background: var(--oxa-shell-subtle, #fafafa);
 }
 
 .oxa-audit-change-values {
   min-width: 0;
-  color: #47566f;
+  color: var(--oxa-shell-text-secondary, #595959);
   font-size: 12px;
 }
 
@@ -1152,7 +1367,7 @@ body {
 }
 
 .oxa-audit-entry > span {
-  color: #7b879b;
+  color: var(--oxa-shell-text-secondary, #595959);
   font-size: 12px;
 }
 
@@ -1164,21 +1379,21 @@ body {
   justify-content: space-between;
   gap: 8px;
   padding: 9px 12px;
-  border: 1px solid #d9dfe9;
+  border: 1px solid var(--oxa-shell-border-strong, #d9d9d9);
   border-radius: 8px;
-  background: #fff;
-  color: #1f2b3d;
+  background: var(--oxa-shell-surface, #fff);
+  color: var(--oxa-shell-text, #1f1f1f);
   font: inherit;
   text-align: left;
 }
 
 .oxa-mobile-reference-trigger:disabled {
-  background: #f5f7fa;
-  color: #9aa5b5;
+  background: var(--oxa-shell-subtle, #fafafa);
+  color: var(--oxa-shell-text-disabled, rgb(0 0 0 / 25%));
 }
 
 .oxa-mobile-reference-placeholder {
-  color: #9aa5b5;
+  color: var(--oxa-shell-text-disabled, rgb(0 0 0 / 25%));
 }
 
 .oxa-mobile-reference-backdrop {
@@ -1187,7 +1402,7 @@ body {
   inset: 0;
   display: flex;
   align-items: flex-end;
-  background: rgb(15 23 42 / 42%);
+  background: var(--oxa-shell-mask, rgb(0 0 0 / 45%));
 }
 
 .oxa-mobile-reference-sheet {
@@ -1198,7 +1413,7 @@ body {
   padding: 16px 16px max(16px, env(safe-area-inset-bottom));
   overflow: auto;
   border-radius: 16px 16px 0 0;
-  background: #fff;
+  background: var(--oxa-shell-elevated, #fff);
   box-shadow: 0 -8px 32px rgb(15 23 42 / 18%);
 }
 
@@ -1206,7 +1421,7 @@ body {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  color: #1f2b3d;
+  color: var(--oxa-shell-text, #1f1f1f);
 }
 
 .oxa-mobile-reference-header button,
@@ -1214,7 +1429,7 @@ body {
 .oxa-mobile-reference-confirm {
   border: 0;
   background: transparent;
-  color: #2d6cdf;
+  color: var(--oxa-shell-primary, #1677ff);
   font: inherit;
 }
 
@@ -1236,17 +1451,17 @@ body {
   border: 0;
   border-radius: 8px;
   background: transparent;
-  color: #1f2b3d;
+  color: var(--oxa-shell-text, #1f1f1f);
   font: inherit;
   text-align: left;
 }
 
 .oxa-mobile-reference-option.is-selected {
-  background: #edf4ff;
+  background: var(--oxa-shell-primary-bg, #e6f4ff);
 }
 
 .oxa-mobile-reference-option:disabled {
-  color: #aab3c0;
+  color: var(--oxa-shell-text-disabled, rgb(0 0 0 / 25%));
   opacity: 0.7;
 }
 
@@ -1259,7 +1474,7 @@ body {
 
 .oxa-mobile-reference-option-copy small {
   overflow: hidden;
-  color: #7b879b;
+  color: var(--oxa-shell-text-secondary, #595959);
   font-size: 12px;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1269,26 +1484,26 @@ body {
 .oxa-mobile-reference-empty,
 .oxa-mobile-reference-error {
   padding: 12px 4px;
-  color: #7b879b;
+  color: var(--oxa-shell-text-secondary, #595959);
   font-size: 13px;
   text-align: center;
 }
 
 .oxa-mobile-reference-error {
-  color: #cf3c46;
+  color: var(--oxa-shell-error, #ff4d4f);
 }
 
 .oxa-mobile-reference-more,
 .oxa-mobile-reference-confirm {
   min-height: 42px;
   border-radius: 8px;
-  background: #f0f5ff;
+  background: var(--oxa-shell-primary-bg, #e6f4ff);
   font-weight: 600;
   text-align: center;
 }
 
 .oxa-mobile-reference-confirm {
-  background: #2d6cdf;
+  background: var(--oxa-shell-primary, #1677ff);
   color: #fff;
 }
 
@@ -1303,16 +1518,16 @@ body {
   min-height: 42px;
   align-items: center;
   justify-content: center;
-  border: 1px solid #d9dfe9 !important;
+  border: 1px solid var(--oxa-shell-border-strong, #d9d9d9) !important;
   border-radius: 8px;
-  background: #fff !important;
-  color: #2d6cdf;
+  background: var(--oxa-shell-surface, #fff) !important;
+  color: var(--oxa-shell-primary, #1677ff);
   font-weight: 600;
 }
 
 .oxa-mobile-file-button.ant-btn:disabled {
-  background: #f5f7fa;
-  color: #9aa5b5;
+  background: var(--oxa-shell-subtle, #fafafa);
+  color: var(--oxa-shell-text-disabled, rgb(0 0 0 / 25%));
 }
 
 .oxa-mobile-pending-files {
@@ -1326,9 +1541,9 @@ body {
   align-items: center;
   gap: 8px;
   padding: 7px 9px;
-  border: 1px solid #dbe3ee;
+  border: 1px solid var(--oxa-shell-border, #f0f0f0);
   border-radius: 8px;
-  background: #fbfcfe;
+  background: var(--oxa-shell-subtle, #fafafa);
   font-size: 13px;
 }
 
@@ -1347,19 +1562,19 @@ body {
 }
 
 .oxa-mobile-pending-file-copy small {
-  color: #7b879b;
+  color: var(--oxa-shell-text-secondary, #595959);
   font-size: 12px;
 }
 
 .oxa-mobile-pending-status {
-  color: #2d6cdf;
+  color: var(--oxa-shell-primary, #1677ff);
   white-space: nowrap;
 }
 
 .oxa-mobile-pending-error {
   max-width: 42%;
   overflow: hidden;
-  color: #cf3c46;
+  color: var(--oxa-shell-error, #ff4d4f);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -1370,10 +1585,6 @@ body {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .oxa-detail-layout {
-    grid-template-columns: 1fr;
-  }
-
   .oxa-detail-aside {
     position: static;
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -1382,23 +1593,23 @@ body {
 
 @media (max-width: 900px) {
   .oxa-topbar {
-    height: 80px;
-    padding: 12px 16px !important;
-  }
-
-  .oxa-topbar-page .ant-breadcrumb {
-    display: none;
+    height: 52px;
+    padding: 0 12px !important;
   }
 
   .oxa-current-user {
     min-width: 0;
   }
 
-  .oxa-current-user-copy,
+  .oxa-current-user strong,
   .oxa-current-user-chevron {
     display: none;
   }
 
+  .oxa-route-history {
+    top: 52px;
+  }
+
   .oxa-main {
     padding: 16px;
   }
@@ -1409,6 +1620,22 @@ body {
     grid-template-columns: 1fr;
   }
 
+  .oxa-search-panel {
+    grid-template-columns: 1fr;
+  }
+
+  .oxa-filter-actions,
+  .oxa-list-toolbar,
+  .oxa-batch-bar {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .oxa-list-toolbar-primary,
+  .oxa-list-toolbar-secondary {
+    flex-wrap: wrap;
+  }
+
   .oxa-detail-hero-main,
   .oxa-detail-hero-top,
   .oxa-edit-hero-title,
@@ -1430,7 +1657,7 @@ body {
   .oxa-directory-tree-pane,
   .oxa-directory-selected-pane {
     border: 0;
-    border-bottom: 1px solid #edf0f5;
+    border-bottom: 1px solid var(--oxa-shell-border, #f0f0f0);
   }
 
   .oxa-directory-tree-pane,
@@ -1440,3 +1667,11 @@ body {
     overflow: auto;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .oxa-global-request-loading span {
+    width: 100%;
+    animation: none;
+    transform: none;
+  }
+}