*{box-sizing:border-box}body{margin:0;background:#f5f7fa;color:#17202a;font-family:Arial,Helvetica,sans-serif}
main{width:min(1180px,calc(100% - 28px));margin:auto;padding:36px 0 60px}header{margin-bottom:22px}
h1{font-size:38px;margin:0 0 10px}h2{margin:0 0 6px}p{color:#667085;line-height:1.5}
.panel{background:white;border:1px solid #e4e7ec;border-radius:14px;padding:22px;margin:0 0 20px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.inputs,.matches{display:grid;grid-template-columns:1fr 1fr;gap:18px}label{font-weight:700}
input{display:block;width:100%;margin-top:8px;padding:12px;border:1px solid #cfd4dc;border-radius:8px;font-size:16px}
button{margin-top:18px;background:#243b80;color:white;border:0;border-radius:8px;padding:12px 20px;font-weight:700;font-size:15px;cursor:pointer}
button:disabled{opacity:.55;cursor:not-allowed}.hidden{display:none}.structure{height:190px;border:1px solid #eaecf0;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;overflow:hidden}
.structure svg{max-width:100%;max-height:100%}.matches article{border:1px solid #eaecf0;border-radius:10px;padding:14px}
.info-line{margin:5px 0;color:#344054;word-break:break-word}.heading{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.badge{background:#f2f4f7;border-radius:999px;padding:8px 11px;font-size:13px;font-weight:700;white-space:nowrap}
.badge.good{background:#ecfdf3;color:#067647}.badge.bad{background:#fef3f2;color:#b42318}.plot{height:540px}
@media(max-width:760px){.inputs,.matches{grid-template-columns:1fr}.heading{display:block}h1{font-size:30px}.plot{height:450px}}
#pcaPlot{width:min(560px,100%);height:560px;margin:12px auto 0;}


.structure-hover{
  position:fixed;
  z-index:9999;
  width:470px;
  max-width:calc(100vw - 28px);
  background:white;
  border:1px solid #d0d5dd;
  border-radius:12px;
  box-shadow:0 12px 30px rgba(16,24,40,.18);
  padding:12px;
  pointer-events:none;
}
.hidden-hover{display:none}
.hover-title{font-weight:700;font-size:14px;margin:0 0 8px}
.hover-structures{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hover-label{font-size:12px;font-weight:700;color:#475467;margin-bottom:4px}
.hover-svg{
  height:130px;
  background:#fff;
  border:1px solid #eaecf0;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.hover-svg svg{max-width:100%;max-height:100%}
.hover-smiles{
  margin-top:5px;
  font-size:10px;
  line-height:1.25;
  color:#667085;
  word-break:break-all;
}
@media(max-width:600px){
  .structure-hover{width:calc(100vw - 28px)}
  .hover-structures{grid-template-columns:1fr}
}