:root {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  color: #192b3d;
  background: #faf9f5;
}

body { background: #faf9f5; }
.app-shell { background: #faf9f5; }
.sidebar { background: #fff; color: #102b62; border-right: 1px solid #e7e5de; }
.sidebar .brand { font-family: "Noto Serif SC", "Songti SC", SimSun, serif; letter-spacing: .14em; }
.sidebar .brand small { color: #8d8f95; opacity: 1; }
.side-label { color: #a0a5ae; }
.nav button { color: #6e7785; border-radius: 4px; }
.nav button:hover { background: #f1f3f8; color: #102b62; }
.nav button.active { background: #102b62; color: #fff; box-shadow: 0 5px 13px #102b621a; }
.side-bottom { border-top-color: #e7e5de; }
.side-bottom small { color: #9298a3; }
.side-bottom .text-button, .text-button, .link { color: #2353a3; }
.topbar { border-bottom-color: #e7e5de; }
.topbar .badge { background: #e8edf7; color: #102b62; }
.card { border: 1px solid #e7e5de; border-radius: 5px; box-shadow: none; }
.page-title h1, .card h3, .section-heading h2 { font-family: "Noto Serif SC", "Songti SC", SimSun, serif; font-weight: 500; color: #1b2f4a; }
.page-title h1 { font-size: 33px; }
.eyebrow { color: #a18c68; }
.muted, .page-title p { color: #7a8190; }
.hero { background: #102b62; border-color: #102b62; border-radius: 0; min-height: 245px; }
.hero:after { width: 40%; height: 100%; right: 0; top: 0; border: 0; border-radius: 0; box-shadow: none; background: linear-gradient(90deg,#102b62 0%,#102b6200 38%), url('/static/assets/meikeling-4sets.png') center 25% / cover no-repeat; }
.hero h2 { font-family: "Noto Serif SC", "Songti SC", SimSun, serif; font-weight: 400; letter-spacing: .04em; position: relative; z-index: 1; }
.hero p { color: #c1cbdf; max-width: 58%; position: relative; z-index: 1; }
.hero .eyebrow { color: #d9c69f; }
.hero button { position: relative; z-index: 2; }
.metric strong, .wallet-value, .product-price { font-family: "Noto Serif SC", "Songti SC", SimSun, serif; color: #102b62; font-weight: 500; }
.primary, .secondary, .danger, .ghost { border-radius: 3px; }
.primary { background: #102b62; }
.primary:hover { background: #2353a3; }
.secondary { background: #f4f1e9; color: #102b62; border-color: #d9d2c4; }
.ghost { border-color: #d9dbe0; color: #102b62; }
.pill { background: #e8edf7; color: #102b62; }
.field input, .field select, .field textarea, .input, .price-matrix input { border-color: #d9dbe0; border-radius: 3px; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { border-color: #2353a3; box-shadow: 0 0 0 3px #2353a31a; }
th { background: #faf9f5; color: #7a8190; }
.notice { border-radius: 3px; }
.success-note { background: #f4f1e9; border-color: #e7e0d0; color: #765f38; }
.product-image { background: #e8edf7; }
.product-price small { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }
.login-art { background: #102b62; }
.login-art:after { border-color: #ffffff21; }
.login-card { border-radius: 4px; box-shadow: 0 20px 80px #102b6214; }
.login-art h1, .login-card h2 { font-family: "Noto Serif SC", "Songti SC", SimSun, serif; font-weight: 400; }
.mobile-nav { border-top-color: #e7e5de; }
.mobile-nav button.active { color: #102b62; }
.toast { background: #102b62; border-radius: 3px; }

@media (max-width: 720px) {
  .hero { min-height: 255px; }
  .hero:after { width: 45%; opacity: .6; }
  .hero p { max-width: 74%; }
  .page-title h1 { font-size: 27px; }
}