#genetics { width: 720px; top: 12px; right: 12px; }
#colony-setup { width: 420px; top: 12px; right: 12px; }
.genetics-body, .setup-body { color: #b4c6ce; font-size: 11px; line-height: 1.6; }
.genetics-body h3, .setup-body h3 { margin: 0 0 8px; color: #dfebe6; font-size: 14px; }
.genetics-body h4 { margin: 14px 0 8px; color: #cededb; font-size: 11px; }
.gen-intro { margin: 0 0 12px; color: #9eb6c0; }
.gen-controls { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; margin-bottom: 12px; }
.genetics-body :is(select,input), .setup-body :is(select,input), #colony-search { width: 100%; min-width: 0; border: 1px solid #38505d; background: #0e1c26; color: #d0e1e3; border-radius: 7px; padding: 8px; font: inherit; font-size: 11px; }
.genetics-body button, .setup-body button, .colony-pagination button { cursor: pointer; font: inherit; font-size: 10px; color: #bdd4d9; border: 1px solid #37515d; background: #1b3039; border-radius: 7px; padding: 7px 10px; }
.genetics-body button:hover, .setup-body button:hover { color: #e7fff4; border-color: #81baa5; }
.genetics-body button:disabled, .setup-body button:disabled, .colony-pagination button:disabled { opacity: .45; cursor: default; }
.gen-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin: 12px 0; }
.gen-stats div { border: 1px solid #304650; background: #182a32; border-radius: 8px; padding: 8px; }
.gen-stats strong { display: block; color: #b4e4cb; font-size: 20px; line-height: 1.3; }
.gen-stats span { display: block; color: #97b0b8; font-size: 9px; margin-top: 3px; }
.gen-tabs { display: flex; gap: 5px; border-bottom: 1px solid #324a55; padding-bottom: 8px; margin-bottom: 12px; }
.gen-tabs button { flex: 1; white-space: nowrap; }
.gen-tabs button[aria-selected="true"] { color: #c6f5df; background: #294b3e; border-color: #658e7a; }
.gen-chart { display: block; width: 100%; border: 1px solid #2b434e; border-radius: 10px; background: #0d1c25; }
.gen-chart text { fill: #9fb9c3; font-family: system-ui,sans-serif; font-size: 11px; }
.gen-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 9px 0 13px; font-size: 10px; }
.gen-legend span { display: flex; align-items: center; gap: 5px; }
.gen-legend i { width: 8px; height: 8px; border-radius: 3px; }
.gen-table-wrap { overflow-x: auto; scrollbar-width: thin; }
.gen-table-wrap table { border-collapse: collapse; width: 100%; font-size: 10px; white-space: nowrap; }
.gen-table-wrap :is(th,td) { text-align: left; border-bottom: 1px solid #2c424d; padding: 8px; }
.gen-table-wrap th { color: #a2bfc8; font-weight: 500; background: #142832; }
.gen-table-wrap td { color: #d2dfdc; }
.gen-help, .gen-note, .gen-empty { color: #8ea7b1; font-size: 10px; margin: 11px 0; }
.gen-note { border-top: 1px solid #304650; padding-top: 10px; margin-bottom: 0; font-size: 9px; }
.gen-empty { padding: 8px 0; }
.gen-breeding { border: 1px solid #38534f; border-radius: 10px; padding: 10px 12px; margin-top: 14px; background: #182d2c; }
.gen-breeding summary { color: #bde8cf; cursor: pointer; font-size: 11px; }
.gen-breeding p { font-size: 10px; color: #9db7bc; }
.gen-primary, .setup-body .setup-primary { background: #a6e5cb !important; border-color: #a6e5cb !important; color: #15392e !important; font-weight: 600 !important; }
.gen-family-tools { display: flex; gap: 7px; margin-bottom: 10px; }
.gen-family-tools input { flex: 1; }
.gen-mouse-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.gen-relative { display: block; min-width: 0; text-align: left; }
.gen-relative :is(small,strong,span) { display: block; overflow: hidden; text-overflow: ellipsis; }
.gen-relative small { color: #94b0b7; font-size: 9px; }
.gen-relative strong { color: #d7e7df; font-size: 11px; margin: 3px 0; }
.gen-relative span { color: #9cacae; font-size: 9px; }
.gen-relative.selected { border-color: #92be9e; background: #2b4437; }
.gen-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0; font-size: 9px; color: #92adb6; }
#gn-pedigree { margin-top: 20px; border-top: 1px solid #34505a; padding-top: 15px; }
#gn-pedigree h3 small { font-size: 9px; color: #85a3af; font-weight: 400; }
.gen-parents, .gen-children { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gen-descent { text-align: center; color: #8fcab3; font-size: 22px; line-height: 1.4; }
.gen-selected { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
.gen-unknown { color: #7f99a4; border: 1px dashed #42545c; border-radius: 7px; padding: 12px; font-size: 10px; }
.gen-exports { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 8px; }
.gen-cage-link { text-align: left; }
.setup-body section + section { border-top: 1px solid #34505a; padding-top: 18px; margin-top: 18px; }
.setup-body p { color: #9cb4bd; font-size: 10px; }
.setup-body .field { display: block; margin: 12px 0; }
.setup-body .field :is(input,select) { display: block; margin-top: 5px; }
.setup-optional { color: #8da6ad; font-size: 9px; }
.setup-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.setup-actions .setup-primary { margin-left: auto; }
.setup-error { color: #f0a99c !important; }
.colony-pagination { display: flex; justify-content: space-between; align-items: center; gap: 5px; font-size: 9px; margin: 8px 0; color: #94b1bd; }
#colony-search { margin-bottom: 8px; }
@media (max-width: 700px) { .gen-controls { grid-template-columns: 1fr; } .gen-stats { grid-template-columns: 1fr 1fr; } .gen-mouse-list { grid-template-columns: 1fr 1fr; } .gen-family-tools { flex-wrap: wrap; } .gen-family-tools input { flex-basis: 100%; } }