/* ================================================================
   Oligos Editor — Condalab Design System
   ================================================================ */

/* ===== 1. VARIABLES ===== */
:root {
    --cdl-yellow: #EBBE18;
    --cdl-yellow-light: rgba(235, 190, 24, 0.12);
    --cdl-green: #009A17;
    --cdl-green-dark: #007A12;
    --cdl-black: #000;
    --cdl-dark: #1a1a1a;
    --cdl-dark-2: #111;
    --cdl-white: #fff;
    --cdl-gray-100: #f7f7f7;
    --cdl-gray-200: #eee;
    --cdl-gray-300: #ddd;
    --cdl-gray-400: #bbb;
    --cdl-gray-500: #888;
    --cdl-gray-600: #666;
    --cdl-gray-700: #4d4d4d;
    --cdl-error: #DC3545;
    --cdl-warning: #F2A900;
    --cdl-radius: 12px;
    --cdl-radius-sm: 8px;
    --cdl-font: 'Inter', sans-serif;
    --cdl-font-heading: 'Jost', 'Inter', sans-serif;
}

/* ===== 2. PS OVERRIDES ===== */
#module-oligos-editor #wrapper {
    padding-top: 0;
    background: var(--cdl-white);
}
#module-oligos-editor #wrapper > .container {
    padding: 0;
    max-width: 100%;
}
#module-oligos-editor #content-wrapper {
    padding: 0;
    border: none;
}
#module-oligos-editor #content {
    border: none;
    box-shadow: none;
}
#module-oligos-editor #main {
    padding: 0;
    margin: 0;
}
#module-oligos-editor .breadcrumb {
    display: none;
}
#module-oligos-editor .page-header {
    display: none;
}

.cdl-editor-wrap {
    font-family: var(--cdl-font);
}

/* ===== 3. BREADCRUMB ===== */
.cdl-editor-breadcrumb__inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 0;
    padding-bottom: 8px;
    padding-left: 15px;
    font-family: var(--cdl-font);
    font-size: 13px;
    font-weight: 600;
}

.cdl-editor-breadcrumb a {
    color: var(--cdl-gray-500);
    text-decoration: none;
    transition: color 0.2s;
}

.cdl-editor-breadcrumb a:hover {
    color: var(--cdl-yellow);
}

.cdl-editor-breadcrumb__sep {
    color: var(--cdl-gray-300);
}

.cdl-editor-breadcrumb__current {
    color: var(--cdl-black);
    font-weight: 700;
}

/* ===== 3b. HERO ===== */
.cdl-editor-hero {
    background: var(--cdl-black);
    height: 128px;
    display: flex;
    align-items: center;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
}

.cdl-editor-hero__inner {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* Icon */
.cdl-editor-hero__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding-top: 30px;
}

.cdl-editor-hero__icon-wrap img {
    display: block;
}

/* Text block */
.cdl-editor-hero__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Title */
.cdl-editor-hero__title {
    font-family: var(--cdl-font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--cdl-white);
    margin: 0;
    line-height: 1.2;
}

/* Description */
.cdl-editor-hero__desc {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

/* ===== 4. LAYOUT 2 COLUMNAS ===== */
.cdl-editor {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 32px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 40px 24px 80px;
    align-items: start;
}

.cdl-editor__main {
    min-width: 0;
}

/* ===== 5. BARRA DE ACCIONES ===== */
.cdl-editor__actions {
    background: var(--cdl-white);
    border: 1px solid var(--cdl-gray-200);
    border-left: 4px solid var(--cdl-yellow);
    border-radius: var(--cdl-radius-sm);
    padding: 20px 24px;
    margin-bottom: 24px;
}

.cdl-editor__actions-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.cdl-editor__actions-icon {
    flex-shrink: 0;
}

.cdl-editor__actions-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--cdl-dark);
}

.cdl-editor__actions-count {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--cdl-gray-500);
}

.cdl-editor__actions-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ===== CDL BUTTONS ===== */
.cdl-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    font-family: var(--cdl-font);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    line-height: 1.4;
    white-space: nowrap;
}

.cdl-btn--outline-dark {
    background: transparent;
    border-color: var(--cdl-gray-300);
    color: var(--cdl-dark);
}
.cdl-btn--outline-dark:hover {
    background: var(--cdl-gray-100);
    border-color: var(--cdl-gray-400);
}

.cdl-btn--outline-danger {
    background: transparent;
    border-color: rgba(220, 53, 69, 0.3);
    color: var(--cdl-error);
}
.cdl-btn--outline-danger:hover {
    background: rgba(220, 53, 69, 0.06);
    border-color: var(--cdl-error);
}

.cdl-btn--yellow {
    background: var(--cdl-yellow);
    border-color: var(--cdl-yellow);
    color: var(--cdl-black);
}
.cdl-btn--yellow:hover {
    background: #d4a916;
    border-color: #d4a916;
}

.cdl-btn--black {
    background: var(--cdl-black);
    border-color: var(--cdl-black);
    color: var(--cdl-white);
}
.cdl-btn--black:hover {
    background: var(--cdl-dark);
}

.cdl-btn--danger {
    background: var(--cdl-error);
    border-color: var(--cdl-error);
    color: var(--cdl-white);
}
.cdl-btn--danger:hover {
    background: #c82333;
    border-color: #c82333;
}

.cdl-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--cdl-gray-600);
}
.cdl-btn--ghost:hover {
    background: var(--cdl-gray-100);
    color: var(--cdl-dark);
}

/* ===== 6. OLIGO CARDS ===== */
.oligo-item {
    background: var(--cdl-white);
    border: 1px solid var(--cdl-gray-200);
    border-radius: var(--cdl-radius);
    margin-bottom: 16px;
    overflow: hidden;
    transition: box-shadow 0.2s, border-color 0.2s;
    position: relative;
}

.oligo-item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* Header */
.oligo-item__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--cdl-gray-100) 0%, var(--cdl-white) 100%);
    border-bottom: 1px solid var(--cdl-gray-200);
}

.oligo-item__check {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.oligo-item__check .oligo-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--cdl-yellow);
    cursor: pointer;
}

.oligo-item__label {
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    color: var(--cdl-dark);
    text-transform: uppercase;
}

.oligo-item__header .oligo-badge {
    font-size: 0.7rem;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.oligo-item__header .oligo-price {
    margin-left: auto;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--cdl-dark);
    display: none;
}

.oligo-item__header-actions {
    display: flex;
    gap: 4px;
    margin-left: 8px;
}

.oligo-item__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: var(--cdl-gray-500);
    cursor: pointer;
    transition: all 0.15s;
}

.oligo-item__btn:hover {
    background: var(--cdl-gray-100);
    color: var(--cdl-dark);
}

.oligo-item__btn.btn-remove:hover {
    background: rgba(220, 53, 69, 0.08);
    color: var(--cdl-error);
}

/* Body */
.oligo-item__body {
    padding: 20px;
}

/* Fields */
.oligo-item__field {
    margin-bottom: 16px;
}

.oligo-item__field:last-child {
    margin-bottom: 0;
}

.oligo-item__field label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cdl-gray-600);
    margin-bottom: 6px;
    text-align: left;
}

/* Name input */
.oligo-name {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--cdl-gray-300);
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: var(--cdl-font);
    color: var(--cdl-dark);
    background: var(--cdl-white);
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.oligo-name:focus {
    outline: none;
    border-color: var(--cdl-yellow);
    box-shadow: 0 0 0 3px var(--cdl-yellow-light);
}

.oligo-name::placeholder {
    color: var(--cdl-gray-400);
    font-weight: 400;
}

/* Invalid fields */
.oligo-name.is-invalid,
.oligo-sequence-input.is-invalid {
    border-color: var(--cdl-error);
    background-color: #fff5f5;
}

.oligo-name.is-invalid:focus,
.oligo-sequence-input.is-invalid:focus {
    border-color: var(--cdl-error);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

/* Options grid */
.oligo-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.oligo-options-grid .mb-2 {
    margin-bottom: 0 !important;
}

.oligo-options-grid label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cdl-gray-600);
    margin-bottom: 6px;
    text-align: left;
}

.oligo-options-grid select,
.oligo-options-grid .form-select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--cdl-gray-300);
    border-radius: 6px;
    font-size: 0.88rem;
    font-family: var(--cdl-font);
    color: var(--cdl-dark);
    background: var(--cdl-white);
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.oligo-options-grid select:focus,
.oligo-options-grid .form-select:focus {
    outline: none;
    border-color: var(--cdl-yellow);
    box-shadow: 0 0 0 3px var(--cdl-yellow-light);
}

/* ===== 7. SEQUENCE ===== */
.oligo-sequence-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--cdl-gray-300);
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 1.05rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--cdl-dark);
    background: var(--cdl-white);
    resize: vertical;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.oligo-sequence-input:focus {
    outline: none;
    border-color: var(--cdl-yellow);
    box-shadow: 0 0 0 3px var(--cdl-yellow-light);
}

.sequence-preview {
    font-family: 'Courier New', monospace;
    font-size: 0.95rem;
    padding: 10px 14px;
    background: var(--cdl-gray-100);
    border-radius: 6px;
    overflow-x: auto;
    white-space: nowrap;
    margin-top: 8px;
}

.sequence-preview .oligo-mod {
    color: var(--cdl-green);
    font-weight: bold;
}

/* Sequence Widgets */
.sequence-widgets {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.sequence-widget {
    flex: 1;
    min-width: 140px;
    max-width: 240px;
}

.sequence-widget label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cdl-gray-600);
    font-weight: 600;
    margin-bottom: 4px;
    display: block;
}

.sequence-widget select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--cdl-gray-300);
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: var(--cdl-font);
    color: var(--cdl-dark);
    background: var(--cdl-white);
    box-sizing: border-box;
}

.sequence-widget select:focus {
    outline: none;
    border-color: var(--cdl-yellow);
    box-shadow: 0 0 0 3px var(--cdl-yellow-light);
}

/* ===== 8. BASE TOOLBAR (pills) ===== */
.base-toolbar {
    margin-top: 10px;
}

.btn-group-bases {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 6px;
    background: var(--cdl-gray-100);
    border-radius: 8px;
    padding: 8px 12px;
}

.base-toolbar-label {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0 0.5rem 0 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cdl-gray-600);
    background: transparent;
    border: none;
    white-space: nowrap;
}

.base-toolbar-label .material-icons {
    margin-left: 2px;
    font-size: 14px;
    vertical-align: middle;
}

.btn-base {
    min-width: 42px;
    height: 32px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 1rem;
    border: none;
    border-radius: 4px !important;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-base:hover {
    transform: scale(1.08);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.btn-base:active {
    transform: scale(0.95);
}

/* Base colors */
.btn-base-a { background-color: var(--cdl-green) !important; color: var(--cdl-white) !important; }
.btn-base-a:hover { background-color: var(--cdl-green-dark) !important; }
.btn-base-t { background-color: #E40046 !important; color: var(--cdl-white) !important; }
.btn-base-t:hover { background-color: #C4003D !important; }
.btn-base-g { background-color: #F2A900 !important; color: var(--cdl-black) !important; }
.btn-base-g:hover { background-color: #D99700 !important; }
.btn-base-c { background-color: #1D428A !important; color: var(--cdl-white) !important; }
.btn-base-c:hover { background-color: #163570 !important; }
.btn-base-u { background-color: #E40046 !important; color: var(--cdl-white) !important; }
.btn-base-u:hover { background-color: #C4003D !important; }

/* DNA base text highlighting */
.base-A { color: var(--cdl-green); }
.base-T, .base-U { color: #E40046; }
.base-G { color: #F2A900; }
.base-C { color: #1D428A; }
.base-mixed { color: #642F6C; }

/* Mixed/degenerate bases select */
.base-select-mixed {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #642F6C;
    color: var(--cdl-white);
    border: none;
    border-radius: 4px;
    font-size: 0.85rem;
    height: 32px;
    padding: 0 2rem 0 0.75rem;
    min-width: 140px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 12px;
}

.base-select-mixed:hover,
.base-select-mixed:focus {
    background-color: #4E2555 !important;
    color: var(--cdl-white) !important;
    box-shadow: none !important;
    outline: none !important;
}

.base-select-mixed option {
    background-color: var(--cdl-white);
    color: var(--cdl-black);
}

/* ===== OLIGO STATUS STATES ===== */
.oligo-item.is-valid {
    border-color: var(--cdl-green);
}

.oligo-item.is-valid .oligo-item__header {
    background: linear-gradient(135deg, rgba(0, 154, 23, 0.05) 0%, var(--cdl-white) 100%);
    border-bottom-color: rgba(0, 154, 23, 0.2);
}

.oligo-item.is-invalid {
    border-color: var(--cdl-error);
}

.oligo-item.is-invalid .oligo-item__header {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.04) 0%, var(--cdl-white) 100%);
    border-bottom-color: rgba(220, 53, 69, 0.2);
}

.oligo-item.is-pending {
    border-color: var(--cdl-gray-300);
}

/* Badge colors */
.oligo-badge.bg-success { background-color: var(--cdl-green) !important; }
.oligo-badge.bg-danger { background-color: var(--cdl-error) !important; }
.oligo-badge.bg-secondary { background-color: var(--cdl-gray-500) !important; }
.oligo-badge.bg-info { background-color: var(--cdl-yellow) !important; color: var(--cdl-black) !important; }

/* Messages */
.oligo-messages {
    margin-top: 12px;
}

.oligo-errors {
    background: rgba(220, 53, 69, 0.06);
    border: 1px solid rgba(220, 53, 69, 0.2);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 0.85rem;
    color: #721c24;
    margin-bottom: 8px;
}

.oligo-warnings {
    background: rgba(242, 169, 0, 0.08);
    border: 1px solid rgba(242, 169, 0, 0.3);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 0.85rem;
    color: #856404;
}

.oligo-errors ul,
.oligo-warnings ul {
    margin: 0;
    padding-left: 1.2rem;
}

/* Footer */
.oligo-item__footer {
    display: flex;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--cdl-gray-200);
    background: var(--cdl-gray-100);
}

/* ===== LOADING STATE ===== */
.oligo-item.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

.oligo-item.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 3px solid var(--cdl-yellow);
    border-top-color: transparent;
    border-radius: 50%;
    animation: cdl-spin 0.8s linear infinite;
    z-index: 5;
}

@keyframes cdl-spin {
    to { transform: rotate(360deg); }
}

/* ===== EMPTY STATE ===== */
.cdl-editor__empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--cdl-gray-500);
}

.cdl-editor__empty svg {
    margin-bottom: 16px;
}

.cdl-editor__empty p {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--cdl-gray-600);
}

.cdl-editor__empty-sub {
    font-size: 0.88rem !important;
    font-weight: 400 !important;
    color: var(--cdl-gray-400) !important;
}

/* ===== ADD OLIGO BUTTON ===== */
.cdl-editor__add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 18px;
    border: 2px dashed var(--cdl-gray-300);
    border-radius: var(--cdl-radius);
    background: transparent;
    color: var(--cdl-gray-500);
    font-family: var(--cdl-font);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 16px;
}

.cdl-editor__add-btn:hover {
    border-color: var(--cdl-yellow);
    color: var(--cdl-yellow);
    background: var(--cdl-yellow-light);
}

/* ===== 9. SIDEBAR ===== */
.cdl-editor__sidebar {
    position: sticky;
    top: 24px;
}

/* Product card */
.cdl-editor__product-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--cdl-white);
    border: 1px solid var(--cdl-gray-200);
    border-radius: var(--cdl-radius);
    padding: 18px;
    margin-bottom: 16px;
}

.cdl-editor__product-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--cdl-yellow-light);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cdl-editor__product-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.cdl-editor__product-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--cdl-dark);
    margin: 0 0 4px;
}

.cdl-editor__product-desc {
    font-size: 0.82rem;
    color: var(--cdl-gray-500);
    margin: 0;
    line-height: 1.5;
}

/* Summary card (dark) */
.cdl-editor__summary {
    background: linear-gradient(180deg, var(--cdl-black) 0%, var(--cdl-dark-2) 100%);
    border-radius: var(--cdl-radius);
    padding: 24px;
    color: var(--cdl-white);
}

.cdl-editor__summary-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 16px;
}

.cdl-editor__summary-rows {
    margin-bottom: 20px;
}

.cdl-editor__summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 0.88rem;
}

.cdl-editor__summary-row span:first-child {
    color: rgba(255, 255, 255, 0.6);
}

.cdl-editor__summary-row span:last-child {
    font-weight: 600;
    color: var(--cdl-white);
}

.cdl-editor__summary-highlight {
    color: var(--cdl-yellow) !important;
}

/* Comments */
.cdl-editor__summary-comments {
    margin-bottom: 20px;
}

.cdl-editor__summary-comments label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 6px;
}

.cdl-editor__summary-comments textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--cdl-white);
    font-family: var(--cdl-font);
    font-size: 0.85rem;
    resize: vertical;
    box-sizing: border-box;
}

.cdl-editor__summary-comments textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.cdl-editor__summary-comments textarea:focus {
    outline: none;
    border-color: var(--cdl-yellow);
    box-shadow: 0 0 0 2px rgba(235, 190, 24, 0.2);
}

/* Price box */
.cdl-editor__summary-price {
    background: var(--cdl-yellow);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    margin-bottom: 16px;
}

.cdl-editor__summary-price-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(0, 0, 0, 0.5);
    margin-bottom: 4px;
}

.cdl-editor__summary-price-amount {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: var(--cdl-black);
    line-height: 1.2;
}

.cdl-editor__summary-price-tax {
    display: block;
    font-size: 0.72rem;
    color: rgba(0, 0, 0, 0.4);
    margin-top: 2px;
}

/* Cart button */
.cdl-editor__cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    background: var(--cdl-white);
    border: none;
    border-radius: 8px;
    color: var(--cdl-black);
    font-family: var(--cdl-font);
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    margin-bottom: 14px;
}

.cdl-editor__cart-btn:hover:not(:disabled) {
    background: var(--cdl-gray-100);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.cdl-editor__cart-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Links */
.cdl-editor__summary-links {
    text-align: center;
}

.cdl-editor__summary-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5) !important;
    text-decoration: none !important;
    transition: color 0.15s;
}

.cdl-editor__summary-link:hover {
    color: var(--cdl-yellow) !important;
}

/* ===== 10. MODALS ===== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}

.modal.show {
    display: block;
}

.modal-dialog {
    position: relative;
    margin: 1.75rem auto;
    max-width: 500px;
}

.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 3.5rem);
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--cdl-white);
    border: none;
    border-radius: var(--cdl-radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--cdl-gray-200);
}

.modal-header .btn-close {
    margin-left: auto;
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1.25rem;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--cdl-gray-200);
    gap: 0.5rem;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
}

.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: .25em;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: .25rem;
    opacity: .5;
    cursor: pointer;
}

.btn-close:hover {
    opacity: 1;
}

.cdl-modal-icon {
    margin-bottom: 20px;
}

.cdl-modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.cdl-modal-buttons--stack {
    flex-direction: column;
    gap: 8px;
}

/* ===== 11. IMPORT PREVIEW ===== */
#import-modal .modal-body {
    min-height: 150px;
}

.import-preview-list {
    max-height: 350px;
    overflow-y: auto;
    border: 1px solid var(--cdl-gray-200);
    border-radius: 6px;
}

.import-preview-table {
    font-size: 0.85rem;
    margin-bottom: 0;
}

.import-preview-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

.import-preview-table th {
    background-color: var(--cdl-gray-100);
    font-weight: 700;
    white-space: nowrap;
    border-bottom: 2px solid var(--cdl-gray-300);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

.import-preview-table td {
    vertical-align: middle;
    font-size: 0.8rem;
}

.import-preview-table code {
    font-size: 0.75rem;
    background: var(--cdl-gray-100);
    padding: 2px 6px;
    border-radius: 3px;
    word-break: break-all;
}

.import-preview-table .material-icons {
    font-size: 1.4rem;
    vertical-align: middle;
}

.import-preview-table .table-danger {
    background-color: rgba(220, 53, 69, 0.06);
}

.import-preview-table .table-danger td {
    color: #721c24;
}

#import-preview-summary {
    display: flex;
    gap: 1rem;
    align-items: center;
}

#import-preview-summary .summary-item {
    display: flex;
    align-items: center;
    gap: 0;
}

#import-preview-summary .summary-label {
    font-weight: 700;
    font-size: 0.82rem;
    padding: 4px 10px;
    border-radius: 4px 0 0 4px;
    color: var(--cdl-white);
}

#import-preview-summary .summary-number {
    font-weight: 700;
    font-size: 1rem;
    padding: 4px 12px;
    border-radius: 0 4px 4px 0;
    color: var(--cdl-white);
}

#import-preview-summary .label-success { background-color: var(--cdl-green); }
#import-preview-summary .label-danger { background-color: var(--cdl-error); }
#import-preview-summary .label-primary { background-color: var(--cdl-dark); }

#import-preview-summary .number-success { background-color: var(--cdl-green-dark); }
#import-preview-summary .number-danger { background-color: #bb2d3b; }
#import-preview-summary .number-primary { background-color: #333; }

.import-mode-selector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0;
    border-top: 1px solid var(--cdl-gray-200);
    margin-top: 1rem;
}

.import-mode-selector .form-check {
    margin: 0;
    padding-left: 1.75rem;
}

.import-mode-selector .form-check-label {
    cursor: pointer;
}

/* ===== 12. RESPONSIVE ===== */
@media (max-width: 1024px) {
    .cdl-editor {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px 16px 60px;
    }

    .cdl-editor__sidebar {
        position: static;
    }

    .cdl-editor__actions-buttons {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .cdl-editor-hero {
        padding: 40px 0 80px;
    }

    .cdl-editor-hero__title {
        font-size: 1.8rem;
    }

    .oligo-item__header {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 14px;
    }

    .oligo-item__header .oligo-price {
        margin-left: 0;
    }

    .oligo-item__body {
        padding: 14px;
    }

    .oligo-options-grid {
        grid-template-columns: 1fr;
    }

    .sequence-widgets {
        flex-direction: column;
    }

    .sequence-widget {
        min-width: 100%;
        max-width: 100%;
    }

    .cdl-editor__actions-header {
        flex-wrap: wrap;
    }

    .cdl-editor__actions-count {
        width: 100%;
        margin-left: 0;
    }

    .cdl-editor__summary-price-amount {
        font-size: 1.6rem;
    }
}

@media (max-width: 576px) {
    .btn-group-bases {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .base-toolbar-label {
        width: 100%;
        justify-content: flex-start;
        padding: 0.25rem 0.5rem;
        border-bottom: 1px solid var(--cdl-gray-200);
    }

    .btn-base {
        min-width: 40px;
        font-size: 0.875rem;
    }

    .cdl-modal-buttons {
        flex-direction: column;
    }
}

/* ===== 13. PRINT ===== */
@media print {
    .cdl-editor-hero,
    .cdl-editor__actions,
    .cdl-editor__sidebar,
    .cdl-editor__add-btn,
    .oligo-item__footer,
    .oligo-item__header-actions,
    .oligo-item__check,
    .modal {
        display: none !important;
    }

    .cdl-editor {
        display: block;
    }

    .oligo-item {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}