:root {
  --hr-ink: #173c32;
  --hr-soft: #eef6f2;
  --hr-line: #ccddd5;
}

.hr-home-card {
  margin: 18px 0;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(340px, 1.8fr) auto;
  gap: 20px;
  align-items: center;
  border-color: var(--hr-line);
  background: linear-gradient(135deg, #f7fbf9, #edf5f1);
}
.hr-home-card h3 { margin: 4px 0 5px; }
.hr-home-card p { color: #60716a; font-size: 13px; line-height: 1.6; }
.hr-home-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.hr-home-tools span {
  padding: 7px 10px;
  border: 1px solid var(--hr-line);
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  color: var(--hr-ink);
  font-size: 12px;
}
.home-more { margin: 18px 0 0; }
.home-more > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid #d8ddd9;
  border-radius: 12px;
  color: #58625d;
  background: #fff;
  font-size: 13px;
}
.home-more > summary::-webkit-details-marker { display: none; }
.home-more > summary::after { content: "展开"; color: var(--accent); font-weight: 700; }
.home-more[open] > summary::after { content: "收起"; }
.home-more-body { padding-top: 2px; }

.hr-tools-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, .75fr);
  gap: 18px;
  margin-bottom: 18px;
}
.hr-tools-hero {
  color: #f4faf7;
  background: var(--hr-ink);
  border-radius: 18px;
  padding: 30px;
}
.hr-tools-hero .tag { color: #b9d4c8; }
.hr-tools-hero h2 { margin: 8px 0; font-size: clamp(24px, 3vw, 36px); }
.hr-tools-hero p { max-width: 680px; color: #c6d8d0; line-height: 1.7; }
.hr-privacy-note { display: grid; align-content: center; gap: 9px; }
.hr-privacy-note b { color: var(--hr-ink); }
.hr-privacy-note p { color: #69746f; font-size: 13px; line-height: 1.65; }
.hr-tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.hr-tool-card { padding: 20px; display: flex; flex-direction: column; min-height: 272px; }
.hr-tool-card .hr-tool-num { color: var(--accent); font-size: 12px; letter-spacing: .14em; }
.hr-tool-card h3 { margin: 10px 0 7px; }
.hr-tool-card p { color: #66716c; font-size: 13px; line-height: 1.6; }
.hr-tool-card ul { margin: 13px 0 18px; padding-left: 18px; color: #384640; font-size: 12px; line-height: 1.8; }
.hr-tool-card .toolbar { margin-top: auto; }
.hr-profile-panel { margin-top: 18px; }
.hr-profile-form { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.hr-profile-form label { display: grid; gap: 5px; color: #65706b; font-size: 11px; }
.hr-profile-form input { min-width: 0; }
.hr-profile-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; align-items: center; }
.hr-profile-status { color: #6c7772; font-size: 12px; }

.hr-tool-shell { position: fixed; z-index: 1600; inset: 0; background: #f4f7f5; display: none; grid-template-rows: 58px 1fr; }
.hr-tool-shell.open { display: grid; }
.hr-tool-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px; background: #fff; border-bottom: 1px solid #d9e1dd; }
.hr-tool-bar-left, .hr-tool-bar-actions { display: flex; align-items: center; gap: 9px; }
.hr-tool-bar-title { display: grid; gap: 1px; }
.hr-tool-bar-title b { font-size: 14px; }
.hr-tool-bar-title small { color: #79847f; }
.hr-tool-frame { width: 100%; height: 100%; border: 0; background: #fff; }
.hr-tool-stage { position: relative; min-height: 0; overflow: hidden; background: #fff; }
.hr-tool-stage .hr-tool-frame { position: absolute; inset: 0; }
.hr-tool-loading,
.hr-tool-error {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 9px;
  padding: 24px;
  text-align: center;
  color: #496158;
  background: #f7faf8;
}
.hr-tool-loading[hidden], .hr-tool-error[hidden] { display: none; }
.hr-tool-loading small, .hr-tool-error p { margin: 0; color: #75827d; font-size: 12px; }
.hr-tool-spinner { width: 30px; height: 30px; border: 3px solid #d9e7e1; border-top-color: var(--accent); border-radius: 50%; animation: hr-spin .8s linear infinite; }
.hr-tool-load-state { padding: 5px 9px; border-radius: 999px; color: #60716a; background: #edf3f0; font-size: 11px; font-weight: 700; }
.hr-tool-load-state[data-state="ready"] { color: #1e664d; background: #e2f3e9; }
.hr-tool-load-state[data-state="error"] { color: #a13a2c; background: #fff0ed; }
@keyframes hr-spin { to { transform: rotate(360deg); } }
body.hr-tool-open { overflow: hidden; }

@media (max-width: 920px) {
  .hr-home-card, .hr-tools-intro { grid-template-columns: 1fr; }
  .hr-tool-grid { grid-template-columns: 1fr; }
  .hr-tool-card { min-height: auto; }
  .hr-profile-form { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .hr-home-card { grid-template-columns: 1fr; }
  .hr-profile-form { grid-template-columns: 1fr; }
  .hr-tool-bar-title small, .hr-tool-bar-actions .tool-action-label { display: none; }
  #homeHrTool, #readHrContext { display: none; }
  .hr-tool-bar { padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) { .hr-tool-spinner { animation-duration: 1.8s; } }