:root {
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --line: #d2d2d7;
  --page: #f5f5f7;
  --surface: #ffffff;
  --nav: #f5f5f7;
  --nav-muted: #6e6e73;
  --teal: #0071e3;
  --teal-soft: #e8f2ff;
  --red: #ff3b30;
  --red-soft: #fff0ef;
  --orange: #ff9500;
  --orange-soft: #fff5e6;
  --yellow: #9b6800;
  --yellow-soft: #fff7d6;
  --blue: #0071e3;
  --blue-soft: #e8f2ff;
  --green: #248a3d;
  --green-soft: #edf8ef;
  --purple: #8944ab;
  --purple-soft: #f7effb;
  --gray-soft: #f0f0f2;
}

body {
  color: var(--ink);
  background: var(--page);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.app-shell {
  grid-template-columns: 216px minmax(0, 1fr);
}

.sidebar {
  color: var(--ink);
  background: rgba(245, 245, 247, .9);
  border-right: 1px solid rgba(0, 0, 0, .08);
  backdrop-filter: saturate(180%) blur(22px);
}

.brand-mark {
  color: #fff;
  background: var(--blue);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 113, 227, .2);
}

.brand strong {
  font-weight: 600;
}

.brand small,
.sidebar-foot small {
  color: var(--muted);
}

.nav-item {
  color: var(--muted);
  border-radius: 8px;
}

.nav-item:hover {
  color: var(--ink);
  background: rgba(0, 0, 0, .045);
}

.nav-item.active {
  color: var(--blue);
  background: rgba(0, 113, 227, .1);
}

.sidebar-foot {
  border-top-color: rgba(0, 0, 0, .08);
}

main {
  padding: 28px 32px 40px;
}

.eyebrow {
  color: var(--blue);
  font-weight: 600;
  text-transform: none;
}

.topbar h1,
.dialog-head h2,
.login-form h1 {
  font-weight: 600;
  letter-spacing: 0;
}

.primary-button {
  color: #fff;
  background: var(--blue);
  border-radius: 8px;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

.primary-button:hover {
  background: #0077ed;
}

.icon-button {
  color: var(--ink);
  background: rgba(255, 255, 255, .86);
  border-color: rgba(0, 0, 0, .12);
  border-radius: 8px;
}

.icon-button:hover {
  background: #fff;
}

#refreshButton svg {
  animation: none !important;
  transform: none !important;
}

.summary {
  gap: 10px;
}

.summary-item {
  background: rgba(255, 255, 255, .9);
  border-color: rgba(0, 0, 0, .08);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .035);
}

.summary-item:hover {
  transform: none;
  border-color: rgba(0, 0, 0, .15);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .055);
}

.summary-icon {
  border-radius: 8px;
}

.workspace {
  overflow: hidden;
  background: rgba(255, 255, 255, .94);
  border-color: rgba(0, 0, 0, .1);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .035);
}

.toolbar {
  border-bottom-color: rgba(0, 0, 0, .08);
}

.tab {
  font-weight: 500;
}

.tab.active {
  color: var(--blue);
}

.tab.active::after {
  background: var(--blue);
}

.search,
.filters select,
.auth-input,
.page-summary select {
  color: var(--ink);
  background: rgba(255, 255, 255, .9);
  border-color: rgba(0, 0, 0, .14);
  border-radius: 8px;
}

.search:focus-within,
.auth-input:focus {
  border-color: var(--blue);
  outline: 3px solid rgba(0, 113, 227, .16);
}

th {
  color: var(--muted);
  background: #f7f7f9;
  font-weight: 500;
}

th,
td {
  border-bottom-color: rgba(0, 0, 0, .065);
}

tbody tr:hover {
  background: rgba(0, 113, 227, .035);
}

.source-badge {
  color: var(--blue);
  background: var(--blue-soft);
  border-radius: 6px;
}

.avatar {
  color: var(--blue);
  background: var(--blue-soft);
}

.page-arrow,
.page-number,
.row-action {
  border-radius: 7px;
}

.page-number.active {
  background: var(--blue);
  border-color: var(--blue);
}

.row-action {
  color: var(--blue);
}

.row-action:hover {
  background: var(--blue-soft);
}

.modal-backdrop {
  background: rgba(0, 0, 0, .32);
  backdrop-filter: blur(8px);
}

.modal {
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .2);
}

.login-page {
  background: #f5f5f7;
}

.login-shell {
  overflow: hidden;
  border-color: rgba(0, 0, 0, .1);
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .09);
}

.login-brand {
  color: var(--ink);
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  border-radius: 0;
}

.login-brand small {
  color: var(--muted);
}

.login-form {
  background: #fff;
}

.role-strip {
  background: #fbfbfd;
}

@media (max-width: 760px) {
  .sidebar {
    border-right: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
  }

  main {
    padding: 18px 12px 28px;
  }
}