.snh-shq-wrap,
.snh-shq-saved,
.snh-shq-saved-detail {
  --shq-bg: #fbf7f4;
  --shq-ink: #333333;
  --shq-muted: #777777;
  --shq-accent: #367588;
  --shq-star-idle: #d6d6d9;
  --shq-star-active: #7a4db3;
  --shq-line: rgba(54, 117, 136, .24);
  width: min(100%, 760px);
  margin: 0 auto;
  color: var(--shq-ink);
  font-family: 'Roboto', sans-serif;
  letter-spacing: 0;
}

.snh-shq-title {
  margin: 0 0 1rem;
  font-family: 'Roboto', sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
}

.snh-shq-card {
  background: var(--shq-bg);
  border: 0;
  border-radius: 12px;
  box-shadow: none !important;
  padding: 20px;
}

.snh-shq-date {
  margin: 0 0 6px;
  color: var(--shq-accent);
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
}
.snh-shq-date > span {
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--shq-line);
}

.snh-shq-question {
  display: block;
  margin: 0 0 8px;
  font-family: 'Roboto', sans-serif;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0;
  text-align: left;
}
.snh-shq-question-text {
  display: inline;
  min-width: 0;
}
.snh-shq-quote {
  display: inline;
  color: var(--shq-accent);
  font-size: 1.12em;
  line-height: 1;
  font-weight: 500;
  vertical-align: .01em;
}
.snh-shq-quote-open { margin-right: .12rem; }
.snh-shq-quote-close { margin-left: .12rem; }

.snh-shq-interpretation {
  color: var(--shq-ink);
  font-family: 'Roboto', sans-serif;
  font-size: 1.10rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
}
.snh-shq-interpretation p { margin: 0 0 .65rem; }
.snh-shq-interpretation p:last-child { margin-bottom: 0; }
.snh-shq-interpretation.is-preview { color: #3b3b3b; }

.snh-shq-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 10px;
}
.snh-shq-actions button {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  box-shadow: none !important;
  padding: .25rem .15rem;
  margin: 0;
  min-width: 0;
  min-height: 0;
  cursor: pointer;
  line-height: 1;
}
.snh-shq-react {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  color: var(--shq-muted);
  font-family: 'Roboto', sans-serif;
  font-size: .93rem;
  font-weight: 500;
}
.snh-shq-star {
  color: var(--shq-star-idle);
  font-size: 1.32rem;
  line-height: 1;
  transition: color .16s ease;
}
.snh-shq-react.is-done .snh-shq-star {
  color: var(--shq-star-active);
}
.snh-shq-count {
  min-width: 1ch;
  color: var(--shq-muted);
}
.snh-shq-react:focus-visible {
  outline: 2px solid rgba(122, 77, 179, .55);
  outline-offset: 3px;
  border-radius: 4px;
}

.snh-shq-empty { margin: 0; color: var(--shq-muted); }
.snh-shq-saved-list { list-style: none; margin: 0; padding: 0; }
.snh-shq-saved-list li { border-bottom: 1px solid rgba(0,0,0,.08); }
.snh-shq-saved-list a {
  display: block;
  padding: 1rem .1rem;
  color: inherit;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  font-size: 1.05rem;
  line-height: 1.55;
  letter-spacing: 0;
}
.snh-shq-saved-list a:hover { color: var(--shq-accent); }
.snh-shq-back {
  display: inline-block;
  margin-bottom: 1rem;
  color: var(--shq-accent);
  text-decoration: none;
}

@media (max-width: 560px) {
  .snh-shq-title { font-size: 1.35rem; }
  .snh-shq-card { border-radius: 12px; padding: 18px; }
  .snh-shq-date { font-size: .96rem; margin-bottom: 6px; }
  .snh-shq-question { font-size: 1.15rem; line-height: 1.6; margin-bottom: 8px; }
  .snh-shq-interpretation { font-size: 1.10rem; line-height: 1.6; }
  .snh-shq-actions { margin-top: 9px; }
  .snh-shq-star { font-size: 1.28rem; }
}