.simple-answer {
  position: relative;
  margin: 0 28px 18px;
  padding: 24px 26px;
  overflow: hidden;
  color: #f3eee4;
  background: linear-gradient(135deg, #202b35 0%, #151d25 54%, #1a242d 100%);
  border: 1px solid #3b4955;
  border-left: 5px solid var(--gold);
  border-radius: 5px;
  box-shadow: 0 18px 42px #0006, inset 0 1px #ffffff0b;
}

.simple-answer::after {
  position: absolute;
  top: -90px;
  right: -55px;
  width: 240px;
  height: 240px;
  pointer-events: none;
  content: "";
  background: radial-gradient(circle, #d8b15d1c 0%, transparent 68%);
}

.simple-answer.long {
  background: linear-gradient(135deg, #3a1d24 0%, #23151a 56%, #321920 100%);
  border-color: #70404a;
  border-left-color: var(--red);
}

.simple-answer.short {
  background: linear-gradient(135deg, #173329 0%, #101f1a 56%, #142b22 100%);
  border-color: #356452;
  border-left-color: var(--green);
}

.simple-answer.wait {
  background: linear-gradient(135deg, #3a311b 0%, #242016 56%, #302819 100%);
  border-color: #6b5a2f;
  border-left-color: var(--gold);
}

.simple-answer > span {
  position: relative;
  z-index: 1;
  color: #d8b15d;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
}

.simple-answer.long > span { color: #ff8b91; }
.simple-answer.short > span { color: #79dbae; }

.simple-answer h2 {
  position: relative;
  z-index: 1;
  margin: 8px 0;
  color: #f7f2e9;
  font: 700 30px/1.25 Arial, "Microsoft YaHei", sans-serif;
  text-shadow: 0 2px 16px #0005;
}

.simple-answer p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #d3dde5;
  font-size: 12px;
  line-height: 1.7;
}

.simple-answer > div {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 16px;
}

.simple-answer > div div {
  padding: 12px 13px;
  background: #0a1017cc;
  border: 1px solid #ffffff18;
  border-radius: 3px;
  box-shadow: inset 0 1px #ffffff08;
}

.simple-answer small,
.simple-answer b { display: block; }
.simple-answer small { color: #aab7c2; font-size: 9px; }
.simple-answer b { margin-top: 5px; color: #f2eee6; font-size: 13px; }
.plain-note { margin: -7px 0 14px; color: var(--muted); font-size: 9px; }
.direction-panel h3::after { display: block; margin-top: 4px; color: var(--muted); font: 400 9px Arial; }
.long-panel h3::after { content: "ä»·æ ¼ä¸æ¶¨æ¶çè§å¯ä½ç½®"; }
.short-panel h3::after { content: "ä»·æ ¼ä¸è·æ¶çè§å¯ä½ç½®"; }

/* ä¸­å½å¸åºéè²ï¼çº¢æ¶¨ãç»¿è·ãé»ç­å¾ */
.up { color: var(--red) !important; }
.down { color: var(--green) !important; }
.signal-badge.long { color: var(--red); border-color: var(--red); }
.signal-badge.short { color: var(--green); border-color: var(--green); }
.long-panel { border-left-color: var(--red); }
.long-panel span,
.long-panel > strong { color: var(--red); }
.short-panel { border-left-color: var(--green); }
.short-panel span,
.short-panel > strong { color: var(--green); }

@media (max-width: 650px) {
  .simple-answer { margin: 0 14px 14px; padding: 19px 18px; }
  .simple-answer h2 { font-size: 23px; }
  .simple-answer > div { grid-template-columns: 1fr; }
  .direction-panel { padding: 14px; }
  .direction-panel p { font-size: 10px; line-height: 1.5; }
}
