body{
  margin:0;
  font-family:system-ui,Arial,sans-serif;
  background:#f4f6fb;
}

.site-header{
  background:linear-gradient(90deg,#0b5fff,#2b8cff);
  color:white;
  padding:20px;
  text-align:center;
}

.layout{
  display:grid;
  grid-template-columns:90px 1fr 90px;
  max-width:1200px;
  margin:20px auto;
  gap:10px;
}

.sidebar{
  display:flex;
  justify-content:center;
}

.chromosome{
  width:50px;
}

.chromosome.molecular circle{
  fill:#4a6cf7;
}

.chromosome.ideogram rect{
  shape-rendering:crispEdges;
}

main{
  background:white;
  padding:20px;
  border-radius:10px;
  box-shadow:0 4px 10px rgba(0,0,0,0.08);
}

label{font-weight:600}
textarea{
  width:100%;
  font-family:monospace;
  padding:10px;
  border-radius:6px;
  border:1px solid #ccc;
}

.button-group{
  margin-top:10px;
  display:flex;
  gap:10px;
}

.primary-btn{
  background:#0b5fff;
  color:white;
  border:none;
  padding:8px 14px;
  border-radius:6px;
  cursor:pointer;
}

.secondary-btn{
  background:white;
  border:1px solid #aaa;
  padding:8px 14px;
  border-radius:6px;
  cursor:pointer;
}

.results-section{
  margin-top:20px;
}

.results-list{list-style:none;padding:0}
.result-ok{border-left:4px solid #0b8457;padding:8px;margin-bottom:6px}
.result-error{border-left:4px solid #c62828;padding:8px;margin-bottom:6px}
.placeholder{color:#666}

footer{
  text-align:center;
  font-size:0.85rem;
  color:#555;
  margin:30px 0 10px;
}