/* =========================================
   1. СЕТКА И БАЗОВЫЙ ЛЕЙАУТ (WEB APP)
   ========================================= */
.tools-main-wrapper {
    padding: 30px 20px;
    max-width: 1240px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* =========================================
   ПЕРЕВОД ПОСЛЕДОВАТЕЛЬНОСТЕЙ: ВЫБОР ОПЕРАЦИИ
   ========================================= */
.pt-operation-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}

.pt-operation-tabs .tool-tab-btn {
    min-height: 54px;
    padding: 12px 16px;
    border-bottom: 1px solid #dbe3ec;
    color: #64748b;
    transition-property: color, background-color, border-color, box-shadow;
}

.pt-operation-tabs .tool-tab-btn.active {
    border-bottom-color: var(--magenta);
    background: #fff5fb;
    box-shadow: inset 0 -2px 0 var(--magenta);
    color: var(--brand-dark);
}

.pt-operation-tabs .tool-tab-btn:focus-visible {
    outline: 2px solid var(--magenta);
    outline-offset: -2px;
}

/* =========================================
   РЕСТРИКЦИЯ И ВИРТУАЛЬНЫЙ ГЕЛЬ
   ========================================= */
.restriction-app [hidden] {
    display: none !important;
}

.restriction-flow-step .tool-flow-head {
    margin-bottom: 20px;
}

.restriction-flow-step .tool-flow-head > div > p {
    margin: 6px 0 0;
    color: #64748b;
    font-size: .82rem;
    line-height: 1.45;
    text-wrap: pretty;
}

.restriction-sequence-head,
.restriction-sequence-meta,
.restriction-result-toolbar,
.restriction-run-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.restriction-file-action,
.restriction-custom-toggle,
.restriction-save-enzyme {
    min-height: 40px;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: transparent;
    color: var(--magenta);
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    transition-property: color, border-color, background-color, transform;
}

.restriction-file-action {
    display: inline-flex;
    align-items: center;
    padding: 0 2px;
}

.restriction-file-action::before {
    margin-right: 8px;
    content: '↑';
    font-size: 1.05rem;
}

.restriction-file-action:hover,
.restriction-file-action:focus-visible,
.restriction-file-action.is-dragging,
.restriction-custom-toggle:hover,
.restriction-custom-toggle:focus-visible,
.restriction-save-enzyme:hover,
.restriction-save-enzyme:focus-visible {
    color: var(--brand-dark);
}

.restriction-file-action:focus-visible,
.restriction-custom-toggle:focus-visible,
.restriction-save-enzyme:focus-visible {
    outline: 2px solid var(--magenta);
    outline-offset: 3px;
}

.restriction-file-action.is-dragging {
    background: #fff5fb;
}

.restriction-file-action.is-loaded::before {
    content: '✓';
}

.restriction-sequence-input {
    min-height: 142px !important;
    margin-top: 8px;
    resize: vertical;
    line-height: 1.55;
}

.restriction-sequence-meta {
    margin-top: 7px;
    color: #64748b;
    font-size: .72rem;
}

#restr_seq_status {
    color: var(--brand-dark);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

#restr_seq_status.is-error {
    color: #b91c1c;
}

.restriction-topology-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.restriction-topology-option {
    position: relative;
    min-width: 0;
    cursor: pointer;
}

.restriction-topology-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.restriction-topology-copy {
    display: flex;
    min-height: 62px;
    padding: 10px 12px 12px;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid #dbe3ec;
    background: transparent;
    color: #64748b;
    transition-property: color, background-color, border-color, box-shadow;
    transition-duration: .15s;
}

.restriction-topology-copy strong {
    color: var(--brand-dark);
    font-size: .92rem;
}

.restriction-topology-copy small {
    margin-top: 3px;
    font-size: .72rem;
}

.restriction-topology-option:hover .restriction-topology-copy {
    border-bottom-color: #94a3b8;
}

.restriction-topology-option input:checked + .restriction-topology-copy {
    border-bottom-color: var(--magenta);
    background: #fff5fb;
    box-shadow: inset 0 -2px 0 var(--magenta);
    color: var(--brand-dark);
}

.restriction-topology-option input:focus-visible + .restriction-topology-copy {
    outline: 2px solid var(--magenta);
    outline-offset: -2px;
}

.restriction-enzyme-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.restriction-enzyme-grid .tool-label span {
    color: #94a3b8;
    font-size: .68rem;
    font-weight: 600;
}

.restriction-enzyme-grid .mm-select-control {
    width: 100%;
}

.restriction-enzyme-grid .mm-select-options {
    min-width: 310px;
    max-height: 330px;
}

.restriction-enzyme-grid .site-counter {
    min-height: 18px !important;
    margin-top: 5px !important;
    color: #64748b !important;
    font-size: .7rem !important;
    font-variant-numeric: tabular-nums;
}

.restriction-custom-toggle {
    margin-top: 12px;
}

.restriction-custom-enzyme {
    display: grid;
    grid-template-columns: minmax(150px, .7fr) minmax(280px, 1.5fr) auto;
    gap: 16px;
    align-items: end;
    margin-top: 12px;
    padding: 16px 0;
    border-top: 1px solid #dbe3ec;
    border-bottom: 1px solid #dbe3ec;
}

.restriction-save-enzyme {
    padding: 0 2px;
}

.restriction-run-row {
    justify-content: flex-end;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #dbe3ec;
}

.restriction-run-row .tool-btn-primary {
    min-width: 280px;
    min-height: 46px;
}

.restriction-run-row .tool-btn-primary:active {
    transform: scale(.96);
}

.restriction-run-row .tool-btn-primary:disabled {
    cursor: not-allowed;
    opacity: .48;
}

.restriction-results-head {
    margin-bottom: 14px !important;
}

.restriction-result-toolbar {
    min-height: 48px;
    padding-bottom: 12px;
    border-bottom: 1px solid #dbe3ec;
    color: var(--brand-dark);
    font-size: .9rem;
    font-weight: 800;
}

.restriction-ladder-field {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #64748b;
    font-size: .72rem;
    font-weight: 700;
}

.restriction-ladder-field .mm-select-control {
    width: 190px;
}

.restriction-gel-workspace {
    display: grid;
    grid-template-columns: minmax(420px, 1.1fr) minmax(350px, .9fr);
    gap: 0;
    margin-top: 18px;
}

.restriction-gel-panel {
    min-width: 0;
    padding: 18px 18px 12px;
    background: #151827;
}

.restriction-app .virtual-gel-wrapper {
    width: 100%;
    height: 380px;
    min-width: 0;
    padding: 38px 18px 18px 52px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.restriction-app .gel-lane {
    border-color: rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .025);
}

.restriction-app .gel-lane-title {
    color: #f8fafc;
    font-size: .68rem;
    font-weight: 700;
}

.restriction-app .gel-band {
    background: #f8fafc;
    box-shadow: 0 0 5px rgba(255, 255, 255, .35);
    transition-property: transform, box-shadow, opacity;
}

.restriction-app .gel-band.marker {
    background: #ff62bd;
    box-shadow: 0 0 5px rgba(255, 98, 189, .5);
}

.restriction-app .gel-band-label {
    color: #aeb7c8;
}

.restriction-gel-note {
    margin: 10px 0 0;
    color: #aeb7c8;
    font-size: .68rem;
    line-height: 1.45;
    text-wrap: pretty;
}

.restriction-fragments-panel {
    min-width: 0;
    padding: 0 0 0 22px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.restriction-fragments-panel .results-table {
    margin: 0;
}

.restriction-fragments-panel .results-table th {
    font-size: .7rem;
}

.restriction-fragments-panel .results-table td {
    padding: 12px 8px;
    font-size: .78rem;
}

.restriction-sites-count {
    color: #64748b;
    font-size: .68rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.restriction-sites-count.is-zero,
.restriction-uncut {
    color: #b91c1c;
    font-weight: 700;
}

.restriction-fragments-cell {
    line-height: 1.5;
    font-size: .76rem !important;
    font-variant-numeric: tabular-nums;
}

.restriction-fragments-panel .product-catalog-link {
    margin: 0 0 6px;
    font-size: .72rem;
}

.restriction-product-recommendations {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 18px;
    margin-top: 18px;
    padding: 17px 18px;
    border: 0;
    border-left: 4px solid var(--magenta);
    background: var(--brand-dark);
    color: #fff;
    font-size: .76rem;
}

.restriction-product-recommendations > span {
    color: #fff;
    font-weight: 800;
}

.restriction-product-recommendations > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.restriction-product-recommendations a {
    padding-bottom: 2px;
    border-bottom: 1px solid currentColor;
    color: #fff;
    font-weight: 800;
    text-decoration: none;
}

.restriction-product-recommendations a:hover,
.restriction-product-recommendations a:focus-visible {
    color: var(--magenta);
}

.restriction-sites-details {
    margin-top: 20px;
    padding: 14px 0 0;
    border-top: 1px solid #dbe3ec;
}

.restriction-sites-details summary {
    width: max-content;
    color: #64748b;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}

.restriction-app .seq-viewer-box {
    margin-top: 14px;
    padding: 14px 0 0 14px;
    border: 0;
    border-left: 2px solid #dbe3ec;
    border-radius: 0;
    background: transparent;
}

.restriction-app .seq-viewer-legend span {
    padding: 2px 8px;
}

.restriction-map-help {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0 0 0 52px;
    padding: 18px 0;
    border-top: 1px solid #dbe3ec;
    color: #64748b;
    font-size: .78rem;
}

.restriction-map-help a {
    color: var(--magenta);
    font-weight: 700;
    text-decoration: none;
}

.restriction-map-help a:hover,
.restriction-map-help a:focus-visible {
    color: var(--brand-dark);
}

@media (max-width: 980px) {
    .restriction-enzyme-grid,
    .restriction-gel-workspace {
        grid-template-columns: 1fr;
    }

    .restriction-fragments-panel {
        padding: 22px 0 0;
    }

    .restriction-enzyme-grid .mm-select-options {
        min-width: 100%;
    }
}

@media (max-width: 680px) {
    .pt-operation-tabs,
    .restriction-custom-enzyme {
        grid-template-columns: 1fr;
    }

    .pt-operation-tabs .tool-tab-btn {
        min-height: 48px;
    }

    .restriction-sequence-head,
    .restriction-result-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .restriction-file-action {
        align-self: flex-start;
    }

    .restriction-run-row .tool-btn-primary {
        width: 100%;
        min-width: 0;
    }

    .restriction-ladder-field {
        width: 100%;
        justify-content: space-between;
    }

    .restriction-ladder-field .mm-select-control {
        width: min(210px, 70vw);
    }

    .restriction-gel-panel {
        margin: 0 -16px;
        padding-right: 8px;
        padding-left: 8px;
    }

    .restriction-app .virtual-gel-wrapper {
        height: 350px;
        padding-left: 48px;
    }

    .restriction-fragments-panel {
        overflow-x: auto;
    }

    .restriction-fragments-panel .results-table {
        min-width: 520px;
    }

    .restriction-map-help {
        margin-left: 0;
    }
}

/* =========================================
   АНАЛИЗАТОР БЕЛКОВ: ПОСЛЕДОВАТЕЛЬНЫЙ СЦЕНАРИЙ
   ========================================= */
.protein-flow-step {
    padding-top: 28px;
    padding-bottom: 32px;
}

.protein-step-head,
.protein-subtask-head,
.protein-result-section-head,
.protein-action-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.protein-step-head {
    margin-bottom: 18px;
}

.protein-step-head h2,
.protein-subtask-head h3,
.protein-result-section h3 {
    margin: 0;
    color: var(--brand-dark);
    text-wrap: balance;
}

.protein-step-head h2 {
    font-size: 1.2rem;
}

.protein-step-head p,
.protein-subtask-head p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: .78rem;
    line-height: 1.45;
    text-wrap: pretty;
}

#protein_seq_status {
    color: #94a3b8;
    font-size: .76rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

#protein_seq_status.has-sequence {
    color: var(--magenta);
}

.protein-sequence-label,
.protein-select-field > label,
.protein-compact-field > label {
    display: block;
    margin-bottom: 7px;
    color: #64748b;
    font-size: .76rem;
    font-weight: 800;
}

.protein-select-field > label span {
    font-weight: 500;
}

.protein-sequence-input {
    min-height: 170px !important;
    resize: vertical;
    font-size: .84rem !important;
    line-height: 1.6;
}

.protein-validation-warning {
    margin-top: 10px;
    border-radius: 0;
}

.protein-case-warning {
    background: #eff6ff;
    border-color: #2563eb;
    color: #1e40af;
}

.protein-inline-action,
.protein-secondary-action {
    min-height: 40px;
    padding: 0 2px;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: transparent;
    color: var(--magenta);
    font: 800 .76rem/1 var(--font-main), sans-serif;
    cursor: pointer;
    transition-property: color, transform;
    transition-duration: .15s;
}

.protein-inline-action:hover,
.protein-inline-action:focus-visible,
.protein-secondary-action:hover,
.protein-secondary-action:focus-visible {
    color: var(--brand-dark);
}

.protein-inline-action:active,
.protein-secondary-action:active {
    transform: scale(.96);
}

.protein-translation-link {
    display: inline-block !important;
    width: auto;
    margin-top: 12px !important;
    padding: 0 0 3px !important;
    border-top: 0 !important;
    border-bottom: 1px solid currentColor;
    font-size: .75rem !important;
}

.protein-task-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 0;
    border-bottom: 0;
    overflow: visible;
}

.protein-task-tabs .tool-tab-btn {
    display: flex;
    min-height: 72px;
    margin: 0;
    padding: 11px 12px 13px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border-bottom: 1px solid #dbe3ec;
    color: #64748b;
    text-align: left;
    white-space: normal;
    transition-property: color, background-color, border-color, box-shadow;
}

.protein-task-tabs .tool-tab-btn strong {
    color: var(--brand-dark);
    font-size: .9rem;
}

.protein-task-tabs .tool-tab-btn small {
    margin-top: 4px;
    font-size: .7rem;
    line-height: 1.35;
}

.protein-task-tabs .tool-tab-btn:hover {
    border-bottom-color: #94a3b8;
}

.protein-task-tabs .tool-tab-btn.active {
    border-bottom-color: var(--magenta);
    background: #fff5fb;
    box-shadow: inset 0 -2px 0 var(--magenta);
    color: var(--brand-dark);
}

.protein-task-tabs .tool-tab-btn:focus-visible {
    outline: 2px solid var(--magenta);
    outline-offset: -2px;
}

.protein-task-pane {
    padding-top: 24px;
    animation: none;
}

.protein-action-row {
    align-items: flex-end;
    justify-content: flex-end;
    margin-bottom: 18px;
}

.protein-compact-field {
    width: 150px;
}

.protein-app .tool-input,
.protein-app .mm-select-trigger {
    min-height: 44px;
    border: 0;
    border-radius: 0;
    background: #f8fafc;
    box-shadow: inset 0 0 0 1px transparent;
    transition-property: color, background-color, box-shadow;
    transition-duration: .15s;
}

.protein-app .tool-input:hover,
.protein-app .mm-select-trigger:hover {
    background: #f1f5f9;
}

.protein-app .tool-input:focus,
.protein-app .mm-select-trigger:focus-visible,
.protein-app .mm-select-control.is-open .mm-select-trigger {
    background: #fff;
    box-shadow: inset 0 -2px 0 var(--magenta);
}

.protein-app .mm-select-trigger {
    padding: 0 12px;
    font-size: .8rem;
}

.protein-app .mm-select-options {
    min-width: max(100%, 260px);
    max-height: 330px;
}

.protein-action-row .tool-btn-primary,
.protein-subtask-head .tool-btn-primary,
.protein-cleavage-controls .tool-btn-primary {
    min-width: 230px;
    min-height: 44px;
}

.protein-result-surface:empty {
    display: none;
}

.protein-metrics-table {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin: 0 !important;
    padding: 0;
    border-left: 4px solid var(--magenta);
    background: var(--brand-dark);
    color: #fff;
}

.protein-metrics-table tbody {
    display: contents;
}

.protein-metrics-table tr {
    display: flex;
    min-width: 0;
    padding: 15px 16px;
    flex-direction: column;
    border-left: 1px solid rgba(255, 255, 255, .12);
}

.protein-metrics-table tr:first-child {
    border-left: 0;
}

.protein-metrics-table td {
    height: auto;
    padding: 0;
    border: 0;
}

.protein-metrics-table td:first-child {
    color: #cbd5e1;
    font-size: .68rem;
    font-weight: 700;
}

.protein-metrics-table td:last-child {
    margin-top: 5px;
    color: #fff;
    font-family: var(--font-main), sans-serif;
    font-size: 1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.protein-detail-results {
    margin-top: 22px;
}

.protein-result-section {
    padding: 20px 0;
    border-top: 1px solid #dbe3ec;
}

.protein-result-section h3,
.protein-subtask-head h3 {
    font-size: .96rem;
}

.protein-result-section-head {
    align-items: center;
    margin-bottom: 12px;
}

.protein-aa-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: .7rem;
    font-weight: 700;
}

.protein-app .aa-comp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0;
    margin-top: 12px;
    border-top: 1px solid #e2e8f0;
}

.protein-app .aa-comp-item {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 10px;
    border-bottom: 1px solid #e2e8f0;
    background: transparent;
    font-size: .75rem;
}

.protein-sequence-map {
    min-height: 76px;
    padding: 14px 16px;
    border-left: 3px solid #dbe3ec;
    background: #f8fafc;
    color: #475569;
    font-size: .8rem;
    line-height: 1.7;
    word-break: break-all;
}

.protein-subtask {
    padding: 0 0 26px;
}

.protein-subtask + .protein-subtask {
    padding-top: 24px;
    border-top: 1px solid #dbe3ec;
}

.protein-subtask-head {
    align-items: center;
    margin-bottom: 18px;
}

.protein-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.protein-app #protease_sites_table,
.protein-app #fragments_table {
    min-width: 720px;
    margin: 0 !important;
}

.protein-highlight-controls {
    display: grid;
    grid-template-columns: minmax(230px, 320px) minmax(0, 1fr);
    gap: 18px;
    align-items: end;
    margin: 20px 0 12px;
}

.protein-highlight-controls > span {
    padding-bottom: 7px;
    color: #64748b;
    font-size: .72rem;
    line-height: 1.45;
}

.protein-cleavage-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: 18px;
    align-items: end;
}

.protein-cleavage-results {
    margin-top: 22px;
}

.protein-result-label {
    margin-bottom: 8px;
    color: #64748b;
    font-size: .74rem;
    font-weight: 800;
}

.protein-fragments-wrap {
    max-height: 280px;
    margin-top: 14px;
    overflow: auto;
}


@media (max-width: 900px) {
    .protein-metrics-table {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .protein-metrics-table tr {
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    .protein-metrics-table tr:nth-child(-n + 2) {
        border-top: 0;
    }

    .protein-cleavage-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .protein-task-tabs,
    .protein-highlight-controls,
    .protein-cleavage-controls {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .protein-task-tabs .tool-tab-btn {
        min-height: 62px;
    }

    .protein-step-head,
    .protein-subtask-head,
    .protein-result-section-head,
    .protein-action-row {
        align-items: stretch;
        flex-direction: column;
    }

    .protein-compact-field,
    .protein-action-row .tool-btn-primary,
    .protein-subtask-head .tool-btn-primary,
    .protein-cleavage-controls .tool-btn-primary {
        width: 100%;
        min-width: 0;
    }

    .protein-metrics-table {
        grid-template-columns: 1fr;
    }

    .protein-metrics-table tr,
    .protein-metrics-table tr:nth-child(-n + 2) {
        border-top: 1px solid rgba(255, 255, 255, .12);
        border-left: 0;
    }

    .protein-metrics-table tr:first-child {
        border-top: 0;
    }
}

.tool-container-centered {
    max-width: 850px;
    margin: 0 auto;
    width: 100%;
}

.tool-app-container {
    background: var(--white);
    padding: 28px 32px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
    width: 100%;
    box-sizing: border-box;
}

.tool-section {
    margin-bottom: 22px;
}

.tool-section:not(:last-child) {
    border-bottom: 1px dashed #e2e8f0;
    padding-bottom: 18px;
}

/* =========================================
   2. ТИПОГРАФИКА И УТИЛИТЫ
   ========================================= */
.tool-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--brand-dark);
    margin: 0 0 14px 0;
}

.tool-desc, p {
    line-height: 1.6;
    margin-top: 0;
    margin-bottom: 16px;
    color: #475569;
}

.font-mono {
    font-family: var(--font-main), sans-serif;
    font-variant-numeric: tabular-nums; /* Ровные цифры в таблицах */
}

.fw-700 { font-weight: 700; }
.color-brand { color: var(--brand-dark); }
.color-slate { color: #64748b; }
.bg-disabled { background: #f1f5f9; color: #64748b; pointer-events: none; }
.text-center { text-align: center; }
.w-100 { width: 100%; }

.mt-0 { margin-top: 0; }
.mt-10 { margin-top: 10px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-25 { margin-bottom: 25px; }

/* =========================================
   3. ФОРМЫ (ИНПУТЫ, СЕЛЕКТЫ, ЛЕЙБЛЫ)
   ========================================= */
.tool-form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.tool-form-group {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 140px;
}

.tool-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 6px;
    display: block;
}

/* Единый стиль полей с защитой от обрезания текста */
.tool-input, .tool-select, .mm-input {
    height: 40px;
    line-height: 38px;
    padding: 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: var(--font-main), sans-serif;
    font-weight: 500;
    background: var(--white);
    color: var(--brand-dark);
    width: 100%;
    box-sizing: border-box;
    transition: background-color 150ms ease-out, border-color 150ms ease-out, box-shadow 150ms ease-out, color 150ms ease-out;
}

.mm-input {
    font-weight: 700;
}

.tool-input:focus, .tool-select:focus, .mm-input:focus {
    outline: none;
    border-color: var(--magenta);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--magenta) transparent 90%);
}

.tool-input.is-invalid {
    border-color: var(--color-error);
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.1);
}

textarea.tool-input {
    height: auto;
    min-height: 100px;
    line-height: 1.5;
    padding: 12px;
}

/* Сдвоенные поля (инпут + селект) */
.input-group { display: flex; width: 100%; }
.input-group-main { flex: 1; border-radius: 6px 0 0 6px; }
.input-group-select { border-radius: 0 6px 6px 0; border-left: none; background: #f8fafc; width: auto; min-width: 100px; flex-shrink: 0; }
.input-group-addon { padding: 0 12px; height: 40px; line-height: 38px; border: 1px solid #cbd5e1; border-left: none; border-radius: 0 6px 6px 0; background: #f1f5f9; color: #64748b; display: flex; align-items: center; font-size: 0.95rem; }

/* =========================================
   4. КНОПКИ
   ========================================= */
.tool-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    height: 40px;
    background: var(--brand-dark);
    color: var(--white);
    border: none;
    padding: 0 24px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background-color 150ms ease-out, box-shadow 150ms ease-out, color 150ms ease-out, transform 150ms ease-out;
    white-space: nowrap;
}

.tool-btn-primary:hover {
    background: var(--magenta);
    transform: translateY(-1px);
    box-shadow: var(--shadow-magenta-glow);
    color: var(--white);
}

.add-insert-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    height: 40px;
    background: transparent;
    color: var(--brand-dark);
    border: 1px solid #cbd5e1;
    width: 100%;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.85rem;
    transition-property: opacity, transform, visibility;
    transition-duration: 150ms, 150ms, 0s;
    transition-timing-function: ease-out, ease-out, linear;
    transition-delay: 0s, 0s, 150ms;
    margin-top: 8px;
    margin-bottom: 15px;
}

.add-insert-btn:hover {
    background: #f8fafc;
    border-color: var(--brand-dark);
}

.back-link-wrapper { margin-bottom: 15px; }
.back-link { display: inline-flex; align-items: center; color: var(--magenta); font-weight: 800; font-size: 0.85rem; text-decoration: none; text-transform: uppercase; transition: 0.2s; }
.back-link:hover { opacity: 0.7; }

/* =========================================
   5. ТАБЛИЦЫ
   ========================================= */
.mm-table, .results-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 0.9rem;
}

.mm-table th, .results-table th {
    color: #64748b;
    font-weight: 700;
    background: #f8fafc;
    text-transform: none;
    font-size: 0.78rem;
    padding: 10px 12px;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
}

.mm-table td, .results-table td {
    padding: 9px 12px;
    height: auto;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
}

.mm-total-row {
    font-weight: 800;
    background: #f8fafc;
    color: var(--brand-dark);
}

/* Компактные инпуты внутри таблиц */
.results-table input.mm-input,
.results-table select.tool-select {
    height: 34px;
    line-height: 32px;
    padding: 0 8px;
    font-size: 0.85rem;
    border-radius: 4px;
}

/* =========================================
   6. ВКЛАДКИ (TABS)
   ========================================= */
.tool-tabs {
    display: flex;
    gap: 14px;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 16px;
    overflow-x: auto;
    scrollbar-width: none;
}
.tool-tabs::-webkit-scrollbar { display: none; }

.tool-tab-btn {
    background: none;
    border: none;
    padding: 9px 4px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: border-color 150ms ease-out, color 150ms ease-out;
    white-space: nowrap;
}

.tool-tab-btn:hover { color: var(--brand-dark); }
.tool-tab-btn.active { color: var(--magenta); border-bottom-color: var(--magenta); }

.tool-tab-pane { display: none; animation: fadeIn 0.3s ease; }
.tool-tab-pane.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* =========================================
   7. УВЕДОМЛЕНИЯ И БАННЕРЫ
   ========================================= */
.validation-warning {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    background: #fef2f2;
    border-left: 4px solid var(--color-error);
    padding: 10px 15px;
    border-radius: 6px;
    margin-top: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #991b1b;
}

.validation-warning.info-mode {
    background: #f0fdfa;
    border-color: #3b82f6;
    color: #1e40af;
}

#gibson_warnings_box,
#gibson_recommendations_box,
#gibson_risk_legend,
#cloning_path_box,
#cloning_strategy_box,
#cloning_assessment_box {
    padding: 12px 16px !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}

#gibson_warnings_box strong,
#gibson_recommendations_box strong,
#gibson_risk_legend strong,
#cloning_path_box strong,
#cloning_strategy_box strong,
#cloning_assessment_box strong {
    margin-bottom: 6px !important;
}

#protease_sites_table,
#fragments_table,
#props_table {
    margin-top: 12px !important;
}

#protein_intro_grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 14px;
    align-items: start;
}

#protein_intro_card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 14px 12px;
}

#protein_intro_card_title {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--brand-dark);
    margin-bottom: 8px;
}

#protein_intro_card_list {
    font-size: 0.77rem;
    line-height: 1.55;
    color: #475569;
}

#protein_intro_card_list div + div {
    margin-top: 6px;
}

#protein_intro_link {
    display: block;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
    font-size: 0.77rem;
    line-height: 1.45;
    color: var(--magenta);
    font-weight: 800;
    text-decoration: none;
}

#protein_intro_link:hover {
    opacity: 0.8;
}

#protein_props_bar {
    display: flex;
    gap: 14px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

#protein_props_bar .tool-form-group:last-child {
    flex: 0 0 auto;
}

#protein_props_bar #btn_calc_props {
    min-width: 220px;
    height: 42px;
}

#gibson_action_row {
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

#cloning_step1_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

#cloning_step1_grid > div,
#gibson_fragments_container > div {
    border-radius: 10px;
}

.cloning-step-card {
    display: grid;
    grid-template-rows: auto auto auto auto;
    align-content: start;
}

.cloning-card-header {
    min-height: 52px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.cloning-card-header-passive {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.cloning-step-card textarea.tool-input {
    margin-bottom: 10px;
}

.cloning-enzyme-row {
    margin-top: auto;
}

#extra_insert_cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.extra-insert-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
}

.extra-insert-card-header {
    margin-bottom: 10px;
}

.extra-insert-card-title {
    margin: 0;
    font-size: 1rem;
    color: var(--magenta);
}

.cloning-topology-toggle {
    display: inline-flex;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
}

.cloning-topology-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
}

.extra-insert-card-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.extra-insert-remove {
    background: transparent;
    border: none;
    color: #64748b;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: underline;
    padding: 0;
}

.extra-insert-remove:hover {
    color: #dc2626;
}

/* Конструктор плазмид: последовательный сценарий в стилистике in silico */
.cloning-app [hidden] {
    display: none !important;
}

.cloning-flow-step .tool-flow-head {
    margin-bottom: 20px;
}

.cloning-flow-step .tool-flow-head > div > p,
.cloning-flow-copy p {
    margin: 6px 0 0;
    color: #64748b;
    font-size: .82rem;
    line-height: 1.45;
    text-wrap: pretty;
}

.cloning-flow-head-body {
    display: grid;
    grid-template-columns: minmax(250px, .72fr) minmax(500px, 1.28fr);
    gap: 32px;
    align-items: start;
    min-width: 0;
}

.cloning-sequence-head,
.cloning-run-row,
.cloning-result-actions,
.cloning-product-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cloning-file-action,
.cloning-custom-toggle,
.cloning-save-enzyme,
.cloning-download-button {
    min-height: 40px;
    padding: 0 2px;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: transparent;
    color: var(--magenta);
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.cloning-file-action {
    display: inline-flex;
    align-items: center;
}

.cloning-file-action::before {
    margin-right: 8px;
    content: '\2191';
    font-size: 1.05rem;
}

.cloning-file-action:hover,
.cloning-file-action:focus-visible,
.cloning-custom-toggle:hover,
.cloning-custom-toggle:focus-visible,
.cloning-save-enzyme:hover,
.cloning-save-enzyme:focus-visible,
.cloning-download-button:hover,
.cloning-download-button:focus-visible {
    color: var(--brand-dark);
}

.cloning-file-action:focus-visible,
.cloning-custom-toggle:focus-visible,
.cloning-save-enzyme:focus-visible,
.cloning-download-button:focus-visible {
    outline: 2px solid var(--magenta);
    outline-offset: 3px;
}

.cloning-sequence-input {
    min-height: 132px !important;
    margin-top: 8px;
    resize: vertical;
    font-size: .82rem !important;
    line-height: 1.55;
}

.cloning-enzyme-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 16px;
    padding: 14px 0 14px 16px;
    border-left: 3px solid var(--magenta);
    background: linear-gradient(90deg, #fff8fc 0, rgba(255, 248, 252, 0) 62%);
}

.cloning-enzyme-grid .tool-label {
    color: var(--brand-dark);
    font-size: .8rem;
}

.cloning-enzyme-grid .tool-label span {
    color: #94a3b8;
    font-size: .68rem;
    font-weight: 600;
}

.cloning-enzyme-grid .mm-select-control {
    width: 100%;
}

.cloning-enzyme-grid .mm-select-trigger {
    min-height: 44px;
    padding: 0 12px;
    border-bottom: 2px solid #cbd5e1;
    background: #fff;
    font-size: .82rem;
    transition-property: color, border-color, background-color, box-shadow;
}

.cloning-enzyme-grid .mm-select-trigger:hover,
.cloning-enzyme-grid .mm-select-control.is-open .mm-select-trigger {
    border-bottom-color: var(--magenta);
    background: #fff5fb;
}

.cloning-enzyme-grid .mm-select-control.has-value .mm-select-trigger {
    border-bottom-color: var(--magenta);
    background: #fff5fb;
    color: var(--brand-dark);
}

.cloning-enzyme-grid .mm-select-control.has-value .mm-select-trigger::before {
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    border-radius: 50%;
    background: var(--magenta);
    content: '';
}

.cloning-enzyme-grid .mm-select-options {
    min-width: 330px;
    max-height: 340px;
}

.cloning-enzyme-grid-compact {
    margin-top: -8px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.cloning-topology-options,
.cloning-topology-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.cloning-topology-option {
    position: relative;
    min-width: 0;
    cursor: pointer;
}

.cloning-topology-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.cloning-topology-copy {
    display: flex;
    min-height: 62px;
    padding: 10px 12px 12px;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid #dbe3ec;
    background: transparent !important;
    color: #64748b !important;
    box-shadow: none !important;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.cloning-topology-copy strong {
    color: var(--brand-dark);
    font-size: .92rem;
}

.cloning-topology-copy small {
    margin-top: 3px;
    font-size: .72rem;
}

.cloning-topology-option:hover .cloning-topology-copy {
    border-bottom-color: #94a3b8;
}

.cloning-topology-option input:checked + .cloning-topology-copy {
    border-bottom-color: var(--magenta);
    background: #fff5fb !important;
    box-shadow: inset 0 -2px 0 var(--magenta) !important;
    color: var(--brand-dark) !important;
}

.cloning-topology-option input:focus-visible + .cloning-topology-copy {
    outline: 2px solid var(--magenta);
    outline-offset: -2px;
}

.cloning-insert-sequence-head {
    margin-top: 22px;
}

.cloning-custom-toggle {
    margin-top: -4px;
}

.cloning-custom-enzyme {
    display: grid;
    grid-template-columns: minmax(150px, .7fr) minmax(280px, 1.5fr) auto;
    grid-column: 1 / -1;
    gap: 16px;
    align-items: end;
    margin-top: 12px;
    padding: 16px 0;
    border-top: 1px solid #dbe3ec;
    border-bottom: 1px solid #dbe3ec;
}

.cloning-custom-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cloning-cancel-enzyme {
    min-height: 40px;
    padding: 0 2px;
    border: 0;
    background: transparent;
    color: #64748b;
    font: 700 .78rem/1 var(--font-main), sans-serif;
    cursor: pointer;
}

.cloning-cancel-enzyme:hover,
.cloning-cancel-enzyme:focus-visible {
    color: var(--brand-dark);
}

.cloning-enzyme-grid .mm-select-option.is-action {
    margin-top: 4px;
    border-top: 1px solid #dbe3ec;
    border-radius: 0;
    color: var(--magenta);
    font-weight: 800;
}

.cloning-enzyme-grid .mm-select-option.is-action:hover,
.cloning-enzyme-grid .mm-select-option.is-action:focus-visible {
    background: #fff5fb;
    color: var(--brand-dark);
}

.cloning-run-row {
    justify-content: flex-end;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #dbe3ec;
}

.cloning-run-row .tool-btn-primary {
    min-width: 280px;
    min-height: 46px;
}

.cloning-run-row .tool-btn-primary:active,
.cloning-fragments-panel #btn_ligate:active {
    transform: scale(.96);
}

.cloning-app .add-insert-btn {
    width: auto;
    height: auto;
    margin: 16px 0 0;
    padding: 7px 2px;
    border: 0;
    border-bottom: 1px solid currentColor;
    border-radius: 0;
    color: var(--magenta);
}

.cloning-app .add-insert-btn:hover {
    border-color: var(--brand-dark);
    background: transparent;
    color: var(--brand-dark);
}

.cloning-app #extra_insert_cards {
    gap: 0;
    margin-top: 24px;
}

.cloning-app .extra-insert-card {
    padding: 22px 0;
    border: 0;
    border-top: 1px solid #dbe3ec;
    border-radius: 0;
    background: transparent;
}

.cloning-app .extra-insert-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 16px;
}

.cloning-app .extra-insert-card-title {
    margin: 11px 0 0;
    color: var(--brand-dark);
    font-size: .92rem;
}

.cloning-app .cloning-topology-toggle {
    width: min(560px, 65%);
}

.cloning-app .cloning-topology-toggle .cloning-topology-copy {
    min-height: 46px;
}

.extra-insert-file-action {
    margin-bottom: 4px;
}

.cloning-app .extra-insert-card-actions {
    margin-top: 10px;
}

.cloning-app .extra-insert-remove {
    padding: 5px 0;
    border-bottom: 1px solid currentColor;
    text-decoration: none;
}

.cloning-digest-result {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #dbe3ec;
}

.cloning-result-intro h3 {
    margin: 0;
    color: var(--brand-dark);
    font-size: 1rem;
}

.cloning-result-intro p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: .78rem;
}

.cloning-gel-workspace {
    display: grid;
    grid-template-columns: minmax(350px, .9fr) minmax(360px, 1.1fr);
    gap: 24px;
    align-items: stretch;
}

.cloning-gel-panel {
    min-width: 0;
    padding: 18px 18px 14px;
    border-left: 4px solid var(--magenta);
    background: var(--brand-dark);
    color: #fff;
}

.cloning-gel-panel > p {
    margin: 12px 0 0;
    color: #cbd5e1;
    font-size: .7rem;
    line-height: 1.45;
}

.cloning-app #cloning_gel_container {
    width: 100%;
    min-width: 0;
    height: 420px;
    padding: 42px 18px 20px 54px;
    border: 0;
    border-radius: 0;
    background: #0b0e19;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, .35);
}

.cloning-app #cloning_gel_container .gel-lane {
    border-color: rgba(255, 255, 255, .07);
    background: rgba(255, 255, 255, .025);
}

.cloning-app #cloning_gel_container .gel-lane-title,
.cloning-app #cloning_gel_container .gel-band-label {
    color: #cbd5e1;
}

.cloning-app #cloning_gel_container .gel-band {
    background: #f8fafc;
    box-shadow: 0 0 7px rgba(255, 255, 255, .55);
}

.cloning-app #cloning_gel_container .gel-band.marker {
    background: var(--magenta);
}

.cloning-fragments-panel {
    display: flex;
    min-width: 0;
    padding: 0;
    flex-direction: column;
    gap: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.cloning-fragment-group {
    padding: 0 0 18px;
    border-bottom: 1px solid #dbe3ec;
}

.cloning-insert-fragment-groups {
    display: flex;
    flex-direction: column;
}

.cloning-insert-fragment-groups .cloning-fragment-group {
    padding-top: 18px;
}

.cloning-fragment-group h4 {
    margin: 0 0 10px;
    color: var(--brand-dark);
    font-size: .86rem;
}

.cloning-insert-fragments h4 {
    color: var(--magenta);
}

.cloning-fragment-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cloning-fragment-option {
    padding: 9px 10px 10px;
    border-left: 3px solid transparent;
    border-bottom: 1px solid #e2e8f0;
    background: transparent;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}

.cloning-fragment-option:hover {
    border-left-color: #94a3b8;
    background: #f8fafc;
}

.cloning-fragment-option.is-selected-backbone {
    border-left-color: var(--magenta);
    background: #fff5fb;
}

.cloning-fragment-option.is-selected-insert {
    border-left-color: #2563eb;
    background: #eff6ff;
}

.cloning-fragments-panel #btn_ligate {
    align-self: flex-end;
    min-width: 300px;
    min-height: 46px;
    margin-top: 20px;
}

.cloning-fragments-panel #btn_ligate:disabled {
    cursor: not-allowed;
    opacity: .48;
}

.cloning-assessment {
    margin-bottom: 18px;
    padding: 15px 18px;
    border-left: 4px solid #2563eb;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: .82rem;
    line-height: 1.55;
}

.cloning-result-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.cloning-result-toolbar > p {
    margin: 0;
    color: #64748b;
    font-size: .74rem;
}

.cloning-sequence-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: .8rem;
}

.cloning-sequence-viewer {
    height: 360px;
    min-height: 220px;
    max-height: 720px;
    padding: 16px;
    overflow-y: auto;
    resize: vertical;
    border: 1px solid #dbe3ec;
    background: #fff;
    font-size: .84rem;
    line-height: 1.65;
    word-break: break-all;
}

.cloning-translation-output {
    margin-top: 14px;
    padding: 15px 18px;
    border-left: 4px solid #059669;
    background: #f0fdf4;
}

.cloning-translation-output h4 {
    margin: 0 0 5px;
    color: #166534;
    font-size: .86rem;
}

.cloning-translation-output #translation_text {
    color: #14532d;
    font-size: .82rem;
    line-height: 1.45;
    word-break: break-all;
}

.cloning-result-actions {
    justify-content: flex-end;
    margin: 18px 0;
}

.cloning-download-button::before {
    margin-right: 8px;
    content: '\2193';
}

.cloning-product-strip {
    display: flex;
    padding: 18px;
    border-left: 4px solid var(--magenta);
    background: var(--brand-dark);
    color: #fff;
}

.cloning-product-strip h4,
.cloning-product-strip p {
    margin: 0;
}

.cloning-product-strip h4 {
    color: #fff;
    font-size: .9rem;
}

.cloning-product-strip p,
.cloning-product-empty {
    margin-top: 4px;
    color: #cbd5e1;
    font-size: .73rem;
    line-height: 1.45;
}

.cloning-product-strip > div,
.cloning-product-content {
    width: 100%;
}

.cloning-product-head {
    align-items: flex-start;
}

.cloning-product-head > a,
.cloning-product-strip > a,
.cloning-ligase-link {
    flex: 0 0 auto;
    color: #fff;
    font-size: .8rem;
    font-weight: 800;
    text-decoration: none;
}

.cloning-product-head > a:hover,
.cloning-product-strip > a:hover,
.cloning-ligase-link:hover {
    color: #f9a8d4;
}

.cloning-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.cloning-product-link {
    display: block;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    text-decoration: none;
}

.cloning-product-link:hover {
    border-color: var(--magenta);
    background: rgba(255, 255, 255, .05);
}

.cloning-product-link strong,
.cloning-product-link span {
    display: block;
}

.cloning-product-link strong {
    font-size: .8rem;
}

.cloning-product-link span {
    margin-top: 3px;
    color: #cbd5e1;
    font-size: .7rem;
    line-height: 1.4;
}

@media (max-width: 900px) {
    .cloning-flow-head-body {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .cloning-enzyme-grid-compact {
        margin-top: 0;
    }

    .cloning-gel-workspace {
        grid-template-columns: 1fr;
    }

    .cloning-app .extra-insert-card-header {
        flex-direction: column;
    }

    .cloning-app .cloning-topology-toggle {
        width: 100%;
    }
}

@media (max-width: 680px) {
    .cloning-topology-options,
    .cloning-topology-toggle,
    .cloning-enzyme-grid,
    .cloning-custom-enzyme {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .cloning-sequence-head,
    .cloning-result-toolbar,
    .cloning-product-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .cloning-file-action {
        align-self: flex-start;
    }

    .cloning-run-row .tool-btn-primary,
    .cloning-fragments-panel #btn_ligate {
        width: 100%;
        min-width: 0;
    }

    .cloning-app #cloning_gel_container {
        height: 370px;
        padding-left: 48px;
    }
}

@media (max-width: 820px) {
    .cloning-topology-toggle {
        width: 100%;
        justify-content: stretch;
    }

    .cloning-topology-toggle label {
        flex: 1 1 0;
    }

    .cloning-topology-chip {
        width: 100%;
    }
}

.integrated-promo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: linear-gradient(135deg, #fef5ff 0%, #ffffff 100%);
    border: 1px solid rgba(236, 0, 140, 0.15);
    border-left: 4px solid var(--magenta);
    padding: 20px 25px;
    border-radius: 8px;
    margin-top: 30px;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    #protein_intro_grid,
    #cloning_step1_grid {
        grid-template-columns: 1fr;
    }

    #protein_props_bar #btn_calc_props {
        min-width: 0;
        width: 100%;
    }
}

.integrated-promo-content h4 {
    margin: 0 0 5px 0;
    color: var(--brand-dark);
    font-size: 1.05rem;
    font-weight: 800;
}

.integrated-promo-content p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-main);
}

.integrated-promo .tool-btn-primary { margin: 0; }

/* =========================================
   8. СПЕЦИФИЧНЫЕ МОДУЛИ
   ========================================= */

/* Панель экспорта */
.export-bar {
    display: flex;
    gap: 15px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px dashed #e2e8f0;
    justify-content: flex-end;
}

.btn-export {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    height: 40px;
    background: #f8fafc;
    color: var(--brand-dark);
    border: 1px solid #cbd5e1;
    padding: 0 16px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: 0.2s ease;
}

.btn-export:hover {
    background: #e2e8f0;
    border-color: var(--brand-dark);
}

/* Лигирование */
.form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: end;
}

.optional-badge {
    background: #e2e8f0;
    color: #64748b;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    margin-left: 5px;
    vertical-align: middle;
    text-transform: uppercase;
    font-weight: 800;
}

.insert-row-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    transition: border-color 0.2s ease;
}

.insert-row-card:hover { border-color: var(--brand-dark); }

.insert-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px dashed #e2e8f0;
    padding-bottom: 10px;
}

.insert-row-card .remove-insert-btn {
    position: static;
    background: #fef2f2;
    color: #ef4444;
    border: none;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    transition: 0.2s;
}

.insert-row-card .remove-insert-btn:hover {
    background: #ef4444;
    color: #fff;
}

/* Анализатор белков */
.aa-acidic { color: #ef4444; font-weight: 700; }
.aa-basic { color: #3b82f6; font-weight: 700; }
.aa-polar { color: #10b981; font-weight: 700; }
.aa-nonpolar { color: #64748b; font-weight: 700; }

.aa-comp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.aa-comp-item {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

.aa-comp-item span:last-child { color: var(--brand-dark); }

/* Хаб инструментов (Главная) */
/* =========================================
   ГЛАВНАЯ СТРАНИЦА ТУЛОВ (ХАБ) - 4 КОЛОНКИ
   ========================================= */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 колонки для широких экранов */
    gap: 20px;
    margin-top: 30px;
}

/* =========================================
   АДАПТИВ (MEDIA QUERIES)
   ========================================= */
/* Планшеты (горизонтально) и небольшие ноутбуки: 3 колонки */
@media (max-width: 1100px) {
    .tools-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Планшеты (вертикально): 2 колонки */
@media (max-width: 850px) {
    .tools-grid { grid-template-columns: repeat(2, 1fr); }
    .mw-purity-row, .form-grid-3 { grid-template-columns: 1fr; gap: 15px; }
    .integrated-promo { flex-direction: column; align-items: stretch; text-align: center; }
}

/* Мобильные телефоны: 1 колонка */
@media (max-width: 550px) {
    .tools-grid { grid-template-columns: 1fr; }
}

.tool-card {
    background: var(--white);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 25px;
    text-decoration: none;
    color: inherit;
    transition: border-color 180ms ease-out, box-shadow 180ms ease-out, transform 180ms ease-out;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
}

.tool-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
    border-color: var(--magenta);
}

.tool-icon {
    width: 6rem;         /* Фиксируем аккуратный размер */
    height: 6rem;
    margin-bottom: 20px; /* Отступ до заголовка */
    align-self: center;  /* Выравнивает только иконку по центру карточки */
    display: block;      /* На всякий случай, если flex отключится */
}
.tool-card .tool-title { font-size: 1.25rem; margin-bottom: 10px; }
.tool-card .tool-desc { font-size: 0.95rem; color: #64748b; margin: 0; }

/* =========================================
   9. АДАПТИВ (MEDIA QUERIES)
   ========================================= */
@media (max-width: 768px) {
    .mw-purity-row, .form-grid-3 { grid-template-columns: 1fr; gap: 15px; }
    .integrated-promo { flex-direction: column; align-items: stretch; text-align: center; }
}

@media print {
    body { background: var(--white); }
    #header-placeholder, #footer-placeholder, .site-header, .site-footer, aside,
    .tool-breadcrumbs, .back-link-wrapper, button, .integrated-promo, .export-bar {
        display: none !important;
    }
    .tool-app-container { box-shadow: none; border: none; padding: 0; }
}
/* --- ИСПРАВЛЕНИЕ ВЕРСТКИ ДЛЯ ПОДСКАЗОК --- */
.tool-form-group {
    position: relative; /* Обязательно для абсолютного позиционирования подсказки внутри */
}

.formula-hint-wrapper {
    position: absolute;
    top: 100%; /* Вешаем ровно под полем ввода */
    left: 0;
    width: 100%;
    z-index: 5;
}

.formula-hint {
    margin-top: 4px;
    font-size: 0.85rem;
    color: var(--magenta);
    font-weight: 600;
    display: none;
}
/* =========================================
   10. КАСТОМНЫЕ МОДАЛЬНЫЕ ОКНА
   ========================================= */
.cf-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px); /* Эффект стекла */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.cf-modal-box {
    background: var(--white);
    width: 100%;
    max-width: 420px;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    text-align: center;
    animation: scaleUp 0.2s ease;
    margin: 20px;
    box-sizing: border-box;
}

.cf-modal-title {
    margin: 0 0 10px 0;
    color: var(--brand-dark);
    font-size: 1.25rem;
    font-weight: 800;
}

.cf-modal-text {
    margin: 0 0 25px 0;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.5;
}

.cf-modal-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
}

@keyframes scaleUp {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
dialog::backdrop {
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
}
/* =========================================
   11. ИДЕАЛЬНЫЕ КАСТОМНЫЕ МОДАЛКИ
   ========================================= */
.cf-custom-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    z-index: 999999; /* Поверх всего сайта */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.cf-custom-overlay.active {
    opacity: 1;
    visibility: visible;
}

.cf-custom-modal {
    background: var(--white);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-sizing: border-box;
    /* Анимация "выплывания" снизу вверх */
    transform: scale(0.95) translateY(15px);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cf-custom-overlay.active .cf-custom-modal {
    transform: scale(1) translateY(0);
}

/* =========================================
   12. ВИРТУАЛЬНЫЙ ЭЛЕКТРОФОРЕЗ (ГЕЛЬ) И ВЕРСТКА
   ========================================= */
.gel-workspace {
    display: flex;
    gap: 30px; /* Увеличили зазор между гелем и таблицей */
    margin-top: 20px;
    align-items: flex-start;
}

@media (max-width: 900px) {
    .gel-workspace { flex-direction: column; }
}

.virtual-gel-wrapper {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 40px 20px 20px 55px;
    display: flex;
    justify-content: center;
    gap: 15px; /* Сделали дорожки ближе друг к другу */
    height: 420px;
    flex: 5.5; /* ИДЕАЛЬНАЯ ПРОПОРЦИЯ: ~55% */
    min-width: 320px;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.03);
    overflow-x: auto;
    position: relative;
    box-sizing: border-box;
}

.gel-results-table {
    flex: 4.5; /* ИДЕАЛЬНАЯ ПРОПОРЦИЯ: ~45% */
    min-width: 300px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 15px 20px; /* Обернули таблицу в красивую карточку */
    box-sizing: border-box;
}

/* Компактные ячейки для длинных списков */
.gel-results-table .results-table td {
    padding: 10px 12px;
    height: auto; /* Убрали растягивание строк по высоте */
    vertical-align: top; /* Выравнивание по верхнему краю */
}

.gel-lane {
    flex: 0 0 45px; /* Дорожки стали еще чуть изящнее */
    height: 100%;
    position: relative;
    border-left: 1px solid #f1f5f9;
    border-right: 1px solid #f1f5f9;
    background: #fdfdfd;
}

.gel-lane-title {
    color: var(--brand-dark);
    font-size: 0.75rem;
    font-weight: 800;
    text-align: center;
    position: absolute;
    top: -25px;
    width: 100%;
    white-space: nowrap;
}

.gel-band {
    width: 70%;
    height: 3px;
    background: #0f172a;
    border-radius: 1px;
    position: absolute;
    left: 15%;
    opacity: 0.85;
    transition: opacity 180ms ease-out, transform 180ms ease-out;
}

.gel-band.marker {
    background: var(--magenta);
    opacity: 0.6;
}

.gel-band-label {
    position: absolute;
    right: 110%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.65rem;
    color: #94a3b8;
    font-weight: 600;
    font-family: var(--font-main), sans-serif;
    letter-spacing: -0.5px;
}

/* =========================================
   13. ПОДСВЕТКА ПОСЛЕДОВАТЕЛЬНОСТИ ДНК
   ========================================= */
.seq-viewer-box {
    display: none; /* Скрыто до расчета */
    margin-top: 15px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 15px;
}

.seq-viewer-legend {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
    font-size: 0.8rem;
    font-weight: 700;
}

.seq-viewer-content {
    max-height: 200px;
    overflow-y: auto;
    font-size: 0.85rem;
    line-height: 1.6;
    word-break: break-all;
    color: #475569;
}

/* 3 фирменных цвета для ферментов */
.hl-enz1 { background: #fdf2f8; color: #db2777; font-weight: 800; border-bottom: 2px solid #db2777; }
.hl-enz2 { background: #eff6ff; color: #2563eb; font-weight: 800; border-bottom: 2px solid #2563eb; }
.hl-enz3 { background: #ecfdf5; color: #059669; font-weight: 800; border-bottom: 2px solid #059669; }

/* Ссылки и бейджи (Этап 4) */
.product-catalog-link {
    color: var(--magenta);
    font-weight: 700;
    text-decoration: none;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
    transition: color 150ms ease-out, transform 150ms ease-out;
}
.product-catalog-link:hover { color: var(--brand-dark); transform: translateX(2px); }
.badge-instock {
    display: inline-block; font-size: 0.7rem; font-weight: 800;
    color: #10b981; background: #ecfdf5; padding: 2px 6px; border-radius: 4px;
    text-transform: uppercase; margin-bottom: 4px;
}
/* =========================================
   14. ССЫЛКИ НА КАТАЛОГ И МАРКЕРЫ НАЛИЧИЯ
   ========================================= */
.product-catalog-link {
    color: var(--magenta);
    font-weight: 700;
    text-decoration: none;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
    transition: color 150ms ease-out, transform 150ms ease-out;
}

.product-catalog-link:hover {
    color: var(--brand-dark);
    transform: translateX(2px); /* Ссылка мягко сдвигается вправо при наведении */
}

/* Строгий текстовый бэйджик для таблицы (альтернатива кнопке) */
.badge-instock {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    color: #10b981; /* Приятный зеленый цвет */
    background: #ecfdf5;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
/* =========================================
   14. ИНТЕРАКТИВНОЕ КЛОНИРОВАНИЕ (ДОПОЛНЕНИЯ)
   ========================================= */
.gel-lane .gel-band[data-selectable] {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.gel-lane .gel-band[data-selectable]:hover {
    transform: scaleX(1.15);
    box-shadow: 0 0 8px rgba(15, 23, 42, 0.6);
}

/* Эффект выбранной полоски на инвертированном геле (яркое маджентовое выделение) */
.gel-lane .gel-band.selected-backbone {
    background: #db2777 !important;
    box-shadow: 0 0 10px rgba(219, 39, 119, 0.8) !important;
    height: 5px !important;
    opacity: 1 !important;
    z-index: 10;
}

.gel-lane .gel-band.selected-insert {
    background: #2563eb !important;
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.8) !important;
    height: 5px !important;
    opacity: 1 !important;
    z-index: 10;
}
/* =========================================
   15. КАСТОМНЫЕ ДИАЛОГОВЫЕ ОКНА (АЛЕРТЫ)
   ========================================= */
.cf-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 150ms ease-out, visibility 150ms ease-out;
}

.cf-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.cf-modal-box {
    background: #ffffff;
    border-radius: 8px;
    width: 90%;
    max-width: 400px;
    padding: 24px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    transform: translateY(20px);
    transition: transform 0.2s ease;
    border-top: 4px solid var(--brand-dark);
}

.cf-modal-overlay.active .cf-modal-box {
    transform: translateY(0);
}

.cf-modal-title {
    font-size: 1.15rem;
    color: var(--brand-dark);
    font-weight: 800;
    margin-top: 0;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cf-modal-text {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.5;
    margin-bottom: 24px;
}

.cf-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.cf-btn-cancel {
    background: #f1f5f9;
    color: #475569;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 150ms ease-out, color 150ms ease-out;
}

.cf-btn-cancel:hover {
    background: #e2e8f0;
}
/* =========================================
   16. СБОРКА ГИБСОНА (ПРОФЕССИОНАЛЬНАЯ ВЕРСТКА)
   ========================================= */
.gibson-actions-row {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.btn-csv {
    background: var(--magenta) !important;
}

.btn-fasta {
    background: var(--brand-dark) !important;
}

.cf-bundle-card {
    background: linear-gradient(135deg, #fef5ff 0%, #ffffff 100%);
    border: 1px solid rgba(236, 0, 140, 0.15);
    border-left: 4px solid var(--magenta);
    padding: 18px 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.cf-bundle-text {
    flex: 1;
    min-width: 250px;
}

.cf-bundle-text h4 {
    margin: 0 0 6px 0;
    color: var(--brand-dark);
    font-weight: 800;
    font-size: 0.95rem;
}

.cf-bundle-text p {
    margin: 0;
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.5;
}

.cf-bundle-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.btn-tag-catalog {
    background: #fff !important;
    color: var(--magenta) !important;
    border: 1px solid var(--magenta) !important;
    padding: 0 15px !important;
    height: 32px !important;
    font-size: 0.75rem !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-tag-disabled {
    background: #f8fafc !important;
    color: #94a3b8 !important;
    border: 1px dashed #cbd5e1 !important;
    padding: 0 15px !important;
    height: 32px !important;
    font-size: 0.75rem !important;
    text-decoration: none;
    cursor: not-allowed;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* =========================================
   ВИЗУАЛИЗАЦИЯ ДИМЕРОВ (ИНТЕГРАЦИЯ)
   ========================================= */
.struct-svg {
    display: block;
    min-width: 100%;
    height: 98px;
    user-select: none;
}

.struct-svg .base-text {
    font-family: var(--font-main), monospace;
    font-size: 14px;
    font-weight: 700;
    fill: var(--brand-dark);
    text-anchor: middle;
    dominant-baseline: central;
}

.struct-svg .bond-line {
    stroke: var(--magenta);
    stroke-width: 2.5;
    stroke-linecap: round;
}

.struct-svg .bond-line-secondary {
    stroke: var(--magenta);
    stroke-width: 2;
    opacity: 0.35;
    stroke-linecap: round;
}

.struct-svg .backbone {
    fill: none;
    stroke: #cbd5e1;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.struct-svg .end-label {
    fill: #64748b;
    font-size: 11px;
    font-weight: 800;
    font-family: var(--font-main), sans-serif;
    text-anchor: middle;
    dominant-baseline: central;
}
/* Дополнение для петель шпилек ДНК */
.struct-svg .loop-arc {
    fill: none;
    stroke: #94a3b8;
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
    opacity: 0.7;
}
/* =========================================
   ТРЕХКОЛОНОЧНЫЙ ИНТЕРФЕЙС АНАЛИЗА ПРАЙМЕРОВ
   ========================================= */
.tm-results-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* КРИТИЧНО: minmax(0, 1fr) запрещает колонке растягиваться */
    gap: 20px;
    align-items: flex-start;
    margin-top: 15px;
}

.tm-column {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    box-sizing: border-box;
    min-width: 0; /* КРИТИЧНО: позволяет карточке сжиматься */
}

.tm-column-title {
    font-size: 0.8rem;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid #cbd5e1;
    text-align: center;
}

.tm-column-title.highlight {
    color: var(--magenta);
}

@media (max-width: 960px) {
    .tm-results-columns {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}
/* =========================================
   КАСТОМНЫЙ СТИЛЬ ДЛЯ СЕЛЕКТОВ
   ========================================= */
select.tool-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--white);
    /* Кастомная SVG-стрелочка темного цвета (brand-dark) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2315192b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    padding-right: 36px;
    cursor: pointer;
    /* Принудительно заставляем браузер использовать шрифт сайта */
    font-family: var(--font-main), sans-serif !important;
}

/* При фокусе красим стрелочку в мадженту */
select.tool-select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ec008c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Стилизация выпадающего списка опций */
select.tool-select option {
    font-family: var(--font-main), sans-serif !important;
    font-weight: 500;
}
/* --- ВОЗДУШНЫЙ КАСТОМНЫЙ СЕЛЕКТ --- */
.custom-select-container {
    position: relative;
    width: 100%;
    /* Наследуем твой новый красивый шрифт */
    font-family: 'Futura', sans-serif;
}

/* Скрываем системный уродец */
.custom-select-container select {
    display: none;
}

/* Кнопка, на которую мы кликаем */
.airy-select-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    color: var(--brand-dark);
    cursor: pointer;
    transition: background-color 150ms ease-out, border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.airy-select-trigger:hover {
    border-color: #cbd5e1;
}

/* Состояние при открытом меню */
.airy-select-trigger.open {
    border-color: var(--magenta);
    box-shadow: 0 0 0 3px rgba(232, 45, 137, 0.1);
}

/* Кастомная стрелочка */
.airy-arrow {
    width: 12px;
    height: 12px;
    stroke: var(--magenta);
    stroke-width: 2.5;
    fill: none;
    transition: transform 0.3s ease;
}

.airy-select-trigger.open .airy-arrow {
    transform: rotate(180deg);
}

/* Выпадающий список */
.airy-options {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
    z-index: 100;
    overflow: hidden;
}

.airy-options.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

/* Варианты выбора */
.airy-option {
    padding: 14px 18px;
    font-size: 1rem;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.airy-option:not(:last-child) {
    border-bottom: 1px solid #f1f5f9;
}

.airy-option:hover {
    background: #f8fafc;
    color: var(--magenta);
}

/* Подсветка выбранного пункта */
.airy-option.selected {
    font-weight: 600;
    color: var(--brand-dark);
    background: #f1f5f9;
}

/* =========================================
   ПЛОСКИЙ ЯЗЫК СЛОЖНЫХ ИНСТРУМЕНТОВ
   ========================================= */
.tool-app-flat {
    max-width: 1160px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.tool-app-flat .tool-hero {
    max-width: 820px;
    margin: 4px 0 30px 52px;
}

.tool-app-flat .tool-title {
    margin-bottom: 8px;
    font-size: 1.65rem;
    text-wrap: balance;
}

.tool-app-flat .tool-desc {
    margin: 0;
    font-size: .96rem;
    text-wrap: pretty;
}

.tool-app-flat .tool-section:not(:last-child) {
    border-bottom-style: solid;
}

.tool-app-flat .tool-btn-primary {
    transition-property: color, background-color, border-color, transform, box-shadow;
}

.cloning-app .cloning-step-card,
.gibson-app .gibson-fragment-box {
    padding: 16px 0 18px !important;
    border: 0 !important;
    border-top: 1px solid #dbe3ec !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.cloning-app .cloning-step-card:first-child,
.gibson-app .gibson-fragment-box:first-child {
    border-top: 0 !important;
}

.protein-app #protein_intro_card {
    padding: 12px 0 12px 14px;
    border: 0;
    border-left: 2px solid #dbe3ec;
    border-radius: 0;
    background: transparent;
}

.lig-vector-section,
.tm-settings-section {
    margin-bottom: 26px !important;
    padding: 18px 0 22px !important;
    border: 0 !important;
    border-bottom: 1px solid #dbe3ec !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.molarity-app #custom_save_block {
    padding: 14px 0 !important;
    border: 0 !important;
    border-top: 1px solid #dbe3ec !important;
    border-bottom: 1px solid #dbe3ec !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.ligation-app .insert-row-card {
    padding: 16px 0 18px;
    border: 0;
    border-top: 1px solid #dbe3ec;
    border-radius: 0;
    background: transparent;
    box-shadow: none !important;
}

.tool-flow-step {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    padding: 28px 0 32px;
    border-top: 1px solid #dbe3ec;
}

.tool-flow-head {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: start;
    margin-bottom: 24px;
}

.tool-flow-number {
    margin-top: -2px;
    color: var(--magenta);
    font-size: 1.22rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.tool-flow-number::before {
    color: #cbd5e1;
    content: '0';
}

.tool-flow-index {
    margin-top: -2px;
    color: var(--magenta);
    font-size: 1.22rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.tool-flow-index::first-letter {
    color: #cbd5e1;
}

.tool-flow-head h2 {
    margin: 0;
    color: var(--brand-dark);
    font-size: 1.08rem;
    text-wrap: balance;
}

.tool-flow-content {
    grid-column: 2;
    min-width: 0;
}

.tool-tabs-quiet {
    gap: 28px;
    margin-bottom: 22px;
    border-bottom-width: 1px;
}

.tool-tabs-quiet .tool-tab-btn {
    flex: 1 1 240px;
    padding: 10px 0 11px;
    color: var(--brand-dark);
    font-size: .96rem;
    text-align: left;
    transition-property: color, border-color;
}

.tool-tab-pane {
    animation: none;
}

.pt-input-grid {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.pt-frame-field {
    align-self: start;
}

.pt-sequence-input {
    min-height: 116px !important;
}

.tool-example-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 12px;
    align-items: center;
    margin-top: 10px;
    color: #64748b;
    font-size: .76rem;
}

.tool-example-actions button {
    min-height: 30px;
    padding: 0 0 2px;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: transparent;
    color: var(--magenta);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.tool-example-actions button:hover,
.tool-example-actions button:focus-visible {
    color: var(--brand-dark);
}

.tool-primary-action-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #dbe3ec;
}

.tool-primary-action-row .tool-btn-primary {
    min-width: 300px;
    height: 44px;
}

.pt-convert-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #dbe3ec;
}

.tool-inline-result {
    margin-top: 22px;
    padding: 18px 0 0 14px;
    border-left: 3px solid var(--magenta);
}

.tool-sequence-output {
    min-height: 54px;
    padding: 10px 0;
    color: var(--brand-dark);
    line-height: 1.55;
    word-break: break-all;
}

.tool-result-meta-line {
    padding-top: 8px;
    border-top: 1px solid #e2e8f0;
    color: #64748b;
    font-size: .76rem;
    line-height: 1.55;
}

.tool-learning-details {
    margin: 0 0 0 52px;
    padding: 18px 0;
    border-top: 1px solid #dbe3ec;
    color: #64748b;
    font-size: .78rem;
}

.tool-learning-details summary {
    width: max-content;
    color: #64748b;
    font-weight: 700;
    cursor: pointer;
}

.tool-learning-content {
    max-width: 900px;
    padding: 14px 0 0 14px;
    border-left: 2px solid var(--magenta);
}

.tool-learning-content p {
    margin-bottom: 12px;
    font-size: inherit;
}

.tool-learning-content dl {
    display: grid;
    gap: 10px;
    margin: 0;
}

.tool-learning-content dt {
    color: var(--brand-dark);
    font-weight: 800;
}

.tool-learning-content dd {
    margin: 3px 0 0;
    line-height: 1.55;
}

.tool-learning-content a {
    color: var(--magenta);
    font-weight: 700;
}

.kld-mode-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 28px;
}

.kld-mode-tab,
.kld-tm-tab {
    min-height: 42px;
    padding: 0;
    border: 0;
    border-bottom: 2px solid #dbe3ec;
    background: transparent;
    color: var(--brand-dark);
    font: 700 .9rem/1.2 var(--font-main), sans-serif;
    text-align: left;
    cursor: pointer;
    transition-property: color, border-color;
    transition-duration: .15s;
}

.kld-mode-tab:hover,
.kld-mode-tab.is-active,
.kld-tm-tab:hover,
.kld-tm-tab.is-active {
    border-bottom-color: var(--magenta);
    color: var(--magenta);
}

.kld-mode-tab:focus-visible,
.kld-tm-tab:focus-visible {
    outline: 2px solid var(--magenta);
    outline-offset: 3px;
}

.kld-setup-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(250px, .85fr);
    gap: 26px;
    align-items: start;
}

.kld-field-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
}

.kld-field-head .tool-label {
    margin: 0;
}

.tool-file-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    background: #fff;
    color: var(--brand-dark);
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    transition-property: color, border-color, background-color;
    transition-duration: .15s;
}

.tool-file-action:hover {
    border-color: var(--magenta);
    color: var(--magenta);
}

.kld-plasmid-input {
    min-height: 150px !important;
    font-size: .82rem !important;
}

.kld-sequence-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    color: #64748b;
    font-size: .76rem;
}

.kld-sequence-meta strong {
    font-variant-numeric: tabular-nums;
}

.kld-parameters-panel {
    padding-left: 24px;
    border-left: 1px solid #dbe3ec;
}

.kld-tm-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 22px;
}

.kld-tm-tab {
    min-height: 36px;
    text-align: center;
}

.kld-help {
    margin-top: 8px;
    color: #64748b;
    font-size: .76rem;
    line-height: 1.45;
}

.kld-mutation-panel {
    margin-top: 28px;
    padding: 20px 0 0;
    border-top: 1px solid #dbe3ec;
}

.kld-mutation-panel h3,
.kld-result-block h3,
.kld-table-section h3,
.kld-product-strip h3 {
    margin: 0 0 12px;
    color: var(--brand-dark);
    font-size: .96rem;
}

.kld-result-heading {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 20px;
}

.kld-result-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    color: #15803d;
    font-size: .78rem;
    font-weight: 800;
}

.kld-result-summary span + span::before {
    margin-right: 16px;
    color: #cbd5e1;
    content: '·';
}

.kld-warning {
    margin-bottom: 20px;
    padding: 10px 0 10px 14px;
    border-left: 3px solid #ea580c;
    color: #9a3412;
    font-size: .82rem;
    line-height: 1.5;
}

.kld-result-columns,
.kld-protocol-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.kld-result-block {
    min-width: 0;
    padding: 14px 0 14px 14px;
    border-left: 2px solid #dbe3ec;
    color: #475569;
    font-size: .82rem;
    line-height: 1.55;
}

.kld-context {
    color: #334155;
    font-size: .82rem;
    line-height: 1.6;
    word-break: break-all;
}

.kld-table-section {
    margin: 26px 0;
    padding-top: 22px;
    border-top: 1px solid #dbe3ec;
}

.kld-table-section > p {
    margin: -6px 0 12px;
    color: #64748b;
    font-size: .76rem;
}

.kld-table-scroll {
    overflow-x: auto;
}

.kld-primers-table {
    min-width: 720px;
    margin: 0;
    font-size: .82rem;
}

.kld-download-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0;
    padding-top: 20px;
    border-top: 1px solid #dbe3ec;
}

.tool-secondary-action {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    background: #fff;
    color: var(--brand-dark);
    font: 700 .78rem/1 var(--font-main), sans-serif;
    cursor: pointer;
    transition-property: color, border-color;
    transition-duration: .15s;
}

.tool-secondary-action:hover {
    border-color: var(--magenta);
    color: var(--magenta);
}

.kld-product-strip {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    padding: 17px 18px;
    border-left: 4px solid var(--magenta);
    background: var(--brand-dark);
    color: #fff;
}

.kld-product-strip h3 {
    margin-bottom: 4px;
    color: #fff;
}

.kld-product-strip p {
    margin: 0;
    color: #cbd5e1;
    font-size: .76rem;
}

.kld-product-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.kld-product-links a {
    padding-bottom: 2px;
    border-bottom: 1px solid currentColor;
    color: #fff;
    font-size: .76rem;
    font-weight: 800;
    text-decoration: none;
}

.kld-product-links a:hover {
    color: var(--magenta);
}

/* =========================================
   ПЦР МАСТЕР-МИКС — РЕФЕРЕНС КАЛЬКУЛЯТОРА
   ========================================= */
.mastermix-app {
    --mm-soft: #fff5fb;
    --mm-line: #dbe3ec;
}

.mastermix-app .tool-hero {
    margin-bottom: 16px;
}

.mastermix-app .mm-flow-step {
    padding-top: 28px;
    padding-bottom: 34px;
}

.mastermix-app .mm-step-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.mastermix-app .mm-step-head h2 {
    margin: 0 0 5px;
    color: var(--brand-dark);
    font-size: 1.25rem;
    line-height: 1.2;
    text-wrap: balance;
}

.mastermix-app .mm-step-head p {
    margin: 0;
    color: #64748b;
    font-size: .88rem;
    text-wrap: pretty;
}

.mm-setup-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(220px, .9fr);
    gap: 0;
    border-top: 1px solid var(--mm-line);
    border-bottom: 1px solid var(--mm-line);
}

.mm-setting-field {
    min-width: 0;
    padding: 20px 22px 18px 0;
}

.mm-setting-field + .mm-setting-field {
    padding-left: 22px;
    border-left: 1px solid var(--mm-line);
}

.mm-setting-field label {
    display: block;
    margin-bottom: 6px;
    color: #64748b;
    font-size: .76rem;
    font-weight: 800;
}

.mm-value-input {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.mm-value-input input {
    min-width: 0;
    width: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--brand-dark);
    font: 800 1.7rem/1.2 var(--font-main), sans-serif;
    font-variant-numeric: tabular-nums;
}

.mm-value-input input::-webkit-outer-spin-button,
.mm-value-input input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.mm-value-input input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.mm-value-input:focus-within {
    box-shadow: inset 0 -2px 0 var(--magenta);
}

.mm-value-input span {
    color: #64748b;
    font-size: .78rem;
    font-weight: 800;
}

.mm-run-total {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 17px 20px;
    border-left: 4px solid var(--magenta);
    background: var(--brand-dark);
    color: #fff;
}

.mm-run-label {
    color: #cbd5e1;
    font-size: .72rem;
    font-weight: 700;
}

.mm-run-total strong {
    margin: 2px 0;
    color: #fff;
    font-size: 1.65rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.mm-run-total strong small {
    font-size: .76rem;
    font-weight: 700;
}

.mm-run-detail {
    color: #94a3b8;
    font-size: .7rem;
}

.mastermix-app .mm-recipe-step {
    border-top: 1px solid var(--mm-line);
}

.mm-recipe-head {
    align-items: center !important;
}

.mm-table-wrap {
    overflow: visible;
    border-top: 2px solid var(--brand-dark);
}

.mastermix-app .mm-table {
    min-width: 620px;
    margin: 0;
    font-size: .86rem;
}

.mastermix-app .mm-table th {
    padding-top: 13px;
    padding-bottom: 13px;
    background: transparent;
    color: #64748b;
    font-size: .82rem;
    letter-spacing: .01em;
}

.mastermix-app .mm-table th span {
    display: block;
    margin-top: 2px;
    color: #94a3b8;
    font-size: .65rem;
    font-weight: 600;
}

.mastermix-app .mm-table th:nth-child(1) { width: 37%; }
.mastermix-app .mm-table th:nth-child(2) { width: 31%; }
.mastermix-app .mm-table th:nth-child(3) { width: 32%; }

.mastermix-app .mm-table th:last-child,
.mastermix-app .mm-table td:last-child {
    padding-left: 20px;
    background: var(--mm-soft);
}

.mastermix-app .mm-table th:last-child {
    color: var(--magenta);
}

.mastermix-app .mm-table td:last-child {
    color: var(--brand-dark);
    font-variant-numeric: tabular-nums;
}

.mastermix-app .mm-table td {
    height: 49px;
    padding-top: 7px;
    padding-bottom: 7px;
}

.mastermix-app .mm-table input.mm-input,
.mastermix-app .mm-table select.tool-select {
    border-color: transparent;
    border-radius: 0;
    background-color: transparent;
    font-variant-numeric: tabular-nums;
}

.mastermix-app .mm-table input.mm-input:focus,
.mastermix-app .mm-table select.tool-select:focus {
    border-bottom-color: var(--magenta);
    box-shadow: none;
}

.mastermix-app .mm-table .bg-disabled {
    color: #64748b;
}

.mm-row-note {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: .68rem;
}

.mastermix-app .mm-dna-row td {
    border-top: 1px dashed #94a3b8;
}

.mastermix-app .mm-total-row td {
    border-top: 2px solid var(--brand-dark);
    border-bottom: 0;
    background: transparent;
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
}

.mastermix-app .mm-total-row td:last-child {
    background: var(--brand-dark);
    color: #fff;
}

.mm-recipe-summary {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: baseline;
    gap: 12px 20px;
    margin-top: 18px;
    padding-left: 16px;
    border-left: 4px solid var(--magenta);
}

.mm-recipe-summary > span {
    color: #64748b;
    font-size: .75rem;
    font-weight: 800;
}

.mm-recipe-summary strong {
    color: var(--brand-dark);
    font-size: 1.3rem;
    font-variant-numeric: tabular-nums;
}

.mm-recipe-summary small {
    color: #64748b;
    font-size: .72rem;
}

.mastermix-app .tool-results-box {
    border-radius: 0;
}

.mm-select-control {
    position: relative;
    width: 100%;
}

select.mm-native-select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.mm-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 36px;
    padding: 0 4px;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    color: var(--brand-dark);
    font: 700 .78rem/1.2 var(--font-main), sans-serif;
    text-align: left;
    cursor: pointer;
    transition-property: color, box-shadow;
    transition-duration: .15s;
}

.mm-select-trigger:hover,
.mm-select-control.is-open .mm-select-trigger {
    color: var(--magenta);
}

.mm-select-trigger:focus-visible {
    box-shadow: inset 0 -2px 0 var(--magenta);
}

.mm-select-trigger svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition-property: transform;
    transition-duration: .15s;
}

.mm-select-control.is-open .mm-select-trigger svg {
    transform: rotate(180deg);
}

.mm-select-options {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 40;
    min-width: max(100%, 178px);
    padding: 4px;
    border: 1px solid #dbe3ec;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 14px 35px rgba(21, 25, 43, .14), 0 3px 8px rgba(21, 25, 43, .08);
    max-height: min(360px, calc(100vh - 160px));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.mm-select-options[hidden] {
    display: none;
}

.mm-select-option {
    display: block;
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: #475569;
    font: 600 .76rem/1.25 var(--font-main), sans-serif;
    text-align: left;
    cursor: pointer;
    transition-property: color, background-color;
    transition-duration: .12s;
}

.mm-select-option:hover,
.mm-select-option:focus-visible {
    outline: 0;
    background: #f8fafc;
    color: var(--magenta);
}

.mm-select-option.is-selected {
    background: var(--mm-soft);
    color: var(--brand-dark);
    font-weight: 800;
}

.mm-product-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 28px;
    padding: 17px 18px;
    border-left: 4px solid var(--magenta);
    background: var(--brand-dark);
    color: #fff;
}

.mm-product-label {
    display: block;
    margin-bottom: 2px;
    color: var(--magenta);
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.mm-product-strip h3 {
    margin: 0 0 3px;
    color: #fff;
    font-size: .95rem;
}

.mm-product-strip p {
    margin: 0;
    color: #cbd5e1;
    font-size: .72rem;
}

.mm-product-strip a {
    flex: 0 0 auto;
    padding-bottom: 3px;
    border-bottom: 1px solid currentColor;
    color: #fff;
    font-size: .76rem;
    font-weight: 800;
    text-decoration: none;
    transition-property: color;
    transition-duration: .15s;
}

.mm-product-strip a:hover,
.mm-product-strip a:focus-visible {
    color: var(--magenta);
}

/* =========================================
   РЕФЕРЕНС ПРОСТЫХ ЛАБОРАТОРНЫХ КАЛЬКУЛЯТОРОВ
   ========================================= */
.calc-reference-app {
    --calc-soft: #f8fafc;
    --calc-line: #dbe3ec;
}

.calc-reference-app .tool-hero {
    margin-bottom: 16px;
}

.calc-flow-step {
    padding-top: 28px;
    padding-bottom: 32px;
    border-top: 1px solid var(--calc-line);
}

.calc-step-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.calc-step-head h2 {
    margin: 0;
    color: var(--brand-dark);
    font-size: 1.2rem;
    line-height: 1.2;
    text-wrap: balance;
}

.calc-equation-head strong {
    color: var(--magenta);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.calc-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
}

.calc-field-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.calc-field-span-2 {
    grid-column: span 2;
}

.calc-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.calc-field > label {
    display: block;
    margin-bottom: 7px;
    color: #64748b;
    font-size: .76rem;
    font-weight: 800;
}

.calc-field > label span {
    font-weight: 500;
}

.calc-reference-app .tool-input,
.calc-reference-app .mm-select-trigger {
    min-height: 44px;
    border: 0;
    border-radius: 0;
    background: var(--calc-soft);
    box-shadow: inset 0 0 0 1px transparent;
    transition-property: color, background-color, box-shadow;
    transition-duration: .15s;
}

.calc-reference-app .tool-input {
    height: 44px;
    padding-right: 14px;
    padding-left: 14px;
}

.calc-reference-app .tool-input:hover,
.calc-reference-app .mm-select-trigger:hover {
    background: #f1f5f9;
}

.calc-reference-app .tool-input:focus,
.calc-reference-app .mm-select-trigger:focus-visible,
.calc-reference-app .mm-select-control.is-open .mm-select-trigger {
    background: #fff;
    box-shadow: inset 0 -2px 0 var(--magenta);
}

.calc-reference-app .mm-select-trigger {
    padding: 0 14px;
    font-size: .86rem;
}

.calc-reference-app .input-group {
    align-items: stretch;
}

.calc-reference-app .input-group .input-group-main {
    min-width: 0;
}

.calc-reference-app .mm-select-control.is-unit-select {
    width: auto;
    min-width: 112px;
    flex: 0 0 auto;
}

.calc-reference-app .is-unit-select .mm-select-trigger {
    padding-right: 10px;
    padding-left: 12px;
    border-left: 1px solid #dbe3ec;
    background: #f1f5f9;
}

.calc-reference-app .mm-select-options {
    max-height: 330px;
    overflow-y: auto;
}

.mm-select-group-label {
    display: block;
    padding: 10px 10px 5px;
    color: #94a3b8;
    font-size: .64rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.calc-preset-row,
.calc-save-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.calc-field-grow {
    flex: 1;
}

.calc-save-row {
    margin-top: 14px;
    padding-top: 14px !important;
    padding-bottom: 0 !important;
    border-top: 1px solid var(--calc-line) !important;
    border-bottom: 0 !important;
}

.calc-text-action {
    min-height: 44px;
    padding: 0 3px 2px;
    border: 0;
    border-bottom: 2px solid currentColor;
    background: transparent;
    color: var(--magenta);
    font: 800 .76rem/1 var(--font-main), sans-serif;
    cursor: pointer;
    transition-property: color;
    transition-duration: .15s;
}

.calc-text-action:hover,
.calc-text-action:focus-visible {
    color: var(--brand-dark);
}

.calc-delete-action {
    color: #dc2626;
}

/* Калькулятор лигирования в общей системе лабораторных калькуляторов */
.ligation-app [hidden] {
    display: none !important;
}

.ligation-inserts-head {
    margin-bottom: 8px;
}

.ligation-inserts-list {
    display: flex;
    flex-direction: column;
}

.ligation-app .insert-row-card {
    margin: 0;
    padding: 18px 0 22px;
    border: 0;
    border-top: 1px solid var(--calc-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: none;
}

.ligation-app .insert-row-card:first-child {
    border-top: 0;
}

.ligation-app .insert-row-card:hover {
    border-color: var(--calc-line);
}

.ligation-app .insert-row-header {
    display: flex;
    min-height: 40px;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
}

.ligation-insert-title {
    color: var(--brand-dark);
    font-size: .92rem;
    font-weight: 800;
}

.ligation-app .insert-row-card .remove-insert-btn {
    width: auto;
    min-width: 44px;
    height: 40px;
    padding: 0 2px;
    border: 0;
    border-bottom: 1px solid currentColor;
    border-radius: 0;
    background: transparent;
    color: #64748b;
    font: 700 .74rem/1 var(--font-main), sans-serif;
    transition-property: color, border-color, transform;
    transition-duration: .15s;
}

.ligation-app .insert-row-card .remove-insert-btn:hover,
.ligation-app .insert-row-card .remove-insert-btn:focus-visible {
    background: transparent;
    color: #dc2626;
}

.ligation-app .insert-row-card .remove-insert-btn:active {
    transform: scale(.96);
}

.ligation-result-panel {
    margin-top: 24px;
    padding: 18px 20px 20px;
    border-left: 4px solid var(--magenta);
    background: var(--brand-dark);
    color: #fff;
}

.ligation-result-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}

.ligation-result-head span,
.ligation-result-head strong {
    display: block;
}

.ligation-result-head span {
    margin-bottom: 3px;
    color: #cbd5e1;
    font-size: .7rem;
    font-weight: 700;
}

.ligation-result-head strong {
    font-size: 1.05rem;
}

.ligation-result-head small {
    color: #94a3b8;
    font-size: .68rem;
    text-align: right;
}

.ligation-table-wrap {
    overflow-x: auto;
}

.ligation-results-table {
    min-width: 520px;
    margin-top: 0;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.ligation-results-table th {
    padding: 10px 12px;
    border-bottom-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .04);
    color: #cbd5e1;
    font-size: .76rem;
}

.ligation-results-table td {
    padding: 11px 12px;
    border-bottom-color: rgba(255, 255, 255, .12);
}

.ligation-results-table tbody tr:last-child td {
    border-bottom: 0;
}

.ligation-results-table .ligation-vector-result {
    background: rgba(255, 255, 255, .05);
}

.ligation-results-table .font-mono {
    font-family: var(--font-main), sans-serif;
}

.ligation-result-number,
.ligation-results-table td:nth-child(2) strong {
    color: #fff;
    font-weight: 800;
}

.ligation-result-empty {
    color: #94a3b8;
}

.ligation-ratio {
    margin-left: 7px;
    color: #94a3b8;
    font-size: .7rem;
    font-weight: 600;
}

.ligation-export-bar {
    margin-top: 18px;
}

.ligation-product-strip {
    margin-top: 20px;
}

@media (max-width: 700px) {
    .ligation-inserts-head,
    .ligation-result-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .ligation-inserts-head {
        gap: 6px;
    }

    .ligation-result-head small {
        text-align: left;
    }
}

.calc-result-panel {
    margin-top: 24px;
    padding: 18px 20px;
    border: 0;
    border-left: 4px solid var(--magenta);
    border-radius: 0;
    background: var(--brand-dark);
    color: #cbd5e1;
    font-size: .82rem;
    line-height: 1.55;
}

.calc-result-label {
    color: #cbd5e1;
    font-size: .72rem;
    font-weight: 700;
}

.calc-result-value,
.calc-result-main,
.calc-result-values {
    color: #fff;
    font-size: 1.45rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.calc-result-recipe {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .18);
}

.calc-recipe-steps {
    color: #cbd5e1;
    font-size: .78rem;
    line-height: 1.65;
}

.calc-recipe-steps strong {
    color: #fff;
}

.calc-live-result {
    display: none;
}

.calc-live-result.is-success,
.calc-live-result.is-warning,
.calc-live-result.is-error {
    display: block;
}

.calc-live-result.is-warning {
    border-left-color: #eab308;
    background: #fefce8;
    color: #854d0e;
}

.calc-live-result.is-error {
    border-left-color: #ef4444;
    background: #fef2f2;
    color: #991b1b;
}

.calc-result-warning {
    color: inherit;
    font-weight: 700;
}

.calc-live-result > div + div {
    margin-top: 7px;
}

.calc-export-bar {
    margin-top: 18px;
    padding-top: 0;
    border-top: 0;
}

.calc-reference-app .btn-export {
    border: 0;
    border-bottom: 1px solid currentColor;
    border-radius: 0;
    background: transparent;
}

.calc-mode-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-bottom: 0;
    border-bottom: 1px solid var(--calc-line);
}

.calc-mode-tabs .tool-tab-btn {
    min-height: 54px;
    padding: 10px 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #64748b;
    font-size: .82rem;
    text-align: left;
}

.calc-mode-tabs .tool-tab-btn.active {
    background: #fff5fb;
    box-shadow: inset 0 -3px 0 var(--magenta);
    color: var(--brand-dark);
}

@media (max-width: 680px) {
    .tool-app-flat {
        padding: 20px 16px;
    }

    .tool-app-flat .tool-hero,
    .tool-learning-details {
        margin-left: 0;
    }

    .tool-app-flat .tool-title {
        font-size: 1.35rem;
    }

    .tool-flow-step {
        grid-template-columns: 38px minmax(0, 1fr);
        padding: 22px 0 26px;
    }

    .tool-flow-head {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .pt-input-grid {
        grid-template-columns: 1fr;
    }

    .pt-frame-field {
        max-width: 150px;
    }

    .tool-primary-action-row .tool-btn-primary,
    .pt-convert-actions .tool-btn-primary {
        width: 100%;
        min-width: 0;
    }

    .pt-convert-actions {
        flex-direction: column;
    }

    .kld-mode-tabs,
    .kld-setup-grid,
    .kld-result-columns,
    .kld-protocol-grid {
        grid-template-columns: 1fr;
    }

    .kld-mode-tabs {
        gap: 12px;
    }

    .kld-parameters-panel {
        padding: 20px 0 0;
        border-top: 1px solid #dbe3ec;
        border-left: 0;
    }

    .kld-field-head,
    .kld-product-strip {
        align-items: stretch;
        flex-direction: column;
    }

    .kld-product-links {
        justify-content: flex-start;
    }

    .mastermix-app .mm-step-head,
    .mastermix-app .mm-recipe-head {
        align-items: flex-start !important;
        flex-direction: column;
        gap: 10px;
    }

    .mm-setup-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mm-setting-field {
        padding: 16px 14px 14px 0;
    }

    .mm-setting-field + .mm-setting-field {
        padding-left: 14px;
    }

    .mm-setting-field:nth-child(3) {
        padding-left: 0;
        border-top: 1px solid var(--mm-line);
        border-left: 0;
    }

    .mm-run-total {
        border-top: 1px solid var(--mm-line);
    }

    .mm-recipe-summary {
        grid-template-columns: 1fr auto;
    }

    .mm-recipe-summary small {
        grid-column: 1 / -1;
    }

    .mm-product-strip {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
    }

    .calc-field-grid,
    .calc-field-grid-three {
        grid-template-columns: 1fr;
    }

    .calc-field-span-2 {
        grid-column: auto;
    }

    .calc-preset-row,
    .calc-save-row,
    .calc-step-head {
        align-items: stretch;
        flex-direction: column;
    }

    .calc-text-action {
        align-self: flex-start;
    }

    .calc-mode-tabs .tool-tab-btn {
        min-width: 0;
        padding-right: 8px;
        padding-left: 8px;
        font-size: .72rem;
    }

    .calc-mode-tabs {
        grid-template-columns: 1fr;
    }

    .calc-mode-tabs .tool-tab-btn {
        min-height: 46px;
        font-size: .75rem;
    }

    .calc-reference-app .mm-select-control.is-unit-select {
        min-width: 94px;
    }

    .mastermix-app .mm-table {
        min-width: 0;
        table-layout: fixed;
        font-size: .72rem;
    }

    .mastermix-app .mm-table th:nth-child(1) { width: 43%; }
    .mastermix-app .mm-table th:nth-child(2) { width: 25%; }
    .mastermix-app .mm-table th:nth-child(3) { width: 32%; }

    .mastermix-app .mm-table th,
    .mastermix-app .mm-table td {
        padding-right: 6px;
        padding-left: 6px;
    }

    .mastermix-app .mm-table th:last-child,
    .mastermix-app .mm-table td:last-child {
        padding-left: 8px;
    }

    .mastermix-app .mm-table th {
        font-size: .68rem;
    }

    .mastermix-app .mm-table th span,
    .mm-row-note {
        font-size: .57rem;
    }

    .mastermix-app .mm-table input.mm-input,
    .mastermix-app .mm-table select.tool-select,
    .mm-select-trigger {
        padding-right: 18px;
        padding-left: 2px;
        font-size: .69rem;
    }

    .mm-select-options {
        min-width: 165px;
    }
}

/* Cascade guards for the focused operation and restriction layouts. */
.pt-app .pt-operation-tabs {
    display: grid;
}

.restriction-app .restriction-gel-workspace {
    display: grid;
}

.restriction-app .restriction-fragments-panel {
    min-width: 0;
    padding: 0 0 0 22px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

@media (max-width: 980px) {
    .restriction-app .restriction-gel-workspace {
        grid-template-columns: 1fr;
    }

    .restriction-app .restriction-fragments-panel {
        padding: 22px 0 0;
    }
}

@media (max-width: 680px) {
    .pt-app .pt-operation-tabs {
        grid-template-columns: 1fr;
    }

    .restriction-app .restriction-fragments-panel {
        overflow: visible;
    }

    .restriction-app .restriction-fragments-panel .results-table,
    .restriction-app .restriction-fragments-panel .results-table tbody,
    .restriction-app .restriction-fragments-panel .results-table tr,
    .restriction-app .restriction-fragments-panel .results-table td {
        display: block;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .restriction-app .restriction-fragments-panel .results-table {
        min-width: 0;
    }

    .restriction-app .restriction-fragments-panel .results-table thead {
        display: none;
    }

    .restriction-app .restriction-fragments-panel .results-table tr {
        padding: 12px 0;
        border-bottom: 1px solid #dbe3ec;
    }

    .restriction-app .restriction-fragments-panel .results-table td {
        padding: 3px 0;
        border: 0;
    }

    .restriction-app .restriction-fragments-panel .results-table td:nth-child(2)::before {
        display: block;
        margin: 5px 0 2px;
        color: #94a3b8;
        font-family: var(--font-main), sans-serif;
        font-size: .65rem;
        font-weight: 700;
    }

    .restriction-app .restriction-fragments-panel .results-table td:nth-child(2)::before {
        content: 'Фрагменты, п. о.';
    }

    .restriction-topology-options {
        gap: 8px;
    }

    .restriction-topology-copy {
        min-height: 68px;
        padding-right: 8px;
        padding-left: 8px;
    }

    .restriction-topology-copy strong {
        font-size: .8rem;
    }
}

/* Protein analyzer cascade guards: generic tab styles are declared later. */
.protein-app .protein-task-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    overflow: visible;
}

@media (max-width: 680px) {
    .protein-app .protein-task-tabs {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .protein-app .protein-task-tabs .tool-tab-btn {
        min-height: 54px;
        padding: 9px 12px 10px;
    }
}

body.modules-page.modules-system.modules-tool .tool-app-container{max-width:none;margin-inline:auto;background:#fff;border-radius:8px}body.modules-page.modules-tool .tool-app-flat .tool-hero{max-width:none;margin-left:0}body.modules-page.modules-tool :is(input,textarea,select){background-color:#fff!important}