:root {
  font-family: "Inter", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { letter-spacing: 0; }
button { border-color: #dfe1e5; border-radius: 5px; transition: background .15s, border-color .15s, box-shadow .15s; }
button:hover { background: #f4f5f7; border-color: #c6c9cf; }
button.primary { box-shadow: 0 2px 3px #3810170a; }
button.primary:hover { border-color: var(--green-dark); }
.icon-button { color: #7b7e86; }
.icon-button:hover { background: #fcf0f1; color: var(--green); }
:focus-visible { outline: 3px solid #e6a1a9; outline-offset: 3px; }
input, select, textarea { border-color: #dcdfe4; }
input:focus, select:focus, textarea:focus { border-color: var(--green); }
input::placeholder, textarea::placeholder { color: #a1a4ac; }
.brand-logo { display: block; width: 174px; height: auto; aspect-ratio: 1678 / 568; object-fit: contain; flex-shrink: 0; }
.brand { flex-direction: column; align-items: flex-start; gap: 18px; padding: 26px 24px 30px; }
.sidebar-workspace { font-size: 12px; font-weight: 500; color: #868991; padding-left: 2px; }
.sidebar { width: 244px; border-top: 3px solid var(--green); }
.nav-label { color: #a0a3aa; font-size: 10px; margin: 0 26px 14px; }
nav { padding: 0 14px; gap: 5px; }
nav a { color: #646872; padding: 13px 14px; position: relative; }
nav a.active { background: #fcf0f1; color: var(--green); }
nav a.active::before { content: ""; position: absolute; width: 3px; height: 18px; background: var(--green); border-radius: 2px; left: 0; }
nav a:hover { background: #f5f6f8; }
nav a.active:hover { background: #fbe9eb; }
.sidebar-bottom { padding: 19px 16px; }
.avatar { background: #f2f3f5; color: #555b65; border: 1px solid #e5e7eb; border-radius: 6px; font-weight: 600; }
.identity span { color: #969aa3; }
.workspace { margin-left: 244px; }
.topbar { height: 73px; color: #6d727d; }
.topbar #breadcrumb { color: #464b55; font-weight: 500; }
.topbar-right { font-variant-numeric: tabular-nums; color: #969aa3; }
.live-dot { background: #6d9d87; width: 5px; height: 5px; }
#content { padding-top: 34px; }
.workspace-footer { color: #a0a3ab; background: #f9fafb; }
h1 { font-size: 25px; font-weight: 600; }
.overline { color: #8b9099; font-size: 10px; font-weight: 500; }
.page-heading { margin-bottom: 28px; }
.page-heading p { color: #8a8e97; }
.metrics { padding: 23px 0 25px; border-top: 1px solid var(--line); }
.metric { min-width: 155px; }
.metric strong { color: #282c34; font-size: 30px; font-weight: 500; line-height: 1.1; }
.metric strong.green { color: var(--green); }
.metric em { color: #969aa3; }
.search svg, .pagination, .back, .detail-meta, .notice-row, .revision summary, .table-note, .role-tag, .field-note { color: #898e98; }
th { background: #f8f9fb; color: #828792; font-weight: 500; }
td { border-color: #eef0f3; }
tbody tr:hover td { background: #fafbfc; }
.table-wrap { border-color: #e4e6eb; border-radius: 6px; }
.batch-code { color: #989da6; }
.badge { color: #6e7580; background: #f0f2f5; }
.badge.green { color: #34795d; background: #edf5f0; }
.badge.gray { color: #858b94; background: #f1f3f6; }
.badge.orange { color: #996820; background: #fff5e5; }
.badge.red { color: #b9273a; background: #fbedef; }
.empty { padding-top: 70px; padding-bottom: 78px; }
.empty > svg { color: #b5bbc5; width: 35px; height: 35px; stroke-width: 1.3; }
.empty h3 { color: #515763; }
.empty p { color: #969ba5; }
.tabs { border-color: #e2e5ea; }
.tabs button { color: #858b95; }
.tabs .count { background: #eceff3; color: #7a818e; }
.tabs .active .count { background: #f9e4e7; color: var(--green); }
.info-band { background: #f0f4f8; color: #67788a; border-left-color: #aab9c9; }
.info-band.warn { background: #fff7eb; border-left-color: #d6af68; color: #94733f; }
.summary-footer { background: #f8f9fb; border-color: #e5e8ed; }
.summary-footer strong { color: var(--ink); }
.revision-list time { color: #9ca1aa; }
.separator-dot { color: #c2c6ce; }
.active-mark.off { color: #9b9fa7; }
dialog { box-shadow: 0 24px 80px #20263626; }
dialog::backdrop { background: #24283166; }
.modal-header { background: #fcfcfd; }
#toast { background: #2b2e35; box-shadow: 0 5px 20px #2026331a; }
#busy { background: #f8f9fbcc; }
.spinner { border-color: #edd5d8; border-top-color: var(--green); }

#login-screen { min-height: 100svh; display: flex; flex-direction: column; background: #fff; border-top: 3px solid var(--green); }
.login-header { min-height: 109px; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 0 5%; border-bottom: 1px solid #f0f1f4; }
.login-brand { display: flex; justify-content: flex-start; align-items: center; padding: 0; gap: 26px; }
.login-brand .brand-logo { width: 184px; }
.brand-divider { width: 1px; height: 28px; background: #e4e6ea; }
.brand-workspace { font-size: 13px; color: #717680; font-weight: 400; }
.login-access { display: inline-flex; align-items: center; gap: 8px; color: #9297a1; font-size: 11px; }
.login-access svg { width: 15px; height: 15px; }
.login-main { display: flex; flex: 1; justify-content: center; align-items: center; width: 100%; min-height: 570px; margin: 0; padding: 52px 24px 72px; }
.login-form { width: 376px; max-width: 100%; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.login-heading { position: relative; margin-bottom: 36px; padding-top: 3px; }
.login-mark { position: absolute; width: 43px; height: 45px; right: 0; top: 10px; object-fit: contain; }
.section-mark { display: block; color: #959aa3; font-size: 11px; line-height: 1.5; margin-bottom: 12px; padding-right: 60px; }
.login-heading h1 { font-size: 30px; color: #292c32; line-height: 1.35; padding-right: 60px; }
.login-form label { color: #535964; font-size: 12px; margin-bottom: 23px; gap: 11px; }
.login-form input:not([type=checkbox]) { height: 48px; border-radius: 5px; background: #fcfcfd; padding: 12px 14px; font-size: 13px; }
.login-form input:focus { background: #fff; outline: none; box-shadow: 0 0 0 3px #cb14230a; border-color: var(--green); }
.login-form .password-field input { padding-right: 46px; }
.login-form .password-field .icon-button { top: 7px; right: 7px; }
.login-form .form-error { margin-top: -8px; min-height: 22px; }
.login-submit { height: 48px; margin-top: 7px; padding: 0 18px; font-size: 13px; font-weight: 500; border-radius: 5px; }
.login-submit svg { width: 18px; height: 18px; }
.login-note { color: #a0a4ad; font-size: 11px; margin-top: 22px; }
.login-footer { width: 100%; max-width: none; margin: 0; padding: 25px 5%; background: #fafbfc; border-top: 1px solid #edeff2; color: #9a9fa9; font-size: 10px; display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.login-footer > span { display: inline-flex; gap: 8px; align-items: center; }
.login-footer svg { width: 12px; height: 12px; }
.footer-divider { color: #c7cbd2; margin: 0 5px; }

@media (min-width: 1550px) {
  .login-main { margin: 0; padding-top: 70px; padding-bottom: 95px; }
}
@media (max-width: 1100px) {
  .sidebar { width: 222px; }
  .workspace { margin-left: 222px; }
  .brand { padding-left: 24px; }
  .brand-logo { width: 164px; }
  .sidebar-bottom { padding-left: 13px; padding-right: 13px; }
  .metric { min-width: 120px; }
}
@media (max-width: 760px) {
  .sidebar { width: 100%; position: relative; }
  .brand { padding: 15px 18px 20px; gap: 0; max-width: calc(100% - 118px); }
  .brand-logo { width: 142px; }
  .sidebar-workspace { display: none; }
  .sidebar-bottom { top: 21px; right: 12px; padding: 0; }
  .workspace { margin-left: 0; }
  nav { padding-bottom: 12px; }
  nav a { padding: 10px 12px; }
  nav a.active::before { display: none; }
  .topbar { height: 47px; }
  #content { padding-top: 24px; }
  h1 { font-size: 23px; }
  .metric { min-width: 0; }
  .metric strong { font-size: 24px; }
  .metrics { padding-top: 20px; padding-bottom: 21px; }
  .login-header { min-height: 87px; padding: 12px 24px; }
  .login-brand { padding: 0; gap: 0; }
  .login-brand .brand-logo { width: 154px; }
  .brand-divider, .brand-workspace { display: none; }
  .login-access { font-size: 10px; gap: 5px; }
  .login-access svg { width: 13px; height: 13px; }
  .login-main { width: 100%; min-height: 480px; padding: 44px 30px 56px; margin: 0; }
  .login-form { width: 376px; padding: 0; }
  .login-heading { margin-bottom: 31px; }
  .login-heading h1 { font-size: 27px; }
  .login-mark { width: 39px; height: 41px; }
  .login-footer { margin: 0; padding: 22px 24px; flex-wrap: wrap; gap: 12px 20px; line-height: 1.6; }
  .login-footer > span { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
}