:root {
  --ink: #18212b;
  --muted: #68727d;
  --line: #d8dde3;
  --soft: #f3f5f7;
  --paper: #ffffff;
  --navy: #102a43;
  --teal: #234e70;
  --orange: #b5833f;
  --green: #287454;
  --red: #a84646;
  --shadow: none;
  background: #f2f4f6;
}

body { background: #f2f4f6; }
.app-shell { grid-template-columns: 236px minmax(0, 1fr); }
.sidebar { background: #102a43; padding: 28px 20px; }
.brand { margin: 0 8px 38px; gap: 13px; }
.brand-mark {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 2px;
  background: transparent;
  font-size: 18px;
  font-style: normal;
  font-family: "STSong", "Songti SC", serif;
}
.brand strong { font-size: 16px; letter-spacing: .12em; }
.brand small { color: #aebdcc; margin-top: 5px; letter-spacing: .08em; }
.sidebar nav { gap: 2px; }
.sidebar nav a {
  color: #c6d1dc;
  padding: 12px 14px;
  border-radius: 2px;
  border-left: 2px solid transparent;
}
.sidebar nav a:hover { background: rgba(255,255,255,.055); }
.sidebar nav a.active {
  background: rgba(255,255,255,.08);
  border-left-color: #c89a56;
}
.sidebar .link-button { color: #d8b57d; }
.main { padding: 0 38px 64px; }
.topbar {
  min-height: 94px;
  margin-bottom: 26px;
  border-bottom: 1px solid #d8dde3;
}
.topbar h1 { font-size: 24px; font-weight: 650; letter-spacing: .02em; }
.topbar .eyebrow { color: #7a838d; letter-spacing: .12em; }
.top-actions { display: flex; align-items: center; gap: 16px; }
.system-date { color: #7a838d; font-size: 12px; }
.button { border-radius: 3px; padding: 10px 17px; }
.button.primary { background: #183f61; }
.button.primary:hover { background: #102f4c; }
.button.secondary { border-color: #cfd5db; }

.hero {
  min-height: 150px;
  align-items: center;
  padding: 30px 34px;
  color: #18212b;
  background: #fff;
  border: 1px solid #d8dde3;
  border-top: 3px solid #183f61;
  border-radius: 2px;
  box-shadow: none;
}
.hero:after { display: none; }
.hero h2 { margin: 7px 0 8px; font-size: 27px; font-weight: 650; }
.hero p:not(.eyebrow) { color: #68727d; }
.hero .eyebrow { color: #9a6d31; letter-spacing: .13em; }
.hero-date { min-width: 180px; text-align: right; gap: 7px; }
.hero-date span { color: #7a838d; letter-spacing: .08em; font-size: 11px; }
.hero-date strong { color: #183f61; font-size: 22px; letter-spacing: .04em; }

.stats { gap: 12px; margin: 14px 0; }
.stats article {
  padding: 20px 21px;
  border: 1px solid #d8dde3;
  border-radius: 2px;
  box-shadow: none;
}
.stats article:nth-child(1) { border-top: 2px solid #183f61; }
.stats article:nth-child(2) { border-top: 2px solid #6c7f90; }
.stats article:nth-child(3) { border-top: 2px solid #8c7859; }
.stats article.accent { background: #fff; border-left: 1px solid #d8dde3; border-top: 2px solid #b5833f; }
.stats strong { font-size: 26px; font-weight: 650; }
.stats article.accent strong { font-size: 22px; }

.panel {
  border: 1px solid #d8dde3;
  border-radius: 2px;
  padding: 24px;
  box-shadow: none;
}
.panel h2, .panel-head h2 { font-weight: 650; }
.record-count { color: #68727d; font-size: 12px; }
th { background: #f6f7f8; color: #5d6873; letter-spacing: .02em; }
td { border-bottom-color: #e7eaed; }
tbody tr:hover { background: #fafbfc; }
.badge { border-radius: 2px; padding: 4px 7px; }
.strong-link { color: #183f61; }

.contract-banner {
  color: #18212b;
  background: #fff;
  border: 1px solid #d8dde3;
  border-left: 4px solid #183f61;
  border-radius: 2px;
  box-shadow: none;
}
.contract-banner h2 { color: #183f61; font-weight: 650; }
.contract-banner p:not(.eyebrow),
.contract-amount span,
.contract-amount small { color: #68727d; }
.contract-banner .eyebrow { color: #9a6d31; }
.contract-amount strong { color: #18212b; }
.milestone-grid { gap: 12px; }
.milestone-grid article {
  border: 1px solid #d8dde3;
  border-radius: 2px;
  box-shadow: none;
}
.progress i { background: #183f61; }

.form-grid input,
.form-grid select,
.form-grid textarea,
.contract-picker select,
.inline-status select {
  border-radius: 2px;
  border-color: #cbd2d9;
}
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  border-color: #234e70;
  box-shadow: 0 0 0 2px rgba(35,78,112,.1);
}
.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.customer-layout { grid-template-columns: minmax(0, 1fr) 380px; }
.privacy-note { border-radius: 2px; background: #fbf8f2; border-color: #e5d7c3; }
.contract-picker, .selection-list { border-radius: 2px; }
.contract-list, .contract-list a { border-radius: 2px; }
.contract-list { border: 1px solid #d8dde3; }
.contract-list a.active { background: #edf2f6; color: #183f61; }
.stage-money, .gate { border-radius: 2px; }

.login-shell { grid-template-columns: .9fr 1.1fr; }
.login-visual {
  padding: 54px 64px;
  background: #102a43;
}
.login-visual:after { display: none; }
.login-visual .eyebrow { color: #d4ad74; }
.login-visual h1 { font-size: 36px; font-weight: 550; letter-spacing: .05em; }
.login-visual p:not(.eyebrow) { color: #bdc9d4; }
.login-brand { letter-spacing: .1em; }
.login-panel { background: #f7f8f9; }
.login-card { max-width: 410px; background: #fff; border: 1px solid #d8dde3; padding: 38px 40px; }
.login-card h2 { font-size: 27px; font-weight: 650; }
.login-card input { border-radius: 2px; }
.otp-card { text-align: left; }
.otp-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 20px;
  border: 1px solid #bfcbd5;
  color: #183f61;
  background: #f2f6f8;
  font-family: "STSong", "Songti SC", serif;
  font-size: 16px;
}
.login-card .otp-input {
  width: 100%;
  padding: 15px 18px;
  border-color: #aebbc6;
  color: #102a43;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .7em;
  text-align: center;
  text-indent: .7em;
  font-variant-numeric: tabular-nums;
}
.login-card .otp-input::placeholder { color: #c8d0d7; }
.login-card .otp-input:focus {
  border-color: #234e70;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(35,78,112,.12);
}
.login-back {
  display: block;
  margin-top: 22px;
  color: #68727d;
  font-size: 12px;
  text-align: center;
}
.login-back:hover { color: #183f61; }

.delivery-note { border: 1px solid #d8dde3; box-shadow: none; }
.delivery-note > header { border-bottom-color: #183f61; }
.print-logo { color: #183f61; font-style: normal; font-family: "STSong", "Songti SC", serif; letter-spacing: .08em; }
.doc-no { min-width: 205px; }
.barcode { width: 200px; margin-top: 7px; margin-left: auto; }
.barcode svg { display: block; width: 100%; height: 46px; }
.barcode-type { margin-top: 2px; color: #7d8790; font-size: 7px; letter-spacing: .18em; }
.print-toolbar { background: #102a43; }
.print-toolbar button { background: #c89a56; border-radius: 2px; }

@media (max-width: 1000px) {
  .main { padding: 0 24px 50px; }
  .customer-layout { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .main { padding: 0 14px 40px; }
  .topbar { min-height: 82px; }
  .system-date { display: none; }
  .hero { padding: 22px; }
  .form-pair { grid-template-columns: 1fr; }
  .login-card { border: 0; padding: 24px; }
}

@media print {
  .delivery-note { border: 0; }
  .barcode { width: 53mm; }
  .barcode svg { height: 13mm; }
}

/* 宝塔式分层侧栏 */
.app-shell { grid-template-columns: 248px minmax(0, 1fr); }
.sidebar { padding: 0; overflow: hidden; }
.brand {
  min-height: 88px;
  margin: 0;
  padding: 0 22px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.sidebar-nav {
  flex: 1;
  padding: 18px 14px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.16) transparent;
}
.sidebar nav.sidebar-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 3px;
}
.sidebar nav.sidebar-nav a { border-left: 0; }
.sidebar-nav .nav-direct,
.nav-group > summary {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  padding: 0 13px;
  color: #c7d2dc;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}
.sidebar-nav .nav-direct:hover,
.nav-group > summary:hover { color: #fff; background: rgba(255,255,255,.055); }
.sidebar-nav .nav-direct.active {
  color: #fff;
  background: #1e425f;
  box-shadow: inset 3px 0 #d2a35e;
}
.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  color: #9fb2c2;
  font-size: 16px;
  font-style: normal;
}
.nav-direct.active .nav-icon,
.nav-group[open] > summary .nav-icon { color: #e3bd84; }
.nav-group {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
}
.nav-group > summary { justify-content: space-between; list-style: none; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary > span { display: inline-flex; align-items: center; gap: 11px; }
.nav-group[open] > summary { color: #fff; background: rgba(255,255,255,.035); }
.nav-arrow {
  color: #71889a;
  font-size: 19px;
  font-style: normal;
  line-height: 1;
  transition: transform .18s ease;
}
.nav-group[open] .nav-arrow { transform: rotate(90deg); color: #b8c5cf; }
.nav-sub {
  position: relative;
  display: grid;
  gap: 2px;
  margin: 2px 0 6px 22px;
  padding: 3px 0 3px 17px;
  animation: nav-accordion-open .16s ease-out;
}
@keyframes nav-accordion-open {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.nav-sub:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: rgba(255,255,255,.11);
}
.sidebar nav .nav-sub a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 11px;
  color: #99aebe;
  border-radius: 3px;
  font-size: 13px;
}
.sidebar nav .nav-sub a:before {
  content: "";
  position: absolute;
  left: -20px;
  width: 5px;
  height: 5px;
  border: 1px solid #6f8799;
  border-radius: 50%;
  background: #102a43;
}
.sidebar nav .nav-sub a:hover { color: #fff; background: rgba(255,255,255,.05); }
.sidebar nav .nav-sub a.active {
  color: #fff;
  background: #203f5a;
  font-weight: 600;
}
.sidebar nav .nav-sub a.active:before { border-color: #d2a35e; background: #d2a35e; }

/* 左下角账户卡片 */
.sidebar-user.account-card {
  margin: 0;
  padding: 15px 15px 14px;
  border-top: 1px solid rgba(255,255,255,.1);
  background: #0d2439;
  display: grid;
  gap: 12px;
}
.account-summary { display: flex; align-items: center; gap: 11px; }
.account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 4px;
  background: #183c59;
  color: #fff;
  font-family: "STSong", "Songti SC", serif;
  font-size: 17px;
}
.account-identity { min-width: 0; display: grid; gap: 4px; }
.account-identity strong { color: #f4f7f9; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-identity small { display: flex; align-items: center; gap: 6px; color: #91a7b8; font-size: 11px; }
.online-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #47b881; box-shadow: 0 0 0 2px rgba(71,184,129,.13); }
.account-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 9px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
  color: #8299aa;
  font-size: 10px;
}
.account-meta code { color: #c3d0da; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
.account-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.account-actions a,
.account-actions .link-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 31px;
  margin: 0;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 3px;
  background: rgba(255,255,255,.035);
  color: #b8c7d2;
  font-size: 11px;
}
.account-actions a:hover,
.account-actions .link-button:hover { color: #fff; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.07); }

/* 页头、表格和表单细节 */
.main { padding: 0 34px 60px; }
.topbar { min-height: 88px; }
.page-heading { display: grid; gap: 8px; }
.breadcrumb { display: flex; align-items: center; gap: 7px; color: #89929b; font-size: 11px; }
.breadcrumb i { color: #bcc2c8; font-style: normal; }
.breadcrumb strong { color: #66717b; font-weight: 500; }
.page-heading h1 { margin: 0; }
.system-health { display: inline-flex; align-items: center; gap: 7px; color: #69747e; font-size: 11px; }
.panel-head { padding-bottom: 17px; border-bottom: 1px solid #e2e6ea; }
.panel-head h2 { letter-spacing: .01em; }
.table-wrap { border: 1px solid #e0e4e8; }
.table-wrap table th:first-child,
.table-wrap table td:first-child { padding-left: 16px; }
.table-wrap table th:last-child,
.table-wrap table td:last-child { padding-right: 16px; }
th { height: 42px; }
td { height: 54px; }
.cell-sub { line-height: 1.45; }
.empty-row { min-height: 110px; background: #fbfcfd; }
.form-grid label { letter-spacing: .01em; }
.form-grid input,
.form-grid select,
.form-grid textarea { min-height: 40px; }
.form-grid textarea { line-height: 1.55; resize: vertical; }
.form-actions { padding-top: 17px; border-top: 1px solid #e5e8eb; }
.alert { border: 1px solid transparent; border-radius: 3px; }
.alert.success { border-color: #c8e6d8; }
.alert.warning { border-color: #f0dcae; }
.alert.danger { border-color: #efcaca; }

@media (max-width: 1000px) {
  .app-shell { grid-template-columns: 218px minmax(0, 1fr); }
  .sidebar-nav { padding-left: 10px; padding-right: 10px; }
  .brand { padding: 0 17px; }
  .main { padding: 0 24px 50px; }
  .system-health { display: none; }
}

@media (max-width: 720px) {
  .sidebar { overflow: visible; }
  .brand { min-height: 64px; }
  .sidebar-nav { display: flex !important; gap: 6px; padding: 9px 0; overflow-x: auto; }
  .sidebar-nav .nav-direct,
  .nav-group > summary { min-height: 38px; white-space: nowrap; }
  .nav-group { flex: 0 0 auto; }
  .nav-sub { position: absolute; z-index: 20; margin: 2px 0 0; padding: 7px; min-width: 150px; border: 1px solid #264660; background: #102a43; box-shadow: 0 8px 20px rgba(4,20,32,.22); }
  .nav-sub:before,
  .sidebar nav .nav-sub a:before { display: none; }
  .main { padding: 0 14px 40px; }
}