:root {
  --paper: #f3f0e8;
  --paper-strong: #e8e3d6;
  --surface: #fffdf7;
  --ink: #17202a;
  --ink-soft: #59616a;
  --line: #d3cdbf;
  --line-dark: #9d978c;
  --blue: #1557a6;
  --blue-deep: #103a6b;
  --red: #c5302b;
  --amber: #d7861c;
  --green: #2c7a5a;
  --shadow: 0 24px 60px rgba(29, 35, 41, 0.12);
  --serif: "Noto Serif SC", "Songti SC", STSong, serif;
  --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--paper);
  overflow-x: clip;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(rgba(23, 32, 42, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 32, 42, 0.018) 1px, transparent 1px),
    var(--paper);
  background-size: 32px 32px;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  color: inherit;
}

.app-shell {
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 10;
  display: flex;
  width: 248px;
  flex-direction: column;
  padding: 32px 24px 24px;
  color: #f7f3e8;
  background:
    radial-gradient(circle at 10% 10%, rgba(39, 103, 178, 0.42), transparent 34%),
    linear-gradient(160deg, #182a3e 0%, #0d1c2b 62%, #09141e 100%);
  overflow: hidden;
}

.sidebar::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: 76px;
  width: 230px;
  height: 54px;
  border-top: 12px solid rgba(197, 48, 43, 0.68);
  border-bottom: 12px solid rgba(21, 87, 166, 0.62);
  transform: rotate(-54deg);
  pointer-events: none;
}

.brand-lockup {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.brand-mark {
  display: flex;
  width: 45px;
  height: 33px;
  align-items: stretch;
  gap: 3px;
  transform: skew(-18deg);
}

.brand-mark span {
  flex: 1;
  background: var(--blue);
}

.brand-mark span:first-child {
  background: var(--red);
}

.brand-mark span:nth-child(2) {
  margin-top: 8px;
}

.brand-mark span:nth-child(3) {
  margin-top: 15px;
}

.brand-lockup strong {
  display: block;
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: 0.16em;
}

.brand-lockup small {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
  letter-spacing: 0.12em;
}

.side-nav {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  margin-top: 34px;
}

.nav-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding: 13px 14px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.66);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: 180ms ease;
}

.nav-item:hover {
  color: white;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
}

.nav-item.is-active {
  color: white;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 3px 0 0 var(--red);
}

.nav-index {
  color: rgba(255, 255, 255, 0.32);
  font-family: Georgia, serif;
  font-size: 12px;
}

.policy-note {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: 18px 18px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.1);
}

.policy-note p {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}

.policy-note b {
  color: white;
  font-family: Georgia, serif;
  font-size: 14px;
}

.local-badge {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 10px;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #55b88a;
  box-shadow: 0 0 0 4px rgba(85, 184, 138, 0.12);
}

.main-stage {
  min-height: 100vh;
  margin-left: 248px;
  padding: 30px clamp(24px, 4vw, 64px) 64px;
}

.topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.eyebrow {
  display: block;
  margin: 0 0 8px;
  color: var(--blue);
  font-family: Georgia, serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.topbar h1,
.panel h2,
.modal h2,
.score-hero h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.topbar h1 {
  font-size: clamp(26px, 3vw, 39px);
}

.top-actions {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.month-control {
  display: grid;
  gap: 6px;
}

.month-control span,
.field > span {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink);
  background: rgba(255, 253, 247, 0.78);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

input {
  min-height: 43px;
  padding: 0 12px;
}

textarea {
  padding: 12px;
  resize: vertical;
  line-height: 1.65;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--blue);
  background: white;
  box-shadow: 0 0 0 3px rgba(21, 87, 166, 0.1);
}

.button {
  min-height: 43px;
  padding: 0 17px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button-primary {
  color: white;
  background: var(--blue-deep);
  box-shadow: 0 8px 22px rgba(16, 58, 107, 0.16);
}

.button-primary:hover {
  background: var(--blue);
}

.button-secondary {
  border-color: var(--line-dark);
  background: rgba(255, 253, 247, 0.7);
}

.button-secondary:hover,
.button-ghost:hover {
  background: white;
}

.button-ghost {
  border-color: transparent;
  background: transparent;
}

.button-danger {
  color: var(--red);
  border-color: rgba(197, 48, 43, 0.35);
  background: rgba(197, 48, 43, 0.05);
}

.button:disabled,
.text-button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

.view {
  display: none;
  min-width: 0;
  animation: view-in 360ms ease both;
}

.view.is-visible {
  display: block;
}

.result-gallery-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 24px;
  padding: 28px 0 20px;
  border-bottom: 1px solid var(--line-dark);
}

.result-gallery-heading h2 {
  margin-top: 6px;
  font-size: clamp(30px, 4vw, 48px);
}

.result-gallery-heading p {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
}

.result-gallery-meta {
  display: grid;
  min-width: 150px;
  justify-items: end;
}

.result-gallery-meta span,
.result-gallery-meta small { color: var(--ink-soft); font-size: 10px; }
.result-gallery-meta strong { margin: 3px 0; font-family: Georgia, serif; font-size: 28px; font-weight: 400; }

.result-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.performance-id-card {
  position: relative;
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  grid-template-rows: auto 164px auto auto;
  gap: 0 18px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line-dark);
  background: var(--paper);
  box-shadow: 0 15px 38px rgba(16, 40, 63, 0.08);
  overflow: hidden;
  animation: id-card-in 420ms ease both;
  animation-delay: calc(var(--card-order) * 45ms);
}

.performance-id-card::after {
  content: "";
  position: absolute;
  top: -80px;
  right: -64px;
  width: 150px;
  height: 170px;
  border: 14px solid rgba(42, 111, 190, 0.05);
  transform: rotate(28deg);
  pointer-events: none;
}

.performance-id-card.is-complete { border-top: 5px solid var(--blue-deep); }
.performance-id-card.is-pending { border-top: 5px solid var(--line-dark); }

@keyframes id-card-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.id-card-topline {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -18px -18px 18px;
  padding: 11px 18px;
  color: white;
  background: var(--blue-deep);
  font-size: 8px;
  letter-spacing: 0.12em;
}

.id-card-topline b { color: rgba(255, 255, 255, 0.7); font-weight: 400; }

.id-photo-area {
  position: relative;
  min-width: 0;
  height: 164px;
  background: #e6e1d6;
  overflow: hidden;
}

.id-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 24%;
}

.photo-placeholder {
  display: grid;
  place-items: center;
  color: rgba(16, 40, 63, 0.35);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.7), transparent),
    #ded9cd;
}

.avatar-placeholder-icon {
  display: block;
  width: 56%;
  height: 56%;
  color: inherit;
  flex: 0 0 auto;
}

.id-photo-label {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 5px 7px;
  color: white;
  background: rgba(16, 40, 63, 0.86);
  font-size: 7px;
  letter-spacing: 0.12em;
}

.id-person-copy {
  align-self: center;
  min-width: 0;
}

.id-person-copy > small { color: var(--ink-soft); font-size: 8px; letter-spacing: 0.09em; }
.id-person-copy h3 { margin: 8px 0 6px; font-size: 27px; }
.id-person-copy p { margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.6; }
.id-number { display: inline-block; margin-top: 22px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--blue); font: 10px Georgia, serif; letter-spacing: 0.08em; }

.id-result-stack {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  margin-top: 18px;
  border: 1px solid var(--line);
}

.id-result-stack > div {
  display: grid;
  min-width: 0;
  min-height: 74px;
  align-content: center;
  justify-items: start;
  gap: 7px;
  padding: 12px;
  border-right: 1px solid var(--line);
}

.id-result-stack > div:last-child { border-right: 0; }
.id-result-stack span { color: var(--ink-soft); font-size: 8px; }
.id-final-result { color: white; background: var(--blue-deep); }
.id-final-result span,
.id-final-result small { color: rgba(255, 255, 255, 0.58); font-size: 8px; }
.id-final-result strong { font-family: var(--serif); font-size: 20px; }

.id-card-footer {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 8px;
  letter-spacing: 0.05em;
}

.id-card-footer b { color: var(--blue); font-weight: 600; }

.role-intro {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  align-items: center;
  gap: 36px;
  min-height: 218px;
  margin-bottom: 18px;
  padding: 34px 40px;
  color: white;
  background: var(--blue-deep);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.role-intro::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -105px;
  width: 330px;
  height: 180px;
  border: 18px solid rgba(255, 255, 255, 0.06);
  transform: rotate(-20deg);
}

.role-intro-primary { border-top: 5px solid var(--red); }
.role-intro-secondary { border-top: 5px solid #4f94d4; }
.role-intro .eyebrow { color: #9ec8f4; }
.role-intro h2 { margin-top: 7px; font-size: clamp(27px, 3vw, 39px); }
.role-intro p { max-width: 700px; margin: 17px 0 0; color: rgba(255, 255, 255, 0.67); font-size: 13px; line-height: 1.8; }
.role-intro p b { color: white; }

.role-formula {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 128px;
  align-content: center;
  justify-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}

.role-formula span,
.role-formula small { color: rgba(255, 255, 255, 0.55); font-size: 10px; letter-spacing: 0.08em; }
.role-formula strong { margin: 7px 0; font-family: Georgia, serif; font-size: 30px; font-weight: 400; }
.role-queue-panel { border-top: 3px solid var(--blue); }
.role-intro-primary + .role-queue-panel { border-top-color: var(--red); }
.queue-count { padding: 9px 12px; color: var(--blue-deep); border: 1px solid var(--line-dark); background: var(--surface); font-size: 11px; white-space: nowrap; }
.role-table .text-button { white-space: nowrap; }

.level-pill {
  display: inline-flex;
  min-width: 52px;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border: 1px solid var(--line-dark);
  background: var(--surface);
  font-weight: 600;
  font-size: 11px;
}

.level-excellent { color: #8a4a0d; border-color: #d8b277; background: #fff4d8; }
.level-good { color: var(--green); border-color: #9bc5ad; background: #e9f5ef; }
.level-average { color: var(--blue); border-color: #a9c7e5; background: #edf5fc; }
.level-pass { color: #725d33; border-color: #cfc4a6; background: #f3efe4; }
.level-poor { color: var(--red); border-color: #dfaaa7; background: #fbeceb; }

@keyframes view-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.65fr);
  gap: 18px;
}

.score-hero {
  position: relative;
  display: grid;
  min-height: 284px;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 28px;
  padding: clamp(28px, 4vw, 48px);
  color: white;
  background:
    linear-gradient(128deg, rgba(255, 255, 255, 0.04), transparent 45%),
    linear-gradient(135deg, #183c63 0%, #0e2a46 66%, #0a2036 100%);
  box-shadow: var(--shadow);
  overflow: hidden;
  contain: layout paint;
}

.score-hero::before {
  content: "";
  position: absolute;
  inset: auto -40px -90px auto;
  width: 340px;
  height: 180px;
  border-top: 20px solid rgba(197, 48, 43, 0.85);
  border-bottom: 20px solid rgba(42, 111, 190, 0.7);
  transform: rotate(-24deg);
}

.score-hero .eyebrow {
  color: #9ec8f4;
}

.hero-copy {
  position: relative;
  z-index: 1;
}

.score-hero h2 {
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.25;
}

.score-hero p {
  max-width: 600px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 13px;
  line-height: 1.8;
}

.hero-meter {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 12px;
}

.meter-ring {
  --score-angle: 0deg;
  display: grid;
  width: 156px;
  height: 156px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#f3b64b var(--score-angle), rgba(255, 255, 255, 0.12) 0deg);
}

.meter-ring::before {
  content: "";
  position: absolute;
  width: 126px;
  height: 126px;
  border-radius: 50%;
  background: #112f4d;
}

.meter-ring div {
  position: relative;
  display: grid;
  z-index: 1;
  justify-items: center;
}

.meter-ring strong {
  font-family: Georgia, serif;
  font-size: 38px;
  font-variant-numeric: tabular-nums;
}

.meter-ring span,
.hero-meter p {
  color: rgba(255, 255, 255, 0.55);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.hero-meter p {
  margin: 0;
}

.deadline-card,
.panel,
.stat-card {
  border: 1px solid var(--line);
  background: rgba(255, 253, 247, 0.86);
}

.deadline-card {
  padding: 28px;
}

.deadline-list {
  display: grid;
  gap: 0;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.deadline-list li {
  position: relative;
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 14px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
}

.deadline-list li::before {
  content: "";
  position: absolute;
  top: 23px;
  left: -4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line-dark);
}

.deadline-list li.is-current::before {
  background: var(--red);
  box-shadow: 0 0 0 5px rgba(197, 48, 43, 0.1);
}

.deadline-list b {
  padding-left: 12px;
  color: var(--blue-deep);
  font-family: Georgia, serif;
  font-size: 13px;
}

.deadline-list span {
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.55;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.stat-card {
  position: relative;
  padding: 21px 22px;
  overflow: hidden;
}

.stat-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 4px;
  background: var(--blue);
}

.stat-card-alert::after {
  background: var(--red);
}

.stat-card span,
.stat-card small {
  display: block;
  color: var(--ink-soft);
  font-size: 11px;
}

.stat-card strong {
  display: block;
  margin: 7px 0 6px;
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: 400;
}

.panel {
  min-width: 0;
  padding: 28px;
}

.panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.panel-heading h2,
.settings-card h2 {
  font-size: 23px;
}

.panel-heading p,
.settings-card > p {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.7;
}

.legend {
  display: flex;
  gap: 15px;
  color: var(--ink-soft);
  font-size: 10px;
}

.legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.dot-final { background: var(--green); }
.dot-draft { background: var(--amber); }

.table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  contain: layout paint;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.data-table th {
  padding: 11px 14px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line-dark);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: left;
  white-space: nowrap;
}

.data-table td {
  padding: 16px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.person-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 190px;
}

.avatar {
  display: grid;
  width: 39px;
  height: 39px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(21, 87, 166, 0.28);
  border-radius: 50%;
  color: var(--blue-deep);
  background: rgba(21, 87, 166, 0.07);
  font-family: var(--serif);
  font-weight: 700;
}

.person-cell strong,
.employee-card strong {
  display: block;
  font-size: 13px;
}

.person-cell small,
.employee-card small {
  display: block;
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 10px;
}

.score-number {
  font-family: Georgia, serif;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.result-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.grade-chip {
  display: inline-grid;
  min-width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: Georgia, serif;
  font-weight: 700;
}

.grade-S { color: #9e6413; background: #fff6df; }
.grade-A { color: var(--green); background: #edf8f2; }
.grade-B { color: var(--blue); background: #edf5fe; }
.grade-C { color: #9a6816; background: #fff8e8; }
.grade-D { color: var(--red); background: #fff0ef; }

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 20px;
  color: var(--ink-soft);
  background: var(--paper-strong);
  font-size: 10px;
  white-space: nowrap;
}

.status-pill.is-final { color: var(--green); background: #e9f5ef; }
.status-pill.is-pending { color: #8d5d11; background: #fff4da; }

.row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  white-space: nowrap;
}

.text-button {
  padding: 5px 2px;
  border: 0;
  color: var(--blue);
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.text-button:hover { text-decoration: underline; }
.text-button.is-danger { color: var(--red); }

.empty-state {
  padding: 54px 20px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.empty-state span {
  font-family: var(--serif);
  font-size: 20px;
}

.empty-state p {
  margin: 8px 0 20px;
  color: var(--ink-soft);
  font-size: 12px;
}

.employee-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.employee-card {
  position: relative;
  min-height: 168px;
  padding: 22px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.employee-card .avatar {
  margin-bottom: 18px;
}

.employee-card-photo {
  width: 58px;
  height: 70px;
  margin-bottom: 16px;
  border: 1px solid var(--line-dark);
  object-fit: cover;
  object-position: center 24%;
}

.photo-upload-block {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 18px;
  align-items: center;
  margin: 20px 0 6px;
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.employee-photo-preview {
  display: grid;
  width: 100px;
  height: 122px;
  place-items: center;
  color: rgba(16, 40, 63, 0.38);
  border: 1px solid var(--line-dark);
  background: #e4dfd4;
  overflow: hidden;
}

.employee-photo-preview .avatar-placeholder-icon { width: 54%; height: 54%; }
.employee-photo-preview img { width: 100%; height: 100%; object-fit: cover; object-position: center 24%; }
.photo-upload-block .field-label { display: block; font-size: 11px; font-weight: 600; }
.photo-upload-block p { margin: 6px 0 13px; color: var(--ink-soft); font-size: 10px; line-height: 1.6; }
.photo-upload-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.photo-upload-actions .button { min-height: 36px; padding: 0 13px; font-size: 10px; }

.employee-card .employee-actions {
  position: absolute;
  top: 16px;
  right: 16px;
}

.template-list {
  display: grid;
  gap: 8px;
}

.template-row {
  display: grid;
  grid-template-columns: 42px minmax(150px, 0.7fr) minmax(180px, 1.5fr) 90px 34px;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.template-row .metric-order {
  color: var(--line-dark);
  font-family: Georgia, serif;
  font-size: 12px;
}

.template-row input {
  min-height: 39px;
}

.weight-input {
  position: relative;
}

.weight-input::after {
  content: "分";
  position: absolute;
  top: 12px;
  right: 10px;
  color: var(--ink-soft);
  font-size: 10px;
  pointer-events: none;
}

.weight-input input { padding-right: 30px; }

.remove-metric {
  width: 32px;
  height: 32px;
  border: 0;
  color: var(--red);
  background: transparent;
  cursor: pointer;
}

.weight-total {
  padding: 10px 15px;
  border: 1px solid var(--blue);
  color: var(--blue-deep);
  font-family: Georgia, serif;
  font-size: 16px;
}

.weight-total.is-invalid {
  border-color: var(--red);
  color: var(--red);
}

.template-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 18px;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

#view-settings.is-primary-settings .settings-grid {
  grid-template-columns: minmax(0, 1fr);
}

.settings-card {
  display: grid;
  align-content: start;
  gap: 15px;
}

.settings-card .button {
  justify-self: start;
}

.field {
  display: grid;
  gap: 7px;
}

.data-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 8px;
}

.danger-card {
  border-top: 4px solid var(--red);
}

.policy-boundary {
  grid-column: 1 / -1;
  color: white;
  border: 0;
  background: var(--blue-deep);
}

.policy-boundary .eyebrow { color: #9ec8f4; }

.policy-boundary ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 32px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.policy-boundary li {
  position: relative;
  padding-left: 18px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  line-height: 1.75;
}

.policy-boundary li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--red);
  transform: rotate(45deg);
}

.modal {
  width: min(1100px, calc(100vw - 30px));
  max-height: calc(100vh - 30px);
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  overflow: visible;
}

.modal::backdrop {
  background: rgba(8, 17, 27, 0.68);
  backdrop-filter: blur(6px);
}

.modal-card {
  max-height: calc(100vh - 30px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.34);
  overflow: hidden;
}

.compact-modal {
  width: min(500px, calc(100vw - 30px));
  margin: auto;
  padding: 26px;
}

.compact-modal .field { margin-top: 15px; }

.modal-heading {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.modal-heading > div:first-child { flex: 1; }

.modal-heading p {
  margin: 5px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
}

.icon-button {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 24px;
}

.input-with-unit {
  position: relative;
}

.input-with-unit span {
  position: absolute;
  top: 13px;
  right: 12px;
  color: var(--ink-soft);
  font-size: 11px;
}

.assessment-card {
  display: flex;
  flex-direction: column;
}

.sticky-heading {
  position: relative;
  z-index: 3;
  align-items: center;
  padding: 23px 28px;
  color: white;
  background: var(--blue-deep);
}

.sticky-heading .eyebrow { color: #9ec8f4; }
.sticky-heading p { color: rgba(255, 255, 255, 0.55); }
.sticky-heading .icon-button { color: white; border-color: rgba(255, 255, 255, 0.2); }

.live-score {
  display: grid;
  min-width: 120px;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 10px;
}

.live-score span {
  grid-column: 1 / -1;
  color: rgba(255, 255, 255, 0.55);
  font-size: 10px;
}

.live-score strong {
  font-family: Georgia, serif;
  font-size: 28px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.level-select-section {
  padding: 12px 0 28px;
}

.level-select-heading {
  max-width: 720px;
  margin-bottom: 22px;
}

.level-select-heading h3 {
  margin: 5px 0 8px;
  font-family: var(--serif);
  font-size: 24px;
}

.level-select-heading p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.75;
}

.level-choice-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.level-choice {
  position: relative;
  display: grid;
  min-height: 190px;
  align-content: start;
  padding: 20px 17px;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  transition: 180ms ease;
}

.level-choice:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(16, 40, 63, 0.1);
}

.level-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.level-choice .level-code {
  display: grid;
  width: 34px;
  height: 34px;
  margin-bottom: 24px;
  place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  color: var(--ink-soft);
  font-family: Georgia, serif;
}

.level-choice strong {
  font-family: var(--serif);
  font-size: 22px;
}

.level-choice small {
  margin-top: 4px;
  color: var(--blue);
  font-family: Georgia, serif;
}

.level-choice p {
  margin: 16px 0 0;
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.6;
}

.level-choice.is-selected {
  color: white;
  border-color: var(--blue-deep);
  background: var(--blue-deep);
  box-shadow: inset 0 4px 0 var(--red), 0 14px 30px rgba(16, 40, 63, 0.17);
}

.level-choice.is-selected .level-code { color: white; border-color: rgba(255, 255, 255, 0.4); }
.level-choice.is-selected small { color: #9ec8f4; }
.level-choice.is-selected p { color: rgba(255, 255, 255, 0.62); }
.level-choice.is-locked { cursor: default; }
.level-choice.is-locked:not(.is-selected) { opacity: 0.35; }
.level-choice.is-locked:hover { transform: none; box-shadow: none; }

.live-score em {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  font-family: Georgia, serif;
  font-style: normal;
}

.assessment-scroll {
  flex: 1;
  padding: 28px;
  overflow-y: auto;
}

.self-summary,
.adjustment-section,
.improvement-section {
  display: grid;
  grid-template-columns: minmax(200px, 0.42fr) minmax(0, 1fr);
  gap: 28px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.self-summary h3,
.score-section h3,
.adjustment-section h3,
.improvement-section h3 {
  margin: 2px 0 5px;
  font-family: var(--serif);
  font-size: 17px;
}

.self-summary p,
.adjustment-section p,
.improvement-section p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.7;
}

.section-number {
  color: var(--red);
  font-family: Georgia, serif;
  font-size: 10px;
  font-weight: 700;
}

.score-section {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.section-title-row {
  display: grid;
  grid-template-columns: 1fr 190px;
  align-items: end;
  margin-bottom: 12px;
}

.score-columns-label {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  color: var(--ink-soft);
  font-size: 10px;
  text-align: center;
}

.metric-score-list {
  display: grid;
  gap: 7px;
}

.metric-score-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 90px;
  gap: 10px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.metric-copy {
  min-width: 0;
}

.metric-copy div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.metric-copy strong {
  font-size: 12px;
}

.metric-copy b {
  color: var(--blue);
  font-family: Georgia, serif;
  font-size: 11px;
}

.metric-copy p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.5;
}

.score-input-wrap {
  position: relative;
}

.score-input-wrap input {
  min-height: 40px;
  padding-right: 31px;
  text-align: right;
  font-family: Georgia, serif;
}

.score-input-wrap.is-active-role {
  outline: 2px solid rgba(42, 111, 190, 0.16);
  outline-offset: 2px;
}

.score-input-wrap.is-readonly {
  opacity: 0.48;
}

.score-input-wrap.is-readonly input,
.field.is-readonly input,
.field.is-readonly textarea,
textarea[readonly] {
  color: var(--ink-soft);
  background: #ece9e1;
  cursor: not-allowed;
}

.score-input-wrap span {
  position: absolute;
  top: 12px;
  right: 10px;
  color: var(--ink-soft);
  font-size: 10px;
}

.adjustment-controls {
  display: flex;
  gap: 12px;
}

.adjustment-controls .field:first-child { width: 130px; }
.field-grow { flex: 1; }

.improvement-section {
  transition: opacity 180ms ease;
}

.improvement-section.is-muted {
  opacity: 0.5;
}

.improvement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.result-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(180px, 1.2fr);
  margin-top: 22px;
  border: 1px solid var(--line-dark);
}

.result-strip > div {
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 90px;
  padding: 15px 18px;
  border-right: 1px solid var(--line);
}

.result-strip > div:last-child { border-right: 0; }

.result-strip span,
.result-strip small {
  color: var(--ink-soft);
  font-size: 10px;
}

.result-strip strong {
  font-family: Georgia, serif;
  font-size: 23px;
  font-weight: 400;
}

.result-main {
  color: white;
  background: var(--blue-deep);
}

.result-main span,
.result-main small { color: rgba(255, 255, 255, 0.6); }
.result-main strong { font-size: 28px; }

.sticky-actions {
  position: relative;
  z-index: 3;
  margin: 0;
  padding: 16px 28px;
  border-top: 1px solid var(--line);
  background: rgba(243, 240, 232, 0.96);
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  max-width: 360px;
  padding: 13px 18px;
  color: white;
  border-left: 4px solid #7bb9f5;
  background: #10283f;
  box-shadow: var(--shadow);
  font-size: 12px;
  line-height: 1.55;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: 220ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1120px) {
  .hero-grid { grid-template-columns: 1fr; }
  .deadline-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .deadline-list li { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .employee-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .sidebar {
    position: static;
    width: auto;
    min-height: auto;
    padding: 18px;
  }
  .sidebar::after { display: none; }
  .brand-lockup { padding-bottom: 16px; }
  .side-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; }
  .nav-item { grid-template-columns: 1fr; justify-items: center; padding: 10px 5px; text-align: center; }
  .nav-index { display: none; }
  .policy-note,
  .local-badge { display: none; }
  .main-stage { margin-left: 0; padding: 22px 16px 48px; }
  .topbar { align-items: flex-start; }
  .top-actions { flex-wrap: wrap; justify-content: flex-end; }
  .score-hero { grid-template-columns: 1fr; }
  .role-intro { grid-template-columns: 1fr 160px; padding: 30px; }
  .hero-meter { justify-self: start; grid-template-columns: auto auto; }
  .deadline-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-grid { grid-template-columns: 1fr; }
  .policy-boundary { grid-column: auto; }
  .policy-boundary ul { grid-template-columns: 1fr; }
  .template-row { grid-template-columns: 34px 1fr 90px 34px; }
  .template-row .metric-desc { grid-column: 2 / 4; }
  .self-summary,
  .adjustment-section,
  .improvement-section { grid-template-columns: 1fr; }
  .result-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .level-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .result-strip > div:nth-child(2) { border-right: 0; }
  .result-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 560px) {
  .topbar { display: grid; }
  .top-actions { justify-content: flex-start; }
  .top-actions .button { flex: 1; }
  .month-control { width: 100%; }
  .hero-copy h2 { font-size: 30px; }
  .role-intro { grid-template-columns: 1fr; gap: 22px; padding: 26px 22px; }
  .role-formula { min-height: 96px; justify-self: stretch; }
  .score-hero::before {
    right: 8px;
    bottom: -64px;
    width: 170px;
    height: 120px;
    border-top-width: 12px;
    border-bottom-width: 12px;
  }
  .stat-grid,
  .employee-grid,
  .deadline-list,
  .result-card-grid { grid-template-columns: 1fr; }
  .result-gallery-heading { display: grid; }
  .result-gallery-meta { justify-items: start; }
  .performance-id-card { grid-template-columns: 104px minmax(0, 1fr); }
  .photo-upload-block { grid-template-columns: 82px 1fr; }
  .employee-photo-preview { width: 82px; height: 102px; }
  .panel { padding: 20px 16px; }
  .data-table { min-width: 700px; }
  .panel-heading { display: grid; }
  .legend { justify-content: flex-start; }
  .template-row { grid-template-columns: 25px 1fr 30px; }
  .template-row .metric-category,
  .template-row .metric-desc,
  .template-row .weight-input { grid-column: 2 / 3; }
  .template-row .remove-metric { grid-column: 3; grid-row: 1; }
  .template-actions { flex-direction: column; }
  .section-title-row { grid-template-columns: 1fr; gap: 10px; }
  .score-columns-label { margin-left: calc(100% - 190px); }
  .metric-score-row { grid-template-columns: minmax(0, 1fr) 70px 70px; }
  .adjustment-controls { display: grid; }
  .adjustment-controls .field:first-child { width: auto; }
  .improvement-grid { grid-template-columns: 1fr; }
  .level-choice-grid { grid-template-columns: 1fr; }
  .level-choice { min-height: 118px; }
  .level-choice .level-code { margin-bottom: 12px; }
  .sticky-heading { padding: 18px; }
  .assessment-scroll { padding: 18px; }
  .live-score { order: 3; width: 100%; }
  .sticky-heading { flex-wrap: wrap; }
  .sticky-heading .icon-button { position: absolute; top: 16px; right: 16px; }
  .sticky-actions { padding: 12px; flex-wrap: wrap; }
  .sticky-actions .button { flex: 1; padding: 0 10px; }
}

/* Direction A — 工业档案证件系统 */
@media screen {
  :root {
    --paper: #eeeae0;
    --paper-strong: #e2ddd1;
    --surface: #faf8f2;
    --ink: #14202b;
    --ink-soft: #5b6268;
    --line: #cbc5b8;
    --line-dark: #8f918e;
    --blue: #175ca8;
    --blue-deep: #0d345d;
    --red: #bf302c;
    --shadow: 0 18px 48px rgba(17, 36, 53, 0.1);
  }

  body {
    background:
      linear-gradient(rgba(13, 52, 93, 0.032) 1px, transparent 1px),
      linear-gradient(90deg, rgba(13, 52, 93, 0.024) 1px, transparent 1px),
      var(--paper);
    background-size: 28px 28px;
  }

  .sidebar {
    width: 264px;
    padding: 28px 22px 22px;
    background:
      linear-gradient(90deg, transparent 21px, rgba(255, 255, 255, 0.06) 22px, transparent 23px),
      linear-gradient(155deg, #123c67 0%, #0b2948 45%, #081a2a 100%);
  }

  .sidebar::before {
    content: "PM—04";
    position: absolute;
    right: 18px;
    bottom: 210px;
    color: rgba(255, 255, 255, 0.06);
    font: 700 50px/1 Georgia, serif;
    letter-spacing: -0.04em;
    transform: rotate(-90deg) translateX(100%);
    transform-origin: right bottom;
    pointer-events: none;
  }

  .sidebar::after {
    right: -116px;
    bottom: 58px;
    width: 280px;
    height: 62px;
    border-top-width: 10px;
    border-bottom-width: 10px;
    opacity: 0.82;
  }

  .brand-lockup {
    align-items: flex-start;
    padding: 2px 4px 25px;
  }

  .brand-lockup strong {
    font-size: 19px;
    letter-spacing: 0.2em;
  }

  .brand-lockup small {
    color: rgba(255, 255, 255, 0.68);
    letter-spacing: 0.08em;
  }

  .document-code {
    display: block;
    margin-top: 10px;
    color: #86b7e7;
    font: 9px/1.2 Georgia, serif;
    letter-spacing: 0.1em;
  }

  .side-nav {
    gap: 4px;
    margin-top: 26px;
  }

  .nav-item {
    position: relative;
    min-height: 50px;
    grid-template-columns: 36px 1fr;
    padding: 12px 13px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0;
    transition: color 160ms ease, background 160ms ease;
  }

  .nav-item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--red);
    transform: scaleY(0);
    transition: transform 160ms ease;
  }

  .nav-item:hover {
    border-color: rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.06);
  }

  .nav-item.is-active {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.11);
    box-shadow: none;
  }

  .nav-item.is-active::before { transform: scaleY(1); }
  .nav-item.is-active .nav-index { color: #91c3f0; }

  .policy-note {
    padding: 16px 15px 12px;
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(0, 0, 0, 0.12);
  }

  .policy-note .eyebrow { color: #8ebce7; }
  .policy-note p { margin: 9px 0; }

  .main-stage {
    margin-left: 264px;
    padding: 26px clamp(26px, 3.6vw, 58px) 70px;
  }

  .topbar {
    position: relative;
    min-height: 92px;
    align-items: center;
    margin-bottom: 18px;
    padding: 4px 0 19px;
    border-bottom-color: var(--line-dark);
  }

  .topbar::after {
    content: "内部资料 ／ LOCAL DATA";
    position: absolute;
    right: 0;
    bottom: -1px;
    padding: 4px 8px;
    color: white;
    background: var(--blue-deep);
    font: 8px/1 Georgia, serif;
    letter-spacing: 0.08em;
  }

  .view-identity {
    position: relative;
    padding-left: 18px;
  }

  .view-identity::before {
    content: "";
    position: absolute;
    inset: 3px auto 2px 0;
    width: 4px;
    background: linear-gradient(var(--red) 0 34%, var(--blue) 34% 100%);
  }

  .topbar h1 { font-size: clamp(27px, 2.7vw, 38px); }
  .eyebrow { letter-spacing: 0.12em; }

  input,
  textarea,
  select,
  .button {
    border-radius: 1px;
  }

  .button {
    min-height: 42px;
    letter-spacing: 0.03em;
  }

  .button-primary {
    position: relative;
    box-shadow: none;
  }

  .button-primary::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--red);
  }

  .view { animation: dossier-view-in 240ms cubic-bezier(.2,.7,.2,1) both; }

  @keyframes dossier-view-in {
    from { opacity: 0; transform: translateY(6px); clip-path: inset(0 0 12px 0); }
    to { opacity: 1; transform: translateY(0); clip-path: inset(0); }
  }

  .result-gallery-heading {
    align-items: center;
    margin-bottom: 18px;
    padding: 27px 0 21px;
    border-bottom: 2px solid var(--ink);
  }

  .result-gallery-heading h2 {
    margin-top: 5px;
    font-size: clamp(31px, 3.5vw, 47px);
    letter-spacing: 0.01em;
  }

  .result-gallery-heading p { max-width: 640px; font-size: 11px; }

  .result-gallery-meta {
    min-width: 180px;
    padding-left: 22px;
    border-left: 1px solid var(--line-dark);
  }

  .result-gallery-meta strong {
    color: var(--blue-deep);
    font-size: 32px;
    font-weight: 700;
  }

  .result-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .performance-id-card {
    grid-template-columns: 124px minmax(120px, 1fr) 154px;
    grid-template-rows: auto 176px auto;
    gap: 0 18px;
    min-height: 260px;
    padding: 16px;
    border-color: var(--line-dark);
    background:
      linear-gradient(90deg, rgba(13, 52, 93, 0.035) 1px, transparent 1px),
      var(--surface);
    background-size: 22px 100%;
    box-shadow: 0 11px 28px rgba(13, 52, 93, 0.075);
  }

  .performance-id-card::before {
    content: "";
    position: absolute;
    inset: auto -34px -34px auto;
    width: 94px;
    height: 94px;
    border: 1px solid rgba(13, 52, 93, 0.13);
    border-radius: 50%;
    box-shadow: inset 0 0 0 9px var(--surface), inset 0 0 0 10px rgba(13, 52, 93, 0.13);
  }

  .performance-id-card::after { display: none; }
  .performance-id-card.is-complete { border-top: 1px solid var(--line-dark); }
  .performance-id-card.is-pending { border-top: 1px solid var(--line-dark); opacity: 0.82; }

  .id-card-topline {
    grid-column: 1 / -1;
    margin: -16px -16px 16px;
    padding: 10px 16px;
    border-bottom: 3px solid var(--red);
    font-size: 8px;
  }

  .id-photo-area {
    grid-column: 1;
    grid-row: 2;
    height: 176px;
    border: 1px solid var(--line-dark);
  }

  .id-photo-label {
    padding: 5px 7px;
    font-size: 8px;
    letter-spacing: 0.06em;
  }

  .id-person-copy {
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding-right: 4px;
  }

  .id-person-copy > small { font-size: 9px; letter-spacing: 0.12em; }
  .id-person-copy h3 { margin: 8px 0 4px; font-size: clamp(24px, 2.15vw, 31px); }
  .id-person-copy p { font-size: 11px; }
  .id-number {
    margin-top: auto;
    padding-top: 10px;
    color: var(--ink-soft);
    border-top-style: dashed;
    font-size: 9px;
  }

  .id-result-stack {
    grid-column: 3;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1.35fr;
    margin: 0;
    border-color: var(--line-dark);
  }

  .id-result-stack > div {
    min-height: 0;
    padding: 8px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .id-result-stack > div:last-child { border-bottom: 0; }
  .id-result-stack span { font-size: 8px; letter-spacing: 0.06em; }
  .id-final-result { position: relative; overflow: hidden; }
  .id-final-result::after {
    content: "核";
    position: absolute;
    right: 8px;
    bottom: -9px;
    color: rgba(255, 255, 255, 0.08);
    font: 700 54px/1 var(--serif);
  }
  .id-final-result strong { position: relative; z-index: 1; font-size: 22px; }

  .id-card-footer {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 13px;
    padding-top: 10px;
    border-top: 1px dashed var(--line-dark);
    font-size: 8px;
  }

  .role-intro {
    grid-template-columns: minmax(0, 1fr) 180px;
    min-height: 166px;
    margin-bottom: 14px;
    padding: 27px 32px;
    border: 1px solid #071d32;
    box-shadow: 0 14px 34px rgba(13, 52, 93, 0.14);
  }

  .role-intro-primary { border-top: 4px solid var(--red); }
  .role-intro-secondary { border-top: 4px solid #65a0d7; }
  .role-intro h2 { font-size: clamp(26px, 2.6vw, 36px); }
  .role-intro p { margin-top: 11px; font-size: 12px; }
  .role-formula { min-height: 104px; }
  .role-formula strong { font-size: 28px; }

  .panel {
    padding: 25px;
    border-color: var(--line-dark);
    background: rgba(250, 248, 242, 0.93);
  }

  .role-queue-panel { border-top-width: 1px; }
  .role-intro-primary + .role-queue-panel { border-top-color: var(--line-dark); }
  .panel-heading { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
  .queue-count { border-radius: 0; background: var(--paper); }

  .role-table {
    border-collapse: separate;
    border-spacing: 0 7px;
  }

  .role-table th { padding: 4px 13px 7px; border: 0; }
  .role-table td {
    padding: 12px 13px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--surface);
  }
  .role-table td:first-child { border-left: 3px solid var(--blue-deep); }
  .role-table td:last-child { border-right: 1px solid var(--line); text-align: right; }

  .person-cell { min-width: 180px; gap: 11px; }
  .queue-photo {
    width: 39px;
    height: 47px;
    flex: 0 0 auto;
    border: 1px solid var(--line-dark);
    object-fit: cover;
    object-position: center 24%;
  }
  .role-table .text-button {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--blue-deep);
    color: var(--blue-deep);
    background: transparent;
    text-decoration: none;
  }
  .role-table .text-button:hover { color: white; background: var(--blue-deep); text-decoration: none; }

  .status-pill { border-radius: 1px; }
  .level-pill { min-height: 27px; border-radius: 1px; }

  .employee-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .employee-card {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-rows: auto 92px auto;
    gap: 12px 16px;
    min-height: 172px;
    padding: 16px;
    border-color: var(--line-dark);
    background: var(--surface);
    animation: id-card-in 320ms ease both;
    animation-delay: calc(var(--card-order) * 35ms);
  }

  .employee-file-number {
    grid-column: 1 / -1;
    padding-bottom: 9px;
    color: var(--blue-deep);
    border-bottom: 1px solid var(--line);
    font: 9px/1.2 Georgia, serif;
    letter-spacing: 0.09em;
  }

  .employee-card-photo {
    grid-column: 1;
    grid-row: 2;
    width: 76px;
    height: 92px;
    margin: 0;
  }

  .employee-card-copy {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
  }
  .employee-card-copy strong { font-family: var(--serif); font-size: 21px; }
  .employee-card .employee-actions { top: 10px; right: 14px; }

  .settings-grid { gap: 13px; }
  .settings-card { border-top: 3px solid var(--blue-deep); }
  .danger-card { border-top-color: var(--red); }
  .policy-boundary { border-top: 4px solid var(--red); }

  .modal { width: min(1040px, calc(100vw - 32px)); }
  .modal::backdrop { background: rgba(5, 16, 27, 0.76); backdrop-filter: blur(3px); }
  .modal-card { border-radius: 1px; }
  dialog[open] .modal-card { animation: modal-file-in 210ms cubic-bezier(.2,.7,.2,1) both; }

  @keyframes modal-file-in {
    from { opacity: 0; transform: translateY(10px) scale(.992); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .sticky-heading {
    padding: 21px 26px;
    border-bottom: 4px solid var(--red);
    background:
      linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
      var(--blue-deep);
    background-size: 28px 100%;
  }
  .sticky-heading .icon-button { border-radius: 1px; }

  .level-select-heading { margin-bottom: 17px; }
  .level-select-heading h3 { font-size: 22px; }
  .section-number { letter-spacing: .12em; }
  .level-choice-grid { gap: 8px; }
  .level-choice {
    min-height: 164px;
    padding: 17px 15px;
    border-color: var(--line-dark);
    transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
  }
  .level-choice:hover { border-color: var(--blue-deep); transform: none; box-shadow: inset 0 -3px 0 var(--blue-deep); }
  .level-choice .level-code { width: 30px; height: 30px; margin-bottom: 17px; border-radius: 1px; }
  .level-choice strong { font-size: 21px; }
  .level-choice p { margin-top: 11px; }
  .level-choice.is-selected {
    color: white;
    background: var(--blue-deep);
    box-shadow: inset 0 4px 0 var(--red);
  }
  .level-choice.is-selected::after {
    content: "已选择";
    position: absolute;
    right: 8px;
    top: 9px;
    padding: 4px 6px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.45);
    font-size: 8px;
    letter-spacing: .1em;
    transform: rotate(3deg);
  }
  .live-score em { border-radius: 1px; }
  .result-strip { border-width: 1px 1px 3px; border-bottom-color: var(--blue-deep); }
  .sticky-actions { background: rgba(238, 234, 224, 0.98); }

  @media (max-width: 1180px) {
    .result-card-grid { grid-template-columns: 1fr; }
    .employee-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 820px) {
    .sidebar { width: auto; padding: 16px; }
    .sidebar::before { display: none; }
    .main-stage { margin-left: 0; padding: 20px 16px 48px; }
    .side-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .nav-item { min-height: 44px; border: 1px solid rgba(255,255,255,.09); }
    .nav-item::before { inset: auto 0 0 0; width: auto; height: 3px; transform: scaleX(0); }
    .nav-item.is-active::before { transform: scaleX(1); }
    .topbar::after { display: none; }
    .role-intro { grid-template-columns: 1fr 154px; }
  }

  @media (max-width: 620px) {
    .brand-lockup { padding-bottom: 13px; }
    .document-code { display: none; }
    .side-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .topbar { display: grid; align-items: start; }
    .view-identity { padding-left: 13px; }
    .top-actions { justify-content: stretch; }
    .result-gallery-heading { display: grid; }
    .result-gallery-meta { justify-items: start; padding: 12px 0 0; border: 0; border-top: 1px solid var(--line); }
    .performance-id-card {
      grid-template-columns: 94px minmax(0, 1fr);
      grid-template-rows: auto 134px auto auto;
      gap: 0 13px;
      min-height: 0;
    }
    .id-photo-area { grid-column: 1; grid-row: 2; height: 134px; }
    .id-person-copy { grid-column: 2; grid-row: 2; }
    .id-person-copy h3 { font-size: 25px; }
    .id-number { font-size: 8px; }
    .id-result-stack {
      grid-column: 1 / -1;
      grid-row: 3;
      grid-template-columns: 1fr 1fr 1.2fr;
      grid-template-rows: 1fr;
      margin-top: 13px;
    }
    .id-result-stack > div { min-height: 69px; border-right: 1px solid var(--line); border-bottom: 0; }
    .id-result-stack > div:last-child { border-right: 0; }
    .id-card-footer { grid-row: 4; }
    .role-intro { grid-template-columns: 1fr; padding: 24px 21px; }
    .role-formula { min-height: 88px; }
    .employee-grid { grid-template-columns: 1fr; }
    .panel { padding: 18px 14px; }
    .data-table { min-width: 650px; }
    .level-choice-grid { grid-template-columns: 1fr; }
    .level-choice { min-height: 112px; grid-template-columns: 36px 1fr auto; align-items: center; column-gap: 10px; }
    .level-choice .level-code { grid-row: 1 / 3; margin: 0; }
    .level-choice p { grid-column: 2 / -1; margin: 4px 0 0; }
    .level-choice.is-selected::after { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      scroll-behavior: auto !important;
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }
  }
}

@media print {
  body { background: white; }
  .sidebar,
  .topbar,
  .sticky-actions,
  .icon-button,
  .toast { display: none !important; }
  .main-stage { margin: 0; padding: 0; }
  .view { display: none !important; }
  dialog[open] { position: static; width: 100%; max-height: none; }
  dialog[open]::backdrop { display: none; }
  .assessment-card { max-height: none; border: 0; box-shadow: none; overflow: visible; }
  .assessment-scroll { overflow: visible; }
  .sticky-heading { color: var(--ink); background: white; border-bottom: 2px solid var(--ink); }
  .sticky-heading .eyebrow,
  .sticky-heading p { color: var(--ink-soft); }
  .metric-score-row,
  .result-strip { break-inside: avoid; }
}


/*
 * 参考视觉：浅薰衣草背景、悬浮白色容器、紫色强调、大圆角和柔和阴影。
 * 此文件只覆盖视觉层，不改变现有评分逻辑与本机数据结构。
 */

@media screen {
  :root {
    --paper: #dfe2f7;
    --paper-strong: #d4d8f2;
    --surface: #f9f9ff;
    --ink: #151a3d;
    --ink-soft: #666b8b;
    --line: #e4e4f5;
    --line-dark: #cbccec;
    --blue: #5a2cf5;
    --blue-deep: #5426e8;
    --red: #7352f8;
    --amber: #8d73ff;
    --green: #5e35f2;
    --violet-soft: #ebe8ff;
    --violet-mid: #a893ff;
    --shadow: 0 22px 55px rgba(59, 47, 133, 0.2);
    --shadow-soft: 0 12px 30px rgba(68, 55, 151, 0.13);
    --serif: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
    --sans: "Avenir Next", "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  }

  html {
    background: #dfe2f7;
  }

  body {
    color: var(--ink);
    background: #dfe2f7;
    background-image: none;
    font-family: var(--sans);
  }

  .app-shell {
    padding: 22px;
  }

  .sidebar {
    inset: 22px auto 22px 22px;
    width: 238px;
    padding: 28px 20px 22px;
    color: var(--ink);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 32px;
    background: rgba(249, 249, 255, 0.94);
    box-shadow: var(--shadow);
    overflow: hidden;
  }

  .sidebar::before,
  .sidebar::after,
  .topbar::after,
  .view-identity::before,
  .performance-id-card::before,
  .performance-id-card::after,
  .role-intro::after,
  .id-final-result::after,
  .button-primary::before,
  .nav-item::before {
    display: none;
  }

  .brand-lockup {
    display: block;
    padding: 4px 10px 25px;
    border-bottom: 1px solid var(--line);
  }

  .brand-mark {
    display: none;
  }

  .brand-lockup strong {
    color: var(--ink);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.05em;
  }

  .brand-lockup small {
    margin-top: 5px;
    color: var(--ink-soft);
    font-size: 11px;
    letter-spacing: 0.03em;
  }

  .document-code {
    margin-top: 11px;
    color: var(--blue);
    font: 700 9px/1.3 var(--sans);
    letter-spacing: 0.09em;
  }

  .side-nav {
    gap: 8px;
    margin-top: 24px;
  }

  .nav-item {
    min-height: 49px;
    grid-template-columns: 30px 1fr;
    padding: 11px 14px;
    color: #676b88;
    border: 0;
    border-radius: 16px;
    background: transparent;
    font-weight: 650;
    transition: color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  }

  .nav-item:hover {
    color: var(--blue);
    border-color: transparent;
    background: var(--violet-soft);
    transform: translateX(2px);
  }

  .nav-item.is-active {
    color: #fff;
    border: 0;
    background: var(--blue);
    box-shadow: 0 10px 24px rgba(90, 44, 245, 0.28);
  }

  .nav-index {
    color: #a6a8c4;
    font: 700 10px/1 var(--sans);
  }

  .nav-item.is-active .nav-index {
    color: rgba(255, 255, 255, 0.72);
  }

  .policy-note {
    margin-top: auto;
    padding: 17px 16px 13px;
    color: var(--ink);
    border: 0;
    border-radius: 20px;
    background: #efedff;
  }

  .policy-note .eyebrow {
    color: var(--blue);
  }

  .policy-note p {
    margin: 9px 0;
    color: var(--ink-soft);
  }

  .policy-note b {
    color: var(--ink);
    font-family: var(--sans);
    font-size: 13px;
  }

  .local-badge {
    margin: 14px 5px 0;
    color: #9699b2;
    font-size: 9px;
  }

  .status-dot {
    background: var(--blue);
    box-shadow: 0 0 0 4px rgba(90, 44, 245, 0.1);
  }

  .main-stage {
    margin-left: 258px;
    padding: 0 0 50px 22px;
  }

  .topbar {
    min-height: 102px;
    align-items: center;
    margin-bottom: 18px;
    padding: 20px 24px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 28px;
    background: rgba(249, 249, 255, 0.9);
    box-shadow: var(--shadow-soft);
  }

  .view-identity {
    padding-left: 0;
  }

  .eyebrow {
    margin-bottom: 7px;
    color: var(--blue);
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.09em;
    text-transform: none;
  }

  .topbar h1,
  .panel h2,
  .modal h2,
  .score-hero h2,
  .result-gallery-heading h2,
  .role-intro h2,
  .id-person-copy h3,
  .level-choice strong {
    font-family: var(--sans);
    letter-spacing: 0;
  }

  .topbar h1 {
    font-size: clamp(25px, 2.5vw, 36px);
    font-weight: 760;
  }

  .top-actions {
    gap: 9px;
  }

  .month-control span,
  .field > span {
    color: var(--ink-soft);
    font-size: 10px;
  }

  input,
  textarea,
  select {
    color: var(--ink);
    border: 1px solid transparent;
    border-radius: 13px;
    background: #f0effc;
    box-shadow: inset 0 0 0 1px rgba(108, 91, 194, 0.05);
  }

  input:focus,
  textarea:focus,
  select:focus {
    border-color: rgba(90, 44, 245, 0.35);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(90, 44, 245, 0.09);
  }

  .button {
    min-height: 42px;
    padding: 0 17px;
    border-radius: 13px;
    font-size: 11px;
    letter-spacing: 0;
  }

  .button:hover {
    transform: translateY(-1px);
  }

  .button-primary {
    color: #fff;
    background: var(--blue);
    box-shadow: 0 10px 22px rgba(90, 44, 245, 0.22);
  }

  .button-primary:hover {
    background: #6a3af6;
    box-shadow: 0 13px 28px rgba(90, 44, 245, 0.28);
  }

  .button-secondary {
    color: var(--ink);
    border: 0;
    background: #efedff;
  }

  .button-secondary:hover,
  .button-ghost:hover {
    color: var(--blue);
    background: #e9e5ff;
  }

  .button-danger {
    color: #fff;
    border: 0;
    background: #7b5bf5;
  }

  .view {
    animation: lavender-view-in 230ms ease both;
  }

  @keyframes lavender-view-in {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .result-gallery-heading {
    align-items: center;
    margin-bottom: 17px;
    padding: 22px 26px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 26px;
    background: rgba(249, 249, 255, 0.88);
    box-shadow: var(--shadow-soft);
  }

  .result-gallery-heading h2 {
    margin-top: 3px;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 760;
  }

  .result-gallery-heading p {
    margin-top: 8px;
    color: var(--ink-soft);
    font-size: 11px;
  }

  .result-gallery-meta {
    min-width: 170px;
    padding: 12px 17px;
    border: 0;
    border-radius: 18px;
    background: #efedff;
  }

  .result-gallery-meta strong {
    color: var(--blue);
    font-family: var(--sans);
    font-size: 28px;
    font-weight: 780;
  }

  .result-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .performance-id-card {
    grid-template-columns: 116px minmax(130px, 1fr) 158px;
    grid-template-rows: auto 170px auto;
    gap: 0 17px;
    min-height: 256px;
    padding: 17px;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 28px;
    background: rgba(249, 249, 255, 0.96);
    background-image: none;
    box-shadow: var(--shadow-soft);
  }

  .performance-id-card.is-complete,
  .performance-id-card.is-pending {
    border-top: 1px solid rgba(255, 255, 255, 0.92);
  }

  .performance-id-card.is-pending {
    opacity: 1;
  }

  .id-card-topline {
    grid-column: 1 / -1;
    margin: -17px -17px 16px;
    padding: 13px 18px;
    color: #fff;
    border: 0;
    border-radius: 28px 28px 12px 12px;
    background: var(--blue);
    font-size: 8px;
    letter-spacing: 0.08em;
  }

  .id-card-topline b {
    color: rgba(255, 255, 255, 0.78);
  }

  .id-photo-area {
    height: 170px;
    border: 0;
    border-radius: 20px;
    background: #e8e7f8;
    box-shadow: inset 0 0 0 1px rgba(85, 63, 165, 0.07);
  }

  .photo-placeholder {
    color: rgba(90, 44, 245, 0.5);
    background: #e8e7f8;
  }

  .id-photo-label {
    right: 8px;
    bottom: 8px;
    padding: 5px 8px;
    border-radius: 9px;
    background: rgba(90, 44, 245, 0.88);
  }

  .id-person-copy > small {
    color: #9a9db9;
  }

  .id-person-copy h3 {
    margin: 7px 0 4px;
    color: var(--ink);
    font-size: clamp(24px, 2vw, 29px);
    font-weight: 780;
  }

  .id-person-copy p {
    color: var(--ink-soft);
  }

  .id-number {
    color: var(--blue);
    border-top: 1px solid var(--line);
    font-family: var(--sans);
    font-weight: 700;
  }

  .id-result-stack {
    grid-template-rows: 1fr 1fr 1.35fr;
    border: 0;
    border-radius: 18px;
    background: #f0effc;
    overflow: hidden;
  }

  .id-result-stack > div {
    border: 0;
    border-bottom: 1px solid #deddf2;
    background: transparent;
  }

  .id-result-stack > div:last-child {
    border-bottom: 0;
  }

  .id-final-result {
    color: #fff;
    background: var(--blue) !important;
  }

  .id-final-result strong {
    font-family: var(--sans);
    font-weight: 780;
  }

  .id-card-footer {
    color: #9295af;
    border-top: 1px solid var(--line);
  }

  .id-card-footer b {
    color: var(--blue);
  }

  .level-pill {
    min-width: 54px;
    min-height: 27px;
    color: var(--blue);
    border: 0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 5px 13px rgba(67, 50, 154, 0.08);
  }

  .level-excellent,
  .level-good,
  .level-average,
  .level-pass,
  .level-poor {
    color: var(--blue);
    border-color: transparent;
    background: #fff;
  }

  .level-badge,
  .final-grade-badge {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 7px;
    padding: 5px 10px 5px 5px;
    color: var(--level-color, var(--blue));
    border: 0;
    border-radius: 13px;
    background: var(--level-bg, #ebe8ff);
    box-shadow: inset 0 0 0 1px rgba(73, 53, 155, 0.05);
    white-space: nowrap;
  }

  .level-badge-code,
  .final-grade-code {
    display: grid;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    place-items: center;
    color: #fff;
    border-radius: 9px;
    background: var(--level-color, var(--blue));
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
  }

  .level-badge b,
  .final-grade-badge b {
    color: #303451;
    font-size: 10px;
    font-weight: 760;
  }

  .level-badge.level-excellent,
  .final-grade-badge.grade-S {
    --level-color: #b26f00;
    --level-bg: #fff2cf;
  }

  .level-badge.level-good,
  .final-grade-badge.grade-A {
    --level-color: #2f8768;
    --level-bg: #e4f5ed;
  }

  .level-badge.level-average,
  .final-grade-badge.grade-B {
    --level-color: #3d6fbd;
    --level-bg: #e8f1ff;
  }

  .level-badge.level-pass,
  .final-grade-badge.grade-C {
    --level-color: #a36a23;
    --level-bg: #fff0dc;
  }

  .level-badge.level-poor,
  .final-grade-badge.grade-D {
    --level-color: #c44e5d;
    --level-bg: #ffe8ec;
  }

  .level-badge.is-empty,
  .final-grade-badge.is-waiting {
    --level-color: #a6a8bd;
    --level-bg: #f0f0f7;
    color: #8d8fa8;
  }

  .id-final-result .final-grade-badge {
    min-height: 36px;
    color: #303451;
    background: #fff;
    box-shadow: 0 7px 16px rgba(29, 19, 92, 0.16);
  }

  .id-final-result .final-grade-code {
    color: #fff;
    background: var(--level-color, var(--blue));
  }

  .id-final-result .final-grade-badge b {
    color: #303451;
    font-size: 12px;
  }

  .role-table .final-grade-badge,
  .role-table .level-badge {
    min-height: 32px;
  }

  .role-intro {
    grid-template-columns: minmax(0, 1fr) 180px;
    min-height: 166px;
    margin-bottom: 16px;
    padding: 28px 32px;
    color: #fff;
    border: 0;
    border-radius: 28px;
    background: var(--blue);
    box-shadow: 0 20px 45px rgba(90, 44, 245, 0.22);
  }

  .role-intro-primary,
  .role-intro-secondary {
    border-top: 0;
  }

  .role-intro .eyebrow {
    color: #d8ceff;
  }

  .role-intro h2 {
    color: #fff;
    font-weight: 760;
  }

  .role-intro p {
    color: rgba(255, 255, 255, 0.72);
  }

  .role-formula {
    min-height: 108px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
  }

  .role-formula strong {
    font-family: var(--sans);
    font-weight: 780;
  }

  .panel,
  .deadline-card,
  .stat-card {
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 26px;
    background: rgba(249, 249, 255, 0.93);
    box-shadow: var(--shadow-soft);
  }

  .panel {
    padding: 25px;
  }

  .panel-heading {
    margin-bottom: 17px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--line);
  }

  .panel-heading h2,
  .settings-card h2 {
    font-weight: 760;
  }

  .queue-count {
    color: var(--blue);
    border: 0;
    border-radius: 13px;
    background: #ece9ff;
    font-weight: 700;
  }

  .role-table {
    border-spacing: 0 8px;
  }

  .role-table th {
    color: #8589a5;
  }

  .role-table td {
    border: 0;
    background: #f0effc;
  }

  .role-table td:first-child {
    border-left: 0;
    border-radius: 16px 0 0 16px;
  }

  .role-table td:last-child {
    border-right: 0;
    border-radius: 0 16px 16px 0;
  }

  .queue-photo {
    border: 0;
    border-radius: 12px;
    background: #e3e1f5;
  }

  .role-table .text-button {
    min-height: 34px;
    padding: 0 13px;
    color: #fff;
    border: 0;
    border-radius: 11px;
    background: var(--blue);
    text-decoration: none;
  }

  .role-table .text-button:hover {
    color: #fff;
    background: #6a3af6;
  }

  .status-pill {
    color: #706f90;
    border-radius: 10px;
    background: #e5e3f4;
  }

  .status-pill.is-final,
  .status-pill.is-pending {
    color: var(--blue);
    background: #e5e0ff;
  }

  .grade-chip {
    color: var(--blue);
    border: 0;
    border-radius: 9px;
    background: #e8e4ff;
  }

  .employee-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
  }

  .employee-card {
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 22px;
    background: #f8f8ff;
    box-shadow: 0 10px 24px rgba(67, 50, 154, 0.09);
  }

  .employee-file-number {
    color: var(--blue);
    border-bottom-color: var(--line);
    font-family: var(--sans);
    font-weight: 700;
  }

  .employee-card-photo {
    border: 0;
    border-radius: 16px;
  }

  .employee-card-copy strong {
    font-family: var(--sans);
    font-weight: 760;
  }

  .text-button {
    color: var(--blue);
  }

  .text-button.is-danger {
    color: #7658ea;
  }

  .settings-card {
    border-top: 1px solid rgba(255, 255, 255, 0.88);
  }

  .danger-card {
    border-top-color: rgba(255, 255, 255, 0.88);
  }

  .policy-boundary {
    color: var(--ink);
    border: 0;
    background: #ece9ff;
  }

  .policy-boundary .eyebrow {
    color: var(--blue);
  }

  .policy-boundary li {
    color: var(--ink-soft);
  }

  .policy-boundary li::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue);
    transform: none;
  }

  .photo-upload-block {
    border: 0;
    border-radius: 18px;
    background: #f0effc;
  }

  .photo-upload-actions .photo-upload-button {
    display: inline-grid;
    min-width: 154px;
    min-height: 52px;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 7px 14px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.34);
    background: linear-gradient(135deg, #7146ff 0%, #5327ef 100%);
    box-shadow: 0 9px 20px rgba(90, 44, 245, 0.24);
  }

  .photo-upload-actions .photo-upload-button:hover {
    color: #fff;
    background: linear-gradient(135deg, #7c52ff 0%, #6031f6 100%);
    box-shadow: 0 12px 24px rgba(90, 44, 245, 0.3);
  }

  .photo-upload-button:focus-visible {
    outline: 3px solid rgba(90, 44, 245, 0.24);
    outline-offset: 3px;
  }

  .photo-upload-button svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .photo-upload-copy {
    display: grid;
    gap: 2px;
    text-align: left;
  }

  .photo-upload-copy strong {
    font-size: 12px;
    font-weight: 760;
    line-height: 1.2;
  }

  .photo-upload-copy small {
    color: rgba(255, 255, 255, 0.72);
    font-size: 8px;
    font-weight: 500;
    line-height: 1.2;
  }

  .employee-photo-preview {
    border: 0;
    border-radius: 18px;
    background: #e5e3f5;
  }

  .template-row {
    border: 0;
    border-radius: 16px;
    background: #f0effc;
  }

  .remove-metric {
    width: auto;
    min-width: 46px;
    padding: 0 8px;
    border: 0;
    border-radius: 10px;
    color: var(--blue);
    background: #e4e0ff;
    font-size: 9px;
  }

  .modal {
    width: min(1040px, calc(100vw - 32px));
  }

  .modal::backdrop {
    background: rgba(33, 27, 86, 0.38);
    backdrop-filter: blur(5px);
  }

  .modal-card {
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 28px;
    background: #f8f8ff;
    box-shadow: 0 30px 80px rgba(50, 36, 129, 0.3);
  }

  .compact-modal {
    border-radius: 28px;
  }

  .sticky-heading {
    padding: 22px 27px;
    color: #fff;
    border: 0;
    border-radius: 28px 28px 0 0;
    background: var(--blue);
    background-image: none;
  }

  .sticky-heading .eyebrow {
    color: #d9d0ff;
  }

  .icon-button {
    width: auto;
    min-width: 54px;
    height: 34px;
    padding: 0 11px;
    color: var(--ink-soft);
    border: 0;
    border-radius: 12px;
    background: #eceaf8;
    font-size: 10px;
    font-weight: 700;
  }

  .sticky-heading .icon-button {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.1);
  }

  .live-score strong {
    font-family: var(--sans);
    font-weight: 780;
  }

  .live-score em {
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
  }

  .assessment-scroll {
    padding: 28px;
  }

  .level-choice-grid {
    gap: 10px;
  }

  .level-choice {
    min-height: 164px;
    padding: 17px 15px;
    border: 0;
    border-radius: 18px;
    background: #efeffb;
    box-shadow: none;
  }

  .level-choice:hover {
    border-color: transparent;
    background: #e8e5ff;
    box-shadow: none;
    transform: translateY(-2px);
  }

  .level-choice .level-code {
    width: 31px;
    height: 31px;
    margin-bottom: 16px;
    color: var(--blue);
    border: 0;
    border-radius: 10px;
    background: #fff;
  }

  .level-choice small {
    color: var(--blue);
  }

  .level-choice.is-selected {
    color: #fff;
    border-color: transparent;
    background: var(--blue);
    box-shadow: 0 14px 28px rgba(90, 44, 245, 0.23);
  }

  .level-choice.is-selected::after {
    padding: 4px 7px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.14);
    transform: none;
  }

  .result-strip {
    border: 0;
    border-radius: 18px;
    background: #efeffb;
    overflow: hidden;
  }

  .result-strip > div {
    border-right-color: #deddf2;
  }

  .result-main {
    color: #fff;
    background: var(--blue);
  }

  .result-strip strong {
    font-family: var(--sans);
    font-weight: 760;
  }

  .sticky-actions {
    padding: 16px 28px;
    border-top-color: var(--line);
    background: rgba(248, 248, 255, 0.97);
  }

  .empty-state {
    margin-top: 16px;
    border: 0;
    border-radius: 24px;
    background: rgba(249, 249, 255, 0.88);
    box-shadow: var(--shadow-soft);
  }

  .toast {
    border: 0;
    border-radius: 15px;
    background: var(--blue);
    box-shadow: 0 16px 36px rgba(90, 44, 245, 0.28);
  }

  @media (max-width: 1180px) {
    .result-card-grid {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 820px) {
    .app-shell {
      padding: 14px;
    }

    .sidebar {
      position: static;
      width: auto;
      min-height: auto;
      padding: 17px;
      border-radius: 24px;
    }

    .brand-lockup {
      padding: 2px 4px 14px;
    }

    .side-nav {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      margin-top: 14px;
    }

    .nav-item {
      min-height: 44px;
      grid-template-columns: 1fr;
      justify-items: center;
      padding: 9px 5px;
      text-align: center;
    }

    .nav-item:hover {
      transform: none;
    }

    .main-stage {
      margin-left: 0;
      padding: 16px 0 36px;
    }

    .topbar {
      border-radius: 24px;
    }

    .role-intro {
      grid-template-columns: 1fr 154px;
    }
  }

  @media (max-width: 620px) {
    .app-shell {
      padding: 10px;
    }

    .sidebar {
      border-radius: 21px;
    }

    .side-nav {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .topbar {
      display: grid;
      gap: 16px;
      padding: 19px;
      border-radius: 21px;
    }

    .top-actions {
      justify-content: stretch;
    }

    .result-gallery-heading {
      display: grid;
      padding: 20px;
      border-radius: 21px;
    }

    .result-gallery-meta {
      justify-items: start;
      padding: 12px 15px;
      border: 0;
    }

    .performance-id-card {
      grid-template-columns: 94px minmax(0, 1fr);
      grid-template-rows: auto 134px auto auto;
      gap: 0 13px;
      min-height: 0;
      border-radius: 22px;
    }

    .id-card-topline {
      border-radius: 22px 22px 11px 11px;
    }

    .id-photo-area {
      height: 134px;
      border-radius: 16px;
    }

    .id-result-stack {
      grid-template-columns: 1fr 1fr 1.2fr;
      grid-template-rows: 1fr;
      margin-top: 13px;
    }

    .id-result-stack > div {
      min-height: 68px;
      border-right: 1px solid #deddf2;
      border-bottom: 0;
    }

    .id-result-stack > div:last-child {
      border-right: 0;
    }

    .role-intro {
      grid-template-columns: 1fr;
      padding: 23px 20px;
      border-radius: 22px;
    }

    .role-formula {
      min-height: 88px;
    }

    .panel {
      padding: 18px 14px;
      border-radius: 22px;
    }

    .employee-grid {
      grid-template-columns: 1fr;
    }

    .data-table {
      min-width: 650px;
    }

    .modal-card,
    .compact-modal {
      border-radius: 22px;
    }

    .sticky-heading {
      border-radius: 22px 22px 0 0;
    }

    .level-choice-grid {
      grid-template-columns: 1fr;
    }

    .level-choice {
      min-height: 112px;
      grid-template-columns: 36px 1fr auto;
      align-items: center;
      column-gap: 10px;
    }

    .level-choice .level-code {
      grid-row: 1 / 3;
      margin: 0;
    }

    .level-choice p {
      grid-column: 2 / -1;
      margin: 4px 0 0;
    }

    .level-choice.is-selected::after {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}


/* 中文排版层级：在浅紫主题之上统一字号、行高、字重与放大后的布局空间。 */

@media screen {
  :root {
    --type-display: clamp(32px, 3vw, 40px);
    --type-page-title: clamp(30px, 2.7vw, 38px);
    --type-section-title: clamp(24px, 2.2vw, 30px);
    --type-card-title: 22px;
    --type-body: 13px;
    --type-control: 13px;
    --type-small: 12px;
    --type-meta: 11px;
    --leading-tight: 1.25;
    --leading-body: 1.65;
    --leading-compact: 1.45;
  }

  body {
    font-size: var(--type-body);
    line-height: var(--leading-body);
  }

  button,
  input,
  textarea,
  select {
    font-size: var(--type-control);
  }

  .brand-lockup strong {
    font-size: 22px;
    line-height: var(--leading-tight);
  }

  .brand-lockup small {
    margin-top: 6px;
    font-size: var(--type-small);
    line-height: var(--leading-compact);
  }

  .document-code {
    font-size: var(--type-meta);
    line-height: var(--leading-compact);
  }

  .nav-item {
    font-size: 13px;
    line-height: var(--leading-compact);
  }

  .nav-index {
    font-size: var(--type-meta);
  }

  .policy-note .eyebrow,
  .policy-note p,
  .local-badge {
    font-size: var(--type-meta);
    line-height: var(--leading-compact);
  }

  .policy-note b {
    font-size: 14px;
  }

  .topbar {
    min-height: 112px;
  }

  .eyebrow {
    margin-bottom: 8px;
    font-size: var(--type-meta);
    line-height: 1.35;
    letter-spacing: 0.07em;
  }

  .topbar h1 {
    font-size: var(--type-page-title);
    line-height: var(--leading-tight);
  }

  .month-control span,
  .field > span,
  .field-label {
    font-size: var(--type-small);
    line-height: var(--leading-compact);
  }

  input {
    min-height: 45px;
  }

  textarea {
    line-height: 1.65;
  }

  .button {
    min-height: 44px;
    font-size: var(--type-control);
    line-height: 1;
  }

  .result-gallery-heading {
    padding: 25px 28px;
  }

  .result-gallery-heading h2 {
    font-size: var(--type-display);
    line-height: 1.18;
  }

  .result-gallery-heading p {
    max-width: 680px;
    margin-top: 10px;
    font-size: var(--type-body);
    line-height: var(--leading-body);
  }

  .result-gallery-meta span,
  .result-gallery-meta small {
    font-size: var(--type-meta);
    line-height: var(--leading-compact);
  }

  .result-gallery-meta strong {
    font-size: 30px;
    line-height: 1.1;
  }

  .performance-id-card {
    grid-template-columns: 122px minmax(140px, 1fr) 196px;
    grid-template-rows: auto 180px auto;
    min-height: 276px;
  }

  .id-card-topline {
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: var(--type-meta);
    line-height: 1.35;
  }

  .id-photo-area {
    height: 180px;
  }

  .id-photo-label {
    font-size: var(--type-meta);
    line-height: 1.2;
  }

  .id-person-copy > small {
    font-size: var(--type-meta);
    line-height: var(--leading-compact);
  }

  .id-person-copy h3 {
    margin: 9px 0 6px;
    font-size: clamp(26px, 2.1vw, 31px);
    line-height: 1.2;
  }

  .id-person-copy p {
    font-size: var(--type-body);
    line-height: var(--leading-compact);
  }

  .id-result-stack span {
    font-size: var(--type-meta);
    line-height: 1.35;
  }

  .id-result-stack > div {
    grid-template-columns: 60px minmax(0, 1fr);
    align-content: center;
    align-items: center;
    justify-items: start;
    gap: 8px;
    min-width: 0;
    padding: 7px 10px;
  }

  .id-result-stack .level-badge,
  .id-result-stack .final-grade-badge {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .id-result-stack > div > span:first-child,
  .id-final-result small {
    white-space: nowrap;
  }

  .id-final-result > span:first-child,
  .id-final-result small {
    color: rgba(255, 255, 255, 0.84);
  }

  .id-final-result small {
    grid-column: 1 / -1;
    margin-top: -2px;
  }

  .level-badge,
  .final-grade-badge {
    min-height: 36px;
    padding: 5px 11px 5px 5px;
  }

  .level-badge-code,
  .final-grade-code {
    width: 26px;
    height: 26px;
    font-size: 10px;
  }

  .level-badge b,
  .final-grade-badge b {
    font-size: var(--type-small);
    line-height: 1.2;
  }

  .id-final-result .final-grade-badge b {
    font-size: 13px;
  }

  .id-final-result small {
    font-size: var(--type-meta);
    line-height: 1.35;
  }

  .id-card-footer {
    font-size: var(--type-meta);
    line-height: var(--leading-compact);
  }

  .role-intro {
    min-height: 178px;
    padding: 30px 34px;
  }

  .role-intro h2 {
    font-size: clamp(29px, 2.5vw, 36px);
    line-height: 1.22;
  }

  .role-intro p {
    max-width: 760px;
    font-size: 13px;
    line-height: 1.75;
  }

  .role-formula span,
  .role-formula small {
    font-size: var(--type-meta);
    line-height: var(--leading-compact);
  }

  .role-formula strong {
    font-size: 30px;
    line-height: 1.1;
  }

  .panel-heading h2,
  .settings-card h2 {
    font-size: var(--type-section-title);
    line-height: 1.3;
  }

  .panel-heading p,
  .settings-card > p {
    max-width: 700px;
    font-size: var(--type-body);
    line-height: var(--leading-body);
  }

  .queue-count {
    font-size: var(--type-small);
    line-height: 1.3;
  }

  .data-table {
    font-size: var(--type-body);
  }

  .data-table th,
  .role-table th {
    font-size: var(--type-small);
    line-height: var(--leading-compact);
    letter-spacing: 0.02em;
  }

  .data-table td,
  .role-table td {
    font-size: var(--type-body);
    line-height: var(--leading-compact);
  }

  .person-cell strong {
    font-size: 14px;
    line-height: 1.35;
  }

  .person-cell small {
    margin-top: 5px;
    font-size: var(--type-small);
    line-height: 1.35;
  }

  .status-pill,
  .role-table .text-button,
  .text-button {
    font-size: var(--type-small);
    line-height: 1.2;
  }

  .employee-file-number {
    font-size: var(--type-meta);
    line-height: var(--leading-compact);
  }

  .employee-card-copy strong {
    font-size: var(--type-card-title);
    line-height: 1.25;
  }

  .employee-card-copy small {
    font-size: var(--type-small);
    line-height: var(--leading-compact);
  }

  .photo-upload-block .field-label {
    font-size: var(--type-small);
  }

  .photo-upload-block p {
    font-size: var(--type-small);
    line-height: var(--leading-body);
  }

  .settings-card,
  .policy-boundary li {
    font-size: var(--type-body);
    line-height: var(--leading-body);
  }

  .modal-heading h2 {
    font-size: 26px;
    line-height: 1.25;
  }

  .modal-heading p {
    font-size: var(--type-body);
    line-height: var(--leading-compact);
  }

  .icon-button {
    font-size: var(--type-small);
  }

  .live-score span {
    font-size: var(--type-meta);
  }

  .live-score strong {
    font-size: 28px;
    line-height: 1.15;
  }

  .level-select-heading h3 {
    font-size: 24px;
    line-height: 1.3;
  }

  .level-select-heading p {
    font-size: var(--type-body);
    line-height: var(--leading-body);
  }

  .level-choice {
    min-height: 174px;
  }

  .level-choice strong {
    font-size: 22px;
    line-height: 1.25;
  }

  .level-choice small {
    font-size: var(--type-small);
    line-height: 1.3;
  }

  .level-choice p {
    font-size: var(--type-small);
    line-height: 1.55;
  }

  .level-choice.is-selected::after,
  .section-number {
    font-size: var(--type-meta);
    line-height: 1.2;
  }

  .result-strip span,
  .result-strip small {
    font-size: var(--type-meta);
    line-height: var(--leading-compact);
  }

  .result-strip strong {
    font-size: 20px;
    line-height: 1.25;
  }

  .result-main strong {
    font-size: 25px;
  }

  .toast {
    font-size: var(--type-body);
    line-height: var(--leading-body);
  }

  @media (max-width: 1180px) {
    .performance-id-card {
      grid-template-columns: 124px minmax(160px, 1fr) 202px;
    }
  }

  @media (max-width: 820px) {
    .nav-item {
      font-size: var(--type-small);
    }

    .topbar {
      min-height: 104px;
    }

    .role-intro {
      padding: 27px 28px;
    }
  }

  @media (max-width: 620px) {
    :root {
      --type-page-title: 28px;
      --type-section-title: 23px;
    }

    body {
      font-size: 14px;
    }

    .topbar h1 {
      font-size: 28px;
    }

    .result-gallery-heading h2 {
      font-size: 30px;
    }

    .result-gallery-heading p {
      font-size: 13px;
    }

    .performance-id-card {
      grid-template-columns: 100px minmax(0, 1fr);
      grid-template-rows: auto 144px auto auto;
    }

    .id-photo-area {
      height: 144px;
    }

    .id-person-copy h3 {
      font-size: 26px;
    }

    .id-result-stack {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: auto auto;
    }

    .id-result-stack > div {
      min-height: 76px;
    }

    .id-result-stack > div:last-child {
      border-right: 0;
    }

    .id-final-result {
      grid-column: 1 / -1;
      grid-row: 1;
      min-height: 84px !important;
    }

    .role-intro h2 {
      font-size: 28px;
    }

    .role-intro p {
      font-size: 13px;
    }

    .data-table {
      min-width: 720px;
    }

    .level-choice {
      min-height: 122px;
    }

    .sticky-heading {
      gap: 14px;
    }
  }
}

@media print {
  body {
    font-size: 11pt;
    line-height: 1.5;
  }

  .sticky-heading h2 {
    font-size: 20pt;
  }
}


/* 圆角收紧层：统一降低大圆角，保留状态圆点和圆形语义。 */

@media screen {
  :root {
    --radius-shell: 12px;
    --radius-panel: 10px;
    --radius-card: 8px;
    --radius-control: 5px;
    --radius-small: 3px;
  }

  .sidebar {
    border-radius: var(--radius-shell);
  }

  .topbar,
  .result-gallery-heading,
  .performance-id-card,
  .role-intro,
  .panel,
  .deadline-card,
  .stat-card,
  .modal-card,
  .compact-modal,
  .empty-state {
    border-radius: var(--radius-panel);
  }

  .policy-note,
  .role-formula,
  .result-gallery-meta,
  .id-result-stack,
  .employee-card,
  .photo-upload-block,
  .template-row,
  .result-strip,
  .level-choice {
    border-radius: var(--radius-card);
  }

  .id-card-topline {
    border-radius: var(--radius-panel) var(--radius-panel) var(--radius-small) var(--radius-small);
  }

  .sticky-heading {
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  }

  .nav-item,
  input,
  textarea,
  select,
  .button,
  .queue-count,
  .id-photo-label,
  .status-pill,
  .grade-chip,
  .role-table .text-button,
  .icon-button,
  .remove-metric,
  .level-badge,
  .final-grade-badge,
  .level-badge-code,
  .final-grade-code,
  .level-choice .level-code,
  .level-choice.is-selected::after,
  .live-score em,
  .toast {
    border-radius: var(--radius-control);
  }

  .id-photo-area {
    width: 116px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1;
    align-self: center;
    justify-self: center;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .id-photo,
  .queue-photo,
  .employee-card-photo,
  .employee-photo-preview {
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 24%;
    overflow: hidden;
  }

  .id-photo {
    box-shadow:
      0 0 0 4px #f9f9ff,
      0 0 0 5px rgba(90, 44, 245, 0.15),
      0 10px 24px rgba(54, 38, 129, 0.12);
  }

  .id-photo-label {
    right: 50%;
    bottom: -10px;
    z-index: 1;
    transform: translateX(50%);
    white-space: nowrap;
  }

  .result-gallery-meta {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "month month"
      "count label";
    align-items: end;
    justify-items: start;
    column-gap: 8px;
    padding: 13px 17px 14px;
    border-left: 4px solid var(--blue);
    background: linear-gradient(135deg, #f2f0ff 0%, #e8e4ff 100%);
  }

  #result-month-label {
    grid-area: month;
    margin-bottom: 7px;
    color: var(--blue);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.02em;
  }

  #result-complete-count {
    grid-area: count;
    margin: 0;
  }

  .result-gallery-meta small {
    grid-area: label;
    padding-bottom: 3px;
  }

  .result-gallery-heading {
    padding: 18px 22px;
  }

  .result-gallery-heading h2 {
    margin: 0;
    font-size: clamp(25px, 2.4vw, 34px);
  }

  .result-gallery-heading p {
    margin-top: 6px;
  }

  .role-table td:first-child {
    border-radius: var(--radius-control) 0 0 var(--radius-control);
  }

  .role-table td:last-child {
    border-radius: 0 var(--radius-control) var(--radius-control) 0;
  }

  @media (max-width: 820px) {
    .sidebar,
    .topbar {
      border-radius: var(--radius-panel);
    }
  }

  @media (max-width: 620px) {
    .sidebar,
    .topbar,
    .result-gallery-heading,
    .performance-id-card,
    .role-intro,
    .panel,
    .modal-card,
    .compact-modal {
      border-radius: 10px;
    }

    .id-card-topline {
      border-radius: 10px 10px var(--radius-small) var(--radius-small);
    }

    .sticky-heading {
      border-radius: 10px 10px 0 0;
    }

    .id-photo-area {
      width: 92px;
      height: auto;
      border-radius: 50%;
    }

    .id-result-stack,
    .role-formula,
    .level-choice {
      border-radius: 6px;
    }
  }
}


/* 原创绩效徽章资源层：图形负责等级识别，文字与分数保持为可编辑 HTML。 */

@media screen {
  .level-badge,
  .final-grade-badge {
    min-height: 42px;
    gap: 6px;
    padding: 3px 10px 3px 4px;
  }

  .level-emblem {
    position: relative;
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    isolation: isolate;
  }

  .level-emblem img {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
  }

  .level-emblem-code {
    position: relative;
    z-index: 1;
    display: grid;
    width: 45%;
    height: 45%;
    place-items: center;
    color: #302653;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  }

  .level-badge.is-empty,
  .final-grade-badge.is-waiting {
    min-height: 36px;
    padding: 5px 11px 5px 5px;
  }

  .id-result-stack .level-badge,
  .id-result-stack .final-grade-badge {
    min-height: 44px;
  }

  .id-result-stack .level-emblem {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .id-final-result .level-emblem-code {
    color: #33235f;
  }

  .role-table .level-emblem {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .role-table .level-badge,
  .role-table .final-grade-badge {
    min-height: 38px;
  }

  .level-choice {
    min-height: 184px;
  }

  .level-choice > .level-emblem {
    width: 58px;
    height: 58px;
    margin: 0 0 9px -4px;
    flex-basis: 58px;
  }

  .level-choice > .level-emblem .level-emblem-code {
    font-size: 15px;
  }

  .level-choice.is-selected > .level-emblem {
    filter: drop-shadow(0 7px 10px rgba(32, 19, 95, 0.22));
  }

  .level-choice.is-selected > .level-emblem .level-emblem-code {
    color: #302653;
  }

  @media (max-width: 620px) {
    .level-choice {
      min-height: 112px;
      grid-template-columns: 58px minmax(0, 1fr) auto;
      align-items: center;
      column-gap: 10px;
    }

    .level-choice > .level-emblem {
      grid-row: 1 / 3;
      margin: 0;
    }

    .level-choice p {
      grid-column: 2 / -1;
    }
  }
}


/* 本机角色登录与权限状态。沿用页面的紫色体系，并保持收紧圆角。 */

[hidden] {
  display: none !important;
}

.auth-session {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 12px;
  color: #29214f;
  border: 1px solid rgba(90, 44, 245, 0.12);
  border-radius: 5px;
  background: #f0edff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.auth-role-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #5a2cf5;
  box-shadow: 0 0 0 3px rgba(90, 44, 245, 0.12);
}

.auth-logout {
  min-height: 28px;
  margin-left: 2px;
  padding: 0 9px;
  color: #5a2cf5;
  border: 0;
  border-radius: 4px;
  background: #fff;
  font: inherit;
  cursor: pointer;
}

.auth-logout:hover {
  color: #fff;
  background: #5a2cf5;
}

.login-button {
  min-width: 92px;
}

.nav-item {
  grid-template-columns: minmax(0, 1fr);
}

.nav-item.is-locked {
  color: #7d809b;
}

.nav-item.is-locked:hover {
  color: #5a2cf5;
}

.nav-access-tag {
  min-width: 34px;
  padding: 5px 6px;
  color: #6a51db;
  border: 1px solid rgba(90, 44, 245, 0.14);
  border-radius: 4px;
  background: #eeeaff;
  font-size: 9px;
  font-weight: 750;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.nav-item.is-locked .nav-access-tag::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 4px;
  border: 1.5px solid currentColor;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  vertical-align: 1px;
}

.auth-modal .auth-card {
  width: min(510px, calc(100vw - 28px));
  padding: 0;
  overflow: hidden;
  border-radius: 10px;
}

.auth-heading {
  margin: 0;
  padding: 24px 26px 20px;
  color: #fff;
  background: linear-gradient(135deg, #4520d9 0%, #6838fa 100%);
}

.auth-heading .eyebrow,
.auth-heading p {
  color: rgba(255, 255, 255, 0.76);
}

.auth-heading h2 {
  margin-top: 5px;
  color: #fff;
}

.auth-heading .icon-button {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
}

.auth-role-guide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 20px 26px 4px;
}

.auth-role-guide > div {
  display: grid;
  gap: 4px;
  min-height: 72px;
  align-content: center;
  padding: 12px 14px;
  border: 1px solid #e4e0fa;
  border-radius: 7px;
  background: #f6f4ff;
}

.auth-role-guide .auth-admin-guide {
  grid-column: 1 / -1;
  min-height: 64px;
  border-color: rgba(90, 44, 245, 0.22);
  background: linear-gradient(135deg, #eee9ff 0%, #f7f5ff 100%);
}

.auth-role-guide b {
  color: #2b2350;
  font-size: 12px;
}

.auth-role-guide span {
  color: #746d91;
  font-size: 10px;
  line-height: 1.55;
}

.auth-card > .field {
  margin: 14px 26px 0;
}

.auth-card > .field input,
.auth-card > .field select {
  width: 100%;
  min-height: 46px;
}

.auth-mode-note {
  margin: 16px 26px 0;
  padding: 11px 13px;
  color: #5c5478;
  border-left: 3px solid #5a2cf5;
  border-radius: 4px;
  background: #f0edff;
  font-size: 11px;
  line-height: 1.6;
}

.auth-mode-note b {
  color: #4d28d7;
}

.auth-security-note {
  margin: 12px 26px 0;
  color: #847d9d;
  font-size: 10px;
  line-height: 1.7;
}

.auth-card .modal-actions {
  margin-top: 20px;
  padding: 16px 26px 22px;
  border-top: 1px solid #ece9fa;
  background: #fbfaff;
}

@media (max-width: 1100px) {
  .auth-session {
    order: -1;
  }
}

@media (max-width: 620px) {
  .auth-session {
    width: 100%;
    justify-content: space-between;
  }

  .auth-role-guide {
    grid-template-columns: 1fr;
    margin-inline: 20px;
  }

  .auth-card > .field,
  .auth-mode-note,
  .auth-security-note {
    margin-inline: 20px;
  }

  .auth-card .modal-actions {
    padding-inline: 20px;
  }
}

@media print {
  .auth-session,
  .login-button,
  .auth-modal {
    display: none !important;
  }
}


/* 员工档案中的管理层／普通员工分区。 */

.management-directory {
  margin-top: 20px;
  padding: 18px;
  border: 1px solid rgba(90, 44, 245, 0.13);
  border-radius: 8px;
  background: linear-gradient(135deg, #f3f0ff 0%, #faf9ff 100%);
}

.directory-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.directory-index {
  display: block;
  margin-bottom: 5px;
  color: #6945ed;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.08em;
}

.directory-section-heading h3 {
  margin: 0;
  color: #1f1940;
  font-size: 18px;
  line-height: 1.25;
}

.directory-section-heading p {
  margin: 0;
  color: #77708f;
  font-size: 11px;
}

.directory-heading-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.employee-directory-actions {
  display: grid;
  min-width: 310px;
  align-items: stretch;
}

.employee-add-button {
  width: 100%;
  min-height: 40px;
  align-self: start;
}

.employee-template-download {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px dashed #8ba9df;
  background: #f5f8ff;
  color: #2257b7;
  font-weight: 700;
}

.employee-template-download:hover {
  border-color: #3169cf;
  background: #eaf1ff;
  color: #17499f;
}

.employee-export-controls {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.employee-export-controls[hidden],
.employee-export-scope[hidden] {
  display: none;
}

.employee-export-scope {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #5a6880;
}

.employee-export-scope select {
  min-width: 0;
  width: 100%;
  min-height: 44px;
}

#employee-export-controls .employee-template-download {
  min-height: 44px;
}

.employee-directory-actions:has(.employee-add-button[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}

.employee-export-controls small {
  max-width: 310px;
  font-size: 11px;
  line-height: 1.6;
  color: #64748b;
}

.management-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.management-card {
  position: relative;
  display: grid;
  grid-template-columns: 48px 72px minmax(220px, 0.8fr) minmax(340px, 1.2fr) auto;
  min-height: 116px;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  overflow: hidden;
  border: 1px solid rgba(90, 44, 245, 0.12);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(52, 40, 116, 0.08);
}

.management-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #5a2cf5;
}

.management-admin {
  border-color: rgba(70, 35, 190, 0.2);
  background: linear-gradient(135deg, #ede8ff 0%, #fff 56%);
  box-shadow: 0 12px 30px rgba(64, 39, 154, 0.12);
}

.management-admin::before {
  width: 6px;
  background: linear-gradient(180deg, #3920a5 0%, #7344ff 100%);
}

.management-secondary::before {
  background: #3c79dc;
}

.management-order {
  display: grid;
  align-content: center;
  align-self: stretch;
  padding-right: 10px;
  border-right: 1px solid #ebe8f8;
}

.management-order span {
  color: #5a2cf5;
  font-size: 23px;
  font-weight: 800;
  line-height: 1;
}

.management-secondary .management-order span {
  color: #3c79dc;
}

.management-admin .management-order span {
  color: #4321bf;
}

.management-order small {
  margin-top: 7px;
  color: #9b96b0;
  font-size: 8px;
  line-height: 1.35;
}

.management-photo {
  display: flex;
  width: 68px;
  height: 68px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 24%;
  background: #ece9fb;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(90, 44, 245, 0.14);
}

.management-photo.photo-placeholder .avatar-placeholder-icon {
  color: #8e7ee6;
}

.management-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.management-admin .management-copy,
.management-secondary .management-copy {
  grid-column: 3 / 5;
}

.management-role-tag {
  width: max-content;
  padding: 4px 7px;
  color: #5a2cf5;
  border-radius: 4px;
  background: #eeeaff;
  font-size: 9px;
  font-weight: 750;
}

.management-secondary .management-role-tag {
  color: #2d67c5;
  background: #eaf2ff;
}

.management-admin .management-role-tag {
  color: #fff;
  background: #4f27d5;
}

.management-copy strong {
  overflow: hidden;
  color: #171331;
  font-size: 21px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.management-copy small {
  color: #77708f;
  font-size: 10px;
}

.management-capabilities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 12px;
  margin: 6px 0 0;
  padding-top: 8px;
  border-top: 1px solid #ece9f7;
}

.management-capabilities > div {
  min-width: 0;
}

.management-capabilities dt,
.employee-capability-grid dt,
.intern-capabilities dt {
  color: #938ca8;
  font-size: 8px;
  line-height: 1.35;
}

.management-capabilities dd,
.employee-capability-grid dd,
.intern-capabilities dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  color: #2e2941;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.45;
}

.management-edit-button {
  grid-column: 5;
  grid-row: 1;
  align-self: end;
  min-height: 32px;
  padding: 0 10px;
  color: #5a2cf5;
  border: 1px solid rgba(90, 44, 245, 0.15);
  border-radius: 5px;
  background: #f3f0ff;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.management-edit-button:hover {
  color: #fff;
  background: #5a2cf5;
}

.management-admin-lock {
  grid-column: 5;
  grid-row: 1;
  align-self: end;
  padding: 7px 9px;
  color: #77708f;
  border: 1px solid #dfdbea;
  border-radius: 5px;
  background: #f3f1f8;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.leadership-assistant-directory {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(38, 105, 207, 0.2);
  border-radius: 8px;
  background: linear-gradient(135deg, #eef5ff 0%, #fbfdff 100%);
}

.leadership-assistant-heading .directory-index,
.leadership-assistant-heading strong {
  color: #245eb7;
}

.leadership-assistant-heading strong {
  padding: 6px 10px;
  border-radius: 4px;
  background: #dfeaff;
  font-size: 11px;
}

.leadership-assistant-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.leadership-assistant-card {
  display: grid;
  grid-template-columns: 72px minmax(220px, 0.72fr) minmax(340px, 1.28fr);
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(38, 105, 207, 0.16);
  border-left: 4px solid #2d6ed2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 9px 22px rgba(36, 94, 183, 0.08);
}

.leadership-assistant-photo {
  display: flex;
  width: 72px;
  height: 72px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 24%;
  background: #e5efff;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(45, 110, 210, 0.18);
}

.leadership-assistant-photo.photo-placeholder .avatar-placeholder-icon {
  color: #5b84c9;
}

.leadership-assistant-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.leadership-assistant-copy span {
  width: max-content;
  padding: 4px 7px;
  border-radius: 4px;
  color: #245eb7;
  background: #e8f1ff;
  font-size: 9px;
  font-weight: 750;
}

.leadership-assistant-copy strong {
  color: #172d52;
  font-size: 20px;
}

.leadership-assistant-copy small,
.leadership-assistant-copy p {
  color: #657793;
  font-size: 10px;
  line-height: 1.55;
}

.leadership-assistant-copy p {
  margin: 2px 0 0;
}

.leadership-assistant-card .employee-private-card {
  grid-column: 3;
  grid-row: 1;
  align-self: stretch;
}

.management-card .employee-private-card {
  grid-column: 4;
  grid-row: 1;
  align-self: stretch;
}

.intern-directory {
  margin-top: 20px;
  padding: 18px;
  border: 1px solid rgba(221, 145, 37, 0.2);
  border-radius: 8px;
  background: linear-gradient(135deg, #fff8e9 0%, #fffdf8 100%);
}

.intern-heading .directory-index {
  color: #ad6c13;
}

.intern-heading strong {
  padding: 6px 10px;
  color: #9a5f0e;
  border-radius: 4px;
  background: #fff0cd;
  font-size: 11px;
}

.intern-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.intern-card {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 13px 15px;
  padding: 14px;
  border: 1px solid rgba(207, 136, 35, 0.18);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 9px 22px rgba(114, 78, 28, 0.07);
}

.intern-card.is-eligible {
  border-color: rgba(38, 151, 102, 0.28);
  box-shadow: 0 9px 24px rgba(32, 128, 86, 0.1);
}

.intern-card-topline {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0e8d9;
  color: #9a6a29;
  font-size: 9px;
  font-weight: 700;
}

.intern-card-topline b {
  color: #8d5b17;
}

.intern-card.is-eligible .intern-card-topline b {
  color: #23825c;
}

.intern-card-photo {
  display: flex;
  width: 72px;
  height: 72px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 24%;
  background: #fff0cf;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(205, 132, 29, 0.17);
}

.intern-card-photo.photo-placeholder .avatar-placeholder-icon {
  color: #c08430;
}

.intern-person-copy {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 4px;
}

.intern-role-tag {
  width: max-content;
  padding: 4px 7px;
  color: #9a600f;
  border-radius: 4px;
  background: #fff0cf;
  font-size: 9px;
  font-weight: 750;
}

.intern-person-copy strong {
  overflow: hidden;
  color: #241a0c;
  font-size: 19px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.intern-person-copy small {
  color: #86745c;
  font-size: 10px;
}

.intern-dates {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.intern-dates > div {
  padding: 9px 10px;
  border-radius: 5px;
  background: #fff9ec;
}

.intern-dates dt {
  color: #9c896f;
  font-size: 8px;
}

.intern-dates dd {
  margin: 4px 0 0;
  color: #6f4812;
  font-size: 10px;
  font-weight: 700;
}

.intern-capabilities {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.intern-capabilities > div {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #f1e7d4;
  border-radius: 5px;
  background: #fffcf5;
}

.intern-capabilities .intern-capability-wide {
  grid-column: 1 / -1;
}

.intern-card-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 2px;
}

.intern-promote-button {
  min-height: 34px;
  margin-left: auto;
  color: #fff;
  background: #2b9369;
  box-shadow: none;
}

.intern-promote-button:hover:not(:disabled) {
  background: #237b58;
}

.intern-promote-button:disabled {
  color: #a38c6d;
  background: #f0e9dd;
  cursor: not-allowed;
  opacity: 1;
}

.intern-empty {
  grid-column: 1 / -1;
  padding: 18px;
  color: #8e7b61;
  border: 1px dashed rgba(185, 123, 36, 0.28);
  border-radius: 6px;
  text-align: center;
}

.parttime-directory {
  margin-top: 20px;
  padding: 18px;
  border: 1px solid rgba(17, 124, 116, 0.22);
  border-radius: 8px;
  background: linear-gradient(135deg, #edf9f7 0%, #fbfefd 100%);
}

.parttime-heading .directory-index {
  color: #0b6c66;
}

.parttime-heading > strong {
  padding: 6px 10px;
  color: #075e59;
  border-radius: 4px;
  background: #d9f1ed;
  font-size: 11px;
}

.employee-card.is-parttime {
  border-color: rgba(17, 124, 116, 0.28);
  border-top-color: #117c74;
  background: linear-gradient(180deg, #ffffff 0%, #f6fcfb 100%);
}

.employee-parttime-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 3px 7px;
  color: #075e59;
  border: 1px solid #a9ddd7;
  border-radius: 999px;
  background: #e1f5f2;
  font-size: 10px;
  font-weight: 800;
  vertical-align: middle;
}

.employee-parttime-note {
  margin: 7px 0 0;
  color: #40706c;
  font-size: 10px;
  line-height: 1.45;
}

.intern-empty span {
  color: #76501b;
  font-weight: 700;
}

.intern-empty p {
  margin: 5px 0 0;
  font-size: 10px;
}

.ordinary-directory {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e5e2f2;
}

.ordinary-heading strong {
  padding: 6px 10px;
  color: #5a2cf5;
  border-radius: 4px;
  background: #eeeaff;
  font-size: 11px;
}

.ordinary-directory .employee-card {
  grid-template-rows: auto 92px auto;
  min-height: 264px;
  align-content: start;
}

.employee-card-copy {
  min-width: 0;
}

.employee-card-role {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 7px;
  line-height: 1.5;
}

.employee-card-role span {
  color: #8e899b;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.employee-capability-grid {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid #ddd8cc;
}

.employee-capability-grid > div {
  min-width: 0;
  padding: 9px 10px;
  border-left: 3px solid #175ca8;
  background: #f1eee6;
}

.employee-capability-grid .employee-capability-wide {
  grid-column: 1 / -1;
}

.employee-profile-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 15px;
}

.employee-profile-fields > .field {
  min-width: 0;
  margin: 0;
}

.employee-profile-fields .employee-profile-wide {
  grid-column: 1 / -1;
}

#employee-role[readonly] {
  color: #68627d;
  background: #e9e7f2;
  cursor: not-allowed;
}

#setting-administrator[readonly] {
  color: #68627d;
  background: #e9e7f2;
  cursor: not-allowed;
}

.employee-employment-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 15px;
}

.employee-employment-fields > .field {
  margin: 0;
}

#employee-kind:disabled {
  color: #5e5874;
  background: #e9e7f2;
  opacity: 1;
}

#employee-kind:not(:disabled) {
  border-color: #72a0ed;
  background: #f4f8ff;
  color: #153b7d;
  font-weight: 700;
}

#employee-kind-help {
  color: #6f7891;
  line-height: 1.5;
}

.intern-period-preview {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  padding: 11px 13px;
  border-left: 3px solid #d79534;
  border-radius: 5px;
  background: #fff7e5;
}

.intern-period-preview span {
  color: #9d7b4e;
  font-size: 9px;
}

.intern-period-preview strong {
  color: #86530c;
  font-size: 14px;
}

.intern-period-preview small {
  color: #8e7b61;
  font-size: 9px;
  line-height: 1.5;
}

@media (max-width: 1180px) {
  .management-card {
    grid-template-columns: 42px 64px minmax(0, 1fr) auto;
  }

  .management-card .employee-private-card {
    grid-column: 2 / -1;
    grid-row: 2;
  }

  .management-photo {
    width: 62px;
    height: 62px;
  }

  .management-edit-button {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
  }

  .management-admin-lock {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
  }

  .management-admin .management-copy,
  .management-secondary .management-copy {
    grid-column: 3;
  }

  .leadership-assistant-card {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .leadership-assistant-card .employee-private-card {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 820px) {
  .management-grid,
  .intern-grid {
    grid-template-columns: 1fr;
  }

  .directory-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
}

@media (max-width: 520px) {
  .management-directory {
    padding: 13px;
  }

  .management-card {
    grid-template-columns: 34px 58px minmax(0, 1fr);
    gap: 10px;
    padding: 13px;
  }

  .management-photo {
    width: 58px;
    height: 58px;
  }

  .management-copy strong {
    font-size: 18px;
  }

  .management-admin .management-copy,
  .management-secondary .management-copy {
    grid-column: 3;
  }

  .management-edit-button,
  .management-admin-lock {
    grid-column: 2 / -1;
    grid-row: auto;
    justify-self: start;
  }

  .management-card .employee-private-card {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .leadership-assistant-directory {
    padding: 13px;
  }

  .leadership-assistant-card {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px;
    padding: 13px;
  }

  .leadership-assistant-photo {
    width: 56px;
    height: 56px;
  }

  .directory-heading-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .directory-heading-actions .button {
    flex: 1;
  }

  .employee-directory-actions {
    min-width: 0;
  }

  .intern-directory {
    padding: 13px;
  }

  .intern-dates,
  .intern-capabilities,
  .employee-employment-fields,
  .employee-profile-fields,
  .employee-capability-grid {
    grid-template-columns: 1fr;
  }

  .employee-profile-fields .employee-profile-wide,
  .employee-capability-grid .employee-capability-wide,
  .intern-capabilities .intern-capability-wide {
    grid-column: 1;
  }
}

@media print {
  .management-edit-button {
    display: none !important;
  }
}


.offboarding-action { color: #8e4417; }
#user-directory-tabs { display: flex; flex-wrap: wrap; min-width: 0; }
#user-directory-tabs .user-directory-tab { flex: 1 0 110px; white-space: nowrap; }
.user-directory-tab[data-scope="departed"].is-active { background: #845d3b; border-color: #845d3b; color: #fff; }
.user-directory-group.is-departed { border-top-color: #a16d36; }
.offboarding-date { display: block; margin-top: 6px; color: #6c7283; font-size: 11px; line-height: 1.7; white-space: nowrap; }
.offboarding-dialog { width: min(720px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid #c8d4e9; border-radius: 12px; color: #192d50; background: #fff; }
.offboarding-dialog::backdrop { background: rgb(17 35 62 / 48%); }
.offboarding-heading { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 24px; border-bottom: 1px solid #e2e7f0; background: #f6f8fc; }
.offboarding-heading span { color: #986027; font-size: 12px; letter-spacing: .08em; }
.offboarding-heading h2 { margin: 8px 0; font-size: 24px; }
.offboarding-heading p { margin: 0; color: #687992; font-size: 13px; overflow-wrap: anywhere; }
.offboarding-body { padding: 24px; }
.offboarding-notice { padding: 14px 16px; margin: 0 0 20px; background: #f1f6fe; border-left: 3px solid #3676cc; font-size: 13px; line-height: 1.8; }
.offboarding-error { color: #ad3232; line-height: 1.6; }
.offboarding-error:empty { display: none; }
.offboarding-fields, .offboarding-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.offboarding-dialog label { display: grid; gap: 8px; font-size: 13px; color: #52657f; }
.offboarding-dialog input:not([type="checkbox"]), .offboarding-dialog select, .offboarding-dialog textarea { width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid #c5d2e6; border-radius: 6px; background: #fff; color: #192d50; padding: 10px 12px; font: inherit; }
.offboarding-dialog textarea { resize: vertical; }
.offboarding-wide { grid-column: 1 / -1; }
.offboarding-dialog .offboarding-confirm { display: flex; align-items: flex-start; gap: 8px; line-height: 1.7; margin: 18px 0; }
.offboarding-confirm input { flex: none; width: 16px; height: 16px; margin-top: 3px; }
.offboarding-footer { display: flex; justify-content: flex-end; padding-top: 16px; border-top: 1px solid #e2e7f0; }
.offboarding-facts { padding: 16px; background: #f6f8fc; margin: 0 0 16px; }
.offboarding-facts dt { font-size: 12px; color: #718198; margin-bottom: 8px; }
.offboarding-facts dd { font-size: 14px; margin: 0; }
.offboarding-note { color: #65728a; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.offboarding-checklist h3 { display: flex; justify-content: space-between; align-items: center; font-size: 17px; }
.offboarding-checklist > p, .offboarding-recovery p { color: #66768e; font-size: 13px; line-height: 1.8; }
.offboarding-task { margin: 12px 0; border: 1px solid #e1d3bb; border-radius: 8px; padding: 16px; }
.offboarding-task > header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: 14px; }
.offboarding-task > header span { color: #94611e; white-space: nowrap; font-size: 12px; }
.offboarding-task.is-complete { background: #f3faf7; border-color: #cde4d8; }
.offboarding-task.is-complete > header span { color: #237651; }
.offboarding-task p { white-space: pre-wrap; overflow-wrap: anywhere; }
.offboarding-task small { color: #6c7b8e; }
.offboarding-task-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.offboarding-recovery { margin-top: 24px; padding-top: 18px; border-top: 1px solid #e2e7f0; }
.offboarding-recovery summary { cursor: pointer; color: #5b6980; font-size: 14px; }
.offboarding-recovery form > button { margin-top: 12px; }
.departed-directory { margin-top: 24px; padding: 20px; background: #f8f6f2; border: 1px solid #e0d8cb; border-radius: 8px; }
.departed-directory > summary { cursor: pointer; color: #7d5935; font-weight: 650; }
.departed-directory .employee-grid { margin-top: 20px; }
@media (max-width: 600px) {
  .offboarding-heading, .offboarding-body { padding: 18px; }
  .offboarding-fields, .offboarding-facts { grid-template-columns: 1fr; }
  .offboarding-task-actions { align-items: stretch; flex-direction: column; gap: 0; }
  .offboarding-dialog .button { min-height: 40px; }
}


/* 月度工作内容 KPI：管理员维护、首页卡面摘要与历史量化记录。 */

.work-kpi-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
  padding: 24px 28px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 10px;
  background: rgba(249, 249, 255, 0.96);
  box-shadow: var(--shadow-soft);
}

.work-kpi-heading h2 {
  margin: 6px 0 8px;
  color: var(--ink);
  font-size: clamp(27px, 2.5vw, 36px);
  line-height: 1.18;
}

.work-kpi-heading p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
}

.work-quick-entry-launcher {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
  padding: 16px 18px;
  border: 1px solid #dce5f4;
  border-left: 3px solid var(--blue);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.work-quick-entry-launcher > div:first-child {
  display: grid;
  gap: 3px;
}

.work-quick-entry-launcher strong {
  color: var(--ink);
  font-size: 16px;
}

.work-quick-entry-launcher small {
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.5;
}

.work-quick-toggle {
  min-width: 120px;
  justify-content: center;
  white-space: nowrap;
}

.work-quick-entry-launcher > .work-ledger-actions,
.work-kpi-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.work-ledger-actions .button {
  min-height: 38px;
  justify-content: center;
  padding-inline: 14px;
  white-space: nowrap;
}

.work-ledger-template-button {
  color: #245ea8;
  border-color: #b8cce8;
  background: #f7faff;
}

.work-ledger-import-button {
  color: #fff;
  border-color: #173f78;
  background: #173f78;
}

.work-ledger-template-button:hover,
.work-ledger-template-button:focus-visible {
  border-color: #7fa5d6;
  background: #eaf2fd;
}

.work-ledger-import-button:hover,
.work-ledger-import-button:focus-visible {
  border-color: #0f315f;
  background: #0f315f;
}

.work-quick-toggle svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  transition: transform 180ms ease;
}

.work-quick-entry-launcher.is-expanded .work-quick-toggle svg {
  transform: rotate(45deg);
}

.work-quick-entry[hidden] {
  display: none !important;
}

.work-quick-entry {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-top: 3px solid var(--blue);
  border-radius: 10px;
  background: rgba(249, 249, 255, 0.97);
  box-shadow: var(--shadow-soft);
}

.work-quick-entry-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 13px;
  border-bottom: 1px solid #e2e0ef;
}

.work-quick-entry-heading h3 {
  margin: 5px 0;
  color: var(--ink);
  font-size: 21px;
}

.work-quick-entry-heading p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 11px;
}

.work-quick-period {
  display: grid;
  min-width: 132px;
  gap: 3px;
  padding: 9px 12px;
  border-left: 3px solid var(--blue);
  border-radius: 6px;
  background: #efedff;
}

.work-quick-period span {
  color: #817d9e;
  font-size: 9px;
}

.work-quick-period strong {
  color: var(--blue);
  font-size: 14px;
}

.work-quick-main-grid {
  display: grid;
  grid-template-columns: minmax(136px, 0.95fr) minmax(132px, 0.9fr) minmax(190px, 1.65fr) repeat(2, minmax(96px, 0.8fr)) 72px 82px;
  align-items: end;
  gap: 9px;
}

.work-quick-entry label {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.work-quick-entry label > span,
.work-quick-business legend {
  color: #77728f;
  font-size: 10px;
}

.work-quick-entry input,
.work-quick-entry select {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  color: var(--ink);
  border: 1px solid #dedcf0;
  border-radius: 5px;
  background: #fff;
  font: inherit;
}

.work-quick-entry input:focus,
.work-quick-entry select:focus {
  border-color: var(--blue);
  outline: 2px solid rgba(90, 44, 245, 0.12);
}

.work-duration-field {
  align-self: stretch;
}

.work-duration-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  border: 1px solid #c8d8ed;
  border-left: 3px solid #2f6fe4;
  border-radius: 5px;
  overflow: hidden;
  background: #fff;
}

.work-duration-input input,
.work-metric-row .work-duration-input input {
  min-width: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
}

.work-duration-coefficient {
  display: grid;
  min-width: 54px;
  place-items: center;
  padding: 0 9px;
  color: #0f4c97;
  border-left: 1px solid #d5e1f1;
  background: #eaf2ff;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.work-duration-field > small {
  color: #72819a;
  font-size: 9px;
  line-height: 1.35;
}

.work-quick-business {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
  padding: 12px;
  border: 1px solid #e3e0f3;
  border-radius: 7px;
  background: #f4f2ff;
}

.work-quick-business legend {
  padding: 0 7px;
  font-weight: 700;
}

.work-quick-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.work-quick-footer .button {
  min-height: 38px;
  padding-inline: 18px;
  white-space: nowrap;
}

.work-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.work-kpi-card {
  min-width: 0;
  padding: 17px;
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 10px;
  background: rgba(249, 249, 255, 0.96);
  box-shadow: var(--shadow-soft);
}

.work-kpi-card.has-content {
  border-top: 3px solid var(--blue);
}

.work-kpi-card.is-empty {
  border-top: 3px solid #cbc8df;
}

.work-kpi-card-head {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(130px, auto);
  align-items: center;
  gap: 12px;
  min-height: 70px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e2e0ef;
}

.work-kpi-card-head > div {
  min-width: 0;
}

.work-kpi-photo {
  width: 52px;
  height: 52px;
  border: 2px solid #fff;
  border-radius: 50%;
  object-fit: cover;
  background: #e8e7f8;
  box-shadow: 0 5px 13px rgba(67, 50, 154, 0.12);
}

.work-kpi-photo.photo-placeholder {
  display: grid;
  place-items: center;
  color: var(--blue);
  font-size: 20px;
}

.work-kpi-card-head small {
  display: block;
  overflow: hidden;
  color: #9295af;
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-kpi-card-head h3 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.2;
}

.work-kpi-card-head .button {
  justify-self: end;
  min-height: 34px;
  padding: 8px 11px;
  font-size: 11px;
  white-space: nowrap;
}

.work-kpi-card-actions {
  flex-wrap: wrap;
}

.work-score-impact-button {
  color: #245ea8;
  border-color: #b8cce8;
  background: #f7faff;
}

.work-score-impact-button:hover,
.work-score-impact-button:focus-visible {
  border-color: #7fa5d6;
  background: #eaf2fd;
}

.work-kpi-card.is-linked-target {
  border-color: #2563eb;
  outline: 3px solid rgba(37, 99, 235, 0.18);
  outline-offset: 2px;
}

.work-kpi-card-head .work-kpi-edit-button {
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
  box-shadow: 0 5px 12px rgba(37, 99, 235, 0.2);
}

.work-kpi-card-head .work-kpi-edit-button:hover {
  border-color: #174fb7;
  background: #174fb7;
  box-shadow: 0 7px 16px rgba(37, 99, 235, 0.26);
}

.work-kpi-card-head .work-kpi-edit-button:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.26);
  outline-offset: 2px;
}

.work-kpi-numbers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.work-kpi-numbers > div {
  display: grid;
  gap: 4px;
  padding: 11px 13px;
  border-radius: 7px;
  background: #efedff;
}

.work-kpi-numbers span,
.work-kpi-card-summary > span {
  color: #817d9e;
  font-size: 10px;
  letter-spacing: 0.04em;
}

.work-kpi-numbers strong {
  color: var(--blue);
  font-size: 19px;
  line-height: 1.2;
}

.work-kpi-duration-stat {
  border: 1px solid #dce7fb;
  background: #f4f8ff !important;
}

.work-kpi-duration-stat small {
  color: #7786a4;
  font-size: 9px;
}

.work-kpi-card.is-intern {
  grid-column: 1 / -1;
  border-color: #ead9b7;
  border-top-color: #d38a24;
  background: #fffcf5;
}

.work-kpi-card.is-intern .work-kpi-numbers > div {
  background: #fff5dd;
}

.work-kpi-card.is-parttime {
  grid-column: 1 / -1;
  border-color: #b9ddd8;
  border-top-color: #117c74;
  background: #f7fcfb;
}

.work-kpi-card.is-parttime .work-kpi-numbers > div {
  background: #eaf7f5;
}

.work-kpi-card-summary {
  margin-top: 10px;
  padding: 12px 13px;
  border-left: 3px solid var(--blue);
  border-radius: 6px;
  background: #fff;
}

.work-kpi-card-summary p {
  display: -webkit-box;
  margin: 6px 0 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.work-kpi-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.work-kpi-tags span {
  max-width: 100%;
  padding: 5px 8px;
  overflow: hidden;
  color: #5e577d;
  border-radius: 5px;
  background: #f0effc;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-kpi-tags span.is-empty {
  color: #9894aa;
  background: #f3f2f7;
}

.work-kpi-tags b {
  color: var(--blue);
}

.work-kpi-card-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 13px;
  padding-top: 10px;
  color: #9693a8;
  border-top: 1px solid #e2e0ef;
  font-size: 10px;
}

.work-kpi-card-foot b {
  color: #706b89;
}

.work-kpi-modal-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(980px, calc(100vw - 28px));
  height: min(780px, calc(100vh - 32px));
  padding: 0;
  overflow: hidden;
}

.work-kpi-modal-card .modal-heading,
.work-kpi-modal-card .modal-actions {
  padding: 18px 21px;
  background: #fafaff;
}

.work-kpi-modal-card .modal-heading {
  color: #fff;
  background: var(--blue);
}

.work-kpi-modal-card .modal-heading h2,
.work-kpi-modal-card .modal-heading p,
.work-kpi-modal-card .modal-heading .eyebrow {
  color: #fff;
}

.work-kpi-modal-card .modal-heading p,
.work-kpi-modal-card .modal-heading .eyebrow {
  opacity: 0.78;
}

.work-kpi-modal-card .modal-heading .icon-button {
  color: var(--blue);
  border-color: transparent;
  background: #fff;
}

.work-kpi-form-scroll {
  display: grid;
  gap: 14px;
  min-height: 0;
  padding: 17px 21px 21px;
  overflow-y: auto;
}

.work-kpi-editor-section,
.work-kpi-summary-editor {
  padding: 16px;
  border: 1px solid #dedcf0;
  border-radius: 8px;
  background: #f8f7ff;
}

.work-kpi-editor-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.work-kpi-editor-heading h3,
.work-kpi-summary-editor h3 {
  margin: 5px 0;
  color: var(--ink);
  font-size: 19px;
}

.work-kpi-editor-heading p,
.work-kpi-summary-editor p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 11px;
}

.work-metric-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.work-metric-row {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(67, 50, 154, 0.06);
}

.work-metric-row-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  color: var(--blue);
  border-bottom: 1px solid #ebe9f5;
  font-size: 11px;
  font-weight: 700;
}

.work-metric-main-grid {
  display: grid;
  grid-template-columns: minmax(132px, 1fr) minmax(190px, 1.7fr) minmax(90px, 0.8fr) minmax(90px, 0.8fr) 74px 86px;
  align-items: end;
  gap: 8px;
}

.work-metric-business-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border-radius: 6px;
  background: #f4f2ff;
}

.work-metric-row label {
  display: grid;
  gap: 5px;
}

.work-metric-row label > span {
  color: #77728f;
  font-size: 10px;
}

.work-metric-row input,
.work-metric-row select,
.work-kpi-summary-editor textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  color: var(--ink);
  border: 1px solid #dedcf0;
  border-radius: 5px;
  background: #f9f9ff;
  font: inherit;
}

.work-kpi-summary-editor textarea {
  min-height: 68px;
  resize: vertical;
}

.work-metric-row input:focus,
.work-metric-row select:focus,
.work-kpi-summary-editor textarea:focus {
  border-color: var(--blue);
  outline: 2px solid rgba(90, 44, 245, 0.12);
}

.work-metric-remove {
  min-height: 30px;
  padding: 0 10px;
  color: #b34c67;
  border: 0;
  border-radius: 5px;
  background: #fff0f4;
  cursor: pointer;
}

.work-kpi-summary-editor .field {
  margin-top: 13px;
}

.work-kpi-summary-preview {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  padding: 11px 13px;
  border-left: 3px solid var(--blue);
  border-radius: 6px;
  background: #fff;
}

.work-kpi-summary-preview span {
  color: #827d9d;
  font-size: 10px;
}

.work-kpi-summary-preview strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.5;
}

/* 首页身份卡新增 KPI 摘要行。 */
.performance-id-card {
  grid-template-rows: auto 180px auto auto;
}

.id-kpi-summary {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px 12px;
  margin-top: 13px;
  padding: 10px 12px;
  border-radius: 6px;
  background: #f0effc;
}

.id-kpi-view-button {
  min-height: 32px;
  padding: 7px 10px;
  color: #fff;
  border: 1px solid #2563eb;
  border-radius: 5px;
  background: #2563eb;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.18);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.id-kpi-view-button:hover,
.id-kpi-view-button:focus-visible {
  color: #fff;
  border-color: #174fb7;
  outline: 3px solid rgba(37, 99, 235, 0.22);
  outline-offset: 2px;
  background: #174fb7;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.24);
  transform: translateY(-1px);
}

.id-kpi-summary.has-content {
  box-shadow: inset 3px 0 0 var(--blue);
}

.id-kpi-summary.is-empty {
  background: #f3f2f7;
}

.id-kpi-head {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 16px;
}

.id-kpi-head em {
  color: #596b8c;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.id-kpi-summary span {
  color: #7f7a97;
  font-size: 10px;
}

.id-kpi-summary b {
  color: var(--blue);
  font-size: 13px;
  white-space: nowrap;
}

.id-kpi-breakdown {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
  margin: 0;
}

.id-kpi-business-item {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 7px 8px;
  border: 1px solid #dfe5f3;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.9);
}

.id-kpi-business-item dt,
.id-kpi-business-item dd {
  min-width: 0;
  margin: 0;
  line-height: 1;
}

.id-kpi-business-item dt {
  color: #66718e;
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}

.id-kpi-business-item dd {
  color: var(--blue-deep);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.id-kpi-business-item.is-zero {
  opacity: 0.58;
}

.performance-id-card .id-card-footer {
  grid-row: 4;
}

.work-detail-modal-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(900px, calc(100vw - 28px));
  height: min(760px, calc(100vh - 32px));
  padding: 0;
  overflow: hidden;
}

.work-detail-modal-card .modal-heading {
  padding: 18px 21px;
  color: #fff;
  background: var(--blue);
}

.work-detail-modal-card .modal-heading h2,
.work-detail-modal-card .modal-heading p,
.work-detail-modal-card .modal-heading .eyebrow {
  color: #fff;
}

.work-detail-modal-card .modal-heading p,
.work-detail-modal-card .modal-heading .eyebrow {
  opacity: 0.8;
}

.work-detail-modal-card .modal-heading .icon-button {
  color: var(--blue);
  border-color: transparent;
  background: #fff;
}

.work-detail-overview {
  display: grid;
  grid-template-columns: 120px 120px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 14px 21px;
  border-bottom: 1px solid #e3e0f1;
  background: #f3f1ff;
}

.work-detail-overview > div {
  display: grid;
  gap: 3px;
  padding: 8px 11px;
  border-left: 3px solid var(--blue);
  background: #fff;
}

.work-detail-overview span {
  color: #817c9d;
  font-size: 9px;
}

.work-detail-overview strong {
  color: var(--blue);
  font-size: 15px;
}

.work-detail-overview p {
  margin: 0;
  color: var(--ink);
  font-size: 11px;
  line-height: 1.55;
}

.work-detail-scroll {
  min-height: 0;
  padding: 17px 21px 21px;
  overflow-y: auto;
  background: #fafaff;
}

.work-detail-list {
  min-width: 0;
}

.work-detail-table-wrap {
  max-width: 100%;
  overflow: auto;
  border: 1px solid #e0deef;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(67, 50, 154, 0.055);
}

.work-detail-table {
  width: 100%;
  min-width: 996px;
  border-spacing: 0;
  border-collapse: separate;
  table-layout: fixed;
  color: var(--ink);
  font-size: 11px;
}

.work-detail-table th,
.work-detail-table td {
  padding: 12px 10px;
  vertical-align: top;
  border-bottom: 1px solid #ebe9f5;
  text-align: left;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.work-detail-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: #5a4fb0;
  background: #f0edff;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.work-detail-table thead th:nth-child(1) { width: 52px; }
.work-detail-table thead th:nth-child(2) { width: 160px; }
.work-detail-table thead th:nth-child(3) { width: 76px; }
.work-detail-table thead th:nth-child(4) { width: 92px; }
.work-detail-table thead th:nth-child(5) { width: 92px; }
.work-detail-table thead th:nth-child(6) { width: 360px; }
.work-detail-table thead th:nth-child(7) { width: 164px; }

.work-detail-table tbody tr:nth-child(even) {
  background: #fbfaff;
}

.work-detail-table tbody tr:hover {
  background: #f7f5ff;
}

.work-detail-table tbody tr:last-child > * {
  border-bottom: 0;
}

.work-detail-table tbody th[scope="row"] {
  color: #817c9d;
  font-size: 10px;
  font-weight: 700;
}

.work-detail-task {
  display: block;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.45;
}

.work-detail-quantity {
  color: var(--blue);
  white-space: nowrap;
}

.work-detail-duration {
  color: #365f9d;
  white-space: nowrap;
}

.work-detail-duration-factor {
  color: #0f6f63;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.work-detail-specific {
  display: grid;
  gap: 6px;
}

.work-detail-specific span {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 6px;
  font-size: 9px;
}

.work-detail-specific b {
  color: #6d63ad;
  font-size: 9px;
}

.work-detail-none {
  color: #a7a2ba;
}

.work-detail-empty {
  display: grid;
  place-items: center;
  min-height: 210px;
  padding: 28px;
  text-align: center;
  border: 1px dashed #d8d4e9;
  border-radius: 7px;
  background: #f5f4fa;
}

.work-detail-empty strong {
  color: var(--ink);
  font-size: 17px;
}

.work-detail-empty p {
  max-width: 360px;
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.55;
}

.work-detail-modal-card .modal-actions {
  justify-content: space-between;
  padding: 14px 21px;
  background: #fafaff;
}

.work-detail-modal-card .modal-actions > span {
  color: var(--ink-soft);
  font-size: 10px;
}

@media (max-width: 1180px) {
  .work-quick-main-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .work-quick-task {
    grid-column: span 2;
  }

  .work-kpi-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .side-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .work-metric-main-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .work-field-task {
    grid-column: 1 / -1;
  }

  .work-field-date {
    grid-column: span 2;
  }

  .work-metric-business-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .work-quick-main-grid,
  .work-quick-business {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .work-quick-task {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .work-kpi-heading {
    display: grid;
    padding: 19px;
  }

  .work-quick-entry {
    padding: 17px;
  }

  .work-quick-entry-launcher {
    align-items: stretch;
    grid-template-columns: 1fr;
    gap: 13px;
    padding: 15px;
  }

  .work-quick-toggle {
    width: 100%;
  }

  .work-quick-entry-launcher > .work-ledger-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .work-ledger-actions .button {
    width: 100%;
    min-width: 0;
    padding-inline: 8px;
  }

  .work-quick-entry-heading,
  .work-quick-footer {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .work-quick-entry-heading {
    display: grid;
  }

  .work-quick-period {
    min-width: 0;
  }

  .work-quick-main-grid,
  .work-quick-business {
    grid-template-columns: 1fr;
  }

  .work-quick-task {
    grid-column: auto;
  }

  .work-field-date {
    grid-column: auto;
  }

  .work-quick-footer .button {
    width: 100%;
  }

  .work-kpi-card-head {
    grid-template-columns: 48px minmax(0, 1fr);
    min-height: 0;
  }

  .work-kpi-photo {
    width: 48px;
    height: 48px;
  }

  .work-kpi-card-head .button {
    justify-self: stretch;
    width: 100%;
  }

  .work-kpi-card-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .work-kpi-card.is-intern .work-kpi-card-actions {
    grid-template-columns: 1fr;
  }

  .work-metric-main-grid,
  .work-metric-business-grid {
    grid-template-columns: 1fr;
  }

  .work-metric-remove {
    min-height: 32px;
  }

  .work-kpi-editor-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .performance-id-card {
    grid-template-rows: auto 144px auto auto auto;
  }

  .id-kpi-summary {
    grid-row: 4;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .id-kpi-breakdown {
    gap: 4px;
  }

  .id-kpi-business-item {
    justify-content: center;
    gap: 4px;
    padding: 7px 3px;
  }

  .id-kpi-view-button {
    width: 100%;
  }

  .work-detail-modal-card {
    width: min(100% - 18px, 900px);
    height: min(800px, calc(100vh - 18px));
  }

  .work-detail-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .work-detail-overview p {
    grid-column: 1 / -1;
    padding-top: 4px;
  }

  .work-detail-table-wrap {
    overflow: visible;
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  .work-detail-table {
    min-width: 0;
    table-layout: auto;
  }

  .work-detail-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .work-detail-table tbody {
    display: grid;
    gap: 10px;
  }

  .work-detail-table tbody tr {
    display: grid;
    padding: 4px 13px;
    border: 1px solid #e0deef;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(67, 50, 154, 0.05);
  }

  .work-detail-table tbody tr:nth-child(even),
  .work-detail-table tbody tr:hover {
    background: #fff;
  }

  .work-detail-table tbody th[scope="row"],
  .work-detail-table tbody td {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #eeecf6;
  }

  .work-detail-table tbody tr > *:last-child {
    border-bottom: 0;
  }

  .work-detail-table tbody th[scope="row"]::before,
  .work-detail-table tbody td::before {
    content: attr(data-label);
    color: #817c9d;
    font-size: 9px;
    font-weight: 700;
  }

  .work-detail-task {
    font-size: 12px;
  }

  .work-detail-modal-card .modal-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .work-detail-modal-card .modal-actions .button {
    width: 100%;
  }

  .performance-id-card .id-card-footer {
    grid-row: 5;
  }
}

@media (max-width: 620px) {
  .work-kpi-numbers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .work-kpi-duration-stat {
    grid-column: 1 / -1;
  }

  .work-detail-overview {
    grid-template-columns: 1fr;
  }

  .work-detail-overview p {
    grid-column: 1;
  }
}

@media print {
  .work-kpi-heading,
  .work-quick-entry-launcher,
  .work-quick-entry,
  .work-kpi-grid,
  .id-kpi-summary {
    break-inside: avoid;
  }
}


/*
 * WZH 企业数据指挥台 2.0 · 工作产出分析
 * 以全站设计令牌为唯一视觉来源；记录变化只表达数据方向，不评价绩效优劣。
 */

@media screen {
  .work-output-view {
    --output-blue: var(--ui-primary, #2f6fe4);
    --output-blue-deep: var(--ui-primary-deep, #2058c1);
    --output-ink: var(--ui-text, #14213d);
    --output-muted: var(--ui-muted, #66738e);
    --output-line: var(--ui-border, #d9e2f2);
    --output-soft: var(--ui-surface-soft, #f5f8ff);
    --output-attention: #a96314;
    color: var(--output-ink);
  }

  .work-output-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px 24px;
    margin-bottom: 14px;
    padding: 16px 18px;
    border: 1px solid var(--output-line);
    border-radius: var(--ui-radius-panel, 9px);
    background: var(--ui-surface, #fff);
    box-shadow: var(--ui-shadow, 0 8px 24px rgba(38, 58, 108, 0.08));
  }

  .work-output-intro { min-width: 240px; }

  .work-output-intro .eyebrow {
    color: var(--output-blue-deep);
    font-size: var(--text-meta, 12px);
  }

  .work-output-intro p {
    max-width: 520px;
    margin: 4px 0 0;
    color: var(--output-muted);
    font-size: var(--text-body, 14px);
    line-height: var(--line-body, 1.6);
  }

  .work-output-filters {
    display: grid;
    grid-template-columns: minmax(132px, 0.9fr) minmax(116px, 0.72fr) minmax(148px, 1fr) auto;
    align-items: end;
    gap: 10px;
  }

  .work-output-filters label { display: grid; gap: 5px; }

  .work-output-filters label > span {
    color: var(--output-muted);
    font-size: var(--text-meta, 12px);
    font-weight: var(--weight-semibold, 600);
  }

  .work-output-filters select,
  .work-output-export {
    min-height: 40px;
    border-radius: var(--ui-radius-control, 6px);
  }

  .work-output-filters select {
    min-width: 0;
    padding-inline: 12px 34px;
    color: var(--output-ink);
    border: 1px solid var(--ui-border-strong, #c6d4eb);
    background-color: #fff;
    box-shadow: none;
  }

  .work-output-filters select:disabled {
    opacity: 1;
    color: var(--output-muted);
    background-color: var(--output-soft);
    cursor: default;
  }

  .work-output-export {
    gap: 6px;
    color: var(--output-blue-deep);
    border: 1px solid var(--output-line);
    background: #fff;
    box-shadow: none;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
  }

  .work-output-export:hover {
    color: #fff;
    border-color: var(--output-blue);
    background: var(--output-blue);
  }

  .work-output-kpis {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
  }

  .work-output-kpi-card,
  .work-output-panel {
    border: 1px solid var(--output-line);
    background: var(--ui-surface, #fff);
    box-shadow: var(--ui-shadow, 0 8px 24px rgba(38, 58, 108, 0.08));
  }

  .work-output-kpi-card {
    position: relative;
    grid-column: span 2;
    min-width: 0;
    min-height: 128px;
    padding: 15px 16px 12px;
    overflow: hidden;
    border-radius: var(--ui-radius-panel, 9px);
    border-top: 3px solid var(--output-line);
  }

  .work-output-kpi-card:nth-child(-n + 2) {
    grid-column: span 3;
    border-top-color: var(--output-blue);
    background: linear-gradient(180deg, #fff 0%, #f6f9ff 100%);
  }

  .work-output-kpi-card.is-muted { background: #fafbfe; }

  .work-output-kpi-title {
    display: block;
    min-height: 22px;
    color: #344261;
    font-size: var(--text-small, 13px);
    font-weight: var(--weight-semibold, 600);
    line-height: var(--line-compact, 1.4);
  }

  .work-output-kpi-value {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-top: 4px;
  }

  .work-output-kpi-value strong {
    color: var(--output-blue-deep);
    font-size: clamp(28px, 2.2vw, 34px);
    font-weight: var(--weight-bold, 700);
    letter-spacing: -0.035em;
  }

  .work-output-kpi-card:nth-child(n + 3) .work-output-kpi-value strong { font-size: clamp(24px, 1.8vw, 30px); }
  .work-output-kpi-card.is-muted .work-output-kpi-value strong { color: var(--output-muted); }

  .work-output-kpi-value span {
    color: #405070;
    font-size: var(--text-meta, 12px);
    font-weight: var(--weight-semibold, 600);
  }

  .work-output-kpi-meta {
    display: flex;
    min-height: 22px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 3px;
    color: var(--output-muted);
    font-size: var(--text-meta, 12px);
    line-height: var(--line-compact, 1.4);
  }

  .work-output-kpi-change {
    flex: none;
    color: var(--output-blue-deep);
    font-weight: var(--weight-bold, 700);
  }

  .work-output-kpi-change.is-decrease { color: var(--output-attention); }
  .work-output-kpi-change.is-neutral { color: var(--output-muted); }

  .work-output-sparkline {
    display: block;
    width: 100%;
    height: 28px;
    margin-top: 3px;
  }

  .work-output-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(320px, 0.8fr);
    gap: 14px;
    margin-bottom: 14px;
  }

  .work-output-bottom-grid {
    display: grid;
    grid-template-columns: minmax(290px, 0.76fr) minmax(0, 2.24fr);
    gap: 14px;
  }

  .work-output-panel {
    min-width: 0;
    border-radius: var(--ui-radius-panel, 9px);
  }

  .work-output-panel-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 16px 11px;
    border-bottom: 1px solid #edf1f8;
  }

  .work-output-panel-heading h2 {
    margin: 0;
    color: var(--output-ink);
    font: var(--weight-bold, 700) var(--text-emphasis, 16px)/1.35 var(--font-ui, sans-serif);
  }

  .work-output-panel-heading p {
    margin: 4px 0 0;
    color: var(--output-muted);
    font-size: var(--text-meta, 12px);
    line-height: var(--line-compact, 1.4);
  }

  .work-output-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--output-muted);
    font-size: var(--text-meta, 12px);
    white-space: nowrap;
  }

  .work-output-legend span { display: flex; align-items: center; gap: 6px; }
  .work-output-legend span::before { content: ""; width: 12px; height: 6px; border-radius: 2px; background: var(--output-blue); }
  .work-output-legend .is-line::before { height: 2px; background: var(--output-attention); }

  .work-output-chart-wrap {
    position: relative;
    min-height: 300px;
    padding: 8px 12px 12px;
  }

  #work-output-trend-chart { display: block; width: 100%; height: 292px; }

  .work-output-chart-tooltip {
    position: absolute;
    z-index: 2;
    min-width: 150px;
    padding: 10px 12px;
    color: var(--output-ink);
    border: 1px solid var(--output-line);
    border-radius: var(--ui-radius-control, 6px);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 12px 30px rgba(34, 54, 107, 0.16);
    font-size: var(--text-meta, 12px);
    line-height: 1.65;
    pointer-events: none;
  }

  .work-output-chart-tooltip strong,
  .work-output-chart-tooltip span { display: block; }
  .work-output-chart-tooltip strong { margin-bottom: 3px; color: var(--output-ink); font-size: var(--text-small, 13px); }
  .work-output-chart-tooltip b { color: var(--output-blue-deep); }
  .work-output-chart-tooltip em { color: var(--output-attention); font-style: normal; }

  .work-output-diagnosis { overflow: hidden; }

  .work-output-diagnosis-section {
    margin: 12px 12px 0;
    border: 1px solid var(--output-line);
    border-radius: var(--ui-radius-control, 6px);
    overflow: hidden;
  }

  .work-output-diagnosis-section:last-child { margin-bottom: 12px; }
  .work-output-diagnosis-section.is-increase { border-left: 3px solid var(--output-blue); }
  .work-output-diagnosis-section.is-decrease { border-left: 3px solid var(--output-attention); }
  .work-output-diagnosis-section.is-warning { border-left: 3px solid #d28a20; }

  .work-output-diagnosis-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    color: #465472;
    background: var(--output-soft);
    font-size: var(--text-meta, 12px);
    font-weight: var(--weight-semibold, 600);
  }

  .work-output-diagnosis-section.is-increase .work-output-diagnosis-head { color: var(--output-blue-deep); }
  .work-output-diagnosis-section.is-decrease .work-output-diagnosis-head,
  .work-output-diagnosis-section.is-warning .work-output-diagnosis-head { color: #875111; }

  .work-output-diagnosis-list { margin: 0; padding: 0; list-style: none; }

  .work-output-diagnosis-list li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    padding: 9px 11px;
    color: #394763;
    border-top: 1px solid #edf1f8;
    font-size: var(--text-small, 13px);
  }

  .work-output-diagnosis-list li:first-child { border-top: 0; }
  .work-output-diagnosis-list span:first-child { color: #8793aa; }
  .work-output-diagnosis-list b { font-size: var(--text-small, 13px); }
  .work-output-diagnosis-section.is-increase li b { color: var(--output-blue-deep); }
  .work-output-diagnosis-section.is-decrease li b { color: var(--output-attention); }

  .work-output-warning-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px;
    color: #3b4864;
    font-size: var(--text-small, 13px);
  }

  .work-output-warning-row strong { color: var(--output-attention); font-size: var(--text-card-title, 20px); }
  .work-output-warning-row button { padding: 0; color: var(--output-blue-deep); border: 0; background: transparent; font-size: var(--text-small, 13px); font-weight: var(--weight-semibold, 600); cursor: pointer; }

  .work-output-business { min-height: 300px; }
  .work-output-business-bars { display: grid; gap: 16px; padding: 16px 16px 20px; }

  .work-output-business-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 10px;
    color: #42506c;
    font-size: var(--text-small, 13px);
  }

  .work-output-business-track { position: relative; height: 9px; border-radius: 3px; background: #eaf0fa; overflow: hidden; }
  .work-output-business-fill { display: block; width: var(--bar-width); height: 100%; border-radius: inherit; background: var(--output-blue); box-shadow: none; transition: width 240ms ease-out; }
  .work-output-business-row b { color: var(--output-ink); font-size: var(--text-small, 13px); text-align: right; }

  .work-output-ranking-note {
    padding: 4px 8px;
    color: var(--output-blue-deep);
    border: 1px solid #cbdaf4;
    border-radius: 4px;
    background: var(--output-soft);
    font-size: var(--text-meta, 12px);
    white-space: nowrap;
  }

  .work-output-table-wrap { margin: 12px 12px 0; border: 1px solid var(--output-line); border-radius: var(--ui-radius-control, 6px); overflow-x: auto; }
  .work-output-table { width: 100%; min-width: 700px; border-collapse: collapse; color: #354360; font-size: var(--text-small, 13px); }
  .work-output-table th,
  .work-output-table td { padding: 10px 11px; border-bottom: 1px solid #e8edf6; text-align: center; white-space: nowrap; }
  .work-output-table th:first-child,
  .work-output-table td:first-child { text-align: left; }
  .work-output-table thead { color: #445574; background: var(--output-soft); }
  .work-output-table th { font-weight: var(--weight-semibold, 600); }
  .work-output-table tbody tr:last-child td { color: var(--output-ink); border-bottom: 0; background: #f7f9fd; font-weight: var(--weight-bold, 700); }
  .work-output-table .is-increase { color: var(--output-blue-deep); font-weight: var(--weight-semibold, 600); }
  .work-output-table .is-decrease { color: var(--output-attention); font-weight: var(--weight-semibold, 600); }
  .work-output-table .is-neutral { color: var(--output-muted); }

  .work-output-detail-link { margin: 12px 16px 15px; padding: 0; color: var(--output-blue-deep); border: 0; background: transparent; font-size: var(--text-small, 13px); font-weight: var(--weight-semibold, 600); cursor: pointer; }
  .work-output-detail-link:hover,
  .work-output-warning-row button:hover { text-decoration: underline; text-underline-offset: 3px; }

  @media (max-width: 1280px) {
    .work-output-toolbar { align-items: stretch; flex-direction: column; }
    .work-output-filters { width: 100%; }
    .work-output-kpi-card:nth-child(-n + 2) { grid-column: span 6; }
    .work-output-kpi-card:nth-child(n + 3) { grid-column: span 4; }
    .work-output-main-grid { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.85fr); }
  }

  @media (max-width: 1040px) {
    .work-output-main-grid,
    .work-output-bottom-grid { grid-template-columns: 1fr; }
    .work-output-business { min-height: 0; }
    .work-output-business-bars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 820px) {
    .work-output-toolbar { padding: 14px; }
    .work-output-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .work-output-export { width: 100%; }
    .work-output-kpi-card:nth-child(n) { grid-column: span 6; min-height: 124px; }
    .work-output-main-grid,
    .work-output-bottom-grid { gap: 10px; }
    .work-output-chart-wrap,
    #work-output-trend-chart { min-height: 250px; height: 250px; }
    .work-output-table-wrap { overflow: visible; border: 0; }
    .work-output-table { min-width: 0; }
    .work-output-table thead { display: none; }
    .work-output-table,
    .work-output-table tbody,
    .work-output-table tr,
    .work-output-table td { display: block; width: 100%; }
    .work-output-table tbody { display: grid; gap: 10px; }
    .work-output-table tr { padding: 10px 12px; border: 1px solid var(--output-line); border-radius: 6px; background: #fff; }
    .work-output-table td { display: grid; grid-template-columns: minmax(112px, 0.9fr) minmax(0, 1fr); gap: 12px; padding: 5px 0; border: 0; text-align: right; white-space: normal; }
    .work-output-table td::before { content: attr(data-label); color: var(--output-muted); font-size: var(--text-meta, 12px); font-weight: var(--weight-medium, 500); text-align: left; }
    .work-output-table td:first-child { margin-bottom: 4px; padding-bottom: 9px; border-bottom: 1px solid #edf1f8; font-weight: var(--weight-bold, 700); text-align: right; }
    .work-output-table tbody tr:last-child td { background: transparent; }
  }

  @media (max-width: 540px) {
    .work-output-filters { grid-template-columns: 1fr; }
    .work-output-kpi-card:nth-child(n) { grid-column: span 6; min-height: 118px; padding: 13px 12px 10px; }
    .work-output-kpi-card:nth-child(n + 3) .work-output-kpi-value strong { font-size: 24px; }
    .work-output-kpi-meta { align-items: start; flex-direction: column; gap: 2px; }
    .work-output-business-bars { grid-template-columns: 1fr; }
    .work-output-panel-heading { gap: 8px; }
    .work-output-legend { width: 100%; justify-content: flex-end; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-output-view *,
  .work-output-view *::before,
  .work-output-view *::after { transition-duration: 0.01ms !important; }
}

@media print {
  .work-output-view .work-output-toolbar,
  .work-output-view .work-output-export,
  .work-output-view .work-output-detail-link { display: none !important; }
}


@media screen {
  .local-badge {
    gap: 7px;
  }

  .local-badge[data-status="online"] .status-dot {
    background: #23b26d;
    box-shadow: 0 0 0 4px rgba(35, 178, 109, 0.12);
  }

  .local-badge[data-status="syncing"] .status-dot {
    background: #f2a51a;
    box-shadow: 0 0 0 4px rgba(242, 165, 26, 0.13);
  }

  .local-badge[data-status="error"] .status-dot {
    background: #d94a5d;
    box-shadow: 0 0 0 4px rgba(217, 74, 93, 0.12);
  }

  .lan-migration-note {
    padding: 10px 12px;
    border-left: 3px solid var(--blue, #5a2cf5);
    background: rgba(90, 44, 245, 0.06);
    color: var(--ink-muted, #676782);
    line-height: 1.65;
  }

  @media (pointer: coarse) {
    button,
    input,
    select,
    .button,
    .nav-item,
    .photo-upload-button {
      min-height: 44px;
    }
  }

  @media (max-width: 820px) {
    html {
      scroll-padding-top: 118px;
    }

    body {
      overflow-x: hidden;
    }

    .app-shell {
      display: block;
      padding: 0;
    }

    .sidebar {
      position: sticky;
      top: 0;
      z-index: 60;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px 12px;
      width: auto;
      min-height: 0;
      padding: 10px 12px 8px;
      border: 0;
      border-bottom: 1px solid rgba(90, 44, 245, 0.13);
      border-radius: 0 0 9px 9px;
      box-shadow: 0 8px 26px rgba(29, 22, 79, 0.1);
    }

    .brand-lockup {
      min-width: 0;
      padding: 0;
      border: 0;
    }

    .brand-mark,
    .brand-lockup small,
    .document-code,
    .policy-note {
      display: none;
    }

    .brand-lockup strong {
      font-size: 18px;
      line-height: 36px;
    }

    .local-badge {
      display: flex;
      align-self: center;
      max-width: 178px;
      margin: 0;
      padding: 7px 9px;
      font-size: 10px;
      line-height: 1.25;
    }

    .side-nav {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 6px;
      margin: 0;
      padding: 0 0 2px;
      overflow: visible;
    }

    .side-nav::-webkit-scrollbar {
      display: none;
    }

    .nav-item {
      width: 100%;
      display: flex;
      grid-template-columns: none;
      justify-content: center;
      align-items: center;
      gap: 6px;
      min-width: 0;
      min-height: 40px;
      padding: 7px 5px;
      border-radius: 7px;
      white-space: nowrap;
    }

    .nav-index {
      font-size: 9px;
    }

    .nav-access-tag {
      display: none;
    }

    .main-stage {
      margin-left: 0;
      padding: 10px 10px calc(34px + env(safe-area-inset-bottom));
    }

    .topbar {
      position: static;
      margin-bottom: 10px;
      padding: 14px;
      border-radius: 9px;
    }

    .view-identity {
      min-width: 0;
    }

    .top-actions {
      min-width: 0;
    }

    .result-card-grid,
    .employee-grid,
    .settings-grid {
      gap: 10px;
    }
  }

  @media (max-width: 620px) {
    .main-stage {
      padding-inline: 8px;
    }

    .topbar {
      gap: 12px;
      padding: 13px 12px;
    }

    .topbar h1 {
      font-size: clamp(23px, 7vw, 30px);
      line-height: 1.15;
    }

    .top-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      width: 100%;
    }

    .auth-session,
    .month-control {
      grid-column: 1 / -1;
      width: 100%;
    }

    .top-actions > .button {
      width: 100%;
      min-width: 0;
    }

    .result-gallery-heading,
    .role-intro,
    .panel,
    .performance-id-card,
    .employee-card,
    .management-card,
    .work-kpi-heading,
    .work-quick-entry {
      border-radius: 8px;
    }

    .result-gallery-heading {
      gap: 12px;
      padding: 16px 14px;
    }

    .result-gallery-meta {
      width: 100%;
      box-sizing: border-box;
    }

    .performance-id-card {
      grid-template-columns: 82px minmax(0, 1fr);
      grid-template-rows: auto 124px auto auto auto;
      gap: 0 10px;
    }

    .id-card-topline {
      border-radius: 8px 8px 3px 3px;
    }

    .id-photo-area {
      width: 82px;
      height: 112px;
      align-self: center;
      border-radius: 50%;
    }

    .id-person-copy {
      min-width: 0;
    }

    .id-person-copy h3,
    .id-person-copy p {
      overflow-wrap: anywhere;
    }

    .id-result-stack {
      overflow: hidden;
      border-radius: 7px;
    }

    .id-result-stack > div {
      min-width: 0;
      padding-inline: 7px;
    }

    .id-result-stack > div > span:first-child {
      white-space: normal;
    }

    .final-grade-badge,
    .level-badge {
      max-width: 100%;
    }

    .id-kpi-summary {
      padding: 11px;
      border-radius: 7px;
    }

    .id-kpi-breakdown {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .id-kpi-business-item {
      min-height: 32px;
      padding-inline: 7px;
    }

    .nav-item {
      font-size: 11px;
    }

    .modal {
      width: 100%;
      max-width: none;
      margin: auto 0 0;
      padding: 0;
    }

    .modal::backdrop {
      backdrop-filter: blur(4px);
    }

    .modal-card,
    .compact-modal,
    .work-detail-modal-card {
      width: 100%;
      max-width: none;
      max-height: 100dvh;
      margin: 0;
      border-radius: 9px 9px 0 0;
      overflow-x: hidden;
    }

    .modal-heading,
    .sticky-heading {
      position: sticky;
      top: 0;
      z-index: 4;
      border-radius: 9px 9px 0 0;
    }

    .modal-actions,
    .sticky-actions {
      position: sticky;
      bottom: 0;
      z-index: 5;
      padding-bottom: calc(14px + env(safe-area-inset-bottom));
    }

    .modal-actions .button {
      min-height: 44px;
    }

    .work-detail-table-wrap {
      overflow: visible;
    }

    .toast {
      right: 10px;
      bottom: calc(10px + env(safe-area-inset-bottom));
      left: 10px;
      width: auto;
      text-align: center;
    }
  }
}


@media screen {
  .performance-id-card {
    grid-template-columns: 90px minmax(120px, 1fr) 154px;
  }

  .id-photo-area,
  .dashboard-intern-photo {
    width: 82px;
    height: 82px;
    aspect-ratio: 1;
  }

  .id-photo-area {
    overflow: visible;
  }

  .id-photo {
    width: 100%;
    height: 100%;
  }

  .dashboard-intern-section {
    margin-top: 26px;
    padding: 18px;
    border: 1px solid rgba(181, 116, 25, 0.26);
    border-top: 3px solid #d38a24;
    border-radius: 8px;
    background:
      linear-gradient(90deg, rgba(206, 137, 38, 0.04) 1px, transparent 1px),
      linear-gradient(135deg, #fff8e9 0%, #fffdf8 72%);
    background-size: 22px 100%, auto;
    box-shadow: 0 12px 26px rgba(99, 68, 22, 0.07);
  }

  .dashboard-intern-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(181, 116, 25, 0.22);
  }

  .dashboard-intern-eyebrow {
    color: #a76710;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
  }

  .dashboard-intern-heading h2 {
    margin: 4px 0 0;
    color: #2f2417;
    font-size: clamp(24px, 2.4vw, 32px);
    line-height: 1.08;
  }

  .dashboard-intern-heading p {
    margin: 7px 0 0;
    color: #7e6b50;
    font-size: 10px;
    line-height: 1.65;
  }

  .dashboard-intern-heading > strong {
    flex: 0 0 auto;
    padding: 7px 10px;
    color: #92580c;
    border: 1px solid rgba(181, 116, 25, 0.18);
    border-radius: 4px;
    background: #ffedc3;
    font-size: 11px;
  }

  .dashboard-intern-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
  }

  .dashboard-intern-card {
    position: relative;
    display: grid;
    grid-template-columns: 86px minmax(126px, 0.9fr) minmax(190px, 1.35fr);
    grid-template-rows: auto auto auto;
    gap: 12px 15px;
    min-width: 0;
    overflow: hidden;
    padding: 14px;
    border: 1px solid rgba(103, 77, 39, 0.22);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 8px 18px rgba(86, 60, 24, 0.06);
    animation: dossier-view-in 240ms cubic-bezier(.2,.7,.2,1) both;
    animation-delay: calc(var(--card-order, 0) * 45ms);
  }

  .dashboard-intern-card::after {
    content: "INTERN";
    position: absolute;
    right: 12px;
    bottom: 7px;
    color: rgba(170, 106, 18, 0.08);
    font-size: 27px;
    font-weight: 900;
    letter-spacing: 0.08em;
    pointer-events: none;
  }

  .dashboard-intern-card.is-parttime {
    border-color: rgba(17, 124, 116, 0.28);
    background: rgba(247, 252, 251, 0.94);
  }

  .dashboard-intern-card.is-parttime::after {
    content: "PART-TIME";
    color: rgba(17, 124, 116, 0.08);
  }

  .dashboard-intern-card.is-parttime .dashboard-intern-topline {
    color: #075e59;
    border-bottom-color: rgba(17, 124, 116, 0.18);
    background: #dff3f0;
  }

  .dashboard-intern-card.is-parttime .dashboard-intern-topline b,
  .dashboard-intern-role-tag.is-parttime {
    color: #075e59;
  }

  .dashboard-intern-role-tag.is-parttime {
    background: #d9f1ed;
  }

  .dashboard-intern-topline {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: -14px -14px 0;
    padding: 9px 14px;
    color: #735021;
    border-bottom: 1px solid rgba(181, 116, 25, 0.18);
    background: #fff2d4;
    font-size: 8px;
    letter-spacing: 0.04em;
  }

  .dashboard-intern-topline b {
    color: #9a5f0e;
    font-size: 9px;
    white-space: nowrap;
  }

  .dashboard-intern-card.is-eligible .dashboard-intern-topline b {
    color: #167247;
  }

  .dashboard-intern-photo {
    grid-column: 1;
    grid-row: 2;
    width: 82px;
    height: 82px;
    box-sizing: border-box;
    overflow: hidden;
    object-fit: cover;
    object-position: center;
    color: #b47825;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #f4e8cf;
    box-shadow: 0 0 0 1px rgba(181, 116, 25, 0.24), 0 6px 13px rgba(94, 65, 23, 0.1);
  }

  .dashboard-intern-photo.photo-placeholder {
    display: grid;
    place-items: center;
  }

  .dashboard-intern-photo.photo-placeholder svg {
    width: 45%;
    height: 45%;
    fill: currentColor;
  }

  .dashboard-intern-person {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    min-width: 0;
  }

  .dashboard-intern-role-tag {
    display: inline-block;
    padding: 3px 6px;
    color: #92580c;
    border-radius: 3px;
    background: #ffedc3;
    font-size: 8px;
    font-weight: 800;
  }

  .dashboard-intern-person h3 {
    margin: 7px 0 0;
    overflow: hidden;
    color: #211b13;
    font-size: 23px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dashboard-intern-person p {
    margin: 4px 0 0;
    overflow-wrap: anywhere;
    color: #756650;
    font-size: 10px;
    line-height: 1.45;
  }

  .dashboard-intern-notice {
    grid-column: 3;
    grid-row: 2;
    display: flex;
    align-items: center;
    align-self: center;
    gap: 8px;
    min-width: 0;
    padding: 10px;
    color: #7d5924;
    border-left: 3px solid #d38a24;
    background: #fff9ec;
  }

  .dashboard-intern-notice span {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 20px;
    height: 20px;
    color: #fff;
    border-radius: 50%;
    background: #cf8720;
    font-family: Georgia, serif;
    font-size: 12px;
    font-style: italic;
  }

  .dashboard-intern-notice strong {
    overflow-wrap: anywhere;
    font-size: 10px;
    line-height: 1.4;
  }

  .dashboard-intern-notice > div {
    display: grid;
    gap: 7px;
    min-width: 0;
  }

  .dashboard-intern-work-button {
    min-height: 28px;
    padding: 5px 9px;
    color: #fff;
    border: 1px solid #b56f18;
    border-radius: 4px;
    background: #b56f18;
    font: inherit;
    font-size: 9px;
    font-weight: 750;
    cursor: pointer;
  }

  .dashboard-intern-work-button:hover,
  .dashboard-intern-work-button:focus-visible {
    background: #8f5310;
    outline: 3px solid rgba(181, 111, 24, 0.2);
    outline-offset: 2px;
  }

  .dashboard-intern-dates,
  .dashboard-intern-capabilities {
    position: relative;
    z-index: 1;
    display: grid;
    min-width: 0;
    margin: 0;
  }

  .dashboard-intern-dates {
    grid-column: 1 / 3;
    grid-row: 3;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .dashboard-intern-capabilities {
    grid-column: 3;
    grid-row: 3;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .dashboard-intern-dates > div,
  .dashboard-intern-capabilities > div {
    min-width: 0;
    padding: 8px;
    border: 1px solid rgba(106, 82, 47, 0.13);
    background: rgba(250, 246, 238, 0.9);
  }

  .dashboard-intern-dates dt,
  .dashboard-intern-capabilities dt {
    color: #9b886a;
    font-size: 8px;
  }

  .dashboard-intern-dates dd,
  .dashboard-intern-capabilities dd {
    margin: 4px 0 0;
    overflow-wrap: anywhere;
    color: #3b3022;
    font-size: 9px;
    font-weight: 750;
    line-height: 1.35;
  }

  @media (max-width: 1180px) {
    .dashboard-intern-grid {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 620px) {
    .performance-id-card {
      grid-template-columns: 76px minmax(0, 1fr);
    }

    .id-photo-area,
    .dashboard-intern-photo {
      width: 68px;
      height: 68px;
    }

    .dashboard-intern-section {
      margin-top: 18px;
      padding: 13px;
      border-radius: 8px;
    }

    .dashboard-intern-heading {
      align-items: start;
    }

    .dashboard-intern-heading h2 {
      font-size: 24px;
    }

    .dashboard-intern-card {
      grid-template-columns: 72px minmax(0, 1fr);
      grid-template-rows: auto auto auto auto auto;
      gap: 10px 12px;
      padding: 12px;
    }

    .dashboard-intern-topline {
      margin: -12px -12px 0;
      padding: 8px 12px;
    }

    .dashboard-intern-person {
      grid-column: 2;
    }

    .dashboard-intern-person h3 {
      font-size: 21px;
    }

    .dashboard-intern-notice {
      grid-column: 1 / -1;
      grid-row: 3;
    }

    .dashboard-intern-dates {
      grid-column: 1 / -1;
      grid-row: 4;
    }

    .dashboard-intern-capabilities {
      grid-column: 1 / -1;
      grid-row: 5;
      grid-template-columns: 1fr;
    }

    .dashboard-intern-capabilities > div {
      display: grid;
      grid-template-columns: 64px minmax(0, 1fr);
      align-items: baseline;
      gap: 8px;
    }

    .dashboard-intern-capabilities dd {
      margin-top: 0;
    }
  }
}

@media print {
  .dashboard-intern-section {
    break-inside: avoid;
    box-shadow: none;
  }
}


@media screen {
  .performance-id-card {
    grid-template-columns: 90px minmax(120px, 1fr) 202px;
    gap: 0 15px;
  }

  .id-result-stack {
    position: relative;
    border: 1px solid rgba(86, 57, 203, 0.18);
    border-radius: 8px;
    background: #f3f1ff;
    box-shadow:
      0 10px 22px rgba(63, 42, 158, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
    overflow: hidden;
  }

  .id-result-stack > div {
    grid-template-columns: 66px minmax(0, 1fr);
    min-width: 0;
    min-height: 56px;
    gap: 9px;
    padding: 8px 10px;
  }

  .id-result-stack > div > span:first-child {
    color: #6b6886;
    font-size: 11px;
    font-weight: 720;
    line-height: 1.35;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .id-result-stack .level-badge,
  .id-result-stack .final-grade-badge {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    justify-content: flex-start;
    padding-right: 9px;
    overflow: hidden;
  }

  .id-result-stack .level-badge b,
  .id-result-stack .final-grade-badge b {
    min-width: 0;
    color: #2c2940;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
  }

  .id-final-result {
    position: relative;
    min-height: 66px;
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    background: linear-gradient(135deg, #4938e7 0%, #6528f5 100%) !important;
    box-shadow: inset 4px 0 0 rgba(255, 255, 255, 0.26);
  }

  .id-result-stack .id-final-result > span:first-child {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.92);
    font-size: 11px;
    font-weight: 820;
    letter-spacing: 0.05em;
  }

  .id-final-result .final-grade-badge {
    min-height: 46px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(26, 16, 96, 0.22);
  }

  .id-final-result .final-grade-badge b {
    font-size: 14px;
  }

  .id-result-stack .level-badge-code,
  .id-result-stack .final-grade-code {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    font-size: 11px;
  }

  @media (max-width: 1180px) {
    .performance-id-card {
      grid-template-columns: 90px minmax(160px, 1fr) 214px;
    }
  }

  @media (max-width: 620px) {
    .performance-id-card {
      grid-template-columns: 76px minmax(0, 1fr);
      gap: 0 10px;
    }

    .id-result-stack {
      grid-column: 1 / -1;
      grid-row: 3;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: auto auto;
      margin-top: 13px;
    }

    .id-result-stack > div {
      grid-template-columns: 48px minmax(0, 1fr);
      min-height: 72px;
      gap: 6px;
      padding: 8px 7px;
    }

    .id-result-stack > div > span:first-child {
      font-size: 10px;
      white-space: normal;
    }

    .id-final-result {
      grid-column: 1 / -1;
      grid-row: 1;
      min-height: 82px;
      grid-template-columns: 66px minmax(0, 1fr) !important;
      padding: 10px 12px !important;
    }

    .id-primary-result {
      grid-column: 1;
      grid-row: 2;
    }

    .id-secondary-result {
      grid-column: 2;
      grid-row: 2;
    }

    .id-result-stack .level-badge,
    .id-result-stack .final-grade-badge {
      min-height: 42px;
    }

    .id-result-stack .level-badge-code,
    .id-result-stack .final-grade-code {
      width: 26px;
      height: 26px;
      flex-basis: 26px;
    }

    .id-final-result .final-grade-code {
      width: 30px;
      height: 30px;
      flex-basis: 30px;
    }

    .id-final-result .final-grade-badge b {
      font-size: 13px;
    }
  }
}

@media print {
  .id-result-stack {
    box-shadow: none;
  }
}


@media screen {
  .app-version {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 11px 5px 0;
    padding-top: 10px;
    color: #a1a4bc;
    border-top: 1px solid rgba(90, 44, 245, 0.1);
    font-size: 9px;
    line-height: 1.3;
    letter-spacing: 0.04em;
  }

  .app-version b {
    color: #5a2cf5;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
  }

  @media (max-width: 820px) {
    .app-version {
      grid-column: 1 / -1;
      justify-content: flex-start;
      width: max-content;
      margin: 0 2px;
      padding: 0;
      border: 0;
      font-size: 8px;
    }

    .app-version b {
      font-size: 9px;
    }
  }
}

@media print {
  .app-version {
    display: none;
  }
}


@media screen {
  .brand-lockup {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 10px;
  }

  .company-logo {
    display: block;
    width: 156px;
    max-width: 100%;
    height: auto;
  }

  .brand-copy {
    display: grid;
    gap: 1px;
  }

  .brand-copy small {
    color: #777b99;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.05em;
  }

  @media (max-width: 820px) {
    .brand-lockup {
      display: flex;
      align-items: center;
      min-height: 36px;
      padding: 0;
      border: 0;
    }

    .company-logo {
      width: 98px;
    }

    .brand-copy {
      display: none;
    }
  }
}

@media print {
  .company-logo {
    filter: grayscale(1);
  }
}


.policy-open-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.policy-open-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.policy-dialog {
  width: min(1080px, calc(100vw - 32px));
  max-height: min(900px, calc(100dvh - 32px));
}

.policy-dialog-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  max-height: min(900px, calc(100dvh - 32px));
  overflow: hidden;
  border: 1px solid var(--line-dark);
  background: var(--paper);
}

.policy-dialog-heading {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  padding: 25px 28px 23px;
  color: white;
  border-bottom: 4px solid var(--red);
  background:
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    var(--blue-deep);
  background-size: 30px 100%;
}

.policy-dialog-heading::after {
  content: "WZHG · POLICY";
  position: absolute;
  right: 92px;
  bottom: 13px;
  color: rgba(255,255,255,.12);
  font: 700 11px/1 Georgia, serif;
  letter-spacing: .16em;
}

.policy-dialog-heading .eyebrow {
  margin-bottom: 8px;
  color: #a9d0fa;
  font-family: inherit;
}

.policy-dialog-heading h2 {
  font-size: clamp(27px, 3vw, 38px);
  line-height: 1.08;
}

.policy-dialog-heading p {
  margin: 9px 0 0;
  color: rgba(255,255,255,.72);
  font-size: 12px;
}

.policy-close-button {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  color: white;
  border-color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.08);
}

.policy-dialog-scroll {
  overflow: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

.policy-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr);
  gap: 34px;
  padding: 32px 28px;
  border-bottom: 1px solid var(--line-dark);
  background:
    radial-gradient(circle at 90% 8%, rgba(21,87,166,.11), transparent 34%),
    var(--surface);
}

.policy-section-label {
  display: block;
  margin-bottom: 7px;
  color: var(--blue);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.policy-summary h3,
.policy-section h3,
.policy-system-note h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(21px, 2.5vw, 29px);
  line-height: 1.25;
}

.policy-summary-copy > p {
  max-width: 600px;
  margin: 13px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.8;
}

.policy-fact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line-dark);
  background: rgba(255,255,255,.68);
}

.policy-fact-grid > div {
  display: grid;
  align-content: center;
  min-height: 86px;
  padding: 13px 16px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.policy-fact-grid > div:nth-child(2n) { border-right: 0; }
.policy-fact-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
.policy-fact-grid strong { color: var(--blue-deep); font: 700 25px/1 var(--serif); }
.policy-fact-grid span { margin-top: 8px; color: var(--ink-soft); font-size: 10px; }

.policy-anchor-nav {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  gap: 4px;
  padding: 10px 28px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line-dark);
  background: rgba(238,234,224,.96);
  backdrop-filter: blur(10px);
}

.policy-anchor-nav a {
  flex: 0 0 auto;
  padding: 7px 10px;
  color: var(--ink-soft);
  border: 1px solid transparent;
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
}

.policy-anchor-nav a:hover {
  color: var(--blue-deep);
  border-color: var(--line-dark);
  background: white;
}

.policy-section {
  scroll-margin-top: 58px;
  padding: 30px 28px;
  border-bottom: 1px solid var(--line-dark);
}

.policy-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}

.policy-section-number {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  color: white;
  background: var(--blue-deep);
  font: 700 11px/1 Georgia, serif;
}

.policy-section-heading .policy-section-label { margin: 0 0 4px; }
.policy-section-heading h3 { font-size: clamp(20px, 2.1vw, 26px); }

.policy-two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.policy-info-block {
  padding: 19px;
  border: 1px solid var(--line-dark);
  border-left: 4px solid var(--blue-deep);
  background: var(--surface);
}

.policy-info-block-muted { border-left-color: #7b8493; background: rgba(231,229,222,.7); }
.policy-info-block h4,
.policy-role-grid h4,
.policy-application-grid h4 { margin: 0; font: 700 16px/1.3 var(--serif); }
.policy-info-block p,
.policy-role-grid p,
.policy-application-grid p { margin: 9px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.75; }

.policy-principles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.policy-principles li {
  position: relative;
  min-height: 72px;
  padding: 14px 12px 12px 27px;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  font-size: 11px;
  line-height: 1.55;
}

.policy-principles li::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 12px;
  width: 6px;
  height: 6px;
  background: var(--red);
}

.policy-role-grid,
.policy-application-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.policy-role-grid article,
.policy-application-grid article {
  padding: 18px;
  border: 1px solid var(--line-dark);
  background: var(--surface);
}

.policy-role-grid article > span {
  display: inline-block;
  margin-bottom: 13px;
  padding: 4px 7px;
  color: var(--blue-deep);
  border: 1px solid rgba(16,58,107,.22);
  background: rgba(21,87,166,.06);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
}

.policy-cycle-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 12px;
  border: 1px solid var(--line-dark);
}

.policy-cycle-strip > div {
  display: grid;
  gap: 5px;
  padding: 16px 18px;
  border-right: 1px solid var(--line-dark);
}

.policy-cycle-strip > div:last-child { border-right: 0; }
.policy-cycle-strip span { color: var(--ink-soft); font-size: 10px; }
.policy-cycle-strip strong { color: var(--ink); font: 700 19px/1.2 var(--serif); }
.policy-cycle-strip small { color: var(--blue); font-size: 9px; }

.policy-salary-rule {
  display: grid;
  grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr);
  margin-bottom: 14px;
  overflow: hidden;
  color: white;
  border: 1px solid var(--blue-deep);
  background: var(--blue-deep);
}

.policy-salary-lead {
  position: relative;
  padding: 23px 22px;
  overflow: hidden;
  border-right: 1px solid rgba(255,255,255,.15);
}

.policy-salary-lead::after {
  content: "PAY STRUCTURE";
  position: absolute;
  right: -9px;
  bottom: 9px;
  color: rgba(255,255,255,.08);
  font: 700 10px/1 Georgia, serif;
  letter-spacing: .16em;
}

.policy-salary-lead .policy-section-label { color: #a9d0fa; }
.policy-salary-lead > strong { display: block; margin-top: 13px; font: 700 clamp(42px, 5vw, 64px)/.9 var(--serif); }
.policy-salary-lead h4 { margin: 12px 0 0; font: 700 16px/1.35 var(--serif); }
.policy-salary-lead p { position: relative; z-index: 1; margin: 10px 0 0; color: rgba(255,255,255,.68); font-size: 10px; line-height: 1.7; }

.policy-salary-details {
  display: grid;
  background: var(--surface);
}

.policy-salary-details article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 14px 17px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.policy-salary-details article:last-child { border-bottom: 0; }
.policy-salary-details article > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--blue-deep);
  border: 1px solid rgba(16,58,107,.22);
  background: rgba(21,87,166,.06);
  font: 700 9px/1 Georgia, serif;
}
.policy-salary-details h4 { margin: 1px 0 0; font: 700 14px/1.3 var(--serif); }
.policy-salary-details p { margin: 5px 0 0; color: var(--ink-soft); font-size: 10px; line-height: 1.65; }

.policy-weight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.policy-weight-grid article {
  overflow: hidden;
  border: 1px solid var(--line-dark);
  background: var(--surface);
}

.policy-weight-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  color: white;
  background: var(--blue-deep);
  font-size: 10px;
}

.policy-weight-title strong { color: #a9d0fa; }
.policy-weight-grid article > p { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 18px 14px; font-size: 12px; }
.policy-weight-grid article > p span { color: var(--ink-soft); }

.policy-privacy-note,
.policy-exception-note {
  margin: 13px 0 0;
  padding: 12px 14px;
  color: var(--ink-soft);
  border-left: 3px solid var(--red);
  background: rgba(197,48,43,.045);
  font-size: 11px;
  line-height: 1.7;
}

.policy-timeline {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border: 1px solid var(--line-dark);
  list-style: none;
}

.policy-timeline li {
  position: relative;
  min-height: 135px;
  padding: 17px 13px;
  border-right: 1px solid var(--line);
}

.policy-timeline li:last-child { border-right: 0; }
.policy-timeline strong { display: block; color: var(--blue-deep); font: 700 17px/1.2 var(--serif); }
.policy-timeline span { display: block; margin-top: 12px; color: var(--ink-soft); font-size: 10px; line-height: 1.65; }

.policy-table-wrap { overflow-x: auto; border: 1px solid var(--line-dark); }
.policy-grade-table { width: 100%; min-width: 680px; border-collapse: collapse; }
.policy-grade-table th { padding: 11px 13px; color: white; background: var(--blue-deep); font-size: 10px; text-align: left; }
.policy-grade-table td { padding: 12px 13px; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 11px; }
.policy-grade-table tr:last-child td { border-bottom: 0; }
.policy-grade-table td:nth-child(2),
.policy-grade-table td:nth-child(3) { color: var(--ink); font-weight: 700; white-space: nowrap; }

.policy-grade-mark {
  display: inline-grid;
  place-items: center;
  width: 25px;
  height: 25px;
  margin-right: 7px;
  color: white;
  background: var(--blue-deep);
  font-weight: 800;
}

.grade-s { background: #a74334; }
.grade-a { background: #167253; }
.grade-b { background: #1557a6; }
.grade-c { color: #503712; background: #d5a647; }
.grade-d { background: #626a78; }

.policy-rule-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.policy-rule-list p {
  margin: 0;
  padding: 14px;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  font-size: 11px;
  line-height: 1.7;
}

.policy-system-note {
  margin: 20px 28px 30px;
  padding: 23px 24px;
  color: white;
  border-left: 5px solid var(--red);
  background: var(--blue-deep);
}

.policy-system-note .policy-section-label { color: #a9d0fa; }
.policy-system-note h3 { color: white; font-size: clamp(19px, 2vw, 24px); }
.policy-system-note p { margin: 12px 0 0; color: rgba(255,255,255,.75); font-size: 11px; line-height: 1.75; }

.policy-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 14px 20px 14px 28px;
  border-top: 1px solid var(--line-dark);
  background: rgba(238,234,224,.98);
}

.policy-dialog-footer p { max-width: 720px; margin: 0; color: var(--ink-soft); font-size: 10px; line-height: 1.55; }
.policy-dialog-footer .button { flex: 0 0 auto; }

@media (max-width: 820px) {
  .policy-summary { grid-template-columns: 1fr; }
  .policy-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .policy-salary-rule { grid-template-columns: 1fr; }
  .policy-salary-lead { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.15); }
  .policy-salary-lead::after { right: 8px; }
  .policy-weight-grid { grid-template-columns: 1fr; }
  .policy-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .policy-timeline li { min-height: 110px; border-bottom: 1px solid var(--line); }
  .policy-timeline li:nth-child(2n) { border-right: 0; }
  .policy-timeline li:last-child { border-bottom: 0; }
}

@media (max-width: 620px) {
  .policy-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    margin: 8px;
  }

  .policy-dialog-card { max-height: calc(100dvh - 16px); }
  .policy-dialog-heading { gap: 12px; padding: 18px 15px 17px; }
  .policy-dialog-heading::after { display: none; }
  .policy-dialog-heading h2 { font-size: 26px; line-height: 1.16; }
  .policy-dialog-heading p { max-width: 240px; font-size: 10px; line-height: 1.5; }
  .policy-close-button { min-width: 48px; min-height: 36px; padding: 0 9px; }
  .policy-summary { gap: 20px; padding: 24px 15px; }
  .policy-summary h3 { font-size: 23px; }
  .policy-anchor-nav { padding: 8px 15px; }
  .policy-anchor-nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .policy-section { padding: 25px 15px; }
  .policy-salary-lead { min-width: 0; padding-inline: 17px; }
  .policy-salary-lead > strong { padding-block: 3px; line-height: 1.1; }
  .policy-two-column,
  .policy-role-grid,
  .policy-application-grid,
  .policy-rule-list { grid-template-columns: 1fr; }
  .policy-principles { grid-template-columns: 1fr; }
  .policy-principles li { min-height: 0; }
  .policy-cycle-strip { grid-template-columns: 1fr; }
  .policy-cycle-strip > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .policy-cycle-strip > div:last-child { border-bottom: 0; }
  .policy-timeline { grid-template-columns: 1fr; }
  .policy-timeline li { min-height: 0; border-right: 0; }
  .policy-system-note { margin: 16px 15px 24px; padding: 20px 17px; }
  .policy-dialog-footer { align-items: stretch; flex-direction: column; gap: 10px; padding: 12px 15px; }
  .policy-dialog-footer .button { width: 100%; }
}

@media print {
  .policy-dialog-card { max-height: none; overflow: visible; border: 0; }
  .policy-dialog-scroll { overflow: visible; }
  .policy-anchor-nav,
  .policy-dialog-footer { display: none; }
}


.ordinary-directory .employee-card {
  grid-template-rows: auto 92px auto auto auto;
}

.employee-salary-card {
  grid-column: 1 / -1;
  grid-row: auto;
  display: grid;
  gap: 10px;
  margin-top: 2px;
  padding: 13px 14px;
  color: #24203a;
  border: 1px solid rgba(79, 39, 213, 0.18);
  border-left: 3px solid #5a2cf5;
  border-radius: 5px;
  background: linear-gradient(135deg, #f7f5ff 0%, #eeebff 100%);
}

.employee-salary-card.is-loading {
  color: #716b87;
  border-left-color: #aaa4bb;
  background: #f4f2f8;
}

.employee-salary-card.is-loading > div,
.employee-salary-card-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.employee-salary-card span,
.employee-salary-card dt {
  color: #81799b;
  font-size: 9px;
  letter-spacing: 0.04em;
}

.employee-salary-card-heading strong {
  color: #4f27d5;
  font-size: 15px;
  line-height: 1;
}

.employee-salary-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.employee-salary-card dl > div {
  min-width: 0;
  padding-top: 8px;
  border-top: 1px solid rgba(79, 39, 213, 0.12);
}

.employee-salary-card dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  color: #24203a;
  font-size: 11px;
  font-weight: 750;
}

.employee-salary-card p {
  margin: 0;
  font-size: 9px;
  line-height: 1.5;
}

.intern-card .employee-salary-card {
  grid-column: 1 / -1;
  grid-row: auto;
}

.intern-card .employee-salary-card.is-intern-salary {
  border-color: rgba(190, 126, 31, 0.22);
  border-left-color: #bd7e22;
  background: linear-gradient(135deg, #fffdf7 0%, #fff4dc 100%);
}

.intern-card .employee-salary-card.is-intern-salary .employee-salary-card-heading strong {
  color: #8a5512;
}

.intern-card .employee-salary-card.is-intern-salary p {
  color: #8a6a3e;
}

.employee-salary-fields {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(79, 39, 213, 0.18);
  border-left: 4px solid #5a2cf5;
  border-radius: 6px;
  background: linear-gradient(135deg, #f8f7ff, #f0edff);
}

.employee-salary-fields[hidden] {
  display: none !important;
}

.employee-salary-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px;
}

.employee-salary-heading h3 {
  margin: 4px 0 0;
  color: #1b1732;
  font-size: 18px;
}

.employee-salary-heading p {
  max-width: 510px;
  margin: 6px 0 0;
  color: #736d86;
  font-size: 10px;
  line-height: 1.6;
}

.employee-salary-total {
  min-width: 155px;
  padding: 11px 13px;
  border: 1px solid rgba(79, 39, 213, 0.16);
  border-radius: 5px;
  background: #fff;
  text-align: right;
}

.employee-salary-total span {
  display: block;
  color: #827b98;
  font-size: 9px;
}

.employee-salary-total strong {
  display: block;
  margin-top: 4px;
  color: #4f27d5;
  font-size: 18px;
}

.employee-salary-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  align-items: end;
  gap: 10px;
  margin-top: 14px;
}

.employee-salary-inputs .field {
  min-width: 0;
  margin: 0;
}

.employee-salary-plus {
  display: grid;
  min-height: 42px;
  place-items: center;
  color: #5a2cf5;
  font-size: 17px;
  font-weight: 800;
}

#employee-performance-salary-field[hidden],
#employee-salary-plus[hidden],
#employee-intern-salary-rule[hidden] {
  display: none !important;
}

.employee-intern-salary-rule {
  display: block;
  margin-top: 12px;
  padding: 9px 11px;
  color: #74501c;
  border-left: 3px solid #bd7e22;
  background: rgba(255, 244, 220, 0.78);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.55;
}

.employee-salary-security {
  display: block;
  margin-top: 10px;
  color: #746d8a;
  font-size: 9px;
  line-height: 1.5;
}

@media (max-width: 520px) {
  .ordinary-directory .employee-card {
    grid-template-rows: auto 92px auto auto auto;
  }

  .employee-salary-card dl,
  .employee-salary-heading,
  .employee-salary-inputs {
    grid-template-columns: 1fr;
  }

  .employee-salary-total {
    min-width: 0;
    text-align: left;
  }

  .employee-salary-plus {
    min-height: 16px;
  }
}

@media print {
  .employee-salary-card,
  .employee-salary-fields {
    display: none !important;
  }
}


/*
 * 方向 A：WZH 蓝紫精密工作台。
 * 本文件是视觉系统的最终收口层：公司蓝承担操作，绩效紫承担结果，
 * 状态色只表达业务含义。功能与权限逻辑保持不变。
 */

@media screen {
  :root {
    --paper: #edf2ff;
    --paper-strong: #e3eafc;
    --surface: #ffffff;
    --ink: #17213b;
    --ink-soft: #65708c;
    --ink-muted: #7e88a2;
    --line: #dfe5f3;
    --line-dark: #cbd5eb;
    --blue: #2f6fe4;
    --blue-deep: #1f4fb8;
    --red: #dd5364;
    --amber: #bf7a18;
    --green: #208564;
    --violet: #6246df;
    --violet-soft: #eeebff;
    --violet-mid: #9c8cf3;
    --shadow: 0 18px 44px rgba(48, 67, 126, 0.12);
    --shadow-soft: 0 8px 24px rgba(48, 67, 126, 0.08);
    --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --serif: "Avenir Next", "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
    --type-display: clamp(28px, 2.4vw, 34px);
    --type-page-title: clamp(28px, 2.3vw, 34px);
    --type-section-title: clamp(21px, 1.8vw, 25px);
    --type-card-title: 22px;
    --type-body: 14px;
    --type-control: 13px;
    --type-small: 12px;
    --type-meta: 11px;
    --radius-shell: 10px;
    --radius-panel: 9px;
    --radius-card: 7px;
    --radius-control: 5px;
  }

  html {
    background: var(--paper);
  }

  body {
    color: var(--ink);
    background:
      radial-gradient(circle at 82% 8%, rgba(105, 125, 231, 0.13), transparent 28%),
      linear-gradient(145deg, #f1f5ff 0%, var(--paper) 48%, #e7edfb 100%);
    background-attachment: fixed;
    background-size: auto;
    font-family: var(--sans);
    font-size: var(--type-body);
    line-height: 1.55;
    text-rendering: optimizeLegibility;
  }

  button,
  input,
  textarea,
  select {
    font-family: inherit;
  }

  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible,
  [tabindex]:focus-visible {
    outline: 3px solid rgba(47, 111, 228, 0.24);
    outline-offset: 2px;
  }

  .sidebar {
    inset: 18px auto 18px 18px;
    width: 224px;
    padding: 23px 18px 18px;
    color: var(--ink);
    border: 1px solid rgba(203, 213, 235, 0.86);
    border-radius: var(--radius-shell);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 22px 52px rgba(43, 61, 117, 0.13);
    backdrop-filter: blur(16px);
  }

  .sidebar::before,
  .sidebar::after,
  .topbar::after {
    display: none;
  }

  .brand-lockup {
    display: grid;
    gap: 14px;
    padding: 4px 4px 22px;
    border-bottom-color: var(--line);
  }

  .company-logo {
    width: 142px;
  }

  .brand-copy small,
  .document-code {
    color: var(--ink-soft);
    font-size: 12px;
    letter-spacing: 0.02em;
  }

  .document-code {
    margin-top: 5px;
    color: var(--blue-deep);
    font-weight: 720;
  }

  .side-nav {
    gap: 6px;
    margin-top: 22px;
  }

  .nav-item {
    grid-template-columns: minmax(0, 1fr);
    min-height: 46px;
    padding: 10px 11px;
    color: #67718d;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 650;
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
  }

  .nav-index {
    color: #9aa5bf;
    font-family: var(--sans);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
  }

  .nav-item:hover {
    color: var(--blue-deep);
    border-color: #d9e4f9;
    background: #f4f7fe;
    transform: translateX(2px);
  }

  .nav-item.is-active {
    color: #fff;
    border-color: var(--blue);
    background: linear-gradient(135deg, var(--blue) 0%, #4566dc 100%);
    box-shadow: 0 8px 18px rgba(47, 111, 228, 0.22);
  }

  .nav-item.is-active .nav-index {
    color: rgba(255, 255, 255, 0.72);
  }

  .nav-access-tag {
    padding: 3px 5px;
    color: var(--blue-deep);
    border-color: #d3def5;
    background: #eef4ff;
    font-size: 10px;
  }

  .nav-item.is-active .nav-access-tag {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.14);
  }

  .local-badge,
  .app-version {
    color: var(--ink-muted);
    border-color: var(--line);
    font-size: 11px;
  }

  @media (min-width: 821px) {
    .sidebar .local-badge {
      width: 100%;
      margin-top: auto;
      padding-top: 14px;
      border-top: 1px solid var(--line);
    }

    .sidebar .app-version {
      width: 100%;
      margin: 10px 0 0;
    }
  }

  .status-dot {
    width: 8px;
    height: 8px;
  }

  .main-stage {
    margin-left: 254px;
    padding: 22px clamp(22px, 3vw, 46px) 58px;
  }

  .topbar {
    min-height: 106px;
    align-items: center;
    margin-bottom: 18px;
    padding: 20px 22px;
    border: 1px solid rgba(203, 213, 235, 0.9);
    border-radius: var(--radius-panel);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(12px);
  }

  .topbar > :first-child {
    flex: 1 1 270px;
    min-width: 250px;
  }

  .eyebrow {
    margin-bottom: 6px;
    color: var(--blue);
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 760;
    line-height: 1.4;
    letter-spacing: 0.05em;
  }

  .topbar h1 {
    color: var(--ink);
    font-family: var(--serif);
    font-size: var(--type-page-title);
    font-weight: 750;
    line-height: 1.16;
    letter-spacing: -0.025em;
  }

  .top-actions {
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
    min-width: 0;
  }

  .button,
  .icon-button,
  input,
  textarea,
  select {
    border-radius: var(--radius-control);
  }

  .button {
    min-height: 42px;
    padding-inline: 15px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: none;
    transition: transform 150ms ease, border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
  }

  .button:hover:not(:disabled) {
    transform: translateY(-1px);
  }

  .button-primary {
    color: #fff;
    border-color: var(--blue);
    background: linear-gradient(135deg, var(--blue) 0%, #4264d8 100%);
    box-shadow: 0 7px 16px rgba(47, 111, 228, 0.18);
  }

  .button-primary:hover:not(:disabled) {
    border-color: var(--blue-deep);
    background: linear-gradient(135deg, #2863d0 0%, #3856c4 100%);
    box-shadow: 0 9px 20px rgba(47, 111, 228, 0.25);
  }

  .policy-open-button,
  .policy-open-button.button-secondary {
    color: #fff;
    border-color: #245bc1;
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%);
    box-shadow:
      0 8px 18px rgba(47, 111, 228, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }

  .policy-open-button:hover:not(:disabled),
  .policy-open-button.button-secondary:hover:not(:disabled) {
    color: #fff;
    border-color: #173f96;
    background: linear-gradient(135deg, #2a66d4 0%, #173f96 100%);
    box-shadow:
      0 10px 22px rgba(31, 79, 184, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }

  .policy-open-button:focus-visible {
    outline-color: rgba(47, 111, 228, 0.36);
    box-shadow:
      0 0 0 4px rgba(47, 111, 228, 0.16),
      0 8px 18px rgba(47, 111, 228, 0.24);
  }

  .button-danger {
    color: #b42338;
    border-color: rgba(180, 35, 56, 0.32);
    background: #fff5f6;
  }

  .button-danger:hover:not(:disabled) {
    color: #8f1728;
    border-color: rgba(180, 35, 56, 0.5);
    background: #ffe9ec;
  }

  .button-secondary,
  .button-ghost,
  .icon-button {
    color: #34405f;
    border-color: #d9e1f1;
    background: #f8faff;
  }

  .button-secondary:hover:not(:disabled),
  .button-ghost:hover:not(:disabled),
  .icon-button:hover:not(:disabled) {
    color: var(--blue-deep);
    border-color: #b9caed;
    background: #eef4ff;
  }

  input,
  textarea,
  select {
    min-height: 43px;
    color: var(--ink);
    border-color: #d9e1f1;
    background: #fbfcff;
    font-size: 14px;
  }

  input:focus,
  textarea:focus,
  select:focus {
    border-color: var(--blue);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(47, 111, 228, 0.1);
  }

  .month-control span,
  .field > span,
  .field-label,
  .work-quick-entry label > span {
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 650;
  }

  .view.is-visible {
    animation: wzh-view-enter 220ms ease-out both;
  }

  @keyframes wzh-view-enter {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .result-gallery-heading,
  .role-intro,
  .panel,
  .work-kpi-heading,
  .work-quick-entry,
  .dashboard-intern-section {
    border: 1px solid rgba(203, 213, 235, 0.9);
    border-radius: var(--radius-panel);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--shadow-soft);
  }

  .result-gallery-heading {
    gap: 24px;
    margin-bottom: 16px;
    padding: 22px 24px;
  }

  .result-gallery-heading h2,
  .panel-heading h2,
  .settings-card h2,
  .work-kpi-heading h2,
  .directory-section-heading h3,
  .dashboard-intern-heading h2 {
    color: var(--ink);
    font-family: var(--serif);
    font-weight: 750;
    letter-spacing: -0.02em;
  }

  .result-gallery-heading h2 {
    font-size: var(--type-display);
  }

  .result-gallery-heading p,
  .panel-heading p,
  .settings-card > p,
  .work-kpi-heading p,
  .work-quick-entry-heading p,
  .directory-section-heading p,
  .dashboard-intern-heading p {
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.6;
  }

  .result-gallery-meta {
    min-width: 180px;
    padding: 13px 16px 14px;
    border: 1px solid #d7e2f8;
    border-left: 4px solid var(--blue);
    border-radius: 7px;
    background: linear-gradient(135deg, #f3f7ff 0%, #e9f0ff 100%);
  }

  #result-month-label {
    color: var(--blue-deep);
    font-size: 17px;
  }

  #result-complete-count {
    color: var(--blue);
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 800;
  }

  .result-card-grid,
  .employee-grid {
    gap: 14px;
  }

  .performance-id-card {
    border: 1px solid #dce3f2;
    border-top: 0;
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 9px 26px rgba(45, 62, 115, 0.09);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  }

  .performance-id-card:hover {
    border-color: #c5d3ef;
    box-shadow: 0 12px 30px rgba(45, 62, 115, 0.13);
    transform: translateY(-1px);
  }

  .id-card-topline {
    min-height: 43px;
    padding: 12px 14px;
    color: #fff;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    background: linear-gradient(110deg, var(--blue) 0%, #4964d9 100%);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.035em;
  }

  .id-card-topline b {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 550;
  }

  .id-photo {
    box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(47, 111, 228, 0.24), 0 8px 20px rgba(45, 65, 126, 0.14);
  }

  .id-photo-label {
    min-height: 24px;
    padding: 5px 8px;
    color: #fff;
    border: 0;
    background: var(--blue);
    font-size: 10px;
    font-weight: 700;
  }

  .id-person-copy > small,
  .id-result-stack span,
  .id-card-footer,
  .id-kpi-strip span,
  .id-kpi-strip p,
  .employee-file-number,
  .management-order small,
  .management-capabilities dt,
  .employee-capability-grid dt,
  .intern-capabilities dt,
  .employee-card-role span,
  .directory-index,
  .dashboard-intern-eyebrow,
  .work-kpi-heading .eyebrow {
    font-size: 11px;
    line-height: 1.4;
  }

  .id-person-copy > small {
    color: #8a94ad;
    letter-spacing: 0.04em;
  }

  .id-person-copy h3 {
    margin: 7px 0 5px;
    color: var(--ink);
    font-family: var(--serif);
    font-size: 23px;
    font-weight: 760;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  .id-person-copy p {
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.5;
  }

  .id-result-stack {
    border-color: #dbe2f2;
    background: #f7f9fe;
    box-shadow: none;
  }

  .id-result-stack > div {
    border-color: #e3e8f4;
    background: transparent;
  }

  .id-result-stack > div > span:first-child {
    color: #707b98;
    font-size: 11px;
  }

  .id-final-result {
    background: linear-gradient(135deg, #5543cf 0%, var(--violet) 100%) !important;
    box-shadow: inset 4px 0 0 rgba(255, 255, 255, 0.25);
  }

  .id-kpi-strip {
    border: 1px solid #e1e7f4;
    border-left: 3px solid var(--blue);
    border-radius: 5px;
    background: #f7f9fe;
  }

  .id-kpi-strip strong,
  .id-kpi-strip .text-button,
  .id-card-footer b {
    color: var(--blue-deep);
  }

  .id-card-footer {
    color: #8a94ad;
    border-top-color: #e5eaf4;
  }

  .role-intro {
    color: var(--ink);
    border-top: 4px solid var(--blue);
    background: linear-gradient(135deg, #f7faff 0%, #eaf1ff 100%);
  }

  .role-intro-secondary {
    border-top-color: var(--violet);
    background: linear-gradient(135deg, #faf9ff 0%, #efecff 100%);
  }

  .role-intro::after {
    opacity: 0.08;
  }

  .role-intro .eyebrow,
  .role-intro h2,
  .role-intro p,
  .role-intro p b {
    color: inherit;
  }

  .role-intro h2 {
    font-size: clamp(25px, 2.2vw, 31px);
  }

  .role-intro p {
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.7;
  }

  .role-formula {
    color: var(--blue-deep);
    border-color: #cddcf7;
    background: rgba(255, 255, 255, 0.74);
  }

  .role-formula span,
  .role-formula small {
    color: var(--ink-soft);
    font-size: 11px;
  }

  .role-formula strong {
    color: inherit;
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 800;
  }

  .panel {
    padding: 22px;
  }

  .panel-heading h2,
  .settings-card h2 {
    font-size: var(--type-section-title);
  }

  .queue-count,
  .status-pill {
    color: var(--blue-deep);
    border-color: #d5e0f5;
    background: #eff5ff;
    font-size: 12px;
    font-weight: 700;
  }

  .table-wrap {
    border: 1px solid #e0e6f2;
    border-radius: 6px;
    background: #fff;
  }

  .data-table {
    font-size: 13px;
  }

  .data-table th,
  .role-table th {
    color: #6b7691;
    border-bottom-color: #dce4f2;
    background: #f5f8fe;
    font-size: 12px;
    font-weight: 720;
  }

  .data-table td,
  .role-table td {
    color: var(--ink);
    border-bottom-color: #e7ebf4;
    font-size: 13px;
  }

  .data-table tbody tr:hover td {
    background: #f8faff;
  }

  .person-cell strong {
    font-size: 14px;
  }

  .person-cell small,
  .text-button,
  .role-table .text-button {
    font-size: 12px;
  }

  .text-button {
    color: var(--blue-deep);
    font-weight: 700;
  }

  .management-directory,
  .ordinary-directory,
  .intern-directory {
    border-color: #dfe5f2;
    background: #f8faff;
    box-shadow: none;
  }

  .management-card,
  .employee-card,
  .intern-card {
    border-color: #dfe5f2;
    background: #fff;
    box-shadow: 0 7px 20px rgba(45, 62, 115, 0.07);
  }

  .management-card::before,
  .employee-card::before {
    background: var(--blue);
  }

  .management-admin {
    border-color: #d3dcf3;
    background: linear-gradient(135deg, #edf4ff 0%, #fff 58%);
  }

  .management-admin::before {
    background: linear-gradient(180deg, var(--blue-deep), var(--blue));
  }

  .management-role-tag,
  .employee-card-role span {
    color: var(--blue-deep);
    background: #edf4ff;
    font-size: 11px;
  }

  .management-admin .management-role-tag {
    background: var(--blue-deep);
  }

  .management-copy strong,
  .employee-card-copy strong,
  .intern-person-copy strong {
    color: var(--ink);
    font-family: var(--serif);
    font-size: 21px;
    font-weight: 760;
  }

  .management-copy small,
  .employee-card-role,
  .intern-person-copy small {
    color: var(--ink-soft);
    font-size: 12px;
  }

  .management-capabilities dd,
  .employee-capability-grid dd,
  .intern-capabilities dd,
  .intern-dates dd {
    color: #2b3652;
    font-size: 12px;
    line-height: 1.45;
  }

  .management-capabilities > div,
  .employee-capability-grid > div,
  .intern-capabilities > div,
  .intern-dates > div {
    border-color: #dfe6f2;
    background: #f7f9fe;
  }

  .management-photo,
  .employee-card-photo,
  .intern-card-photo,
  .dashboard-intern-photo {
    box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(47, 111, 228, 0.2), 0 7px 18px rgba(45, 62, 115, 0.12);
  }

  .intern-directory,
  .dashboard-intern-section {
    border-color: rgba(191, 122, 24, 0.28);
    background: linear-gradient(135deg, #fffdf7 0%, #fff8ea 100%);
  }

  .intern-role-tag,
  .dashboard-intern-status {
    color: #85560f;
    border-color: #efd9b2;
    background: #fff2d6;
  }

  .work-kpi-heading,
  .work-quick-entry {
    padding: 22px;
  }

  .work-quick-entry-launcher {
    border-color: #dfe5f2;
    border-left-color: var(--blue);
    background: #fff;
  }

  .work-kpi-heading h2,
  .work-quick-entry-heading h3 {
    font-family: var(--serif);
    font-weight: 760;
  }

  .work-quick-entry {
    border-left-color: var(--blue);
    background: #fff;
  }

  .settings-card,
  .policy-boundary {
    border-color: #dfe5f2;
    background: #fff;
  }

  .danger-card {
    border-color: rgba(221, 83, 100, 0.28);
    background: #fffafb;
  }

  .modal::backdrop {
    background: rgba(22, 32, 59, 0.42);
    backdrop-filter: blur(6px);
  }

  .modal-card {
    color: var(--ink);
    border: 1px solid rgba(203, 213, 235, 0.92);
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(29, 42, 85, 0.28);
  }

  .modal .sticky-heading .icon-button,
  dialog .modal-heading .icon-button {
    color: #34405f;
    border-color: #d9e1f1;
    background: #f8faff;
  }

  dialog .icon-button[aria-label^="关闭"] {
    position: relative;
    display: grid;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    place-items: center;
    color: #34405f;
    border: 1px solid #d9e1f1;
    border-radius: var(--radius-control);
    background: #f8faff;
    font-size: 0;
    line-height: 0;
  }

  dialog .icon-button[aria-label^="关闭"]::before,
  dialog .icon-button[aria-label^="关闭"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
  }

  dialog .icon-button[aria-label^="关闭"]::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  dialog .icon-button[aria-label^="关闭"]::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  dialog .icon-button[aria-label^="关闭"]:hover:not(:disabled) {
    color: var(--blue-deep);
    border-color: #b9caed;
    background: #eef4ff;
  }

  /* 弹窗关闭控件统一贴近标题栏右上角，标题区域为其保留安全空间。 */
  dialog .modal-heading,
  dialog .policy-dialog-heading {
    position: relative;
    padding-right: 64px;
  }

  dialog .modal-heading .icon-button[aria-label^="关闭"],
  dialog .policy-dialog-heading .icon-button[aria-label^="关闭"] {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
    margin: 0;
  }

  .modal-heading h2,
  .policy-dialog-heading h2,
  .assessment-card h2 {
    color: var(--ink);
    font-family: var(--serif);
    font-weight: 760;
    letter-spacing: -0.02em;
  }

  /* 工作明细以同一正文基线呈现，层级主要依靠字重与颜色区分。 */
  .work-detail-modal-card {
    font-size: var(--type-control);
  }

  .work-detail-modal-card .modal-heading .eyebrow {
    font-size: var(--type-small);
  }

  .work-detail-modal-card .modal-heading p,
  .work-detail-modal-card .work-detail-overview span,
  .work-detail-modal-card .work-detail-overview strong,
  .work-detail-modal-card .work-detail-overview p,
  .work-detail-modal-card .work-detail-table,
  .work-detail-modal-card .work-detail-table thead th,
  .work-detail-modal-card .work-detail-table tbody th[scope="row"],
  .work-detail-modal-card .work-detail-task,
  .work-detail-modal-card .work-detail-quantity,
  .work-detail-modal-card .work-detail-specific span,
  .work-detail-modal-card .work-detail-specific b,
  .work-detail-modal-card .modal-actions > span,
  .work-detail-modal-card .modal-actions .button {
    font-size: var(--type-control);
    line-height: 1.55;
  }

  .work-detail-modal-card .work-detail-overview strong,
  .work-detail-modal-card .work-detail-table thead th,
  .work-detail-modal-card .work-detail-table tbody th[scope="row"],
  .work-detail-modal-card .work-detail-task,
  .work-detail-modal-card .work-detail-quantity,
  .work-detail-modal-card .work-detail-specific b {
    font-weight: 700;
  }

  .work-detail-modal-card .work-detail-specific span {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  @media (max-width: 820px) {
    .work-detail-modal-card .work-detail-table tbody th[scope="row"]::before,
    .work-detail-modal-card .work-detail-table tbody td::before {
      font-size: var(--type-control);
      line-height: 1.55;
    }
  }

  .sticky-heading,
  .sticky-actions,
  .policy-dialog-heading,
  .policy-dialog-footer {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
  }

  .sticky-heading {
    color: var(--ink);
    border-bottom: 1px solid var(--line);
  }

  .sticky-heading .eyebrow {
    color: var(--blue);
  }

  .sticky-heading p {
    color: var(--ink-soft);
  }

  .sticky-heading .live-score {
    min-width: 124px;
    padding: 9px 11px;
    border: 1px solid #d7e2f8;
    border-radius: 6px;
    background: #f3f7ff;
  }

  .sticky-heading .live-score span {
    color: var(--ink-muted);
  }

  .sticky-heading .live-score strong,
  .sticky-heading .live-score em {
    color: var(--blue-deep);
  }

  .result-strip .result-main {
    color: #fff;
    background: linear-gradient(135deg, #5543cf 0%, var(--violet) 100%);
  }

  .result-strip .result-main span {
    color: rgba(255, 255, 255, 0.72);
  }

  .level-choice.is-selected {
    color: #102a56;
    border-color: var(--blue);
    background: #eef4ff;
    box-shadow: 0 0 0 3px rgba(47, 111, 228, 0.1);
  }

  .level-choice.is-selected strong {
    color: #102a56;
  }

  .level-choice.is-selected small {
    color: #245fbd;
  }

  .level-choice.is-selected p {
    color: #465974;
  }

  .level-choice.is-selected::after {
    color: #174d9f;
    border: 1px solid #b7cff5;
    background: #d9e8ff;
  }

  .employee-salary-fields {
    border-color: #d7e1f5;
    border-left-color: var(--blue);
    background: #f6f9ff;
  }

  .employee-salary-card {
    border-color: #d9e3f6;
    border-left-color: var(--blue);
    background: #f6f9ff;
  }

  .employee-salary-card-heading strong,
  .employee-salary-total strong {
    color: var(--blue-deep);
  }

  @media (max-width: 1180px) {
    .main-stage {
      padding-inline: 22px;
    }

    .result-card-grid {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 1320px) {
    .topbar {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: start;
    }

    .topbar > :first-child {
      min-width: 0;
    }

    .top-actions {
      width: 100%;
      justify-content: flex-start;
    }
  }

  @media (max-width: 820px) {
    html {
      scroll-padding-top: 118px;
    }

    .sidebar {
      inset: 0;
      width: auto;
      padding: 10px 12px 9px;
      border-width: 0 0 1px;
      border-radius: 0 0 8px 8px;
      background: rgba(255, 255, 255, 0.96);
      box-shadow: 0 9px 24px rgba(43, 61, 117, 0.12);
    }

    .company-logo {
      width: 102px;
    }

    .main-stage {
      margin-left: 0;
      padding: 11px 10px calc(36px + env(safe-area-inset-bottom));
    }

    .nav-item {
      min-height: 44px;
      transform: none !important;
    }

    .topbar {
      min-height: 0;
      margin-bottom: 11px;
      padding: 15px;
    }
  }

  @media (max-width: 620px) {
    :root {
      --type-page-title: 27px;
      --type-section-title: 22px;
      --type-card-title: 21px;
    }

    body {
      font-size: 14px;
    }

    .main-stage {
      padding-inline: 8px;
    }

    .topbar {
      gap: 13px;
      padding: 14px 13px;
    }

    .topbar h1 {
      font-size: var(--type-page-title);
    }

    .top-actions {
      gap: 7px;
    }

    .button {
      min-height: 44px;
      padding-inline: 12px;
    }

    .result-gallery-heading,
    .panel,
    .work-kpi-heading,
    .work-quick-entry-launcher,
    .work-quick-entry {
      padding: 16px 14px;
    }

    .result-gallery-heading {
      gap: 14px;
    }

    .result-gallery-meta {
      min-width: 0;
      width: 100%;
    }

    .performance-id-card {
      box-shadow: 0 7px 20px rgba(45, 62, 115, 0.08);
      transform: none !important;
    }

    .id-card-topline {
      padding: 11px 12px;
    }

    .id-person-copy h3 {
      font-size: 21px;
    }

    .id-result-stack > div > span:first-child,
    .id-result-stack span,
    .id-card-footer,
    .id-kpi-strip span,
    .id-kpi-strip p {
      font-size: 11px;
    }

    .role-intro {
      padding: 22px 18px;
    }

    .role-intro h2 {
      font-size: 26px;
    }

    .role-intro p {
      font-size: 13px;
    }

    .management-directory,
    .ordinary-directory,
    .intern-directory,
    .dashboard-intern-section {
      padding: 13px;
    }

    .management-copy strong,
    .employee-card-copy strong,
    .intern-person-copy strong {
      font-size: 20px;
    }

    .modal-card {
      border-radius: 8px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

@media print {
  .sidebar,
  .topbar {
    box-shadow: none !important;
  }
}


.attendance-heading {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 24px;
  margin-bottom: 14px;
  padding: 24px 26px;
  border: 1px solid #dce4f2;
  border-top: 4px solid #2f6fe4;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(45, 62, 115, 0.08);
}

.attendance-heading h2 {
  margin: 5px 0 7px;
  color: #101a3a;
  font-size: clamp(24px, 2.5vw, 32px);
  line-height: 1.2;
}

.attendance-heading p {
  max-width: 760px;
  margin: 0;
  color: #68738f;
  font-size: 14px;
  line-height: 1.7;
}

.attendance-panel {
  padding: 20px;
  border: 1px solid #dce4f2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(45, 62, 115, 0.07);
}

.attendance-guidance {
  display: grid;
  grid-template-columns: minmax(230px, .7fr) minmax(0, 1.3fr);
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border-left: 3px solid #2f6fe4;
  background: #f4f7fe;
}

.attendance-guidance div {
  display: grid;
  gap: 3px;
}

.attendance-guidance strong {
  color: #183e8b;
  font-size: 14px;
}

.attendance-guidance span,
.attendance-guidance p {
  margin: 0;
  color: #68738f;
  font-size: 12px;
  line-height: 1.6;
}

.attendance-table-wrap {
  overflow-x: auto;
  border: 1px solid #e0e6f2;
  border-radius: 6px;
}

.attendance-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  color: #17213f;
  font-size: 12px;
}

.attendance-table th {
  padding: 11px 8px;
  color: #68738f;
  border-bottom: 1px solid #dce4f2;
  background: #f5f8fe;
  font-size: 11px;
  font-weight: 720;
  text-align: left;
  white-space: nowrap;
}

.attendance-table td {
  padding: 9px 7px;
  border-bottom: 1px solid #e8edf6;
  background: #fff;
  vertical-align: middle;
}

.attendance-table tbody tr:last-child td {
  border-bottom: 0;
}

.attendance-table tbody tr:hover td {
  background: #f9fbff;
}

.attendance-table td:first-child {
  min-width: 188px;
  border-left: 3px solid #d7e2f8;
}

.attendance-table tr.is-recorded td:first-child {
  border-left-color: #2f6fe4;
}

.attendance-table tr.is-management td {
  background: #f3f7ff;
}

.attendance-table tr.is-management td:first-child {
  border-left-color: #173f91;
}

.attendance-intern-section {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #e6dcc7;
}

.attendance-intern-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
  padding: 12px 14px;
  border-left: 3px solid #c8891b;
  background: #fff9ed;
}

.attendance-intern-heading div {
  display: grid;
  gap: 2px;
}

.attendance-intern-heading span {
  color: #8b5700;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .08em;
}

.attendance-intern-heading strong {
  color: #47371e;
  font-size: 14px;
}

.attendance-intern-heading small {
  color: #8b641f;
  font-size: 11px;
  font-weight: 720;
}

.attendance-table tr.is-intern td {
  background: #fffdf8;
}

.attendance-table tr.is-intern td:first-child {
  border-left-color: #c8891b;
}

.attendance-subject-kind.is-intern-kind {
  color: #8b5700;
  border-color: #ead3a4;
  background: #fff5dc;
}

.attendance-table tr.is-parttime td {
  background: #f7fcfb;
}

.attendance-table tr.is-parttime td:first-child {
  border-left-color: #117c74;
}

.attendance-subject-kind.is-parttime-kind {
  color: #075e59;
  border-color: #a9ddd7;
  background: #e1f5f2;
}

.attendance-subject-kind {
  display: inline-flex;
  margin: 5px 5px 0 0;
  padding: 3px 6px;
  color: #1d4f9d;
  border: 1px solid #c8d9f5;
  border-radius: 4px;
  background: #e7efff;
  font-size: 10px;
  font-weight: 750;
}

.attendance-table input {
  width: 72px;
  min-height: 38px;
  padding: 8px;
  color: #17213f;
  border: 1px solid #d9e1f0;
  border-radius: 5px;
  background: #fbfcff;
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.attendance-table input:focus {
  outline: 2px solid rgba(47, 111, 228, 0.18);
  border-color: #2f6fe4;
  background: #fff;
}

.is-observer-session .attendance-table input[readonly] {
  color: #183153;
  background: #f2f6fc;
  border-color: #d7e1ef;
  cursor: default;
}

.is-observer-session .attendance-table input[readonly]:focus {
  border-color: #b9c8dc;
  box-shadow: none;
}

.attendance-table .attendance-note-input {
  width: 180px;
}

.attendance-row-state {
  display: inline-flex;
  margin-top: 5px;
  padding: 3px 6px;
  color: #75809b;
  border: 1px solid #dce3f0;
  border-radius: 4px;
  background: #f6f8fc;
  font-size: 10px;
  font-weight: 700;
}

.attendance-row-state.is-normal {
  color: #157b57;
  border-color: #c9eadc;
  background: #ecf9f3;
}

.attendance-row-state.is-warning {
  color: #9b5e00;
  border-color: #f0d8a9;
  background: #fff7e7;
}

.attendance-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 16px;
}

.attendance-actions span {
  color: #78839c;
  font-size: 11px;
}

.attendance-reference-chip {
  display: grid;
  min-width: 150px;
  max-width: 210px;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid #dce3f0;
  border-radius: 5px;
  background: #f6f8fc;
}

.attendance-reference-chip strong {
  color: #5d6882;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.attendance-reference-chip small {
  color: #8c96aa;
  font-size: 10px;
}

.attendance-reference-chip.is-normal {
  border-color: #c8e9dc;
  background: #edf9f4;
}

.attendance-reference-chip.is-normal strong {
  color: #176b50;
}

.attendance-reference-chip.is-warning {
  border-color: #efd39d;
  background: #fff7e7;
}

.attendance-reference-chip.is-warning strong {
  color: #925800;
}

.assessment-attendance-reference {
  display: grid;
  grid-template-columns: minmax(180px, .6fr) minmax(0, 1.4fr);
  align-items: center;
  gap: 18px;
  margin: 2px 0 20px;
  padding: 14px 16px;
  border: 1px solid #dce4f2;
  border-left: 3px solid #2f6fe4;
  border-radius: 6px;
  background: #f5f8fe;
}

.assessment-attendance-reference div {
  display: grid;
  gap: 3px;
}

.assessment-attendance-reference span {
  color: #71809e;
  font-size: 11px;
}

.assessment-attendance-reference strong {
  color: #183e8b;
  font-size: 14px;
  line-height: 1.45;
}

.assessment-attendance-reference p {
  margin: 0;
  color: #68738f;
  font-size: 12px;
  line-height: 1.6;
}

.assessment-attendance-reference.is-warning {
  border-color: #efd39d;
  border-left-color: #d98500;
  background: #fff8ea;
}

.assessment-attendance-reference.is-warning strong {
  color: #8e5700;
}

@media (max-width: 760px) {
  .attendance-heading {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px;
  }

  .attendance-panel {
    padding: 12px;
  }

  .attendance-guidance,
  .assessment-attendance-reference {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .attendance-table-wrap {
    overflow: visible;
    border: 0;
  }

  .attendance-table,
  .attendance-table tbody {
    display: block;
    min-width: 0;
  }

  .attendance-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .attendance-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 12px;
    padding: 13px;
    border: 1px solid #dfe6f3;
    border-top: 3px solid #d7e2f8;
    border-radius: 6px;
    background: #fff;
  }

  .attendance-table tr.is-recorded {
    border-top-color: #2f6fe4;
  }

  .attendance-table tr.is-management {
    border-top-color: #173f91;
    background: #f3f7ff;
  }

  .attendance-table tr.is-intern {
    border-top-color: #c8891b;
    background: #fffdf8;
  }

  .attendance-intern-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .attendance-table td,
  .attendance-table td:first-child {
    display: grid;
    min-width: 0;
    gap: 5px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .attendance-table td:first-child {
    grid-column: 1 / -1;
  }

  .attendance-table td:not(:first-child)::before {
    content: attr(data-label);
    color: #75809a;
    font-size: 10px;
    font-weight: 700;
  }

  .attendance-table input,
  .attendance-table .attendance-note-input {
    width: 100%;
  }

  .attendance-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .attendance-actions .button {
    width: 100%;
  }

  .attendance-reference-chip {
    min-width: 135px;
    max-width: 180px;
  }
}


.employee-private-card {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding: 13px 14px;
  color: #19283a;
  border: 1px solid rgba(32, 91, 159, 0.22);
  border-left: 3px solid #205b9f;
  border-radius: 5px;
  background: linear-gradient(135deg, #f4f8fc 0%, #eaf2fa 100%);
}

.employee-private-card.is-loading {
  color: #6f7f91;
  border-left-color: #96a5b6;
  background: #f1f4f7;
}

.employee-private-card-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.employee-private-card-heading span,
.employee-private-card dt {
  color: #6e8093;
  font-size: 9px;
  letter-spacing: 0.04em;
}

.employee-private-card-heading strong {
  color: #205b9f;
  font-size: 10px;
}

.employee-private-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin: 0;
}

.employee-private-card dl > div {
  min-width: 0;
  padding-top: 8px;
  border-top: 1px solid rgba(32, 91, 159, 0.13);
}

.employee-private-card dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  color: #19283a;
  font-size: 11px;
  font-weight: 750;
}

.employee-private-fields {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(32, 91, 159, 0.22);
  border-left: 4px solid #205b9f;
  border-radius: 6px;
  background: linear-gradient(135deg, #f7fafc, #eaf2fa);
}

.employee-private-fields[hidden] {
  display: none !important;
}

.employee-private-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.employee-private-heading h3 {
  margin: 4px 0 0;
  color: #14263a;
  font-size: 18px;
}

.employee-private-heading p {
  max-width: 530px;
  margin: 6px 0 0;
  color: #66788b;
  font-size: 10px;
  line-height: 1.6;
}

.employee-private-lock {
  flex: 0 0 auto;
  padding: 7px 9px;
  color: #205b9f;
  border: 1px solid rgba(32, 91, 159, 0.22);
  border-radius: 4px;
  background: #fff;
  font-size: 9px;
  font-weight: 750;
}

.employee-private-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.employee-private-inputs .field {
  min-width: 0;
  margin: 0;
}

.employee-private-inputs .field small {
  color: #a33a32;
  font-size: 9px;
  line-height: 1.55;
}

.employee-private-wide {
  grid-column: 1 / -1;
}

.employee-private-security {
  display: block;
  margin-top: 10px;
  color: #66788b;
  font-size: 9px;
  line-height: 1.5;
}

@media (max-width: 520px) {
  .employee-private-card dl,
  .employee-private-inputs {
    grid-template-columns: 1fr;
  }

  .employee-private-wide {
    grid-column: auto;
  }

  .employee-private-heading {
    display: grid;
  }

  .employee-private-lock {
    justify-self: start;
  }
}

@media print {
  .employee-private-card,
  .employee-private-fields {
    display: none !important;
  }
}


body.auth-required {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background:
    radial-gradient(circle at 78% 18%, rgba(47, 111, 228, .16), transparent 34%),
    linear-gradient(135deg, #eaf1ff 0%, #f7f9ff 54%, #e4edff 100%);
}

html:has(body.auth-required) {
  overflow: hidden;
  scrollbar-width: none;
  overscroll-behavior: none;
}

html:has(body.auth-required)::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

body.auth-required .app-shell {
  visibility: hidden;
}

.auth-password-change {
  min-height: 28px;
  margin-left: 4px;
  padding: 0 9px;
  color: #205dce;
  border: 1px solid #cddcff;
  border-radius: 4px;
  background: #fff;
  font: inherit;
  cursor: pointer;
}

.auth-password-change:hover {
  color: #fff;
  border-color: #2f6fe4;
  background: #2f6fe4;
}

.auth-gate {
  width: min(1080px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 38px 100px rgba(31, 61, 128, .22);
  overflow: hidden;
}

/*
 * Safari can keep an author-styled <dialog> in normal document flow after
 * close(). Chromium's user-agent sheet hides it, but WebKit needs an explicit
 * closed-state rule whenever the dialog itself declares display/layout styles.
 */
dialog:not([open]) {
  display: none !important;
}

.auth-gate[open] {
  display: block;
}

.auth-gate-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(430px, 470px);
  align-items: stretch;
  width: 100%;
  height: min(780px, calc(100dvh - 32px));
}

.auth-gate::backdrop {
  background:
    radial-gradient(circle at 78% 22%, rgba(47, 111, 228, .28), transparent 32%),
    linear-gradient(135deg, #e7efff 0%, #f7f9ff 54%, #dce8ff 100%);
}

.auth-gate .auth-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 28px 36px 22px;
  border: 1px solid rgba(155, 177, 218, .55);
  border-left: 0;
  border-top: 5px solid #2f6fe4;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .99), rgba(249, 251, 255, .98));
  box-shadow: none;
  overflow-y: clip;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.auth-gate .auth-card::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.auth-gate .auth-card::before {
  display: none;
}

.auth-video-panel {
  position: relative;
  min-width: 0;
  /*
   * Do not use percentage min-height here. Safari resolves 100% against the
   * modal containing block while the grid row itself is still auto-sized,
   * creating a height cycle that stretches the login dialog to the viewport.
   * The form now defines the row height and the video simply stretches to it.
   */
  min-height: 0;
  align-self: stretch;
  overflow: hidden;
  border: 1px solid rgba(155, 177, 218, .55);
  border-right: 0;
  border-top: 5px solid #2f6fe4;
  background: #0c1a33 url("./assets/media/auth-entry-poster.jpg?v=1.1.5") center / cover no-repeat;
  isolation: isolate;
}

.auth-video-panel video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: transparent;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e9f6;
}

.auth-brand img {
  width: 116px;
  height: auto;
}

.auth-brand div {
  display: grid;
  gap: 4px;
  padding-left: 14px;
  border-left: 1px solid #d5dfef;
}

.auth-brand span {
  color: #5c6b89;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .09em;
}

.auth-brand strong {
  color: #142043;
  font-size: 13px;
}

.auth-field {
  margin-top: 11px;
}

.auth-field input,
.auth-field select {
  min-height: 46px;
  padding-inline: 14px;
  font-size: 15px;
  border-color: #c7d5eb;
  background: #f8faff;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.auth-field input:hover,
.auth-field select:hover {
  border-color: #a9bee3;
  background: #fff;
}

.auth-field input:focus,
.auth-field select:focus {
  border-color: #2f6fe4;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(47, 111, 228, .13);
  outline: none;
}

.auth-field select {
  width: 100%;
  border: 1px solid #cbd8ee;
  border-radius: 4px;
  color: #172543;
  background: #f8faff;
  font-weight: 700;
}

.auth-gate .auth-mode-note {
  margin-top: 12px;
  padding: 9px 12px;
  border-left: 3px solid #2f6fe4;
  border-radius: 4px;
  background: #f1f5fd;
  color: #53627e;
  font-size: 12px;
  line-height: 1.65;
}

.auth-submit {
  width: 100%;
  min-height: 46px;
  margin-top: auto;
  font-size: 14px;
  border-color: #2f6fe4;
  background: linear-gradient(135deg, #3477ea, #285fce);
  box-shadow: 0 10px 22px rgba(47, 111, 228, .22);
}

.auth-footer-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid #e5ebf5;
}

.auth-footer {
  display: block;
  margin: 0;
  color: #66728a;
  font-size: 10px;
  text-align: center;
}

.auth-admin-entry {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #7f899b;
  font: inherit;
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}

.auth-admin-entry svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
}

.auth-admin-entry:hover,
.auth-admin-entry:focus-visible {
  border-bottom-color: currentColor;
  color: #526681;
  outline: none;
}

.auth-admin-entry.is-current {
  color: #7d6334;
}

.auth-role-switcher {
  display: grid;
  gap: 7px;
  margin: 0 26px 13px;
}

.auth-role-switcher-label {
  color: #697790;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .08em;
}

.auth-role-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  border: 1px solid #dce5f3;
  border-radius: 8px;
  background: #f0f4fa;
  box-shadow: inset 0 1px 2px rgba(25, 48, 86, .04);
}

.auth-role-option {
  display: grid;
  place-items: center;
  gap: 2px;
  min-width: 0;
  min-height: 48px;
  padding: 7px 5px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #60708a;
  font: inherit;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

.auth-role-option span {
  overflow: hidden;
  max-width: 100%;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-role-option small {
  color: #8a97aa;
  font-size: 8px;
  line-height: 1.1;
}

.auth-role-option:hover {
  color: #264d89;
  background: rgba(255, 255, 255, .7);
}

.auth-role-option:focus-visible {
  outline: 2px solid rgba(47, 111, 228, .42);
  outline-offset: 2px;
}

.auth-role-option:active {
  transform: translateY(1px);
}

.auth-role-option.is-active {
  border-color: #cbdaf1;
  background: #fff;
  color: #174fbb;
  box-shadow: 0 3px 9px rgba(29, 68, 132, .12);
}

.auth-role-option.is-active small {
  color: #5173a8;
}

.auth-mode-identity {
  display: none;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  padding: 7px 10px;
  border: 1px solid rgba(192, 145, 54, .34);
  border-radius: 4px;
  background: #fff7e5;
  color: #8d6115;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
}

.auth-mode-identity.is-visible {
  display: inline-flex;
}

.auth-mode-identity svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.auth-gate.is-admin-mode {
  box-shadow: 0 42px 110px rgba(8, 22, 49, .32);
}

.auth-gate.is-leader-mode {
  box-shadow: 0 42px 110px rgba(15, 54, 126, .28);
}

.auth-gate.is-leader-mode::backdrop {
  background:
    radial-gradient(circle at 76% 20%, rgba(47, 111, 228, .16), transparent 29%),
    linear-gradient(135deg, #dce8f8 0%, #eef4fb 50%, #cbd9eb 100%);
}

.auth-gate.is-leader-mode .auth-card,
.auth-gate.is-leader-mode .auth-video-panel {
  border-top-color: #2f6fe4;
}

.auth-gate.is-leader-mode .auth-mode-identity {
  border-color: rgba(47, 111, 228, .28);
  background: #eef5ff;
  color: #245bb8;
}

.auth-gate.is-leader-mode .auth-mode-note {
  border-left-color: #2f6fe4;
  background: #eef5ff;
  color: #435a7d;
}

.auth-gate.is-leader-mode .auth-submit {
  border-color: #245fca;
  background: linear-gradient(135deg, #3477ea, #245fca);
}

.auth-gate.is-admin-mode::backdrop {
  background:
    radial-gradient(circle at 76% 20%, rgba(196, 147, 52, .18), transparent 29%),
    linear-gradient(135deg, #dce4f1 0%, #eef1f5 50%, #cbd5e4 100%);
}

.auth-gate.is-admin-mode .auth-card,
.auth-gate.is-admin-mode .auth-video-panel {
  border-top-color: #bd8b31;
}

.auth-gate.is-admin-mode .auth-card {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(248, 246, 240, .98));
}

.auth-gate.is-admin-mode .auth-video-panel video {
  filter: none;
}

.auth-gate.is-admin-mode .auth-brand {
  border-bottom-color: #ddd5c3;
}

.auth-gate.is-admin-mode .auth-brand div {
  border-left-color: #d7ccb4;
}

.auth-gate.is-admin-mode .auth-brand span {
  color: #9a6a18;
}

.auth-gate.is-admin-mode .auth-field input,
.auth-gate.is-admin-mode .auth-field select {
  border-color: #c9b98f;
  background: #fffdf8;
}

.auth-gate.is-admin-mode #auth-username[readonly] {
  color: #6f531e;
  background: #f4eddd;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 800;
  letter-spacing: .08em;
  cursor: default;
}

.auth-gate.is-admin-mode .auth-mode-note {
  border-left-color: #bd8b31;
  background: #f8f1e3;
  color: #6c5d42;
}

.auth-gate.is-admin-mode .auth-mode-note b {
  color: #8a6019;
}

.auth-gate.is-admin-mode .auth-submit {
  border-color: #172d51;
  background: #172d51;
  box-shadow: 0 10px 22px rgba(18, 43, 81, .24);
}

.auth-gate.is-admin-mode .auth-submit:hover,
.auth-gate.is-admin-mode .auth-submit:focus-visible {
  border-color: #bd8b31;
  background: #233d68;
}

.auth-forgot-password {
  display: block;
  width: max-content;
  margin: 4px 26px 2px auto;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: #2f6fe4;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.auth-forgot-password:hover,
.auth-forgot-password:focus-visible {
  color: #174fae;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-login-feedback {
  margin: 9px 26px 0;
  padding: 8px 10px;
  border-left: 3px solid #d74343;
  border-radius: 4px;
  background: #fff1f1;
  color: #9f2626;
  font-size: 12px;
  line-height: 1.5;
}

.auth-login-feedback[hidden] {
  display: none;
}

.auth-captcha {
  display: grid;
  gap: 8px;
  margin: 4px 0 14px;
  padding: 12px;
  border: 1px solid #d6e1ed;
  border-radius: 7px;
  background: #f7fafc;
}

.auth-captcha[hidden] {
  display: none;
}

.auth-captcha-heading,
.auth-captcha-control {
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-captcha-heading {
  justify-content: space-between;
  color: #34435f;
  font-size: 12px;
  font-weight: 800;
}

.auth-captcha-heading button {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 4px;
  border: 0;
  background: transparent;
  color: #2f6fe4;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.auth-captcha-heading button:hover,
.auth-captcha-heading button:focus-visible {
  color: #174fae;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-captcha-heading button:disabled {
  color: #8a96aa;
  cursor: wait;
}

.auth-captcha-control img {
  width: 132px;
  height: 46px;
  flex: 0 0 132px;
  border: 1px solid #c9d8e4;
  border-radius: 8px;
  background: #eef3f5;
}

.auth-captcha-control input {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #cbd8e5;
  border-radius: 6px;
  background: #fff;
  color: #172543;
  font: inherit;
  font-size: 14px;
  letter-spacing: .08em;
}

.auth-captcha-control input:focus {
  border-color: #2f6fe4;
  box-shadow: 0 0 0 3px rgba(47, 111, 228, .12);
  outline: none;
}

.auth-captcha > small {
  color: #748097;
  font-size: 12px;
  line-height: 1.5;
}

.auth-captcha > .auth-captcha-alternative {
  padding-top: 8px;
  border-top: 1px solid #dce6ef;
  color: #56637a;
}

.account-recovery-modal::backdrop {
  background: rgba(16, 30, 67, .62);
  backdrop-filter: blur(8px);
}

.account-recovery-card {
  width: min(500px, calc(100vw - 28px));
  border-top: 4px solid #2f6fe4;
}

.account-recovery-card > .button {
  width: 100%;
}

.account-recovery-note {
  margin: 2px 0 16px;
  color: #6d7890;
  font-size: 11px;
  line-height: 1.65;
}

.account-recovery-feedback {
  margin: 2px 0 14px;
  padding: 10px 12px;
  border-left: 3px solid #d74343;
  border-radius: 4px;
  background: #fff1f1;
  color: #9f2626;
  font-size: 12px;
  line-height: 1.55;
}

.account-recovery-feedback[data-tone="success"] {
  border-left-color: #2b8a5a;
  background: #edf9f2;
  color: #1f6b47;
}

.account-recovery-feedback[hidden] {
  display: none;
}

.password-change-modal::backdrop {
  background: rgba(16, 30, 67, .58);
  backdrop-filter: blur(8px);
}

.password-change-card {
  width: min(480px, calc(100vw - 28px));
  border-top: 4px solid #2f6fe4;
}

.password-account-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 13px 14px;
  border-left: 3px solid #2f6fe4;
  border-radius: 5px;
  background: #edf3ff;
}

.password-account-card span,
.password-rule {
  color: #6d7890;
  font-size: 11px;
}

.password-account-card strong {
  color: #205dce;
  font-size: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.password-rule {
  margin: 10px 0 18px;
  line-height: 1.6;
}

.password-change-feedback {
  margin: -6px 0 14px;
  padding: 10px 12px;
  border-left: 3px solid #d74343;
  border-radius: 4px;
  background: #fff1f1;
  color: #9f2626;
  font-size: 12px;
  line-height: 1.55;
}

.password-change-feedback[hidden] {
  display: none;
}

.password-change-card > .button {
  width: 100%;
}

.email-binding-modal::backdrop {
  background: rgba(16, 30, 67, .58);
  backdrop-filter: blur(8px);
}

.email-binding-card {
  width: min(520px, calc(100vw - 28px));
  border-top: 4px solid #2f6fe4;
}

.email-binding-status-card {
  display: grid;
  gap: 4px;
  margin-bottom: 16px;
  padding: 13px 14px;
  border-left: 3px solid #2f6fe4;
  border-radius: 5px;
  background: #edf3ff;
}

.email-binding-status-card span,
.email-binding-status-card small {
  color: #6d7890;
  font-size: 11px;
}

.email-binding-status-card strong {
  color: #174fae;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.email-binding-feedback {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-left: 3px solid #d74343;
  border-radius: 4px;
  background: #fff1f1;
  color: #9f2626;
  font-size: 12px;
  line-height: 1.55;
}

.email-binding-feedback[hidden] {
  display: none;
}

.email-binding-feedback[data-tone="success"] {
  border-left-color: #2b8a5a;
  background: #edf9f2;
  color: #1f6b47;
}

.email-binding-actions {
  justify-content: space-between;
}

.user-management-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 14px;
  padding: 24px 26px;
  border: 1px solid #dce4f2;
  border-top: 4px solid #2f6fe4;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(45, 62, 115, .08);
}

.user-management-heading h2 {
  margin: 5px 0 7px;
  color: #101a3a;
  font-size: clamp(24px, 2.5vw, 32px);
}

.user-management-heading p {
  margin: 0;
  color: #68738f;
  font-size: 13px;
}

.user-management-panel {
  padding: 20px;
  border: 1px solid #dce4f2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(45, 62, 115, .07);
}

.user-management-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.user-management-summary div {
  display: grid;
  gap: 5px;
  padding: 13px 15px;
  border-left: 3px solid #2f6fe4;
  border-radius: 5px;
  background: #f2f6fd;
}

.user-management-summary span {
  color: #76829b;
  font-size: 11px;
}

.user-management-summary strong {
  color: #1e5fd5;
  font-size: 22px;
}

.user-directory-classifier {
  display: grid;
  grid-template-columns: minmax(210px, .72fr) minmax(0, 1.65fr);
  align-items: end;
  gap: 18px;
  margin-bottom: 16px;
  padding: 15px 16px;
  border: 1px solid #d8e3f4;
  border-left: 4px solid #2f6fe4;
  border-radius: 6px;
  background: linear-gradient(110deg, #f7faff 0%, #eef4ff 100%);
}

.user-directory-classifier > div:first-child > span,
.user-directory-group-heading > div:first-child > span {
  display: block;
  color: #2f6fe4;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
}

.user-directory-classifier > div:first-child > strong {
  display: block;
  margin-top: 4px;
  color: #17213f;
  font-size: 16px;
}

.user-directory-classifier p {
  margin: 4px 0 0;
  color: #748099;
  font-size: 10px;
}

.user-directory-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}

.user-directory-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  padding: 8px 10px;
  color: #52617d;
  border: 1px solid #cbd8ee;
  border-radius: 5px;
  background: rgba(255, 255, 255, .88);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.user-directory-tab b {
  display: inline-grid;
  min-width: 24px;
  min-height: 24px;
  place-items: center;
  padding-inline: 5px;
  color: #245fc9;
  border-radius: 4px;
  background: #e8f0ff;
  font-size: 10px;
}

.user-directory-tab:hover {
  color: #1d55bd;
  border-color: #8fb2ee;
}

.user-directory-tab.is-active {
  color: #fff;
  border-color: #245ecf;
  background: linear-gradient(135deg, #3475e7 0%, #265fcf 100%);
  box-shadow: 0 7px 15px rgba(47, 111, 228, .2);
}

.user-directory-tab.is-active b {
  color: #194ba5;
  background: #fff;
}

.user-directory-groups {
  display: grid;
  gap: 14px;
}

.user-directory-group {
  overflow: hidden;
  border: 1px solid #dce5f2;
  border-top: 3px solid #2f6fe4;
  border-radius: 7px;
  background: #fff;
}

.user-directory-group.is-admin {
  border-top-color: #c29134;
}

.user-directory-group.is-observer {
  border-top-color: #168b88;
}

.user-directory-group.is-leader {
  border-top-color: #294d84;
}

.user-directory-group.is-assistant {
  border-top-color: #6d62c8;
}

.user-directory-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border-bottom: 1px solid #e1e8f2;
  background: #f8faff;
}

.user-directory-group.is-admin .user-directory-group-heading {
  background: linear-gradient(100deg, #fffaf0 0%, #f8faff 72%);
}

.user-directory-group.is-observer .user-directory-group-heading {
  background: linear-gradient(100deg, #eefaf9 0%, #f8faff 72%);
}

.user-directory-group.is-leader .user-directory-group-heading {
  background: linear-gradient(100deg, #edf3fc 0%, #f8faff 72%);
}

.user-directory-group.is-assistant .user-directory-group-heading {
  background: linear-gradient(100deg, #f3f1ff 0%, #f8faff 72%);
}

.user-directory-group.is-admin .user-directory-group-heading > div:first-child > span {
  color: #9b6d1a;
}

.user-directory-group.is-observer .user-directory-group-heading > div:first-child > span {
  color: #167c79;
}

.user-directory-group.is-leader .user-directory-group-heading > div:first-child > span {
  color: #294d84;
}

.user-directory-group.is-assistant .user-directory-group-heading > div:first-child > span {
  color: #5c51b5;
}

.user-directory-group .empty-state.is-compact {
  min-height: 92px;
  padding: 18px;
  border: 0;
  border-radius: 0;
  background: #fbfdfd;
}

.user-directory-group-heading h3 {
  margin: 3px 0 2px;
  color: #17213f;
  font-size: 18px;
}

.user-directory-group-heading p {
  margin: 0;
  color: #748099;
  font-size: 10px;
}

.department-operator-control {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: end;
  gap: 7px 9px;
  width: min(520px, 48vw);
  padding: 10px;
  border: 1px solid #bfd3f6;
  border-radius: 7px;
  background: #eef5ff;
}

.department-operator-control label {
  display: grid;
  gap: 5px;
}

.department-operator-control label > span {
  color: #245fcf;
  font-size: 10px;
  font-weight: 800;
}

.department-operator-control select {
  min-width: 0;
  height: 34px;
  padding: 0 9px;
  color: #223250;
  border: 1px solid #a9c2ec;
  border-radius: 5px;
  background: #fff;
  font: inherit;
}

.department-operator-control small {
  grid-column: 1 / -1;
  color: #5d6f8f;
  font-size: 9px;
  line-height: 1.5;
}

.user-directory-group-count {
  display: grid;
  grid-template-columns: auto auto;
  align-items: end;
  min-width: 96px;
  padding-left: 14px;
  border-left: 1px solid #d8e2f1;
}

.user-directory-group-count strong {
  color: #245fcf;
  font-size: 23px;
  line-height: 1;
}

.user-directory-group-count span,
.user-directory-group-count small {
  color: #748099;
  font-size: 9px;
}

.user-directory-group-count small {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.user-directory-group .user-table-wrap {
  border: 0;
  border-radius: 0;
}

.user-table-wrap {
  overflow-x: auto;
  border: 1px solid #dfe6f2;
  border-radius: 6px;
}

.user-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  font-size: 12px;
}

.user-table th,
.user-table td {
  padding: 12px 13px;
  border-bottom: 1px solid #e7ecf5;
  text-align: left;
  vertical-align: middle;
}

.user-table th {
  color: #68738f;
  background: #f5f8fe;
  font-size: 11px;
  white-space: nowrap;
}

.user-table tbody tr:last-child td {
  border-bottom: 0;
}

/* 部门主管使用独立的领导身份色；账号、密码状态仍沿用各自的语义色。 */
.user-table tbody tr.is-department-head {
  background: linear-gradient(90deg, #fff8e7 0%, #fffdf7 46%, #fff 100%);
  box-shadow: inset 4px 0 0 #c58a24;
}

.user-table tbody tr.is-department-head td {
  border-bottom-color: #eadbbd;
}

.user-table tbody tr.is-department-head .user-identity strong {
  color: #5f420d;
}

.user-table tbody tr.is-department-head .user-account-code {
  color: #8a5b0c;
}

.user-table tbody tr.is-parttime-user {
  background: linear-gradient(90deg, #eff9f7 0%, #fbfefd 50%, #fff 100%);
  box-shadow: inset 3px 0 0 #117c74;
}

.user-table tbody tr.is-parttime-user .user-identity strong,
.user-table tbody tr.is-parttime-user .user-account-code {
  color: #075e59;
}

.user-identity {
  display: grid;
  gap: 3px;
}

.user-identity strong {
  color: #17213f;
  font-size: 13px;
}

.user-identity span,
.user-last-login {
  color: #7b879f;
  font-size: 10px;
}

.user-role-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.user-role-line small {
  color: #816f50;
  font-size: 10px;
}

.user-role-badge.is-department-head {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 7px;
  color: #714906;
  border: 1px solid #dfbd75;
  border-radius: 4px;
  background: #ffefc8;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .06em;
  line-height: 1;
}

.user-operator-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  color: #0c6f58;
  border: 1px solid #8fd1bd;
  border-radius: 999px;
  background: #e9f8f2;
  font-size: 9px;
  font-weight: 800;
}

.user-account-code {
  color: #215fcf;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
}

.user-email-state {
  display: grid;
  gap: 3px;
}

.user-email-state strong {
  color: #33415f;
  font-size: 11px;
  font-weight: 700;
}

.user-email-state small {
  color: #7b879f;
  font-size: 10px;
}

.user-status,
.user-password-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid #cbe6da;
  border-radius: 4px;
  background: #edf9f4;
  color: #176b50;
  font-size: 10px;
  font-weight: 800;
}

.user-status.is-disabled {
  color: #8b4860;
  border-color: #ebced7;
  background: #fff1f4;
}

.user-password-status.is-temporary {
  color: #936000;
  border-color: #edd7a7;
  background: #fff7e6;
}

.user-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.user-actions button {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 10px;
}

.user-security-note {
  margin: 13px 0 0;
  color: #7a859c;
  font-size: 11px;
}

.user-editor-card {
  width: min(520px, calc(100vw - 28px));
}

.user-editor-card .field small {
  color: #818da4;
  font-size: 10px;
  line-height: 1.5;
}

.password-reset-modal::backdrop {
  background: rgba(16, 30, 67, .58);
  backdrop-filter: blur(8px);
}

.password-reset-card {
  width: min(540px, calc(100vw - 28px));
  border-top: 4px solid #2f6fe4;
}

.password-reset-account {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 3px 14px;
  margin-bottom: 16px;
  padding: 13px 14px;
  border-left: 3px solid #2f6fe4;
  border-radius: 5px;
  background: #edf3ff;
}

.password-reset-account span,
.password-reset-account small {
  color: #6d7890;
  font-size: 10px;
}

.password-reset-account strong {
  color: #174fae;
  font-size: 15px;
}

.password-reset-account small {
  grid-column: 1 / -1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.password-reset-modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
  padding: 0;
  border: 0;
}

.password-reset-modes legend {
  grid-column: 1 / -1;
  margin-bottom: 7px;
  color: #40506d;
  font-size: 11px;
  font-weight: 800;
}

.password-reset-modes label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-height: 92px;
  padding: 13px;
  border: 1px solid #d2def1;
  border-radius: 5px;
  background: #f8faff;
  cursor: pointer;
}

.password-reset-modes label:has(input:checked) {
  border-color: #2f6fe4;
  background: #edf3ff;
  box-shadow: inset 0 0 0 1px #2f6fe4;
}

.password-reset-modes label:has(input:disabled) {
  cursor: not-allowed;
  opacity: .58;
}

.password-reset-modes input {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: #2f6fe4;
}

.password-reset-modes span {
  display: grid;
  gap: 5px;
}

.password-reset-modes strong {
  color: #1f2f4f;
  font-size: 12px;
}

.password-reset-modes small {
  color: #71809a;
  font-size: 10px;
  line-height: 1.55;
}

.password-reset-boundary {
  margin: 14px 0;
  padding: 11px 12px;
  border-left: 3px solid #c29134;
  border-radius: 4px;
  background: #fff8e9;
  color: #75613b;
  font-size: 10px;
  line-height: 1.6;
}

.password-reset-boundary strong {
  color: #8d631b;
}

.user-department-access {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid #c7d8f7;
  border-radius: 5px;
  background: #f5f8ff;
}

.user-department-access[hidden] {
  display: none;
}

.user-department-access legend {
  padding: 0 5px;
  color: #193e8d;
  font-size: 12px;
  font-weight: 800;
}

.user-department-access p {
  margin: 0;
  color: #71809a;
  font-size: 10px;
  line-height: 1.5;
}

.user-department-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.user-department-options label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #d6e2f7;
  border-radius: 4px;
  background: #fff;
  color: #23324f;
  font-size: 12px;
  font-weight: 700;
}

.user-department-options input {
  width: 16px;
  height: 16px;
  accent-color: #2f6fe4;
}

.user-temporary-password {
  display: grid;
  gap: 3px;
  margin-top: 12px;
  padding: 13px 14px;
  border-left: 3px solid #2f6fe4;
  border-radius: 5px;
  background: #edf3ff;
}

.user-temporary-password span,
.user-temporary-password small {
  color: #71809a;
  font-size: 10px;
}

.user-temporary-password strong {
  color: #193e8d;
  font-size: 13px;
}

@media (max-width: 820px) {
  .auth-gate {
    width: calc(100vw - 22px);
    box-shadow: 0 24px 60px rgba(31, 61, 128, .22);
  }

  .auth-gate[open] {
    display: block;
  }

  .auth-gate-layout {
    display: block;
    height: auto;
    max-height: calc(100dvh - 16px);
  }

  .auth-video-panel {
    display: none;
  }

  .auth-gate .auth-card {
    width: 100%;
    max-height: calc(100dvh - 16px);
    margin: 0;
    padding: 22px 20px 18px;
    border-left: 1px solid rgba(155, 177, 218, .55);
    box-shadow: none;
    overflow-y: auto;
  }

  .auth-gate .auth-card::before {
    display: none;
  }

  .auth-brand {
    margin-bottom: 18px;
    padding-bottom: 13px;
  }

  .auth-brand img {
    width: 92px;
  }

  .auth-brand div {
    padding-left: 10px;
  }

  .auth-forgot-password {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 44px;
    margin-top: 0;
    margin-bottom: 0;
  }

  .auth-role-option {
    min-height: 44px;
    padding-block: 6px;
  }

  .auth-admin-entry {
    justify-content: center;
    min-height: 44px;
    padding-block: 0;
  }

  .auth-footer-row {
    flex-wrap: wrap;
    row-gap: 2px;
  }

  .auth-role-switcher {
    margin-inline: 0;
  }

  .auth-role-option span {
    font-size: 10px;
  }

  .auth-role-option small {
    font-size: 7px;
  }

  .user-management-heading {
    align-items: stretch;
    flex-direction: column;
    padding: 19px;
  }

  .user-management-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .user-management-summary div {
    padding: 10px;
  }

  .user-directory-classifier {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .user-directory-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .user-directory-tab {
    min-height: 44px;
  }

  .user-directory-group-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .department-operator-control {
    width: 100%;
  }

  .user-table {
    min-width: 0;
  }

  .user-table thead {
    display: none;
  }

  .user-table tbody,
  .user-table tr,
  .user-table td {
    display: block;
  }

  .user-table tr {
    padding: 14px;
    border-bottom: 1px solid #dfe6f2;
  }

  .user-table tr.is-department-head {
    padding-left: 18px;
  }

  .user-table tr:last-child {
    border-bottom: 0;
  }

  .user-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 0;
    border: 0;
  }

  .user-table td::before {
    content: attr(data-label);
    flex: 0 0 78px;
    color: #7a859d;
    font-size: 10px;
  }

  .user-table td:first-child {
    align-items: flex-start;
    padding-top: 0;
  }

  .user-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 480px) {
  .password-reset-modes {
    grid-template-columns: 1fr;
  }

  .password-reset-modes label {
    min-height: 0;
  }

  .user-directory-tabs {
    grid-template-columns: 1fr;
  }

  .user-directory-group-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .department-operator-control {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .department-operator-control small {
    grid-column: 1;
  }

  .user-directory-group-count {
    grid-template-columns: auto auto 1fr;
    align-items: center;
    width: 100%;
    padding: 9px 0 0;
    border-top: 1px solid #d8e2f1;
    border-left: 0;
  }

  .user-directory-group-count small {
    grid-column: auto;
    justify-self: end;
    margin: 0;
  }
}

/* 低高度桌面窗口压缩垂直节奏，让登录信息一次完整呈现。 */
@media (min-width: 821px) and (max-height: 760px) {
  .auth-gate .auth-card {
    padding: 12px 30px 10px;
    overflow-y: auto;
  }

  .auth-brand {
    margin-bottom: 8px;
    padding-bottom: 8px;
  }

  .auth-field {
    margin-top: 8px;
  }

  .auth-field input,
  .auth-field select,
  .auth-submit {
    min-height: 42px;
  }

  .auth-gate .auth-mode-note {
    margin-top: 8px;
    padding-block: 6px;
  }

  .auth-footer-row {
    margin-top: 6px;
  }
}

@media (max-width: 480px) {
  .auth-captcha-control {
    align-items: stretch;
    flex-direction: column;
  }

  .auth-captcha-control img {
    width: 100%;
    max-width: 180px;
  }
}


/* v1.1.20：统一页头密度、保证 KPI 板块细分可见，并加固管理员专属区域。 */

[data-admin-only][hidden],
[data-admin-only][aria-hidden="true"] {
  display: none !important;
}

.department-scope[hidden],
.auth-department-field[hidden] {
  display: none !important;
}

/* 全局头部：保留必要身份与操作，压缩无效留白。 */
.topbar {
  min-height: 0;
  align-items: center;
  gap: 12px 18px;
  margin-bottom: 12px;
  padding: 13px 16px;
}

.topbar > .view-identity {
  flex: 1 1 220px;
  min-width: 190px;
  padding-left: 0;
}

.topbar > .view-identity::before,
.topbar::after {
  display: none;
}

.topbar .eyebrow {
  margin-bottom: 3px;
  font-size: 10px;
  line-height: 1.25;
}

.topbar h1 {
  font-size: clamp(23px, 2.15vw, 30px);
  line-height: 1.12;
}

.top-actions {
  align-items: center;
  gap: 7px;
}

.top-actions .button,
.top-actions .auth-session,
.top-actions .month-control input {
  min-height: 36px;
}

.top-actions .button {
  padding-inline: 11px;
  font-size: 12px;
}

.top-actions .auth-session {
  gap: 6px;
  padding-inline: 9px;
  font-size: 10px;
}

.department-scope {
  display: grid;
  gap: 3px;
  min-width: 142px;
  padding: 5px 7px;
  border: 1px solid #b9cef5;
  border-radius: 4px;
  background: #f4f8ff;
}

.department-scope > span {
  color: #62718c;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

.department-scope select {
  width: 100%;
  min-height: 23px;
  padding: 0 22px 0 3px;
  border: 0;
  color: #165bc4;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.department-scope select:focus-visible {
  outline: 2px solid #2f6fe4;
  outline-offset: 2px;
}

.department-scope select:disabled {
  cursor: wait;
  opacity: .62;
}

.top-actions .auth-password-change,
.top-actions .auth-logout {
  min-height: 25px;
  padding-inline: 7px;
}

.top-actions .month-control {
  gap: 3px;
}

.top-actions .month-control span {
  font-size: 9px;
}

.top-actions .month-control input {
  width: 132px;
  padding-inline: 9px;
  font-size: 11px;
}

/* 各功能页的二级页头使用同一信息层级。 */
.result-gallery-heading,
.work-kpi-heading,
.attendance-heading,
.user-management-heading {
  min-height: 0;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  padding: 14px 17px;
}

.result-gallery-heading h2,
.work-kpi-heading h2,
.attendance-heading h2,
.user-management-heading h2 {
  margin: 3px 0 4px;
  font-size: clamp(23px, 2.2vw, 29px);
  line-height: 1.16;
}

.result-gallery-heading p,
.work-kpi-heading p,
.attendance-heading p,
.user-management-heading p {
  max-width: 720px;
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
}

.result-gallery-meta {
  min-width: 146px;
  padding: 9px 12px;
}

.result-gallery-meta strong,
#result-complete-count {
  margin: 1px 0;
  font-size: 24px;
  line-height: 1.05;
}

#result-month-label {
  font-size: 15px;
}

.role-intro {
  grid-template-columns: minmax(0, 1fr) 150px;
  min-height: 0;
  gap: 18px;
  margin-bottom: 12px;
  padding: 17px 20px;
}

.role-intro h2 {
  margin-top: 3px;
  font-size: clamp(23px, 2.2vw, 29px);
  line-height: 1.16;
}

.role-intro p {
  max-width: 760px;
  margin-top: 7px;
  font-size: 11px;
  line-height: 1.55;
}

.role-formula {
  min-height: 82px;
  padding: 10px 12px;
}

.role-formula strong {
  font-size: 24px;
}

.panel-heading {
  gap: 16px;
  margin-bottom: 14px;
  padding-bottom: 13px;
}

.panel-heading h2,
.settings-card h2 {
  font-size: 22px;
  line-height: 1.2;
}

.panel-heading p,
.settings-card > p {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.55;
}

/* KPI：总计是主信息，五个业务板块始终作为第二层显示。 */
.performance-id-card {
  grid-template-rows: auto 176px auto auto;
}

.id-kpi-summary {
  min-width: 0;
  padding: 10px 11px 11px;
  overflow: visible;
}

.id-kpi-head {
  gap: 10px;
}

.id-kpi-head span {
  font-size: 10px;
}

.id-kpi-head b {
  font-size: 14px;
}

.id-kpi-breakdown {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

.id-kpi-business-item {
  min-height: 30px;
  padding: 6px 7px;
}

.id-kpi-business-item dt {
  font-size: 9px;
}

.id-kpi-business-item dd {
  font-size: 12px;
}

.work-kpi-business-breakdown {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.work-kpi-business-stat {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 9px;
  border: 1px solid #dfe6f3;
  border-radius: 5px;
  background: #f7f9fe;
}

.work-kpi-business-stat dt,
.work-kpi-business-stat dd {
  margin: 0;
}

.work-kpi-business-stat dt {
  color: #6e7894;
  font-size: 10px;
  font-weight: 700;
}

.work-kpi-business-stat dd {
  color: var(--blue-deep);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.work-kpi-business-stat.is-zero {
  opacity: 0.56;
}

@media (max-width: 1320px) and (min-width: 1101px) {
  .topbar {
    grid-template-columns: minmax(200px, 0.7fr) minmax(0, 1.3fr);
  }

  .top-actions {
    width: auto;
    justify-content: flex-end;
  }
}

@media (max-width: 1100px) and (min-width: 821px) {
  .topbar {
    grid-template-columns: 1fr;
  }

  .top-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 820px) {
  .topbar {
    gap: 10px;
    margin-bottom: 9px;
    padding: 11px 12px;
  }

  .topbar h1 {
    font-size: 24px;
  }

  .result-gallery-heading,
  .work-kpi-heading,
  .attendance-heading,
  .user-management-heading {
    gap: 11px;
    padding: 13px 14px;
  }

  .role-intro {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 15px 16px;
  }

  .role-formula {
    min-height: 0;
  }
}

@media (max-width: 620px) {
  .top-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
  }

  .top-actions .button {
    min-height: 40px;
    padding-inline: 7px;
  }

  .top-actions .auth-session {
    grid-column: 1 / -1;
    width: 100%;
  }

  .department-scope {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    padding: 7px 9px;
  }

  .department-scope select {
    min-height: 30px;
    font-size: 14px;
  }

  .top-actions .month-control {
    grid-column: auto;
    width: auto;
  }

  .top-actions .month-control span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .top-actions .month-control input {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding-inline: 7px;
  }

  .result-gallery-heading,
  .work-kpi-heading,
  .attendance-heading,
  .user-management-heading {
    grid-template-columns: 1fr;
  }

  .result-gallery-meta {
    width: 100%;
    min-width: 0;
  }

  .result-gallery-meta {
    display: flex;
    min-height: 50px;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    padding-block: 8px;
  }

  .result-gallery-meta strong,
  #result-complete-count {
    margin: 0;
  }

  .performance-id-card {
    grid-template-rows: auto 124px auto auto auto;
  }

  .id-kpi-summary {
    grid-row: 4;
  }

  .id-kpi-breakdown,
  .work-kpi-business-breakdown {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .id-kpi-business-item,
  .work-kpi-business-stat {
    min-height: 32px;
  }

  .performance-id-card .id-card-footer {
    grid-row: 5;
  }
}


/* v1.1.21：首页月度考评时间线。强调流程、角色和截止节点，兼顾桌面与移动端。 */

.dashboard-timeline {
  position: relative;
  margin-bottom: 12px;
  padding: 18px 19px 13px;
  overflow: hidden;
  border: 1px solid rgba(188, 203, 231, 0.9);
  border-top: 3px solid var(--blue);
  border-radius: var(--radius-panel, 10px);
  background:
    linear-gradient(90deg, rgba(47, 111, 228, 0.055) 0, rgba(47, 111, 228, 0) 38%),
    rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-soft, 0 12px 28px rgba(35, 70, 130, 0.08));
}

.dashboard-timeline::after {
  content: "08";
  position: absolute;
  top: -28px;
  right: 18px;
  color: rgba(47, 111, 228, 0.045);
  font: 800 118px/1 Georgia, "Times New Roman", serif;
  pointer-events: none;
}

.dashboard-timeline-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 13px;
}

.dashboard-timeline-eyebrow {
  display: block;
  margin-bottom: 3px;
  color: var(--blue);
  font-size: 10px;
  font-weight: 760;
  line-height: 1.35;
  letter-spacing: 0.08em;
}

.dashboard-timeline-heading h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(21px, 1.8vw, 27px);
  font-weight: 760;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.dashboard-timeline-deadline {
  display: grid;
  min-width: 126px;
  padding: 7px 11px;
  border-left: 3px solid var(--blue);
  background: rgba(47, 111, 228, 0.07);
}

.dashboard-timeline-deadline span {
  color: var(--ink-soft);
  font-size: 9px;
  line-height: 1.3;
}

.dashboard-timeline-deadline strong {
  margin-top: 2px;
  color: var(--blue-deep);
  font-size: 14px;
  line-height: 1.25;
}

.dashboard-timeline-track {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 13px 0 0;
  border-top: 1px solid rgba(188, 203, 231, 0.75);
  list-style: none;
}

.dashboard-timeline-track::before {
  content: "";
  position: absolute;
  top: 27px;
  left: 5.2%;
  right: 5.2%;
  height: 1px;
  background: rgba(47, 111, 228, 0.25);
}

.dashboard-timeline-track li {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-rows: 31px auto;
  justify-items: center;
  padding: 0 10px;
  text-align: center;
}

.dashboard-timeline-track time {
  position: relative;
  z-index: 1;
  display: inline-flex;
  min-width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 0 7px;
  color: white;
  border: 4px solid white;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 0 0 1px rgba(47, 111, 228, 0.2);
  font-variant-numeric: tabular-nums;
}

.dashboard-timeline-track time strong {
  font: 750 10px/1 var(--sans);
}

.dashboard-timeline-track time span {
  font-size: 8px;
  line-height: 1;
}

.dashboard-timeline-track li:nth-child(4) time {
  min-width: 52px;
  background: var(--blue-deep);
}

.dashboard-timeline-track li:last-child time {
  background: var(--red);
  box-shadow: 0 0 0 1px rgba(197, 48, 43, 0.22);
}

.dashboard-timeline-track li > div {
  min-width: 0;
  padding-top: 7px;
}

.dashboard-timeline-track b {
  display: block;
  color: var(--blue-deep);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.35;
}

.dashboard-timeline-track p {
  margin: 4px auto 0;
  max-width: 126px;
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.5;
  white-space: nowrap;
}

.dashboard-timeline-note {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 12px 0 0;
  padding-top: 10px;
  color: var(--ink-soft);
  border-top: 1px solid rgba(188, 203, 231, 0.65);
  font-size: 10px;
  line-height: 1.45;
}

.dashboard-timeline-note span {
  display: inline-grid;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  place-items: center;
  color: white;
  border-radius: 50%;
  background: var(--blue);
  font: 700 10px/1 Georgia, serif;
}

@media (max-width: 1180px) and (min-width: 821px) {
  .dashboard-timeline-track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 13px;
  }

  .dashboard-timeline-track::before {
    display: none;
  }

  .dashboard-timeline-track li {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: start;
    justify-items: start;
    gap: 8px;
    padding: 0 10px;
    text-align: left;
  }

  .dashboard-timeline-track li > div {
    padding-top: 1px;
  }

  .dashboard-timeline-track p {
    max-width: none;
  }
}

@media (max-width: 820px) {
  .dashboard-timeline {
    margin-bottom: 9px;
    padding: 15px 14px 12px;
  }

  .dashboard-timeline::after {
    right: 7px;
    font-size: 92px;
  }

  .dashboard-timeline-heading {
    align-items: center;
    padding-bottom: 11px;
  }

  .dashboard-timeline-heading h2 {
    font-size: 22px;
  }

  .dashboard-timeline-deadline {
    min-width: 104px;
    padding: 6px 8px;
  }

  .dashboard-timeline-track {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 8px 0 0;
  }

  .dashboard-timeline-track::before {
    top: 18px;
    bottom: 18px;
    left: 14px;
    right: auto;
    width: 1px;
    height: auto;
  }

  .dashboard-timeline-track li {
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: center;
    justify-items: start;
    gap: 9px;
    min-height: 47px;
    padding: 4px 0;
    text-align: left;
  }

  .dashboard-timeline-track time {
    width: 30px;
    min-width: 30px;
    padding: 0 4px;
  }

  .dashboard-timeline-track li:nth-child(4) time {
    width: 38px;
    min-width: 38px;
    margin-left: -4px;
    padding: 0 3px;
  }

  .dashboard-timeline-track li > div {
    display: grid;
    width: 100%;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: baseline;
    gap: 8px;
    padding: 0;
  }

  .dashboard-timeline-track p {
    max-width: none;
    margin: 0;
  }

  .dashboard-timeline-note {
    align-items: flex-start;
    margin-top: 8px;
  }
}

@media (max-width: 430px) {
  .dashboard-timeline-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }

  .dashboard-timeline-deadline {
    width: 100%;
  }

  .dashboard-timeline-track li > div {
    grid-template-columns: 66px minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-timeline,
  .dashboard-timeline * {
    scroll-behavior: auto;
  }
}


/* v1.1.22：首页员工卡片增加受权限保护的月度考勤摘要。 */

.performance-id-card:has(.id-attendance-summary) {
  grid-template-rows: auto 105px auto auto auto;
}

.performance-id-card:has(.id-attendance-summary) .id-photo-area {
  grid-row: 2;
  width: 82px;
  height: 82px;
  aspect-ratio: 1 / 1;
  align-self: start;
}

.performance-id-card:has(.id-attendance-summary) .id-photo {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 24%;
}

.performance-id-card:has(.id-attendance-summary) .id-person-copy {
  grid-row: 2;
  align-self: start;
  justify-content: flex-start;
  padding-top: 13px;
}

.performance-id-card:has(.id-attendance-summary) .id-result-stack {
  grid-row: 2 / span 2;
  align-self: stretch;
}

.id-attendance-summary {
  grid-column: 1 / 3;
  grid-row: 3;
  min-width: 0;
  margin-top: 8px;
  padding: 9px 10px 10px;
  border: 1px solid #dce5f4;
  border-left: 3px solid var(--green);
  border-radius: 5px;
  background: #f6faf8;
}

.id-attendance-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.id-attendance-heading span {
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.id-attendance-heading strong {
  color: var(--green);
  font-size: 9px;
  font-weight: 760;
  line-height: 1.35;
}

.id-attendance-summary dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin: 0;
}

.id-attendance-summary dl > div {
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid #e1e9f3;
  background: rgba(255, 255, 255, 0.86);
}

.id-attendance-summary dt,
.id-attendance-summary dd {
  min-width: 0;
  margin: 0;
  line-height: 1.25;
}

.id-attendance-summary dt {
  color: #78839a;
  font-size: 8px;
  white-space: nowrap;
}

.id-attendance-summary dd {
  margin-top: 3px;
  color: var(--ink);
  font-size: 10px;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.id-attendance-summary > p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 9px;
  line-height: 1.5;
}

.id-attendance-summary.is-warning {
  border-left-color: var(--amber);
  background: #fff9ef;
}

.id-attendance-summary.is-warning .id-attendance-heading strong {
  color: #a96409;
}

.id-attendance-summary.is-empty {
  border-left-color: #9aa5ba;
  background: #f6f7fa;
}

.id-attendance-summary.is-empty .id-attendance-heading {
  margin-bottom: 3px;
}

.id-attendance-summary.is-empty .id-attendance-heading strong {
  color: #7a8499;
}

.performance-id-card:has(.id-attendance-summary) .id-kpi-summary {
  grid-row: 4;
}

.performance-id-card:has(.id-attendance-summary) .id-card-footer {
  grid-row: 5;
}

@media (max-width: 620px) {
  .performance-id-card:has(.id-attendance-summary) {
    grid-template-rows: auto 112px auto auto auto auto;
  }

  .performance-id-card:has(.id-attendance-summary) .id-photo-area {
    width: 76px;
    height: 76px;
    aspect-ratio: 1 / 1;
  }

  .performance-id-card:has(.id-attendance-summary) .id-person-copy {
    padding-top: 9px;
  }

  .performance-id-card:has(.id-attendance-summary) .id-attendance-summary {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 5px;
  }

  .performance-id-card:has(.id-attendance-summary) .id-result-stack {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 10px;
  }

  .performance-id-card:has(.id-attendance-summary) .id-kpi-summary {
    grid-row: 5;
  }

  .performance-id-card:has(.id-attendance-summary) .id-card-footer {
    grid-row: 6;
  }

  .id-attendance-summary dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .id-attendance-summary dl > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
  }

  .id-attendance-summary dd {
    margin-top: 0;
  }
}


/* v1.3 · 工作强度与动态 KPI 机制 */

@media screen {
  #view-shadow {
    --shadow-ink: #17365f;
    --shadow-blue: #245ea8;
    --shadow-blue-soft: #eaf2fd;
    --shadow-cyan: #0b7f8f;
    --shadow-amber: #a55b08;
    --shadow-paper: #fbfcfe;
    --shadow-line: #d6e0ed;
    --shadow-muted: #637187;
  }

  .shadow-formula-panel,
  .shadow-type-panel,
  .shadow-overview-panel,
  .shadow-employee-panel,
  .shadow-boundary-note {
    border: 1px solid var(--shadow-line);
    background: var(--shadow-paper);
    box-shadow: 0 18px 48px rgba(28, 57, 95, 0.08);
  }

  .shadow-formula-panel,
  .shadow-type-panel,
  .shadow-overview-panel,
  .shadow-employee-panel {
    margin-bottom: 18px;
    padding: 26px;
  }

  .shadow-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
  }

  .shadow-section-heading h2 {
    margin: 5px 0 7px;
    color: var(--shadow-ink);
    font-size: 24px;
  }

  .shadow-section-heading p {
    margin: 0;
    color: var(--shadow-muted);
  }

  .shadow-formula-badge {
    flex: 0 0 auto;
    padding: 8px 10px;
    color: var(--shadow-blue);
    border: 1px solid #bfd1ea;
    background: #f1f6fd;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  .shadow-formula-actions {
    display: grid;
    width: 152px;
    flex: 0 0 152px;
    gap: 9px;
  }

  .shadow-formula-toolbar {
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
    gap: 10px;
  }

  .shadow-formula-actions .shadow-formula-badge {
    display: grid;
    min-height: 36px;
    place-items: center;
    text-align: center;
  }

  .shadow-rule-explain-button {
    display: flex;
    width: 100%;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    color: #fff;
    border: 1px solid #1f5fc8;
    background: #286bd9;
    box-shadow: 0 7px 16px rgba(28, 88, 182, 0.18);
    font-size: 12px;
    font-weight: 760;
  }

  .work-import-dialog {
    width: min(820px, calc(100vw - 30px));
  }

  .work-import-dialog-card {
    display: grid;
    width: 100%;
    min-width: 0;
    max-height: calc(100vh - 30px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    box-sizing: border-box;
    background: #f8fbff;
  }

  .work-import-dialog-card > * {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .work-import-heading,
  .work-import-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    background: #fff;
  }

  .work-import-heading {
    align-items: flex-start;
    border-bottom: 1px solid #d9e4f1;
  }

  .work-import-heading > div {
    min-width: 0;
    flex: 1;
  }

  .work-import-heading h2 {
    margin: 4px 0 0;
    color: #17365f;
    font-size: 23px;
  }

  .work-import-heading p {
    margin: 5px 0 0;
    color: #637187;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .work-import-scroll {
    padding: 20px 22px;
    overflow: auto;
  }

  .work-import-alert {
    padding: 14px 16px;
    color: #21466f;
    border: 1px solid #bcd2ee;
    border-left: 4px solid #286bd9;
    border-radius: 5px;
    background: #edf5ff;
  }

  .work-import-alert.is-error {
    color: #812f2f;
    border-color: #edb9b9;
    border-left-color: #c14343;
    background: #fff4f4;
  }

  .work-import-alert strong,
  .work-import-alert p {
    display: block;
    margin: 0;
  }

  .work-import-alert p {
    margin-top: 4px;
    font-size: 12px;
  }

  .work-import-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin-top: 14px;
  }

  .work-import-stat-grid > div {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #d9e4f1;
    border-radius: 5px;
    background: #fff;
  }

  .work-import-stat-grid span,
  .work-import-stat-grid strong {
    display: block;
  }

  .work-import-stat-grid span {
    color: #708096;
    font-size: 11px;
  }

  .work-import-stat-grid strong {
    margin-top: 4px;
    color: #1f5fc8;
    font-size: 20px;
  }

  .work-import-message-panel,
  .work-import-scope-panel {
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid #d9e4f1;
    border-radius: 5px;
    background: #fff;
  }

  .work-import-message-panel[hidden] {
    display: none;
  }

  .work-import-message-panel h3 {
    margin: 0 0 7px;
    font-size: 14px;
  }

  .work-import-message-panel ul {
    max-height: 130px;
    margin: 0;
    padding-left: 20px;
    overflow: auto;
  }

  .work-import-message-panel li {
    margin: 4px 0;
    font-size: 12px;
    line-height: 1.55;
  }

  .work-import-message-panel.is-error {
    color: #812f2f;
    border-color: #edb9b9;
    background: #fff7f7;
  }

  .work-import-message-panel.is-warning {
    color: #765116;
    border-color: #efd39b;
    background: #fffaf0;
  }

  .work-import-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
  }

  .work-import-section-heading span,
  .work-import-section-heading small {
    color: #637187;
    font-size: 11px;
  }

  .work-import-section-heading h3 {
    margin: 3px 0 0;
    color: #17365f;
    font-size: 15px;
  }

  .work-import-table-wrap {
    width: 100%;
    min-width: 0;
    max-height: 220px;
    overflow: auto;
  }

  .work-import-table th,
  .work-import-table td {
    padding: 9px 10px;
    font-size: 12px;
  }

  .work-import-confirm {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 13px 15px;
    color: #34485f;
    border: 1px solid #d2ddea;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
  }

  .work-import-confirm input {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    margin-top: 1px;
  }

  .work-import-actions {
    justify-content: flex-end;
    border-top: 1px solid #d9e4f1;
  }

  .shadow-rule-explain-button:hover {
    border-color: #164b9f;
    background: #1c56b8;
  }

  .shadow-rule-explain-button:focus-visible {
    outline: 3px solid rgba(47, 111, 228, 0.24);
    outline-offset: 2px;
  }

  .shadow-rule-explain-button b {
    font-size: 15px;
    line-height: 1;
  }

  .shadow-formula-track {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr);
    align-items: center;
    padding: 18px;
    border: 1px solid #cbd8e8;
    background:
      linear-gradient(rgba(44, 94, 157, 0.04) 1px, transparent 1px) 0 0 / 100% 26px,
      #f7faff;
  }

  .shadow-formula-track > div {
    display: grid;
    grid-template-rows: auto auto auto;
    min-height: 90px;
    align-content: center;
    padding: 14px 16px;
    border-left: 3px solid #8caed8;
    background: white;
  }

  .shadow-formula-track > div.is-result {
    border-left-color: #0b8c80;
    background: #e9f7f4;
  }

  .shadow-formula-track > div span,
  .shadow-formula-track > div small {
    color: var(--shadow-muted);
    font-size: 12px;
  }

  .shadow-formula-track > div strong {
    margin: 3px 0;
    color: var(--shadow-ink);
    font-size: 17px;
    font-variant-numeric: tabular-nums;
  }

  .shadow-formula-track > b {
    color: #7390b3;
    text-align: center;
    font-size: 20px;
  }

  .shadow-type-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .shadow-type-card {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 70px;
    align-items: center;
    gap: 11px;
    min-height: 86px;
    padding: 14px 16px;
    overflow: hidden;
    border: 1px solid #d5dfeb;
    background: white;
  }

  .shadow-type-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--type-color, var(--shadow-blue));
  }

  .shadow-type-code {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    color: var(--type-color, var(--shadow-blue));
    background: color-mix(in srgb, var(--type-color, var(--shadow-blue)) 10%, white);
    font-size: 11px;
    font-weight: 800;
  }

  .shadow-type-copy {
    display: grid;
    grid-template-rows: auto minmax(34px, auto);
    align-content: center;
    min-width: 0;
  }

  .shadow-type-copy strong,
  .shadow-type-copy small {
    display: block;
  }

  .shadow-type-copy strong {
    color: #263d5b;
    font-size: 14px;
    line-height: 1.35;
  }

  .shadow-type-copy small {
    margin-top: 2px;
    color: var(--shadow-muted);
    font-size: 12px;
    line-height: 1.45;
  }

  .shadow-type-base {
    display: grid;
    min-height: 52px;
    align-content: center;
    padding-left: 14px;
    color: var(--shadow-ink);
    border-left: 1px solid #e0e7f0;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .shadow-type-base b,
  .shadow-type-base small {
    display: block;
  }

  .shadow-type-base b {
    font-size: 21px;
  }

  .shadow-type-base small {
    color: var(--shadow-muted);
    font-size: 11px;
  }

  .shadow-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
  }

  .shadow-overview-grid > div {
    display: grid;
    grid-template-rows: auto minmax(44px, 1fr);
    min-height: 100px;
    padding: 17px;
    border: 1px solid #d5dfeb;
    background: #f8fafd;
  }

  .shadow-overview-grid > div.is-average {
    border-color: #add8d6;
    background: #eef9f7;
  }

  .shadow-overview-grid dt {
    color: var(--shadow-muted);
    font-size: 12px;
    font-weight: 650;
  }

  .shadow-overview-grid dd {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 7px 0 0;
  }

  .shadow-overview-grid dd strong {
    color: var(--shadow-ink);
    font-size: 27px;
    font-variant-numeric: tabular-nums;
  }

  .shadow-overview-grid dd span {
    color: var(--shadow-muted);
    font-size: 11px;
    text-align: right;
  }

  .shadow-category-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
  }

  .shadow-category-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
    min-height: 58px;
    padding: 11px 12px;
    border: 1px solid #dbe3ed;
    background: white;
  }

  .shadow-category-row strong {
    color: #294463;
  }

  .shadow-category-row span {
    color: var(--shadow-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .shadow-category-row i {
    grid-column: 1 / -1;
    display: block;
    height: 3px;
    overflow: hidden;
    background: #edf1f6;
  }

  .shadow-category-row i::after {
    content: "";
    display: block;
    width: var(--bar, 0%);
    height: 100%;
    background: var(--bar-color, var(--shadow-blue));
  }

  .shadow-employee-grid {
    display: grid;
    gap: 12px;
  }

  .shadow-employee-card {
    border: 1px solid #d5dfeb;
    background: white;
  }

  .shadow-employee-summary {
    display: grid;
    grid-template-columns: minmax(220px, 1.1fr) repeat(3, minmax(110px, 0.55fr)) minmax(170px, 0.8fr);
    align-items: center;
    gap: 12px;
    padding: 16px;
  }

  .shadow-person {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
  }

  .shadow-person-index {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: white;
    background: var(--shadow-ink);
    font-weight: 750;
  }

  .shadow-person strong,
  .shadow-person small {
    display: block;
  }

  .shadow-person strong {
    color: #213a58;
  }

  .shadow-person small {
    margin-top: 2px;
    color: var(--shadow-muted);
  }

  .shadow-ledger-link {
    margin-top: 5px;
    padding: 0;
    color: #245ea8;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: transparent;
    font: inherit;
    font-size: 11px;
    line-height: 1.4;
    cursor: pointer;
  }

  .shadow-ledger-link:hover,
  .shadow-ledger-link:focus-visible {
    color: #173f78;
    outline: none;
  }

  .shadow-employee-card.is-linked-target {
    border-color: #286bd9;
    outline: 3px solid rgba(40, 107, 217, 0.18);
    outline-offset: 2px;
  }

  .shadow-stat {
    display: grid;
    grid-template-rows: auto auto auto;
    align-content: center;
    min-height: 70px;
    padding-left: 12px;
    border-left: 1px solid #e1e7ef;
  }

  .shadow-stat span,
  .shadow-stat small,
  .shadow-stat strong {
    display: block;
  }

  .shadow-stat span,
  .shadow-stat small {
    color: var(--shadow-muted);
    font-size: 11px;
  }

  .shadow-stat strong {
    margin: 2px 0;
    color: var(--shadow-ink);
    font-size: 20px;
    font-variant-numeric: tabular-nums;
  }

  .shadow-index-meter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 10px;
    align-items: center;
    align-content: center;
    min-height: 70px;
  }

  .shadow-index-meter span {
    grid-column: 1 / -1;
    color: var(--shadow-muted);
    font-size: 11px;
  }

  .shadow-index-meter i {
    display: block;
    height: 7px;
    overflow: hidden;
    background: #e8eef5;
  }

  .shadow-index-meter i::after {
    content: "";
    display: block;
    width: var(--index-width, 0%);
    height: 100%;
    background: linear-gradient(90deg, #2a64ad, #0b8c80);
  }

  .shadow-index-meter strong {
    color: var(--shadow-ink);
    font-size: 19px;
    font-variant-numeric: tabular-nums;
  }

  .shadow-detail-toggle {
    border-top: 1px solid #e2e8f0;
  }

  .shadow-detail-toggle > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    color: #2b5e9e;
    background: #f7faff;
    cursor: pointer;
    list-style: none;
    font-weight: 650;
  }

  .shadow-detail-toggle > summary::-webkit-details-marker {
    display: none;
  }

  .shadow-detail-toggle > summary::after {
    content: "+";
    font-size: 20px;
  }

  .shadow-detail-toggle[open] > summary::after {
    content: "−";
  }

  .shadow-work-list {
    padding: 0 16px 16px;
  }

  .shadow-work-header,
  .shadow-work-row {
    display: grid;
    grid-template-columns: minmax(210px, 1.35fr) minmax(125px, 0.76fr) minmax(118px, 0.68fr) minmax(118px, 0.68fr) 92px;
    gap: 10px;
    align-items: center;
  }

  .shadow-work-header {
    padding: 10px 8px;
    color: var(--shadow-muted);
    font-size: 11px;
    font-weight: 700;
  }

  .shadow-work-header > :last-child {
    text-align: right;
  }

  .shadow-work-row {
    min-height: 68px;
    padding: 10px 8px;
    border-top: 1px solid #e5eaf1;
  }

  .shadow-work-name strong,
  .shadow-work-name small {
    display: block;
  }

  .shadow-work-name strong {
    color: #263e5b;
  }

  .shadow-work-name small {
    margin-top: 2px;
    color: var(--shadow-muted);
  }

  .shadow-work-row select {
    width: 100%;
    min-width: 0;
    padding: 8px 28px 8px 9px;
    color: #243c59;
    border: 1px solid #cbd7e5;
    background: white;
  }

  .shadow-work-points {
    color: var(--shadow-ink);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .shadow-work-points strong,
  .shadow-work-points small {
    display: block;
  }

  .shadow-work-points strong {
    font-size: 18px;
  }

  .shadow-work-points small {
    color: var(--shadow-muted);
  }

  .shadow-work-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 8px 0;
    color: var(--shadow-muted);
    border-top: 1px solid #e5eaf1;
    font-size: 12px;
  }

  .shadow-work-footer .text-button {
    flex: 0 0 auto;
  }

  .shadow-empty {
    padding: 28px;
    color: var(--shadow-muted);
    border: 1px dashed #bdcbdc;
    text-align: center;
  }

  .shadow-empty strong {
    color: var(--shadow-ink);
  }

  .shadow-empty p {
    margin: 5px 0 0;
  }

  .shadow-boundary-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px 18px;
    align-items: center;
    padding: 17px 20px;
    color: #70430f;
    border-color: #e7c693;
    background: #fff8eb;
  }

  .shadow-boundary-note strong {
    padding-right: 18px;
    border-right: 1px solid #e5c48f;
  }

  .shadow-boundary-note p {
    margin: 0;
    line-height: 1.65;
  }

  @media (max-width: 1180px) {
    .shadow-type-grid,
    .shadow-category-summary {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shadow-employee-summary {
      grid-template-columns: minmax(210px, 1fr) repeat(3, minmax(100px, 0.55fr));
    }

    .shadow-index-meter {
      grid-column: 1 / -1;
      padding-top: 10px;
      border-top: 1px solid #e4e9f0;
    }
  }

  @media (max-width: 820px) {
    .side-nav {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .shadow-formula-panel,
    .shadow-type-panel,
    .shadow-overview-panel,
    .shadow-employee-panel {
      padding: 18px;
    }

    .shadow-section-heading {
      align-items: stretch;
      flex-direction: column;
    }

    .shadow-type-card {
      grid-template-columns: 40px minmax(0, 1fr) 62px;
    }

    .shadow-formula-toolbar {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .shadow-formula-actions {
      width: 100%;
      flex-basis: auto;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .shadow-formula-track {
      grid-template-columns: minmax(0, 1fr);
      gap: 7px;
    }

    .shadow-formula-track > b {
      transform: rotate(90deg);
    }

    .shadow-overview-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shadow-employee-summary {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shadow-person,
    .shadow-index-meter {
      grid-column: 1 / -1;
    }

    .shadow-work-header {
      display: none;
    }

    .shadow-work-row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      padding: 13px 0;
    }

    .shadow-work-name {
      grid-column: 1 / -1;
    }

    .shadow-work-points {
      grid-column: 1 / -1;
      text-align: left;
    }

    .shadow-work-footer {
      align-items: flex-start;
      flex-direction: column;
    }
  }

  @media (max-width: 560px) {
    .side-nav {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .shadow-formula-panel,
    .shadow-type-panel,
    .shadow-overview-panel,
    .shadow-employee-panel {
      padding: 16px;
    }

    .shadow-section-heading,
    .shadow-boundary-note {
      grid-template-columns: minmax(0, 1fr);
    }

    .shadow-section-heading {
      display: grid;
    }

    .shadow-formula-toolbar {
      grid-template-columns: minmax(0, 1fr);
    }

    .work-import-heading,
    .work-import-scroll,
    .work-import-actions {
      padding-right: 16px;
      padding-left: 16px;
    }

    .work-import-stat-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .work-import-actions .button {
      min-width: 0;
      flex: 1;
      padding-right: 8px;
      padding-left: 8px;
      font-size: 12px;
      white-space: nowrap;
    }

    .shadow-type-grid,
    .shadow-category-summary,
    .shadow-overview-grid,
    .shadow-employee-summary,
    .shadow-work-row {
      grid-template-columns: minmax(0, 1fr);
    }

    .shadow-person,
    .shadow-index-meter,
    .shadow-work-name {
      grid-column: auto;
    }

    .shadow-stat {
      padding: 10px 0 0;
      border-top: 1px solid #e1e7ef;
      border-left: 0;
    }

    .shadow-boundary-note strong {
      padding: 0 0 8px;
      border-right: 0;
      border-bottom: 1px solid #e5c48f;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #view-shadow *,
    #view-shadow *::before,
    #view-shadow *::after {
      scroll-behavior: auto !important;
      transition: none !important;
      animation: none !important;
    }
  }
}


/* v1.3 · 正式动态 KPI 与 S 级评议 */
.work-quick-main-grid,
.work-metric-main-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.work-quick-task,
.work-field-task {
  grid-column: span 2;
}

.shadow-work-classification {
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  gap: 3px;
  min-height: 52px;
  padding: 8px 10px;
  border-left: 2px solid #6a8eaf;
  background: #f4f7fa;
}

.shadow-work-classification strong {
  color: #173451;
  font-size: 12px;
}

.shadow-work-classification small {
  color: #6e7f8f;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.objective-score-badge {
  display: inline-grid;
  gap: 2px;
  min-width: 96px;
  padding: 7px 10px;
  border-left: 3px solid #2f6eaa;
  background: #eef5fb;
}

.objective-score-badge strong {
  color: #143a5d;
  font-family: Georgia, serif;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.objective-score-badge small {
  color: #577086;
  font-size: 10px;
}

.objective-score-badge.is-incomplete {
  border-left-color: #b47a29;
  background: #fff7e8;
}

.confirmation-chip {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  color: #7a6337;
  background: #f7f1e7;
  font-size: 11px;
  font-weight: 700;
}

.confirmation-chip.is-confirmed {
  color: #23624d;
  background: #e9f5ef;
}

.role-rating-stack {
  display: inline-grid;
  gap: 4px;
  justify-items: start;
}

.role-rating-stack small {
  color: #66798a;
  font-size: 9px;
  white-space: nowrap;
}

.level-choice-grid.is-formal-scoring {
  grid-template-columns: 1fr;
  gap: 16px;
}

.legacy-s-reason-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid #d6b15f;
  border-left: 4px solid #b47a29;
  background: #fff9e9;
}

.legacy-s-reason-panel[hidden] {
  display: none;
}

.legacy-s-reason-panel label span,
.s-review-evidence-grid label > span {
  color: #273d55;
  font-size: 11px;
  font-weight: 760;
}

.legacy-s-reason-panel label b,
.s-review-evidence-grid label > span b {
  margin-left: 5px;
  color: #b53b34;
  font-size: 9px;
}

.legacy-s-reason-panel textarea {
  width: 100%;
  min-height: 88px;
  resize: vertical;
  border: 1px solid #c8d4e2;
  background: #fff;
}

.legacy-s-reason-panel textarea:focus {
  border-color: #2f6fe4;
  outline: 2px solid rgba(47, 111, 228, 0.14);
}

.legacy-s-reason-panel textarea.is-invalid {
  border-color: #c4473d;
  outline: 2px solid rgba(196, 71, 61, 0.13);
}

.legacy-s-reason-panel > small {
  color: #7b6844;
  font-size: 10px;
}

.formal-score-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid #cfd9e3;
  background: #f8fafc;
}

.formal-score-board > div {
  display: grid;
  gap: 6px;
  min-height: 116px;
  align-content: center;
  padding: 18px;
  border-right: 1px solid #dbe2e8;
}

.formal-score-board > div:last-child {
  border-right: 0;
}

.formal-score-board span,
.formal-score-board small {
  color: #66798a;
  font-size: 10px;
}

.formal-score-board strong {
  color: #143a5d;
  font-family: Georgia, serif;
  font-size: 28px;
  font-weight: 400;
}

.formal-score-board .is-objective {
  color: #fff;
  background: #123d62;
}

.formal-score-board .is-objective span,
.formal-score-board .is-objective small,
.formal-score-board .is-objective strong {
  color: inherit;
}

.manual-review-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px 12px;
  align-items: baseline;
  padding: 2px 2px 0;
}

.manual-review-heading span {
  padding: 4px 8px;
  color: #215ea9;
  border: 1px solid #c8d9f0;
  background: #edf4ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.manual-review-heading strong {
  color: #173451;
  font-size: 17px;
}

.manual-review-heading small {
  color: #66798a;
  font-size: 11px;
}

html.assessment-dialog-open {
  overflow: hidden;
}

.manual-level-choice-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

.manual-level-choice-grid .level-choice {
  min-height: 156px;
}

.manual-level-choice-grid .level-choice:focus-within {
  outline: 3px solid rgba(47, 111, 228, 0.3);
  outline-offset: 2px;
}

.manual-level-choice-grid .level-choice.is-unavailable {
  color: #7a8490;
  border-style: dashed;
  background: #f4f6f8;
  cursor: not-allowed;
}

.manual-level-choice-grid .level-choice.is-unavailable .level-emblem {
  filter: grayscale(1);
  opacity: 0.52;
}

.formal-data-warning,
.formal-confirmation-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border-left: 4px solid #b47a29;
  background: #fff7e8;
}

.formal-confirmation-note {
  border-left-color: #2d7a61;
  background: #edf7f3;
}

.formal-data-warning span,
.formal-confirmation-note span {
  color: #5d6e7c;
  font-size: 11px;
  line-height: 1.6;
}

.s-review-panel {
  display: grid;
  gap: 18px;
  padding: 20px;
  border: 1px solid #d6b15f;
  background: linear-gradient(135deg, #fff9e9, #fff 68%);
}

.s-review-heading {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 13px;
  align-items: baseline;
}

.s-review-heading span {
  padding: 3px 7px;
  color: #714d0d;
  background: #f2d891;
  font-size: 10px;
  font-weight: 800;
}

.s-review-heading strong {
  color: #173451;
  font-size: 18px;
}

.s-review-heading small {
  grid-column: 2;
  color: #7c6a45;
}

.s-review-scale {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
}

.s-score-choice {
  position: relative;
  display: grid;
  min-height: 74px;
  place-content: center;
  gap: 4px;
  text-align: center;
  border: 1px solid #e1d6bb;
  background: #fff;
  cursor: pointer;
}

.s-score-choice input {
  position: absolute;
  opacity: 0;
}

.s-score-choice strong {
  color: #193d5d;
  font-family: Georgia, serif;
  font-size: 23px;
}

.s-score-choice small {
  color: #817456;
  font-size: 9px;
}

.s-score-choice.is-selected {
  color: #fff;
  border-color: #143d61;
  background: #143d61;
  box-shadow: inset 0 3px 0 #d2a43e;
}

.s-score-choice.is-selected strong,
.s-score-choice.is-selected small {
  color: inherit;
}

.s-review-evidence-grid {
  display: grid;
  grid-template-columns: minmax(180px, .7fr) minmax(0, 1.3fr);
  gap: 12px;
}

.s-review-evidence-grid label {
  display: grid;
  gap: 6px;
}

.s-review-evidence-grid label > span {
  color: #657789;
  font-size: 10px;
  font-weight: 700;
}

.s-review-evidence-grid select,
.s-review-evidence-grid textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d7dfe6;
  background: #fff;
  font: inherit;
}

@media (max-width: 820px) {
  .manual-review-heading {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .manual-review-heading small {
    grid-column: 2;
  }

  .manual-level-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .formal-score-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .formal-score-board > div:nth-child(2) {
    border-right: 0;
  }

  .formal-score-board > div:nth-child(-n+2) {
    border-bottom: 1px solid #dbe2e8;
  }

  .s-review-scale {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .manual-review-heading {
    grid-template-columns: 1fr;
  }

  .manual-review-heading small {
    grid-column: auto;
  }

  .manual-level-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .manual-level-choice-grid .level-choice:last-child {
    grid-column: 1 / -1;
  }

  .manual-level-choice-grid .level-choice {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 188px;
    align-content: start;
    gap: 3px;
    padding: 14px 10px;
    text-align: center;
  }

  .manual-level-choice-grid .level-choice > .level-emblem {
    grid-row: auto;
    width: 50px;
    height: 50px;
    margin: 0 0 2px;
  }

  .manual-level-choice-grid .level-choice strong {
    font-size: 17px;
  }

  .manual-level-choice-grid .level-choice small {
    margin-top: 0;
    white-space: nowrap;
  }

  .manual-level-choice-grid .level-choice p {
    grid-column: auto;
    margin: 4px 0 0;
    line-height: 1.5;
  }

  .work-quick-main-grid,
  .work-metric-main-grid,
  .s-review-evidence-grid {
    grid-template-columns: 1fr;
  }

  .work-quick-task,
  .work-field-task {
    grid-column: auto;
  }

  .formal-score-board > div {
    min-height: 92px;
    padding: 14px;
  }

  .s-review-scale {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .formal-data-warning,
  .formal-confirmation-note {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 359px) {
  .manual-level-choice-grid,
  .formal-score-board {
    grid-template-columns: 1fr;
  }

  .manual-level-choice-grid .level-choice:last-child {
    grid-column: auto;
  }

  .formal-score-board > div {
    border-right: 0;
    border-bottom: 1px solid #dbe2e8;
  }

  .formal-score-board > div:last-child {
    border-bottom: 0;
  }
}

/* v1.4.9 · 工作强度与客观评分规则解读 */
.scoring-rules-dialog {
  width: min(980px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
}

.scoring-rules-dialog-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: calc(100dvh - 32px);
  color: #102844;
  border: 1px solid #aac2df;
  background: #f4f7fb;
  box-shadow: 0 28px 76px rgba(8, 29, 54, .34);
}

.scoring-rules-heading {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 25px 28px 22px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 44px 100%,
    linear-gradient(118deg, #092e57 0%, #154f91 72%, #1b66bc 100%);
}

.scoring-rules-heading::after {
  position: absolute;
  right: 92px;
  bottom: 0;
  width: 150px;
  height: 4px;
  content: "";
  background: #35c4b3;
}

.scoring-rules-heading .eyebrow {
  color: #9fe8de;
}

.scoring-rules-heading h2 {
  margin: 5px 0 7px;
  color: #fff;
  font-size: 27px;
  line-height: 1.2;
}

.scoring-rules-heading p {
  max-width: 690px;
  margin: 0;
  color: #d4e5f5;
  font-size: 12px;
  line-height: 1.65;
}

.scoring-rules-close {
  width: 40px;
  height: 40px;
  color: #fff;
  border-color: rgba(255, 255, 255, .35);
  border-radius: 8px;
  font-size: 11px;
}

.scoring-rules-close:hover {
  background: rgba(255, 255, 255, .12);
}

.scoring-rules-scroll {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 28px 28px;
}

.scoring-rules-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr);
  align-items: stretch;
  margin-bottom: 16px;
  border: 1px solid #c8d7e8;
  background: #fff;
}

.scoring-rules-summary > div {
  display: grid;
  gap: 4px;
  align-content: center;
  min-height: 96px;
  padding: 16px 18px;
  border-top: 3px solid #3d75b4;
}

.scoring-rules-summary > div.is-result {
  border-top-color: #0d9386;
  background: #eaf7f4;
}

.scoring-rules-summary > div span,
.scoring-rules-summary > div small {
  color: #657b93;
  font-size: 10px;
}

.scoring-rules-summary > div strong {
  color: #10385f;
  font-family: Georgia, serif;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.scoring-rules-summary > b {
  display: grid;
  place-items: center;
  color: #7890aa;
  background: #f6f8fb;
  font-size: 17px;
}

.scoring-rules-section {
  margin-top: 14px;
  padding: 20px;
  border: 1px solid #d2dce8;
  background: #fff;
}

.scoring-rules-section > header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 13px;
}

.scoring-rules-section > header > span {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  color: #fff;
  background: #164d87;
  font-family: Georgia, serif;
  font-weight: 700;
}

.scoring-rules-section > header small {
  display: block;
  margin-bottom: 2px;
  color: #3976b7;
  font-size: 9px;
  font-weight: 760;
  letter-spacing: .08em;
}

.scoring-rules-section h3,
.scoring-rules-section h4 {
  margin: 0;
  color: #102b48;
}

.scoring-rules-section h3 {
  font-size: 18px;
}

.scoring-rules-section > p {
  margin: 0 0 14px;
  color: #596f86;
  font-size: 11px;
  line-height: 1.7;
}

.scoring-rules-example {
  display: grid;
  grid-template-columns: minmax(76px, .5fr) 20px minmax(140px, 1.1fr) 20px minmax(76px, .5fr) 20px minmax(96px, .65fr);
  align-items: stretch;
  margin-bottom: 15px;
  border: 1px solid #bfd0e3;
  background: #f4f8fd;
}

.scoring-rules-example > div {
  display: grid;
  gap: 4px;
  align-content: center;
  min-height: 68px;
  padding: 11px 13px;
  border-left: 3px solid #739bc9;
  background: #fff;
}

.scoring-rules-example > div.is-result {
  border-left-color: #0b9687;
  background: #e8f6f3;
}

.scoring-rules-example span {
  color: #708298;
  font-size: 9px;
}

.scoring-rules-example strong {
  color: #14385e;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.scoring-rules-example > b {
  display: grid;
  place-items: center;
  color: #6d87a4;
}

.scoring-rules-reference {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(190px, .62fr);
  gap: 14px;
}

.scoring-rules-reference > div {
  padding: 14px;
  background: #f4f6f9;
}

.scoring-rules-reference h4 {
  margin-bottom: 10px;
  font-size: 11px;
}

.scoring-rules-chip-list,
.scoring-rules-intensity-list,
.scoring-rules-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.scoring-rules-chip-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.scoring-rules-chip-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  color: #526a82;
  border: 1px solid #dbe3ec;
  background: #fff;
  font-size: 9px;
}

.scoring-rules-chip-list li > span {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.scoring-rules-chip-list li > span small {
  color: #4074ac;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
}

.scoring-rules-chip-list li.is-emphasis {
  color: #075f57;
  border-color: #9dd7ce;
  background: #e9f7f4;
}

.scoring-rules-chip-list b {
  color: #164f8b;
  font-size: 11px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.scoring-rules-intensity-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.scoring-rules-intensity-list li {
  display: grid;
  min-height: 54px;
  place-content: center;
  text-align: center;
  border: 1px solid #d4dfeb;
  background: #fff;
}

.scoring-rules-intensity-list b {
  color: #164f8b;
  font-family: Georgia, serif;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.scoring-rules-intensity-list span {
  color: #687d91;
  font-size: 9px;
}

.scoring-rules-duration-reference {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.scoring-rules-duration-reference h4,
.scoring-rules-duration-reference > small {
  grid-column: 1 / -1;
}

.scoring-rules-duration-reference p {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 7px 9px;
  border: 1px solid #d4dfeb;
  background: #fff;
}

.scoring-rules-duration-reference p.is-cap {
  border-color: #9dd7ce;
  background: #e9f7f4;
}

.scoring-rules-duration-reference p b {
  color: #60758a;
  font-size: 9px;
}

.scoring-rules-duration-reference p span {
  color: #0b766b;
  font-family: Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.scoring-rules-duration-reference > small {
  color: #687d91;
  font-size: 9px;
  line-height: 1.55;
}

.scoring-rules-section > p.scoring-rules-note {
  margin: 13px 0 0;
  padding: 10px 12px;
  color: #765020;
  border-left: 3px solid #d09035;
  background: #fff7e8;
}

.scoring-rules-equation {
  display: grid;
  gap: 7px;
  margin-bottom: 13px;
  padding: 15px 18px;
  color: #fff;
  background: #123f6d;
}

.scoring-rules-equation span {
  color: #a9c8e8;
  font-size: 9px;
}

.scoring-rules-equation strong {
  font-family: Georgia, "Songti SC", serif;
  font-size: 18px;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}

.scoring-rules-three-column,
.scoring-rules-deductions,
.scoring-rules-grade-grid {
  display: grid;
  gap: 8px;
}

.scoring-rules-three-column {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.scoring-rules-three-column article {
  display: grid;
  gap: 5px;
  padding: 13px;
  border-top: 2px solid #79a1ce;
  background: #f3f6fa;
}

.scoring-rules-three-column article > span {
  color: #6b8096;
  font-size: 9px;
}

.scoring-rules-three-column article strong {
  color: #173b61;
  font-size: 11px;
}

.scoring-rules-three-column article p {
  margin: 0;
  color: #708096;
  font-size: 9px;
  line-height: 1.55;
}

.scoring-rules-deductions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.scoring-rules-deductions > div {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-left: 3px solid #c47a39;
  background: #fff6ec;
}

.scoring-rules-deductions > div.is-floor {
  border-left-color: #3b7eae;
  background: #eef5fb;
}

.scoring-rules-deductions span {
  color: #6c7783;
  font-size: 9px;
}

.scoring-rules-deductions strong {
  color: #703d17;
  font-size: 11px;
}

.scoring-rules-grade-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.scoring-rules-grade-grid > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1px 9px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid #d6e0eb;
  background: #f6f8fb;
}

.scoring-rules-grade-grid b {
  grid-row: span 2;
  color: #165795;
  font-family: Georgia, serif;
  font-size: 24px;
}

.scoring-rules-grade-grid span {
  color: #243c56;
  font-size: 10px;
  font-weight: 700;
}

.scoring-rules-grade-grid strong {
  color: #78899a;
  font-size: 9px;
}

.scoring-rules-s-section {
  border-color: #dcc783;
  background: #fffcf1;
}

.scoring-rules-s-section > header > span {
  color: #563d0a;
  background: #e9c94f;
}

.scoring-rules-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.scoring-rules-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  padding: 12px;
  border: 1px solid #e4d59f;
  background: #fff;
}

.scoring-rules-steps li > b {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #62470c;
  border-radius: 50%;
  background: #f4dc76;
  font-size: 10px;
}

.scoring-rules-steps li div {
  display: grid;
  gap: 4px;
}

.scoring-rules-steps strong {
  color: #4f3d19;
  font-size: 10px;
}

.scoring-rules-steps span {
  color: #76694d;
  font-size: 9px;
  line-height: 1.55;
}

.scoring-rules-boundary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin-top: 14px;
  padding: 14px 16px;
  color: #31546f;
  border-left: 4px solid #238f84;
  background: #eaf6f4;
}

.scoring-rules-boundary strong {
  padding-right: 16px;
  border-right: 1px solid #b6d9d4;
  font-size: 11px;
}

.scoring-rules-boundary p {
  margin: 0;
  font-size: 10px;
  line-height: 1.65;
}

.scoring-rules-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 28px;
  border-top: 1px solid #ccd8e6;
  background: #fff;
}

.scoring-rules-actions > span {
  color: #6a7d91;
  font-size: 9px;
}

.scoring-rules-actions .button {
  flex: 0 0 auto;
  min-width: 100px;
}

@media (max-width: 820px) {
  .scoring-rules-dialog {
    width: min(100% - 20px, 760px);
    max-height: calc(100dvh - 20px);
  }

  .scoring-rules-dialog-card {
    max-height: calc(100dvh - 20px);
  }

  .scoring-rules-heading,
  .scoring-rules-scroll,
  .scoring-rules-actions {
    padding-right: 18px;
    padding-left: 18px;
  }

  .scoring-rules-reference,
  .scoring-rules-three-column {
    grid-template-columns: 1fr;
  }

  .scoring-rules-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .scoring-rules-dialog {
    width: calc(100% - 12px);
    max-height: calc(100dvh - 12px);
  }

  .scoring-rules-dialog-card {
    max-height: calc(100dvh - 12px);
  }

  .scoring-rules-heading {
    padding-top: 19px;
    padding-bottom: 17px;
  }

  .scoring-rules-heading h2 {
    font-size: 22px;
  }

  .scoring-rules-heading p {
    display: none;
  }

  .scoring-rules-scroll {
    padding-top: 14px;
    padding-bottom: 18px;
  }

  .scoring-rules-summary,
  .scoring-rules-example {
    grid-template-columns: 1fr;
  }

  .scoring-rules-summary > div,
  .scoring-rules-example > div {
    min-height: 62px;
  }

  .scoring-rules-summary > b,
  .scoring-rules-example > b {
    min-height: 22px;
  }

  .scoring-rules-section {
    padding: 15px;
  }

  .scoring-rules-chip-list,
  .scoring-rules-deductions,
  .scoring-rules-grade-grid,
  .scoring-rules-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scoring-rules-chip-list li {
    min-height: 66px;
  }

  .scoring-rules-equation strong {
    font-size: 14px;
    line-height: 1.6;
  }

  .scoring-rules-boundary {
    grid-template-columns: 1fr;
  }

  .scoring-rules-boundary strong {
    padding: 0 0 8px;
    border-right: 0;
    border-bottom: 1px solid #b6d9d4;
  }

  .scoring-rules-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
  }

  .scoring-rules-actions .button {
    width: 100%;
  }
}


/*
 * v1.1.28 · 企业工作台清晰型排版系统
 * 作为最后加载的字体层，将历史模块的零散字号归并为语义化层级。
 * 原则：业务信息不低于 12px；正文与表单使用 14px；移动端不缩小正文。
 */

@media screen {
:root {
    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
    --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

    --text-meta: 12px;
    --text-small: 13px;
    --text-body: 14px;
    --text-control: 14px;
    --text-emphasis: 16px;
    --text-card-title: 20px;
    --text-section-title: 24px;
    --text-page-title: clamp(28px, 2.2vw, 32px);
    --text-display: clamp(30px, 2.6vw, 36px);

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    --line-title: 1.25;
    --line-compact: 1.45;
    --line-body: 1.6;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body,
  button,
  input,
  textarea,
  select {
    font-family: var(--font-sans);
  }

  body {
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
    line-height: var(--line-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  button,
  input,
  textarea,
  select,
  .button {
    font-size: var(--text-control);
    font-weight: var(--weight-medium);
    line-height: var(--line-compact);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    line-height: var(--line-title);
    text-wrap: balance;
  }

  p,
  li,
  dd,
  td,
  th,
  small,
  label,
  button {
    overflow-wrap: break-word;
  }

  /* 品牌、导航与全局页头 */
  .brand-lockup strong {
    font-size: var(--text-card-title);
    font-weight: var(--weight-bold);
  }

  .brand-lockup small,
  .document-code,
  .local-badge,
  .app-version,
  .app-version span,
  .app-version b {
    font-size: var(--text-meta);
    line-height: var(--line-compact);
  }

  .app-version b {
    font-family: var(--font-sans);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
  }

  .nav-item {
    font-size: var(--text-body);
    font-weight: var(--weight-medium);
    line-height: var(--line-compact);
  }

  .nav-index {
    font-size: var(--text-meta);
    font-weight: var(--weight-semibold);
  }

  .eyebrow,
  .topbar .eyebrow,
  .dashboard-timeline-eyebrow,
  .directory-index,
  .employee-file-number,
  .section-number {
    font-size: var(--text-meta);
    font-weight: var(--weight-semibold);
    line-height: 1.35;
    letter-spacing: 0.06em;
  }

  .topbar h1 {
    font-size: var(--text-page-title);
    font-weight: var(--weight-bold);
    line-height: 1.2;
  }

  .top-actions .button,
  .top-actions .auth-session,
  .top-actions .auth-password-change,
  .top-actions .auth-logout,
  .top-actions .month-control input {
    font-size: var(--text-small);
  }

  .top-actions .month-control span,
  .month-control span,
  .field > span,
  .field-label {
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    line-height: var(--line-compact);
  }

  /* 页面级标题与说明 */
  .result-gallery-heading h2,
  .work-kpi-heading h2,
  .attendance-heading h2,
  .user-management-heading h2,
  .role-intro h2 {
    font-size: var(--text-section-title);
    font-weight: var(--weight-bold);
    line-height: var(--line-title);
  }

  .result-gallery-heading p,
  .work-kpi-heading p,
  .attendance-heading p,
  .user-management-heading p,
  .role-intro p,
  .panel-heading p,
  .settings-card > p,
  .modal-heading p {
    font-size: var(--text-body);
    line-height: var(--line-body);
  }

  .panel-heading h2,
  .settings-card h2,
  .directory-section-heading h3,
  .modal-heading h2 {
    font-size: var(--text-section-title);
    font-weight: var(--weight-bold);
    line-height: var(--line-title);
  }

  .result-gallery-meta span,
  .result-gallery-meta small,
  .role-formula span,
  .role-formula small {
    font-size: var(--text-meta);
    line-height: var(--line-compact);
  }

  #result-month-label {
    font-size: var(--text-emphasis);
    font-weight: var(--weight-bold);
  }

  .result-gallery-meta {
    align-content: center;
  }

  /* 月度总览：左侧月份与进度，右侧部门 KPI 数字概览。 */
  .result-gallery-heading.is-meta-only {
    display: grid;
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    align-items: stretch;
    gap: 14px;
  }

  .result-gallery-heading.is-meta-only .result-gallery-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "month"
      "completion";
    min-width: 0;
    margin: 0;
    padding: 12px 16px;
    justify-self: start;
  }

  .result-month-control {
    grid-area: month;
    display: block;
    width: 100%;
  }

  .result-month-caption {
    display: block;
    margin-bottom: 1px;
    color: var(--ink-soft);
    font-size: var(--text-meta);
    font-weight: var(--weight-semibold);
    line-height: var(--line-compact);
  }

  .result-month-control input {
    min-height: 38px;
    padding: 2px 4px 2px 0;
    color: var(--blue-deep);
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 21px;
    font-weight: var(--weight-bold);
    line-height: var(--line-compact);
    cursor: pointer;
  }

  .result-month-control input:focus {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 0 0 3px rgba(47, 111, 228, 0.12);
  }

  .result-completion {
    grid-area: completion;
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
  }

  #result-complete-count {
    color: var(--blue);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: var(--weight-bold);
    line-height: var(--line-compact);
  }

  .result-completion small {
    color: var(--ink-soft);
    font-size: var(--text-meta);
    font-weight: var(--weight-medium);
  }

  .department-kpi-overview {
    display: grid;
    grid-template-columns: minmax(128px, 0.7fr) minmax(0, 3.3fr);
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 11px 14px;
    border: 1px solid #d7e2f8;
    border-radius: 7px;
    background: linear-gradient(135deg, #f8faff 0%, #eef4ff 100%);
  }

  .department-kpi-heading {
    min-width: 0;
  }

  .department-kpi-heading span,
  .department-kpi-heading small,
  .department-kpi-item dt,
  .department-kpi-item dd span {
    color: var(--ink-soft);
    font-size: var(--text-meta);
    line-height: var(--line-compact);
  }

  .department-kpi-heading span {
    font-weight: var(--weight-semibold);
  }

  .department-kpi-heading h2 {
    margin: 2px 0 4px;
    color: var(--ink);
    font-size: var(--text-emphasis);
    font-weight: var(--weight-bold);
    line-height: var(--line-title);
  }

  .department-kpi-heading small {
    font-weight: var(--weight-medium);
    white-space: nowrap;
  }

  .department-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 7px;
    min-width: 0;
    margin: 0;
  }

  .department-kpi-item {
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid #dfe6f5;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.92);
  }

  .department-kpi-item dt,
  .department-kpi-item dd {
    margin: 0;
  }

  .department-kpi-item dt {
    margin-bottom: 3px;
    font-weight: var(--weight-semibold);
    white-space: nowrap;
  }

  .department-kpi-item dd {
    display: flex;
    align-items: baseline;
    gap: 3px;
  }

  .department-kpi-item dd strong {
    color: var(--blue-deep);
    font-size: var(--text-emphasis);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
    line-height: var(--line-compact);
  }

  .department-kpi-item.is-total {
    border-color: rgba(47, 111, 228, 0.3);
    background: #e8f0ff;
  }

  .department-kpi-item.is-total dd strong {
    color: var(--blue);
  }

  /* 月度时间线 */
  .dashboard-timeline-heading h2 {
    font-size: var(--text-section-title);
    font-weight: var(--weight-bold);
    line-height: var(--line-title);
  }

  .dashboard-timeline-deadline span {
    font-size: var(--text-meta);
    line-height: var(--line-compact);
  }

  .dashboard-timeline-deadline strong {
    font-size: var(--text-emphasis);
    font-weight: var(--weight-bold);
  }

  .dashboard-timeline-track time strong {
    font-family: var(--font-sans);
    font-size: var(--text-meta);
    font-weight: var(--weight-bold);
  }

  .dashboard-timeline-track time span {
    font-size: 10px;
  }

  .dashboard-timeline-track b {
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    line-height: var(--line-compact);
  }

  .dashboard-timeline-track p,
  .dashboard-timeline-note {
    font-size: var(--text-meta);
    line-height: 1.55;
  }

  /* 员工绩效身份卡 */
  .id-card-topline,
  .id-card-topline span,
  .id-card-topline b,
  .id-card-footer,
  .id-person-copy > small,
  .id-result-stack > div > span:first-child,
  .id-final-result small {
    font-size: var(--text-meta);
    line-height: var(--line-compact);
  }

  .id-card-topline,
  .id-result-stack > div > span:first-child {
    font-weight: var(--weight-semibold);
  }

  .id-person-copy h3 {
    font-size: var(--text-card-title);
    font-weight: var(--weight-bold);
    line-height: var(--line-title);
  }

  .id-person-copy p {
    font-size: var(--text-small);
    line-height: var(--line-compact);
  }

  .level-badge,
  .final-grade-badge,
  .level-badge b,
  .final-grade-badge b,
  .id-final-result .final-grade-badge b {
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
  }

  .id-result-stack .level-badge,
  .id-result-stack .final-grade-badge,
  .id-result-stack .level-badge b,
  .id-result-stack .final-grade-badge b,
  .id-result-stack .id-final-result > span:first-child,
  .id-final-result .final-grade-badge b {
    font-size: var(--text-small);
  }

  .level-emblem-code,
  .level-badge-code,
  .final-grade-code {
    font-size: var(--text-meta);
    font-weight: var(--weight-bold);
  }

  .id-kpi-head span,
  .id-attendance-heading span,
  .id-attendance-heading strong {
    font-size: var(--text-meta);
    font-weight: var(--weight-semibold);
    line-height: var(--line-compact);
  }

  .id-kpi-head b {
    font-size: var(--text-body);
    font-weight: var(--weight-bold);
  }

  .id-kpi-business-item dt,
  .id-attendance-summary dt {
    font-size: var(--text-meta);
    line-height: var(--line-compact);
  }

  .id-kpi-business-item dd,
  .id-attendance-summary dd,
  .id-attendance-summary > p {
    font-size: var(--text-meta);
    line-height: var(--line-compact);
  }

  .id-kpi-business-item dd,
  .id-attendance-summary dd {
    font-weight: var(--weight-semibold);
  }

  .id-kpi-view-button {
    font-size: var(--text-meta);
    font-weight: var(--weight-semibold);
    line-height: var(--line-compact);
  }

  /* 人员档案 */
  .directory-section-heading p,
  .management-copy small,
  .intern-person-copy small,
  .employee-card-copy small,
  .employee-card-role,
  .employee-card-role span {
    font-size: var(--text-small);
    line-height: var(--line-compact);
  }

  .management-copy strong,
  .intern-person-copy strong,
  .employee-card-copy strong {
    font-size: var(--text-card-title);
    font-weight: var(--weight-bold);
    line-height: var(--line-title);
  }

  .management-role-tag,
  .intern-role-tag,
  .management-edit-button,
  .intern-promote-button,
  .intern-card-topline,
  .intern-card-topline b {
    font-size: var(--text-meta);
    font-weight: var(--weight-semibold);
    line-height: var(--line-compact);
  }

  .management-capabilities dt,
  .employee-capability-grid dt,
  .intern-capabilities dt,
  .intern-dates dt,
  .employee-private-card dt,
  .employee-private-card-heading span {
    font-size: var(--text-meta);
    font-weight: var(--weight-medium);
    line-height: var(--line-compact);
  }

  .management-capabilities dd,
  .employee-capability-grid dd,
  .intern-capabilities dd,
  .intern-dates dd,
  .employee-private-card dd {
    font-size: var(--text-body);
    font-weight: var(--weight-medium);
    line-height: var(--line-compact);
  }

  .employee-private-heading h3,
  .employee-private-card-heading strong {
    font-size: var(--text-card-title);
    font-weight: var(--weight-bold);
  }

  .employee-private-heading p,
  .employee-private-inputs .field small,
  .employee-private-security,
  .employee-private-lock {
    font-size: var(--text-small);
    line-height: var(--line-body);
  }

  /* 工作内容与 KPI */
  .work-kpi-business-stat dt,
  .work-kpi-card .eyebrow,
  .work-entry-card .eyebrow,
  .work-detail-table th,
  .work-detail-kicker,
  .work-detail-meta,
  .work-kpi-card-footer,
  .work-form-note {
    font-size: var(--text-meta);
    line-height: var(--line-compact);
  }

  .work-kpi-business-stat dd {
    font-size: var(--text-small);
    font-weight: var(--weight-bold);
  }

  .work-kpi-card h3,
  .work-entry-card h3,
  .work-detail-heading h2 {
    font-size: var(--text-card-title);
    font-weight: var(--weight-bold);
    line-height: var(--line-title);
  }

  .work-kpi-summary,
  .work-kpi-card p,
  .work-entry-card p,
  .work-detail-table td {
    font-size: var(--text-small);
    line-height: var(--line-body);
  }

  /* 实习员工卡：与正式员工卡保持相同的最低可读字号 */
  .dashboard-intern-eyebrow,
  .dashboard-intern-topline,
  .dashboard-intern-topline b,
  .dashboard-intern-role-tag,
  .dashboard-intern-person p,
  .dashboard-intern-notice strong,
  .dashboard-intern-dates dt,
  .dashboard-intern-capabilities dt,
  .dashboard-intern-dates dd,
  .dashboard-intern-capabilities dd {
    font-size: var(--text-meta);
    line-height: var(--line-compact);
  }

  .dashboard-intern-heading p {
    font-size: var(--text-small);
    line-height: var(--line-body);
  }

  .dashboard-intern-heading > strong {
    font-size: var(--text-small);
  }

  .dashboard-intern-person h3 {
    font-size: var(--text-card-title);
  }

  /* 考勤页与评分参考 */
  .attendance-guidance strong,
  .attendance-intern-heading strong,
  .assessment-attendance-reference strong {
    font-size: var(--text-body);
    font-weight: var(--weight-semibold);
  }

  .attendance-guidance span,
  .attendance-guidance p,
  .assessment-attendance-reference span,
  .assessment-attendance-reference p,
  .attendance-actions span {
    font-size: var(--text-small);
    line-height: var(--line-body);
  }

  .attendance-table {
    font-size: var(--text-small);
  }

  .attendance-table th {
    font-size: var(--text-meta);
    font-weight: var(--weight-semibold);
    line-height: var(--line-compact);
  }

  .attendance-table td,
  .attendance-table input {
    font-size: var(--text-small);
    line-height: var(--line-compact);
  }

  .attendance-subject-kind,
  .attendance-row-state,
  .attendance-reference-chip strong,
  .attendance-reference-chip small,
  .attendance-intern-heading span,
  .attendance-intern-heading small,
  .attendance-table td:not(:first-child)::before {
    font-size: var(--text-meta);
    font-weight: var(--weight-semibold);
    line-height: var(--line-compact);
  }

  /* 登录、改密与用户管理 */
  .auth-brand span,
  .auth-gate .auth-heading .eyebrow,
  .auth-footer,
  .auth-admin-entry,
  .password-account-card span,
  .password-rule,
  .user-management-summary span,
  .user-identity span,
  .user-last-login,
  .user-status,
  .user-password-status,
  .user-actions button,
  .user-security-note,
  .user-editor-card .field small,
  .user-temporary-password span,
  .user-temporary-password small {
    font-size: var(--text-meta);
    line-height: var(--line-compact);
  }

  .auth-brand strong,
  .password-account-card strong,
  .user-management-summary strong,
  .user-identity strong,
  .user-temporary-password strong {
    font-size: var(--text-body);
    font-weight: var(--weight-semibold);
    line-height: var(--line-compact);
  }

  .auth-gate .auth-heading h2,
  .user-management-heading h2 {
    font-size: var(--text-page-title);
    font-weight: var(--weight-bold);
    line-height: var(--line-title);
  }

  .auth-gate .auth-heading p,
  .auth-gate .auth-mode-note,
  .auth-gate .auth-security-note,
  .user-management-heading p,
  .user-table,
  .user-table td {
    font-size: var(--text-small);
    line-height: var(--line-body);
  }

  .user-table th {
    font-size: var(--text-meta);
    font-weight: var(--weight-semibold);
  }

  /* 制度文档：保留编辑感，但提高正文可读性。 */
  .policy-dialog-heading h2 {
    font-size: var(--text-display);
  }

  .policy-dialog-heading p,
  .policy-summary p,
  .policy-application-grid p,
  .policy-salary-details p,
  .policy-weight-note,
  .policy-system-note p,
  .policy-dialog-footer p {
    font-size: var(--text-small);
    line-height: 1.75;
  }

  .policy-section-label,
  .policy-dialog-code,
  .policy-fact-grid span,
  .policy-cycle-strip span,
  .policy-cycle-strip small,
  .policy-timeline span,
  .policy-grade-table th,
  .policy-grade-table td {
    font-size: var(--text-meta);
    line-height: var(--line-compact);
  }

  .policy-grade-table td {
    font-size: var(--text-small);
  }

  /* 工资与受限信息只在授权界面显示，仍采用统一层级。 */
  .salary-pay-label,
  .salary-pay-note,
  .salary-pay-meta,
  .salary-pay-breakdown span {
    font-size: var(--text-meta);
    line-height: var(--line-compact);
  }

  .salary-pay-total,
  .salary-pay-breakdown strong {
    font-size: var(--text-emphasis);
    font-weight: var(--weight-bold);
  }

  /* 状态反馈与表格通用规则 */
  .data-table,
  .role-table {
    font-size: var(--text-small);
  }

  .data-table th,
  .role-table th {
    font-size: var(--text-meta);
    font-weight: var(--weight-semibold);
  }

  .data-table td,
  .role-table td,
  .person-cell strong {
    font-size: var(--text-small);
    line-height: var(--line-compact);
  }

  .person-cell small,
  .status-pill,
  .text-button,
  .queue-count {
    font-size: var(--text-meta);
    line-height: var(--line-compact);
  }

  .toast {
    font-size: var(--text-body);
    line-height: var(--line-body);
  }

  @media (max-width: 820px) {
    :root {
      --text-page-title: 28px;
      --text-section-title: 22px;
      --text-card-title: 19px;
    }

    body,
    button,
    input,
    textarea,
    select,
    .button {
      font-size: var(--text-body);
    }

    .nav-item {
      font-size: var(--text-small);
    }

    .dashboard-timeline-heading h2 {
      font-size: var(--text-section-title);
    }

    .result-gallery-heading.is-meta-only {
      grid-template-columns: minmax(0, 1fr);
    }

    .result-gallery-heading.is-meta-only .result-gallery-meta {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas:
        "month"
        "completion";
      align-items: center;
      justify-items: start;
      gap: 6px 10px;
      width: 100%;
    }

    .result-month-control {
      grid-column: auto;
    }

    .result-month-control input {
      width: 100%;
    }

    #result-complete-count {
      grid-column: auto;
      grid-row: auto;
    }

    .department-kpi-overview {
      grid-template-columns: minmax(0, 1fr);
    }

    .department-kpi-heading {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 12px;
    }

    .department-kpi-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (max-width: 430px) {
    .topbar h1,
    .auth-gate .auth-heading h2 {
      font-size: 26px;
    }

    .dashboard-timeline-track li > div {
      grid-template-columns: 76px minmax(0, 1fr);
    }

    .department-kpi-heading {
      display: block;
    }

    .department-kpi-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}

html {
  min-width: 0;
}

@media print {
  body {
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 11pt;
    line-height: 1.55;
  }
}


/* v1.2.2 · 主管与分管领导考评身份页头 */
.role-intro {
  grid-template-columns: minmax(300px, 1fr) minmax(250px, 0.7fr) 140px;
  gap: 14px;
  padding: 18px 20px;
}

.role-intro-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.role-intro-copy h2 {
  margin-top: 4px;
}

.role-intro-copy p {
  max-width: 600px;
  margin-top: 8px;
}

.role-reviewer-profile {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 88px;
  padding: 12px 14px;
  border: 1px solid #cddcf7;
  border-left: 3px solid #2f6fe4;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 8px 24px rgba(34, 68, 127, 0.08);
}

.role-intro-secondary .role-reviewer-profile {
  border-color: #d9d2f7;
  border-left-color: #6555c6;
}

.role-reviewer-photo-slot,
.role-reviewer-photo {
  width: 54px;
  height: 54px;
}

.role-reviewer-photo {
  display: block;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #e7eef9;
  box-shadow: 0 0 0 1px #c9d7ed;
  object-fit: cover;
}

.role-reviewer-photo.photo-placeholder {
  display: grid;
  place-items: center;
  color: #6680a5;
}

.role-reviewer-photo.photo-placeholder svg {
  width: 25px;
  height: 25px;
}

.role-reviewer-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.role-reviewer-copy span {
  color: #6d7b94;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.role-reviewer-copy strong {
  overflow: hidden;
  color: #173451;
  font-size: 18px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-intro-secondary .role-reviewer-copy strong {
  color: #44369b;
}

.role-reviewer-copy small {
  overflow: hidden;
  color: #6f7d92;
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-intro .role-formula {
  min-height: 88px;
  border-radius: 7px;
}

@media (max-width: 1060px) {
  .role-intro {
    grid-template-columns: minmax(0, 1fr) 140px;
  }

  .role-intro-copy {
    grid-column: 1 / -1;
  }

  .role-reviewer-profile {
    min-height: 82px;
  }
}

@media (max-width: 680px) {
  .role-intro {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px;
  }

  .role-intro-copy,
  .role-reviewer-profile,
  .role-intro .role-formula {
    grid-column: auto;
  }

  .role-reviewer-profile {
    min-height: 76px;
    padding: 10px 12px;
  }

  .role-intro .role-formula {
    min-height: 72px;
    grid-template-columns: 1fr auto;
    align-items: center;
    justify-items: start;
    padding: 10px 12px;
  }

  .role-intro .role-formula strong {
    grid-row: 1 / 3;
    grid-column: 2;
    margin: 0;
  }
}


/* v1.3.1 · 员工本人月度自评、头像等级角标与最终分数卡 */
.id-person-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  align-items: center;
  gap: 12px;
}

.id-person-details {
  min-width: 0;
}

.id-person-name-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.id-person-name-row h3 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.id-final-score {
  display: grid;
  min-width: 0;
  gap: 5px;
  justify-items: stretch;
  padding: 8px;
  border: 1px solid #d8d3f5;
  border-left: 3px solid #5a38dc;
  border-radius: 7px;
  background: linear-gradient(145deg, #f8f6ff 0%, #eeebff 100%);
}

.id-final-score > span:first-child {
  color: #655d86;
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.06em;
}

.final-score-value {
  display: flex;
  min-width: 0;
  min-height: 42px;
  align-items: baseline;
  justify-content: flex-start;
  gap: 4px;
  padding: 4px 9px 5px;
  border: 1px solid rgba(90, 56, 220, 0.1);
  border-radius: 5px;
  background: #fff;
  font-variant-numeric: tabular-nums;
}

.final-score-value strong {
  color: #3d25b5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
  font-weight: 760;
  line-height: 1;
  letter-spacing: -0.03em;
}

.final-score-value small {
  color: #6b638b;
  font-size: 10px;
  font-weight: 720;
}

.final-score-value.is-waiting {
  align-items: center;
}

.final-score-value.is-waiting strong {
  color: #aaa5bb;
  font-size: 22px;
}

.final-score-value.is-waiting small {
  white-space: nowrap;
}

.id-name-grade {
  display: inline-grid;
  width: 57px;
  height: 57px;
  flex: 0 0 57px;
  place-items: center;
  border: 1px solid #d7e1ee;
  border-radius: 12px;
  background: #f7f9ff;
  box-shadow: none;
}

.id-name-grade .level-emblem {
  width: 51px;
  height: 51px;
  flex: 0 0 51px;
}

.id-name-grade .level-emblem-code {
  font-size: 13px;
}

.id-self-result {
  background: #f5f8ff !important;
}

.self-assessment-value {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.self-assessment-value > small {
  color: #737d93;
  font-size: 8px;
  line-height: 1.3;
  white-space: nowrap;
}

.self-assessment-open {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.self-assessment-open .level-badge {
  outline: 2px solid rgba(47, 111, 228, 0.18);
  outline-offset: 1px;
  transition: outline-color 160ms ease, transform 160ms ease;
}

.self-assessment-open:hover .level-badge,
.self-assessment-open:focus-visible .level-badge {
  outline-color: #2f6fe4;
  transform: translateY(-1px);
}

.self-assessment-modal {
  --self-accent: #1769e0;
  --self-accent-strong: #0f55bd;
  --self-text: #14233d;
  --self-secondary: #5c6b82;
  --self-border: #d9e1ed;
  --self-surface: #ffffff;
  --self-surface-secondary: #f5f7fb;
}

.self-assessment-card {
  width: min(760px, calc(100vw - 28px));
  border: 1px solid rgba(20, 45, 80, 0.15);
  border-radius: 18px;
  background: var(--self-surface-secondary);
  box-shadow: 0 24px 80px rgba(14, 35, 65, 0.28), 0 4px 16px rgba(14, 35, 65, 0.1);
}

.self-assessment-heading {
  align-items: flex-start;
  padding: 24px 26px 20px;
  border-bottom: 1px solid var(--self-border);
  background: var(--self-surface);
}

.self-assessment-heading-copy {
  min-width: 0;
}

.self-assessment-heading .eyebrow {
  display: inline-flex;
  margin-bottom: 7px;
  color: var(--self-accent-strong);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.04em;
}

.self-assessment-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.self-assessment-title-row h2 {
  margin: 0;
  color: var(--self-text);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 720;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.self-assessment-record-badge {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 4px 9px;
  color: #37516e;
  border: 1px solid #d7e1ec;
  border-radius: 999px;
  background: #f3f6fa;
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
}

.self-assessment-heading p {
  max-width: 590px;
  margin: 9px 0 0;
  color: var(--self-secondary);
  font-size: 13px;
  line-height: 1.6;
}

.self-assessment-choice-fieldset {
  min-width: 0;
  margin: 0;
  padding: 20px 24px 0;
  border: 0;
}

.self-assessment-choice-fieldset legend {
  width: 100%;
  padding: 0 0 10px;
  color: var(--self-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.self-assessment-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.self-assessment-card .self-assessment-option {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 92px;
  align-content: center;
  justify-items: center;
  gap: 7px;
  padding: 12px 8px;
  border: 1px solid var(--self-border);
  border-radius: 12px;
  background: var(--self-surface);
  box-shadow: 0 1px 2px rgba(23, 44, 73, 0.04);
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.self-assessment-option:hover {
  border-color: #9dbbe4;
  background: #fafdff;
}

.self-assessment-option:focus-within {
  outline: 3px solid rgba(23, 105, 224, 0.24);
  outline-offset: 2px;
}

.self-assessment-option:has(input:checked) {
  border-color: var(--self-accent);
  background: #edf5ff;
  box-shadow: inset 0 0 0 1px var(--self-accent), 0 4px 12px rgba(23, 105, 224, 0.12);
}

.self-assessment-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.self-assessment-option > .level-emblem {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  filter: saturate(0.9);
  transition: filter 150ms ease, transform 150ms ease;
}

.self-assessment-option > .level-emblem .level-emblem-code {
  font-size: 12px !important;
}

.self-assessment-option:has(input:checked) > .level-emblem {
  filter: saturate(1.08) drop-shadow(0 5px 7px rgba(23, 55, 95, 0.18));
  transform: scale(1.04);
}

.self-assessment-option-copy {
  display: grid;
  justify-items: center;
  text-align: center;
}

.self-assessment-option-copy strong {
  color: var(--self-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.self-assessment-option-copy small {
  display: none;
}

.self-assessment-option-check {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: var(--self-accent);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  transform: scale(0.78);
  transition: opacity 150ms ease, transform 150ms ease;
}

.self-assessment-option:has(input:checked) .self-assessment-option-check {
  opacity: 1;
  transform: scale(1);
}

.self-assessment-choice-detail {
  display: flex;
  min-height: 62px;
  align-items: center;
  gap: 11px;
  margin: 12px 24px 0;
  padding: 11px 13px;
  color: var(--self-secondary);
  border: 1px solid var(--self-border);
  border-radius: 12px;
  background: var(--self-surface);
}

.self-assessment-choice-symbol {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  color: #7a8798;
  border-radius: 50%;
  background: #e9edf3;
  font-size: 15px;
  font-weight: 800;
}

.self-assessment-choice-detail > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.self-assessment-choice-detail strong {
  color: var(--self-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.self-assessment-choice-detail span:last-child {
  color: var(--self-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.self-assessment-choice-detail.has-selection {
  border-color: #b8cff1;
  background: #f4f8ff;
}

.self-assessment-choice-detail.has-selection .self-assessment-choice-symbol {
  color: #fff;
  background: var(--self-accent);
}

.self-assessment-policy-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 24px 0;
  padding: 11px 13px;
  border: 1px solid #dfe5ed;
  border-radius: 12px;
  background: #eef2f7;
}

.self-assessment-policy-icon {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  color: #31506f;
  border: 1px solid #cbd7e4;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.self-assessment-policy-note > div {
  display: grid;
  gap: 2px;
}

.self-assessment-policy-note strong {
  color: #29445f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.self-assessment-policy-note span:last-child {
  color: #5d6c80;
  font-size: 11px;
  line-height: 1.5;
}

.self-assessment-card .modal-actions {
  gap: 10px;
  margin-top: 18px;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--self-border);
  background: rgba(255, 255, 255, 0.78);
}

.self-assessment-card .modal-actions .button {
  min-height: 44px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
}

.self-assessment-card .modal-actions .button-primary {
  min-width: 150px;
  background: var(--self-accent);
}

.self-assessment-card .modal-actions .button-primary:hover:not(:disabled) {
  background: var(--self-accent-strong);
}

.self-assessment-card .modal-actions .button-primary:disabled {
  color: #8290a3;
  border-color: #d8dee7;
  background: #e6eaf0;
  box-shadow: none;
  cursor: not-allowed;
}

@media (max-width: 620px) {
  .id-person-copy {
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 8px;
  }

  .id-final-score {
    padding: 6px;
  }

  .final-score-value {
    min-height: 38px;
  }

  .final-score-value strong {
    font-size: 24px;
  }

  .id-name-grade {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border-radius: 10px;
  }

  .id-name-grade .level-emblem {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .id-result-stack .id-self-result {
    grid-column: 1 / -1;
    grid-row: 1;
    grid-template-columns: 66px minmax(0, 1fr) !important;
  }

  .id-primary-result {
    grid-row: 2;
  }

  .id-secondary-result {
    grid-row: 2;
  }

  .self-assessment-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .self-assessment-option:last-child {
    grid-column: 1 / -1;
  }

  .self-assessment-card {
    width: min(100% - 16px, 760px);
    max-height: calc(100dvh - 16px);
    border-radius: 16px;
  }

  .self-assessment-heading {
    padding: 20px 18px 16px;
  }

  .self-assessment-heading p {
    font-size: 12px;
  }

  .self-assessment-choice-fieldset {
    padding: 16px 18px 0;
  }

  .self-assessment-card .self-assessment-option {
    min-height: 72px;
    grid-template-columns: 44px minmax(0, 1fr) 22px;
    justify-items: start;
    gap: 9px;
    padding: 10px;
  }

  .self-assessment-option-copy {
    justify-items: start;
    text-align: left;
  }

  .self-assessment-option-check {
    position: static;
    align-self: center;
  }

  .self-assessment-choice-detail,
  .self-assessment-policy-note {
    margin-inline: 18px;
  }

  .self-assessment-card .modal-actions {
    padding: 14px 18px max(16px, env(safe-area-inset-bottom));
  }

  .self-assessment-card .modal-actions .button {
    flex: 1;
  }

  .self-assessment-card .modal-actions .button-primary {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .self-assessment-option,
  .self-assessment-option-check,
  .self-assessment-option > .level-emblem {
    transition: none;
  }
}

@media (prefers-contrast: more) {
  .self-assessment-option,
  .self-assessment-choice-detail,
  .self-assessment-policy-note {
    border-color: #8293aa;
  }

  .self-assessment-option:has(input:checked) {
    border-width: 2px;
    border-color: #004da8;
  }
}


/* v1.3.9 · 紧凑型员工绩效数据档案卡。 */

@media screen {
  .performance-id-card {
    grid-template-columns: 82px minmax(0, 1fr) !important;
    grid-template-rows: auto 92px auto auto auto auto !important;
    gap: 0 14px !important;
    padding: 14px !important;
    border: 1px solid #d9e2f2 !important;
    border-top: 0 !important;
    border-radius: 9px !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(38, 58, 108, 0.08) !important;
    overflow: hidden;
  }

  .performance-id-card:hover {
    border-color: #c5d4ee !important;
    box-shadow: 0 12px 28px rgba(38, 58, 108, 0.12) !important;
    transform: translateY(-1px);
  }

  .performance-id-card::before,
  .performance-id-card::after {
    display: none !important;
  }

  .id-card-topline {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 36px !important;
    margin: -14px -14px 12px !important;
    padding: 9px 13px !important;
    border-radius: 9px 9px 0 0 !important;
    background: linear-gradient(108deg, #2f6fe4 0%, #4564d7 100%) !important;
    font-size: 10px !important;
    letter-spacing: 0.045em !important;
  }

  .id-card-topline b {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.035em;
  }

  .performance-id-card .id-photo-area,
  .performance-id-card:has(.id-attendance-summary) .id-photo-area {
    grid-column: 1;
    grid-row: 2;
    width: 74px !important;
    height: 74px !important;
    align-self: center !important;
    justify-self: center;
    aspect-ratio: 1;
    overflow: visible;
  }

  .performance-id-card .id-photo {
    width: 74px !important;
    height: 74px !important;
    aspect-ratio: 1;
  }

  .performance-id-card .id-person-copy,
  .performance-id-card:has(.id-attendance-summary) .id-person-copy {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 236px;
    min-width: 0;
    height: 100%;
    align-self: stretch;
    align-items: center;
    gap: 12px;
    padding: 0 !important;
  }

  .id-person-details > small {
    display: none;
  }

  .id-person-copy h3 {
    margin: 0 !important;
    font-size: 23px !important;
    line-height: 1.12 !important;
  }

  .id-person-name-row {
    margin-bottom: 4px;
  }

  .id-name-grade {
    width: 57px;
    height: 57px;
    flex-basis: 57px;
    border-radius: 12px;
  }

  .id-name-grade .level-emblem {
    width: 51px;
    height: 51px;
    flex-basis: 51px;
  }

  .id-person-copy p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #6f7890;
    font-size: 11px !important;
    line-height: 1.4 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .id-final-score {
    align-self: center;
    gap: 3px;
    padding: 7px;
    border-color: #ded9f4;
    border-left-width: 3px;
    border-radius: 6px;
    background: #f5f3ff;
  }

  .id-final-score > span:first-child {
    font-size: 9px;
  }

  .score-equation {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 13px minmax(0, 1fr) 13px minmax(0, 1fr);
    min-width: 0;
    min-height: 48px;
    align-items: stretch;
    padding: 4px;
    border: 1px solid rgba(90, 56, 220, 0.08);
    border-radius: 5px;
    background: #fff;
    font-variant-numeric: tabular-nums;
  }

  .score-equation-part {
    display: grid;
    min-width: 0;
    align-content: center;
    justify-items: center;
    gap: 3px;
    padding: 2px 3px;
  }

  .score-equation-part small {
    color: #766f90;
    font-size: 8px;
    font-weight: 680;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
  }

  .score-equation-part strong {
    color: #343047;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
    font-weight: 760;
    line-height: 1;
  }

  .score-equation-part.is-total {
    border-radius: 4px;
    background: #eeebff;
  }

  .score-equation-part.is-total small,
  .score-equation-part.is-total strong {
    color: #3d25b5;
  }

  .score-equation > i {
    align-self: center;
    color: #9a92b9;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    text-align: center;
  }

  .final-score-value {
    min-height: 38px;
    padding: 3px 8px 4px;
    border-color: rgba(90, 56, 220, 0.08);
  }

  .final-score-value strong {
    font-size: 25px;
  }

  .performance-id-card .id-result-stack,
  .performance-id-card:has(.id-attendance-summary) .id-result-stack {
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto;
    min-width: 0;
    margin: 0 0 10px;
    border: 1px solid #dfe6f2;
    border-radius: 7px;
    background: #f8faff;
    box-shadow: none;
    overflow: hidden;
  }

  .id-result-stack > div,
  .id-result-stack .id-self-result,
  .id-result-stack .id-primary-result,
  .id-result-stack .id-secondary-result {
    grid-column: auto;
    grid-row: auto;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    min-width: 0;
    min-height: 64px;
    align-content: center;
    align-items: center;
    gap: 7px;
    padding: 8px 9px !important;
    border: 0;
    border-right: 1px solid #e2e8f3;
    background: transparent !important;
  }

  .id-result-stack > div:last-child {
    border-right: 0;
  }

  .id-result-stack > div > span:first-child {
    color: #68748f;
    font-size: 10px !important;
    font-weight: 720;
    line-height: 1.35;
    white-space: normal;
  }

  .id-result-stack .level-badge,
  .id-result-stack .final-grade-badge {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    justify-content: flex-start;
    padding: 3px 6px;
    border: 1px solid rgba(62, 126, 104, 0.1);
    border-radius: 5px;
    box-shadow: none;
  }

  .id-result-stack .level-emblem {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
  }

  .id-result-stack .level-badge b,
  .id-result-stack .final-grade-badge b {
    font-size: 11px;
  }

  .self-assessment-value {
    gap: 1px;
  }

  .self-assessment-value > small {
    overflow: hidden;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .performance-id-card .id-attendance-summary,
  .performance-id-card:has(.id-attendance-summary) .id-attendance-summary {
    grid-column: 1 / -1;
    grid-row: 4;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    min-width: 0;
    min-height: 60px;
    margin: 0 0 10px;
    padding: 0;
    border: 1px solid #dce8e4;
    border-left: 3px solid var(--green);
    border-radius: 7px;
    background: #f6faf8;
    overflow: hidden;
  }

  .id-attendance-heading {
    display: grid;
    align-content: center;
    gap: 3px;
    margin: 0;
    padding: 9px 11px;
    border-right: 1px solid #dce8e4;
  }

  .id-attendance-heading span {
    font-size: 10px;
  }

  .id-attendance-heading strong {
    font-size: 9px;
  }

  .id-attendance-summary dl {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    min-width: 0;
    margin: 0;
    padding: 8px 9px;
  }

  .id-attendance-summary dl > div {
    display: grid;
    align-content: center;
    min-width: 0;
    padding: 2px 9px;
    border: 0;
    border-right: 1px solid #e3ebe8;
    background: transparent;
  }

  .id-attendance-summary dl > div:last-child {
    border-right: 0;
  }

  .id-attendance-summary dt {
    font-size: 8px;
  }

  .id-attendance-summary dd {
    margin-top: 3px;
    font-size: 10px;
  }

  .id-attendance-summary > p {
    align-self: center;
    margin: 0;
    padding: 10px 12px;
  }

  .performance-id-card .id-kpi-summary,
  .performance-id-card:has(.id-attendance-summary) .id-kpi-summary {
    grid-column: 1 / -1;
    grid-row: 5;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 10px;
    min-width: 0;
    margin: 0;
    padding: 9px 10px 10px;
    border: 1px solid #e0e5f6;
    border-left: 3px solid var(--blue);
    border-radius: 7px;
    background: #f5f6ff;
    box-shadow: none;
  }

  .performance-id-card:not(:has(.id-attendance-summary)) .id-kpi-summary {
    grid-row: 4;
  }

  .id-kpi-head {
    gap: 10px;
  }

  .id-kpi-head span {
    font-size: 10px;
  }

  .id-kpi-head b {
    font-size: 13px;
  }

  .id-kpi-view-button {
    min-height: 28px;
    padding: 5px 9px;
    font-size: 9px;
  }

  .id-kpi-breakdown {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
  }

  .id-kpi-business-item {
    min-height: 28px;
    padding: 5px 7px;
  }

  .id-kpi-business-item dt {
    font-size: 9px;
  }

  .id-kpi-business-item dd {
    font-size: 11px;
  }

  .performance-id-card .id-card-footer,
  .performance-id-card:has(.id-attendance-summary) .id-card-footer {
    grid-column: 1 / -1;
    grid-row: 6;
    align-items: center;
    min-height: 27px;
    margin: 9px 0 -4px;
    padding-top: 8px;
    border-top: 1px solid #e5e9f2;
    font-size: 9px;
  }

  .performance-id-card:not(:has(.id-attendance-summary)) .id-card-footer {
    grid-row: 5;
  }

  @media (max-width: 620px) {
    .performance-id-card {
      grid-template-columns: 74px minmax(0, 1fr) !important;
      grid-template-rows: auto 88px auto auto auto auto !important;
      gap: 0 10px !important;
      padding: 12px !important;
    }

    .id-card-topline {
      margin: -12px -12px 10px !important;
    }

    .performance-id-card .id-photo-area,
    .performance-id-card:has(.id-attendance-summary) .id-photo-area,
    .performance-id-card .id-photo {
      width: 68px !important;
      height: 68px !important;
    }

    .performance-id-card .id-person-copy,
    .performance-id-card:has(.id-attendance-summary) .id-person-copy {
      grid-template-columns: minmax(0, 1fr) 154px;
      gap: 7px;
    }

    .id-person-copy h3 {
      font-size: 19px !important;
    }

    .id-person-name-row {
      gap: 5px;
    }

    .id-name-grade {
      width: 38px;
      height: 38px;
      flex-basis: 38px;
      border-radius: 10px;
    }

    .id-name-grade .level-emblem {
      width: 34px;
      height: 34px;
      flex-basis: 34px;
    }

    .id-person-copy p {
      font-size: 10px !important;
    }

    .id-final-score {
      padding: 5px;
    }

    .score-equation {
      grid-template-columns: minmax(0, 1fr) 9px minmax(0, 1fr) 9px minmax(0, 1fr);
      min-height: 46px;
      padding: 3px;
    }

    .score-equation-part {
      gap: 2px;
      padding-inline: 1px;
    }

    .score-equation-part small {
      max-width: 42px;
      font-size: 7px;
      white-space: normal;
    }

    .score-equation-part strong {
      font-size: 17px;
    }

    .score-equation > i {
      font-size: 10px;
    }

    .final-score-value strong {
      font-size: 23px;
    }

    .performance-id-card .id-result-stack,
    .performance-id-card:has(.id-attendance-summary) .id-result-stack {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .id-result-stack > div,
    .id-result-stack .id-self-result,
    .id-result-stack .id-primary-result,
    .id-result-stack .id-secondary-result {
      grid-template-columns: 58px minmax(0, 1fr) !important;
      min-height: 58px;
      padding: 7px 8px !important;
    }

    .id-result-stack .id-self-result {
      grid-column: 1 / -1;
      border-right: 0;
      border-bottom: 1px solid #e2e8f3;
    }

    .id-result-stack .id-primary-result {
      grid-column: 1;
      grid-row: 2;
    }

    .id-result-stack .id-secondary-result {
      grid-column: 2;
      grid-row: 2;
      border-right: 0;
    }

    .performance-id-card .id-attendance-summary,
    .performance-id-card:has(.id-attendance-summary) .id-attendance-summary {
      grid-template-columns: 1fr;
    }

    .id-attendance-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 10px;
      border-right: 0;
      border-bottom: 1px solid #dce8e4;
    }

    .id-attendance-summary dl {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      padding: 5px 7px;
    }

    .id-attendance-summary dl > div {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      padding: 6px 7px;
      border-bottom: 1px solid #e3ebe8;
    }

    .id-attendance-summary dl > div:nth-child(2n) {
      border-right: 0;
    }

    .id-attendance-summary dl > div:nth-last-child(-n + 2) {
      border-bottom: 0;
    }

    .id-attendance-summary dd {
      margin-top: 0;
    }

    .id-kpi-breakdown {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 4px;
    }

    .id-kpi-business-item {
      display: grid;
      justify-items: center;
      gap: 3px;
      padding: 5px 2px;
    }

    .id-kpi-view-button {
      width: auto;
    }
  }
}

@media print {
  .performance-id-card {
    break-inside: avoid;
    box-shadow: none !important;
  }
}

/* 员工档案编辑器 v2：桌面双栏、固定标题与操作区、内容区独立滚动。 */

@media screen {
  #employee-dialog {
    width: min(1040px, calc(100vw - 40px));
    max-height: calc(100dvh - 32px);
  }

  #employee-form.compact-modal {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 100%;
    height: min(760px, calc(100dvh - 32px));
    max-height: calc(100dvh - 32px);
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  #employee-form > .modal-heading {
    z-index: 3;
    min-height: 76px;
    align-items: center;
    padding: 15px 22px;
    border-bottom: 1px solid #dce5f4;
    background: #fff;
  }

  #employee-form > .modal-heading h2 {
    margin-top: 3px;
    font-size: 25px;
  }

  #employee-form .employee-editor-body {
    display: grid;
    grid-template-columns: minmax(340px, 0.9fr) minmax(470px, 1.2fr);
    align-items: start;
    gap: 14px;
    min-height: 0;
    padding: 15px 18px 18px;
    overflow: auto;
    overscroll-behavior: contain;
    background: #f5f8fd;
  }

  #employee-form .employee-editor-column {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 12px;
  }

  #employee-form .employee-editor-sensitive:not(:has(> section:not([hidden]))) {
    display: none;
  }

  #employee-form .employee-editor-body:not(:has(.employee-editor-sensitive > section:not([hidden]))) {
    grid-template-columns: minmax(0, 620px);
    justify-content: center;
  }

  #employee-form .photo-upload-block {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 14px;
    margin: 0;
    padding: 12px;
    border-color: #dce5f4;
    background: #fff;
  }

  #employee-form .employee-photo-preview {
    width: 82px;
    height: 82px;
    aspect-ratio: 1;
  }

  #employee-form .photo-upload-block p {
    margin: 4px 0 8px;
    line-height: 1.45;
  }

  #employee-form .photo-upload-actions {
    gap: 8px;
  }

  #employee-form .photo-upload-actions .button {
    min-height: 34px;
  }

  #employee-form .employee-editor-basic-fields,
  #employee-form .employee-profile-fields,
  #employee-form .employee-employment-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
  }

  #employee-form.compact-modal .employee-editor-body .field {
    min-width: 0;
    margin: 0;
  }

  #employee-form .employee-editor-body input,
  #employee-form .employee-editor-body select {
    min-height: 40px;
  }

  #employee-form .employee-private-fields,
  #employee-form .employee-salary-fields {
    margin: 0;
    padding: 14px;
  }

  #employee-form .employee-private-heading,
  #employee-form .employee-salary-heading {
    gap: 12px;
  }

  #employee-form .employee-private-heading h3,
  #employee-form .employee-salary-heading h3 {
    font-size: 17px;
  }

  #employee-form .employee-private-heading p,
  #employee-form .employee-salary-heading p {
    margin-top: 4px;
    line-height: 1.45;
  }

  #employee-form .employee-private-inputs,
  #employee-form .employee-salary-inputs {
    gap: 9px;
    margin-top: 11px;
  }

  #employee-form .employee-private-security,
  #employee-form .employee-salary-security {
    margin-top: 8px;
  }

  #employee-form .employee-salary-total {
    min-width: 140px;
    padding: 9px 11px;
  }

  #employee-form .employee-salary-total strong {
    font-size: 17px;
  }

  #employee-form > .modal-actions {
    z-index: 3;
    min-height: 64px;
    align-items: center;
    margin: 0;
    padding: 11px 18px;
    border-top: 1px solid #dce5f4;
    background: #fff;
  }

  #employee-form > .modal-actions .button {
    min-width: 104px;
  }

  @media (max-width: 860px) {
    #employee-dialog {
      width: min(720px, calc(100vw - 24px));
      max-height: calc(100dvh - 20px);
    }

    #employee-form.compact-modal {
      height: calc(100dvh - 20px);
      max-height: calc(100dvh - 20px);
    }

    #employee-form .employee-editor-body {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 520px) {
    #employee-dialog {
      width: 100%;
      max-height: 100dvh;
      margin-bottom: 0;
    }

    #employee-form.compact-modal {
      height: 100dvh;
      max-height: 100dvh;
      border-radius: 9px 9px 0 0;
    }

    #employee-form > .modal-heading {
      min-height: 70px;
      padding: 12px 16px;
    }

    #employee-form > .modal-heading h2 {
      font-size: 22px;
    }

    #employee-form .employee-editor-body {
      gap: 10px;
      padding: 12px;
    }

    #employee-form .employee-editor-column {
      gap: 10px;
    }

    #employee-form .employee-editor-basic-fields,
    #employee-form .employee-profile-fields,
    #employee-form .employee-employment-fields {
      grid-template-columns: 1fr;
    }

    #employee-form .employee-profile-fields .employee-profile-wide {
      grid-column: auto;
    }

    #employee-form .photo-upload-block {
      grid-template-columns: 72px minmax(0, 1fr);
      padding: 10px;
    }

    #employee-form .employee-photo-preview {
      width: 72px;
      height: 72px;
    }

    #employee-form > .modal-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    }

    #employee-form > .modal-actions .button {
      width: 100%;
      min-width: 0;
    }
  }
}

@media print {
  #employee-dialog {
    display: none !important;
  }
}


/* 全站月份导航：个人会话独立选择，所有业务页面共享同一月份口径。 */

@media screen {
  .global-month-context {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid #b7cdf8;
    border-radius: 9px;
    background: linear-gradient(135deg, #f8fbff 0%, #edf3ff 100%);
    box-shadow: 0 9px 24px rgba(35, 82, 164, 0.1);
  }

  .global-month-context[hidden] {
    display: none;
  }

  .global-month-context .result-gallery-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "month completion";
    align-items: center;
    gap: 18px;
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .global-month-context .result-month-control {
    grid-area: month;
    min-width: 0;
  }

  .result-month-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }

  .global-month-context .result-month-caption {
    display: block;
    margin-bottom: 2px;
    color: #60708f;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.3;
    letter-spacing: 0.08em;
  }

  #month-year-label {
    display: block;
    color: #153568;
    font-size: 18px;
    font-weight: 850;
    line-height: 1.2;
  }

  .result-month-button:focus-visible {
    outline: 3px solid rgba(47, 111, 228, 0.24);
    outline-offset: 2px;
  }

  .result-month-buttons {
    display: grid;
    grid-template-columns: repeat(12, minmax(48px, 1fr));
    gap: 6px;
    min-width: 0;
  }

  .result-month-button {
    min-width: 0;
    min-height: 42px;
    padding: 7px 4px;
    color: #405272;
    border: 1px solid #cfdbf2;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.92);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  }

  .result-month-button span {
    color: inherit;
    font-size: 16px;
    font-weight: 850;
  }

  .result-month-button:hover:not(:disabled):not(.is-selected) {
    color: #2058c1;
    border-color: #7fa5ef;
    background: #fff;
    transform: translateY(-1px);
  }

  .result-month-button.is-selected {
    color: #fff;
    border-color: #2058c1;
    background: linear-gradient(135deg, #2f6fe4 0%, #2058c1 100%);
    box-shadow: 0 7px 16px rgba(31, 88, 191, 0.24);
  }

  .result-month-button.is-complete:not(.is-selected) {
    color: #1f6048;
    border-color: #8bc7ae;
    background: #e7f5ee;
  }

  .result-month-button.is-selected.is-complete {
    color: #fff;
    border-color: #2058c1;
    background: linear-gradient(135deg, #2f6fe4 0%, #2058c1 100%);
    box-shadow: 0 7px 16px rgba(31, 88, 191, 0.24);
  }

  .result-month-button:disabled {
    cursor: default;
  }

  .result-month-button.is-locked,
  .result-month-button.is-locked:disabled {
    color: #626e84;
    border-color: #d8deea;
    background: #f2f4f8;
    box-shadow: none;
    opacity: 1;
    cursor: not-allowed;
  }

  .global-month-context .result-completion {
    grid-area: completion;
    align-self: end;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    flex: 0 0 auto;
    min-width: 118px;
    min-height: 62px;
    padding: 12px 15px;
    color: #fff;
    border: 1px solid #1f58bf;
    border-radius: 7px;
    background: linear-gradient(135deg, #2f6fe4 0%, #2058c1 100%);
    box-shadow: 0 7px 16px rgba(31, 88, 191, 0.18);
  }

  .global-month-context #result-complete-count {
    grid-area: auto;
    margin: 0;
    color: #fff;
    font-family: inherit;
    font-size: 21px;
    font-weight: 850;
    line-height: 1.15;
  }

  .global-month-context .result-completion small {
    grid-area: auto;
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.3;
  }

  .global-month-scope {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding-top: 8px;
    border-top: 1px solid rgba(183, 205, 248, 0.74);
  }

  .global-month-scope-mark {
    display: grid;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    place-items: center;
    color: #2058c1;
    border: 1px solid #b7cdf8;
    border-radius: 5px;
    background: #fff;
    font-size: 10px;
    font-weight: 850;
  }

  .global-month-scope p {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 9px;
    min-width: 0;
    margin: 0;
    color: #60708f;
    font-size: 11px;
    line-height: 1.45;
  }

  .global-month-scope strong {
    color: #153568;
    font-weight: 800;
  }

  .result-month-control.is-readonly .result-month-heading::after {
    content: "只读";
    margin-left: auto;
    padding: 3px 7px;
    color: #60708f;
    border: 1px solid #cfdbf2;
    border-radius: 4px;
    background: #fff;
    font-size: 10px;
    font-weight: 750;
  }

  .result-gallery-heading.is-kpi-only {
    display: block;
  }

  .result-gallery-heading.is-kpi-only .department-kpi-overview {
    width: 100%;
  }

  @media (max-width: 820px) {
    .global-month-context {
      gap: 7px;
      margin-bottom: 12px;
      padding: 10px;
    }

    .global-month-context .result-gallery-meta {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
    }

    .result-month-buttons {
      display: flex;
      gap: 6px;
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      padding: 2px 2px 8px;
      scroll-snap-type: x proximity;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .result-month-buttons::-webkit-scrollbar {
      display: none;
    }

    .result-month-button {
      flex: 0 0 62px;
      scroll-snap-align: center;
    }

    .global-month-context .result-completion {
      min-width: 100px;
      padding: 10px 12px;
    }
  }

  @media (max-width: 540px) {
    .global-month-context .result-gallery-meta {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas:
        "month"
        "completion";
      gap: 8px;
    }

    .result-month-heading {
      margin-bottom: 8px;
    }

    #month-year-label {
      font-size: 17px;
    }

    .result-month-button {
      flex-basis: 60px;
      min-height: 44px;
    }

    .global-month-context .result-completion {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      justify-content: flex-start;
      gap: 7px;
      min-width: 0;
      min-height: 0;
      padding: 8px 11px;
    }

    .global-month-context #result-complete-count {
      font-size: 18px;
    }

    .global-month-scope p span {
      flex-basis: 100%;
    }
  }
}


.vps-command-deck,
.vps-capacity-panel,
.vps-ledger-panel,
.vps-security-note {
  border: 1px solid rgba(49, 74, 112, 0.18);
  border-radius: var(--ui-radius-panel, 9px);
  box-shadow: var(--ui-shadow, 0 8px 24px rgba(38, 58, 108, 0.08));
}

.vps-command-deck {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  overflow: hidden;
  padding: 28px 30px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(104, 175, 232, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(104, 175, 232, 0.06) 1px, transparent 1px),
    linear-gradient(135deg, #071b2e 0%, #0c3153 58%, #14517e 100%);
  background-size: 26px 26px, 26px 26px, auto;
}

.vps-command-deck::after {
  content: "WZH · NETWORK OPERATIONS";
  position: absolute;
  right: -28px;
  bottom: 12px;
  z-index: -1;
  color: rgba(255, 255, 255, 0.055);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 6vw, 82px);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.vps-command-code,
.vps-ledger-toolbar > div > span,
.vps-capacity-heading span {
  display: block;
  color: #83c2ef;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.vps-command-copy h2 {
  margin: 8px 0 10px;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: clamp(28px, 3vw, 43px);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.vps-command-copy p {
  max-width: 760px;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.75;
}

.vps-command-state {
  align-self: center;
  display: grid;
  grid-template-columns: 12px minmax(120px, 1fr);
  gap: 4px 12px;
  min-width: 230px;
  padding: 15px 16px;
  border: 1px solid rgba(156, 211, 250, 0.22);
  border-radius: 8px;
  background: rgba(3, 17, 29, 0.38);
  backdrop-filter: blur(9px);
}

.vps-command-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
}

.vps-command-state .button {
  min-height: 34px;
  color: #d9edfb;
  border-color: rgba(190, 226, 250, 0.26);
  background: rgba(255, 255, 255, 0.07);
}

.vps-command-state .button-primary:not(:disabled) {
  color: #fff;
  border-color: rgba(126, 205, 255, 0.7);
  background: linear-gradient(135deg, #1684c6, #0f639b);
}

.vps-command-state small,
.vps-command-state span {
  display: block;
  color: rgba(255, 255, 255, 0.52);
  font-size: 10px;
}

.vps-command-state strong {
  display: block;
  margin: 3px 0;
  color: #fff;
  font-size: 14px;
}

.vps-state-light {
  width: 9px;
  height: 9px;
  margin-top: 4px;
  border-radius: 50%;
  background: #f0a73a;
  box-shadow: 0 0 0 5px rgba(240, 167, 58, 0.12), 0 0 18px rgba(240, 167, 58, 0.55);
}

.vps-state-light.is-ready {
  background: #55c993;
  box-shadow: 0 0 0 5px rgba(85, 201, 147, 0.12), 0 0 18px rgba(85, 201, 147, 0.55);
}

.vps-state-light.is-syncing { animation: vps-sync-pulse 1s ease-in-out infinite; }

.vps-state-light.is-error {
  background: #e47373;
  box-shadow: 0 0 0 5px rgba(228, 115, 115, 0.12), 0 0 18px rgba(228, 115, 115, 0.45);
}

@keyframes vps-sync-pulse { 50% { opacity: .45; transform: scale(.82); } }

.vps-capacity-panel {
  margin-top: 14px;
  padding: 18px 20px 20px;
  background: #f8fbfe;
}

.vps-capacity-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.vps-capacity-heading strong {
  display: block;
  margin-top: 4px;
  color: #163755;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 21px;
  font-weight: 400;
}

.vps-capacity-heading strong b {
  color: #1c69a4;
  font-size: 27px;
}

.vps-capacity-heading p {
  margin: 0;
  color: #6b7c8e;
  font-size: 10px;
}

.vps-pool-capacity-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 10px;
}

.vps-pool-capacity {
  padding: 14px;
  border: 1px solid #d5e0e8;
  border-radius: 7px;
  background: #fff;
}

.vps-pool-capacity.is-management {
  border-color: #dfc58e;
  background: linear-gradient(135deg, #fffaf0 0%, #fff 70%);
}

.vps-pool-capacity header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}

.vps-pool-capacity header span,
.vps-pool-capacity header strong,
.vps-pool-capacity p { display: block; }
.vps-pool-capacity header span { color: #6c7e8d; font-size: 8px; font-weight: 800; letter-spacing: .15em; }
.vps-pool-capacity header strong { margin-top: 4px; color: #1c4869; font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; }
.vps-pool-capacity header em { color: #47657b; font-size: 10px; font-style: normal; }
.vps-pool-capacity header em b { color: #1e689b; font-family: Georgia, "Times New Roman", serif; font-size: 19px; font-weight: 400; }
.vps-pool-capacity.is-management header span,
.vps-pool-capacity.is-management header em b { color: #986618; }
.vps-pool-capacity.is-management header strong { color: #664615; }
.vps-pool-capacity p { margin: 10px 0 0; color: #7b8994; font-size: 9px; line-height: 1.55; }

.vps-capacity-rail {
  display: grid;
  grid-template-columns: repeat(25, minmax(4px, 1fr));
  gap: 5px;
}

.vps-capacity-rail.is-management { grid-template-columns: repeat(10, minmax(7px, 1fr)); }
.vps-capacity-rail.is-management .vps-capacity-slot { border-color: #ddcda9; background: #f4ecdd; }
.vps-capacity-rail.is-management .vps-capacity-slot.is-reserved { border-color: #bc8722; background: #e3b759; }
.vps-capacity-rail.is-management .vps-capacity-slot.is-active { border-color: #8a6424; background: #ba8c39; }
.vps-capacity-rail.is-management .vps-capacity-slot.is-suspended { border-color: #a14c4c; background: #d36c6c; }

.vps-capacity-slot {
  height: 22px;
  border: 1px solid #cdd9e4;
  border-radius: 2px;
  background: #e9eff4;
  transition: transform 160ms ease, filter 160ms ease;
}

.vps-capacity-slot:hover {
  transform: translateY(-2px);
  filter: brightness(0.96);
}

.vps-capacity-slot.is-reserved { border-color: #d6a33e; background: #f3cb75; }
.vps-capacity-slot.is-active { border-color: #368466; background: #59b28d; }
.vps-capacity-slot.is-suspended { border-color: #a14c4c; background: #d36c6c; }

.vps-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.vps-metric-grid article {
  position: relative;
  overflow: hidden;
  padding: 17px 18px 15px;
  border: 1px solid rgba(49, 74, 112, 0.16);
  border-radius: 8px;
  background: rgba(255, 253, 247, 0.92);
}

.vps-metric-grid article::after {
  content: "";
  position: absolute;
  inset: auto -18px -28px auto;
  width: 74px;
  height: 74px;
  border: 1px solid rgba(35, 93, 139, 0.08);
  border-radius: 50%;
}

.vps-metric-grid span,
.vps-metric-grid small {
  display: block;
  color: #6a7988;
  font-size: 10px;
}

.vps-metric-grid strong {
  display: block;
  margin: 5px 0 3px;
  color: #153a5a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 31px;
  font-weight: 400;
}

.vps-ledger-panel {
  overflow: hidden;
  background: rgba(255, 253, 247, 0.94);
}

.vps-ledger-toolbar {
  display: grid;
  gap: 18px;
  padding: 19px 20px;
  border-bottom: 1px solid rgba(49, 74, 112, 0.14);
}

.vps-ledger-toolbar h3 {
  margin: 4px 0 0;
  color: #173955;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 24px;
  font-weight: 400;
}

.vps-ledger-controls {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(6, minmax(108px, 1fr));
  gap: 8px;
}

.vps-ledger-controls input,
.vps-ledger-controls select {
  min-height: 38px;
  border-color: #cbd6df;
  background: #fff;
  font-size: 12px;
}

.vps-ledger-controls input,
.vps-ledger-controls select { width: 100%; }

.vps-ledger-scroll {
  overflow: visible;
  max-height: none;
}

.vps-ledger-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
}

.vps-ledger-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 11px 13px;
  color: #6c7a86;
  border-bottom: 1px solid #cfd9e1;
  background: #eef4f8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: left;
}

.vps-sort-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  margin: -5px -7px;
  padding: 5px 7px;
  color: inherit;
  border: 0;
  border-radius: 5px;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

.vps-sort-button:hover {
  color: #174d75;
  background: rgba(43, 120, 174, 0.09);
}

.vps-sort-button:focus-visible {
  outline: 3px solid rgba(43, 120, 174, 0.22);
  outline-offset: 1px;
}

.vps-sort-indicator {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  color: #8194a3;
  font-size: 14px;
  line-height: 1;
}

.vps-sort-button.is-active .vps-sort-indicator { color: #14689f; }

.vps-ledger-table td {
  padding: 12px 13px;
  color: #34495b;
  border-bottom: 1px solid #e3e9ee;
  font-size: 12px;
  vertical-align: middle;
}

.vps-ledger-table tr:hover td { background: rgba(225, 239, 249, 0.42); }

.vps-client-code {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0e4b78;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
}

.vps-client-code::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b8c4cc;
}

.vps-client-code.is-reserved::before { background: #d89d2c; }
.vps-client-code.is-active::before { background: #27815f; box-shadow: 0 0 0 4px rgba(39, 129, 95, 0.1); }
.vps-client-code.is-suspended::before { background: #b84f4f; }
.vps-client-code.is-management { color: #765016; }
.vps-client-code.is-management::before { border-radius: 2px; background: #c4933c; box-shadow: 0 0 0 4px rgba(196, 147, 60, 0.12); }

.vps-pool-tag {
  display: block;
  width: fit-content;
  margin-top: 4px;
  padding: 2px 5px;
  border: 1px solid #cddae3;
  border-radius: 3px;
  color: #667d8f;
  background: #f4f8fa;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .04em;
}

.vps-pool-tag.is-management { color: #805917; border-color: #dfc78f; background: #fff7e5; }

.vps-assignee-cell strong,
.vps-assignee-cell small {
  display: block;
}

.vps-assignee-cell strong { color: #173955; font-size: 12px; }
.vps-assignee-cell small { margin-top: 3px; color: #82909b; font-size: 10px; }

.vps-assignee-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.vps-social-media-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border: 1px solid #d9a8c7;
  border-radius: 999px;
  color: #8d2d68;
  background: #fff0f8;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
}

.vps-device-badge,
.vps-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid #d2dce4;
  border-radius: 999px;
  color: #52697c;
  background: #f7fafc;
  font-size: 10px;
  font-weight: 700;
}

.vps-device-badge.is-special { color: #885b10; border-color: #e8c170; background: #fff5d9; }
.vps-status-badge.is-reserved { color: #85590f; border-color: #e2c078; background: #fff7e3; }
.vps-status-badge.is-active { color: #24654e; border-color: #9bcbb9; background: #eaf8f2; }
.vps-status-badge.is-suspended { color: #8c3f3f; border-color: #dfaaaa; background: #fff0f0; }

.vps-qr-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid #d7dee5;
  border-radius: 4px;
  color: #7a8791;
  background: #f7f9fb;
  font-size: 10px;
  font-weight: 700;
}

.vps-qr-state::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: #aeb9c2;
}

.vps-qr-state.is-ready { color: #24654e; border-color: #9bcbb9; background: #eaf8f2; }
.vps-qr-state.is-ready::before { background: #27815f; }

.vps-qr-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.vps-qr-preview-button {
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid #a9c6da;
  border-radius: 4px;
  color: #1d608e;
  background: #f3f9fd;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.vps-qr-preview-button:hover { border-color: #4f8bb4; background: #e7f3fb; }
.vps-qr-preview-button:focus-visible { outline: 3px solid rgba(43, 120, 174, 0.22); outline-offset: 2px; }

.vps-traffic-cell strong,
.vps-traffic-cell small {
  display: block;
}

.vps-traffic-cell strong { color: #173955; }
.vps-traffic-cell small { margin-top: 2px; color: #89949d; font-size: 9px; }
.vps-traffic-cell.is-muted strong,
.vps-traffic-cell.is-muted small { color: #9aa5ad; }
.vps-traffic-cell.is-stale strong { color: #9a6117; }
.vps-traffic-cell.is-stale small { color: #a07843; }

.vps-row-actions {
  display: flex;
  gap: 6px;
  white-space: nowrap;
}

.vps-row-actions .button {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 10px;
}

.vps-security-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
  padding: 16px 18px;
  color: #41566a;
  background: #eef5fa;
}

.vps-security-note > span {
  align-self: start;
  padding: 5px 7px;
  color: #fff;
  border-radius: 3px;
  background: #1e5c88;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
}

.vps-security-note strong { color: #173955; }
.vps-security-note p { margin: 4px 0 0; font-size: 11px; line-height: 1.65; }

.vps-allocation-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1080px, calc(100vw - 48px));
  max-height: calc(100dvh - 48px);
  overflow: hidden;
}

.vps-allocation-workspace {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 18px;
  min-height: 0;
  margin-top: 18px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.vps-allocation-settings,
.vps-allocation-delivery {
  min-width: 0;
  padding: 16px;
  border: 1px solid #d8e2ea;
  border-radius: var(--ui-radius-card, 8px);
  background: #f8fbfd;
}

.vps-allocation-delivery {
  border-color: #cadced;
  background: linear-gradient(145deg, #f2f8fd 0%, #fbfdff 72%);
}

.vps-allocation-section-heading {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dbe4eb;
}

.vps-allocation-section-heading > span {
  display: block;
  color: #1e689b;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
}

.vps-allocation-section-heading h3 {
  margin: 4px 0 0;
  color: #173955;
  font-size: 18px;
  line-height: 1.25;
}

.vps-allocation-section-heading p {
  margin: 5px 0 0;
  color: #6d7d8b;
  font-size: 10px;
  line-height: 1.55;
}

.vps-allocation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.vps-allocation-grid label > span {
  display: block;
  margin-bottom: 6px;
  color: #496075;
  font-size: 11px;
  font-weight: 700;
}

.vps-allocation-grid input,
.vps-allocation-grid select,
.vps-allocation-grid textarea { width: 100%; }
.vps-note-field { grid-column: 1 / -1; }
.vps-note-field textarea { min-height: 76px; resize: vertical; }

.vps-social-media-field {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid #e0b8d1;
  border-radius: 7px;
  color: #6d3157;
  background: #fff5fa;
  cursor: pointer;
}

.vps-allocation-grid .vps-social-media-field > input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: #a73578;
}

.vps-social-media-field > span { margin: 0; }
.vps-social-media-field strong { display: block; color: #7f285e; font-size: 12px; }
.vps-social-media-field small { margin-top: 3px; color: #856a7c; font-size: 10px; }

.vps-allocation-grid label small {
  display: block;
  margin-top: 5px;
  color: #7d8995;
  font-size: 9px;
  line-height: 1.5;
}

.vps-qr-upload-field {
  align-self: stretch;
  padding: 10px;
  border: 1px dashed #b8c9d7;
  border-radius: 7px;
  background: rgba(255, 255, 255, .82);
}

.vps-qr-upload-field > span {
  display: block;
  margin-bottom: 6px;
  color: #496075;
  font-size: 10px;
  font-weight: 700;
}

.vps-qr-upload-field input { width: 100%; padding: 7px; background: #fff; }

.vps-qr-upload-field small {
  display: block;
  margin-top: 5px;
  color: #7d8995;
  font-size: 9px;
  line-height: 1.45;
}

.vps-platform-delivery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.vps-platform-delivery {
  display: grid;
  grid-template-rows: auto auto minmax(150px, 1fr);
  gap: 9px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #d4e0e9;
  border-radius: 7px;
  background: #fff;
}

.vps-platform-delivery > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.vps-platform-delivery > header span {
  color: #1e689b;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.vps-platform-delivery > header strong {
  color: #173955;
  font-size: 13px;
}

.vps-admin-qr-preview {
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: center;
  min-height: 150px;
  border: 1px solid #cbd7df;
  border-radius: 7px;
  background:
    linear-gradient(45deg, #eef3f6 25%, transparent 25%),
    linear-gradient(-45deg, #eef3f6 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eef3f6 75%),
    linear-gradient(-45deg, transparent 75%, #eef3f6 75%), #fff;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

.vps-admin-qr-preview > strong {
  position: absolute;
  top: 9px;
  left: 10px;
  padding: 3px 6px;
  border: 1px solid rgba(30, 104, 155, 0.2);
  border-radius: 999px;
  color: #1e689b;
  background: rgba(255, 255, 255, 0.9);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vps-admin-qr-preview img {
  display: block;
  width: 136px;
  height: 136px;
  object-fit: contain;
  background: #fff;
}

.vps-admin-qr-preview img:not([src]) { display: none; }

.vps-admin-qr-preview > div {
  display: grid;
  justify-items: center;
  gap: 7px;
  color: #81909c;
  font-size: 10px;
}

.vps-admin-qr-preview > div span {
  color: #275f89;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 28px;
  letter-spacing: 0.12em;
}

.vps-qr-preview-card { width: min(780px, calc(100vw - 30px)); }

.vps-qr-preview-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.vps-qr-preview-body > article { display: grid; justify-items: center; gap: 8px; }
.vps-qr-preview-body > article header { width: 100%; text-align: center; }
.vps-qr-preview-body > article header span { display: block; color: #1e689b; font-size: 8px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.vps-qr-preview-body > article header strong { display: block; margin-top: 3px; color: #173955; font-family: Georgia, "Noto Serif SC", serif; font-size: 17px; font-weight: 400; }

.vps-qr-preview-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: min(300px, 72vw);
  aspect-ratio: 1;
  padding: 18px;
  border: 1px solid #bdcdd8;
  background: #fff;
  box-shadow: inset 0 0 0 7px #f2f6f8;
}

.vps-qr-preview-frame::before,
.vps-qr-preview-frame::after {
  content: "";
  position: absolute;
  width: 38px;
  height: 38px;
  border-color: #1e689b;
}

.vps-qr-preview-frame::before { top: -1px; left: -1px; border-top: 4px solid #1e689b; border-left: 4px solid #1e689b; }
.vps-qr-preview-frame::after { right: -1px; bottom: -1px; border-right: 4px solid #1e689b; border-bottom: 4px solid #1e689b; }
.vps-qr-preview-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.vps-qr-preview-frame img:not([src]) { visibility: hidden; }

.vps-qr-preview-boundary {
  grid-column: 1 / -1;
  width: 100%;
  padding: 12px 14px;
  border-left: 3px solid #d59b33;
  color: #695a3d;
  background: #fff8e8;
}

.vps-qr-preview-boundary strong { color: #644b1c; font-size: 11px; }
.vps-qr-preview-boundary p { margin: 4px 0 0; font-size: 10px; line-height: 1.6; }

.my-vps-hero,
.my-vps-empty,
.my-vps-node-panel,
.my-vps-delivery-panel {
  border: 1px solid rgba(49, 74, 112, 0.18);
  border-radius: var(--ui-radius-panel, 9px);
  box-shadow: var(--ui-shadow, 0 8px 24px rgba(38, 58, 108, 0.08));
}

.my-vps-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding: 29px 30px;
  color: #fff;
  background:
    radial-gradient(circle at 86% 12%, rgba(111, 192, 243, 0.25), transparent 26%),
    linear-gradient(120deg, #071a2b 0%, #0c385e 64%, #166493 100%);
}

.my-vps-hero::after {
  content: "PRIVATE ROUTE";
  position: absolute;
  right: 24px;
  top: -9px;
  color: rgba(255, 255, 255, 0.055);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(44px, 7vw, 88px);
  white-space: nowrap;
}

.my-vps-hero > * { position: relative; z-index: 1; }
.my-vps-hero h2 { margin: 8px 0 9px; font-family: Georgia, "Noto Serif SC", serif; font-size: clamp(28px, 3vw, 42px); font-weight: 400; }
.my-vps-hero p { max-width: 690px; margin: 0; color: rgba(255, 255, 255, 0.7); font-size: 12px; line-height: 1.75; }
.my-vps-hero .button { color: #e4f3fd; border-color: rgba(190, 226, 250, 0.28); background: rgba(255, 255, 255, 0.08); }

.my-vps-empty {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  margin-top: 14px;
  padding: 28px;
  background: #f8fbfd;
}

.my-vps-empty > span {
  color: #c2ced8;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 44px;
  line-height: 1;
}

.my-vps-empty strong { color: #173955; font-family: Georgia, "Noto Serif SC", serif; font-size: 19px; font-weight: 400; }
.my-vps-empty p { margin: 5px 0 0; color: #71808c; font-size: 11px; line-height: 1.65; }

.my-vps-console {
  display: block;
  margin-top: 14px;
}

.my-vps-console[hidden] { display: none; }

.my-vps-lines { display: grid; gap: 18px; }

.my-vps-line {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(420px, 1.35fr);
  gap: 14px;
}

.my-vps-line[data-route-type="residential"] .my-vps-node-panel header {
  background: linear-gradient(135deg, #3e2449, #71405f);
}

.my-vps-node-panel {
  overflow: hidden;
  background: #f8fbfd;
}

.my-vps-node-panel header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding: 20px;
  color: #fff;
  background: #0b2f4d;
}

.my-vps-node-panel header span { grid-column: 1 / -1; color: #7eb9e1; font-size: 9px; font-weight: 700; letter-spacing: 0.16em; }
.my-vps-node-panel header strong { font-family: "SFMono-Regular", Consolas, monospace; font-size: 24px; }
.my-vps-node-panel header em { align-self: center; padding: 4px 8px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: #dcecf7; font-size: 9px; font-style: normal; }
.my-vps-node-panel dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 8px 20px 17px; }
.my-vps-node-panel dl div { padding: 13px 0; border-bottom: 1px solid #dfe7ed; }
.my-vps-node-panel dl div:nth-child(odd) { padding-right: 12px; border-right: 1px solid #dfe7ed; }
.my-vps-node-panel dl div:nth-child(even) { padding-left: 12px; }
.my-vps-node-panel dt { color: #7a8995; font-size: 9px; }
.my-vps-node-panel dd { margin: 4px 0 0; color: #173955; font-size: 12px; font-weight: 700; }

.my-vps-device-rule { display: grid; gap: 4px; margin: 0 20px 20px; padding: 12px 13px; border-left: 3px solid #d59b33; color: #695a3d; background: #fff8e8; font-size: 10px; line-height: 1.55; }
.my-vps-device-rule strong { color: #644b1c; }

.my-vps-delivery-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  background: #fffdf8;
}

.my-vps-platform-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid #d7e1e8;
  border-radius: 7px;
  background: #fff;
}

.my-vps-platform-card[data-vps-platform="windows"] {
  border-color: #dec992;
  background: linear-gradient(145deg, #fffaf0 0%, #fff 62%);
}

.my-vps-platform-card > header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 8px;
  align-items: center;
}

.my-vps-platform-card > header span { grid-column: 1 / -1; color: #1e689b; font-size: 8px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.my-vps-platform-card > header strong { color: #173955; font-family: Georgia, "Noto Serif SC", serif; font-size: 18px; font-weight: 400; }
.my-vps-platform-card > header em { padding: 3px 6px; border: 1px solid #d8e0e6; border-radius: 999px; color: #788691; font-size: 8px; font-style: normal; }
.my-vps-platform-card > header em.is-ready { color: #235f4b; border-color: #a6cfbf; background: #edf8f3; }
.my-vps-platform-card > ol { display: grid; gap: 6px; margin: 0; padding-left: 18px; color: #53697a; font-size: 10px; line-height: 1.5; }
.my-vps-platform-card > p { margin: 0; padding: 9px 10px; color: #7c5b1f; border: 1px solid #ecd59e; background: #fff8e6; font-size: 9px; line-height: 1.5; }
.my-vps-platform-card > p.is-ready { color: #235f4b; border-color: #a6cfbf; background: #edf8f3; }

.vps-route-badge {
  padding: 2px 6px;
  border: 1px solid #b7cddd;
  border-radius: 999px;
  color: #2a607f;
  background: #eef7fc;
  font-size: 8px;
  font-weight: 700;
}

.vps-route-badge.is-residential {
  color: #71405f;
  border-color: #d4b7ca;
  background: #fbf0f7;
}

.my-vps-qr-frame {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  width: 100%;
  max-width: 250px;
  margin: 0 auto;
  border: 1px solid #b9c9d6;
  background: #fff;
  box-shadow: inset 0 0 0 10px #f0f5f8;
}

.my-vps-qr-frame::before,
.my-vps-qr-frame::after { content: ""; position: absolute; width: 38px; height: 38px; border-color: #1e689b; }
.my-vps-qr-frame::before { top: -1px; left: -1px; border-top: 4px solid #1e689b; border-left: 4px solid #1e689b; }
.my-vps-qr-frame::after { right: -1px; bottom: -1px; border-right: 4px solid #1e689b; border-bottom: 4px solid #1e689b; }
.my-vps-qr-frame img { display: block; width: calc(100% - 34px); height: calc(100% - 34px); object-fit: contain; }
.my-vps-qr-frame img:not([src]) { display: none; }
.my-vps-qr-placeholder { display: grid; justify-items: center; gap: 8px; color: #82909b; font-size: 10px; }
.my-vps-qr-placeholder span { color: #195a88; font-family: "SFMono-Regular", Consolas, monospace; font-size: 38px; letter-spacing: .15em; }
.my-vps-delivery-copy { align-self: center; }
.my-vps-delivery-copy > span { color: #1e689b; font-size: 9px; font-weight: 700; letter-spacing: .16em; }
.my-vps-delivery-copy h3 { margin: 7px 0 13px; color: #173955; font-family: Georgia, "Noto Serif SC", serif; font-size: 22px; font-weight: 400; }
.my-vps-delivery-copy ol { display: grid; gap: 8px; margin: 0; padding-left: 19px; color: #53697a; font-size: 11px; line-height: 1.55; }
.my-vps-delivery-copy p { margin: 15px 0 0; padding: 10px 12px; color: #7c5b1f; border: 1px solid #ecd59e; background: #fff8e6; font-size: 10px; }
.my-vps-delivery-copy p.is-ready { color: #235f4b; border-color: #a6cfbf; background: #edf8f3; }
.my-vps-security { margin-bottom: 4px; }

.vps-modal-boundary {
  display: grid;
  gap: 4px;
  margin-top: 14px;
  padding: 12px 13px;
  border-left: 3px solid #d59b33;
  color: #6e5a34;
  background: #fff8e8;
  font-size: 10px;
  line-height: 1.6;
}

.vps-modal-boundary strong { color: #644b1c; }

.vps-allocation-delivery .vps-modal-boundary { margin-top: 12px; }

.vps-allocation-card > .modal-actions {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #dce4ec;
}

@media (max-width: 980px) {
  .vps-command-deck { grid-template-columns: 1fr; }
  .vps-command-state { width: 100%; }
  .vps-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vps-capacity-rail { grid-template-columns: repeat(10, minmax(8px, 1fr)); }
  .my-vps-line { grid-template-columns: 1fr; }
  .my-vps-delivery-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vps-ledger-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vps-ledger-scroll {
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  .vps-ledger-scroll::-webkit-scrollbar { display: none; }
  .vps-pool-capacity-grid { grid-template-columns: 1fr; }
  .vps-allocation-card { width: min(820px, calc(100vw - 32px)); }
  .vps-allocation-workspace { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .vps-command-deck { padding: 21px 18px; }
  .vps-command-copy h2 { font-size: 29px; }
  .vps-capacity-heading,
  .vps-ledger-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .vps-ledger-controls { display: grid; grid-template-columns: 1fr; }
  .vps-ledger-controls input,
  .vps-ledger-controls select { width: 100%; }
  .vps-capacity-rail { grid-template-columns: repeat(10, minmax(7px, 1fr)); gap: 4px; }
  .vps-metric-grid { gap: 8px; }
  .vps-metric-grid article { padding: 14px; }
  .vps-allocation-grid { grid-template-columns: 1fr; }
  .vps-note-field { grid-column: auto; }
  .vps-allocation-card {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 32px);
    padding: 18px;
  }
  .vps-allocation-workspace { gap: 12px; margin-top: 14px; }
  .vps-allocation-settings,
  .vps-allocation-delivery { padding: 13px; }
  .vps-platform-delivery-grid { grid-template-columns: 1fr; }
  .vps-platform-delivery { grid-template-rows: auto auto 156px; }
  .vps-admin-qr-preview { min-height: 156px; }
  .vps-admin-qr-preview img { width: 136px; height: 136px; }
  .vps-qr-preview-button { min-height: 38px; padding-inline: 12px; }
  .vps-qr-preview-body { grid-template-columns: 1fr; }
  .vps-qr-preview-boundary { grid-column: auto; }
  .my-vps-hero { align-items: stretch; flex-direction: column; padding: 22px 18px; }
  .my-vps-hero .button { width: 100%; }
  .my-vps-delivery-panel { grid-template-columns: 1fr; padding: 18px; }
  .my-vps-qr-frame { width: min(100%, 300px); margin: 0 auto; }
  .my-vps-node-panel dl { grid-template-columns: 1fr; }
  .my-vps-node-panel dl div:nth-child(n) { padding: 12px 0; border-right: 0; }
  .my-vps-empty { padding: 21px 18px; }
}

.social-device-self,
.social-device-admin {
  margin-top: 18px;
  border: 1px solid #d8e2e9;
  border-radius: 18px;
  background: #fbfdff;
  box-shadow: 0 16px 40px rgba(22, 57, 82, 0.08);
}

.social-device-self > header,
.social-device-admin > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border-bottom: 1px solid #dfe7ed;
}

.social-device-self > header > div:first-child,
.social-device-admin > header > div:first-child { max-width: 760px; }
.social-device-self > header span,
.social-device-admin > header span { color: #2a6d99; font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.social-device-self > header h3,
.social-device-admin > header h3 { margin: 5px 0 7px; color: #173955; font: 400 24px/1.2 Georgia, "Noto Serif SC", serif; }
.social-device-self > header p,
.social-device-admin > header p { margin: 0; color: #617687; font-size: 11px; line-height: 1.7; }

.social-device-self-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 24px;
  color: #607485;
  border-bottom: 1px solid #e5ebef;
  font-size: 10px;
}
.social-device-self-summary strong { color: #173955; font-size: 13px; }

.social-device-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 20px 24px 24px; }
.social-device-card {
  display: grid;
  gap: 13px;
  padding: 17px;
  border: 1px solid #dfe7ed;
  border-radius: 14px;
  background: #fff;
}
.social-device-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.social-device-card h4 { margin: 0; color: #173955; font-size: 15px; }
.social-device-card header small { display: block; margin-top: 4px; color: #748795; font-size: 9px; }
.social-device-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.social-device-card dl div { min-width: 0; padding: 10px; background: #f3f7fa; }
.social-device-card dt { color: #7a8a96; font-size: 8px; }
.social-device-card dd { overflow-wrap: anywhere; margin: 4px 0 0; color: #29485f; font: 700 11px/1.4 "SFMono-Regular", Consolas, monospace; }
.social-device-card .button { min-height: 40px; justify-self: start; }

.social-device-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  color: #70591c;
  border: 1px solid #e6cf8e;
  border-radius: 999px;
  background: #fff8df;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}
.social-device-status.is-active { color: #226149; border-color: #acd1c1; background: #edf8f3; }
.social-device-status.is-revoked { color: #7d6671; border-color: #d8ccd2; background: #f6f1f3; }
.social-device-status.is-revoke-pending { color: #8a4434; border-color: #e2b8aa; background: #fff1ec; }

.social-device-admin-summary { display: grid; min-width: 150px; gap: 5px; padding: 12px 14px; border: 1px solid #d7e3eb; border-radius: 12px; background: #f3f8fb; }
.social-device-admin-summary strong { color: #173955; font-size: 18px; }
.social-device-admin-summary span { letter-spacing: 0; }
.social-device-admin-scroll { overflow-x: auto; }
.social-device-admin-table { width: 100%; min-width: 900px; border-collapse: collapse; }
.social-device-admin-table th,
.social-device-admin-table td { padding: 13px 14px; border-bottom: 1px solid #e4eaee; text-align: left; vertical-align: top; }
.social-device-admin-table th { color: #6b7d8a; background: #f4f8fa; font-size: 9px; letter-spacing: .08em; }
.social-device-admin-table td { color: #35546a; font-size: 10px; }
.social-device-admin-table td strong { display: block; color: #173955; font-size: 12px; }
.social-device-admin-table td small { display: block; margin-top: 4px; color: #7a8a95; }
.social-device-admin-table code { color: #244d69; font-size: 11px; }
.social-device-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.social-device-actions .button { min-height: 36px; padding: 6px 10px; font-size: 9px; }

.social-device-dialog-card { width: min(680px, calc(100vw - 30px)); }
.social-device-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 22px 24px 0; }
.social-device-form-note { display: grid; gap: 4px; margin: 18px 24px 0; padding: 12px 14px; color: #6e5c32; border-left: 3px solid #d59b33; background: #fff8e8; font-size: 10px; line-height: 1.6; }
.social-device-form-note strong { color: #644b1c; }

.employee-social-media-fields { display: grid; gap: 14px; padding: 17px; border: 1px solid #d8d0e6; border-radius: 14px; background: #faf8fd; }
.employee-social-media-toggle { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #dfd5e9; border-radius: 12px; background: #fff; cursor: pointer; }
.employee-social-media-toggle input { width: 20px; height: 20px; accent-color: #854e9f; }
.employee-social-media-toggle span { display: grid; gap: 3px; }
.employee-social-media-toggle strong { color: #6c367d; font-size: 12px; }
.employee-social-media-toggle small { color: #7d6c84; font-size: 9px; line-height: 1.5; }

.vps-social-media-field.is-readonly { min-height: 74px; cursor: default; }
.vps-social-media-field.is-readonly::before { content: "唯一来源"; flex: none; padding: 4px 7px; color: #7f285e; border: 1px solid #d8b6cb; border-radius: 999px; font-size: 8px; font-weight: 800; }

@media (max-width: 760px) {
  .social-device-self > header,
  .social-device-admin > header { flex-direction: column; padding: 19px 18px; }
  .social-device-self > header .button { width: 100%; }
  .social-device-self-summary { align-items: flex-start; flex-direction: column; padding: 13px 18px; }
  .social-device-card-grid { grid-template-columns: 1fr; padding: 16px 18px 20px; }
  .social-device-admin-summary { width: 100%; }
  .social-device-form-grid { grid-template-columns: 1fr; padding: 18px 18px 0; }
  .social-device-form-note { margin: 16px 18px 0; }
}


/* 管理员登录安全流水：延续 WZH 蓝紫精密工作台与工业档案语言。 */
.user-management-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 190px));
  gap: 8px;
  margin: 0 0 14px;
  padding: 6px;
  border: 1px solid #ccd8ea;
  border-left: 4px solid #2f6fe4;
  border-radius: 7px;
  background: #eaf0f9;
}

.user-management-mode-tabs button {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 44px;
  padding: 9px 12px;
  color: #52617d;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.user-management-mode-tabs button span {
  font-size: 13px;
  font-weight: 700;
}

.user-management-mode-tabs button small {
  color: #7b879e;
  font-size: 10px;
}

.user-management-mode-tabs button.is-active {
  color: #fff;
  border-color: #2058c1;
  background: #2f6fe4;
  box-shadow: 0 7px 16px rgba(30, 79, 174, .18);
}

.user-management-mode-tabs button.is-active small {
  color: rgba(255, 255, 255, .78);
}

.login-audit-panel {
  display: grid;
  gap: 14px;
}

.login-audit-panel[hidden] {
  display: none;
}

.login-audit-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.login-audit-summary article {
  position: relative;
  display: grid;
  gap: 3px;
  min-height: 102px;
  padding: 15px 16px 13px;
  overflow: hidden;
  border: 1px solid #d8e2f0;
  border-top: 3px solid #2f6fe4;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(38, 58, 108, .07);
}

.login-audit-summary article::after {
  content: "";
  position: absolute;
  right: -14px;
  bottom: -24px;
  width: 72px;
  height: 72px;
  border: 10px solid rgba(47, 111, 228, .055);
  transform: rotate(18deg);
}

.login-audit-summary article[data-tone="success"] { border-top-color: #21855a; }
.login-audit-summary article[data-tone="failure"] { border-top-color: #c23e39; }
.login-audit-summary article[data-tone="limited"] { border-top-color: #bd7b18; }
.login-audit-summary article[data-tone="logout"] { border-top-color: #596986; }

.login-audit-summary span,
.login-audit-summary small {
  color: #71809a;
  font-size: 11px;
}

.login-audit-summary strong {
  color: #182440;
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.login-audit-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr)) minmax(190px, 1.35fr) auto auto;
  align-items: end;
  gap: 9px;
  padding: 15px;
  border: 1px solid #d5dfed;
  border-radius: 7px;
  background: #f5f8fc;
}

.login-audit-filters label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.login-audit-filters label > span {
  color: #66758f;
  font-size: 11px;
}

.login-audit-filters :where(select, input) {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding-inline: 10px;
  color: #1d2a45;
  border: 1px solid #bac9df;
  border-radius: 5px;
  background: #fff;
}

.login-audit-filters .button {
  min-height: 42px;
  white-space: nowrap;
}

.login-audit-ledger {
  overflow: hidden;
  border: 1px solid #cfdbea;
  border-top: 4px solid #173e70;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(29, 48, 87, .08);
}

.login-audit-ledger > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 18px;
  border-bottom: 1px solid #dbe4ef;
  background:
    linear-gradient(90deg, rgba(47, 111, 228, .07) 1px, transparent 1px),
    linear-gradient(#f8faff, #f2f6fc);
  background-size: 26px 100%, 100% 100%;
}

.login-audit-ledger > header > div:first-child > span {
  color: #2f6fe4;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
}

.login-audit-ledger > header > div:first-child > strong {
  display: block;
  margin-top: 3px;
  color: #14213d;
  font-size: 18px;
}

.login-audit-ledger > header p {
  margin: 3px 0 0;
  color: #73809a;
  font-size: 11px;
}

.login-audit-status {
  display: grid;
  min-width: 132px;
  padding-left: 15px;
  border-left: 1px solid #c9d6e8;
}

.login-audit-status span,
.login-audit-status small {
  color: #73809a;
  font-size: 10px;
}

.login-audit-status strong {
  margin: 2px 0;
  color: #21855a;
  font-size: 14px;
}

.login-audit-status strong.is-degraded {
  color: #b83232;
}

.login-audit-table-wrap {
  overflow-x: auto;
}

.login-audit-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-size: 12px;
}

.login-audit-table th,
.login-audit-table td {
  padding: 12px 13px;
  border-bottom: 1px solid #e3e9f2;
  text-align: left;
  vertical-align: middle;
}

.login-audit-table th {
  color: #5d6b84;
  background: #f4f7fb;
  font-size: 11px;
  white-space: nowrap;
}

.login-audit-table tbody tr:hover {
  background: #f8fbff;
}

.login-audit-time,
.login-audit-ip {
  color: #40516e;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.login-audit-user-cell {
  display: grid;
  gap: 2px;
}

.login-audit-user-cell strong { color: #15213c; font-size: 13px; }
.login-audit-user-cell small { color: #71809a; font-size: 10px; }

.login-audit-result {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 27px;
  padding: 4px 8px;
  border-radius: 4px;
  color: #245f45;
  background: #e8f7ef;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.login-audit-result::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.login-audit-result[data-outcome="failure"] { color: #a93232; background: #fff0ef; }
.login-audit-result[data-outcome="limited"] { color: #9b6513; background: #fff5df; }
.login-audit-result[data-outcome="logout"] { color: #56647e; background: #eef1f6; }

.login-audit-result-note {
  display: block;
  margin-top: 3px;
  color: #7b879d;
  font-size: 9px;
}

.login-audit-agent {
  display: block;
  max-width: 330px;
  overflow: hidden;
  color: #64728a;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-audit-empty {
  padding: 32px;
  color: #71809a;
  text-align: center;
}

.login-audit-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 16px;
  background: #f6f8fc;
}

.login-audit-pagination > span,
.login-audit-pagination strong {
  color: #5f6d85;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.login-audit-pagination > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.login-audit-pagination .button {
  min-height: 38px;
}

.login-audit-security-note {
  margin: 0;
  padding: 12px 14px;
  color: #65728a;
  border-left: 3px solid #2f6fe4;
  background: #eef4ff;
  font-size: 11px;
  line-height: 1.6;
}

@media (max-width: 1180px) {
  .login-audit-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .login-audit-keyword { grid-column: span 2; }
}

@media (max-width: 820px) {
  .user-management-mode-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .login-audit-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .login-audit-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .login-audit-keyword { grid-column: 1 / -1; }

  .login-audit-ledger > header {
    align-items: flex-start;
  }

  .login-audit-table { min-width: 0; }
  .login-audit-table thead { display: none; }
  .login-audit-table tbody,
  .login-audit-table tr,
  .login-audit-table td { display: block; }

  .login-audit-table tr {
    padding: 14px 15px;
    border-bottom: 1px solid #dfe7f2;
  }

  .login-audit-table td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 6px 0;
    border: 0;
    text-align: right;
  }

  .login-audit-table td::before {
    content: attr(data-label);
    flex: 0 0 92px;
    color: #748198;
    font-size: 10px;
    text-align: left;
  }

  .login-audit-user-cell { justify-items: end; }
  .login-audit-agent { max-width: min(58vw, 320px); white-space: normal; }
}

@media (max-width: 560px) {
  .login-audit-summary,
  .login-audit-filters {
    grid-template-columns: 1fr;
  }

  .login-audit-keyword { grid-column: auto; }

  .login-audit-ledger > header,
  .login-audit-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .login-audit-status {
    padding: 10px 0 0;
    border-top: 1px solid #c9d6e8;
    border-left: 0;
  }

  .login-audit-pagination > div {
    justify-content: space-between;
  }

  .login-audit-pagination .button {
    min-width: 88px;
    min-height: 44px;
  }
}


:root {
  --order-ink: #12243c;
  --order-muted: #607089;
  --order-line: #d7e0eb;
  --order-paper: #f7f9fc;
  --order-blue: #245ea8;
  --order-blue-deep: #153c70;
  --order-cyan: #64b8d4;
  --order-amber: #d99a2b;
  --order-red: #b6534d;
  --order-green: #2f8063;
}

.order-documents-view {
  color: var(--order-ink);
}

.order-documents-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(420px, .75fr);
  gap: 28px;
  overflow: hidden;
  min-height: 210px;
  padding: 30px 32px;
  border: 1px solid #214f86;
  border-radius: 22px;
  color: #fff;
  background:
    linear-gradient(115deg, rgba(9, 31, 57, .98), rgba(21, 60, 112, .94) 58%, rgba(32, 86, 135, .9)),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(255, 255, 255, .08) 80px);
  box-shadow: 0 20px 44px rgba(18, 43, 74, .17);
}

.order-documents-hero::before,
.order-documents-hero::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.order-documents-hero::before {
  inset: 0;
  opacity: .18;
  background-image:
    linear-gradient(rgba(255, 255, 255, .26) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .26) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(90deg, transparent 30%, #000);
}

.order-documents-hero::after {
  right: -54px;
  bottom: -82px;
  width: 270px;
  height: 170px;
  border: 1px solid rgba(255, 255, 255, .2);
  transform: rotate(-13deg);
}

.order-documents-hero-copy,
.order-documents-hero-meta {
  position: relative;
  z-index: 1;
}

.order-documents-serial,
.order-documents-index header span,
.order-documents-category-section > header span,
.order-documents-file-section > header span {
  display: block;
  color: var(--order-cyan);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
}

.order-documents-hero h2 {
  margin: 12px 0 9px;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: 1.04;
  letter-spacing: -.045em;
}

.order-documents-hero-copy p {
  max-width: 640px;
  margin: 0;
  color: rgba(238, 246, 255, .78);
  font-size: 1rem;
  line-height: 1.75;
}

.order-documents-hero-meta {
  align-self: end;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, .22);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.order-documents-hero-meta div {
  min-width: 0;
  padding: 14px 12px;
  border-right: 1px solid rgba(255, 255, 255, .15);
}

.order-documents-hero-meta div:last-child { border-right: 0; }
.order-documents-hero-meta span { display: block; color: rgba(224, 237, 249, .62); font-size: .76rem; }
.order-documents-hero-meta strong { display: block; overflow: hidden; margin-top: 6px; color: #fff; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }

.order-documents-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(150px, 210px) auto auto;
  gap: 12px;
  align-items: end;
  margin: 18px 0;
  padding: 16px;
  border: 1px solid var(--order-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 8px 24px rgba(31, 56, 88, .07);
}

.order-documents-toolbar label { display: grid; gap: 7px; min-width: 0; }
.order-documents-toolbar label > span { color: var(--order-muted); font-size: .78rem; font-weight: 700; }
.order-documents-toolbar input,
.order-documents-toolbar select {
  width: 100%;
  min-height: 44px;
  border: 1px solid #cbd6e4;
  border-radius: 10px;
  color: var(--order-ink);
  background: #fff;
}

.order-documents-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.order-documents-index,
.order-documents-detail {
  border: 1px solid var(--order-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(24, 50, 83, .08);
}

.order-documents-index {
  position: sticky;
  top: 18px;
  overflow: hidden;
}

.order-documents-index > header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--order-line);
  background: #f4f7fb;
}

.order-documents-index header span,
.order-documents-category-section > header span,
.order-documents-file-section > header span { color: var(--order-blue); }
.order-documents-index h3,
.order-documents-category-section h3,
.order-documents-file-section h3 { margin: 4px 0 0; color: var(--order-ink); font-size: 1.1rem; }
.order-documents-index > header > strong { color: var(--order-blue-deep); font-size: .84rem; }

.order-documents-list {
  display: grid;
  max-height: calc(100dvh - 315px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.order-document-index-card {
  position: relative;
  display: grid;
  gap: 7px;
  width: 100%;
  padding: 16px 18px 16px 22px;
  border: 0;
  border-bottom: 1px solid #e6ebf1;
  color: var(--order-ink);
  text-align: left;
  background: #fff;
  cursor: pointer;
}

.order-document-index-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  content: "";
  background: transparent;
}

.order-document-index-card:hover { background: #f6f9fd; }
.order-document-index-card.is-active { background: #eef5ff; }
.order-document-index-card.is-active::before { background: var(--order-blue); }
.order-document-index-card-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.order-document-index-card-number { color: var(--order-blue); font-size: .76rem; font-weight: 700; letter-spacing: .05em; }
.order-document-index-card h4 { overflow: hidden; margin: 0; font-size: .95rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.order-document-index-card-meta { display: flex; justify-content: space-between; gap: 10px; color: var(--order-muted); font-size: .76rem; }

.order-document-status-chip,
.order-documents-status,
.order-document-file-status {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 3px 9px;
  border-radius: 999px;
  color: #1b5f48;
  background: #e5f4ed;
  font-size: .73rem;
  font-weight: 700;
  white-space: nowrap;
}

[data-order-status="已完成"] { color: #275b8f; background: #e7f0fb; }
[data-order-status="已归档"] { color: #687181; background: #edf0f4; }

.order-documents-list-empty,
.order-documents-detail-empty,
.order-documents-file-empty {
  display: grid;
  justify-items: center;
  padding: 34px 20px;
  color: var(--order-muted);
  text-align: center;
}

.order-documents-list-empty[hidden],
.order-documents-file-empty[hidden] { display: none; }
.order-documents-list-empty > span { color: #c3cfdd; font-size: 2.5rem; font-weight: 700; letter-spacing: -.05em; }
.order-documents-list-empty strong,
.order-documents-file-empty strong { color: var(--order-ink); }
.order-documents-list-empty p,
.order-documents-file-empty p { margin: 7px 0 0; font-size: .82rem; line-height: 1.6; }

.order-documents-detail { min-height: 570px; }
.order-documents-detail-empty { grid-template-columns: auto minmax(0, 1fr); justify-items: start; gap: 20px; align-content: center; min-height: 570px; text-align: left; }
.order-documents-detail-empty strong { color: var(--order-ink); font-size: 1.1rem; }
.order-documents-detail-empty p { margin: 6px 0 0; line-height: 1.6; }
.order-documents-empty-mark { display: grid; place-items: center; width: 72px; height: 88px; border: 1px solid #b7c6d8; color: var(--order-blue); font-size: .85rem; font-weight: 700; letter-spacing: .12em; background: linear-gradient(135deg, #fff, #edf3fa); box-shadow: 8px 8px 0 #e3eaf3; }

.order-documents-detail-content { padding: 24px; }
.order-documents-detail-heading { display: flex; justify-content: space-between; gap: 24px; align-items: start; padding-bottom: 18px; border-bottom: 1px solid var(--order-line); }
.order-documents-number { display: block; margin-bottom: 6px; color: var(--order-blue); font-size: .8rem; font-weight: 700; letter-spacing: .08em; }
.order-documents-detail-heading h3 { margin: 0; color: var(--order-ink); font-size: clamp(1.45rem, 2.8vw, 2.05rem); letter-spacing: -.03em; }
.order-documents-detail-heading p { margin: 7px 0 0; color: var(--order-muted); }
.order-documents-detail-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; align-items: center; }

.order-documents-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 18px 0 0;
  border: 1px solid var(--order-line);
  border-radius: 13px;
  background: var(--order-paper);
}

.order-documents-facts div { min-width: 0; padding: 13px 14px; border-right: 1px solid var(--order-line); }
.order-documents-facts div:last-child { border-right: 0; }
.order-documents-facts dt { color: var(--order-muted); font-size: .72rem; }
.order-documents-facts dd { overflow: hidden; margin: 5px 0 0; color: var(--order-ink); font-size: .86rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.order-documents-note { margin: 14px 0 0; padding: 13px 15px; border-left: 3px solid var(--order-amber); color: #5d4b26; line-height: 1.65; background: #fff9ea; }

.order-documents-category-section,
.order-documents-file-section { margin-top: 24px; }
.order-documents-category-section > header,
.order-documents-file-section > header { display: flex; justify-content: space-between; gap: 16px; align-items: end; margin-bottom: 12px; }
.order-documents-category-section > header p { margin: 0; color: var(--order-muted); font-size: .82rem; }
.order-documents-category-section > header p strong { color: var(--order-blue); font-size: 1rem; }
.order-documents-file-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; align-items: center; }
.order-documents-file-tools > span { margin-right: 4px; color: var(--order-muted); font-size: .76rem; }

.order-documents-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.order-document-category-card {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--order-line);
  border-radius: 12px;
  color: var(--order-ink);
  text-align: left;
  background: #fff;
  cursor: pointer;
}

.order-document-category-card:hover,
.order-document-category-card.is-active { border-color: #88afd8; background: #f0f6fd; }
.order-document-category-index { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; color: var(--order-blue); font-size: .78rem; font-weight: 700; background: #e8f1fb; }
.order-document-category-card.has-files .order-document-category-index { color: #fff; background: var(--order-blue); }
.order-document-category-copy { min-width: 0; }
.order-document-category-copy strong { display: block; overflow: hidden; font-size: .85rem; text-overflow: ellipsis; white-space: nowrap; }
.order-document-category-copy small { display: block; margin-top: 4px; color: var(--order-muted); font-size: .72rem; }
.order-document-category-count { color: var(--order-blue-deep); font-size: .8rem; font-weight: 700; }

.order-documents-file-list { display: grid; gap: 8px; }
.order-documents-file-list.is-gallery { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.order-document-gallery-card {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--order-line);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(27, 51, 79, .05);
}
.order-document-gallery-preview { position: relative; display: grid; width: 100%; aspect-ratio: 4 / 3; padding: 0; place-items: center; overflow: hidden; border: 0; border-bottom: 1px solid var(--order-line); background: #edf2f7; cursor: pointer; }
.order-document-gallery-preview img { width: 100%; height: 100%; object-fit: contain; background: #f4f6f8; transition: transform .18s ease; }
.order-document-gallery-preview:hover img { transform: scale(1.025); }
.order-document-gallery-preview > span { position: absolute; top: 9px; left: 9px; min-width: 28px; padding: 4px 6px; border-radius: 6px; color: #fff; font-size: .68rem; font-weight: 700; background: rgba(19, 42, 68, .78); }
.order-document-gallery-copy { min-width: 0; padding: 11px 12px 7px; }
.order-document-gallery-copy strong { display: block; overflow: hidden; color: var(--order-ink); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.order-document-gallery-copy small { display: block; margin-top: 4px; color: var(--order-muted); font-size: .7rem; }
.order-document-gallery-card .order-document-file-actions { padding: 5px 12px 12px; }
.order-document-gallery-card .order-document-file-actions .button { min-height: 34px; flex: 1; justify-content: center; }
.order-documents-gallery-more { display: flex; margin: 14px auto 0; }
.order-documents-gallery-more[hidden] { display: none; }
.order-document-file-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px 314px;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--order-line);
  border-radius: 12px;
  background: #fff;
}

.order-document-file-row.is-superseded { opacity: .76; background: #f7f8fa; }
.order-document-file-row.is-deleted { border-style: dashed; background: #fff3f2; }
.order-document-file-identity { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 11px; align-items: center; min-width: 0; }
.order-document-file-type { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #cad8e7; border-radius: 10px; color: var(--order-blue); font-size: .7rem; font-weight: 700; background: #eff5fb; }
.order-document-file-identity strong { display: block; overflow: hidden; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.order-document-file-identity small,
.order-document-file-version small { display: block; margin-top: 4px; color: var(--order-muted); font-size: .72rem; }
.order-document-file-version { min-width: 0; }
.order-document-file-version strong { display: flex; gap: 6px; align-items: center; min-height: 25px; font-size: .8rem; }
.order-document-file-version small { line-height: 1.45; }
.order-document-file-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; }
.order-document-file-actions .button { min-height: 36px; padding: 7px 11px; font-size: .76rem; }
.order-document-file-actions a { text-decoration: none; }
.order-document-file-actions .order-document-online-preview,
.order-document-file-actions .order-document-preview-unavailable { flex: 0 0 120px; justify-content: center; }
.order-document-file-actions .order-document-online-preview { box-shadow: 0 8px 18px rgba(47, 111, 228, .18); }
.order-document-file-actions .order-document-preview-unavailable { opacity: .72; cursor: not-allowed; }
.order-document-file-status { margin-left: 0; }
.order-document-file-status[data-file-status="已替换"] { color: #6b7280; background: #eceff3; }
.order-document-file-status[data-file-status="已删除"] { color: #8a3834; background: #fae4e2; }

.order-document-order-modal { width: min(900px, calc(100vw - 32px)); }
.order-document-order-card {
  display: flex;
  width: 100%;
  max-height: min(92dvh, 820px);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #9fb3c8;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 32px 90px rgba(9, 28, 50, .34);
}

.order-document-order-heading {
  position: relative;
  min-height: 122px;
  padding: 24px 188px 22px 28px !important;
  align-items: center;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  background:
    linear-gradient(108deg, #102a43 0%, #153c70 68%, #1f5687 100%),
    #153c70;
}

.order-document-order-heading::after {
  position: absolute;
  right: 112px;
  bottom: 0;
  width: 1px;
  height: 100%;
  content: "";
  background: rgba(255, 255, 255, .1);
}

.order-document-order-heading .eyebrow { color: #8dc7e2; font-size: .68rem; letter-spacing: .16em; }
.order-document-order-heading h2 { margin: 6px 0 0; color: #fff; font-size: 1.55rem !important; letter-spacing: -.02em; }
.order-document-order-heading p { margin-top: 6px; color: rgba(232, 241, 251, .72); font-size: .78rem; }
.order-document-order-heading .icon-button { color: #fff; border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); }
.order-document-order-heading .icon-button:hover { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .15); }
.order-document-order-security {
  position: absolute;
  top: 44px;
  right: 82px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(236, 247, 243, .88);
  font-size: .7rem;
  font-weight: 700;
  white-space: nowrap;
}

.order-document-order-security i { width: 7px; height: 7px; border-radius: 50%; background: #70d3ae; box-shadow: 0 0 0 4px rgba(112, 211, 174, .12); }
.order-document-order-workspace {
  display: grid;
  min-height: 0;
  flex: 1;
  grid-template-columns: 220px minmax(0, 1fr);
  overflow: hidden;
  background: #fff;
}

.order-document-order-rail {
  display: flex;
  min-width: 0;
  padding: 24px 20px 20px;
  flex-direction: column;
  border-right: 1px solid #d8e2ed;
  background:
    linear-gradient(rgba(31, 86, 135, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 86, 135, .035) 1px, transparent 1px),
    #f4f7fa;
  background-size: 24px 24px;
}

.order-document-order-index {
  margin-bottom: 24px;
  color: #8496a9;
  font-family: var(--font-code, monospace);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .18em;
  line-height: 1.45;
}

.order-document-order-rail-step { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.order-document-order-rail-step + .order-document-order-rail-step { margin-top: 7px; }
.order-document-order-rail-step > span {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 1px solid #c2d0de;
  border-radius: 8px;
  color: #778ba0;
  font-family: var(--font-code, monospace);
  font-size: .66rem;
  font-weight: 800;
  background: rgba(255, 255, 255, .8);
}

.order-document-order-rail-step.is-current > span { color: #fff; border-color: var(--order-blue); background: var(--order-blue); box-shadow: 0 7px 16px rgba(36, 94, 168, .2); }
.order-document-order-rail-step div { display: grid; gap: 1px; }
.order-document-order-rail-step small { color: #73879c; font-family: var(--font-code, monospace); font-size: .56rem; font-weight: 700; letter-spacing: .09em; }
.order-document-order-rail-step strong { color: var(--order-ink); font-size: .78rem; }
.order-document-order-policy { margin-top: 24px; padding-top: 18px; border-top: 1px solid #d5e0ea; }
.order-document-order-policy strong { color: var(--order-blue-deep); font-size: .68rem; letter-spacing: .08em; }
.order-document-order-policy p { margin: 9px 0 0; color: var(--order-muted); font-size: .68rem; line-height: 1.65; }
.order-document-order-privacy { margin-top: auto; padding-top: 22px; color: #7a8ca0; font-size: .62rem; line-height: 1.55; }
.order-document-order-main { min-width: 0; padding: 22px 24px; overflow: auto; }
.order-document-order-section {
  padding: 18px;
  border: 1px solid #d7e1eb;
  border-radius: 12px;
  background: #fff;
}

.order-document-order-section + .order-document-order-section { margin-top: 14px; }
.order-document-order-section > header { display: flex; min-height: 38px; align-items: center; gap: 10px; margin-bottom: 17px; }
.order-document-order-section > header > span {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 1px solid #b8cadb;
  border-radius: 8px;
  color: var(--order-blue-deep);
  font-family: var(--font-code, monospace);
  font-size: .66rem;
  font-weight: 800;
  background: #f2f7fc;
}

.order-document-order-section > header div { display: grid; min-width: 0; gap: 1px; }
.order-document-order-section > header small { color: #71869c; font-family: var(--font-code, monospace); font-size: .57rem; font-weight: 700; letter-spacing: .09em; }
.order-document-order-section > header h3 { margin: 0; color: var(--order-ink); font-family: var(--sans); font-size: .88rem; }
.order-document-order-section > header em { margin-left: auto; color: #74869a; font-size: .62rem; font-style: normal; }
.order-document-order-primary { border-color: #bdcfe1; background: linear-gradient(135deg, rgba(36, 94, 168, .035), transparent 55%), #fff; }
.order-document-order-primary-grid { display: grid; grid-template-columns: minmax(190px, .76fr) minmax(0, 1.24fr); gap: 14px; }
.order-document-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 0; }
.order-document-form-note { grid-column: 1 / -1; }
.order-document-order-section .field > span { display: flex; align-items: center; justify-content: space-between; color: #53677d; font-size: .7rem; }
.order-document-order-section .field > span i { color: #8696a8; font-size: .58rem; font-style: normal; font-weight: 600; }
.order-document-order-primary .field > span i { color: var(--order-blue); }
.order-document-order-section .field > small { margin-top: -1px; color: #8493a3; font-size: .6rem; }
.order-document-order-section input,
.order-document-order-section select,
.order-document-order-section textarea { min-height: 44px; border-color: #bdccdc; border-radius: 8px; background: #fbfcfe; }
.order-document-order-section input:focus,
.order-document-order-section select:focus,
.order-document-order-section textarea:focus { border-color: #6f9bd0; background: #fff; box-shadow: 0 0 0 3px rgba(36, 94, 168, .11); }
.order-document-order-section textarea { min-height: 82px; resize: vertical; }
.order-document-order-number-field input { color: var(--order-blue-deep); font-family: var(--font-code, monospace); font-weight: 800; letter-spacing: .03em; }
.order-document-order-actions {
  display: flex;
  min-height: 74px;
  margin: 0;
  padding: 12px 20px 12px 24px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid #d7e1eb;
  background: #fff;
}

.order-document-order-actions > div { display: grid; min-width: 0; gap: 2px; }
.order-document-order-actions > div strong { color: var(--order-ink); font-size: .74rem; }
.order-document-order-actions > div span { color: var(--order-muted); font-size: .66rem; }
.order-document-order-actions > span { display: flex; flex: none; gap: 8px; }
.order-document-order-actions .button { min-width: 92px; min-height: 40px; justify-content: center; }

.order-document-upload-card { width: min(720px, calc(100vw - 32px)); }

.order-document-upload-modal { width: min(920px, calc(100vw - 32px)); }
.order-document-upload-card {
  display: flex;
  width: 100%;
  max-height: min(92dvh, 860px);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #9fb3c8;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 32px 90px rgba(9, 28, 50, .34);
}

.order-document-upload-heading {
  min-height: 128px;
  padding: 24px 186px 22px 28px !important;
  align-items: center;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  background:
    linear-gradient(108deg, #102a43 0%, #153c70 64%, #1f5687 100%),
    #153c70;
}

.order-document-upload-heading::after {
  position: absolute;
  right: 112px;
  bottom: 0;
  width: 1px;
  height: 100%;
  content: "";
  background: rgba(255, 255, 255, .1);
}

.order-document-upload-heading .eyebrow { color: #8dc7e2; font-size: .68rem; letter-spacing: .16em; }
.order-document-upload-heading h2 { margin: 6px 0 0; color: #fff; font-size: 1.55rem !important; letter-spacing: -.02em; }
.order-document-upload-heading p { margin-top: 6px; color: rgba(232, 241, 251, .72); font-size: .78rem; }
.order-document-upload-heading .icon-button { color: #fff; border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); }
.order-document-upload-heading .icon-button:hover { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .15); }
.order-document-upload-security {
  position: absolute;
  top: 46px;
  right: 82px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(236, 247, 243, .88);
  font-size: .7rem;
  font-weight: 700;
  white-space: nowrap;
}

.order-document-upload-security i { width: 7px; height: 7px; border-radius: 50%; background: #70d3ae; box-shadow: 0 0 0 4px rgba(112, 211, 174, .12); }
.order-document-upload-workspace {
  display: grid;
  min-height: 0;
  flex: 1;
  grid-template-columns: 260px minmax(0, 1fr);
  overflow: hidden;
  background: #fff;
}

.order-document-upload-rail {
  display: flex;
  min-width: 0;
  padding: 24px 22px;
  flex-direction: column;
  border-right: 1px solid #d8e2ed;
  background:
    linear-gradient(rgba(31, 86, 135, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 86, 135, .035) 1px, transparent 1px),
    #f4f7fa;
  background-size: 24px 24px;
}

.order-document-upload-main { min-width: 0; padding: 24px 26px 22px; overflow: auto; }
.order-document-upload-step { display: flex; align-items: center; gap: 11px; }
.order-document-upload-step > span {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid #afc4d8;
  border-radius: 9px;
  color: var(--order-blue-deep);
  font-family: var(--font-code, monospace);
  font-size: .72rem;
  font-weight: 800;
  background: #fff;
}

.order-document-upload-step div { display: grid; gap: 1px; }
.order-document-upload-step small { color: #6b7f96; font-family: var(--font-code, monospace); font-size: .62rem; font-weight: 700; letter-spacing: .09em; }
.order-document-upload-step strong { color: var(--order-ink); font-size: .85rem; }
.order-document-upload-category-field { margin-top: 20px; }
.order-document-upload-category-field > span,
.order-document-upload-note-block .field > span { color: var(--order-muted); font-size: .72rem !important; }
.order-document-upload-category-field select,
.order-document-upload-note-block input { min-height: 44px; border-color: #b9c9da; background-color: #fff; }
.order-document-upload-policy { margin-top: 24px; padding-top: 18px; border-top: 1px solid #d8e2ed; }
.order-document-upload-policy > span { color: var(--order-blue-deep); font-size: .7rem; font-weight: 800; letter-spacing: .08em; }
.order-document-upload-policy ul { display: grid; gap: 12px; margin: 13px 0 0; padding: 0; list-style: none; }
.order-document-upload-policy li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 9px; color: var(--order-muted); font-size: .7rem; line-height: 1.55; }
.order-document-upload-policy i { width: 6px; height: 6px; margin-top: 5px; border-radius: 50%; background: var(--order-green); }
.order-document-upload-formats { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: 22px; }
.order-document-upload-formats span { padding: 4px 6px; border: 1px solid #cbd8e5; border-radius: 5px; color: #60748a; font-family: var(--font-code, monospace); font-size: .6rem; font-weight: 700; background: rgba(255, 255, 255, .78); }
.order-document-dropzone {
  display: grid;
  min-height: 146px;
  margin-top: 18px;
  padding: 22px;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border: 1px dashed #89a9c9;
  border-radius: 12px;
  color: var(--order-muted);
  text-align: left;
  background:
    linear-gradient(135deg, rgba(36, 94, 168, .045), transparent 62%),
    #f8fbfe;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.order-document-dropzone:hover,
.order-document-dropzone.is-dragover { border-color: var(--order-blue); background-color: #eef6ff; transform: translateY(-1px); }
.order-document-dropzone input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.order-document-dropzone-mark { display: grid; width: 52px; height: 58px; place-items: center; border: 1px solid #9eb8d2; border-radius: 9px; color: var(--order-blue); font-size: 1.55rem; background: #fff; box-shadow: 0 8px 18px rgba(27, 61, 97, .08); }
.order-document-dropzone-copy { display: grid; min-width: 0; gap: 6px; }
.order-document-dropzone-copy strong { color: var(--order-ink); font-size: .9rem; }
.order-document-dropzone-copy small { max-width: 430px; color: var(--order-muted); font-size: .68rem; line-height: 1.55; }
.order-document-dropzone-action { padding: 8px 11px; border: 1px solid #b6c8dc; border-radius: 7px; color: var(--order-blue-deep); font-size: .72rem; font-weight: 700; background: #fff; white-space: nowrap; }
.order-document-upload-summary { display: flex; margin-top: 12px; padding: 10px 12px; justify-content: space-between; gap: 14px; border: 1px solid #cad9e7; border-radius: 8px; color: var(--order-muted); font-size: .72rem; background: #f7fafc; }
.order-document-upload-summary strong { color: var(--order-ink); }
.order-document-upload-summary.has-error { border-color: #e6b9b4; color: #8a3834; background: #fff4f2; }
.order-document-upload-selection { display: grid; max-height: 230px; gap: 7px; margin-top: 8px; padding: 8px; overflow: auto; border: 1px solid #d8e2ed; border-radius: 10px; background: #f4f7fa; }
.order-document-upload-selection .order-document-upload-item { display: grid; grid-template-columns: 42px minmax(0, 1fr) minmax(122px, .55fr) auto; gap: 10px; padding: 9px 10px; align-items: center; border: 1px solid #d5e0eb; border-radius: 8px; background: #fff; }
.order-document-upload-type { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #c6d8ea; border-radius: 7px; color: var(--order-blue); font-family: var(--font-code, monospace); font-size: .62rem; font-weight: 800; background: #edf4fb; }
.order-document-upload-name,
.order-document-upload-state { min-width: 0; }
.order-document-upload-name strong,
.order-document-upload-state strong { display: block; overflow: hidden; color: var(--order-ink); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.order-document-upload-name small,
.order-document-upload-state small { display: block; overflow: hidden; margin-top: 3px; color: var(--order-muted); font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.order-document-upload-item[data-upload-status="warning"] { border-color: #e6ca87; background: #fffbef; }
.order-document-upload-item[data-upload-status="error"],
.order-document-upload-item[data-upload-status="failed"] { border-color: #e6b9b4; background: #fff6f4; }
.order-document-upload-item[data-upload-status="completed"] { border-color: #bfddcf; background: #f3faf7; }
.order-document-upload-item[data-upload-status="uploading"] { border-color: #9dbce0; background: #f2f7fd; }
.order-document-upload-note-block { display: grid; grid-template-columns: minmax(170px, .46fr) minmax(0, 1fr); gap: 18px; margin-top: 20px; padding-top: 18px; align-items: end; border-top: 1px solid #dce5ee; }
.order-document-upload-step-compact > span { width: 34px; height: 34px; flex-basis: 34px; }
.order-document-upload-progress { margin-top: 16px; }
.order-document-upload-progress div { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 8px; font-size: .8rem; }
.order-document-upload-progress progress { width: 100%; height: 8px; overflow: hidden; border: 0; border-radius: 999px; background: #dce5ef; }
.order-document-upload-progress progress::-webkit-progress-bar { background: #dce5ef; }
.order-document-upload-progress progress::-webkit-progress-value { background: var(--order-blue); }
.order-document-upload-progress progress::-moz-progress-bar { background: var(--order-blue); }
.order-document-upload-actions {
  display: flex;
  min-height: 76px;
  margin: 0;
  padding: 12px 20px 12px 24px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid #d7e1eb;
  background: #fff;
}

.order-document-upload-actions > div { display: grid; min-width: 0; gap: 2px; }
.order-document-upload-actions > div strong { color: var(--order-ink); font-size: .74rem; }
.order-document-upload-actions > div span { color: var(--order-muted); font-size: .66rem; }
.order-document-upload-action-buttons { display: flex; flex: none; gap: 8px; }
.order-document-upload-action-buttons .button { min-width: 92px; min-height: 40px; justify-content: center; }

.order-document-preview-modal {
  width: min(1240px, calc(100vw - 32px));
}

.order-document-preview-card {
  display: flex;
  width: 100%;
  height: min(92dvh, 940px);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #c8d3df;
  border-radius: 14px;
  background: #fff;
}

.order-document-preview-heading {
  display: flex;
  min-height: 84px;
  padding: 16px 74px 16px 20px !important;
  align-items: center;
  border-bottom: 1px solid var(--order-line);
  background: #fff;
}

.order-document-preview-file { display: flex; gap: 13px; align-items: center; min-width: 0; }
.order-document-preview-type {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border: 1px solid #bed0e3;
  border-radius: 10px;
  color: var(--order-blue-deep);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  background: #edf4fb;
}

.order-document-preview-copy { min-width: 0; }
.order-document-preview-copy .eyebrow { color: var(--order-blue); font-size: .68rem; letter-spacing: .13em; }
.order-document-preview-copy h2 {
  overflow: hidden;
  max-width: 740px;
  margin: 3px 0 0;
  color: var(--order-ink);
  font-size: 1rem !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-document-preview-copy p { margin-top: 3px; color: var(--order-muted); font-size: .74rem !important; }
.order-document-preview-security {
  display: inline-flex;
  margin-left: auto;
  padding: 7px 10px;
  align-items: center;
  gap: 7px;
  border: 1px solid #cfe1d9;
  border-radius: 8px;
  color: #28664f;
  font-size: .72rem;
  font-weight: 700;
  background: #f0f8f4;
  white-space: nowrap;
}

.order-document-preview-security i { width: 7px; height: 7px; border-radius: 50%; background: var(--order-green); }
.order-document-preview-toolbar {
  display: flex;
  min-height: 54px;
  padding: 9px 20px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--order-line);
  background: #f6f8fb;
}

.order-document-preview-toolbar > div { display: flex; align-items: baseline; gap: 9px; white-space: nowrap; }
.order-document-preview-toolbar span { color: var(--order-muted); font-size: .69rem; }
.order-document-preview-toolbar strong { color: var(--order-blue-deep); font-size: .76rem; }
.order-document-preview-toolbar p { margin: 0; color: var(--order-muted); font-size: .72rem; line-height: 1.45; text-align: right; }
.order-document-preview-toolbar .order-document-preview-sequence { gap: 7px; }
.order-document-preview-sequence[hidden] { display: none; }
.order-document-preview-sequence .button { min-height: 32px; padding: 5px 10px; font-size: .72rem; }
.order-document-preview-sequence > strong { min-width: 48px; text-align: center; }
.order-document-preview-stage {
  position: relative;
  display: grid;
  min-height: 0;
  flex: 1;
  place-items: stretch;
  overflow: hidden;
  background: #e7ecf2;
}

.order-document-preview-content { display: grid; min-width: 0; min-height: 0; place-items: center; overflow: hidden; }
.order-document-preview-content iframe { width: 100%; height: 100%; min-height: 0; border: 0; background: #fff; }
.order-document-preview-stage[data-preview-kind="image"] .order-document-preview-content {
  padding: 28px;
  overflow: auto;
  overscroll-behavior: contain;
}
.order-document-preview-content img {
  display: block;
  max-width: min(100%, 1120px);
  max-height: 66dvh;
  border: 1px solid #cbd5e0;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 10px 28px rgba(25, 44, 67, .12);
}

.order-document-preview-loading,
.order-document-preview-error {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  place-content: center;
  justify-items: center;
  color: var(--order-muted);
  text-align: center;
  background: #eef2f6;
}

.order-document-preview-stage[data-state="loading"] .order-document-preview-loading,
.order-document-preview-stage[data-state="error"] .order-document-preview-error { display: grid; }
.order-document-preview-loading span {
  width: 28px;
  height: 28px;
  margin-bottom: 12px;
  border: 3px solid #c6d2df;
  border-top-color: var(--order-blue);
  border-radius: 50%;
  animation: order-preview-spin .8s linear infinite;
}

.order-document-preview-loading strong,
.order-document-preview-error strong { color: var(--order-ink); font-size: .88rem; }
.order-document-preview-loading small,
.order-document-preview-error span { margin-top: 5px; font-size: .72rem; }
.order-document-preview-footer {
  display: flex;
  min-height: 68px;
  margin: 0;
  padding: 11px 20px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--order-line);
  background: #fff;
}

.order-document-preview-footer > div:first-child { display: grid; gap: 2px; min-width: 0; }
.order-document-preview-footer > div:first-child strong { color: var(--order-ink); font-size: .76rem; }
.order-document-preview-footer > div:first-child span { color: var(--order-muted); font-size: .7rem; }
.order-document-preview-footer-actions { display: flex; flex: none; gap: 8px; }
.order-document-preview-footer-actions .button { min-width: 112px; min-height: 40px; justify-content: center; text-decoration: none; }

@keyframes order-preview-spin { to { transform: rotate(360deg); } }

.order-documents-view.is-loading .order-documents-list,
.order-documents-view.is-loading .order-documents-detail { opacity: .62; pointer-events: none; }

@media (max-width: 1180px) {
  .order-documents-hero { grid-template-columns: 1fr; }
  .order-documents-hero-meta { max-width: 680px; }
  .order-documents-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .order-documents-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .order-documents-facts div:nth-child(2) { border-right: 0; }
  .order-documents-facts div:nth-child(-n + 2) { border-bottom: 1px solid var(--order-line); }
  .order-document-file-row { grid-template-columns: minmax(0, 1fr) 240px; }
  .order-document-file-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

@media (max-width: 900px) {
  .order-documents-toolbar { grid-template-columns: minmax(0, 1fr) minmax(150px, .55fr); }
  .order-documents-workspace { grid-template-columns: 1fr; }
  .order-documents-index { position: static; }
  .order-documents-list { grid-template-columns: repeat(2, minmax(250px, 1fr)); max-height: 390px; overflow: auto; }
  .order-document-index-card { border-right: 1px solid #e6ebf1; }
}

@media (max-width: 680px) {
  .order-documents-hero { min-height: 0; padding: 24px 20px; border-radius: 16px; }
  .order-documents-hero-meta { grid-template-columns: 1fr; }
  .order-documents-hero-meta div { padding: 10px 0; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .order-documents-hero-meta div:last-child { border-bottom: 0; }
  .order-documents-toolbar { grid-template-columns: 1fr; }
  .order-documents-toolbar .button { width: 100%; }
  .order-documents-list { grid-template-columns: 1fr; max-height: 350px; }
  .order-documents-detail-content { padding: 18px 14px; }
  .order-documents-detail-heading { display: grid; }
  .order-documents-detail-actions { justify-content: flex-start; }
  .order-documents-category-grid { grid-template-columns: 1fr; }
  .order-document-file-row { grid-template-columns: 1fr; }
  .order-document-file-actions { justify-content: flex-start; }
  .order-document-order-card { height: calc(100dvh - 20px); max-height: none; }
  .order-document-order-heading { min-height: 112px; padding: 18px 72px 17px 20px !important; }
  .order-document-order-heading::after,
  .order-document-order-security { display: none; }
  .order-document-order-heading h2 { font-size: 1.3rem !important; }
  .order-document-order-heading p { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
  .order-document-order-workspace { display: block; overflow: auto; }
  .order-document-order-rail { display: grid; padding: 12px 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border-right: 0; border-bottom: 1px solid #d8e2ed; }
  .order-document-order-index,
  .order-document-order-policy,
  .order-document-order-privacy { display: none; }
  .order-document-order-rail-step,
  .order-document-order-rail-step + .order-document-order-rail-step { margin: 0; padding: 4px 0; }
  .order-document-order-main { padding: 16px; overflow: visible; }
  .order-document-order-primary-grid,
  .order-document-form-grid { grid-template-columns: 1fr; }
  .order-document-form-note { grid-column: auto; }
  .order-document-order-actions { min-height: 70px; padding: 10px 14px; }
  .order-document-order-actions > div { display: none; }
  .order-document-order-actions > span { width: 100%; }
  .order-document-order-actions .button { flex: 1; }
  .order-document-upload-card { height: calc(100dvh - 20px); max-height: none; }
  .order-document-upload-heading { min-height: 112px; padding: 18px 72px 17px 20px !important; }
  .order-document-upload-heading::after,
  .order-document-upload-security { display: none; }
  .order-document-upload-heading h2 { font-size: 1.3rem !important; }
  .order-document-upload-heading p { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
  .order-document-upload-workspace { display: block; overflow: auto; }
  .order-document-upload-rail { padding: 18px; border-right: 0; border-bottom: 1px solid #d8e2ed; }
  .order-document-upload-policy { display: none; }
  .order-document-upload-formats { margin-top: 14px; padding-top: 0; }
  .order-document-upload-main { padding: 18px; overflow: visible; }
  .order-document-dropzone { min-height: 130px; padding: 18px; }
  .order-document-upload-note-block { grid-template-columns: 1fr; gap: 12px; align-items: stretch; }
  .order-document-upload-actions { min-height: 70px; padding: 10px 14px; }
  .order-document-upload-actions > div { display: none; }
  .order-document-upload-action-buttons { width: 100%; }
  .order-document-upload-action-buttons .button { flex: 1; }
  .order-document-preview-heading { min-height: 78px; padding: 12px 62px 12px 12px !important; }
  .order-document-preview-type { width: 42px; height: 42px; flex-basis: 42px; }
  .order-document-preview-security { display: none; }
  .order-document-preview-copy .eyebrow { display: none; }
  .order-document-preview-copy h2 { max-width: calc(100vw - 128px); }
  .order-document-preview-toolbar { min-height: 58px; padding: 9px 12px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 2px; }
  .order-document-preview-toolbar .order-document-preview-sequence { width: 100%; margin-block: 4px; justify-content: center; }
  .order-document-preview-toolbar p { overflow: hidden; max-width: 100%; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
  .order-document-preview-stage[data-preview-kind="image"] .order-document-preview-content { padding: 12px; }
  .order-document-preview-footer { padding: 10px 12px; }
  .order-document-preview-footer > div:first-child { display: none; }
  .order-document-preview-footer-actions { width: 100%; }
  .order-document-preview-footer-actions .button { min-width: 0; flex: 1; }
}

@media (max-width: 430px) {
  .order-documents-facts { grid-template-columns: 1fr; }
  .order-documents-facts div { border-right: 0; border-bottom: 1px solid var(--order-line); }
  .order-documents-facts div:last-child { border-bottom: 0; }
  .order-documents-category-section > header,
  .order-documents-file-section > header { align-items: start; flex-direction: column; }
  .order-documents-file-section > header .button { width: 100%; }
  .order-documents-file-tools { width: 100%; justify-content: stretch; }
  .order-documents-file-tools > span { width: 100%; }
  .order-document-upload-card { width: calc(100vw - 12px); height: calc(100dvh - 12px); border-radius: 12px; }
  .order-document-order-card { width: calc(100vw - 12px); height: calc(100dvh - 12px); border-radius: 12px; }
  .order-document-order-heading { min-height: 104px; padding-left: 16px !important; }
  .order-document-order-heading .eyebrow { font-size: .6rem; }
  .order-document-order-heading h2 { font-size: 1.18rem !important; }
  .order-document-order-rail { padding-inline: 14px; }
  .order-document-order-rail-step > span { width: 30px; height: 30px; flex-basis: 30px; }
  .order-document-order-rail-step small { display: none; }
  .order-document-order-main { padding: 12px; }
  .order-document-order-section { padding: 14px; }
  .order-document-order-section > header em { display: none; }
  .order-document-upload-heading { min-height: 104px; padding-left: 16px !important; }
  .order-document-upload-heading .eyebrow { font-size: .6rem; }
  .order-document-upload-heading h2 { font-size: 1.18rem !important; }
  .order-document-upload-rail,
  .order-document-upload-main { padding: 16px; }
  .order-document-dropzone { grid-template-columns: 46px minmax(0, 1fr); gap: 12px; }
  .order-document-dropzone-mark { width: 44px; height: 50px; }
  .order-document-dropzone-action { grid-column: 1 / -1; text-align: center; }
  .order-document-upload-summary { align-items: flex-start; flex-direction: column; gap: 3px; }
  .order-document-upload-selection .order-document-upload-item { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .order-document-upload-state { grid-column: 2 / -1; }
  .order-document-category-card { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .order-document-preview-card { width: calc(100vw - 12px); height: calc(100dvh - 12px); }
}

@media (prefers-reduced-motion: reduce) {
  .order-document-index-card,
  .order-document-category-card { transition: none; }
  .order-document-preview-loading span { animation: none; }
}


/*
 * v1.5.68 · WZH 企业工作台视觉治理层
 * 最后加载：统一字体层级、控件尺寸、卡片节奏与响应式可读性。
 */

@media screen {
  :root {
    /* 方向 A：企业工作台清晰型。此处是全站唯一最终字体权威层。 */
    --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
    --font-code: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --font-sans: var(--font-ui);
    --font-display: var(--font-ui);
    --sans: var(--font-ui);
    --serif: var(--font-ui);

    --text-meta: 12px;
    --text-small: 13px;
    --text-body: 14px;
    --text-control: 14px;
    --text-emphasis: 16px;
    --text-card-title: 20px;
    --text-section-title: 24px;
    --text-page-title: clamp(26px, 2.2vw, 30px);
    --text-display: clamp(30px, 2.6vw, 34px);

    --type-meta: var(--text-meta);
    --type-small: var(--text-small);
    --type-body: var(--text-body);
    --type-control: var(--text-control);
    --type-card-title: var(--text-card-title);
    --type-section-title: var(--text-section-title);
    --type-page-title: var(--text-page-title);
    --type-display: var(--text-display);

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --line-title: 1.25;
    --line-compact: 1.4;
    --line-body: 1.6;

    --ui-primary: #2f6fe4;
    --ui-primary-deep: #2058c1;
    --ui-text: #14213d;
    --ui-muted: #66738e;
    --ui-border: #d9e2f2;
    --ui-border-strong: #c6d4eb;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f5f8ff;
    --ui-focus: rgba(47, 111, 228, 0.24);
    --ui-shadow: 0 8px 24px rgba(38, 58, 108, 0.08);
    --ui-radius-panel: 9px;
    --ui-radius-control: 6px;
    --ui-gap: 14px;
  }

  body {
    color: var(--ui-text);
    font-family: var(--font-ui);
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
    line-height: var(--line-body);
  }

  body .app-shell :where(*:not(svg):not(path)),
  body dialog[id][class] :where(*:not(svg):not(path)) {
    font-family: var(--font-ui);
    font-weight: var(--weight-regular) !important;
  }

  body .app-shell :where(code, kbd, samp, pre),
  body dialog[id][class] :where(code, kbd, samp, pre) {
    font-family: var(--font-code);
    font-variant-numeric: tabular-nums;
  }

  body .app-shell :where(h1, h2, h3, h4, h5, h6),
  body .app-shell :where(h1, h2, h3, h4, h5, h6) *,
  body dialog[id][class] :where(h1, h2, h3, h4, h5, h6),
  body dialog[id][class] :where(h1, h2, h3, h4, h5, h6) * {
    font-family: var(--font-ui);
    font-weight: var(--weight-bold) !important;
    line-height: var(--line-title);
  }

  body .app-shell :where(button, input, select, textarea, .button),
  body .app-shell :where(button, .button) *,
  body dialog[id][class] :where(button, input, select, textarea, .button),
  body dialog[id][class] :where(button, .button) * {
    font-family: var(--font-ui);
    font-size: var(--text-control);
    font-weight: var(--weight-semibold) !important;
    line-height: var(--line-compact);
  }

  body .app-shell :where(strong, b, th),
  body dialog[id][class] :where(strong, b, th) {
    font-weight: var(--weight-bold) !important;
  }

  body .app-shell :where(label, dt, legend, .eyebrow, .field-label),
  body dialog[id][class] :where(label, dt, legend, .eyebrow, .field-label) {
    font-weight: var(--weight-semibold) !important;
  }

  body .app-shell :where(p, li, dd, td),
  body dialog[id][class] :where(p, li, dd, td) {
    line-height: var(--line-body);
  }

  body .app-shell :where(small),
  body dialog[id][class] :where(small) {
    font-size: var(--text-meta);
    line-height: var(--line-compact);
  }

  .main-stage,
  .view,
  .view > *,
  .topbar,
  .global-month-context,
  dialog,
  form {
    min-width: 0;
  }

  :where(button, input, select, textarea, .button):focus-visible {
    outline: 3px solid var(--ui-focus);
    outline-offset: 2px;
  }

  :where(input, select, textarea) {
    min-height: 40px;
    border-color: var(--ui-border-strong);
    border-radius: var(--ui-radius-control);
  }

  :where(.button, .top-actions button, .modal-actions button, .attendance-actions button) {
    min-height: 38px;
    border-radius: var(--ui-radius-control);
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    line-height: var(--line-compact);
  }

  :where(.topbar, .global-month-context, .result-gallery-heading, .work-kpi-heading,
    .attendance-heading, .user-management-heading, .panel, .settings-card,
    .directory-section, .work-entry-card, .work-kpi-card) {
    border-color: var(--ui-border);
    border-radius: var(--ui-radius-panel);
    box-shadow: var(--ui-shadow);
  }

  .topbar {
    gap: 14px 18px;
    padding: 14px 18px;
  }

  .topbar .view-identity {
    min-width: 220px;
  }

  .topbar .eyebrow {
    margin-bottom: 4px;
    color: var(--ui-primary-deep);
    font-size: var(--text-meta);
    line-height: 1.35;
  }

  .topbar h1 {
    margin: 0;
    font-size: var(--text-page-title);
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  .top-actions {
    gap: 8px;
  }

  .nav-item {
    min-height: 44px;
    padding-block: 10px;
    font-size: var(--text-body);
  }

  .campaign-nav-item {
    color: #8d2a1d;
    border-color: #f1c49c;
    background: linear-gradient(135deg, #fff7e8, #ffe2bd);
  }

  .campaign-nav-item:hover {
    color: #6f1d14;
    border-color: #df9c61;
    background: linear-gradient(135deg, #fff0d4, #ffd29b);
  }

  @media (min-width: 821px) {
    .sidebar:has(.department-scope:not([hidden])) .brand-copy {
      display: none;
    }

    .sidebar:has(.department-scope:not([hidden])) .brand-lockup {
      gap: 0;
      padding-bottom: 15px;
    }

    .sidebar .department-scope {
      position: relative;
      width: 100%;
      min-width: 0;
      margin-top: 10px;
      padding: 8px 34px 8px 11px;
      border: 0;
      border-left: 3px solid var(--ui-primary);
      border-radius: 6px;
      background: #f1f6ff;
      box-shadow: none;
      cursor: pointer;
      transition: background-color 160ms ease, box-shadow 160ms ease;
    }

    .sidebar .department-scope::after {
      content: "";
      position: absolute;
      right: 14px;
      bottom: 16px;
      width: 7px;
      height: 7px;
      border-right: 2px solid var(--ui-primary-deep);
      border-bottom: 2px solid var(--ui-primary-deep);
      transform: rotate(45deg);
      pointer-events: none;
    }

    .sidebar .department-scope:hover {
      background: #e8f1ff;
    }

    .sidebar .department-scope:focus-within {
      outline: 3px solid var(--ui-focus);
      outline-offset: 2px;
      box-shadow: inset 0 0 0 1px #9dbcf2;
    }

    .sidebar .department-scope > span {
      display: block;
      margin-bottom: 1px;
      color: var(--ink-soft);
      font-size: var(--text-meta);
      font-weight: var(--weight-medium) !important;
      line-height: 1.2;
      letter-spacing: 0;
    }

    .sidebar .department-scope select {
      width: 100%;
      min-height: 24px;
      padding: 0;
      border: 0;
      border-radius: 0;
      appearance: none;
      -webkit-appearance: none;
      color: var(--ui-primary-deep);
      background: transparent;
      box-shadow: none;
      font-size: var(--text-emphasis);
      font-weight: var(--weight-bold) !important;
      line-height: var(--line-title);
      cursor: pointer;
    }

    .sidebar .department-scope select:focus-visible {
      outline: 0;
    }

    .sidebar .side-nav {
      gap: 3px;
      margin-top: 11px;
    }

    .sidebar .nav-item {
      min-height: 36px;
      padding-block: 5px;
    }
  }

  .brand-lockup small,
  .document-code,
  .local-badge,
  .app-version,
  .app-version span,
  .app-version b {
    font-size: var(--text-meta) !important;
    line-height: var(--line-compact) !important;
  }

  .result-gallery-heading,
  .work-kpi-heading,
  .attendance-heading,
  .user-management-heading,
  .role-intro {
    gap: var(--ui-gap);
    padding: 16px 18px;
  }

  .result-gallery-heading h2,
  .work-kpi-heading h2,
  .attendance-heading h2,
  .user-management-heading h2,
  .role-intro h2,
  .panel-heading h2,
  .settings-card h2,
  .directory-section-heading h3,
  .modal-heading h2 {
    font-size: var(--text-section-title) !important;
    line-height: var(--line-title) !important;
  }

  .result-gallery-heading p,
  .work-kpi-heading p,
  .attendance-heading p,
  .user-management-heading p,
  .role-intro p,
  .panel-heading p,
  .settings-card > p,
  .modal-heading p {
    font-size: var(--text-body) !important;
    line-height: var(--line-body) !important;
  }

  /* 全站月份：月份是主导航，完成度是辅助状态。 */
  .global-month-context {
    gap: 10px;
    padding: 14px;
  }

  .global-month-context .result-month-caption,
  .global-month-context .result-completion small,
  .global-month-scope,
  .global-month-scope p,
  .global-month-scope-mark {
    font-size: var(--text-meta) !important;
    line-height: var(--line-compact) !important;
  }

  #month-year-label {
    font-size: var(--text-emphasis);
    line-height: var(--line-title);
  }

  .result-month-button {
    min-height: 44px;
    font-size: var(--text-small);
  }

  .result-month-button span {
    font-size: var(--text-emphasis);
  }

  .global-month-context #result-complete-count {
    font-size: var(--text-card-title);
  }

  /* 月度时间线：同一节点只保留两级文字。 */
  .dashboard-timeline {
    border-radius: var(--ui-radius-panel);
  }

  .dashboard-timeline-eyebrow,
  .dashboard-timeline-deadline span,
  .dashboard-timeline-track time strong,
  .dashboard-timeline-track time span,
  .dashboard-timeline-track p,
  .dashboard-timeline-note {
    font-size: var(--text-meta) !important;
    line-height: 1.5 !important;
  }

  .dashboard-timeline-track b {
    font-size: var(--text-small) !important;
    line-height: var(--line-compact) !important;
  }

  /* 员工月度卡：修正后加载模块重新写入的 7—11 px 微小字号。 */
  .performance-id-card {
    grid-template-rows: auto auto auto auto auto auto !important;
    row-gap: 0 !important;
    border-color: var(--ui-border) !important;
    box-shadow: var(--ui-shadow) !important;
  }

  .id-card-topline,
  .id-card-topline b {
    font-size: var(--text-meta) !important;
    line-height: var(--line-compact) !important;
  }

  .performance-id-card .id-person-copy,
  .performance-id-card:has(.id-attendance-summary) .id-person-copy {
    min-height: 92px;
    height: auto;
  }

  .id-person-copy h3 {
    font-size: var(--text-card-title) !important;
    line-height: 1.2 !important;
  }

  .id-person-copy p {
    font-size: var(--text-meta) !important;
    line-height: var(--line-compact) !important;
  }

  .id-final-score > span:first-child,
  .self-assessment-value > small,
  .final-score-value small {
    font-size: var(--text-meta) !important;
    line-height: 1.4 !important;
  }

  .score-equation-part small {
    max-width: 62px;
    font-size: var(--text-meta) !important;
    line-height: 1.25 !important;
    white-space: normal;
  }

  .score-equation-part strong {
    font-family: var(--font-sans);
    font-size: var(--text-card-title);
  }

  .id-result-stack > div,
  .id-result-stack .id-self-result,
  .id-result-stack .id-primary-result,
  .id-result-stack .id-secondary-result {
    min-height: 68px;
  }

  .id-result-stack > div > span:first-child {
    font-size: var(--text-meta) !important;
    line-height: 1.4 !important;
  }

  .id-result-stack .level-badge b,
  .id-result-stack .final-grade-badge b {
    font-size: var(--text-meta) !important;
  }

  .id-result-stack .level-badge,
  .id-result-stack .final-grade-badge {
    gap: 4px;
    padding-inline: 4px;
  }

  .id-result-stack .level-badge-code,
  .id-result-stack .final-grade-code,
  .level-emblem-code,
  .level-badge-code,
  .final-grade-code {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    font-size: var(--text-meta) !important;
    font-weight: var(--weight-bold) !important;
  }

  .id-attendance-heading span,
  .id-attendance-heading strong,
  .id-attendance-summary dt,
  .id-kpi-head span,
  .id-kpi-business-item dt {
    font-size: var(--text-meta) !important;
    line-height: 1.4 !important;
  }

  .id-attendance-summary dd,
  .id-attendance-summary > p,
  .id-kpi-head b,
  .id-kpi-business-item dd {
    font-size: var(--text-meta) !important;
    line-height: var(--line-compact) !important;
  }

  .id-kpi-view-button {
    min-height: 34px;
    padding: 6px 10px;
    font-size: var(--text-meta) !important;
  }

  .performance-id-card .id-card-footer,
  .performance-id-card:has(.id-attendance-summary) .id-card-footer {
    min-height: 30px;
    font-size: var(--text-meta) !important;
    line-height: 1.4 !important;
  }

  /* 主管／领导、自评及登录页。 */
  .role-reviewer-copy span,
  .role-reviewer-copy small,
  .self-assessment-option small,
  .self-assessment-policy-note strong,
  .self-assessment-policy-note span,
  .auth-brand span,
  .auth-footer,
  .auth-login-version,
  .auth-admin-entry {
    font-size: var(--text-meta) !important;
    line-height: var(--line-compact) !important;
  }

  .auth-login-version {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    padding: 2px 7px;
    color: #526481;
    border: 1px solid #cfdaec;
    border-radius: 999px;
    background: #f5f8fd;
    font-size: var(--text-meta) !important;
    font-weight: var(--weight-semibold) !important;
    font-variant-numeric: tabular-nums;
    line-height: 1 !important;
    white-space: nowrap;
  }

  .role-reviewer-copy strong {
    font-size: var(--text-emphasis);
    line-height: var(--line-title);
  }

  .self-assessment-option {
    min-height: 140px;
  }

  .auth-gate .auth-heading p,
  .auth-mode-note,
  .auth-security-note {
    font-size: var(--text-small) !important;
    line-height: var(--line-body) !important;
  }

  /* 表格和录入界面：同类字段不再出现跳字号。 */
  :where(.data-table, .role-table, .attendance-table, .work-detail-table, .user-table) {
    font-size: var(--text-small);
    line-height: var(--line-compact);
  }

  :where(.data-table, .role-table, .attendance-table, .work-detail-table, .user-table) th {
    font-size: var(--text-meta) !important;
    font-weight: var(--weight-semibold);
    line-height: var(--line-compact) !important;
  }

  :where(.data-table, .role-table, .attendance-table, .work-detail-table, .user-table) td,
  :where(.data-table, .role-table, .attendance-table, .work-detail-table, .user-table) input,
  :where(.data-table, .role-table, .attendance-table, .work-detail-table, .user-table) select {
    font-size: var(--text-small) !important;
    line-height: var(--line-compact) !important;
  }

  .field > span,
  .field-label,
  .field small,
  .form-help,
  .form-note {
    font-size: var(--text-small) !important;
    line-height: var(--line-compact) !important;
  }

  /* 历史考评、档案与工作卡：状态标签和紧凑操作仍需达到可读下限。 */
  .confirmation-chip,
  .shadow-type-code,
  .shadow-type-card dd span,
  .shadow-overview-grid dd span,
  .shadow-employee-summary .shadow-stat span,
  .shadow-index-meter span,
  #ordinary-employee-count,
  #intern-employee-count {
    font-size: var(--text-meta) !important;
    line-height: var(--line-compact) !important;
  }

  .work-kpi-card-actions :where(.button, button) {
    font-size: var(--text-small) !important;
    line-height: var(--line-compact) !important;
  }

  .metric-order {
    font-family: var(--font-ui) !important;
  }

  /* 用户目录：分类标签、说明与账号计数使用统一元信息字号。 */
  .user-directory-classifier > div:first-child > span,
  .user-directory-classifier p,
  .user-directory-group-heading > div:first-child > span,
  .user-directory-group-heading p,
  .user-directory-group-count span {
    font-size: var(--text-meta) !important;
    line-height: var(--line-compact) !important;
  }

  /* VPS：保留节点编号的等宽字体，其余界面文字回归系统字体与 12 px 下限。 */
  .vps-command-code,
  #vps-updated-at,
  .vps-capacity-heading span,
  .vps-capacity-heading p,
  .vps-pool-capacity header span,
  .vps-pool-capacity header em,
  .vps-pool-capacity p,
  .vps-metric-grid :where(span, small),
  .vps-ledger-toolbar > div > span,
  .vps-ledger-table th,
  .vps-security-note > span,
  .vps-security-note p,
  .my-vps-empty p {
    font-size: var(--text-meta) !important;
    line-height: var(--line-compact) !important;
  }

  .vps-pool-capacity header em b {
    font-family: var(--font-ui) !important;
    font-weight: var(--weight-bold) !important;
  }

  .toast {
    font-size: var(--text-body);
    line-height: var(--line-body);
  }

  /* 深层业务组件：消除历史模块残留的 8—10 px 字号。 */
  .dashboard-timeline-note > span,
  .dashboard-intern-work-button,
  .management-admin-lock,
  .work-quick-period,
  .work-quick-period span,
  .work-quick-business legend,
  .work-kpi-numbers span,
  .work-kpi-duration-stat span,
  .work-kpi-duration-stat small,
  .work-kpi-card-summary span,
  .work-kpi-card-summary .is-empty,
  .work-kpi-tags .is-empty,
  .work-kpi-card-foot span,
  .work-kpi-card-foot b,
  .id-kpi-head em,
  .objective-score-badge small,
  .photo-upload-copy small,
  #intern-period-preview span,
  #intern-period-preview small,
  #employee-salary-description,
  #employee-salary-total-label,
  #employee-intern-salary-rule,
  .employee-salary-security,
  .work-kpi-summary-preview span {
    font-size: var(--text-meta) !important;
    line-height: var(--line-compact) !important;
  }

  .remove-metric {
    min-height: 30px;
    font-size: var(--text-meta) !important;
    line-height: 1.4 !important;
  }

  /* 历史模板仍可由旧链接打开，保持字段完整可读，不让说明列落入隐形操作列。 */
  .template-row {
    grid-template-columns: 42px minmax(150px, 0.7fr) minmax(220px, 1.3fr) 90px;
  }

  .template-row .metric-desc {
    grid-column: 2 / 4;
  }

  .template-row .remove-metric {
    grid-column: 4;
    grid-row: 2;
  }

  #scoring-rules-dialog :where(span, small, p, b) {
    font-size: var(--text-meta) !important;
    line-height: var(--line-compact) !important;
  }

  #scoring-rules-dialog :where(.scoring-rules-grade-grid strong, .scoring-rules-steps strong) {
    font-size: var(--text-meta) !important;
  }

  #scoring-rules-dialog :where(.scoring-rules-summary strong, .scoring-rules-equation strong) {
    font-size: var(--text-emphasis) !important;
    font-variant-numeric: tabular-nums;
  }

  #scoring-rules-dialog :where(.scoring-rules-example strong, .scoring-rules-duration-reference p span) {
    font-size: var(--text-body) !important;
    font-variant-numeric: tabular-nums;
  }

  #scoring-rules-dialog :where(.scoring-rules-chip-list b, .scoring-rules-intensity-list b) {
    font-size: var(--text-small) !important;
    font-variant-numeric: tabular-nums;
  }

  #policy-dialog :where(.policy-anchor-nav a, .policy-role-grid span,
    .policy-salary-details > span, .policy-weight-title span,
    .policy-weight-title strong, .policy-salary-lead p) {
    font-size: var(--text-meta) !important;
    line-height: var(--line-compact) !important;
  }

  #policy-dialog .policy-salary-details article > span {
    font-size: var(--text-meta) !important;
    line-height: var(--line-compact) !important;
  }

  @media (max-width: 820px) {
    html {
      scroll-padding-top: 112px;
    }

    .sidebar {
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 6px 10px;
      padding: 8px 10px 7px;
    }

    .sidebar .brand-lockup {
      grid-row: 1;
      grid-column: 1;
    }

    .sidebar .local-badge {
      display: none;
    }

    .sidebar .app-version {
      grid-row: 1;
      grid-column: 3;
      width: auto;
      white-space: nowrap;
    }

    .sidebar .department-scope {
      grid-row: 1;
      grid-column: 2;
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: center;
      gap: 0;
      width: 100%;
      min-width: 0;
      min-height: 44px;
      padding: 0 22px 0 8px;
      border: 0;
      border-left: 3px solid var(--ui-primary);
      border-radius: 6px;
      background: #f1f6ff;
      cursor: pointer;
    }

    .sidebar .department-scope::after {
      content: "";
      position: absolute;
      right: 12px;
      top: 50%;
      width: 7px;
      height: 7px;
      border-right: 2px solid var(--ui-primary-deep);
      border-bottom: 2px solid var(--ui-primary-deep);
      transform: translateY(-65%) rotate(45deg);
      pointer-events: none;
    }

    .sidebar .department-scope:focus-within {
      outline: 3px solid var(--ui-focus);
      outline-offset: 2px;
    }

    .sidebar .department-scope > span {
      display: none;
    }

    .sidebar .department-scope select {
      width: 100%;
      min-height: 44px !important;
      min-width: 0;
      padding: 0;
      border: 0;
      appearance: none;
      -webkit-appearance: none;
      color: var(--ui-primary-deep);
      background: transparent;
      box-shadow: none;
      font-size: var(--text-control);
      font-weight: var(--weight-bold) !important;
      text-overflow: ellipsis;
    }

    .side-nav {
      grid-row: 2;
      grid-column: 1 / -1;
      display: flex;
      gap: 6px;
      margin: 0;
      padding: 0 0 3px;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: thin;
      scroll-snap-type: x proximity;
      -webkit-overflow-scrolling: touch;
    }

    .side-nav::-webkit-scrollbar {
      display: block;
      height: 3px;
    }

    .side-nav::-webkit-scrollbar-thumb {
      border-radius: 999px;
      background: #c7d5ef;
    }

    .nav-item {
      width: auto;
      min-width: 104px;
      flex: 0 0 auto;
      scroll-snap-align: start;
    }

    .topbar {
      align-items: flex-start;
      padding: 14px;
    }

    .top-actions {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      width: 100%;
    }

    .top-actions .policy-open-button,
    .top-actions #export-button,
    .top-actions .login-button {
      width: 100%;
      min-width: 0;
    }

    .top-actions .policy-open-button { order: 1; }
    .top-actions #export-button,
    .top-actions .login-button { order: 2; }
    .top-actions .auth-session { order: 4; }

    .top-actions .auth-session {
      grid-column: 1 / -1;
    }

    .top-actions .auth-session {
      gap: 5px;
      padding-inline: 7px;
    }

    #auth-session-role {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .top-actions > :where(.button, .auth-session) {
      min-height: 44px;
    }

    .result-gallery-heading,
    .work-kpi-heading,
    .attendance-heading,
    .user-management-heading,
    .role-intro {
      padding: 14px;
    }

    .result-month-button {
      min-height: 44px;
    }

    :where(.button, .text-button, .icon-button, .management-edit-button,
      .id-kpi-view-button, .dashboard-intern-work-button,
      .work-kpi-edit-button, .shadow-rule-explain-button) {
      min-height: 44px !important;
    }

    :where(.top-actions .auth-password-change, .top-actions .auth-logout,
      .user-actions .button, .vps-row-actions .button,
      .vps-qr-preview-button, .vps-sort-button, .shadow-ledger-link) {
      min-width: 44px !important;
      min-height: 44px !important;
    }

    :where(.text-button, .icon-button, .management-edit-button) {
      min-width: 44px !important;
    }

    :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
      min-height: 44px !important;
    }

    .management-order span,
    .dashboard-intern-title,
    .role-intro .role-formula strong {
      line-height: 1.15 !important;
    }

    .template-row {
      grid-template-columns: 34px minmax(0, 1fr);
    }

    .template-row .metric-order { grid-column: 1; grid-row: 1; }
    .template-row .metric-category { grid-column: 2; grid-row: 1; }
    .template-row .metric-name { grid-column: 2; grid-row: 2; }
    .template-row .weight-input { grid-column: 2; grid-row: 3; }
    .template-row .metric-desc { grid-column: 2; grid-row: 4; }
    .template-row .remove-metric { grid-column: 1; grid-row: 4; }

    .dashboard-timeline-track::before {
      left: 19px;
    }

    .dashboard-timeline-track li {
      grid-template-columns: 60px minmax(0, 1fr);
    }

    .dashboard-timeline-track time {
      width: 40px;
      min-width: 40px;
      height: 34px;
      padding-inline: 5px;
      white-space: nowrap;
    }

    .dashboard-timeline-track li:nth-child(4) time {
      width: 64px;
      min-width: 64px;
      margin-left: -5px;
      padding-inline: 4px;
    }

    .performance-id-card .id-person-copy,
    .performance-id-card:has(.id-attendance-summary) .id-person-copy {
      grid-template-columns: minmax(0, 1fr) minmax(142px, 0.72fr);
    }
  }

  @media (max-width: 620px) {
    .performance-id-card {
      grid-template-rows: auto auto auto auto auto auto !important;
    }

    .performance-id-card .id-person-copy,
    .performance-id-card:has(.id-attendance-summary) .id-person-copy {
      grid-template-columns: minmax(0, 1fr) 148px;
      min-height: 88px;
    }

    .id-person-copy h3 {
      font-size: var(--text-card-title) !important;
    }

    .id-person-copy p {
      font-size: var(--text-small) !important;
    }

    .score-equation-part small {
      max-width: 44px;
      font-size: var(--text-meta) !important;
    }

    .id-result-stack > div,
    .id-result-stack .id-self-result,
    .id-result-stack .id-primary-result,
    .id-result-stack .id-secondary-result {
      min-height: 62px;
    }

    .id-attendance-summary dl > div {
      min-height: 38px;
    }
  }

  @media (max-width: 430px) {
    .topbar h1,
    .auth-gate .auth-heading h2 {
      font-size: 26px !important;
    }

    .performance-id-card .id-person-copy,
    .performance-id-card:has(.id-attendance-summary) .id-person-copy {
      grid-template-columns: minmax(0, 1fr);
      gap: 8px;
      padding-block: 8px !important;
    }

    .id-final-score {
      width: 100%;
    }

    .id-kpi-breakdown {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .id-kpi-business-item:last-child:nth-child(odd) {
      grid-column: 1 / -1;
    }

    .modal-actions {
      gap: 8px;
    }

    .modal-actions .button {
      min-height: 44px;
    }
  }
}

/* 全站弹窗关闭契约：默认使用无文字叠压的 44 px 叉号，标题栏为操作区保留空间。 */
@media screen {
  dialog .icon-button[aria-label^="关闭"] {
    display: grid !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    flex: 0 0 44px;
    place-items: center;
    overflow: hidden;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  dialog .icon-button[aria-label^="关闭"]::before,
  dialog .icon-button[aria-label^="关闭"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
  }

  dialog .icon-button[aria-label^="关闭"]::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  dialog .icon-button[aria-label^="关闭"]::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  dialog .modal-heading,
  dialog .policy-dialog-heading {
    position: relative;
    padding-right: 68px !important;
  }

  dialog .modal-heading .icon-button[aria-label^="关闭"],
  dialog .policy-dialog-heading .icon-button[aria-label^="关闭"] {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
    margin: 0;
  }

  dialog :where(.scoring-rules-heading, .work-import-heading) > div:first-child {
    min-width: 0;
    flex: 1;
  }

  dialog :where(.scoring-rules-heading, .work-import-heading) > .icon-button[aria-label^="关闭"] {
    margin-left: auto;
  }
}

/* 员工档案：以横向信息带替代纵向堆叠，减少空白但保留完整受保护信息。 */
@media screen {
  #view-employees > .panel {
    padding: 18px;
  }

  #view-employees .panel-heading {
    align-items: center;
    gap: 16px;
  }

  .employee-directory-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: min(430px, 46%);
    gap: 8px;
  }

  .employee-directory-actions .button {
    min-width: 0;
    min-height: 40px;
  }

  .management-directory,
  .leadership-assistant-directory,
  .intern-directory {
    margin-top: 16px;
    padding: 14px;
  }

  .ordinary-directory {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-panel);
    background: #f8faff;
  }

  .directory-section-heading {
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
  }

  .directory-index {
    margin-bottom: 3px;
  }

  .management-grid,
  .leadership-assistant-grid {
    gap: 8px;
  }

  .management-card,
  .leadership-assistant-card {
    gap: 12px;
    padding: 12px 14px;
  }

  .management-primary:not(:has(.employee-private-card)) .management-copy {
    grid-column: 3 / 5;
  }

  .management-primary:not(:has(.employee-private-card)) .management-capabilities {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ordinary-directory .employee-grid {
    gap: 10px 12px;
  }

  .ordinary-directory .employee-card {
    grid-template-columns: 64px minmax(96px, 0.65fr) minmax(170px, 1.35fr);
    grid-template-rows: auto minmax(76px, auto) auto auto;
    align-items: center;
    gap: 10px 12px;
    min-height: 0;
    padding: 14px;
  }

  .ordinary-directory .employee-file-number {
    grid-column: 1 / -1;
    padding: 0 112px 8px 0;
  }

  .ordinary-directory .employee-card-photo {
    grid-column: 1;
    grid-row: 2;
    width: 64px;
    height: 64px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }

  .ordinary-directory .employee-card-copy {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
  }

  .ordinary-directory .employee-capability-grid {
    grid-column: 3;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-self: stretch;
    gap: 6px;
    padding: 0;
    border-top: 0;
  }

  .ordinary-directory .employee-capability-grid > div {
    padding: 6px 8px;
    border-left-width: 2px;
  }

  .ordinary-directory .employee-capability-grid .employee-capability-wide {
    grid-column: 1 / -1;
  }

  .ordinary-directory .employee-private-card,
  .ordinary-directory .employee-salary-card {
    grid-column: 1 / -1;
    gap: 7px;
    margin-top: 0;
    padding: 10px 11px;
  }

  .ordinary-directory .employee-private-card dl,
  .ordinary-directory .employee-salary-card dl {
    gap: 6px 10px;
  }

  .ordinary-directory .employee-private-card dl > div,
  .ordinary-directory .employee-salary-card dl > div {
    padding-top: 6px;
  }

  .intern-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .intern-card {
    grid-template-columns: 64px minmax(120px, 0.55fr) minmax(240px, 1fr) minmax(260px, 1.15fr);
    grid-template-rows: auto auto auto auto;
    align-items: center;
    gap: 10px 12px;
    padding: 12px 14px;
  }

  .intern-card-topline {
    grid-column: 1 / -1;
    grid-row: 1;
    padding-bottom: 8px;
  }

  .intern-card-photo {
    grid-column: 1;
    grid-row: 2;
    width: 64px;
    height: 64px;
  }

  .intern-person-copy {
    grid-column: 2;
    grid-row: 2;
  }

  .intern-dates {
    grid-column: 3;
    grid-row: 2;
    gap: 6px;
  }

  .intern-capabilities {
    grid-column: 4;
    grid-row: 2;
    gap: 6px;
  }

  .intern-dates > div,
  .intern-capabilities > div {
    padding: 7px 8px;
  }

  .intern-card > .employee-private-card {
    grid-column: 1 / 4;
    grid-row: 3;
    gap: 7px;
    padding: 10px 11px;
  }

  .intern-card > .employee-salary-card {
    grid-column: 4;
    grid-row: 3;
    align-self: stretch;
    gap: 7px;
    margin-top: 0;
    padding: 10px 11px;
  }

  .intern-card-actions {
    grid-column: 1 / -1;
    grid-row: 4;
    padding-top: 0;
  }
}

@media screen and (max-width: 1080px) {
  .ordinary-directory .employee-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .intern-card {
    grid-template-columns: 60px minmax(110px, 0.55fr) repeat(2, minmax(180px, 1fr));
  }
}

@media screen and (max-width: 820px) {
  #view-employees > .panel {
    padding: 14px;
  }

  #view-employees .panel-heading {
    align-items: stretch;
  }

  .employee-directory-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
  }

  .management-directory,
  .leadership-assistant-directory,
  .ordinary-directory,
  .intern-directory {
    margin-top: 12px;
    padding: 12px;
  }

  .directory-section-heading {
    gap: 6px;
  }

  .intern-card {
    grid-template-columns: 58px minmax(100px, 0.55fr) repeat(2, minmax(150px, 1fr));
  }
}

@media screen and (max-width: 620px) {
  .employee-directory-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .ordinary-directory .employee-card {
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto;
    padding: 12px;
  }

  .ordinary-directory .employee-card-photo {
    grid-column: 1;
    grid-row: 2;
    width: 58px;
    height: 58px;
    aspect-ratio: 1 / 1;
  }

  .ordinary-directory .employee-card-copy {
    grid-column: 2;
    grid-row: 2;
  }

  .ordinary-directory .employee-capability-grid {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .intern-card {
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto auto;
    padding: 12px;
  }

  .intern-card-photo {
    grid-column: 1;
    grid-row: 2;
    width: 58px;
    height: 58px;
  }

  .intern-person-copy {
    grid-column: 2;
    grid-row: 2;
  }

  .intern-dates {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .intern-capabilities {
    grid-column: 1 / -1;
    grid-row: 4;
  }

  .intern-card > .employee-private-card,
  .intern-card > .employee-salary-card {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .intern-card-actions {
    grid-column: 1 / -1;
    grid-row: auto;
    align-items: stretch;
    flex-wrap: wrap;
  }

  .intern-promote-button {
    flex: 1 0 100%;
    margin-left: 0;
  }
}

/* 方向 A · 数据分析与员工档案的最终可读性约束。 */
@media screen {
  /* 活动入口使用独立暖色语义，与日常绩效功能的蓝色导航区分。 */
  .sidebar .campaign-nav-item,
  .sidebar .prediction-nav-item {
    position: relative;
    min-height: 52px;
    padding: 11px 52px 11px 15px;
    overflow: hidden;
    border-width: 1px;
    border-style: solid;
    border-radius: 10px;
    font-weight: var(--weight-bold) !important;
    letter-spacing: 0.02em;
    transform: none;
  }

  .sidebar .campaign-nav-item {
    color: #fff8ee;
    border-color: #9c3327;
    background: linear-gradient(135deg, #8f2d24 0%, #c84e32 58%, #e47a43 100%);
    box-shadow: 0 9px 20px rgba(143, 45, 36, 0.22);
  }

  .sidebar .prediction-nav-item {
    color: #633a00;
    border-color: #e2b94f;
    background: linear-gradient(135deg, #fff3c7 0%, #f7d477 55%, #edae3f 100%);
    box-shadow: 0 9px 20px rgba(181, 119, 18, 0.2);
  }

  .sidebar .campaign-nav-item::after,
  .sidebar .prediction-nav-item::after {
    content: "活动";
    position: absolute;
    top: 50%;
    right: 12px;
    padding: 3px 6px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: var(--text-meta);
    font-weight: var(--weight-bold);
    line-height: 1;
    letter-spacing: 0.04em;
    opacity: 0.78;
    transform: translateY(-50%);
  }

  .sidebar .campaign-nav-item:hover,
  .sidebar .campaign-nav-item.is-active {
    color: #fff;
    border-color: #7d211b;
    background: linear-gradient(135deg, #7d211b 0%, #b83e2b 56%, #d96538 100%);
    box-shadow: 0 12px 24px rgba(125, 33, 27, 0.3);
    transform: translateY(-1px);
  }

  .sidebar .prediction-nav-item:hover,
  .sidebar .prediction-nav-item.is-active {
    color: #4e2b00;
    border-color: #cd9425;
    background: linear-gradient(135deg, #ffedb0 0%, #f4c95e 54%, #e89a28 100%);
    box-shadow: 0 12px 24px rgba(171, 105, 7, 0.28);
    transform: translateY(-1px);
  }

  .sidebar .campaign-nav-item:focus-visible,
  .sidebar .prediction-nav-item:focus-visible {
    outline: 3px solid rgba(47, 111, 228, 0.32);
    outline-offset: 2px;
  }

  .work-output-view :where(
    .work-output-intro .eyebrow,
    .work-output-filters label > span,
    .work-output-kpi-title,
    .work-output-kpi-change,
    .work-output-panel-heading h2,
    .work-output-diagnosis-head,
    .work-output-ranking-note,
    .work-output-table th,
    .work-output-detail-link
  ) {
    font-weight: var(--weight-semibold) !important;
  }

  .work-output-view :where(
    .work-output-kpi-value strong,
    .work-output-warning-row strong,
    .work-output-table tbody tr:last-child td
  ) {
    font-weight: var(--weight-bold) !important;
  }

  .employee-salary-card :where(span, dt, p),
  .employee-salary-total span,
  .employee-salary-heading p,
  .employee-intern-salary-rule,
  .employee-salary-security,
  .management-order small,
  .management-role-tag,
  .management-copy small,
  .management-capabilities dt,
  .employee-capability-grid dt,
  .intern-capabilities dt,
  .intern-dates dt {
    font-size: var(--text-meta) !important;
    line-height: var(--line-compact) !important;
  }

  .employee-salary-card dd,
  .management-capabilities dd,
  .employee-capability-grid dd,
  .intern-capabilities dd,
  .intern-dates dd {
    font-size: var(--text-small) !important;
    line-height: var(--line-compact) !important;
  }

  .employee-salary-card-heading strong {
    font-size: var(--text-emphasis) !important;
  }

  .level-emblem,
  #leadership-assistant-count,
  .score-equation i {
    font-size: var(--text-meta) !important;
  }
}

@media (max-width: 820px) {
  .sidebar .campaign-nav-item,
  .sidebar .prediction-nav-item {
    min-width: 132px;
    min-height: 44px;
    padding: 8px 42px 8px 12px;
  }

  .sidebar .campaign-nav-item::after,
  .sidebar .prediction-nav-item::after {
    right: 9px;
    padding-inline: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}