@media (min-width:701px) {
  html.qin-page-active,
  body.qin-page-active { min-height:100%; }
}
.qin-app {
  --qin-border:#dce2e8;
  --qin-ink:#17212b;
  --qin-viewport-gap:clamp(16px,3vw,48px);
  color:var(--qin-ink);
  width:100%;
  max-width:1600px;
  margin:0 auto;
}
.qin-toolbar { position:relative; z-index:7; display:flex; flex-wrap:wrap; gap:.65rem; align-items:end; margin:0 0 .8rem; }
.qin-toolbar > label,.qin-toolbar > .qin-filter { display:grid; gap:.2rem; font-size:.78rem; }
.qin-toolbar select,.qin-toolbar button { min-height:2.45rem; border:1px solid var(--qin-border); border-radius:.4rem; color:var(--qin-ink); background:#fff; padding:.35rem .6rem; }
.qin-multiselect { position:relative; min-width:10.5rem; }
.qin-multi-trigger { display:flex; align-items:center; justify-content:space-between; width:100%; min-width:10.5rem; text-align:left; cursor:pointer; }
.qin-multi-trigger::after { content:'\2304'; margin-left:.7rem; font-size:1rem; line-height:1; }
.qin-multi-panel { position:absolute; z-index:10; top:calc(100% + .25rem); left:0; min-width:max(100%,15rem); max-width:min(22rem,90vw); max-height:min(20rem,55vh); overflow:auto; padding:.4rem; border:1px solid var(--qin-border); border-radius:.5rem; background:#fff; box-shadow:0 12px 30px rgba(30,41,59,.16); }
.qin-multi-panel[hidden] { display:none; }
.qin-multi-option { display:flex; align-items:flex-start; gap:.5rem; padding:.4rem .45rem; border-radius:.3rem; font-size:.82rem; line-height:1.25; cursor:pointer; }
.qin-multi-option:hover { background:#f1f5f9; }
.qin-multi-option input { flex:0 0 auto; width:1rem; height:1rem; margin:.05rem 0 0; accent-color:#2563eb; }
.qin-stage { position:relative; display:grid; grid-template-rows:auto minmax(0,1fr); height:calc(100dvh - 290px); min-height:420px; border:1px solid var(--qin-border); border-radius:.7rem; overflow:hidden; background:#fafbfd; }
.qin-graph { min-width:0; min-height:0; height:100%; touch-action:none; }
.qin-legend { position:relative; z-index:4; display:flex; flex-wrap:wrap; gap:.4rem .75rem; width:100%; padding:.55rem .75rem; border-bottom:1px solid var(--qin-border); background:#fff; }
.qin-legend-item { display:inline-flex; align-items:center; gap:.35rem; color:#475569; font-size:.72rem; line-height:1.2; white-space:nowrap; }
.qin-legend-swatch { flex:0 0 auto; width:.7rem; height:.7rem; border-radius:50%; }
.qin-detail { position:absolute; z-index:5; inset:0 0 0 auto; width:min(420px,36vw); padding:3.25rem 1.25rem 1.25rem; overflow:auto; background:rgba(255,255,255,.97); border-left:1px solid var(--qin-border); box-shadow:-12px 0 32px rgba(30,41,59,.12); backdrop-filter:blur(8px); }
.qin-detail[hidden] { display:none; }
.qin-detail-close { position:absolute; top:.75rem; right:.75rem; display:grid; place-items:center; width:2.25rem; height:2.25rem; padding:0; border:1px solid var(--qin-border); border-radius:50%; color:var(--qin-ink); background:#fff; font-size:1.5rem; line-height:1; cursor:pointer; }
.qin-detail h3 { margin:.1rem 0 .65rem; font-size:1.1rem; }
.qin-detail ul { padding-left:1.15rem; }
.qin-detail li { margin:.55rem 0; }
.qin-detail small { display:block; color:#5d6975; }
.qin-status { font-size:.82rem; color:#5d6975; margin:.45rem 0; }
@media (max-width:700px) {
  html.qin-page-active,
  body.qin-page-active { height:auto; overflow-x:hidden; overflow-y:auto !important; overscroll-behavior-y:auto; }
  .qin-app { --qin-viewport-gap:16px; width:100%; margin-left:0; }
  .qin-stage { height:70svh; min-height:480px; }
  .qin-graph { min-height:0; height:100%; }
  .qin-legend { flex-wrap:nowrap; max-width:none; overflow-x:auto; padding:.5rem .6rem; }
  .qin-detail { inset:auto 0 0; width:100%; max-height:min(52svh,440px); border-left:0; border-top:1px solid var(--qin-border); border-radius:.8rem .8rem 0 0; box-shadow:0 -12px 32px rgba(30,41,59,.14); }
  .qin-toolbar > label,.qin-toolbar > .qin-filter { flex:1 1 42%; min-width:0; }
  .qin-toolbar select,.qin-multiselect,.qin-multi-trigger { width:100%; min-width:0; }
  .qin-multi-panel { min-width:min(18rem,calc(100vw - 32px)); }
  .qin-filter:nth-child(even) .qin-multi-panel { right:0; left:auto; }
  .qin-toolbar > button { flex:1 1 42%; }
}

/* Subtle blue framing, with a plain canvas for legibility. */
.qin-app,.qin-app * { box-sizing:border-box; }
.qin-intro { padding:24px 24px 16px; border:1px solid #e0e9f4; border-bottom:0; border-radius:18px 18px 0 0; background:radial-gradient(ellipse at top right,#dcecff,transparent 65%),linear-gradient(120deg,#f8fbff,#eef6ff); }
.qin-intro p { margin:0; color:#425974; font-size:13px; line-height:1.8; }
.qin-toolbar { gap:12px; padding:0 24px 22px; margin:0; border:1px solid #e0e9f4; border-top:0; background:#f4f8fd; }
.qin-toolbar > .qin-filter { flex:1 1 145px; min-width:0; }
.qin-toolbar > label,.qin-toolbar > .qin-filter { gap:7px; color:#52657c; font-weight:600; font-size:11px; }
.qin-toolbar button,.qin-toolbar select { min-height:42px; border-radius:9px; font-size:13px; font-weight:400; }
.qin-multiselect,.qin-multi-trigger { min-width:0; }
.qin-multi-trigger [data-summary] { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qin-toolbar button:hover,.qin-toolbar select:hover { border-color:#99b8dd; background:#fbfdff; }
.qin-app button:focus-visible,.qin-app select:focus-visible,.qin-app input:focus-visible { outline:3px solid #93c5fd; outline-offset:3px; }
.qin-toolbar [data-action="reset"] { color:#315f97; background:#eaf2fc; border-color:#d6e4f5; cursor:pointer; }
.qin-stage { border-top:0; border-radius:0 0 16px 16px; background:#fcfdff; box-shadow:0 12px 35px #24487208; }
.qin-legend { gap:9px 16px; padding:14px 20px; }
.qin-legend-item { font-size:11px; color:#617086; }
.qin-status { padding:4px 2px; font-size:11px; color:#7c8b9e; }
@media (max-width:700px) {
 .qin-intro { padding:18px 16px 14px; }
 .qin-toolbar { padding:0 16px 16px; }
 .qin-toolbar > .qin-filter { flex:1 1 42%; }
 .qin-intro p { font-size:12px; }
}