:root {
  --pe-blue: #3E6AE1;
  --pe-blue-hover: #3457C8;
  --pe-system-color: #B7791F;
  --pe-system-hover: #925A10;
  --pe-system-soft: #FFF4E0;
  --pe-system-border: #F2D19B;
  --pe-system-rgb: 183, 121, 31;
  --pe-white: #FFFFFF;
  --pe-ash: #F4F4F4;
  --pe-carbon: #171A20;
  --pe-graphite: #393C41;
  --pe-pewter: #5C5E62;
  --pe-fog: #8E8E8E;
  --pe-cloud: #EEEEEE;
  --pe-silver: #D0D1D2;
  --bg: var(--pe-ash);
  --panel: var(--pe-white);
  --surface: var(--pe-white);
  --line: var(--pe-cloud);
  --border: var(--pe-cloud);
  --border2: var(--pe-silver);
  --text: var(--pe-carbon);
  --muted: var(--pe-pewter);
  --hint: var(--pe-fog);
  --accent: var(--pe-blue);
  --blue: var(--pe-blue);
  --accent-soft: var(--pe-ash);
  --blue-bg: var(--pe-ash);
  --blue-light: var(--pe-cloud);
  --radius: 4px;
  --radius-lg: 8px;
  --shadow: none;
}

* {
  letter-spacing: 0 !important;
}

html {
  background: var(--pe-ash);
}

body {
  background: var(--pe-ash) !important;
  color: var(--pe-carbon) !important;
  font-family: "Universal Sans Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 14px;
  line-height: 1.43;
}

header,
.topbar,
.pe-slogan,
.card-header,
.family-header,
.done-group-head,
.notif-header {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: var(--pe-cloud) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px);
}

header {
  min-height: 56px !important;
}

main,
.content,
.page,
.main,
.main-wrap {
  background: transparent !important;
}

.sidebar {
  background: rgba(255, 255, 255, 0.94) !important;
  color: var(--pe-graphite) !important;
  border-right: 1px solid var(--pe-cloud) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px);
}

.sidebar-logo,
.sidebar-footer {
  border-color: var(--pe-cloud) !important;
}

.brand,
.brand-text strong,
.brand-logo-cn,
.brand-system h1,
.sidebar-logo h1,
.user-name,
.topbar-title,
.page-title h2,
.card-title,
.family-title,
.action-news-title,
.title {
  color: var(--pe-carbon) !important;
  font-weight: 500 !important;
}

.brand-logo-en,
.brand-text span,
.brand-system p,
.sidebar-logo .brand,
.user-role,
.muted,
.subtitle,
.footer,
.meta,
.label,
.stat-label,
.stat-sub,
.info-label,
.done-item-meta,
.notif-time {
  color: var(--pe-pewter) !important;
}

.sidebar-logo h1 span,
.user a,
.helper a,
.topbar-slogan,
.pe-slogan,
.action-news-go {
  color: var(--pe-blue) !important;
}

.nav-label,
.nav-section {
  color: var(--pe-pewter) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: none !important;
}

.nav a,
.nav-link {
  color: var(--pe-graphite) !important;
  border-left-color: transparent !important;
  border-radius: 4px !important;
  margin: 2px 8px !important;
  padding: 8px 12px !important;
  transition: color 0.33s, background-color 0.33s, border-color 0.33s !important;
}

.nav a:hover,
.nav-link:hover {
  background: var(--pe-ash) !important;
  color: var(--pe-carbon) !important;
}

.nav a.active,
.nav-link.active {
  background: rgba(62, 106, 225, 0.10) !important;
  color: var(--pe-carbon) !important;
  box-shadow: inset 0 0 0 1px rgba(62, 106, 225, 0.20) !important;
}

.card,
.panel,
.kpi,
.stat-card,
.family-block,
.family-button,
.help-card,
.done-group,
.layer,
.table-scroll,
.modal-panel,
.notif-dropdown,
.summary-bar,
.toast,
.read-only,
table {
  background: var(--pe-white) !important;
  border: 1px solid var(--pe-cloud) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.card-header,
.card-body,
.modal-header,
.modal-body {
  border-color: var(--pe-cloud) !important;
}

.notice,
.alert,
.action-news-item,
.ingredient-editor {
  border-radius: 8px !important;
  box-shadow: none !important;
}

.notice,
.alert-info,
.action-news-item {
  background: rgba(62, 106, 225, 0.07) !important;
  border-color: rgba(62, 106, 225, 0.18) !important;
  color: var(--pe-graphite) !important;
}

.value,
.stat-value,
.kpi .value {
  color: var(--pe-carbon) !important;
  font-weight: 500 !important;
}

button,
.btn,
.logout-btn,
input[type="button"],
input[type="submit"] {
  border-radius: 4px !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  transition: background-color 0.33s, color 0.33s, border-color 0.33s, box-shadow 0.25s !important;
}

button:not(.secondary):not(.warn):not(.notif-btn):not(.btn-secondary):not(.btn-danger):not(.btn-warning):not(.btn-ghost) {
  background: var(--pe-blue);
  border-color: var(--pe-blue);
  color: var(--pe-white);
}

button:not(.secondary):not(.warn):not(.notif-btn):not(.btn-secondary):not(.btn-danger):not(.btn-warning):not(.btn-ghost):hover {
  background: var(--pe-blue-hover);
  border-color: var(--pe-blue-hover);
  color: var(--pe-white);
  filter: none;
}

.btn-primary,
.btn-success,
.tabs button.active,
body > .frame .btn {
  background: var(--pe-blue) !important;
  border-color: var(--pe-blue) !important;
  color: var(--pe-white) !important;
}

.btn-primary:hover,
.btn-success:hover,
.tabs button.active:hover,
body > .frame .btn:hover {
  background: var(--pe-blue-hover) !important;
  border-color: var(--pe-blue-hover) !important;
  color: var(--pe-white) !important;
  filter: none !important;
}

.btn {
  background: var(--pe-white);
  border: 1px solid var(--pe-silver);
  color: var(--pe-graphite);
}

.btn:hover {
  background: var(--pe-ash);
  border-color: var(--pe-silver);
  color: var(--pe-carbon);
}

.btn-secondary,
.btn-ghost,
button.secondary,
.tabs button,
.logout-btn {
  background: var(--pe-white) !important;
  border: 1px solid var(--pe-silver) !important;
  color: var(--pe-graphite) !important;
}

.btn-secondary:hover,
.btn-ghost:hover,
button.secondary:hover,
.tabs button:hover,
.logout-btn:hover {
  background: var(--pe-ash) !important;
  border-color: var(--pe-silver) !important;
  color: var(--pe-carbon) !important;
}

.btn-danger,
button.warn {
  background: #FFFFFF !important;
  border: 1px solid #D92D20 !important;
  color: #B42318 !important;
}

.btn-warning {
  background: #FFFFFF !important;
  border: 1px solid #B7791F !important;
  color: #7A5510 !important;
}

input,
select,
textarea,
.form-ctrl {
  background: var(--pe-white) !important;
  border: 1px solid var(--pe-silver) !important;
  border-radius: 4px !important;
  color: var(--pe-carbon) !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus,
.form-ctrl:focus {
  border-color: var(--pe-blue) !important;
  box-shadow: inset 0 0 0 1px var(--pe-blue) !important;
  outline: none !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--pe-fog) !important;
}

thead th,
th {
  background: var(--pe-ash) !important;
  color: var(--pe-pewter) !important;
  border-color: var(--pe-cloud) !important;
  font-weight: 500 !important;
  text-transform: none !important;
}

td {
  border-color: var(--pe-cloud) !important;
}

tr:hover td,
tbody tr:hover {
  background: #FAFAFA !important;
}

.badge,
.pill,
.mini-tag,
.pending-dot,
.nav-badge,
.done-group-count {
  border-radius: 4px !important;
  font-weight: 500 !important;
}

.pill,
.mini-tag,
.badge-draft,
.badge-lost {
  background: var(--pe-ash) !important;
  color: var(--pe-pewter) !important;
}

.badge-won,
.badge-approved,
.ok,
.done-group-count {
  color: #13754F !important;
}

.badge-pending,
.warn-text {
  color: #A86913 !important;
}

.badge-rejected,
.bad {
  color: #B83232 !important;
}

.modal-backdrop {
  background: rgba(128, 128, 128, 0.65) !important;
}

body > .frame {
  max-width: 420px !important;
}

body > .frame .brand-row {
  color: var(--pe-carbon) !important;
}

body > .frame .brand-logo-panel,
body > .frame .brand-logo-cn {
  color: var(--pe-carbon) !important;
}

body > .frame .brand-logo-en {
  color: var(--pe-blue) !important;
}

body > .frame .card {
  border-radius: 4px !important;
  padding: 36px !important;
}

body > .frame .footer .slogan {
  background: var(--pe-white) !important;
  border: 1px solid var(--pe-cloud) !important;
  border-radius: 4px !important;
  color: var(--pe-pewter) !important;
}

body > .frame .btn {
  background: var(--pe-blue) !important;
  border-color: var(--pe-blue) !important;
  color: var(--pe-white) !important;
}

body > .frame .btn:hover {
  background: var(--pe-blue-hover) !important;
  border-color: var(--pe-blue-hover) !important;
  color: var(--pe-white) !important;
}

.pe-system-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid var(--pe-system-border);
  border-radius: 4px;
  background: var(--pe-system-soft);
  color: var(--pe-system-color);
}

.pe-system-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.8;
}

.pe-system-lockup,
.login-system-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pe-system-lockup h1,
.pe-system-lockup p {
  margin: 0 !important;
}

.login-system-heading {
  flex-direction: column;
  justify-content: center;
  margin-bottom: 22px;
  text-align: center;
}

.pe-app .brand,
.pe-app .sidebar-logo,
.pe-app header {
  border-color: var(--pe-cloud) !important;
}

.pe-app .brand .pe-system-icon,
.pe-app .sidebar-logo .pe-system-icon {
  margin-right: 2px;
}

.pe-app .brand-logo-en,
.pe-app .brand-text strong,
.pe-app .sidebar-logo h1 span,
.pe-app .brand-system h1,
.pe-app .action-news-go,
.pe-app .topbar-slogan,
.pe-app .pe-slogan {
  color: var(--pe-system-color) !important;
}

.pe-app .nav a.active,
.pe-app .nav-link.active {
  background: rgba(var(--pe-system-rgb), 0.08) !important;
  box-shadow: inset 2px 0 0 var(--pe-system-color) !important;
}

.pe-app .nav a.active svg,
.pe-app .nav-link.active svg,
.pe-app .nav-link.active .nav-text {
  color: var(--pe-system-color) !important;
}

.pe-login {
  min-height: 100vh !important;
  background: var(--pe-white) !important;
  color: var(--pe-carbon) !important;
}

.pe-login::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 4px;
  background: var(--pe-system-color);
}

.pe-login .frame {
  width: 100%;
}

.pe-login .brand-row {
  margin-bottom: 20px !important;
}

.pe-login .brand-logo-cn {
  font-size: 28px !important;
  font-weight: 500 !important;
}

.pe-login .brand-logo-en,
.pe-login .helper a {
  color: var(--pe-system-color) !important;
}

.pe-login .card {
  border: 1px solid var(--pe-cloud) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

.pe-login .title {
  margin: 0 0 6px !important;
  color: var(--pe-carbon) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
}

.pe-login .subtitle {
  margin: 0 !important;
  color: var(--pe-pewter) !important;
  font-size: 12px !important;
}

.pe-login input {
  min-height: 40px !important;
}

.pe-login input:focus {
  border-color: var(--pe-system-color) !important;
  box-shadow: inset 0 0 0 1px var(--pe-system-color) !important;
}

.pe-login .footer .slogan {
  color: var(--pe-pewter) !important;
}

.pe-login .meta {
  color: var(--pe-fog) !important;
}

@media (max-width: 900px) {
  .content,
  .page,
  main {
    padding: 16px !important;
  }

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

@media (max-width: 640px) {
  .stats-grid,
  .grid,
  .cols-2,
  .cols-3,
  .cols-4 {
    grid-template-columns: 1fr !important;
  }

  body > .frame .card {
    padding: 28px 24px !important;
  }
}