/* =========================================
           WORD COMBINER — PREMIUM UI
           ========================================= */
    .da-wrapper {
        --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
        --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
        display: flex;
        justify-content: center;
        padding: clamp(0px, 5vw, 0px) 20px;
    }

    .da-panel {
        position: relative;
        width: 100%;
        max-width: 1200px;
        border-radius: 28px;
        padding: clamp(28px, 5vw, 56px);
    }

    /* ---------- SETTINGS BAR ---------- */
    .settings-bar {
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 16px;
        padding: 12px 20px;
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 24px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.02);
        flex-wrap: wrap;
    }

    .sb-label {
        font-size: 12px;
        font-weight: 800;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .sb-sep {
        width: 1px;
        height: 24px;
        background: var(--border-color);
        margin: 0 4px;
    }

    .sep-input {
        width: 60px;
        background: var(--bg-body);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        padding: 6px;
        font-family: 'Space Mono', monospace;
        font-size: 13px;
        color: var(--text-main);
        text-align: center;
        outline: none;
        transition: all 0.2s;
    }

        .sep-input:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1);
        }

    .sep-presets {
        display: flex;
        background: var(--bg-body);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        padding: 2px;
        flex-wrap: wrap;
    }

    .sp-btn {
        background: transparent;
        border: none;
        padding: 0 8px;
        height: 26px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 800;
        color: var(--text-muted);
        cursor: pointer;
        transition: all 0.2s;
        font-family: 'Space Mono', monospace;
    }

        .sp-btn:hover {
            color: var(--text-main);
        }

        .sp-btn.active {
            background: var(--card-bg);
            color: var(--primary-color);
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

    .sw {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        user-select: none;
    }

    .sw-t {
        width: 36px;
        height: 20px;
        background: var(--border-color);
        border-radius: 100px;
        position: relative;
        transition: background 0.3s;
    }

        .sw-t.on {
            background: var(--primary-color);
        }

    .sw-thumb {
        width: 16px;
        height: 16px;
        background: #fff;
        border-radius: 50%;
        position: absolute;
        top: 2px;
        left: 2px;
        transition: transform 0.3s var(--ease-spring);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .sw-t.on .sw-thumb {
        transform: translateX(16px);
    }

    .sw-lbl {
        font-size: 13px;
        font-weight: 700;
        color: var(--text-main);
        white-space: nowrap;
    }

    .dir-toggle {
        display: flex;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 2px;
    }

    .dir-btn {
        background: transparent;
        border: none;
        padding: 4px 8px;
        font-size: 11px;
        font-weight: 800;
        color: var(--text-muted);
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 4px;
    }

        .dir-btn.active {
            background: var(--bg-body);
            color: var(--primary-color);
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

    /* ---------- MAIN GRID ---------- */
    .main-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        margin-bottom: 24px;
        align-items: start;
    }

    @media(max-width: 900px) {
        .main-grid {
            grid-template-columns: 1fr;
        }
    }

    .lists-area {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .add-list-btn {
        background: rgba(var(--primary-color-rgb), 0.05);
        border: 2px dashed rgba(var(--primary-color-rgb), 0.2);
        border-radius: 16px;
        padding: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 800;
        color: var(--primary-color);
        cursor: pointer;
        transition: all 0.2s;
        width: 100%;
    }

        .add-list-btn:hover {
            background: rgba(var(--primary-color-rgb), 0.1);
            border-color: rgba(var(--primary-color-rgb), 0.4);
        }

    .list-card {
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0,0,0,0.02);
        display: flex;
        flex-direction: column;
        transition: border-color 0.2s;
    }

        .list-card:focus-within {
            border-color: var(--primary-color);
        }

    .lc-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        border-bottom: 1px solid var(--border-color);
        background: var(--bg-body);
    }

    .lc-label {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        font-weight: 800;
        color: var(--text-main);
    }

    .lc-meta {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .lc-count {
        font-size: 11px;
        font-weight: 700;
        color: var(--text-muted);
        background: var(--card-bg);
        padding: 2px 8px;
        border-radius: 100px;
        border: 1px solid var(--border-color);
    }

    .lc-textarea {
        width: 100%;
        min-height: 120px;
        background: transparent;
        border: none;
        padding: 16px;
        font-size: 14px;
        line-height: 1.6;
        color: var(--text-main);
        outline: none;
        resize: vertical;
    }

    .lc-footer {
        display: flex;
        gap: 8px;
        padding: 8px 16px;
        border-top: 1px solid var(--border-color);
        background: var(--bg-body);
    }

    /* ---------- OUTPUT PANEL ---------- */
    .output-panel {
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.02);
        height: 100%;
        min-height: 400px;
        position: sticky;
        top: 20px;
    }

    .op-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 1px solid var(--border-color);
        background: var(--bg-body);
        flex-wrap: wrap;
        gap: 12px;
    }

    .op-label {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 800;
        color: var(--text-main);
    }

    .op-meta {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .op-count {
        background: rgba(var(--primary-color-rgb), 0.1);
        border: 1px solid rgba(var(--primary-color-rgb), 0.2);
        font-size: 11px;
        font-weight: 800;
        color: var(--primary-color);
        padding: 4px 10px;
        border-radius: 100px;
    }

    .view-tabs {
        display: flex;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 2px;
    }

    .vt {
        background: transparent;
        border: none;
        padding: 4px 8px;
        font-size: 11px;
        font-weight: 800;
        color: var(--text-muted);
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s;
    }

        .vt.active {
            background: var(--bg-body);
            color: var(--primary-color);
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

    .op-body {
        flex: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .op-empty {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: var(--text-muted);
        gap: 16px;
        font-size: 14px;
        font-weight: 600;
        padding: 40px;
        opacity: 0.6;
    }

    .result-list {
        flex: 1;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        padding: 12px;
    }

    .result-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 12px;
        border-radius: 8px;
        transition: background 0.2s;
    }

        .result-item:hover {
            background: var(--bg-body);
        }

    .ri-num {
        font-size: 10px;
        font-weight: 800;
        color: var(--text-muted);
        opacity: 0.5;
        width: 24px;
        text-align: right;
        font-family: sans-serif;
    }

    .ri-parts {
        flex: 1;
        font-family: 'Space Mono', monospace;
        font-size: 13px;
        word-break: break-all;
    }

    .ri-copy {
        opacity: 0;
        cursor: pointer;
        padding: 4px;
        color: var(--text-muted);
        transition: all 0.2s;
        border-radius: 4px;
    }

        .ri-copy:hover {
            color: var(--primary-color);
            background: rgba(var(--primary-color-rgb), 0.1);
        }

    .result-item:hover .ri-copy {
        opacity: 1;
    }

    .rp-sep {
        color: var(--text-muted);
        opacity: 0.5;
        font-weight: 900;
    }

    .rp-chunk {
        font-weight: 600;
    }

    .op-raw {
        flex: 1;
        width: 100%;
        background: transparent;
        border: none;
        padding: 20px;
        font-size: 14px;
        line-height: 1.6;
        color: var(--text-main);
        outline: none;
        resize: none;
        font-family: 'Space Mono', monospace;
        white-space: pre;
    }

    .op-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 20px;
        border-top: 1px solid var(--border-color);
        background: var(--bg-body);
        flex-wrap: wrap;
        gap: 12px;
    }

    .op-footer-left {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .act-btn {
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 6px 12px;
        font-size: 12px;
        font-weight: 800;
        color: var(--text-main);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        cursor: pointer;
        transition: all 0.2s;
        white-space: nowrap;
    }

        .act-btn:hover {
            border-color: var(--primary-color);
            transform: translateY(-1px);
        }

        .act-btn.danger {
            color: #ef4444;
        }

            .act-btn.danger:hover {
                border-color: #ef4444;
                background: rgba(239,68,68,0.05);
            }

        .act-btn.copied {
            background: #22c55e !important;
            border-color: #22c55e !important;
            color: #fff !important;
        }

    /* ---------- STATS STRIP ---------- */
    .stats-strip {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 16px;
        margin-bottom: 24px;
    }

    .sc {
        background: var(--card-bg);
        border-radius: 16px;
        padding: 20px;
        border: 1px solid var(--border-color);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        transition: transform 0.2s;
    }

        .sc:hover {
            transform: translateY(-2px);
        }

    .sc-ico {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;
    }

        .sc-ico.red {
            background: rgba(239, 68, 68, 0.1);
            color: #ef4444;
        }

        .sc-ico.blue {
            background: rgba(59, 130, 246, 0.1);
            color: #3b82f6;
        }

        .sc-ico.green {
            background: rgba(34, 197, 94, 0.1);
            color: #22c55e;
        }

        .sc-ico.warn {
            background: rgba(245, 158, 11, 0.1);
            color: #f59e0b;
        }

        .sc-ico.purple {
            background: rgba(168, 85, 247, 0.1);
            color: #a855f7;
        }

    .sc-val {
        font-size: 28px;
        font-weight: 900;
        color: var(--text-main);
        line-height: 1;
        margin-bottom: 4px;
        transition: transform 0.3s;
    }

    .sc-lbl {
        font-size: 11px;
        font-weight: 800;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .sc-val.popped {
        transform: scale(1.3);
        color: var(--primary-color);
    }

    /* ---------- CUSTOM DROPDOWN ---------- */
    .custom-dropdown {
        position: relative;
        display: inline-block;
        user-select: none;
        width: 220px;
    }

    .cd-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        background: var(--bg-body);
        border: 1px solid var(--border-color);
        padding: 8px 12px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 800;
        color: var(--text-muted);
        cursor: pointer;
        transition: all 0.2s;
    }

        .cd-header:hover, .custom-dropdown.active .cd-header {
            border-color: var(--primary-color);
            color: var(--primary-color);
            background: var(--primary-light);
        }

    .cd-value {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .cd-body {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        width: 100%;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        padding: 8px;
        z-index: 100;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.2s;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .custom-dropdown.active .cd-body {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .cd-search input {
        width: 100%;
        background: var(--bg-body);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 8px 12px;
        font-size: 13px;
        color: var(--text-main);
        outline: none;
    }

    .cd-list {
        max-height: 200px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

        .cd-list::-webkit-scrollbar {
            width: 4px;
        }

        .cd-list::-webkit-scrollbar-thumb {
            background: var(--border-color);
            border-radius: 4px;
        }

    .cd-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 700;
        color: var(--text-main);
        cursor: pointer;
        transition: background 0.2s;
    }

        .cd-item:hover {
            background: var(--bg-body);
        }

        .cd-item.active {
            background: rgba(var(--primary-color-rgb), 0.05);
            color: var(--primary-color);
        }

    /* ---------- EXAMPLES GRID ---------- */
    .use-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 16px;
        margin-top: 20px;
    }

    .use-card {
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 16px;
        padding: 16px;
        cursor: pointer;
        transition: all 0.2s;
    }

        .use-card:hover {
            transform: translateY(-3px);
            border-color: rgba(var(--primary-color-rgb), 0.3);
            box-shadow: 0 8px 24px rgba(0,0,0,0.04);
        }

    .uc-title {
        font-size: 13px;
        font-weight: 800;
        color: var(--text-main);
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .uc-lists {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .uc-list {
        font-size: 11px;
        font-weight: 700;
        color: var(--text-muted);
        background: var(--bg-body);
        padding: 4px 8px;
        border-radius: 6px;
        border: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .uc-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
    }

    /* ---------- SEP TABLE ---------- */
    .sep-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 12px;
    }

        .sep-table th, .sep-table td {
            padding: 10px 12px;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
            font-size: 13px;
        }

        .sep-table th {
            font-weight: 800;
            color: var(--text-muted);
            background: var(--bg-body);
        }
    /* ── Comparison Panel & Analytics ── */
    .comparison-panel {
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 24px;
        padding: 28px;
        margin-top: 32px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.02);
        margin-bottom: 40px;
    }

    .cp-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        flex-wrap: wrap;
        gap: 12px;
    }

    .cp-title {
        font-size: 16px;
        font-weight: 800;
        color: var(--text-main);
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .cp-badge {
        font-size: 12px;
        font-weight: 800;
        padding: 6px 14px;
        border-radius: 100px;
    }

    .badge-high {
        background: color-mix(in srgb, var(--success, #10b981) 15%, transparent);
        color: var(--success, #10b981);
        border: 1px solid color-mix(in srgb, var(--success, #10b981) 30%, transparent);
    }

    .cp-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
    }

    .cp-card {
        background: var(--bg-body);
        border: 1px solid var(--border-color);
        border-radius: 16px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .cpc-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .cpc-title {
        font-size: 13.5px;
        font-weight: 800;
        color: var(--text-main);
    }

    .cpc-tag {
        font-size: 11.5px;
        font-weight: 800;
        padding: 4px 10px;
        border-radius: 6px;
    }

        .cpc-tag.success {
            background: color-mix(in srgb, var(--success, #10b981) 15%, transparent);
            color: var(--success, #10b981);
        }

    .cpc-body {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .cpc-stat-row {
        font-size: 13px;
        color: var(--text-muted);
        display: flex;
        justify-content: space-between;
    }

        .cpc-stat-row strong {
            color: var(--text-main);
            font-weight: 700;
        }

    .cpc-progress-bar {
        width: 100%;
        height: 8px;
        background: var(--border-color);
        border-radius: 100px;
        overflow: hidden;
        margin-top: 4px;
    }

    .cpc-progress-fill {
        height: 100%;
        background: var(--primary-color);
        border-radius: 100px;
        transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

        .cpc-progress-fill.bg-gradient {
            background: linear-gradient(90deg, var(--primary-color), var(--primary-gradient-end));
        }

    /* Zero-Inline Enhancements */
    #bgCv { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
    .rw-hero-badge i { width: 14px; height: 14px; }
    .settings-bar .spacer { flex: 1; }
    .cd-header i.cd-chevron { width: 14px; height: 14px; }
    .lc-label i { width: 14px; height: 14px; }
    .lc-icon { display: flex; }
    .btn-ghost-sm { padding: 4px 8px; border: none; background: transparent; }
    .btn-ghost-sm i { width: 14px; height: 14px; opacity: 0.5; }
    .act-btn.btn-ghost { border: none; background: transparent; }
    .lc-footer .act-btn i { width: 12px; height: 12px; }
    .add-list-btn i { width: 16px; height: 16px; }
    .op-label i { width: 14px; height: 14px; color: var(--primary-color); }
    .op-empty i { width: 44px; height: 44px; }
    .ri-copy i { width: 12px; height: 12px; }
    .combos-overflow-notice { text-align: center; padding: 14px; font-family: 'Space Mono', monospace; font-size: 11px; color: var(--text-muted); }
    .op-footer-left .act-btn i { width: 12px; height: 12px; }
    .op-results-meta { font-family: 'Space Mono', monospace; font-size: 10px; color: var(--text-muted); }
    .cp-title i { color: var(--primary-color); }
    .info-div-t { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: var(--text-main); margin-bottom: 20px; margin-top: 40px; }
    .info-div-t i { width: 16px; height: 16px; color: var(--primary-color); }