.skills-library-modal {
    width: min(1180px, calc(100vw - 32px));
    max-width: 1180px;
    height: min(760px, calc(100vh - 40px));
    max-height: 92vh;
    max-height: 92dvh;
    padding: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.skl-modal-header {
    flex: 0 0 auto;
    min-height: 48px;
    margin: 0 0 10px;
    padding: 0 0 10px;
    top: 0;
}

.skl-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.skl-title-group h2 {
    margin: 0;
}

.skl-subtitle {
    margin: 5px 0 0;
    color: #777895;
    font-size: 9px;
}

.skl-close-btn {
    appearance: none;
    border: 0;
    background: transparent;
}

.skl-organization-marker {
    flex: 0 0 auto;
    margin-bottom: 10px;
    border: 1px solid #3e3e66;
    border-radius: 7px;
    padding: 9px 12px;
    color: #c8c8dc;
    background: #161628;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.skl-organization-marker.is-running {
    border-color: #5e5290;
    color: #c4b9ff;
}

.skl-organization-marker.is-completed,
.skl-organization-marker.is-resolved {
    border-color: #2f7655;
    color: #8bd6ac;
}

.skl-organization-marker.is-partial {
    border-color: #8a6829;
    color: #e7c36d;
}

.skl-marker-dismiss {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 9px;
}

.skl-marker-open {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.skl-topbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin: 0 0 12px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--ui-border);
}

.skl-search {
    width: min(320px, 36%);
    min-width: 180px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid #303052;
    border-radius: 7px;
    background: #111120;
    color: #777895;
}

.skl-search:focus-within {
    border-color: #7163aa;
}

.skl-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #ededf6;
    font: inherit;
    font-size: 10px;
}

.skl-header-actions {
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.skl-header-actions .mtg-btn,
.skl-header-actions .skl-upload-label {
    min-height: 32px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 7px 12px;
    font-size: 9px;
}

.skl-upload-input {
    display: none;
}

.skl-organize-btn {
    color: #f4cf32;
    border-color: #9f8518;
    background: #2a250e;
}

.skl-organize-btn:disabled {
    cursor: not-allowed;
    opacity: .48;
}

.skl-workspace {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(150px, 190px) minmax(280px, 1fr) minmax(250px, 320px);
    border: 1px solid #292944;
    border-radius: 9px;
    overflow: hidden;
    background: #11111d;
}

.skl-category-panel,
.skl-list-panel,
.skl-detail-panel {
    min-width: 0;
    min-height: 0;
}

.skl-category-panel {
    padding: 13px 10px;
    border-right: 1px solid #292944;
    background: #131321;
    overflow-y: auto;
}

.skl-panel-heading,
.skl-list-heading {
    color: #777895;
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.skl-filter-section + .skl-filter-section {
    margin-top: 16px;
}

.skl-category-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.skl-category-item,
.skl-tag-filter {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #a9a9bd;
    text-align: left;
    cursor: pointer;
    font-size: 10px;
}

.skl-tag-filter-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.skl-tag-filter {
    font-size: 9px;
}

.skl-category-item:hover,
.skl-category-item.is-active,
.skl-tag-filter:hover,
.skl-tag-filter.is-active {
    color: #f4cf32;
    border-color: #514619;
    background: #24200e;
}

.skl-category-count,
.skl-list-count {
    color: #777895;
    font-size: 9px;
}

.skl-list-panel {
    display: flex;
    flex-direction: column;
    border-right: 1px solid #292944;
    background: #10101b;
}

.skl-list-heading {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px;
    border-bottom: 1px solid #292944;
}

.skl-cards {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
}

.skl-card {
    width: 100%;
    display: block;
    padding: 11px 12px;
    border: 1px solid #292944;
    border-radius: 7px;
    background: #171726;
    cursor: pointer;
    text-align: left;
}

.skl-card:hover,
.skl-card.is-selected {
    border-color: #7163aa;
    background: #1d1b31;
}

.skl-card-name {
    color: #ededf6;
    font-size: 11px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
}

.skl-card-desc {
    display: -webkit-box;
    margin-top: 6px;
    color: #8f8fa4;
    font-size: 9px;
    line-height: 1.55;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.skl-card-category {
    display: inline-flex;
    margin-top: 8px;
    padding: 3px 6px;
    border-radius: 4px;
    background: #24243a;
    color: #aaa8cc;
    font-size: 8px;
}

.skl-failure-badge {
    display: inline-flex;
    margin: 8px 0 0 6px;
    padding: 3px 6px;
    border-radius: 4px;
    background: #3a2d17;
    color: #e7c36d;
    font-size: 8px;
}

.skl-failure-reason {
    margin-top: 7px;
    color: #c6a95f;
    font-size: 8px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.skl-empty {
    padding: 32px 16px;
    color: #777895;
    font-size: 10px;
    text-align: center;
}

.skl-detail-panel {
    padding: 16px;
    overflow-y: auto;
    background: #141421;
}

.skl-detail-empty {
    height: 100%;
    min-height: 180px;
    display: grid;
    place-items: center;
    color: #68687e;
    font-size: 10px;
    text-align: center;
}

.skl-detail-title {
    margin: 0;
    color: #f1f1f7;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.skl-detail-description {
    margin: 10px 0 16px;
    color: #9a9aaf;
    font-size: 10px;
    line-height: 1.6;
}

.skl-detail-field {
    padding: 10px 0;
    border-top: 1px solid #292944;
}

.skl-detail-label {
    display: block;
    margin-bottom: 5px;
    color: #6f6f84;
    font-size: 8px;
}

.skl-detail-value {
    color: #c8c8d5;
    font-size: 10px;
    overflow-wrap: anywhere;
}

.skl-agent-usage-empty {
    color: #777895;
}

.skl-agent-usage-groups {
    display: grid;
    gap: 8px;
}

.skl-agent-usage-group {
    display: grid;
    gap: 5px;
}

.skl-agent-usage-branch {
    color: #8d8ba5;
    font-size: 8px;
}

.skl-agent-usage-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.skl-agent-usage-chip {
    padding: 4px 6px;
    border: 1px solid #343454;
    border-radius: 5px;
    background: #1c1c30;
    color: #d4d2e6;
    font-size: 8px;
}

.skl-detail-failure .skl-detail-label,
.skl-detail-failure .skl-detail-value {
    color: #d4b45e;
}

.skl-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.skl-tag {
    padding: 3px 6px;
    border-radius: 4px;
    border: 0;
    background: #24243a;
    color: #aaa8cc;
    font-size: 8px;
}

.skl-tag-action {
    cursor: pointer;
}

.skl-tag-action:hover {
    color: #f4cf32;
    background: #302a12;
}

.skl-tag-filter-empty {
    margin-top: 10px;
    color: #777895;
    font-size: 9px;
}

.skl-category-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
    margin-top: 12px;
}

.skl-category-select,
.skl-category-move {
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid #343454;
    border-radius: 5px;
    background: #191929;
    color: #c8c8d5;
    font-size: 9px;
}

.skl-category-move {
    cursor: pointer;
}

.skl-category-select:disabled,
.skl-category-move:disabled,
.skl-detail-actions button:disabled {
    cursor: not-allowed;
    opacity: .48;
}

.skl-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 16px;
}

.skl-detail-actions button {
    padding: 6px 9px;
    border: 1px solid #343454;
    border-radius: 5px;
    background: #191929;
    color: #c8c8d5;
    cursor: pointer;
    font-size: 9px;
}

.skl-detail-actions button:hover {
    border-color: #7163aa;
    color: #f1f1f7;
}

@media (max-width: 900px) {
    .skills-library-modal {
        width: calc(100vw - 20px);
        height: calc(100vh - 24px);
    }

    .skl-workspace {
        grid-template-columns: minmax(140px, 180px) minmax(260px, 1fr);
    }

    .skl-detail-panel {
        display: none;
    }

    .skl-list-panel {
        border-right: 0;
    }
}

@media (max-width: 620px) {
    .skills-library-modal {
        padding: 12px;
    }

    .skl-topbar {
        align-items: stretch;
        flex-direction: column;
    }

    .skl-search {
        width: auto;
        min-width: 0;
    }

    .skl-header-actions {
        width: 100%;
        margin-left: 0;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .skl-header-actions .mtg-btn,
    .skl-header-actions .skl-upload-label {
        min-width: 0;
        padding-inline: 6px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .skl-workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .skl-category-panel {
        border-right: 0;
        border-bottom: 1px solid #292944;
        overflow-x: hidden;
    }

    .skl-category-list {
        flex-direction: column;
        min-width: 0;
    }

    .skl-category-item,
    .skl-tag-filter {
        width: 100%;
    }
}