/* 人际往来皮肤：暖墨 + 一抹金。只挂 body.col-hehun，不进 gx.css。 */
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;600;700&family=ZCOOL+XiaoWei&display=swap");

body.col-hehun {
  --font-t: "Ma Shan Zheng", "ZCOOL XiaoWei", "KaiTi", "STKaiti", serif;
  --font-k: "ZCOOL XiaoWei", "KaiTi", "STKaiti", serif;
  --font-b: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --paper: #efe6d6;
  --paper-2: #f7f1e6;
  --ink: #2a241c;
  --ink-2: #5a5146;
  --ink-3: #8a8074;
  --line: #d4c6b0;
  --red: #7a4034;
  --red-2: #9a5648;
  --gold: #c4964a;
  --gold-2: #e0c888;
  --blush: #e8ddd0;
  --card: rgba(247, 241, 230, .9);
  background-color: #efe6d6;
  background-image:
    radial-gradient(ellipse 80% 46% at 50% -10%, rgba(196, 150, 74, .28), transparent 60%),
    radial-gradient(ellipse 38% 32% at 0% 78%, rgba(122, 64, 52, .08), transparent 62%),
    radial-gradient(ellipse 42% 34% at 100% 100%, rgba(196, 150, 74, .12), transparent 58%);
  color: var(--ink);
  font-family: var(--font-b);
}
body.col-hehun::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: -8%;
  z-index: 0;
  opacity: .55;
  background:
    radial-gradient(circle at 32% 42%, transparent 0 58px, rgba(196, 150, 74, .16) 59px, transparent 61px),
    radial-gradient(circle at 68% 42%, transparent 0 58px, rgba(122, 64, 52, .14) 59px, transparent 61px),
    radial-gradient(circle at 50% 46%, rgba(196, 150, 74, .08) 0 18px, transparent 42px);
  animation: hh-rings 16s ease-in-out infinite;
}
body.col-hehun::after {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(247, 241, 230, .18) 50%, transparent 58%),
    radial-gradient(ellipse 50% 20% at 50% 0%, rgba(255, 250, 240, .35), transparent 70%);
  animation: hh-silk 22s ease-in-out infinite;
}
@keyframes hh-rings {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .5; }
  50% { transform: translate3d(0, -10px, 0) scale(1.04); opacity: .72; }
}
@keyframes hh-silk {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: .7; }
  50% { transform: translate3d(-2%, 1%, 0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.col-hehun::before,
  body.col-hehun::after,
  .hh-bg i,
  .hh-c,
  .hh-he span { animation: none !important; }
}

body.col-hehun .site-head,
body.col-hehun .tool-top,
body.col-hehun .site-foot {
  background: rgba(247, 241, 230, .88);
  border-color: var(--line);
  color: var(--ink);
}
body.col-hehun .tool-top { backdrop-filter: saturate(1.12) blur(14px); }
body.col-hehun .brand,
body.col-hehun .brand-emblem,
body.col-hehun .tool-top .top-mark,
body.col-hehun .help-btn { color: var(--red); }
body.col-hehun .tool-top .top-title h1 {
  font-family: var(--font-t);
  font-size: 1.58rem;
  font-weight: 400;
  letter-spacing: .28em;
  color: var(--red);
  text-indent: .14em;
}
body.col-hehun .tool-top .top-title .sub {
  font-family: var(--font-b);
  color: var(--ink-3);
  letter-spacing: .08em;
}
body.col-hehun .help-btn,
body.col-hehun .col-switch-btn {
  background: rgba(247, 241, 230, .96);
  border-color: var(--line);
  color: var(--ink-2);
}
body.col-hehun .help-btn:hover { background: rgba(196, 150, 74, .14); color: var(--red); }
body.col-hehun .col-switch-btn::after { border-top-color: var(--gold); }
body.col-hehun .col-switch-menu {
  background: #f7f1e6;
  border-color: var(--line);
}
body.col-hehun .sw-item { color: var(--ink-2); }
body.col-hehun .sw-item:hover,
body.col-hehun .sw-item[aria-current="page"] { color: var(--red); background: rgba(196, 150, 74, .12); }
body.col-hehun a { color: var(--red); }
body.col-hehun .card,
body.col-hehun .workbench {
  background: var(--card);
  border-color: var(--line);
}
body.col-hehun.col-index .workbench {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
  margin-top: 6px;
}
body.col-hehun .tool-main { position: relative; z-index: 2; }
body.col-hehun h2 {
  font-family: var(--font-t);
  font-weight: 400;
  letter-spacing: .16em;
  color: var(--red);
  border-left: 3px solid var(--gold);
}
body.col-hehun .disclaimer,
body.col-hehun .privacy,
body.col-hehun .lead,
body.col-hehun .crumb { color: var(--ink-3); }
body.col-hehun .btn {
  background: linear-gradient(180deg, var(--red-2), var(--red));
  color: #fff8f2;
  border: 1px solid var(--red);
  letter-spacing: .2em;
  font-family: var(--font-t);
  font-weight: 400;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(122, 64, 52, .16);
}
body.col-hehun .btn.ghost {
  background: transparent;
  color: var(--red);
  border-color: var(--line);
  box-shadow: none;
}
body.col-hehun input,
body.col-hehun select,
body.col-hehun textarea {
  background: #fffdf8;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: var(--font-b);
}
body.col-hehun input:focus,
body.col-hehun select:focus,
body.col-hehun textarea:focus {
  outline: 2px solid rgba(196, 150, 74, .35);
  border-color: var(--gold);
}
body.col-hehun .chip {
  background: #fffdf8;
  border-color: var(--line);
  color: var(--ink-2);
}
body.col-hehun .chip[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--red-2), var(--red));
  border-color: var(--red);
  color: #f7f1e6;
  box-shadow: 0 4px 12px rgba(122, 64, 52, .18);
}
body.col-hehun .faq summary::before { color: var(--red); }

.hh-page { position: relative; }
.hh-bg {
  pointer-events: none;
  position: absolute;
  inset: -20px 0 0;
  z-index: 0;
  overflow: hidden;
}
.hh-bg i {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  opacity: .28;
  box-shadow: 0 0 10px rgba(196, 150, 74, .45);
  animation: hh-mote 11s ease-in-out infinite;
}
.hh-bg i:nth-child(1) { left: 12%; top: 8%; animation-duration: 13s; }
.hh-bg i:nth-child(2) { left: 78%; top: 14%; width: 4px; height: 4px; animation-delay: -2s; animation-duration: 15s; }
.hh-bg i:nth-child(3) { left: 28%; top: 62%; animation-delay: -4s; animation-duration: 12s; }
.hh-bg i:nth-child(4) { left: 88%; top: 48%; width: 5px; height: 5px; animation-delay: -6s; }
.hh-bg i:nth-child(5) { left: 6%; top: 38%; width: 3px; height: 3px; animation-delay: -1s; animation-duration: 16s; }
.hh-bg i:nth-child(6) { left: 54%; top: 4%; width: 4px; height: 4px; animation-delay: -8s; }
@keyframes hh-mote {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: .18; }
  50% { transform: translate3d(8px, -18px, 0); opacity: .55; }
}

.hh-rels,
.hh-form,
#hh-result { position: relative; z-index: 1; }

.hh-rels {
  display: grid;
  gap: 14px;
  margin: 4px 0 16px;
  padding: 16px 14px 14px;
  background: linear-gradient(180deg, rgba(255, 253, 248, .72), rgba(247, 241, 230, .62));
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(42, 36, 28, .05);
}
.hh-rel-g p {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--gold);
  font-family: var(--font-k);
}
.hh-rel-g > div { display: flex; flex-wrap: wrap; gap: 7px; }
.hh-rel-g .chip {
  justify-content: center;
  letter-spacing: .08em;
  font-family: var(--font-k);
  min-height: 34px;
}
.hh-intent-hint,
.hh-auto {
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
  margin: 0 0 14px;
}
.hh-auto {
  text-align: left;
  margin: 8px 0 0;
  padding: 8px 10px;
  background: rgba(196, 150, 74, .1);
  border-radius: 8px;
  color: var(--ink-2);
  letter-spacing: .04em;
}
.hh-auto:empty { display: none; }
.hh-hour-name {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 8px;
}
.hh-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 18px;
}
.hh-who {
  background: linear-gradient(180deg, #fffdf8, rgba(239, 230, 214, .82));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 14px 14px;
  min-width: 0;
  box-shadow: 0 10px 26px rgba(42, 36, 28, .05);
  position: relative;
}
.hh-who::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--gold), rgba(196, 150, 74, .15));
}
.hh-who .field { margin-top: 10px; }
.hh-who .field label {
  display: block;
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--ink-2);
  margin-bottom: 4px;
  font-family: var(--font-k);
}
.hh-who select,
.hh-who input[type="text"] {
  width: 100%;
  min-height: 42px;
}
.hh-who h3,
.hh-item h3 {
  font-family: var(--font-t);
  font-weight: 400;
  letter-spacing: .18em;
  color: var(--red);
  margin: 0 0 12px;
  border: 0;
  padding: 0;
}
.hh-ymd { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.hh-tip { margin: 0 0 6px; font-size: 12px; color: var(--ink-3); }
.hh-he {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding-top: 36px;
}
.hh-he span {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-t);
  font-size: 24px;
  color: var(--gold);
  background: #fffdf8;
  border: 1px solid var(--gold);
  box-shadow: 0 0 0 5px rgba(196, 150, 74, .12);
  animation: hh-he 4.6s ease-in-out infinite;
}
@keyframes hh-he {
  0%, 100% { box-shadow: 0 0 0 5px rgba(196, 150, 74, .1); }
  50% { box-shadow: 0 0 0 10px rgba(196, 150, 74, .18); }
}
.hh-form .btn[data-act="go"] {
  display: block;
  width: min(280px, 100%);
  margin: 0 auto;
  min-height: 46px;
}
.hh-hint { font-size: 13px; color: var(--ink-3); margin: 10px 0 0; text-align: center; }
.hh-out {
  margin-top: 26px;
  background: linear-gradient(180deg, #fffdf8, rgba(239, 230, 214, .88));
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px 16px 22px;
  box-shadow: 0 14px 36px rgba(42, 36, 28, .07);
}
.hh-verdict-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 6px;
}
.hh-intent-tag {
  text-align: left;
  font-family: var(--font-k);
  letter-spacing: .22em;
  color: var(--gold);
  font-size: 13px;
  margin: 0;
}
.hh-listen {
  min-width: 6.2em;
  height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(196, 150, 74, .45);
  background: transparent;
  color: var(--red);
  font-family: var(--font-t);
  letter-spacing: .16em;
  cursor: pointer;
  border-radius: 999px;
}
.hh-listen:disabled { opacity: .55; cursor: wait; }
.hh-listen.is-on,
.hh-listen:hover { border-color: var(--gold); background: rgba(196, 150, 74, .12); }
.hh-group {
  margin: 22px 0 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.hh-group h2 {
  font-family: var(--font-t);
  font-size: 1.35rem;
  letter-spacing: .22em;
  text-align: center;
  border-left: 0;
  margin: 0 0 12px;
}
.hh-viz { text-align: center; margin: 0 0 8px; }
.hh-viz svg { width: min(300px, 100%); height: auto; display: block; margin: 0 auto; }
.hh-c { fill: none; stroke-width: 2.6; }
.hh-c-glow {
  stroke: rgba(196, 150, 74, .22);
  stroke-width: 1.2;
  animation: hh-glow 5.4s ease-in-out infinite;
}
.hh-c-a { stroke: var(--red); opacity: .78; animation: hh-ring-a 8s ease-in-out infinite; }
.hh-c-b { stroke: var(--gold); opacity: .86; animation: hh-ring-b 8s ease-in-out infinite; }
.hh-c-core {
  fill: rgba(196, 150, 74, .2);
  stroke: var(--gold);
  stroke-width: 1.5;
  animation: hh-core 4.2s ease-in-out infinite;
}
.hh-viz[data-tone="he"] .hh-c-core { fill: rgba(122, 64, 52, .16); }
.hh-viz[data-tone="mo"] .hh-c-a,
.hh-viz[data-tone="chong"] .hh-c-a { stroke-dasharray: 5 4; }
.hh-viz[data-tone="chong"] .hh-c-core { fill: rgba(122, 64, 52, .06); }
@keyframes hh-ring-a {
  0%, 100% { opacity: .62; }
  50% { opacity: .95; }
}
@keyframes hh-ring-b {
  0%, 100% { opacity: .95; }
  50% { opacity: .62; }
}
@keyframes hh-core {
  0%, 100% { opacity: .85; }
  50% { opacity: 1; }
}
@keyframes hh-glow {
  0%, 100% { opacity: .45; }
  50% { opacity: .9; }
}
.hh-viz-label {
  font-family: var(--font-t);
  font-size: 24px;
  letter-spacing: .2em;
  color: var(--red);
  margin: 0 0 8px;
}
.hh-lead { text-align: center; color: var(--ink-2); max-width: 36em; margin: 0 auto 14px; line-height: 1.85; }
.hh-pairline {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  font-family: var(--font-t);
  letter-spacing: .12em;
  margin: 0 0 6px;
}
.hh-pairline i {
  font-style: normal;
  color: var(--gold);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  display: grid;
  place-items: center;
  font-size: 14px;
  background: rgba(255, 253, 248, .8);
}
.hh-gz { text-align: center; font-size: 13px; color: var(--ink-3); margin: 0 0 2px; letter-spacing: .04em; }
.hh-items { display: grid; gap: 12px; margin: 16px 0 8px; }
.hh-item {
  border-top: 1px dashed var(--line);
  padding-top: 12px;
}
.hh-item h3 span {
  display: block;
  font-family: var(--font-b);
  font-size: 13px;
  letter-spacing: 0;
  color: var(--ink-3);
  margin-top: 4px;
}
.hh-classic { font-size: 14px; color: var(--ink-2); }
.hh-plain { font-size: 15px; color: var(--ink); line-height: 1.8; }
.hh-src { font-size: 12px; color: var(--ink-3); margin: 0; }
.hh-note {
  font-size: 13px;
  color: var(--ink-2);
  background: rgba(196, 150, 74, .1);
  border-radius: 12px;
  padding: 12px 14px;
  line-height: 1.75;
}
.hh-acts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}
.hh-acts .hh-listen.btn {
  min-height: 44px;
  height: auto;
}
.hh-zeri {
  margin-top: 10px;
}
.hh-zeri .btn { width: 100%; }
.hh-msg { color: var(--ink-2); padding: 12px; }

@media (max-width: 720px) {
  .hh-pair { grid-template-columns: 1fr; }
  .hh-he { padding-top: 0; min-height: 48px; }
  .hh-acts { grid-template-columns: 1fr; }
  .hh-hour-name { grid-template-columns: 1fr 1fr; }
}

body.col-hehun .site-foot { position: relative; }
body.col-hehun .site-foot .wrap { position: relative; }
body.col-hehun .site-foot .wrap::before,
body.col-hehun .site-foot .wrap::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}
body.col-hehun .site-foot .wrap::before {
  left: 18%;
  animation: hh-dot 2.8s ease-in-out infinite;
}
body.col-hehun .site-foot .wrap::after {
  right: 18%;
  animation: hh-dot 2.8s ease-in-out infinite .4s;
}
@keyframes hh-dot {
  0%, 100% { opacity: .28; box-shadow: 0 0 0 0 rgba(196, 150, 74, 0); }
  50% { opacity: 1; box-shadow: 0 0 0 6px rgba(196, 150, 74, .16); }
}

body.hh-share-open { overflow: hidden; }
.hh-share-mask {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(42, 36, 28, .56);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
}
.hh-share {
  width: min(440px, 100%);
  max-height: 90dvh;
  overflow: auto;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, #fffdf8, #efe6d6);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 14px 14px 18px;
  position: relative;
  border-radius: 16px 16px 0 0;
}
.hh-share h3 {
  margin: 0 0 12px;
  letter-spacing: .18em;
  color: var(--red);
  font-family: var(--font-t);
  font-weight: 400;
}
.hh-share .x {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: 0;
  color: var(--red);
  font-size: 22px;
  cursor: pointer;
  min-width: 36px;
  min-height: 36px;
}
.hh-share .seg-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}
.hh-share .seg-label {
  width: 3.2em;
  font-size: 13px;
  color: var(--ink-2);
  letter-spacing: .08em;
  flex-shrink: 0;
}
.hh-share .seg { display: flex; gap: 6px; flex-wrap: wrap; }
.hh-share .seg button {
  min-height: 34px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-2);
  font: inherit;
  cursor: pointer;
  border-radius: 999px;
}
.hh-share .seg button.on {
  background: var(--red);
  color: #fff8f2;
  border-color: var(--red);
}
.hh-share .seg.is-multi { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.hh-share .seg-row.is-wrap { align-items: flex-start; }
.hh-share .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 0; }
.hh-share .acts button {
  min-height: 42px;
  padding: 0 14px;
  font: inherit;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 999px;
}
.hh-share .acts button.on { background: var(--red); color: #fff8f2; border-color: var(--red-2); }
.hh-share .acts button:disabled { opacity: .45; }
.hh-share .hint { font-size: 12px; color: var(--ink-3); margin: 6px 0; }
.hh-share .toast { font-size: 13px; color: var(--red); }
.hh-share .poster-wrap { margin-top: 10px; }
.hh-share .save-btn {
  width: 100%;
  min-height: 42px;
  margin: 0 0 8px;
  background: var(--gold);
  color: #2a241c;
  border: 0;
  font: inherit;
  cursor: pointer;
  border-radius: 999px;
}
.hh-share .save-btn:disabled { opacity: .45; }
.hh-share img {
  width: 100%;
  display: block;
  background: #efe6d6;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(42, 36, 28, .12);
}
.hh-share .url {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--ink-3);
  word-break: break-all;
}
@media (min-width: 720px) {
  .hh-share-mask { align-items: center; padding: 24px; }
  .hh-share { border-radius: 12px; }
}