dialog#panel[data-station^="qin-"] {
  width: min(760px, calc(100vw - 32px));
  height: fit-content;
  max-height: calc(100dvh - 120px);
}
#panel[data-station^="qin-"] header {
  height: auto;
  min-height: 52px;
}
#panel[data-station^="qin-"] header h2 {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.4;
}
#panel[data-station^="qin-"] header .close { flex: none; }
#panel[data-station^="qin-"] .body {
  flex: 0 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--gui-shade) var(--gui);
}
.about.qin-guide {
  padding: 22px 26px;
  background: var(--gui);
  color: var(--ink);
}
.qin-guide .about-text { display: block; }
.qin-guide .about-text p {
  margin: 0 0 1em;
  font-size: 16px;
  line-height: 1.8;
  word-break: normal;
}
.qin-guide .about-text p:last-child { margin-bottom: 0; }
@media (max-width: 600px), (max-height: 520px) {
  dialog#panel[data-station^="qin-"] {
    inset: max(12px, env(safe-area-inset-top)) 0 max(12px, env(safe-area-inset-bottom));
    width: calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));
    max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  #panel[data-station^="qin-"] header { gap: 8px; }
  #panel[data-station^="qin-"] header h2 { font-size: 18px; }
  .about.qin-guide { padding: 16px 14px; }
}