/* ===== 琼脂糖凝胶电泳 · 凝胶槽 ===== */
.aga {
    background: #f7fbfa;
    border: 1px solid #d6e7e2;
    border-radius: 12px;
    padding: 24px 22px;
    margin-bottom: 26px;
    box-shadow: 0 10px 30px rgba(12, 80, 72, .07);
}

.aga-stage {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 20px;
    align-items: stretch;
}

/* ---- 凝胶 ---- */
.aga-gel-wrap {
    background: #fff; border: 1px solid #d6e7e2; border-radius: 10px;
    padding: 12px;
}
.aga-gel-head {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 10.5px; color: #8aa7a1; margin-bottom: 8px;
}
.aga-gel-head b { color: #0f766e; }
.aga-gel {
    position: relative;
    height: 196px;
    border-radius: 6px;
    background:
        linear-gradient(180deg, #0f172a 0%, #16233a 55%, #1b2b44 100%);
    box-shadow: inset 0 0 26px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(94, 234, 212, .12);
    display: flex; gap: 3px; padding: 10px 8px 18px;
    overflow: hidden;
}
.aga-gel::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(180deg, rgba(94, 234, 212, .05) 0 1px, transparent 1px 22px);
    pointer-events: none;
}
.aga-lane {
    position: relative; flex: 1 1 0; min-width: 0;
    background: linear-gradient(180deg, rgba(148, 216, 205, .07), rgba(148, 216, 205, .03));
    border-radius: 1px;
}
.aga-lane.is-marker { background: rgba(251, 191, 36, .07); }
.aga-well {
    position: absolute; top: 0; left: 12%; right: 12%; height: 6px;
    background: rgba(15, 23, 42, .85);
    box-shadow: inset 0 -1px 0 rgba(148, 216, 205, .35);
}
.aga-band {
    position: absolute; left: 14%; right: 14%; height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(190, 242, 100, .55), #bef264 45%, rgba(190, 242, 100, .55));
    box-shadow: 0 0 7px rgba(190, 242, 100, .75);
    transition: bottom .4s;
}
.aga-lane.is-marker .aga-band {
    background: linear-gradient(90deg, rgba(251, 191, 36, .5), #fbbf24 45%, rgba(251, 191, 36, .5));
    box-shadow: 0 0 6px rgba(251, 191, 36, .6);
    left: 10%; right: 10%; height: 3px;
}
.aga-lane > i {
    position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%);
    font-style: normal; font-size: 8px; color: #6d8e88; white-space: nowrap;
}
.aga-scale {
    position: absolute; right: 2px; top: 10px; bottom: 18px; width: 26px;
    pointer-events: none;
}
.aga-scale b {
    position: absolute; right: 0; transform: translateY(-50%);
    font: 700 7.5px/1 ui-monospace, monospace; color: rgba(251, 191, 36, .8);
}

/* ---- 右侧数据 ---- */
.aga-side {
    background: #fff; border: 1px solid #d6e7e2; border-radius: 10px;
    padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
.aga-conc { display: flex; align-items: baseline; gap: 8px; }
.aga-conc b {
    font: 700 34px/1 ui-monospace, Consolas, monospace; color: #0f766e;
    font-variant-numeric: tabular-nums;
}
.aga-conc i { font-style: normal; font-size: 11px; color: #8aa7a1; }
.aga-conc span {
    margin-left: auto; font-size: 10px; color: #0f766e;
    background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 3px;
    padding: 3px 7px;
}
.aga-recipe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.aga-cell {
    background: #f5fbf9; border: 1px solid #e2f0ec; border-radius: 7px;
    padding: 8px 10px;
}
.aga-cell span { display: block; font-size: 9.5px; color: #8aa7a1; }
.aga-cell b {
    font: 700 14px/1.3 ui-monospace, monospace; color: #115e59;
    font-variant-numeric: tabular-nums;
}
.aga-cell b em { font-style: normal; font-size: 9.5px; color: #8aa7a1; font-weight: 400; }
.aga-verdict {
    margin: 0; font-size: 11px; line-height: 1.65; color: #115e59;
    background: #f0fdfa; border-left: 3px solid #14b8a6;
    border-radius: 0 6px 6px 0; padding: 8px 11px;
}
.aga-verdict.bad { color: #9f1239; background: #fff5f6; border-left-color: #e11d48; }

/* ---- 参数 ---- */
.aga-params { margin-top: 20px; border-top: 1px solid #d6e7e2; padding-top: 15px; }
.aga-params h2 { font-size: 12px; letter-spacing: .07em; color: #3f645e; margin: 0 0 11px; }
.aga-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.aga-grid label { display: flex; flex-direction: column; gap: 4px; }
.aga-grid span { font-size: 10.5px; color: #7d9a94; }
.aga-grid input, .aga-grid select {
    font: inherit; font-size: 12px; padding: 7px 9px; border: 1px solid #d6e7e2;
    border-radius: 5px; background: #fff; color: #115e59; font-variant-numeric: tabular-nums;
    min-width: 0;
}
.aga-grid input:focus, .aga-grid select:focus { outline: 2px solid rgba(15, 118, 110, .18); border-color: #0f766e; }
.aga-grid input.is-bad { border-color: #dc2626; background: #fff1f2; }

.aga-note { margin: 16px 0 0; font-size: 11px; line-height: 1.8; color: #8aa7a1; }
.aga-note code { background: #effaf7; padding: 1px 4px; color: #0f766e; }

@media (max-width: 900px) {
    .aga-stage { grid-template-columns: 1fr; }
    .aga-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .aga { padding: 16px 13px; }
    .aga-gel { height: 156px; }
    .aga-grid { grid-template-columns: 1fr; }
    .aga-conc b { font-size: 28px; }
}

/* ---- 深色 ---- */
[data-theme="dark"] .aga { background: #0c1413; border-color: #21302e; box-shadow: none; }
[data-theme="dark"] .aga-gel-wrap, [data-theme="dark"] .aga-side { background: #121b1a; border-color: #21302e; }
[data-theme="dark"] .aga-gel { background: linear-gradient(180deg, #080f18, #0d1725 60%, #101c2c); }
[data-theme="dark"] .aga-gel-head, [data-theme="dark"] .aga-cell span, [data-theme="dark"] .aga-grid span { color: #7d9a94; }
[data-theme="dark"] .aga-conc b { color: #5eead4; }
[data-theme="dark"] .aga-cell { background: #16211f; border-color: #21302e; }
[data-theme="dark"] .aga-cell b { color: #b8dcd5; }
[data-theme="dark"] .aga-verdict { background: rgba(20, 184, 166, .1); color: #99f6e4; }
[data-theme="dark"] .aga-verdict.bad { background: rgba(190, 18, 60, .12); color: #fda4af; }
[data-theme="dark"] .aga-params { border-color: #21302e; }
[data-theme="dark"] .aga-params h2 { color: #b8d8d2; }
[data-theme="dark"] .aga-grid input, [data-theme="dark"] .aga-grid select { background: #121b1a; border-color: #21302e; color: #d5f4ef; }
[data-theme="dark"] .aga-note { color: #7d9a94; }
[data-theme="dark"] .aga-note code { background: #16211f; color: #5eead4; }