@import url('/static/interaction-clarity.css?v=20260830');

/* Warm pixel digital-management skin for rankings, doctor archive and HR supervision. */
:root {
  --wp-ink: #183b45;
  --wp-teal: #176f73;
  --wp-teal-deep: #10565d;
  --wp-coral: #e56d55;
  --wp-coral-deep: #bd513e;
  --wp-gold: #e5aa43;
  --wp-cream: #fff8e8;
  --wp-paper: rgba(255, 253, 246, .95);
  --wp-line: #e9cfa3;
  --wp-shadow: 5px 5px 0 rgba(147, 94, 53, .12), 0 18px 44px rgba(93, 70, 49, .09);
}

body.warm-pixel-page {
  color: var(--wp-ink);
  background-color: #fff7e9 !important;
  background-image:
    linear-gradient(rgba(222, 114, 84, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(222, 114, 84, .045) 1px, transparent 1px),
    radial-gradient(circle at 90% 4%, rgba(234, 170, 70, .22), transparent 26%),
    linear-gradient(180deg, #fff4dd 0, #fffaf1 390px, #f7f4ea 100%) !important;
  background-size: 22px 22px, 22px 22px, auto, auto !important;
}

.warm-pixel-page button,
.warm-pixel-page a,
.warm-pixel-page input,
.warm-pixel-page select {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
}

.warm-pixel-page button:not([disabled]):hover,
.warm-pixel-page a:hover {
  transform: translateY(-1px);
}

.warm-pixel-page input:focus,
.warm-pixel-page select:focus {
  outline: 0 !important;
  border-color: var(--wp-coral) !important;
  box-shadow: 0 0 0 3px rgba(229, 109, 85, .14) !important;
}

/* Shared administrator parent/child navigation. */
.warm-pixel-page .cr-admin-shell {
  position: relative;
  overflow: hidden;
  color: var(--wp-ink) !important;
  background:
    linear-gradient(90deg, rgba(255, 250, 235, .97), rgba(250, 225, 181, .95)),
    url('/static/pixel-bg/warm-data-pattern.jpg') center/cover !important;
  border-bottom: 4px solid var(--wp-coral) !important;
  box-shadow: 0 7px 0 rgba(201, 97, 69, .09), 0 16px 35px rgba(104, 72, 39, .10) !important;
}

.warm-pixel-page .cr-admin-shell:after {
  content: "";
  position: absolute;
  right: 3%;
  top: 10px;
  width: 96px;
  height: 46px;
  opacity: .24;
  background:
    linear-gradient(90deg, var(--wp-teal) 0 10px, transparent 10px 16px, var(--wp-gold) 16px 31px, transparent 31px 37px, var(--wp-coral) 37px 57px, transparent 57px 63px, var(--wp-teal) 63px 91px);
  clip-path: polygon(0 85%, 0 68%, 16% 68%, 16% 54%, 32% 54%, 32% 64%, 49% 64%, 49% 32%, 67% 32%, 67% 48%, 84% 48%, 84% 10%, 100% 10%, 100% 100%, 0 100%);
  pointer-events: none;
}

.warm-pixel-page .cr-admin-top,
.warm-pixel-page .cr-admin-sub {
  position: relative;
  z-index: 1;
}

.warm-pixel-page .cr-admin-logo {
  color: #fff1bd !important;
  background: var(--wp-teal-deep) !important;
  border: 2px solid #f1b458 !important;
  border-radius: 6px !important;
  box-shadow: 4px 4px 0 rgba(81, 83, 52, .16) !important;
}

.warm-pixel-page .cr-admin-title small,
.warm-pixel-page .cr-admin-title span,
.warm-pixel-page .cr-admin-user {
  color: #6f705e !important;
}

.warm-pixel-page .cr-admin-title strong {
  color: var(--wp-ink) !important;
}

.warm-pixel-page .cr-admin-parent,
.warm-pixel-page .cr-admin-home,
.warm-pixel-page .cr-admin-logout {
  color: var(--wp-teal-deep) !important;
  border: 1px solid #d3a76a !important;
  border-radius: 7px !important;
  background: rgba(255, 253, 245, .82) !important;
}

.warm-pixel-page .cr-admin-parent:hover,
.warm-pixel-page .cr-admin-parent.is-active,
.warm-pixel-page .cr-admin-home:hover,
.warm-pixel-page .cr-admin-logout:hover {
  color: #fff !important;
  border-color: var(--wp-coral-deep) !important;
  background: var(--wp-coral) !important;
  box-shadow: 3px 3px 0 rgba(151, 66, 45, .18) !important;
}

.warm-pixel-page .cr-admin-subbar {
  border-top: 1px solid rgba(177, 116, 64, .18) !important;
  background: rgba(255, 249, 232, .72) !important;
}

.warm-pixel-page .cr-admin-child {
  color: #55716e !important;
  border-radius: 6px !important;
}

.warm-pixel-page .cr-admin-child:hover,
.warm-pixel-page .cr-admin-child.is-active {
  color: #fff !important;
  background: var(--wp-teal) !important;
}

.warm-pixel-page .cr-admin-child.is-active:before {
  border-radius: 1px !important;
  background: #ffd67e !important;
  box-shadow: 2px 2px 0 rgba(75, 70, 38, .2);
}

/* Public quarterly honor board. */
.honor-page .page {
  max-width: 1260px;
}

.honor-page .hero {
  min-height: 390px;
  color: var(--wp-ink) !important;
  border: 2px solid #edbd70 !important;
  border-radius: 12px !important;
  background:
    linear-gradient(90deg, rgba(255, 250, 232, .97) 0%, rgba(255, 247, 220, .91) 48%, rgba(255, 239, 196, .34) 72%, rgba(255, 235, 183, .08) 100%),
    url('/static/pixel-bg/warm-honor-podium.jpg') center/cover !important;
  box-shadow: 7px 7px 0 rgba(194, 112, 58, .16), 0 24px 55px rgba(112, 75, 37, .12) !important;
}

.honor-page .hero:before,
.honor-page .hero:after {
  display: none !important;
}

.honor-page .topbar,
.honor-page .hero-copy,
.honor-page .progress-wrap {
  max-width: 690px;
}

.honor-page .seal {
  color: #fff1b7 !important;
  border: 2px solid #d99b3c !important;
  border-radius: 5px !important;
  background: var(--wp-teal-deep) !important;
  box-shadow: 4px 4px 0 rgba(101, 80, 43, .18);
}

.honor-page .brand small,
.honor-page .hero p,
.honor-page .progress-label {
  color: #5d746e !important;
}

.honor-page .brand strong,
.honor-page .hero h1 {
  color: #193f47 !important;
  text-shadow: 2px 2px 0 rgba(255,255,255,.72);
}

.honor-page .employee-only,
.honor-page .quarter-meta span {
  color: #765728 !important;
  border: 1px solid #deb46d !important;
  border-radius: 5px !important;
  background: rgba(255, 249, 228, .86) !important;
}

.honor-page .eyebrow {
  color: var(--wp-coral-deep) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.honor-page .eyebrow:before {
  height: 4px !important;
  background: var(--wp-coral) !important;
}

.honor-page .progress {
  height: 10px !important;
  border: 2px solid #d7ac67;
  border-radius: 3px !important;
  background: rgba(255,255,255,.68) !important;
}

.honor-page .progress i {
  border-radius: 1px !important;
  background: repeating-linear-gradient(90deg, var(--wp-coral) 0 12px, #f59a5d 12px 23px) !important;
  box-shadow: none !important;
}

.honor-page .quarter-switch a,
.honor-page .scope-switch a {
  border-radius: 6px !important;
  box-shadow: 3px 3px 0 rgba(123, 91, 52, .08);
}

.honor-page .quarter-switch a.active,
.honor-page .scope-switch a.active {
  color: #fff !important;
  border-color: var(--wp-coral-deep) !important;
  background: var(--wp-coral) !important;
}

.honor-page .scope-panel,
.honor-page .card {
  border: 1px solid var(--wp-line) !important;
  border-radius: 10px !important;
  background: var(--wp-paper) !important;
  box-shadow: var(--wp-shadow) !important;
}

.honor-page .podium-card {
  background:
    linear-gradient(rgba(255,253,246,.93), rgba(255,253,246,.93)),
    url('/static/pixel-bg/warm-data-pattern.jpg') center/cover !important;
}

.honor-page .winner {
  border-radius: 7px !important;
  border-color: #ead0a5 !important;
  background: linear-gradient(180deg, #fffdf6, #fff3da) !important;
  box-shadow: 4px 4px 0 rgba(136, 92, 50, .09);
}

.honor-page .winner.first {
  border: 2px solid #e3a840 !important;
  background: linear-gradient(180deg, #fff7d1, #fffaf0) !important;
}

.honor-page .reward {
  color: #fff !important;
  border: 2px solid #e49a51 !important;
  background:
    linear-gradient(145deg, rgba(21, 101, 103, .96), rgba(18, 83, 87, .93)),
    url('/static/pixel-bg/warm-honor-podium.jpg') right/cover !important;
}

.honor-page .rank-row,
.honor-page .rule {
  border-radius: 7px !important;
  border-color: #ead7b9 !important;
}

.honor-page .rank-row:nth-child(even) {
  background: #fffaf0 !important;
}

/* Management ranking page. */
.ranking-page .page {
  max-width: 1180px;
}

.ranking-page .hero {
  min-height: 310px;
  color: var(--wp-ink) !important;
  border: 2px solid #e9b766 !important;
  border-radius: 11px !important;
  background:
    linear-gradient(90deg, rgba(255,251,236,.97), rgba(255,247,223,.89) 58%, rgba(255,240,203,.22)),
    url('/static/pixel-bg/warm-digital-archive.jpg') center/cover !important;
  box-shadow: var(--wp-shadow) !important;
}

.ranking-page .hero:after {
  display: none !important;
}

.ranking-page .hero-top,
.ranking-page .hero h1,
.ranking-page .hero p,
.ranking-page .scope {
  max-width: 690px;
}

.ranking-page .logo {
  color: #fff2b3 !important;
  border: 2px solid #e4ae50 !important;
  border-radius: 5px !important;
  background: var(--wp-teal-deep) !important;
}

.ranking-page .brand small,
.ranking-page .hero p {
  color: #65746b !important;
}

.ranking-page .brand strong,
.ranking-page .hero h1 {
  color: var(--wp-ink) !important;
}

.ranking-page .back,
.ranking-page .scope span {
  color: #765728 !important;
  border-color: #d9ad66 !important;
  border-radius: 5px !important;
  background: rgba(255,251,237,.84) !important;
}

.ranking-page .card,
.ranking-page .board {
  border: 1px solid var(--wp-line) !important;
  border-radius: 9px !important;
  background: var(--wp-paper) !important;
  box-shadow: var(--wp-shadow) !important;
}

.ranking-page .periods a,
.ranking-page .filter-btn,
.ranking-page .rank-row,
.ranking-page .mine-intro,
.ranking-page .mine-rank {
  border-radius: 6px !important;
}

.ranking-page .periods a.active,
.ranking-page .filter-btn {
  color: #fff !important;
  border-color: var(--wp-coral-deep) !important;
  background: var(--wp-coral) !important;
  box-shadow: 3px 3px 0 rgba(146, 61, 43, .16);
}

.ranking-page .metric-icon,
.ranking-page .rank-number {
  border-radius: 4px !important;
}

.ranking-page .rank-row:nth-child(even) {
  background: #fffaf0 !important;
}

/* Doctor archive page. */
.doctor-page .container {
  max-width: 1180px !important;
  position: relative;
}

.doctor-page .container:before {
  content: "数字档案中心  ·  一人一档  ·  数据留痕";
  display: block;
  min-height: 152px;
  margin: 0 0 18px;
  padding: 30px 34px;
  color: var(--wp-ink);
  border: 2px solid #e8b96d;
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(255,251,236,.97), rgba(255,247,222,.86) 58%, rgba(255,240,199,.14)),
    url('/static/pixel-bg/warm-digital-archive.jpg') center/cover;
  box-shadow: var(--wp-shadow);
  font: 900 20px/1.5 ui-monospace, SFMono-Regular, Menlo, "Microsoft YaHei", sans-serif;
  letter-spacing: .08em;
}

.doctor-page .card {
  border: 1px solid var(--wp-line) !important;
  border-radius: 9px !important;
  background: var(--wp-paper) !important;
  box-shadow: var(--wp-shadow) !important;
}

.doctor-page .card h2 {
  color: var(--wp-ink) !important;
}

.doctor-page .primary,
.doctor-page .edit-toggle[aria-expanded=true] {
  color: #fff !important;
  border-color: var(--wp-coral-deep) !important;
  background: var(--wp-coral) !important;
  box-shadow: 3px 3px 0 rgba(146, 61, 43, .14) !important;
}

.doctor-page .store-checks,
.doctor-page .doctor-card,
.doctor-page .doctor-main,
.doctor-page .doctor-editor,
.doctor-page .filters input,
.doctor-page .filters select,
.doctor-page .edit-toggle {
  border-radius: 6px !important;
}

.doctor-page .store-checks {
  border-color: #e8d3b1 !important;
  background: #fffaf0 !important;
}

.doctor-page .store-checks label:has(input:checked) {
  color: #fff !important;
  border-color: var(--wp-teal-deep) !important;
  background: var(--wp-teal) !important;
}

.doctor-page .doctor-card {
  border-color: #e8d4b5 !important;
  box-shadow: 4px 4px 0 rgba(127, 88, 49, .08) !important;
}

.doctor-page .doctor-main {
  background: linear-gradient(90deg, #fffdf7, #fff7e7) !important;
}

.doctor-page .doctor-card:target {
  border-color: var(--wp-coral) !important;
  box-shadow: 5px 5px 0 rgba(197, 85, 62, .15) !important;
}

/* HR daily supervision page. */
.hr-page .head {
  min-height: 238px;
  display: flex;
  align-items: flex-start;
  padding-top: 34px !important;
  color: var(--wp-ink) !important;
  border-bottom: 4px solid var(--wp-coral);
  background:
    linear-gradient(90deg, rgba(255,251,237,.97), rgba(255,242,215,.83) 60%, rgba(255,226,190,.10)),
    url('/static/pixel-bg/warm-hr-supervision.jpg') center/cover !important;
  box-shadow: 0 8px 0 rgba(196, 93, 67, .08), 0 18px 38px rgba(95, 70, 45, .10) !important;
}

.hr-page .head h1 {
  color: var(--wp-ink) !important;
  font-size: 30px !important;
}

.hr-page .head p {
  color: #63736c !important;
}

.hr-page .head-actions a,
.hr-page .head-actions button {
  color: var(--wp-teal-deep) !important;
  border-color: #d4a65f !important;
  border-radius: 6px !important;
  background: rgba(255,252,241,.86) !important;
}

.hr-page .head-actions a:hover,
.hr-page .head-actions button:hover {
  color: #fff !important;
  background: var(--wp-coral) !important;
}

.hr-page .wrap {
  max-width: 1220px !important;
  margin-top: -78px !important;
  position: relative;
}

.hr-page .card {
  border: 1px solid var(--wp-line) !important;
  border-radius: 9px !important;
  background: var(--wp-paper) !important;
  box-shadow: var(--wp-shadow) !important;
}

.hr-page .supervision-card {
  border: 2px solid #e5ab54 !important;
  background:
    linear-gradient(110deg, rgba(255,253,245,.97), rgba(255,245,218,.91)),
    url('/static/pixel-bg/warm-data-pattern.jpg') center/cover !important;
}

.hr-page button,
.hr-page .export {
  border-radius: 6px !important;
  background: var(--wp-teal) !important;
  box-shadow: 3px 3px 0 rgba(44, 97, 91, .15);
}

.hr-page .supervision-action button:not([disabled]) {
  background: var(--wp-coral) !important;
}

.hr-page .supervision-stat,
.hr-page .attention-metric,
.hr-page .manager,
.hr-page .rate-box,
.hr-page .manager-stats div,
.hr-page .guide-step,
.hr-page .penalty-metric,
.hr-page .table-wrap {
  border-radius: 6px !important;
}

.hr-page .supervision-stat {
  border-color: #ead3ad !important;
  background: #fffaf0 !important;
  box-shadow: 3px 3px 0 rgba(126, 89, 51, .08);
}

.hr-page th {
  color: #536f6b !important;
  background: #fff1d5 !important;
}

.hr-page tbody tr:nth-child(even) td {
  background: rgba(255, 249, 235, .58);
}

@media (max-width: 680px) {
  .honor-page .hero,
  .ranking-page .hero {
    min-height: 0;
    background-position: 64% center !important;
  }

  .honor-page .hero:after,
  .ranking-page .hero:before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    border: 0 !important;
    background: rgba(255, 249, 229, .32) !important;
    pointer-events: none;
  }

  .honor-page .topbar,
  .honor-page .hero-copy,
  .honor-page .progress-wrap,
  .ranking-page .hero-top,
  .ranking-page .hero h1,
  .ranking-page .hero p,
  .ranking-page .scope {
    position: relative;
    z-index: 2;
  }

  .doctor-page .container:before {
    min-height: 120px;
    padding: 23px 18px;
    background-position: 60% center;
    font-size: 16px;
  }

  .hr-page .head {
    min-height: 270px;
    background-position: 63% center !important;
  }

  .hr-page .wrap {
    margin-top: -68px !important;
  }
}