:root{--main:#173247;--accent:#356f98;--bg:#f3f6f8;--soft:#eaf2f7;--line:#d7e0e6;--ok:#285875;--warn:#b91c1c}
*{box-sizing:border-box} body{font-family:Segoe UI,Tahoma,sans-serif;background:var(--bg);padding:18px;color:#1f2937}.container{max-width:1180px;margin:auto;background:#fff;padding:22px;border-radius:14px;box-shadow:0 4px 18px rgba(31,79,51,.08)}h1{text-align:center;color:var(--main);margin-bottom:2px}.subtitle{text-align:center;color:#fff;font-size:1.15rem;margin:0 -22px 16px;padding:12px 24px;background:linear-gradient(135deg,var(--accent),var(--main));border-radius:12px 12px 0 0}.note{background:#f6fbf6;border:1px solid #cfe4d1;padding:10px;border-radius:8px;margin:10px 0 18px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.box{border:1px solid var(--line);border-radius:12px;padding:16px;background:#fff}.box h2{text-align:center;color:var(--accent);margin-top:0}.row{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:10px}.row.one{grid-template-columns:1fr}.hidden{display:none!important}label{font-weight:700;font-size:.9rem;display:block;margin-bottom:4px}select,input[type=text]{width:100%;padding:9px;border:1px solid #c8d5ca;border-radius:6px;background:#fff}select:disabled{background:#f2f6f2;color:#64748b}.checkline{display:flex;flex-wrap:wrap;gap:12px;background:#f7faf7;border:1px dashed #c8d5ca;border-radius:8px;padding:10px;margin:10px 0}.checkline label{font-weight:500;display:flex;gap:5px;align-items:center;margin:0}.trait-line{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.trait-line label{padding:0;border:0;border-radius:0}.trait-line label:has(input[type="checkbox"]:disabled){background:transparent;color:#8a94a3;font-weight:500}.trait-line input[type="checkbox"]:disabled{opacity:.35;filter:grayscale(1)}.geno{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}.geno-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.locus{background:#f7faf7;border:1px solid var(--line);border-radius:8px;padding:8px;text-align:center;position:relative}.locus-head{display:flex;align-items:center;justify-content:center;gap:6px}.locus .name{font-weight:800;color:var(--main)}.variant-label{display:flex;align-items:center;gap:6px;margin-bottom:4px}.variant-label label{margin:0}.variant-help-wrap{position:relative;display:inline-flex;align-items:center}.variant-help{display:none;position:absolute;z-index:20;left:50%;top:calc(100% + 8px);transform:translateX(-50%);width:300px;max-width:min(300px,calc(100vw - 48px));background:#fff;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:8px;padding:9px 11px;color:#334155;font-size:.84rem;line-height:1.4;font-weight:400;text-align:left;box-shadow:0 6px 18px rgba(31,79,51,.16)}.variant-help:before{content:"";position:absolute;top:-6px;left:50%;width:10px;height:10px;background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line);transform:translateX(-50%) rotate(45deg)}.variant-help-wrap:hover .variant-help,.variant-help-wrap:focus-within .variant-help{display:block}.info-btn{width:20px;height:20px;border:1px solid #c8d5ca;border-radius:999px;background:white;color:var(--main);font-weight:900;font-size:.78rem;line-height:1;cursor:pointer}.info-btn:hover,.info-btn:focus{background:var(--soft);border-color:var(--main)}.locus select{font-family:ui-monospace,Consolas,monospace;padding:6px;margin-top:5px}.alleles{display:flex;gap:5px}.alleles select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 10 6%27%3E%3Cpath d=%27M1 1l4 4 4-4%27 fill=%27none%27 stroke=%27%23173247%27 stroke-width=%271.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 3px center;background-size:7px 4px;padding:6px 12px 6px 3px;height:31px}.tip{display:none}.help-panel{margin-top:10px;background:#f7faf7;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;padding:10px 12px;color:#334155;font-size:.88rem;line-height:1.35;min-height:46px}.help-panel b{color:var(--main)}.status{font-size:.9rem;margin-top:8px;color:#475569;min-height:20px}.status.detected{background:#f6fbf6;border:2px solid #9fc7a5;border-left:7px solid var(--accent);border-radius:12px;padding:12px;color:#20462d;font-weight:800;box-shadow:0 3px 10px rgba(53,107,69,.10)}.unknown-refine{margin-top:12px;background:transparent;border:0;border-radius:0;padding:0;color:#1f2937;font-size:1rem;box-shadow:none;display:flex;flex-direction:column;gap:14px}.unknown-refine h4{margin:0 0 8px;color:var(--main);font-size:1.05rem}.unknown-refine .checkline{margin:10px 0 4px;background:white;border:1px solid var(--line);border-radius:10px;padding:10px}.unknown-refine .checkline label{font-size:.95rem}.unknown-refine .unknown-empty{font-size:.9rem;color:#64748b;margin-top:8px}.unknown-refine>.unknown-card{border-left:8px solid var(--main);border-radius:14px;padding:18px 20px;background:linear-gradient(135deg,#f8fcf8,#f4f7f3);box-shadow:0 0 0 1px #cfe4d1 inset}.unknown-refine>.unknown-card h4{margin-top:0}.unknown-refine input[type="checkbox"]{pointer-events:auto}.calc{width:100%;margin-top:18px;background:var(--accent);color:#fff;border:0;border-radius:10px;padding:15px;font-size:1.1rem;font-weight:800;cursor:pointer}.calc:hover{background:#274f34}.warning{display:none;background:#fef2f2;border:1px solid #fecaca;color:var(--warn);font-weight:800;padding:12px;border-radius:8px;margin-top:14px;text-align:center}.calc-stale{display:none;margin-top:12px;background:#f6fbf6;border:2px solid #9fc7a5;border-left:7px solid var(--accent);border-radius:12px;padding:12px;color:#20462d;font-weight:800}.calc-stale button{margin-left:10px;background:var(--accent);color:#fff;border:0;border-radius:8px;padding:8px 12px;font-weight:800;cursor:pointer}table{width:100%;border-collapse:collapse;margin-top:18px}th,td{border:1px solid var(--line);padding:9px;text-align:left}th{background:var(--main);color:white}.muted{color:#64748b;font-size:.85rem}.footer{margin-top:30px}.ad{background:#fff6e5;border:1px solid #e2b654;border-left:6px solid #d8a33a;border-radius:16px;padding:26px 28px 25px;box-shadow:0 8px 24px rgba(79,57,15,.06);color:#4f390f}.ad h2{margin:0 0 8px;color:#3f2d0c;font-size:1.30rem;line-height:1.25}.ad .ad-intro{margin:0 0 22px;line-height:1.5;color:#6a4c13}.ad .ad-section{position:relative;padding:0 0 21px 18px}.ad .ad-section:before{content:"";position:absolute;left:0;top:3px;bottom:21px;width:3px;border-radius:999px;background:#d8a33a}.ad .ad-section+.ad-section{padding-top:22px;border-top:1px solid rgba(216,163,58,.48)}.ad .ad-section+.ad-section:before{top:25px;bottom:0}.ad .ad-overline{margin:0 0 5px;color:#9a6a0b;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.ad h3{margin:0 0 8px;color:#3f2d0c;font-size:1.08rem;line-height:1.35}.ad p{margin:7px 0;line-height:1.55;color:#4f390f}.ad .ad-link{display:inline-block;margin-top:4px;color:#5b3f08;font-weight:800;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}.ad .ad-link:hover,.ad .ad-link:focus-visible{color:#7b560a}.ad .ad-book-title{margin:0 0 8px;color:#3f2d0c;font-size:1.08rem;line-height:1.35;font-weight:700}.ad .ad-price{color:#5b3f08;font-weight:850;white-space:nowrap}.ad .ad-order{margin-top:12px;color:#563d0d}.ad .ad-order p{margin:5px 0}.ad .ad-mail{color:#4f390f;font-weight:750;text-decoration:underline;text-underline-offset:2px}.ad .ad-sender{margin-top:10px!important;font-weight:750}.ad strong{color:inherit}.advanced{margin-top:22px;border:1px solid var(--line);border-radius:14px;background:#f7faf7;padding:14px}.advanced summary{cursor:pointer;font-weight:900;color:var(--main);font-size:1.05rem}.advanced .advanced-note{margin:8px 0 12px;color:#475569}.gp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.gp-box{background:white;border:1px solid var(--line);border-radius:10px;padding:10px}.gp-box h4{margin:0 0 8px;color:var(--accent);text-align:center}.gp-locus{display:grid;grid-template-columns:34px 24px 1fr 1fr;gap:5px;align-items:center;margin-bottom:5px}.gp-locus span{font-weight:800;color:var(--main)}.gp-help{margin-top:8px;background:#f7faf7;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;padding:9px 10px;color:#334155;font-size:.84rem;line-height:1.35;min-height:42px}.gp-help b{color:var(--main)}.gp-locus select{padding:6px;font-family:ui-monospace,Consolas,monospace}.advanced-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.secondary-btn{background:var(--main);color:white;border:0;border-radius:8px;padding:10px 13px;font-weight:800;cursor:pointer}.secondary-btn:hover{background:#163927}.advanced-result{margin-top:10px;background:#fff;border-left:4px solid var(--accent);border-radius:8px;padding:10px;color:#334155}.calc-explain{margin-top:16px;background:#f7faf7;border:1px solid var(--line);border-radius:12px;padding:12px}.calc-explain h3{margin:0 0 8px;color:var(--main)}.locus-details{margin-top:10px}.locus-details details{background:white;border:1px solid var(--line);border-radius:9px;padding:9px;margin:7px 0}.locus-details summary{cursor:pointer;font-weight:800;color:var(--main)}.calc-advanced{margin-top:16px;border:1px solid var(--line);border-radius:12px;background:#f7faf7;padding:10px}.calc-advanced summary{cursor:pointer;color:var(--main)}
.likely-result{margin-top:18px;background:#f7faf7;border:1px solid var(--line);border-left:7px solid var(--main);border-radius:12px;padding:14px}.likely-result h3{margin:0 0 10px;color:var(--main)}.likely-result ul{margin:8px 0 0 20px}.likely-result li{margin:8px 0}.summary-fact-group{margin:8px 0 0 20px}.summary-fact-group + .summary-fact-group{margin-top:20px}.locus-notes{margin-top:12px;padding:12px;background:#f6fbf6;border:1px solid #cfe4d1;border-radius:10px;color:#20462d}.locus-notes h4{margin:0 0 8px;color:#20462d}.locus-notes ul{margin:0;padding-left:20px}.locus-notes li{margin:6px 0}@media(max-width:1100px){.gp-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:900px){.grid{grid-template-columns:1fr}.geno-grid{grid-template-columns:repeat(2,1fr)}}
.blue-note{border-color:#a8cfb0;background:#eff8f0;}


.box{
  border-color:#c9d8cc;
  box-shadow:0 2px 8px rgba(31,79,51,.055);
}


.help-panel,
.gp-help,
.calc-explain,
.calc-advanced,
.advanced{
  background:#f8fbf8;
  border-color:#d9e5db;
}
.help-panel,
.gp-help{
  border-left-width:3px;
  border-left-color:#6f9b79;
}


.status.detected{
  background:#eef7ef;
  border-color:#91bf9b;
  border-left-color:#2f6f44;
  box-shadow:0 3px 10px rgba(47,111,68,.10);
}


.unknown-refine>.unknown-card{
  background:linear-gradient(135deg,#edf6ee,#f7fbf7);
  border-left-color:#1f5a36;
  box-shadow:0 0 0 1px #bdd4c2 inset,0 3px 10px rgba(31,79,51,.06);
}
.unknown-refine>.unknown-card h4{
  color:#17452b;
}


.likely-result{
  background:#ffffff;
  border-color:#c6d8ca;
  border-left-color:#1f5a36;
  box-shadow:0 3px 12px rgba(31,79,51,.07);
}
.likely-result h3{
  color:#17452b;
}


.locus-notes{
  background:#f2f7ea;
  border-color:#cddbbd;
  color:#2f4d2d;
  box-shadow:0 2px 8px rgba(72,96,48,.045);
}
.locus-notes h4{
  color:#274628;
}


#result>.likely-result,
#result>.locus-notes,
#result>.calc-explain,
#result>.calc-advanced{
  margin-top:22px;
}


.gp-box{
  background:#fbfdfb;
  border-color:#d6e2d8;
}
.advanced-result{
  background:#f7faf7;
  border-left-color:#6f9b79;
}


.locus{
  background:#f9fbf9;
  border-color:#d3e0d5;
}
.checkline{
  background:#fafcf9;
  border-color:#cbd9ce;
}


.precise-category{border-top:1px solid var(--line);padding:18px 0}
.precise-category:first-of-type{border-top:0}
.precise-category h4{font-size:1.08rem;color:var(--main);margin:0 0 6px}
.precise-category .group-total{font-weight:900;margin:0 0 10px}
.precise-category .detail-hint{margin:8px 0 10px;color:#475569}
.precise-category .precise-subhead{font-weight:900;color:var(--main);margin:12px 0 4px}
.precise-category details{margin:12px 0;background:#f7faf7;border:1px solid var(--line);border-radius:9px;padding:9px}
.precise-category summary{cursor:pointer;color:var(--main)}
.precise-category ul{margin-top:8px}


:root{
  --main:#173247;
  --accent:#356f98;
  --bg:#f3f6f8;
  --soft:#eaf2f7;
  --line:#d7e0e6;
  --ok:#285875;
}
body{background:var(--bg)}
.container{
  background:#fff;
  box-shadow:0 4px 18px rgba(24,50,71,.08);
}
.container,.box,.gp-box,.likely-result{background:#fff}
.note{
  background:#f3f8fb;
  border-color:#c8dce9;
}
select,input[type=text],.info-btn{
  border-color:#c7d7e2;
}
select:disabled{
  background:#f1f5f8;
}
.box,
.gp-box,
.locus,
.checkline,
.help-panel,
.gp-help,
.calc-explain,
.calc-advanced,
.advanced,
.precise-category details,
.advanced-result{
  background:#f7f9fb;
  border-color:#d7e0e6;
}
.help-panel,.gp-help,.advanced-result{
  border-left-color:#6f99b7;
}
.status.detected,
.unknown-refine>.unknown-card,
.locus-notes,
.blue-note,
.calc-stale{
  background:#edf4f9;
  border-color:#b9d2e3;
  border-left-color:#356f98;
  color:#234a65;
}
.unknown-refine>.unknown-card{
  background:linear-gradient(135deg,#edf4f9,#f7fafc);
  box-shadow:0 0 0 1px #c7dbe8 inset,0 3px 10px rgba(24,50,71,.06);
}
.unknown-refine>.unknown-card h4,
.likely-result h3,
.locus-notes h4{
  color:#173247;
}
.likely-result{
  border-color:#c7d8e4;
  border-left-color:#173247;
  box-shadow:0 3px 12px rgba(24,50,71,.07);
}
.ad .order{
  border-color:#d7e0e6;
}
.calc:hover{background:#285875}
.secondary-btn:hover{background:#244f70}



.standard-color-grid #han_california_point_area,
.standard-color-grid #hun_california_point_area{margin:0}
#han_choice_area .row>div,
#hun_choice_area .row>div{display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
#han_choice_area .row>div>label,
#hun_choice_area .row>div>label{display:block}
.standard-color-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:10px}
.standard-color-grid>div{min-width:0}
.standard-color-grid:not(.has-california-point) .standard-third{grid-column:1/-1}
.standard-color-grid>div{display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.standard-color-grid>div>label,
.standard-color-grid>div>div>label{display:block}
@media(max-width:720px){.ad{padding:22px 20px}}
@media(max-width:560px){
  .standard-color-grid{grid-template-columns:1fr}
  .standard-color-grid .standard-third{grid-column:auto!important}
}

/* Programkoden ligger server-side. */