:root {
  --reya-bg: #f5f7fb;
  --reya-card: #ffffff;
  --reya-line: #e5e8ef;
  --reya-text: #1d2533;
  --reya-muted: #667085;
  --reya-green: #00b96b;
  --reya-green-dark: #00a461;
  --reya-blue: #2f80ed;
  --reya-topbar: rgba(255, 255, 255, 0.94);
  --reya-soft: #f8fafc;
  --reya-panel: #fbfcff;
  --reya-radius: 12px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --reya-bg: #10141c;
  --reya-card: #171c26;
  --reya-line: #293142;
  --reya-text: #e6eaf2;
  --reya-muted: #9aa4b5;
  --reya-green: #21c983;
  --reya-green-dark: #18b875;
  --reya-blue: #69a7ff;
  --reya-topbar: rgba(23, 28, 38, 0.94);
  --reya-soft: #1f2633;
  --reya-panel: #151a23;
}

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

body {
  background: var(--reya-bg);
  color: var(--reya-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
}

body,
.admin-layout,
.admin-content,
.admin-sider,
.topbar {
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.admin-layout .arco-card,
.admin-layout .arco-card-bordered,
.admin-layout .arco-table-container,
.admin-layout .arco-table,
.admin-layout .arco-table-content,
.admin-layout .arco-descriptions,
.admin-layout .arco-drawer,
.admin-layout .arco-modal,
.admin-layout .arco-alert,
.metric-item,
.quick-action,
.detail-text,
.mini-series,
.coverage-item,
.tool-stat-item,
.empty-panel,
.user-stat-item,
.activity-list,
.ad-variable-row,
.compliance-item,
.manual-card {
  border-radius: var(--reya-radius);
}

.admin-layout .arco-card,
.admin-layout .arco-card-bordered,
.admin-layout .arco-table-container,
.admin-layout .arco-table,
.admin-layout .arco-descriptions,
.admin-layout .activity-list {
  overflow: hidden;
}

.login-page {
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 24px;
  background:
    radial-gradient(circle at 16% 78%, rgba(47, 128, 237, 0.13), transparent 20%),
    radial-gradient(circle at 78% 24%, rgba(0, 185, 107, 0.14), transparent 18%),
    linear-gradient(145deg, #f8fbff 0%, #eef7ff 48%, #f6fff8 100%);
}

.login-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 62%, rgba(255, 255, 255, 0.62) 62% 100%),
    linear-gradient(245deg, transparent 0 58%, rgba(226, 239, 247, 0.5) 58% 100%);
  opacity: 0.8;
  pointer-events: none;
}

.login-panel {
  position: relative;
  z-index: 1;
  width: 360px;
}

.brand-logo {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: cover;
}

.login-product {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  font-size: 22px;
  color: #202934;
}

.login-product strong {
  font-weight: 800;
  line-height: 1.2;
}

.login-panel .arco-form-item {
  margin-bottom: 12px;
}

.login-panel .arco-form-item-content {
  width: 100%;
}

.login-panel .arco-input-wrapper {
  height: 38px;
  border: 1px solid rgba(134, 148, 166, 0.36);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: none;
}

.login-panel .arco-input-wrapper:hover,
.login-panel .arco-input-wrapper.arco-input-focus {
  border-color: rgba(0, 185, 107, 0.72);
  box-shadow: 0 0 0 3px rgba(0, 185, 107, 0.1);
}

.login-panel .arco-input,
.login-panel .arco-input-password {
  font-size: 14px;
}

.login-panel .arco-input::placeholder,
.login-panel .arco-input-password input::placeholder {
  color: #98a2b3;
}

.login-panel .arco-input-prefix svg {
  font-size: 16px;
  color: #66748a;
}

.captcha-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 126px;
  gap: 10px;
}

.captcha-code {
  height: 38px;
  border: 0;
  border-radius: 4px;
  background:
    repeating-linear-gradient(12deg, rgba(0, 185, 107, 0.15) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(106deg, rgba(28, 91, 255, 0.18) 0 2px, transparent 2px 13px),
    #fbfdff;
  color: #152033;
  cursor: pointer;
  font-size: 23px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0;
  box-shadow: inset 0 0 0 1px rgba(134, 148, 166, 0.2);
}

.captcha-code:hover,
.captcha-code:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(0, 185, 107, 0.58), 0 0 0 3px rgba(0, 185, 107, 0.1);
}

.captcha-code span {
  display: inline-block;
  margin: 0 3px;
}

.captcha-code span:nth-child(2n) {
  color: var(--reya-green);
}

.login-submit,
.login-submit.arco-btn-primary {
  margin-top: 6px;
  height: 40px;
  border-radius: 5px;
  font-size: 15px;
  background: var(--reya-green);
  border-color: var(--reya-green);
  box-shadow: 0 10px 24px rgba(0, 185, 107, 0.26);
}

.login-submit:hover,
.login-submit:focus,
.login-submit.arco-btn-primary:hover,
.login-submit.arco-btn-primary:focus {
  background: var(--reya-green-dark);
  border-color: var(--reya-green-dark);
}

.login-footnote {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
  color: #667085;
  font-size: 11px;
}

.login-footnote span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.login-footnote svg {
  color: var(--reya-green);
}

.login-bg-shape {
  position: absolute;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 24px 70px rgba(54, 80, 111, 0.08);
}

.login-bg-square {
  width: 210px;
  height: 210px;
  top: 16%;
  left: 22.5%;
}

.login-bg-circle-left {
  width: 520px;
  height: 520px;
  left: -115px;
  bottom: -170px;
  border-radius: 50%;
}

.login-bg-circle-right {
  width: 310px;
  height: 310px;
  right: 12.5%;
  bottom: -42px;
  border-radius: 50%;
}

.login-bg-diamond {
  width: 300px;
  height: 300px;
  right: -74px;
  top: 30%;
  transform: rotate(45deg);
  border-radius: 42px;
}

.admin-layout {
  min-height: 100vh;
  background: var(--reya-bg);
}

.admin-sider {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  height: 100vh;
  overflow-y: auto;
  background: var(--reya-card);
  border-right: 1px solid var(--reya-line);
  box-shadow: 4px 0 18px rgba(15, 23, 42, 0.03);
}

.brand {
  height: 62px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border-bottom: 1px solid var(--reya-line);
}

.brand strong {
  display: block;
  font-size: 17px;
  color: var(--reya-text);
}

.brand span {
  color: var(--reya-muted);
  font-size: 12px;
}

.admin-sider .arco-menu {
  padding: 8px 8px;
}

.admin-sider .arco-menu-item {
  border-radius: var(--reya-radius);
  color: var(--reya-muted);
}

.admin-sider .arco-menu-item:hover {
  background: rgba(0, 185, 107, 0.08);
  color: var(--reya-green);
}

.admin-sider .arco-menu-selected,
.admin-sider .arco-menu-selected:hover {
  background: rgba(0, 185, 107, 0.12) !important;
  color: var(--reya-green) !important;
}

.admin-sider .arco-menu-selected .arco-icon,
.admin-sider .arco-menu-selected:hover .arco-icon {
  color: var(--reya-green) !important;
}

.topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 248px;
  z-index: 18;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  background: var(--reya-topbar);
  border-bottom: 1px solid var(--reya-line);
  backdrop-filter: blur(12px);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.page-title {
  font-weight: 700;
  font-size: 18px;
  color: var(--reya-text);
}

.page-subtitle {
  color: var(--reya-muted);
  font-size: 12px;
  margin-top: 2px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-content {
  margin-left: 248px;
  padding: 80px 22px 32px;
  background: var(--reya-bg);
  min-height: 100vh;
}

.page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  border-top: 1px solid var(--reya-line);
  margin-top: 18px;
  padding-top: 14px;
}

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

.ai-metric-grid > .arco-card {
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.ai-metric-grid > .arco-card:nth-child(4n + 1) {
  background: linear-gradient(135deg, #eff6ff 0%, #f8fbff 100%);
}

.ai-metric-grid > .arco-card:nth-child(4n + 2) {
  background: linear-gradient(135deg, #ecfdf5 0%, #f6fff9 100%);
}

.ai-metric-grid > .arco-card:nth-child(4n + 3) {
  background: linear-gradient(135deg, #f4f0ff 0%, #fbf8ff 100%);
}

.ai-metric-grid > .arco-card:nth-child(4n) {
  background: linear-gradient(135deg, #fff7ed 0%, #fffaf5 100%);
}

.metric-item {
  min-height: 92px;
  padding: 16px 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.metric-label {
  color: var(--reya-muted);
}

.metric-value {
  margin-top: 8px;
  font-size: 28px;
  font-weight: 700;
}

.metric-item-hot {
  background: linear-gradient(135deg, #fff4f2 0%, #fff9f6 100%);
}

.metric-item-collection {
  background: linear-gradient(135deg, #ecfdf5 0%, #f6fff9 100%);
}

.metric-item-ai {
  background: linear-gradient(135deg, #f4f0ff 0%, #fbf8ff 100%);
}

.metric-item-users {
  background: linear-gradient(135deg, #eff6ff 0%, #f8fbff 100%);
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.quick-action {
  height: 76px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, 0.18);
  color: var(--reya-text);
  cursor: pointer;
  transition: 0.18s ease;
}

.quick-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.quick-action-hot {
  background: #fff4f2;
  color: #b42318;
}

.quick-action-ai {
  background: #f4f0ff;
  color: #6941c6;
}

.quick-action-source {
  background: #eff6ff;
  color: #175cd3;
}

.quick-action-sync {
  background: #ecfdf5;
  color: #067647;
}

.quick-action-init {
  background: #fff7ed;
  color: #c2410c;
}

.quick-action-user {
  background: #eef4ff;
  color: #3538cd;
}

.section {
  margin-top: 16px;
}

.compact-card {
  border-radius: var(--reya-radius);
}

.compact-card h2 {
  margin: 0 0 8px;
  line-height: 1.3;
}

.card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 16px;
}

.muted {
  color: var(--reya-muted);
  margin: 0;
  line-height: 1.6;
}

.status-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.status-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--reya-green);
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.setting-form {
  max-width: 780px;
}

.filter-grid {
  display: grid;
  gap: 10px;
}

.trend-filter-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.trend-search-card .card-title {
  align-items: flex-end;
}

.detail-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.detail-section {
  margin-top: 18px;
}

.detail-section h3 {
  margin: 0 0 8px;
}

.detail-text {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--reya-line);
  background: var(--reya-soft);
  color: var(--reya-text);
  white-space: pre-wrap;
}

.mini-series {
  height: 120px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--reya-line);
  background: var(--reya-soft);
}

.mini-series span {
  flex: 1;
  min-width: 10px;
  max-height: 96px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #2f80ed, #22c55e);
}

.calendar-list,
.movement-list {
  display: grid;
  gap: 10px;
}

.calendar-item,
.movement-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--reya-line);
}

.calendar-item:last-child,
.movement-item:last-child {
  border-bottom: 0;
}

.coverage-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.coverage-item {
  min-height: 104px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #eff6ff;
}

.coverage-item:nth-child(4n + 2) {
  background: #ecfdf5;
}

.coverage-item:nth-child(4n + 3) {
  background: #f4f0ff;
}

.coverage-item:nth-child(4n) {
  background: #fff7ed;
}

.coverage-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tool-stat-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tool-stat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #eff6ff;
}

.tool-stat-item:nth-child(3n + 2) {
  background: #ecfdf5;
}

.tool-stat-item:nth-child(3n) {
  background: #fff7ed;
}

.empty-panel {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--reya-muted);
  background: var(--reya-panel);
  border: 1px dashed var(--reya-line);
}

.user-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--reya-line);
}

.user-owner {
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 700;
}

.user-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.user-stat-item {
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #eff6ff;
}

.user-stat-item:nth-child(4n + 2) {
  background: #ecfdf5;
}

.user-stat-item:nth-child(4n + 3) {
  background: #f4f0ff;
}

.user-stat-item:nth-child(4n) {
  background: #fff7ed;
}

.user-stat-item span {
  display: block;
  color: var(--reya-muted);
}

.user-stat-item strong {
  display: block;
  margin-top: 6px;
  font-size: 22px;
}

.activity-list {
  border: 1px solid var(--reya-line);
  overflow: hidden;
}

.activity-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--reya-line);
  background: var(--reya-card);
}

.activity-item:last-child {
  border-bottom: 0;
}

.activity-time {
  flex: 0 0 auto;
  color: var(--reya-muted);
  font-size: 12px;
}

.compact-form-grid {
  gap: 12px;
}

.preview-panel {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--reya-line);
}

.preview-panel h3 {
  margin: 0;
}

.preview-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--reya-line);
}

.preview-item:last-child {
  border-bottom: 0;
}

.source-name-cell {
  min-width: 0;
}

.source-name-cell strong,
.source-url {
  display: block;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-url {
  margin-top: 4px;
  font-size: 12px;
}

.source-note {
  display: -webkit-box;
  max-width: 410px;
  overflow: hidden;
  color: var(--reya-text);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-height: 1.5;
}

.variable-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.drawer-subtitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 0 10px;
}

.ad-variable-editor {
  display: grid;
  gap: 10px;
}

.ad-variable-row {
  display: grid;
  grid-template-columns: minmax(96px, 1fr) minmax(110px, 1fr) minmax(140px, 1.3fr) 64px 64px 58px;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--reya-line);
  background: var(--reya-soft);
}

.ad-variable-desc {
  grid-column: 1 / -1;
}

.table-action-grid {
  display: grid;
  grid-template-columns: repeat(2, 58px);
  gap: 8px;
}

.table-action-grid .arco-btn {
  width: 58px;
  padding: 0;
}

.system-grid .setting-form {
  max-width: 100%;
}

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

.danger-text {
  color: rgb(var(--danger-6));
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.doc-section {
  margin-top: 18px;
}

.doc-section-head,
.compliance-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.doc-section h3,
.manual-card h3 {
  margin: 0 0 4px;
  font-size: 16px;
}

.api-path {
  color: rgb(var(--primary-6));
}

.compliance-grid,
.manual-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.compliance-item,
.manual-card {
  border: 1px solid rgba(148, 163, 184, 0.18);
  padding: 16px;
  background: #eff6ff;
}

.compliance-item:nth-child(3n + 2),
.manual-card:nth-child(3n + 2) {
  background: #ecfdf5;
}

.compliance-item:nth-child(3n),
.manual-card:nth-child(3n) {
  background: #fff7ed;
}

.compliance-item p {
  margin: 10px 0 0;
  color: var(--color-text-2);
  line-height: 1.7;
}

.doc-list,
.manual-card ol {
  margin: 0;
  padding-left: 20px;
  color: var(--color-text-2);
  line-height: 1.8;
}

:root[data-theme="dark"] .login-page {
  background:
    radial-gradient(circle at 16% 78%, rgba(105, 167, 255, 0.16), transparent 20%),
    radial-gradient(circle at 78% 24%, rgba(33, 201, 131, 0.16), transparent 18%),
    linear-gradient(145deg, #111827 0%, #10141c 52%, #121a22 100%);
}

:root[data-theme="dark"] .login-page::before,
:root[data-theme="dark"] .login-bg-shape {
  opacity: 0.2;
}

:root[data-theme="dark"] .login-product,
:root[data-theme="dark"] .login-panel .arco-input-prefix svg {
  color: var(--reya-text);
}

:root[data-theme="dark"] .login-footnote {
  color: var(--reya-muted);
}

:root[data-theme="dark"] .captcha-code {
  background:
    repeating-linear-gradient(12deg, rgba(33, 201, 131, 0.18) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(106deg, rgba(105, 167, 255, 0.18) 0 2px, transparent 2px 13px),
    #151a23;
  color: var(--reya-text);
}

:root[data-theme="dark"] .arco-layout,
:root[data-theme="dark"] .arco-layout-sider,
:root[data-theme="dark"] .arco-menu,
:root[data-theme="dark"] .arco-card,
:root[data-theme="dark"] .arco-table,
:root[data-theme="dark"] .arco-tabs-content,
:root[data-theme="dark"] .arco-drawer,
:root[data-theme="dark"] .arco-modal {
  background-color: var(--reya-card);
  color: var(--reya-text);
}

:root[data-theme="dark"] .arco-card,
:root[data-theme="dark"] .arco-table,
:root[data-theme="dark"] .arco-descriptions,
:root[data-theme="dark"] .arco-tabs-nav::before {
  border-color: var(--reya-line);
}

:root[data-theme="dark"] .arco-card-header,
:root[data-theme="dark"] .arco-table-th,
:root[data-theme="dark"] .arco-table-td,
:root[data-theme="dark"] .arco-descriptions-item-label,
:root[data-theme="dark"] .arco-descriptions-item-value {
  background: var(--reya-card);
  border-color: var(--reya-line);
  color: var(--reya-text);
}

:root[data-theme="dark"] .arco-table-tr:hover .arco-table-td,
:root[data-theme="dark"] .arco-table-tr-hover .arco-table-td {
  background: #202735;
}

:root[data-theme="dark"] .arco-input-wrapper,
:root[data-theme="dark"] .arco-input-number,
:root[data-theme="dark"] .arco-select-view,
:root[data-theme="dark"] .arco-textarea-wrapper {
  background: var(--reya-soft);
  border-color: var(--reya-line);
  color: var(--reya-text);
}

:root[data-theme="dark"] .arco-input,
:root[data-theme="dark"] .arco-input-password,
:root[data-theme="dark"] .arco-input-number-input,
:root[data-theme="dark"] .arco-select-view-value {
  color: var(--reya-text);
}

:root[data-theme="dark"] .arco-input::placeholder,
:root[data-theme="dark"] .arco-input-password input::placeholder {
  color: #7f8a9d;
}

:root[data-theme="dark"] .arco-btn-secondary,
:root[data-theme="dark"] .arco-btn-outline {
  background: var(--reya-soft);
  border-color: var(--reya-line);
  color: var(--reya-text);
}

:root[data-theme="dark"] .ai-metric-grid > .arco-card:nth-child(n),
:root[data-theme="dark"] .metric-item,
:root[data-theme="dark"] .quick-action,
:root[data-theme="dark"] .coverage-item,
:root[data-theme="dark"] .tool-stat-item,
:root[data-theme="dark"] .user-stat-item,
:root[data-theme="dark"] .compliance-item,
:root[data-theme="dark"] .manual-card {
  background: linear-gradient(135deg, #171c26 0%, #1f2633 100%);
  border-color: var(--reya-line);
}

:root[data-theme="dark"] .quick-action-hot,
:root[data-theme="dark"] .quick-action-ai,
:root[data-theme="dark"] .quick-action-source,
:root[data-theme="dark"] .quick-action-sync,
:root[data-theme="dark"] .quick-action-init,
:root[data-theme="dark"] .quick-action-user {
  color: var(--reya-text);
}

@media (max-width: 1180px) {
  .page-grid,
  .two-col {
    grid-template-columns: 1fr;
  }

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

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

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

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

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

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

@media (max-width: 640px) {
  .login-page {
    padding: 28px 18px;
  }

  .login-page::before,
  .login-bg-shape {
    opacity: 0.45;
  }

  .login-panel {
    width: 100%;
  }

  .login-product {
    margin-bottom: 18px;
    font-size: 20px;
  }

  .captcha-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .captcha-code {
    width: 100%;
  }

  .login-footnote {
    flex-wrap: wrap;
    gap: 10px 18px;
  }

  .admin-layout {
    display: block;
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .admin-layout .arco-layout,
  .admin-layout .arco-layout-content {
    display: block;
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .admin-sider {
    position: sticky;
    top: 0;
    inset: auto;
    width: 100% !important;
    max-width: 100vw;
    flex: 0 0 auto !important;
    height: auto;
    overflow: visible;
    background: #fff;
    border-right: 0;
    border-bottom: 1px solid var(--reya-line);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
  }

  .brand {
    height: 58px;
    padding: 0 14px;
  }

  .brand-logo {
    width: 38px;
    height: 38px;
  }

  .admin-sider .arco-menu {
    display: flex;
    gap: 8px;
    padding: 8px 10px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
  }

  .admin-sider .arco-menu::-webkit-scrollbar {
    display: none;
  }

  .admin-sider .arco-menu-inner {
    display: flex;
    gap: 8px;
  }

  .admin-sider .arco-menu-item {
    flex: 0 0 auto;
    width: auto !important;
    height: 38px;
    margin: 0;
    padding: 0 14px !important;
    border-radius: 6px;
  }

  .topbar {
    position: static;
    top: auto;
    left: 0;
    height: auto;
    min-height: 58px;
    padding: 10px 14px;
    align-items: flex-start;
    z-index: auto;
  }

  .topbar-left {
    min-width: 0;
    flex: 1;
  }

  .topbar-right {
    display: none;
  }

  .page-title {
    font-size: 18px;
    line-height: 1.25;
  }

  .page-subtitle {
    max-width: 100%;
    line-height: 1.45;
    white-space: normal;
  }

  .admin-content {
    margin-left: 0;
    padding: 14px 10px 24px;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    min-width: 0;
    overflow-x: hidden;
  }

  .metric-grid,
  .ai-metric-grid,
  .coverage-grid,
  .user-stat-grid,
  .compliance-grid,
  .manual-grid,
  .trend-filter-grid,
  .quick-grid {
    grid-template-columns: 1fr;
  }

  .compact-card h2 {
    font-size: 20px;
  }

  .metric-grid {
    margin-top: 20px;
    padding-top: 16px;
    gap: 12px;
  }

  .metric-item {
    min-height: 128px;
    padding: 18px 20px;
  }

  .metric-value {
    font-size: 34px;
    line-height: 1.15;
  }

  .card-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .arco-card {
    overflow: hidden;
    max-width: 100%;
  }

  .arco-table,
  .arco-table-container {
    width: 100%;
    max-width: 100%;
  }

  .arco-table-content,
  .arco-table-container {
    overflow-x: auto;
  }

  .arco-table-th,
  .arco-table-td {
    word-break: keep-all;
  }

  .compliance-grid,
  .manual-grid {
    grid-template-columns: 1fr;
  }
}