/* KubeBuddy Radar - Modern Styles */

.kb-radar-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    color: #2c3e50;
    font-family: 'Segoe UI', 'Inter', -apple-system, sans-serif;
}

.kb-radar-header {
    text-align: center;
    margin-bottom: 40px;
    padding: 32px 20px;
}

.kb-radar-header h1 {
    font-size: 2.8rem;
    color: #02baff;
    margin: 0 0 12px 0;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.kb-radar-header p {
    color: #b7c2d3;
    font-size: 1.2rem;
    margin: 0;
    font-weight: 400;
}

/* Search and Filter Bar */
.kb-search-filter-bar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
    align-items: center;
}

.kb-search-row,
.kb-filter-row {
    display: flex;
    gap: 12px;
    width: 100%;
    max-width: 880px;
    justify-content: center;
    flex-wrap: wrap;
}

.kb-search-row {
    align-items: stretch;
}

.kb-search-wrapper {
    position: relative;
    display: flex;
    align-items: stretch;
    flex: 1;
    min-width: 220px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(2, 186, 255, 0.35);
    transition: all 0.3s ease;
    background: rgba(15, 23, 42, 0.6);
}

.kb-search-wrapper:focus-within {
    border-color: #02baff;
    box-shadow: 0 0 0 3px rgba(2, 186, 255, 0.15);
}

.kb-search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(2, 186, 255, 0.12);
    color: #02baff;
    padding: 16px;
    font-size: 16px;
    min-width: 48px;
    border-right: 1px solid rgba(2, 186, 255, 0.2);
}

.kb-search-input {
    flex: 1;
    padding: 12px 16px;
    border: none !important;
    background: transparent;
    border-radius: 0;
    font-size: 1rem;
    color: #e5e5e5;
    transition: all 0.3s ease;
}

.kb-search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.kb-search-input:focus {
    outline: none;
    background: transparent;
}

.kb-filter-select {
    padding: 10px 40px 10px 14px;
    border: 1px solid rgba(2, 186, 255, 0.35);
    border-radius: 10px;
    font-size: 0.95rem;
    background: rgba(15, 23, 42, 0.7);
    color: #e5e5e5;
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    min-width: 160px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    color-scheme: dark;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2302baff' stroke-width='2' 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: 20px;
}

.kb-filter-select:hover:not(:disabled) {
    border-color: #02baff;
    box-shadow: 0 4px 12px rgba(2, 186, 255, 0.2);
}

.kb-filter-select:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: rgba(2, 186, 255, 0.3);
    background: rgba(15, 23, 42, 0.5);
}

.kb-filter-select:focus {
    outline: none;
    border-color: #02baff;
    box-shadow: 0 0 0 3px rgba(2, 186, 255, 0.12);
}

.kb-dashboard-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    white-space: nowrap;
}

.kb-results-count {
    color: #b7c2d3;
    font-size: 0.95rem;
    margin-top: 8px;
}


.kb-btn-secondary {
    background: white;
    color: #02baff;
    border: 2px solid #02baff;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.kb-btn-secondary:hover {
    background: linear-gradient(135deg, #02baff 0%, #0284c7 100%);
    color: white;
    box-shadow: none;
    transform: translateY(-2px);
}

.kb-btn-small {
    background: linear-gradient(135deg, #02baff 0%, #0284c7 100%);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    margin-left: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: none;
}

.kb-btn-small:hover {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    box-shadow: 0 2px 8px rgba(2, 186, 255, 0.3);
    transform: translateY(-2px);
}


.kb-radar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

.kb-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.kb-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.25);
    border-color: rgba(2, 186, 255, 0.4);
}

.kb-card:active {
    transform: translateY(-2px);
}

/* Card Header Section with colored background */
.kb-card-header-section {
    background: linear-gradient(135deg, rgba(2, 186, 255, 0.14) 0%, rgba(2, 132, 199, 0.08) 100%);
    padding: 24px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.kb-card-title-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.kb-card-title-row h3 {
    flex: 1;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Grid cards: badges appear below title row */
.kb-card-meta {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
    margin-top: 12px;
}

.kb-card-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.kb-card-logo {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
    flex-shrink: 0;
    background: white;
    padding: 4px;
}

.kb-card:hover .kb-card-logo {
    transform: scale(1.05);
}

.kb-card h3 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    transition: color 0.3s ease;
    line-height: 1.3;
}

.kb-card-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    z-index: 1;
    flex: 1;
    padding: 24px 28px;
}

.kb-card-description {
    font-size: 0.95rem;
    line-height: 1.7;
    opacity: 0.85;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: opacity 0.3s ease;
}

.kb-card:hover .kb-card-description {
    opacity: 1;
}

.kb-card-category {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(2, 186, 255, 0.2);
    color: #5ab3ff;
    font-size: 0.7rem;
    border-radius: 6px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1px solid rgba(2, 186, 255, 0.3);
    width: fit-content;
    margin: 0;
}

/* Category-specific colors */
.kb-card-category[data-category="orchestration"] {
    background: rgba(66, 133, 244, 0.15);
    color: #6ec1ff;
    border-color: rgba(66, 133, 244, 0.3);
}

.kb-card-category[data-category="ci/cd"] {
    background: rgba(52, 168, 83, 0.15);
    color: #81c995;
    border-color: rgba(52, 168, 83, 0.3);
}

.kb-card-category[data-category="service mesh"] {
    background: rgba(251, 188, 5, 0.15);
    color: #fdd663;
    border-color: rgba(251, 188, 5, 0.3);
}

.kb-card-category[data-category="package management"] {
    background: rgba(234, 67, 53, 0.15);
    color: #ff6b6b;
    border-color: rgba(234, 67, 53, 0.3);
}

.kb-card-category[data-category="monitoring"] {
    background: rgba(255, 109, 0, 0.15);
    color: #ff9d5c;
    border-color: rgba(255, 109, 0, 0.3);
}

.kb-card-category[data-category="observability"] {
    background: rgba(233, 30, 99, 0.15);
    color: #f48fb1;
    border-color: rgba(233, 30, 99, 0.3);
}

.kb-card-category[data-category="networking"] {
    background: rgba(156, 39, 176, 0.15);
    color: #ce93d8;
    border-color: rgba(156, 39, 176, 0.3);
}

.kb-card-category[data-category="security & policy"],
.kb-card-category[data-category="security & identity"] {
    background: rgba(244, 67, 54, 0.15);
    color: #ef9a9a;
    border-color: rgba(244, 67, 54, 0.3);
}

.kb-card-category[data-category="autoscaling"] {
    background: rgba(0, 150, 136, 0.15);
    color: #80cbc4;
    border-color: rgba(0, 150, 136, 0.3);
}

.kb-card-category[data-category="general"],
.kb-card-category[data-category="uncategorized"] {
    background: rgba(158, 158, 158, 0.15);
    color: #bdbdbd;
    border-color: rgba(158, 158, 158, 0.3);
}

/* CNCF Status Badges */
.kb-cncf-badge {
    display: inline-block;
    padding: 4px 12px;
    font-size: 0.7rem;
    border-radius: 6px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1px solid;
    width: fit-content;
    margin: 0;
}

.kb-cncf-badge i {
    margin-right: 6px;
    font-size: 0.8em;
}

.kb-badge-graduated {
    background: rgba(52, 168, 83, 0.15);
    color: #81c995;
    border-color: rgba(52, 168, 83, 0.4);
}

.kb-badge-incubating {
    background: rgba(251, 188, 5, 0.15);
    color: #fdd663;
    border-color: rgba(251, 188, 5, 0.4);
}

.kb-badge-sandbox {
    background: rgba(66, 133, 244, 0.15);
    color: #6ec1ff;
    border-color: rgba(66, 133, 244, 0.4);
}

.kb-badge-opensource {
    background: rgba(158, 158, 158, 0.15);
    color: #bdbdbd;
    border-color: rgba(158, 158, 158, 0.4);
}

/* Card meta container for badges */
.kb-card-meta {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
}

/* Detail page badges container */
.kb-detail-badges {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
    margin-bottom: 12px;
}

/* Release Stats Grid */
.kb-release-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 16px 0;
}

.kb-stat-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    transition: all 0.2s ease;
}

.kb-stat-box:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
}

.kb-stat-box .kb-stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    font-family: 'Courier New', monospace;
    margin-bottom: 8px;
}

.kb-stat-box .kb-stat-label {
    font-size: 0.75rem;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.kb-stat-box-full {
    grid-column: 1 / -1;
}

/* Card Actions */
.kb-card-actions {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-bottom: 12px;
}

.kb-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    flex: 1;
    min-width: 0;
}

.kb-card-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.kb-btn-github:hover {
    background: rgba(51, 51, 51, 0.3);
    border-color: rgba(51, 51, 51, 0.5);
}

.kb-btn-docs:hover {
    background: rgba(2, 186, 255, 0.2);
    border-color: rgba(2, 186, 255, 0.4);
}

.kb-card-links {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.kb-card-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #02baff;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.kb-card-link:hover {
    color: #0284c7;
    gap: 6px;
}

.kb-card-meta {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    font-size: 0.85rem;
    color: #b7c2d3;
}

.kb-card-footer {
    margin-top: auto;
    position: relative;
    z-index: 1;
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Subscribe Button on Card */
.kb-card-subscribe {
    width: 100%;
    background: linear-gradient(135deg, #02baff 0%, #0284c7 100%);
    color: white;
    border: none;
    padding: 11px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: none;
}

.kb-card-subscribe:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(2, 186, 255, 0.3);
}

.kb-card-subscribe.subscribed {
    background: linear-gradient(135deg, #34a853 0%, #2d8e47 100%);
    box-shadow: 0 4px 12px rgba(52, 168, 83, 0.3);
}

.kb-card-subscribe.subscribed:hover {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    box-shadow: 0 6px 16px rgba(220, 53, 69, 0.4);
}

/* Hide the checkmark icon on hover */
.kb-card-subscribe.subscribed:hover .fas.fa-check {
    display: none;
}

/* Hide the normal text on hover */
.kb-card-subscribe.subscribed:hover .kb-btn-text {
    display: none;
}

/* Show X icon and Unsubscribe text on hover */
.kb-card-subscribe.subscribed:hover::after {
    content: '\f00d\00a0\00a0Unsubscribe';
    font-family: 'Font Awesome 6 Free', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: none !important;
}

.kb-view-details-btn {
    width: 100%;
    background: rgba(2, 186, 255, 0.15);
    color: inherit;
    border: 2px solid rgba(2, 186, 255, 0.3);
    padding: 11px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.kb-radar-container a:focus-visible,
.kb-radar-container button:focus-visible,
.kb-radar-container input:focus-visible,
.kb-radar-container select:focus-visible {
    outline: 2px solid rgba(2, 186, 255, 0.85);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(2, 186, 255, 0.2);
}

.kb-view-details-btn:hover {
    background: rgba(2, 186, 255, 0.25);
    border-color: rgba(2, 186, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: none;
}

.kb-card:hover .kb-view-details-btn {
    gap: 12px;
}

/* Load More Button */
.kb-load-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 40px auto;
    padding: 16px 32px;
    background: rgba(2, 186, 255, 0.08);
    border: 1px solid rgba(2, 186, 255, 0.3);
    border-radius: 8px;
    color: #02baff;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.kb-load-more-btn i {
    font-size: 14px;
}

.kb-load-more-btn:hover {
    background: rgba(2, 186, 255, 0.15);
    border-color: rgba(2, 186, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: none;
}

.kb-load-more-btn:active {
    transform: translateY(0);
}

/* Show More Button for Releases */
.kb-show-more-container {
    text-align: center;
    margin-top: 24px;
}

.kb-show-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    background: rgba(2, 186, 255, 0.08);
    border: 1px solid rgba(2, 186, 255, 0.3);
    border-radius: 8px;
    color: #02baff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.kb-show-more-btn:hover {
    background: rgba(2, 186, 255, 0.15);
    border-color: rgba(2, 186, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: none;
}

.kb-show-more-btn:active {
    transform: translateY(0);
}

.kb-show-more-count {
    opacity: 0.7;
    font-size: 13px;
}


/* Release Stats Grid */
.kb-release-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: auto;
}

.kb-stat-box {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    transition: all 0.3s ease;
}

.kb-stat-box:hover {
    background: rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.kb-stat-number {
    font-size: 1.8rem;
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
    line-height: 1;
}

.kb-stat-label {
    font-size: 0.75rem;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.kb-latest-version {
    grid-column: 1 / -1;
}

.kb-latest-version .kb-stat-number {
    font-size: 1.4rem;
    font-family: 'Courier New', monospace;
}

.kb-loading {
    text-align: center;
    padding: 80px 20px;
    font-size: 1.2rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
}

.kb-loading::before {
    content: '⟳';
    display: block;
    font-size: 3rem;
    margin-bottom: 20px;
    animation: spin 2s linear infinite;
}

/* No results found styling */
.kb-no-results {
    text-align: center;
    padding: 80px 20px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    max-width: 560px;
    margin: 40px auto 0;
}

.kb-no-results i {
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.3);
    display: block;
    margin-bottom: 20px;
    animation: searchPulse 2s ease-in-out infinite;
}

.kb-no-results p {
    font-size: 1.2rem;
    font-weight: 500;
    margin: 0 0 10px 0;
    color: rgba(255, 255, 255, 0.9);
}

.kb-no-results small {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
}

.kb-no-results-btn {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
}

@keyframes searchPulse {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.5;
    }
    50% { 
        transform: scale(1.1);
        opacity: 0.8;
    }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .kb-radar-container {
        padding: 0;
    }
    
    .kb-radar-header {
        padding: 32px 0;
        margin-bottom: 20px;
    }
    
    .kb-radar-header h1 {
        font-size: 2rem;
    }
    
    .kb-radar-header p {
        font-size: 1rem;
    }
    
    .kb-search-filter-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 0 15px;
    }

    .kb-search-row,
    .kb-filter-row {
        flex-direction: column;
        align-items: stretch;
        max-width: none;
    }
    
    
    .kb-search-input,
    .kb-filter-select {
        width: 100%;
        max-width: none;
    }

    .kb-dashboard-btn {
        width: 100%;
    }
    
    .kb-radar-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px 15px;
    }
    
    .kb-card {
        padding: 0;
    }
    
    .kb-card-header-section {
        padding: 20px 20px 16px 20px;
    }
    
    .kb-card h3 {
        font-size: 1.2rem;
    }
    
    .kb-card-logo {
        width: 48px;
        height: 48px;
    }
    
    .kb-card-body {
        padding: 20px;
    }
    
    .kb-releases-grid {
        grid-template-columns: 1fr;
    }
    
    .kb-modal-content {
        width: 95%;
        margin: 10px;
    }
    
    .kb-modal-header {
        flex-direction: column;
        text-align: center;
    }
    
    .kb-subscribe-btn {
        margin: 15px 0 0;
    }
    
    
    .kb-header-actions {
        flex-direction: column;
    }
    
    /* Detail Page Mobile Styles */
    .kb-detail-hero {
        padding: 20px !important;
        overflow: visible !important;
    }
    
    .kb-detail-header {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        align-items: center !important;
        margin-bottom: 16px !important;
        position: relative !important;
    }
    
    .kb-detail-logo {
        width: 80px !important;
        height: 80px !important;
        flex-shrink: 0;
    }
    
    .kb-detail-title-wrapper {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .kb-detail-title-wrapper h1 {
        font-size: 1.8rem !important;
        margin: 0 !important;
    }
    
    .kb-detail-content {
        width: 100% !important;
    }
    
    .kb-detail-badges {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: flex-start !important;
        margin-bottom: 16px !important;
    }
    
    .kb-detail-description {
        font-size: 1rem !important;
        margin-bottom: 16px !important;
        padding: 0 !important;
    }
    
    .kb-detail-subscribe-btn {
        width: 100% !important;
        margin: 0 0 12px 0 !important;
        padding: 14px 24px !important;
        font-size: 1rem !important;
    }

    .kb-detail-labels {
        margin-bottom: 12px !important;
    }

    .kb-detail-link-button {
        width: 100%;
        justify-content: center;
    }
    
    .kb-detail-links {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }
    
    .kb-detail-link {
        flex: 1 !important;
        font-size: 0.85rem !important;
        padding: 10px 12px !important;
        justify-content: center !important;
    }
    
    .kb-detail-stats {
        grid-template-columns: 1fr 1fr !important;
    }
    
    .kb-releases-section {
        padding: 0 15px;
        overflow: hidden;
    }
    
    .kb-releases-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
    }
    
    .kb-releases-header h2 {
        font-size: 1.5rem;
    }
    
    .kb-releases-section .kb-release-card {
        padding: 16px;
        overflow: visible;
        word-wrap: break-word;
    }
    
    .kb-releases-section .kb-release-card-header {
        flex-wrap: wrap;
    }

    .kb-releases-section .kb-release-title-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .kb-releases-section .kb-view-release-notes-btn {
        width: 100%;
        justify-content: center;
    }
    
    .kb-releases-section .kb-release-card-body {
        overflow: visible;
    }
    
    .kb-releases-section .kb-release-notes {
        overflow-x: hidden;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .kb-releases-section .kb-release-notes * {
        max-width: 100%;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
}

@media (max-width: 480px) {
    .kb-radar-header h1 {
        font-size: 1.6rem;
    }
    
    .kb-card-header-section {
        padding: 16px !important;
    }
    
    .kb-card-title-row {
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 12px !important;
    }
    
    .kb-card-logo {
        width: 56px !important;
        height: 56px !important;
    }
    
    .kb-card-title-content {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .kb-card-title-content h3 {
        font-size: 1.1rem !important;
        margin: 0 0 8px 0 !important;
    }
    
    .kb-card-meta {
        width: 100% !important;
        flex-basis: 100% !important;
        margin-top: 8px !important;
        order: 10 !important;
    }
    
    .kb-card-links {
        flex-direction: column;
        gap: 8px;
    }
    
    .kb-release-notes * {
        max-width: 100%;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
}

/* Header Actions */
.kb-header-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 32px;
}

.kb-header-actions a {
    text-decoration: none;
}

/* Subscribed Badge */
.kb-subscribed-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 6px 12px;
    background: rgba(52, 168, 83, 0.9);
    color: white;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(52, 168, 83, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 10;
    backdrop-filter: blur(10px);
}

/* Product Detail Page */
.kb-product-detail-container {
    max-width: 1200px;
    margin: 0 auto;
}

.kb-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #02baff;
    text-decoration: none;
    margin-bottom: 24px;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s;
    opacity: 0.8;
}

.kb-back-link:hover {
    opacity: 1;
    gap: 12px;
}

/* Detail Hero Section */
.kb-detail-hero {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 40px;
    margin-bottom: 32px;
    backdrop-filter: blur(10px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25);
}

.kb-detail-header {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
    position: relative;
}

.kb-detail-logo {
    width: 120px;
    height: 120px;
    border-radius: 20px;
    flex-shrink: 0;
    background: white;
    padding: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.kb-detail-title-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
}

.kb-detail-title-wrapper h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.03em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kb-detail-content {
    width: 100%;
}

.kb-detail-description {
    font-size: 1.1rem;
    line-height: 1.7;
    opacity: 0.95;
    margin: 0 0 20px 0;
    color: inherit;
}

.kb-detail-labels {
    margin: 6px 0 16px 0;
}

.kb-detail-labels-empty {
    margin: 0;
    color: #94a3b8;
    font-size: 0.9rem;
}

.kb-detail-link-button {
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(15, 23, 42, 0.6);
    color: #cbd5e1;
    cursor: pointer;
}

/* Desktop: Subscribe button positioned top right */
.kb-detail-subscribe-btn {
    padding: 16px 32px;
    background: linear-gradient(135deg, #02baff 0%, #0284c7 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    white-space: nowrap;
    text-transform: none !important;
    min-width: 200px;
    margin-bottom: 20px;
}

/* Desktop only: Position subscribe button top-right */
@media (min-width: 769px) {
    .kb-detail-subscribe-btn {
        position: absolute;
        top: 0;
        right: 0;
        margin-bottom: 0;
        margin-right: 16px;
        margin-top: 16px;
    }
}

.kb-detail-category {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(2, 186, 255, 0.15);
    color: #5ab3ff;
    font-size: 0.75rem;
    border-radius: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(2, 186, 255, 0.3);
}

/* Category-specific colors for detail page */
.kb-detail-category[data-category="orchestration"] {
    background: rgba(66, 133, 244, 0.15);
    color: #6ec1ff;
    border-color: rgba(66, 133, 244, 0.3);
}

.kb-detail-category[data-category="ci/cd"] {
    background: rgba(52, 168, 83, 0.15);
    color: #81c995;
    border-color: rgba(52, 168, 83, 0.3);
}

.kb-detail-category[data-category="service mesh"] {
    background: rgba(251, 188, 5, 0.15);
    color: #fdd663;
    border-color: rgba(251, 188, 5, 0.3);
}

.kb-detail-category[data-category="package management"] {
    background: rgba(234, 67, 53, 0.15);
    color: #ff6b6b;
    border-color: rgba(234, 67, 53, 0.3);
}

.kb-detail-category[data-category="monitoring"] {
    background: rgba(255, 109, 0, 0.15);
    color: #ff9d5c;
    border-color: rgba(255, 109, 0, 0.3);
}

.kb-detail-category[data-category="observability"] {
    background: rgba(233, 30, 99, 0.15);
    color: #f48fb1;
    border-color: rgba(233, 30, 99, 0.3);
}

.kb-detail-category[data-category="networking"] {
    background: rgba(156, 39, 176, 0.15);
    color: #ce93d8;
    border-color: rgba(156, 39, 176, 0.3);
}

.kb-detail-category[data-category="security & policy"],
.kb-detail-category[data-category="security & identity"] {
    background: rgba(244, 67, 54, 0.15);
    color: #ef9a9a;
    border-color: rgba(244, 67, 54, 0.3);
}

.kb-detail-category[data-category="autoscaling"] {
    background: rgba(0, 150, 136, 0.15);
    color: #80cbc4;
    border-color: rgba(0, 150, 136, 0.3);
}

.kb-detail-category[data-category="general"],
.kb-detail-category[data-category="uncategorized"] {
    background: rgba(158, 158, 158, 0.15);
    color: #bdbdbd;
    border-color: rgba(158, 158, 158, 0.3);
}



.kb-detail-links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.kb-detail-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    min-width: 140px;
    justify-content: center;
}

.kb-detail-link:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.kb-detail-subscribe-btn i {
    font-size: 1rem;
}

.kb-detail-subscribe-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(2, 186, 255, 0.3);
}

.kb-detail-subscribe-btn.subscribed {
    background: linear-gradient(135deg, #34a853 0%, #2d8e47 100%);
    box-shadow: 0 8px 24px rgba(52, 168, 83, 0.4);
}

.kb-detail-subscribe-btn.subscribed:hover {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    box-shadow: 0 12px 32px rgba(220, 53, 69, 0.5);
}

/* Hide the checkmark icon on hover */
.kb-detail-subscribe-btn.subscribed:hover i {
    display: none;
}

/* Hide the text content on hover by making it invisible but maintaining space */
.kb-detail-subscribe-btn.subscribed:hover {
    color: transparent;
}

/* Show X icon and Unsubscribe text on hover */
.kb-detail-subscribe-btn.subscribed:hover::before {
    content: '\f00d\00a0\00a0Unsubscribe';
    font-family: 'Font Awesome 6 Free', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: white;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Stats Grid */
.kb-detail-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.kb-detail-stat {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    transition: all 0.3s ease;
}

.kb-detail-stat:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.kb-product-detail-container a:focus-visible,
.kb-product-detail-container button:focus-visible,
.kb-product-detail-container input:focus-visible,
.kb-product-detail-container select:focus-visible {
    outline: 2px solid rgba(2, 186, 255, 0.85);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(2, 186, 255, 0.2);
}

.kb-detail-stat .kb-stat-label {
    display: block;
    font-size: 0.8rem;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    margin-bottom: 8px;
}

.kb-detail-stat .kb-stat-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0;
    font-family: 'Courier New', monospace;
}

.kb-latest-stat .kb-stat-number {
    font-size: 1.8rem;
    font-family: 'Courier New', monospace;
}

/* Releases Section */
.kb-releases-section {
    margin-top: 32px;
}

.kb-releases-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.kb-releases-header h2 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

.kb-release-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

@media (max-width: 900px) {
    .kb-detail-hero {
        padding: 28px;
    }

    .kb-detail-logo {
        width: 96px;
        height: 96px;
    }

    .kb-detail-title-wrapper h1 {
        font-size: 2.1rem;
    }
}

/* Release Tabs */
.kb-release-tabs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.kb-tab {
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: inherit;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.kb-tab:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(2, 186, 255, 0.3);
}

.kb-tab.active {
    background: rgba(2, 186, 255, 0.15);
    border-color: rgba(2, 186, 255, 0.5);
    color: #02baff;
}

/* Release Cards */
.kb-releases-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kb-load-more-container {
    display: flex;
    justify-content: center;
    margin-top: 24px;
    padding: 24px 0;
}

.kb-load-more-container .kb-btn-secondary {
    padding: 12px 32px;
    font-size: 1rem;
}

.kb-releases-section .kb-release-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.kb-releases-section .kb-release-card:hover {
    border-color: rgba(2, 186, 255, 0.35);
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25);
}

.kb-releases-section .kb-release-card.expanded {
    background: rgba(2, 186, 255, 0.06);
    border-color: rgba(2, 186, 255, 0.3);
}

.kb-releases-section .kb-release-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.kb-releases-section .kb-release-header-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kb-releases-section .kb-release-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.kb-releases-section .kb-release-meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: #b7c2d3;
}

.kb-releases-section .kb-release-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kb-semver-pill {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    gap: 6px;
    align-items: center;
}

.kb-semver-major {
    background: rgba(217, 70, 239, 0.16);
    color: #d946ef;
    border: 1px solid rgba(217, 70, 239, 0.32);
}

.kb-semver-minor {
    background: rgba(20, 184, 166, 0.16);
    color: #14b8a6;
    border: 1px solid rgba(20, 184, 166, 0.32);
}

.kb-semver-patch {
    background: rgba(148, 163, 184, 0.16);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.32);
}

.kb-semver-pill i {
    margin-right: 6px;
}

/* Security Badges */
.kb-security-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    border: 1.5px solid;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    cursor: help;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.kb-severity-label {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.15);
}

.kb-cve-link {
    color: inherit !important;
    text-decoration: underline;
    opacity: 0.95;
    transition: opacity 0.2s;
}

.kb-cve-link:hover {
    opacity: 1;
    text-decoration: underline;
}

.kb-cve-id {
    opacity: 0.9;
}

.kb-security-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.kb-security-critical {
    color: #ff4444;
    border-color: #ff4444;
    background: rgba(255, 68, 68, 0.15);
}

.kb-security-high {
    color: #ff9944;
    border-color: #ff9944;
    background: rgba(255, 153, 68, 0.15);
}

.kb-security-medium {
    color: #ffdd44;
    border-color: #ffdd44;
    background: rgba(255, 221, 68, 0.15);
}

.kb-security-low {
    color: #4488ff;
    border-color: #4488ff;
    background: rgba(68, 136, 255, 0.15);
}

.kb-security-none {
    color: #888;
    border-color: #888;
    background: rgba(136, 136, 136, 0.15);
}

/* Security summary section */
.kb-security-summary {
    background: linear-gradient(135deg, rgba(255, 68, 68, 0.1) 0%, rgba(255, 153, 68, 0.1) 100%);
    border-left: 4px solid #ff4444;
    padding: 16px 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.kb-security-summary strong {
    color: #ff4444;
    display: block;
    margin-bottom: 8px;
    font-size: 1rem;
}

/* Impact summary section */
.kb-impact-summary {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(168, 85, 247, 0.08) 100%);
    border-left: 4px solid #3b82f6;
    padding: 16px 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.kb-impact-summary strong {
    color: #3b82f6;
    display: block;
    margin-bottom: 12px;
    font-size: 1rem;
}

.kb-impact-summary ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.kb-impact-summary li {
    padding: 8px 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.kb-impact-summary li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.kb-impact-badge-inline {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Highlight security releases */
.kb-releases-section .kb-release-card.kb-has-security {
    border: 2px solid rgba(255, 68, 68, 0.3);
    box-shadow: 0 4px 16px rgba(255, 68, 68, 0.15);
}

.kb-releases-section .kb-release-card.kb-has-security:hover {
    border-color: rgba(255, 68, 68, 0.5);
    box-shadow: 0 6px 24px rgba(255, 68, 68, 0.25);
}

.kb-pill-app {
    background: rgba(52, 168, 83, 0.15);
    color: #34a853;
    border: 1px solid rgba(52, 168, 83, 0.3);
}

.kb-pill-helm {
    background: rgba(66, 133, 244, 0.15);
    color: #4285f4;
    border: 1px solid rgba(66, 133, 244, 0.3);
}

.kb-pill-pre {
    background: rgba(251, 188, 5, 0.15);
    color: #fbbc05;
    border: 1px solid rgba(251, 188, 5, 0.3);
}

.kb-release-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    font-family: 'Courier New', monospace;
    color: inherit;
}

.kb-release-date {
    font-size: 0.85rem;
    color: #b7c2d3;
}

.kb-view-release-notes-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(2, 186, 255, 0.12);
    border: 1px solid rgba(2, 186, 255, 0.3);
    border-radius: 6px;
    color: #5ab3ff;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.75rem;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.kb-view-release-notes-btn:hover {
    background: rgba(2, 186, 255, 0.2);
    border-color: rgba(2, 186, 255, 0.5);
    color: #6ec1ff;
    transform: translateY(-1px);
}

.kb-expand-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kb-expand-btn:hover {
    background: rgba(2, 186, 255, 0.15);
    transform: scale(1.05);
}

.kb-expand-btn i {
    transition: transform 0.3s ease;
}

.kb-release-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.kb-releases-section .kb-release-card.expanded .kb-release-content {
    max-height: none;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.kb-release-notes-content {
    line-height: 1.7;
    font-size: 0.95rem;
    color: #c9d1d9;
}

.kb-release-notes-content p {
    margin: 0 0 12px 0;
}

.kb-release-notes-content ul,
.kb-release-notes-content ol {
    margin: 0 0 12px 18px;
}

.kb-release-notes-content h3 {
    font-size: 1rem;
    margin: 0 0 16px 0;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
    line-height: 1.6;
    padding: 8px 12px;
    border-radius: 6px;
    border-left: 4px solid transparent;
}

.kb-release-notes-content h4 {
    font-size: 0.95rem;
    margin: 16px 0 10px 0;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 6px;
    border-left: 4px solid transparent;
}

/* Color-coded section headings - use JS to add these classes based on content */

/* Breaking Changes - Red */
.kb-release-notes-content h3.kb-section-breaking,
.kb-release-notes-content h4.kb-section-breaking {
    background: rgba(244, 67, 54, 0.1);
    border-left-color: #f44336;
    color: #ff6b6b !important;
}

/* Key Features - Green */
.kb-release-notes-content h3.kb-section-features,
.kb-release-notes-content h4.kb-section-features {
    background: rgba(52, 168, 83, 0.1);
    border-left-color: #34a853;
    color: #81c995 !important;
}

/* Good to Know - Blue */
.kb-release-notes-content h3.kb-section-info,
.kb-release-notes-content h4.kb-section-info {
    background: rgba(2, 186, 255, 0.1);
    border-left-color: #02baff;
    color: #5ab3ff !important;
}

/* Improvements / Enhancements - Cyan */
.kb-release-notes-content h3.kb-section-improvement,
.kb-release-notes-content h4.kb-section-improvement {
    background: rgba(0, 188, 212, 0.1);
    border-left-color: #00bcd4;
    color: #4dd0e1 !important;
}

/* Bug Fixes - Orange */
.kb-release-notes-content h3.kb-section-bugfix,
.kb-release-notes-content h4.kb-section-bugfix {
    background: rgba(255, 152, 0, 0.1);
    border-left-color: #ff9800;
    color: #ffb74d !important;
}

/* Deprecation - Yellow */
.kb-release-notes-content h3.kb-section-deprecation,
.kb-release-notes-content h4.kb-section-deprecation {
    background: rgba(251, 188, 5, 0.1);
    border-left-color: #fbbc05;
    color: #fdd663 !important;
}

.kb-release-notes-content ul {
    padding-left: 0;
    margin-left: 0;
    list-style-position: inside;
}

.kb-release-notes-content li {
    margin-bottom: 8px;
    padding-left: 0;
    color: rgba(255, 255, 255, 0.85);
}

.kb-release-notes-content a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    margin-top: 16px;
    background: rgba(2, 186, 255, 0.12);
    border: 1px solid rgba(2, 186, 255, 0.3);
    border-radius: 8px;
    color: #5ab3ff;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.kb-release-notes-content a:hover {
    background: rgba(2, 186, 255, 0.2);
    border-color: rgba(2, 186, 255, 0.5);
    color: #6ec1ff;
    transform: translateY(-1px);
}

.kb-no-notes {
    opacity: 0.5;
    font-style: italic;
}

.kb-repo-link:hover {
    color: #0284c7;
}

.kb-login-prompt {
    color: #5f6368;
    font-size: 0.95rem;
}

.kb-login-prompt a {
    color: #02baff;
    text-decoration: none;
}

.kb-login-prompt a:hover {
    color: #0284c7;
}

/* Settings Panel */
.kb-settings-panel {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 32px;
    backdrop-filter: blur(10px);
}

.kb-settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    margin: -8px 0 0 0;
}

.kb-settings-header:hover h3 {
    color: #02baff;
}

.kb-settings-toggle-icon {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
    color: rgba(255, 255, 255, 0.6);
}

.kb-settings-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.kb-settings-content.expanded {
    max-height: 2000px;
    margin-top: 24px;
    overflow: visible;
}

.kb-settings-panel h3 {
    margin-top: 0;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 0;
    transition: color 0.3s ease;
}

.kb-settings-section {
    margin-bottom: 25px;
}

.kb-settings-section h4 {
    margin-bottom: 15px;
    font-size: 1.2rem;
    font-weight: 600;
}

.kb-form-group {
    margin-bottom: 15px;
}

.kb-form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.95rem;
    font-weight: 500;
}

.kb-form-group input[type="checkbox"] {
    margin-right: 8px;
}

.kb-input {
    width: 100%;
    max-width: 500px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: inherit;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.kb-input:focus {
    outline: none;
    border-color: rgba(2, 186, 255, 0.5);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 0 3px rgba(2, 186, 255, 0.1);
}

.kb-input:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(15, 23, 42, 0.5);
}

/* Style email frequency select like filter dropdowns */
#kb-email-frequency {
    padding: 12px 40px 12px 16px;
    border: 2px solid #02baff;
    border-radius: 8px;
    font-size: 1rem;
    background: #0f172a;
    color: #e5e5e5;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 200px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    color-scheme: dark;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2302baff' stroke-width='2' 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: 20px;
}

#kb-email-frequency:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: rgba(2, 186, 255, 0.3);
    background: rgba(15, 23, 42, 0.5);
}

#kb-email-frequency:focus {
    outline: none;
    border-color: #02baff;
    box-shadow: 0 0 0 3px rgba(2, 186, 255, 0.1);
}

.kb-btn-primary {
    background: linear-gradient(135deg, #02baff 0%, #0284c7 100%);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: none;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
}

.kb-btn-primary:hover {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    box-shadow: 0 2px 8px rgba(2, 186, 255, 0.3);
    transform: translateY(-2px);
}

/* Load More Button */
.kb-load-more-container {
    text-align: center;
    padding: 40px 20px 20px 20px;
}

.kb-btn-load-more {
    min-width: 200px;
}

.kb-remaining-count {
    opacity: 0.8;
    font-size: 0.9rem;
}

.kb-btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: inherit;
    border: 2px solid rgba(255, 255, 255, 0.2);
    padding: 12px 24px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    box-shadow: none;
}

.kb-btn-secondary:hover {
    background: rgba(2, 186, 255, 0.15);
    border-color: rgba(2, 186, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: none;
}

.kb-btn-small {
    background: linear-gradient(135deg, #02baff 0%, #0284c7 100%);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    margin-left: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: none;
}

.kb-btn-small:hover {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    box-shadow: 0 2px 8px rgba(2, 186, 255, 0.3);
    transform: translateY(-2px);
}

/* Releases Section */
.kb-releases-section {
    margin-top: 32px;
}

.kb-releases-section h3 {
    color: #02baff;
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.kb-releases-section h4 {
    color: #b7c2d3;
    font-size: 1.1rem;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.kb-no-releases {
    color: #b7c2d3;
    font-style: italic;
}

.kb-release-item {
    background: rgba(255, 255, 255, 0.06);
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.kb-release-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(2, 186, 255, 0.35);
    transform: translateY(-1px);
}

.kb-release-item.expanded {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(2, 186, 255, 0.35);
}

.kb-release-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.kb-release-notes {
    display: none;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #c9d1d9;
    line-height: 1.6;
    max-height: 400px;
    overflow-y: auto;
}

.kb-release-notes.expanded {
    display: block;
}

/* Dashboard */
/* Notification Settings Card */
.kb-notification-settings-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 30px;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

#kb-recent-activity,
#kb-global-settings,
#kb-subscriptions {
    scroll-margin-top: 120px;
}

.kb-recent-activity-card .kb-card-subtitle {
    margin-top: 4px;
}

.kb-activity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.kb-activity-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kb-activity-controls .kb-pro-badge {
    position: static;
    margin: 0;
}

.kb-activity-toggle {
    gap: 10px;
    font-size: 0.9rem;
}

.kb-toggle-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.kb-pro-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #22c55e;
    color: white;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
    z-index: 10;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.kb-feature-card .kb-pro-badge {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.kb-activity-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kb-activity-day {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 8px;
}

.kb-activity-item {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

.kb-activity-item:hover {
    border-color: rgba(2, 186, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.kb-activity-item.kb-has-security {
    border-color: rgba(255, 68, 68, 0.35);
    box-shadow: 0 4px 16px rgba(255, 68, 68, 0.12);
}

.kb-activity-item.kb-has-security:hover {
    border-color: rgba(255, 68, 68, 0.55);
    box-shadow: 0 6px 20px rgba(255, 68, 68, 0.2);
}

.kb-activity-logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #ffffff;
    padding: 4px;
    object-fit: contain;
    flex-shrink: 0;
}

.kb-activity-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.kb-activity-title {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: 0.95rem;
    color: #ffffff;
}

.kb-activity-name {
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kb-activity-version {
    font-family: 'Courier New', monospace;
    color: #cbd5e1;
}

.kb-activity-meta .kb-release-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kb-activity-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

.kb-activity-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.kb-activity-meta .kb-cncf-badge {
    padding: 3px 10px;
    font-size: 0.65rem;
}

.kb-delivery-logs-card {
    margin-top: 30px;
    position: relative;
    z-index: 1;
}

.kb-delivery-logs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.kb-delivery-logs-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.kb-delivery-filter-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.75);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.kb-delivery-filter-btn:hover {
    color: #ffffff;
    border-color: rgba(2, 186, 255, 0.4);
    background: rgba(2, 186, 255, 0.12);
}

.kb-delivery-filter-active {
    color: #02baff;
    border-color: rgba(2, 186, 255, 0.5);
    background: rgba(2, 186, 255, 0.18);
}
.kb-delivery-logs-table {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kb-delivery-logs-row {
    display: grid;
    grid-template-columns: 140px 200px 1.5fr 1.5fr 140px 36px;
    gap: 16px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.kb-delivery-logs-row:hover {
    border-color: rgba(2, 186, 255, 0.25);
    background: rgba(255, 255, 255, 0.1);
}

.kb-log-details-toggle {
    margin-top: 6px;
    background: transparent;
    border: none;
    color: #02baff;
    font-size: 0.8rem;
    cursor: pointer;
}

.kb-log-project-details {
    margin-top: 8px;
    color: #e2e8f0;
    font-size: 0.85rem;
    line-height: 1.5;
    display: none;
}

.kb-log-expand-cell {
    display: flex;
    justify-content: flex-end;
}

.kb-log-expand-toggle {
    background: transparent;
    border: none;
    color: #02baff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.kb-log-expand-toggle:hover {
    color: #02baff;
    background: transparent;
}

.kb-log-expand-spacer {
    width: 28px;
    height: 28px;
    display: inline-block;
}

.kb-log-expanded .kb-log-project-details {
    display: block;
}

.kb-log-error-full {
    margin-top: 8px;
    color: #fecaca;
    font-size: 0.85rem;
    white-space: pre-wrap;
    display: none;
}

.kb-log-expanded .kb-log-error-full {
    display: block;
}

.kb-delivery-logs-head {
    background: transparent;
    border: none;
    padding: 0 16px 6px 16px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    align-items: start;
}

.kb-delivery-logs-head > div:last-child {
    text-align: right;
}

.kb-delivery-logs-head .kb-sortable {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}

.kb-delivery-logs-head .kb-sortable:hover {
    color: rgba(255, 255, 255, 0.9);
}

.kb-delivery-logs-head .kb-sortable i {
    font-size: 0.7rem;
    opacity: 0.5;
}

.kb-delivery-logs-head .kb-sortable-active {
    color: #02baff;
}

.kb-delivery-logs-head .kb-sortable-active i {
    opacity: 1;
}

.kb-delivery-logs-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kb-delivery-logs-empty {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    padding: 8px 0;
}

.kb-log-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.kb-log-status-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

.kb-log-status-success {
    color: #34a853;
}

.kb-log-status-success .kb-log-status-icon {
    background: rgba(52, 168, 83, 0.15);
    border: 1px solid rgba(52, 168, 83, 0.4);
}

.kb-log-status-failed {
    color: #ef4444;
}

.kb-log-status-failed .kb-log-status-icon {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.kb-log-event {
    color: #ffffff;
    font-weight: 600;
}

.kb-log-project-name {
    color: #ffffff;
    font-weight: 600;
}

.kb-log-project-meta,
.kb-log-time-meta {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 4px;
}

.kb-log-error-cell {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    word-break: break-word;
}

.kb-log-error-cell.kb-log-has-error {
    color: #fca5a5;
}

.kb-log-time {
    font-weight: 600;
    color: #ffffff;
}

@media (max-width: 1200px) {
    .kb-delivery-logs-row {
        grid-template-columns: 120px 180px 1fr 1fr 120px;
    }
}

@media (max-width: 900px) {
    .kb-delivery-logs-row {
        grid-template-columns: 1fr 1fr;
    }

    .kb-log-time {
        text-align: left;
    }

    .kb-log-error-cell {
        grid-column: 1 / -1;
    }

    .kb-delivery-logs-head > div:last-child {
        text-align: left;
    }
}

@media (max-width: 600px) {
    .kb-delivery-logs-head {
        display: none;
    }

    .kb-delivery-logs-table {
        gap: 6px;
    }

    .kb-delivery-logs-row {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 14px;
        position: relative;
    }

    .kb-delivery-logs-row > div {
        display: flex;
        align-items: baseline;
        gap: 10px;
    }

    .kb-delivery-logs-row > div::before {
        content: attr(data-label);
        min-width: 72px;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: rgba(255, 255, 255, 0.5);
        font-weight: 700;
    }

    .kb-log-status {
        align-items: center;
    }

    .kb-log-expand-cell {
        justify-content: flex-end;
    }

    .kb-delivery-logs-row .kb-log-expand-cell::before {
        content: '';
        min-width: 0;
    }

    .kb-notification-settings-card,
    .kb-settings-section {
        overflow: hidden;
    }

    .kb-email-display-row {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .kb-email-display-row > div {
        flex-wrap: wrap;
        min-width: 0;
    }

    .kb-email-display {
        word-break: break-all;
    }

    .kb-email-apply-section {
        flex-direction: column;
        align-items: flex-start;
    }

    .kb-activity-item {
        padding: 12px;
        gap: 12px;
    }

    .kb-notification-settings-card,
    .kb-settings-section,
    .kb-email-card,
    .kb-webhook-card {
        padding: 18px;
    }
}

.kb-activity-empty {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    padding: 12px 0;
}

.kb-card-header {
    margin-bottom: 0;
    padding-bottom: 0;
}

.kb-card-header h3 {
    color: #02baff;
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.kb-card-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    margin: 0;
}

.kb-settings-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-right: 8px;
    margin-top: 24px;
}

.kb-settings-section {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 20px;
}

.kb-settings-section h4 {
    color: #ffffff;
    font-size: 1.1rem;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.kb-settings-section h4 i {
    color: #02baff;
}

/* Global settings optimizations */
.kb-global-release-types-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.kb-global-release-types-row .kb-release-type-checkboxes {
    flex: 1;
    min-width: 300px;
}

.kb-global-release-types-row .kb-btn-apply-frequency {
    margin: 0;
    white-space: nowrap;
}

.kb-webhook-url-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    min-width: 0;
}

.kb-webhook-url-grid > div {
    min-width: 0;
}

.kb-webhook-url-grid .kb-input-with-clear {
    width: 100%;
}

.kb-webhook-url-grid .kb-input {
    max-width: none;
    width: 100%;
    box-sizing: border-box;
}

/* Email section layout optimizations */
.kb-email-top-row {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.kb-email-top-row .kb-toggle-label {
    margin: 0;
}

.kb-email-separator {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.15);
    align-self: center;
}

.kb-email-top-row .kb-email-info {
    flex: 1;
    min-width: 200px;
}

.kb-email-display-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.kb-email-display-row > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kb-email-top-row .kb-btn-change-email {
    margin: 0;
    white-space: nowrap;
}

.kb-email-controls-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
    margin-top: 20px;
    margin-bottom: 12px;
    align-items: start;
}

@media (max-width: 1200px) {
    .kb-email-controls-row {
        grid-template-columns: 1fr;
    }
}

.kb-email-frequency-group,
.kb-email-release-types-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kb-email-apply-section {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
}

.kb-email-apply-section .kb-email-note {
    font-size: 0.85rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
}

.kb-email-frequency-group label,
.kb-email-release-types-group label {
    margin-bottom: 0;
}

.kb-email-frequency-group .kb-global-frequency-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kb-email-frequency-group select {
    flex: 1;
    min-width: 180px;
    max-width: 100%;
}

.kb-email-release-types-group .kb-release-type-checkboxes {
    margin-bottom: 0;
}

.kb-webhook-release-types-row {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.kb-input-with-clear {
    position: relative;
}

.kb-input-with-clear .kb-input {
    padding-right: 32px;
}

.kb-input-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: #b91c1c;
    border: 1px solid #ef4444;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    padding: 0;
    display: none;
    box-shadow: 0 2px 6px rgba(185, 28, 28, 0.35);
    align-items: center;
    justify-content: center;
}

.kb-input-clear i {
    font-size: 11px;
    line-height: 1;
    color: #fff;
}

.kb-input-with-clear.kb-has-value .kb-input-clear {
    display: flex;
}

.kb-input-clear:hover {
    background: #dc2626;
    border-color: #f87171;
}

.kb-webhook-release-types-row .kb-email-apply-group {
    margin-top: 0;
}

.kb-btn-apply-all-inline {
    background: linear-gradient(135deg, #02baff 0%, #0284c7 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(2, 186, 255, 0.3);
}

.kb-btn-apply-all-inline:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(2, 186, 255, 0.4);
}

.kb-btn-apply-all-inline i {
    font-size: 0.9rem;
}

/* Apply All section styling */
.kb-apply-all-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.kb-btn-apply-all {
    background: linear-gradient(135deg, #02baff 0%, #0284c7 100%);
    color: white;
    border: none;
    padding: 14px 32px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(2, 186, 255, 0.3);
}

.kb-btn-apply-all:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(2, 186, 255, 0.4);
}

.kb-btn-apply-all i {
    font-size: 0.95rem;
}

.kb-apply-all-section .kb-email-note {
    margin-top: 12px;
    font-size: 0.9rem;
}

/* Dashboard Stats (kept for backward compatibility but simplified) */
.kb-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-bottom: 30px;
}

.kb-stat-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 140px;
}

.kb-stat-card:hover {
    border-color: rgba(2, 186, 255, 0.4);
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

/* Email Settings Section */
.kb-email-settings-section {
    margin-bottom: 30px;
}

/* When email section is inside a stat card */
.kb-stat-card.kb-email-settings-section {
    margin-bottom: 0;
    text-align: left;
    padding: 20px;
}

.kb-email-settings-section > h3 {
    color: #ffffff;
    font-size: 1.3rem;
    margin-bottom: 12px;
}

.kb-email-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 20px 24px;
    backdrop-filter: blur(10px);
}

/* When email card is inside a stat card, remove extra styling */
.kb-stat-card .kb-email-card {
    background: transparent;
    border: none;
    padding: 0;
    backdrop-filter: none;
}

.kb-email-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.kb-stat-card .kb-email-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 12px;
}

.kb-settings-section .kb-email-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 12px;
}

.kb-email-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    font-weight: 600;
}

.kb-stat-card .kb-email-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.6);
}

.kb-email-display {
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 500;
}

.kb-stat-card .kb-email-display {
    font-size: 1rem;
    font-weight: 600;
    word-break: break-all;
}

.kb-btn-change-email {
    background: linear-gradient(135deg, #02baff 0%, #0284c7 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.kb-stat-card .kb-btn-change-email {
    padding: 8px 16px;
    font-size: 0.85rem;
    width: 100%;
    margin-top: 8px;
}

.kb-btn-change-email:hover {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(2, 186, 255, 0.4);
}

.kb-stat-card .kb-btn-change-email:hover {
    transform: translateY(-1px);
}

.kb-email-input-group {
    display: none;
    gap: 10px;
    align-items: center;
    margin: 16px 0;
}

.kb-email-input-group.active {
    display: flex;
}

.kb-email-input {
    flex: 1;
    padding: 10px 14px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.kb-email-input:focus {
    outline: none;
    border-color: #02baff;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 3px rgba(2, 186, 255, 0.2);
}

.kb-email-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.kb-btn-save-email {
    background: linear-gradient(135deg, #34a853 0%, #2d8e47 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    white-space: nowrap;
}

.kb-btn-save-email:hover {
    background: linear-gradient(135deg, #2d8e47 0%, #248039 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(52, 168, 83, 0.4);
}

.kb-email-note {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    margin: 16px 0 0 0;
}

.kb-stat-card .kb-email-note {
    font-size: 0.75rem;
    margin: 12px 0 0 0;
    line-height: 1.4;
}

/* Webhook Settings Section */
.kb-webhook-settings-section {
    margin-bottom: 48px;
}

.kb-webhook-settings-section h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.kb-webhook-card {
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 28px;
    backdrop-filter: blur(10px);
    overflow: hidden;
}

#kb-dashboard-content a:focus-visible,
#kb-dashboard-content button:focus-visible,
#kb-dashboard-content input:focus-visible,
#kb-dashboard-content select:focus-visible,
#kb-dashboard-content textarea:focus-visible {
    outline: 2px solid rgba(2, 186, 255, 0.85);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(2, 186, 255, 0.2);
}

.kb-webhook-note {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 8px;
    font-style: italic;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.kb-webhook-note a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.kb-stat-card:hover {
    border-color: rgba(2, 186, 255, 0.4);
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.kb-stat-card h3 {
    margin: 0 0 6px 0;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.6);
}

.kb-stat-value {
    font-size: 2rem;
    font-weight: 700;
    margin: 6px 0;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
}

/* Subscription status colors */
.kb-sub-status-pro {
    color: #34a853 !important;
}

.kb-sub-status-good {
    color: #34a853 !important;
}

.kb-sub-status-warning {
    color: #fbbf24 !important;
}

.kb-sub-status-danger {
    color: #ef4444 !important;
}

.kb-stat-note {
    font-size: 0.75rem;
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.5);
}

.kb-upgrade-link {
    display: inline-block;
    color: #02baff;
    text-decoration: none;
    margin-top: 10px;
    font-size: 0.95rem;
}

.kb-upgrade-link:hover {
    color: #0284c7;
}

/* Upgrade Banner */
.kb-upgrade-banner {
    background: rgba(15, 23, 42, 0.6);
    border: 2px solid rgba(2, 186, 255, 0.4);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 30px;
    box-shadow: 0 4px 20px rgba(2, 186, 255, 0.2);
    animation: slideDown 0.5s ease-out;
}

.kb-dashboard-upgrade-banner {
    padding-bottom: 30px;
}

.kb-upgrade-banner-urgent {
    background: rgba(15, 23, 42, 0.8);
    border: 2px solid rgba(2, 186, 255, 0.6);
    box-shadow: 0 4px 20px rgba(2, 186, 255, 0.4);
    animation: pulse 2s ease-in-out infinite;
}

.kb-upgrade-content {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.kb-upgrade-icon {
    font-size: 3rem;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(2, 186, 255, 0.3));
}

.kb-upgrade-text {
    flex: 1;
    min-width: 250px;
}

.kb-upgrade-text h3 {
    margin: 0 0 8px 0;
    color: #02baff;
    font-size: 1.5rem;
    font-weight: 700;
}

.kb-upgrade-text p {
    margin: 0;
    color: #e5e5e5;
    font-size: 1rem;
    line-height: 1.5;
}

.kb-btn-upgrade {
    padding: 12px 32px;
    background: linear-gradient(135deg, #02baff 0%, #0d9dd8 100%);
    color: #ffffff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: none;
    white-space: nowrap;
}

.kb-upgrade-banner-urgent .kb-btn-upgrade {
    background: linear-gradient(135deg, #02baff 0%, #0d9dd8 100%);
    box-shadow: none;
}

.kb-btn-upgrade:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(2, 186, 255, 0.3);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(245, 87, 108, 0.4);
    }
    50% {
        box-shadow: 0 6px 30px rgba(245, 87, 108, 0.6);
    }
}

@media (max-width: 768px) {
    .kb-upgrade-content {
        flex-direction: column;
        text-align: center;
    }
    
    .kb-upgrade-icon {
        font-size: 2.5rem;
    }
    
    .kb-btn-upgrade {
        width: 100%;
    }
}

.kb-subscriptions-list h3 {
    color: #ffffff;
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.kb-subscriptions-list {
    position: relative;
    z-index: 20;
}

/* Subscriptions Header with View Toggle */
.kb-subscriptions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.kb-subscriptions-title-section {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.kb-subscriptions-header h3 {
    margin: 0;
    color: #ffffff;
    font-size: 1.5rem;
}

.kb-sub-count {
    padding: 2px 10px 4px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    white-space: nowrap;
    line-height: 1.2;
    vertical-align: baseline;
}

.kb-sub-count.kb-sub-status-pro {
    color: #34a853;
    border-color: rgba(52, 168, 83, 0.3);
    background: rgba(52, 168, 83, 0.1);
}

.kb-sub-count.kb-sub-status-good {
    color: #4caf50;
    border-color: rgba(76, 175, 80, 0.3);
    background: rgba(76, 175, 80, 0.1);
}

.kb-sub-count.kb-sub-status-warning {
    color: #ff9800;
    border-color: rgba(255, 152, 0, 0.3);
    background: rgba(255, 152, 0, 0.1);
}

.kb-sub-count.kb-sub-status-danger {
    color: #f44336;
    border-color: rgba(244, 67, 54, 0.3);
    background: rgba(244, 67, 54, 0.1);
}

.kb-view-toggle {
    display: flex;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    padding: 4px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.kb-view-btn {
    padding: 8px 16px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.kb-view-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.kb-view-btn.active {
    background: #02baff;
    color: #ffffff;
}

.kb-test-actions {
    display: flex;
    align-items: center;
}

.kb-test-actions-desktop {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kb-test-actions-mobile {
    display: none;
}

.kb-test-tools-bar {
    display: none;
    justify-content: flex-end;
    margin-bottom: 10px;
    position: relative;
    z-index: 100;
}

.kb-test-tools-menu {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    z-index: 150;
}

.kb-test-tools-menu.kb-actions-open .kb-actions-dropdown {
    z-index: 200;
}

.kb-test-tools-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    font-weight: 600;
}

.kb-test-menu-item {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: #e2e8f0;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
}

.kb-test-menu-item:hover {
    background: rgba(2, 186, 255, 0.15);
    color: #e2e8f0;
}

.kb-test-actions-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.kb-test-actions-trigger:hover {
    color: #ffffff;
    border-color: rgba(2, 186, 255, 0.4);
    background: rgba(2, 186, 255, 0.12);
}

.kb-test-actions-mobile summary {
    list-style: none;
}

.kb-test-actions-mobile summary::-webkit-details-marker {
    display: none;
}

.kb-test-actions-menu {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Global Frequency Setting */
.kb-global-frequency-setting {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kb-global-email-toggle-row {
    display: flex;
    align-items: center;
}

.kb-global-frequency-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kb-global-frequency-controls label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.kb-label-text {
    display: block;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

.kb-global-frequency-select {
    width: 100%;
    color-scheme: dark;
}

.kb-btn-apply-frequency {
    padding: 10px 20px;
    background: linear-gradient(135deg, #02baff 0%, #0d9dd8 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    white-space: nowrap;
}

.kb-btn-apply-frequency:hover {
    background: linear-gradient(135deg, #0d9dd8 0%, #0a7ab8 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(2, 186, 255, 0.4);
}

.kb-btn-apply-frequency:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: rgba(2, 186, 255, 0.3);
    transform: none;
}

.kb-subscriptions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
}

.kb-subscription-card {
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 28px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible;
    backdrop-filter: blur(10px);
}

.kb-subscription-card:hover {
    border-color: rgba(2, 186, 255, 0.6);
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.kb-subscription-card:hover .kb-sub-info h4 {
    color: #02baff;
}

.kb-sub-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
}

.kb-sub-logo {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    background: white;
    object-fit: contain;
    padding: 4px;
}

.kb-subscription-card:hover .kb-sub-logo {
    transform: scale(1.05);
}

.kb-sub-info h4 {
    margin: 0 0 6px 0;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    transition: color 0.3s ease;
}

.kb-subscription-card:hover .kb-sub-info h4 {
    color: #02baff;
}

.kb-sub-meta {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0;
    transition: color 0.3s ease;
}

.kb-subscription-card:hover .kb-sub-meta {
    color: rgba(255, 255, 255, 0.9);
}

/* Subscription Settings */
.kb-sub-settings {
    margin: 20px 0;
    padding: 16px;
    background: rgba(2, 186, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(2, 186, 255, 0.1);
}

.kb-setting-row {
    margin-bottom: 12px;
}

.kb-setting-row:last-child {
    margin-bottom: 0;
}

.kb-setting-row label {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    font-size: 0.95rem;
    flex-wrap: wrap;
}

.kb-label-text {
    font-weight: 600;
    color: #ffffff;
    margin-right: 8px;
}

.kb-email-frequency {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Toggle Switch */
.kb-toggle-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 12px;
}

.kb-toggle-label input[type="checkbox"] {
    display: none;
}

.kb-toggle-slider {
    width: 48px;
    height: 24px;
    background: #ccc;
    border-radius: 24px;
    position: relative;
    transition: background 0.3s ease;
}

.kb-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    top: 3px;
    left: 3px;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.kb-toggle-label input[type="checkbox"]:checked + .kb-toggle-slider {
    background: linear-gradient(135deg, #02baff 0%, #0284c7 100%);
}

.kb-toggle-label input[type="checkbox"]:checked + .kb-toggle-slider::before {
    transform: translateX(24px);
}

.kb-toggle-text {
    font-weight: 600;
    color: #ffffff;
}

/* Release Type Checkboxes */
.kb-release-types-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.kb-release-type-checkboxes {
    display: flex;
    flex-direction: row;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.kb-release-type-checkboxes.kb-compact {
    gap: 12px;
}

.kb-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #e5e5e5;
    font-size: 0.9rem;
    user-select: none;
    transition: color 0.2s ease;
}

.kb-checkbox-label:hover {
    color: #ffffff;
}

.kb-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #02baff;
    margin: 0;
}

.kb-release-type-checkboxes.kb-compact .kb-checkbox-label {
    font-size: 0.85rem;
}

.kb-release-type-checkboxes.kb-compact .kb-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

/* Compact Toggle for Table View */
.kb-toggle-compact {
    margin: 0;
}

.kb-toggle-compact .kb-toggle-text {
    display: none;
}

/* Table View Styles */
.kb-subscriptions-table-container {
    width: 100%;
    overflow: visible;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
}

.kb-subscriptions-table-scroll {
    overflow-x: auto;
    overflow-y: visible;
    border-radius: 12px;
}

.kb-subscriptions-table {
    width: 100%;
    min-width: 1200px;
    border-radius: 12px;
    overflow: visible;
    border-collapse: collapse;
}

.kb-subscriptions-table thead {
    background: #0e273f;
    border-bottom: 2px solid rgba(2, 186, 255, 0.3);
    position: sticky;
    top: 0;
    z-index: 2;
}

.kb-subscriptions-table th {
    padding: 16px;
    text-align: left;
    color: #02baff;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #0e273f;
}

.kb-subscriptions-table th.kb-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.kb-subscriptions-table th.kb-sortable i {
    font-size: 0.7rem;
    opacity: 0.6;
    margin-left: 6px;
}

.kb-subscriptions-table th.kb-sortable:hover {
    color: #5ab3ff;
}

.kb-subscriptions-table th.kb-sortable.kb-sortable-active {
    color: #5ab3ff;
}

.kb-subscriptions-table th.kb-sortable.kb-sortable-active i {
    opacity: 1;
}

.kb-subscriptions-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.2s ease;
}

.kb-subscriptions-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.08);
}

.kb-subscriptions-table td {
    padding: 16px;
    color: #e5e5e5;
    vertical-align: middle;
}

.kb-table-logo {
    width: 60px;
    text-align: center;
}

.kb-table-logo img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
}

.kb-table-name a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.kb-table-name a:hover {
    color: #02baff;
}

.kb-table-version {
    font-family: 'Courier New', monospace;
    color: #02baff;
    font-weight: 600;
}

.kb-table-date {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.kb-table-email {
    text-align: center;
}

.kb-table-webhook {
    text-align: center;
}

.kb-webhook-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: all 0.3s ease;
    cursor: pointer;
}

.kb-webhook-status.enabled {
    background: rgba(52, 168, 83, 0.2);
    color: #34a853;
}

.kb-webhook-status.enabled:hover {
    background: rgba(52, 168, 83, 0.3);
    transform: scale(1.1);
}

.kb-webhook-status.disabled {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.3);
}

.kb-webhook-status.disabled:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.1);
}

.kb-webhook-status i {
    font-size: 14px;
}

.kb-table-frequency {
    width: 110px;
}

.kb-table-frequency select {
    font-size: 0.85rem;
    padding: 8px 12px;
    width: 100%;
    color-scheme: dark;
}

.kb-table-release-types,
.kb-table-webhook-types {
    min-width: 140px;
}

.kb-table-actions {
    text-align: center;
}

.kb-actions-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    z-index: 5;
}

.kb-actions-toggle {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.kb-actions-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}

.kb-actions-dropdown {
    position: absolute;
    right: 0;
    top: 36px;
    min-width: 160px;
    width: 180px;
    max-width: 200px;
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    padding: 8px;
    display: none;
    z-index: 800;
}

.kb-actions-menu.kb-actions-fixed .kb-actions-dropdown {
    position: fixed;
    left: 0;
    top: 0;
}

.kb-actions-menu.kb-actions-fixed {
    z-index: 800;
}

.kb-subscription-card.kb-actions-active,
.kb-subscription-card.kb-actions-active:hover {
    transform: none;
    z-index: 200;
}

.kb-subscriptions-grid {
    position: relative;
    z-index: 5;
}

.kb-actions-menu.kb-actions-open .kb-actions-dropdown {
    display: block;
}

.kb-action-item {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: #e2e8f0;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
}

.kb-action-item:hover {
    background: rgba(2, 186, 255, 0.15);
    color: #e2e8f0;
}

.kb-action-danger {
    color: #f87171;
}

.kb-action-danger:hover {
    background: rgba(248, 113, 113, 0.15);
    color: #fecaca;
}

.kb-action-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.kb-action-disabled:hover {
    background: transparent;
}

.kb-paused-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    margin-left: 8px;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.18);
    color: #fecaca;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kb-subscription-paused .kb-sub-settings {
    opacity: 0.5;
    pointer-events: none;
}

.kb-subscription-paused td.kb-table-email,
.kb-subscription-paused td.kb-table-frequency,
.kb-subscription-paused td.kb-table-release-types,
.kb-subscription-paused td.kb-table-webhook,
.kb-subscription-paused td.kb-table-webhook-types {
    opacity: 0.5;
    pointer-events: none;
}


.kb-sub-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
    position: relative;
    z-index: 10;
}

.kb-sub-actions .kb-btn-small,
.kb-sub-actions .kb-btn-view {
    flex: 1;
    margin-left: 0;
}

.kb-btn-view {
    background: linear-gradient(135deg, #02baff 0%, #0284c7 100%);
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(2, 186, 255, 0.3);
    text-decoration: none;
    display: inline-block;
    font-size: 0.9rem;
    text-align: center;
}

.kb-btn-view:hover {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    box-shadow: 0 4px 12px rgba(2, 186, 255, 0.4);
    transform: translateY(-2px);
}

.kb-input-invalid {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35) !important;
}

/* Collapsible Settings Sections in Project Cards */
.kb-settings-collapsible-section {
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    overflow: hidden;
}

.kb-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    background: rgba(2, 186, 255, 0.1);
    transition: all 0.2s ease;
    user-select: none;
}

.kb-section-header:hover {
    background: rgba(2, 186, 255, 0.15);
}

.kb-section-header span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #ffffff;
    font-size: 0.9rem;
}

.kb-section-header i.fa-envelope,
.kb-section-header i.fa-plug {
    color: #02baff;
    font-size: 0.85rem;
}

.kb-section-chevron {
    color: #02baff;
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.kb-section-content {
    padding: 16px;
    display: none;
    background: rgba(0, 0, 0, 0.2);
}

.kb-section-content .kb-setting-row {
    margin-bottom: 12px;
}

.kb-section-content .kb-setting-row:last-child {
    margin-bottom: 0;
}

.kb-webhook-input {
    width: 100%;
    margin-top: 4px;
    font-size: 0.85rem;
}

.kb-btn-save-webhooks {
    margin-top: 12px;
    background: linear-gradient(135deg, #02baff 0%, #0284c7 100%);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.85rem;
}

.kb-btn-save-webhooks:hover {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    transform: translateY(-1px);
}

/* Mobile Responsive - Dashboard Views */
@media screen and (max-width: 768px) {
    /* Hide entire view toggle on mobile - force grid view */
    .kb-view-toggle {
        display: none;
    }

    .kb-test-tools-bar {
        display: flex;
        width: 100%;
    }

    .kb-test-actions-desktop {
        display: none;
    }

    .kb-test-actions-mobile {
        display: block;
        width: 100%;
    }

    .kb-test-actions-trigger {
        width: 100%;
        justify-content: space-between;
    }

    .kb-test-actions-menu .kb-btn-secondary {
        width: 100%;
        text-align: left;
    }

    /* Force grid view on mobile */
    .kb-subscriptions-table {
        display: none !important;
    }

    .kb-subscriptions-grid {
        display: grid !important;
    }

    /* Make subscription cards more compact on mobile */
    .kb-subscription-card {
        padding: 16px;
    }

    /* Make frequency dropdown smaller and fit within card */
    .kb-frequency-select {
        font-size: 0.85rem;
        padding: 8px 12px;
        min-width: 0;
        width: 100%;
    }

    .kb-card-controls {
        flex-direction: column;
        gap: 12px;
    }

    .kb-card-controls label {
        width: 100%;
    }

    .kb-card-controls select {
        width: 100%;
    }

    /* Global notification settings mobile optimization */
    .kb-global-frequency-setting {
        padding-top: 12px;
        gap: 12px;
    }

    .kb-global-frequency-select,
    .kb-btn-apply-frequency {
        width: 100%;
        font-size: 0.85rem;
    }

    .kb-release-type-checkboxes {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .kb-email-note {
        font-size: 0.8rem;
        line-height: 1.4;
    }
}

.kb-btn-unsubscribe {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
    font-size: 0.9rem;
}

.kb-btn-unsubscribe:hover {
    background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
    transform: translateY(-2px);
}

.kb-empty-state {
    text-align: center;
    padding: 80px 40px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

.kb-empty-state::before {
    content: '📦';
    display: block;
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.5;
}

.kb-empty-state p {
    font-size: 1.2rem;
    margin-bottom: 28px;
    line-height: 1.6;
    opacity: 0.8;
}

.kb-error {
    text-align: center;
    padding: 60px 40px;
    background: rgba(220, 53, 69, 0.1);
    border: 2px solid rgba(220, 53, 69, 0.3);
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

.kb-error::before {
    content: '⚠';
    display: block;
    font-size: 4rem;
    margin-bottom: 20px;
    color: #dc3545;
}

.kb-error p {
    margin-bottom: 24px;
    font-size: 1.1rem;
}
/* Sign In to Subscribe Button */
.kb-subscribe-prompt {
    background: white;
    color: #02baff;
    border: 2px solid #02baff;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
    text-align: center;
}

.kb-subscribe-prompt:hover {
    background: #02baff;
    color: white;
    transform: translateY(-2px);
    box-shadow: none;
}

.kb-subscribe-btn {
    background: linear-gradient(135deg, #02baff 0%, #0284c7 100%);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: none;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
}

.kb-subscribe-btn:hover {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    box-shadow: 0 2px 8px rgba(2, 186, 255, 0.3);
    transform: translateY(-2px);
}

.kb-subscribe-btn:disabled {
    background: #9e9e9e;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.kb-subscribe-btn.subscribed {
    background: linear-gradient(135deg, #34a853 0%, #2d8e47 100%);
    box-shadow: 0 4px 12px rgba(52, 168, 83, 0.3);
}

.kb-subscribe-btn.subscribed:hover {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
}

/* Account & Subscription Section */
.kb-account-section {
    max-width: 1200px;
    margin: 0 auto 40px;
    padding: 0 20px;
}

.kb-account-section h2 {
    color: #02baff;
    font-size: 1.8rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.kb-account-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.kb-account-main,
.kb-account-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.kb-account-card-title {
    margin: 0 0 20px 0;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 700;
}

.kb-account-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 20px;
}

.kb-account-user {
    display: flex;
    align-items: center;
    gap: 14px;
}

.kb-account-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(2, 186, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #02baff;
    font-size: 1.4rem;
    overflow: hidden;
}

.kb-account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.kb-account-user-name {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.05rem;
}

.kb-account-user-email {
    color: #94a3b8;
    font-size: 0.9rem;
}

.kb-account-plan-status {
    text-align: right;
}

.kb-account-plan-title {
    margin: 0 0 6px 0;
    font-size: 1.4rem;
    color: #ffffff;
    font-weight: 700;
}

.kb-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(52, 168, 83, 0.2);
    color: #34a853;
    font-size: 0.75rem;
    font-weight: 600;
}

.kb-status-badge.kb-status-canceled,
.kb-status-badge.kb-status-cancelled {
    background: rgba(220, 53, 69, 0.2);
    color: #dc3545;
}

.kb-status-badge.kb-status-abandoned {
    background: rgba(220, 53, 69, 0.2);
    color: #dc3545;
}

.kb-status-badge.kb-status-expired {
    background: rgba(251, 146, 60, 0.2);
    color: #fb923c;
}

.kb-status-badge.kb-status-pending {
    background: rgba(148, 163, 184, 0.2);
    color: #94a3b8;
}

.kb-status-badge.kb-status-free {
    background: rgba(2, 186, 255, 0.15);
    color: #02baff;
}

.kb-account-actions-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
    gap: 12px;
    flex-wrap: wrap;
}

.kb-account-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #e5e5e5;
    text-decoration: none;
    font-weight: 600;
}

.kb-account-nav-link i {
    color: #02baff;
}

.kb-account-nav-link.kb-account-nav-active {
    color: #ffffff;
}

.kb-account-nav-link.kb-account-nav-active i {
    color: #38bdf8;
}

.kb-account-subtitle {
    margin: 6px 0 12px;
    color: #94a3b8;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.kb-account-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 8px 0;
}

.kb-btn-full {
    display: inline-block;
    width: 100%;
    text-align: center;
}

.kb-account-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(2, 186, 255, 0.3);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    width: 100%;
}

.kb-api-access-card .kb-account-row {
    align-items: flex-start;
    gap: 16px;
}

.kb-api-access-card .kb-account-value {
    text-align: right;
    word-break: break-word;
}

.kb-api-access-card .kb-account-subtext {
    margin-top: -8px;
    margin-bottom: 16px;
}

.kb-api-keys {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 12px;
    margin-top: 12px;
}

.kb-api-base-url {
    margin-bottom: 16px;
}

.kb-api-username {
    margin-top: 12px;
}

.kb-api-username-value {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.8);
    color: #e5e5e5;
    font-weight: 600;
}

.kb-account-twofa-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kb-account-twofa-card .kb-account-subtext {
    margin: 0;
}

.kb-wp2fa-card h1,
.kb-wp2fa-card h2,
.kb-wp2fa-card h3,
.kb-wp2fa-card h4 {
    color: #ffffff;
    margin: 0 0 12px 0;
    font-weight: 700;
}

.kb-wp2fa-card p,
.kb-wp2fa-card label,
.kb-wp2fa-card li {
    color: #cbd5e1;
    line-height: 1.5;
}

.kb-wp2fa-card .notice,
.kb-wp2fa-card .wp-2fa-notice,
.kb-wp2fa-card .wp2fa-notice,
.kb-wp2fa-card .wp-2fa-message {
    background: rgba(2, 186, 255, 0.12);
    border: 1px solid rgba(2, 186, 255, 0.4);
    color: #e2e8f0;
    padding: 12px 14px;
    border-radius: 10px;
    margin: 12px 0;
}

.kb-wp2fa-card .notice-error,
.kb-wp2fa-card .wp-2fa-error,
.kb-wp2fa-card .error {
    background: rgba(220, 53, 69, 0.12);
    border-color: rgba(220, 53, 69, 0.5);
    color: #fecaca;
}

.kb-wp2fa-card input[type="text"],
.kb-wp2fa-card input[type="password"],
.kb-wp2fa-card input[type="email"],
.kb-wp2fa-card input[type="number"],
.kb-wp2fa-card input[type="tel"],
.kb-wp2fa-card select,
.kb-wp2fa-card textarea {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(15, 23, 42, 0.8);
    color: #e5e5e5;
    font-size: 0.95rem;
}

.kb-wp2fa-card input:focus,
.kb-wp2fa-card select:focus,
.kb-wp2fa-card textarea:focus {
    outline: none;
    border-color: #02baff;
    box-shadow: 0 0 0 3px rgba(2, 186, 255, 0.2);
}

.kb-wp2fa-card button,
.kb-wp2fa-card .button,
.kb-wp2fa-card input[type="submit"],
.kb-wp2fa-card input[type="button"] {
    background: linear-gradient(135deg, #02baff 0%, #0d9dd8 100%);
    color: #ffffff;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.kb-wp2fa-card button:hover,
.kb-wp2fa-card .button:hover,
.kb-wp2fa-card input[type="submit"]:hover,
.kb-wp2fa-card input[type="button"]:hover {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    transform: translateY(-1px);
}

.kb-wp2fa-card input[type="submit"][value*="2fa" i],
.kb-wp2fa-card input[type="button"][value*="2fa" i],
.kb-wp2fa-card a.button[href*="2fa"],
.kb-wp2fa-card .wp-2fa-setup-actions .button,
.kb-wp2fa-card .wp-2fa-settings-actions .button {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border: none;
    box-shadow: 0 8px 18px rgba(2, 186, 255, 0.2);
    text-transform: none;
    letter-spacing: 0.02em;
}

.kb-wp2fa-card input[type="submit"][value*="2fa" i]:hover,
.kb-wp2fa-card input[type="button"][value*="2fa" i]:hover,
.kb-wp2fa-card a.button[href*="2fa"]:hover,
.kb-wp2fa-card .wp-2fa-setup-actions .button:hover,
.kb-wp2fa-card .wp-2fa-settings-actions .button:hover {
    background: linear-gradient(135deg, #10b8ff 0%, #0284c7 100%);
    box-shadow: 0 10px 22px rgba(2, 186, 255, 0.28);
}

.kb-wp2fa-card input[type="submit"][value*="backup" i],
.kb-wp2fa-card input[type="button"][value*="backup" i],
.kb-wp2fa-card a.button[href*="backup" i],
.kb-wp2fa-card .wp-2fa-backup-code-actions .button {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    border: none;
    color: #0b1020;
    box-shadow: 0 8px 18px rgba(249, 115, 22, 0.25);
}

.kb-wp2fa-card input[type="submit"][value*="backup" i]:hover,
.kb-wp2fa-card input[type="button"][value*="backup" i]:hover,
.kb-wp2fa-card a.button[href*="backup" i]:hover,
.kb-wp2fa-card .wp-2fa-backup-code-actions .button:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
    box-shadow: 0 10px 22px rgba(249, 115, 22, 0.32);
}

.kb-wp2fa-card .button-secondary,
.kb-wp2fa-card .button-secondary:hover,
.kb-wp2fa-card .button-link {
    background: rgba(148, 163, 184, 0.18);
    border: 1px solid rgba(148, 163, 184, 0.4);
    color: #e2e8f0;
}

.kb-wp2fa-card summary {
    color: #7dd3fc;
    cursor: pointer;
    font-weight: 600;
}

.kb-wp2fa-card summary:hover {
    color: #38bdf8;
}

.kb-wp2fa-card img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: #0f172a;
    padding: 10px;
}

.wp-2fa-modal,
.wp2fa-modal,
[class*="wp-2fa"][class*="modal"],
[id*="wp-2fa"][class*="modal"] {
    background: rgba(15, 23, 42, 0.98);
    color: #e5e5e5;
    border-radius: 16px;
    border: 1px solid rgba(2, 186, 255, 0.35);
    box-shadow: 0 20px 50px rgba(2, 186, 255, 0.18);
    padding: 26px;
    max-width: 840px;
    width: min(92vw, 840px);
}

.kb-modal .modal__container {
    background: rgba(15, 23, 42, 0.98);
    color: #e5e5e5;
    border-radius: 16px;
    border: 1px solid rgba(2, 186, 255, 0.35);
    box-shadow: 0 20px 50px rgba(2, 186, 255, 0.18);
    padding: 26px;
    max-width: 840px;
    width: min(92vw, 840px);
}

.kb-modal .modal__content {
    color: #ffffff
}
.kb-modal .modal__content p {
    color: #ffffff;
}

.kb-modal .modal__content label {
    color: #ffffff
}

@media (max-width: 768px) {
    .wp-2fa-modal,
    .wp2fa-modal,
    [class*="wp-2fa"][class*="modal"],
    [id*="wp-2fa"][class*="modal"],
    .modal__container {
        width: min(92vw, 520px);
        max-width: 520px;
        padding: 18px;
    }
}

.wp2fa-modal.micromodal-slide.default_styling.is-open .modal__container {
    background: rgba(15, 23, 42, 0.98) !important;
    color: #e5e5e5 !important;
    border-color: rgba(2, 186, 255, 0.35) !important;
}

.wp2fa-modal.micromodal-slide.default_styling.is-open .modal__container .modal__header,
.wp2fa-modal.micromodal-slide.default_styling.is-open .modal__container .modal__content,
.wp2fa-modal.micromodal-slide.default_styling.is-open .modal__container .modal__title,
.wp2fa-modal.micromodal-slide.default_styling.is-open .modal__container .modal__content p,
.wp2fa-modal.micromodal-slide.default_styling.is-open .modal__container .modal__content label {
    color: #e2e8f0 !important;
}

.wp2fa-modal.micromodal-slide.default_styling.is-open .modal__container .modal__header {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 14px 0;
    min-height: 0;
    box-shadow: none !important;
    display: none;
}

.wp2fa-modal.micromodal-slide.default_styling.is-open .modal__container .modal__title {
    display: none !important;
}

.wp2fa-modal.micromodal-slide.default_styling.is-open .modal__container .modal__header:empty {
    display: none;
}

.modal__container > .wp2fa-modal.is-open ~ .modal__close,
.modal__container > .wp2fa-modal.is-open ~ .modal__header,
.modal__container > .wp2fa-modal.is-open ~ .modal__title,
.modal__container > .wp2fa-modal.is-open ~ .wizard-step,
.modal__container > .wp2fa-modal.is-open ~ .wp2fa-setup-actions {
    opacity: 0;
    pointer-events: none;
}

.wp2fa-modal.micromodal-slide.default_styling.is-open .modal__container .modal__title {
    font-weight: 700;
}

.wp2fa-modal.micromodal-slide.default_styling.is-open .modal__container .modal__content .description,
.wp2fa-modal.micromodal-slide.default_styling.is-open .modal__container .modal__content small {
    color: #94a3b8 !important;
}

.kb-modal .modal__container h1,
.kb-modal .modal__container h2,
.kb-modal .modal__container h3,
.kb-modal .modal__container p {
    color: #e2e8f0;
}

.kb-modal .modal__container h3 {
    font-size: 1.35rem;
    line-height: 1.3;
    margin: 0 0 12px 0;
    font-weight: 700;
    color: #ffffff;
}

.kb-modal .modal__container .modal__content h3 {
    color: #ffffff;
}

.wp2fa-modal .modal__content::before {
    content: "Two-Factor Setup";
    display: block;
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 12px 0;
}

.wp2fa-modal .modal__content h3 {
    display: none;
}

.kb-modal .modal__container h1,
.kb-modal .modal__container h2,
.kb-modal .modal__container h3 {
    margin: 0 0 12px 0;
    font-weight: 700;
}

.kb-modal .modal__container p {
    margin: 0 0 12px 0;
    line-height: 1.6;
}

.kb-modal .modal__container p:last-child {
    margin-bottom: 0;
}

.kb-modal .modal__container strong {
    color: #ffffff;
}

.kb-modal .modal__container a {
    color: #7dd3fc;
    text-decoration: none;
}

.kb-modal .modal__container a:hover {
    color: #38bdf8;
}

#notify-users .modal__header,
#notify-users .modal__title {
    display: none !important;
}

.kb-modal .modal__container ul,
.kb-modal .modal__container ol {
    margin: 0 0 14px 18px;
    color: #cbd5e1;
}

.kb-modal .modal__container li {
    margin-bottom: 6px;
}

.kb-modal .modal__container label,
.kb-modal .modal__container .wp-2fa-label,
.kb-modal .modal__container .wp2fa-label,
.kb-modal .modal__container .modal__label {
    color: #e2e8f0;
}

.kb-modal .modal__container small,
.kb-modal .modal__container .description {
    color: #94a3b8;
}

.kb-modal .modal__container textarea {
    width: 100%;
    min-height: 180px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(2, 186, 255, 0.45);
    background: rgba(15, 23, 42, 0.9);
    color: #e2e8f0;
    font-size: 1rem;
    line-height: 1.6;
    font-family: "Consolas", "Courier New", monospace;
}

.kb-modal .modal__container textarea:focus {
    outline: none;
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(2, 186, 255, 0.2);
}

.kb-modal .modal__container .app-key-wrapper,
.wp2fa-modal .modal__content .app-key-wrapper {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(2, 186, 255, 0.35);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.kb-modal .modal__container .app-key-wrapper input,
.wp2fa-modal .modal__content .app-key-wrapper input {
    background: transparent;
    border: none;
    color: #e2e8f0;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: "Consolas", "Courier New", monospace;
    letter-spacing: 0.06em;
    flex: 1;
    margin: 0;
    padding: 0 2px;
}

.kb-modal .modal__container .app-key-wrapper input:focus,
.wp2fa-modal .modal__content .app-key-wrapper input:focus {
    outline: none;
    box-shadow: none;
}

.kb-modal .modal__container .app-key-wrapper .click-to-copy,
.wp2fa-modal .modal__content .click-to-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(2, 186, 255, 0.18);
    border: 1px solid rgba(2, 186, 255, 0.45);
    color: #e2e8f0;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.kb-modal .modal__container .app-key-wrapper .click-to-copy:hover,
.wp2fa-modal .modal__content .click-to-copy:hover {
    background: rgba(2, 186, 255, 0.35);
    color: #ffffff;
}

.kb-modal .modal__container .button,
.kb-modal .modal__container button,
.kb-modal .modal__container input[type="button"],
.kb-modal .modal__container input[type="submit"] {
    background: linear-gradient(135deg, #02baff 0%, #0d9dd8 100%);
    color: #ffffff;
    border: none;
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.kb-modal .modal__container .button:hover,
.kb-modal .modal__container button:hover,
.kb-modal .modal__container input[type="button"]:hover,
.kb-modal .modal__container input[type="submit"]:hover {
    background: linear-gradient(135deg, #10b8ff 0%, #0284c7 100%);
    transform: translateY(-1px);
}

.kb-modal .modal__container .button-secondary,
.kb-modal .modal__container .button-link,
.kb-modal .modal__container .button.is-secondary,
.kb-modal .modal__container button.is-secondary {
    background: rgba(148, 163, 184, 0.18);
    border: 1px solid rgba(148, 163, 184, 0.4);
    color: #e2e8f0;
    box-shadow: none;
}

.kb-modal .modal__container .button-secondary:hover,
.kb-modal .modal__container .button-link:hover,
.kb-modal .modal__container .button.is-secondary:hover,
.kb-modal .modal__container button.is-secondary:hover {
    background: rgba(148, 163, 184, 0.25);
    border-color: rgba(148, 163, 184, 0.5);
    transform: translateY(-1px);
}

.wp2fa-modal .modal__footer,
.kb-modal .modal__container .modal__footer {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    background: transparent;
    padding: 14px 0 0;
}

.wp2fa-modal .modal__footer .modal__btn,
.kb-modal .modal__container .modal__footer .modal__btn,
.wp2fa-modal .modal__footer .button,
.kb-modal .modal__container .modal__footer .button,
.wp2fa-modal .modal__footer button,
.kb-modal .modal__container .modal__footer button,
.wp2fa-modal .modal__footer input[type="button"],
.kb-modal .modal__container .modal__footer input[type="button"] {
    padding: 8px 16px;
    font-size: 0.95rem;
    border-radius: 8px;
    min-height: auto;
    line-height: 1.2;
}

.wp2fa-modal .modal__footer .modal_cancel,
.kb-modal .modal__container .modal__footer .modal_cancel,
.wp2fa-modal .modal_cancel,
.kb-modal .modal__container .modal_cancel,
.wp2fa-modal .button.button-primary.wp-2fa-button-primary.modal_cancel {
    width: auto !important;
    max-width: none;
    padding: 8px 16px !important;
    font-size: 0.95rem;
    line-height: 1.2;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.wp2fa-modal .button.button-secondary.button-decline,
.wp2fa-modal .button.button-secondary.wp-2fa-button-secondary.button-decline,
.wp2fa-modal .button.button-primary.button-confirm,
.wp2fa-modal .button.button-primary.wp-2fa-button-primary.button-confirm {
    padding: 8px 16px !important;
    font-size: 0.95rem;
    line-height: 1.2;
    border-radius: 8px !important;
    min-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wp2fa-modal.micromodal-slide.default_styling.is-open .modal__container .button.button-secondary.button-decline,
.wp2fa-modal.micromodal-slide.default_styling.is-open .modal__container .button.button-secondary.wp-2fa-button-secondary.button-decline,
.wp2fa-modal.micromodal-slide.default_styling.is-open .modal__container .button.button-primary.button-confirm,
.wp2fa-modal.micromodal-slide.default_styling.is-open .modal__container .button.button-primary.wp-2fa-button-primary.button-confirm,
.wp2fa-modal.micromodal-slide.default_styling.is-open .modal__container .button.button-primary.wp-2fa-button-primary.button-confirm-logout {
    padding: 8px 16px !important;
    font-size: 0.95rem;
    line-height: 1.2;
    border-radius: 8px !important;
    min-height: 0;
    height: auto;
}

.wp2fa-modal.micromodal-slide.default_styling.is-open .modal__container .modal__btn,
.wp2fa-modal.micromodal-slide.default_styling.is-open .modal__container .modal__btn-primary,
.wp2fa-modal.micromodal-slide.default_styling.is-open .modal__container .modal__btn-secondary {
    background: linear-gradient(135deg, #02baff 0%, #0f6ad6 100%) !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    min-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wp2fa-modal.micromodal-slide.default_styling.is-open .modal__container .modal__btn-secondary {
    background: rgba(148, 163, 184, 0.18) !important;
    border: 1px solid rgba(148, 163, 184, 0.4) !important;
    color: #e2e8f0 !important;
}

.wp2fa-modal.micromodal-slide.default_styling.is-open .modal__container .modal__btn:hover,
.wp2fa-modal.micromodal-slide.default_styling.is-open .modal__container .modal__btn-primary:hover {
    background: linear-gradient(135deg, #10b8ff 0%, #0284c7 100%) !important;
}

.wp2fa-modal.micromodal-slide.default_styling.is-open .modal__container .modal__close {
    color: #7dd3fc !important;
}

.wp2fa-modal.micromodal-slide.default_styling.is-open .modal__container .modal__close:hover {
    color: #38bdf8 !important;
}

.kb-modal .modal__container .wp-2fa-modal-close,
.kb-modal .modal__container .modal__close,
.kb-modal .modal__container .close {
    color: #7dd3fc;
    opacity: 1;
}

.kb-modal .modal__container .wp-2fa-modal-close:hover,
.kb-modal .modal__container .modal__close:hover,
.kb-modal .modal__container .close:hover {
    color: #38bdf8;
}

.wp-2fa-modal h1,
.wp-2fa-modal h2,
.wp-2fa-modal h3,
.wp-2fa-modal p,
.wp2fa-modal h1,
.wp2fa-modal h2,
.wp2fa-modal h3,
.wp2fa-modal p {
    color: #e2e8f0 !important;
}

.wp-2fa-modal textarea,
.wp2fa-modal textarea,
[class*="wp-2fa"][class*="modal"] textarea {
    width: 100%;
    min-height: 180px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(2, 186, 255, 0.45);
    background: rgba(15, 23, 42, 0.9);
    color: #e2e8f0;
    font-size: 1rem;
    line-height: 1.6;
    font-family: "Consolas", "Courier New", monospace;
}

.wp-2fa-modal textarea:focus,
.wp2fa-modal textarea:focus,
[class*="wp-2fa"][class*="modal"] textarea:focus {
    outline: none;
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(2, 186, 255, 0.2);
}

.wp-2fa-modal .button,
.wp-2fa-modal button,
.wp-2fa-modal input[type="button"],
.wp-2fa-modal input[type="submit"],
.wp-2fa-modal .wp-2fa-button-primary,
.wp-2fa-modal .button.button-primary.wp-2fa-button-primary,
.wp2fa-modal .button,
.wp2fa-modal button,
.wp2fa-modal input[type="button"],
.wp2fa-modal input[type="submit"],
.wp2fa-modal .wp-2fa-button-primary,
.wp2fa-modal .button.button-primary.wp-2fa-button-primary,
.kb-modal .modal__container .wp-2fa-button-primary,
.kb-modal .modal__container .button.button-primary.wp-2fa-button-primary {
    background: linear-gradient(135deg, #02baff 0%, #0d9dd8 100%);
    color: #ffffff;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wp-2fa-modal .button:hover,
.wp-2fa-modal button:hover,
.wp-2fa-modal input[type="button"]:hover,
.wp-2fa-modal input[type="submit"]:hover,
.wp-2fa-modal .wp-2fa-button-primary:hover,
.wp-2fa-modal .button.button-primary.wp-2fa-button-primary:hover,
.wp2fa-modal .button:hover,
.wp2fa-modal button:hover,
.wp2fa-modal input[type="button"]:hover,
.wp2fa-modal input[type="submit"]:hover,
.wp2fa-modal .wp-2fa-button-primary:hover,
.wp2fa-modal .button.button-primary.wp-2fa-button-primary:hover,
.kb-modal .modal__container .wp-2fa-button-primary:hover,
.kb-modal .modal__container .button.button-primary.wp-2fa-button-primary:hover {
    background: linear-gradient(135deg, #10b8ff 0%, #0284c7 100%);
    border-radius: 8px;
    transform: translateY(-1px);
}

.kb-wp2fa-card .wp-2fa-button-primary,
.kb-wp2fa-card .button.button-primary.wp-2fa-button-primary {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border: none;
    box-shadow: 0 8px 18px rgba(2, 186, 255, 0.2);
    text-transform: none;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
}

.kb-wp2fa-card .wp-2fa-button-primary:hover,
.kb-wp2fa-card .button.button-primary.wp-2fa-button-primary:hover {
    background: linear-gradient(135deg, #10b8ff 0%, #0284c7 100%);
    box-shadow: 0 10px 22px rgba(2, 186, 255, 0.28);
}

.kb-wp2fa-card .wp-2fa-configuration-form .button.enable_styling,
.kb-modal .modal__container .wp-2fa-configuration-form .button.enable_styling {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border: none;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(2, 186, 255, 0.2);
    text-transform: none;
    letter-spacing: 0.02em;
    border-radius: 8px;
}

.kb-wp2fa-card .wp-2fa-configuration-form .button.enable_styling:hover,
.kb-modal .modal__container .wp-2fa-configuration-form .button.enable_styling:hover {
    background: linear-gradient(135deg, #10b8ff 0%, #0284c7 100%);
    box-shadow: 0 10px 22px rgba(2, 186, 255, 0.28);
}

.kb-wp2fa-card .wp-2fa-configuration-form .button.button-primary.remove-2fa.default_styling,
.kb-wp2fa-card .wp-2fa-configuration-form .button.button-primary.default_styling,
.kb-modal .modal__container .wp-2fa-configuration-form .button.button-primary.remove-2fa.default_styling,
.kb-modal .modal__container .wp-2fa-configuration-form .button.button-primary.default_styling {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border: none;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(2, 186, 255, 0.2);
    text-transform: none;
    letter-spacing: 0.02em;
    margin: 8px 12px 12px 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.kb-wp2fa-card .wp-2fa-configuration-form .button.button-primary.remove-2fa.default_styling:hover,
.kb-wp2fa-card .wp-2fa-configuration-form .button.button-primary.default_styling:hover,
.kb-modal .modal__container .wp-2fa-configuration-form .button.button-primary.remove-2fa.default_styling:hover,
.kb-modal .modal__container .wp-2fa-configuration-form .button.button-primary.default_styling:hover {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    box-shadow: 0 10px 22px rgba(2, 186, 255, 0.28);
}

.wp-2fa-modal input[type="button"][value*="copy" i],
.wp-2fa-modal input[type="button"][value*="print" i],
.wp-2fa-modal input[type="button"][value*="email" i],
.wp-2fa-modal input[type="submit"][value*="copy" i],
.wp-2fa-modal input[type="submit"][value*="print" i],
.wp-2fa-modal input[type="submit"][value*="email" i],
.wp2fa-modal input[type="button"][value*="copy" i],
.wp2fa-modal input[type="button"][value*="print" i],
.wp2fa-modal input[type="button"][value*="email" i],
.wp2fa-modal input[type="submit"][value*="copy" i],
.wp2fa-modal input[type="submit"][value*="print" i],
.wp2fa-modal input[type="submit"][value*="email" i] {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    color: #0b1020;
    box-shadow: 0 8px 18px rgba(249, 115, 22, 0.25);
}

.wp-2fa-modal input[type="button"][value*="ready" i],
.wp-2fa-modal input[type="button"][value*="close" i],
.wp-2fa-modal input[type="submit"][value*="ready" i],
.wp-2fa-modal input[type="submit"][value*="close" i],
.wp2fa-modal input[type="button"][value*="ready" i],
.wp2fa-modal input[type="button"][value*="close" i],
.wp2fa-modal input[type="submit"][value*="ready" i],
.wp2fa-modal input[type="submit"][value*="close" i] {
    background: rgba(148, 163, 184, 0.2);
    border: 1px solid rgba(148, 163, 184, 0.35);
    color: #e2e8f0;
    box-shadow: none;
}

.wp-2fa-modal .ui-dialog-titlebar-close,
.wp-2fa-modal .close,
.wp-2fa-modal .wp-2fa-modal-close,
.wp2fa-modal .ui-dialog-titlebar-close,
.wp2fa-modal .close,
.wp2fa-modal .wp-2fa-modal-close {
    color: #7dd3fc;
    opacity: 1;
}

.wp-2fa-modal .ui-dialog-titlebar-close:hover,
.wp-2fa-modal .close:hover,
.wp-2fa-modal .wp-2fa-modal-close:hover,
.wp2fa-modal .ui-dialog-titlebar-close:hover,
.wp2fa-modal .close:hover,
.wp2fa-modal .wp-2fa-modal-close:hover {
    color: #38bdf8;
}

/* Mobile styles for WP 2FA modal */
@media (max-width: 768px) {
    .wp2fa-modal .modal__content .click-to-copy,
    .kb-modal .modal__container .app-key-wrapper .click-to-copy {
        background: rgba(2, 186, 255, 0.18) !important;
        border: 1px solid rgba(2, 186, 255, 0.45) !important;
        color: #e2e8f0 !important;
        border-radius: 999px !important;
        padding: 6px 14px !important;
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.06em !important;
        cursor: pointer !important;
    }
    
    .wp2fa-modal .modal__content .click-to-copy:active,
    .kb-modal .modal__container .app-key-wrapper .click-to-copy:active {
        background: rgba(2, 186, 255, 0.35) !important;
        color: #ffffff !important;
    }
}

.kb-dashboard-twofa {
    margin: 20px 0 24px;
}

.kb-twofa-notice-card {
    border-color: rgba(2, 186, 255, 0.45);
    box-shadow: 0 6px 18px rgba(2, 186, 255, 0.12);
    padding: 20px;
}

.kb-dashboard-twofa .wp-2fa-nag,
.kb-twofa-notice-card .wp-2fa-nag {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(2, 186, 255, 0.35);
    border-radius: 14px;
    padding: 18px 22px;
    color: #e2e8f0;
    text-align: center;
    box-shadow: 0 12px 28px rgba(2, 186, 255, 0.12);
}

.kb-dashboard-twofa .wp-2fa-nag p,
.kb-twofa-notice-card .wp-2fa-nag p {
    margin: 0 0 12px 0;
    color: #cbd5e1;
    font-size: 0.98rem;
    line-height: 1.6;
}

.kb-dashboard-twofa .wp-2fa-nag p:last-child,
.kb-twofa-notice-card .wp-2fa-nag p:last-child {
    margin-bottom: 0;
}

.kb-dashboard-twofa .wp-2fa-nag .button,
.kb-twofa-notice-card .wp-2fa-nag .button,
.kb-dashboard-twofa .wp-2fa-nag button,
.kb-twofa-notice-card .wp-2fa-nag button,
.kb-dashboard-twofa .wp-2fa-nag input[type="button"],
.kb-twofa-notice-card .wp-2fa-nag input[type="button"] {
    background: linear-gradient(135deg, #02baff 0%, #0d9dd8 100%);
    color: #ffffff;
    border: none;
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    margin: 6px 8px 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.kb-dashboard-twofa .wp-2fa-nag .button:hover,
.kb-twofa-notice-card .wp-2fa-nag .button:hover,
.kb-dashboard-twofa .wp-2fa-nag button:hover,
.kb-twofa-notice-card .wp-2fa-nag button:hover,
.kb-dashboard-twofa .wp-2fa-nag input[type="button"]:hover,
.kb-twofa-notice-card .wp-2fa-nag input[type="button"]:hover {
    background: linear-gradient(135deg, #10b8ff 0%, #0284c7 100%);
    transform: translateY(-1px);
}

.kb-dashboard-twofa .wp-2fa-nag .button-secondary,
.kb-twofa-notice-card .wp-2fa-nag .button-secondary,
.kb-dashboard-twofa .wp-2fa-nag .button-link,
.kb-twofa-notice-card .wp-2fa-nag .button-link {
    background: rgba(148, 163, 184, 0.18);
    border: 1px solid rgba(148, 163, 184, 0.4);
    color: #e2e8f0;
}

.kb-docs-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 20px 60px;
}

.kb-docs-hero {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(2, 186, 255, 0.35);
    border-radius: 16px;
    padding: 28px 32px;
    box-shadow: 0 12px 28px rgba(2, 186, 255, 0.18);
    margin-bottom: 28px;
}

.kb-docs-hero h1 {
    margin: 0 0 8px 0;
    color: #ffffff;
    font-size: 2rem;
}

.kb-docs-hero p {
    margin: 0;
    color: #94a3b8;
}

.kb-docs-content {
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.4);
}

.kb-docs-section {
    padding: 20px 4px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    color: #e5e5e5;
}

.kb-docs-section:last-child {
    border-bottom: none;
}

.kb-docs-section h2 {
    margin-top: 0;
    color: #ffffff;
}

.kb-docs-callout {
    background: rgba(2, 186, 255, 0.08);
    border: 1px solid rgba(2, 186, 255, 0.25);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 12px;
}

.kb-docs-section code {
    background: rgba(2, 186, 255, 0.12);
    color: #e5e5e5;
    padding: 2px 6px;
    border-radius: 6px;
}

.kb-docs-section pre {
    background: rgba(2, 186, 255, 0.08);
    padding: 16px;
    border-radius: 12px;
    overflow-x: auto;
    border: 1px solid rgba(2, 186, 255, 0.2);
}

.kb-docs-links {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.kb-docs-links li + li {
    margin-top: 10px;
}

.kb-docs-links a {
    color: #02baff;
    text-decoration: none;
    font-weight: 600;
}

.kb-docs-links a:hover {
    text-decoration: underline;
}
.kb-api-section-label {
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.kb-api-base-url-field {
    display: flex;
    gap: 10px;
    align-items: center;
}

.kb-api-base-url-input {
    flex: 1;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(15, 23, 42, 0.8);
    color: #e5e5e5;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.9rem;
}

.kb-api-keys-list {
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(2, 186, 255, 0.03);
    padding: 8px 12px;
    margin-bottom: 16px;
}

.kb-api-key-notice {
    color: #fbbf24;
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.kb-api-key-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.kb-api-key-item:last-child {
    border-bottom: none;
}

.kb-api-key-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kb-api-key-name {
    color: #e5e5e5;
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.kb-api-key-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.6);
    flex-shrink: 0;
}

.kb-api-key-sub {
    color: #94a3b8;
    font-size: 0.85rem;
}

.kb-api-key-empty {
    color: #94a3b8;
    padding: 8px 0;
}

.kb-api-key-create {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.kb-api-key-input {
    flex: 1;
    min-width: 220px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(2, 186, 255, 0.3);
    background: rgba(15, 23, 42, 0.7);
    color: #e5e5e5;
}

.kb-api-key-input::placeholder {
    color: #94a3b8;
}

.kb-api-key-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.kb-api-key-remaining {
    color: #94a3b8;
    font-size: 0.85rem;
    margin-top: 8px;
}

.kb-api-key-hint {
    color: #94a3b8;
    font-size: 0.85rem;
    margin-top: 6px;
    min-height: 1.1em;
}

.kb-api-key-hint.kb-api-key-hint-error {
    color: #fbbf24;
}

.kb-api-key-reveal {
    margin-top: 12px;
    padding: 16px;
    border-radius: 12px;
    border: 1px dashed rgba(2, 186, 255, 0.6);
    background: rgba(15, 23, 42, 0.8);
}

.kb-api-key-reveal-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kb-api-key-reveal-label {
    color: #e5e5e5;
    font-size: 0.85rem;
    font-weight: 600;
}

.kb-api-key-reveal-value {
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    word-break: break-all;
}

.kb-api-key-reveal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kb-api-key-reveal-note {
    color: #94a3b8;
    font-size: 0.85rem;
    margin-top: 8px;
}

.kb-api-key-limit {
    margin-top: 14px;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid rgba(251, 191, 36, 0.4);
    background: rgba(251, 191, 36, 0.08);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kb-api-key-limit-title {
    color: #fbbf24;
    font-weight: 700;
}

.kb-api-key-limit-text {
    color: #e5e5e5;
    font-size: 0.9rem;
}

.kb-account-info {
    margin-bottom: 24px;
}

.kb-account-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.kb-account-row:last-child {
    border-bottom: none;
}

.kb-account-label {
    color: #94a3b8;
    font-weight: 600;
    font-size: 0.95rem;
}

.kb-account-value {
    color: #e5e5e5;
    font-size: 1rem;
}

.kb-plan-name {
    color: #02baff;
    font-weight: 700;
    font-size: 1.1rem;
}

.kb-status-active {
    color: #34a853;
    font-weight: 600;
}

.kb-status-expired {
    color: #dc3545;
    font-weight: 600;
}

.kb-status-canceled {
    color: #fbbf24;
    font-weight: 600;
}

.kb-status-free {
    color: #02baff;
    font-weight: 600;
}

.kb-status-abandoned {
    color: #fbbf24;
    font-weight: 600;
}

.kb-account-subscription-details {
    margin-top: 24px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(2, 186, 255, 0.3);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.kb-account-actions {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Style PMS shortcode buttons to match our theme */
.kb-account-actions .pms-account-links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.kb-account-actions .pms-account-links a {
    display: inline-block;
    padding: 10px 20px;
    background: linear-gradient(135deg, #02baff 0%, #0284c7 100%);
    color: white !important;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
}

.kb-account-actions .pms-account-links a:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(2, 186, 255, 0.3);
}

.kb-account-actions .pms-account-links a[href*="cancel"] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}

.kb-account-actions .pms-account-links a[href*="cancel"]:hover {
    box-shadow: 0 6px 16px rgba(220, 53, 69, 0.4);
}

/* Account Page Styles */
.kb-account-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

.kb-account-toggle .kb-account-main [data-account-view],
.kb-account-toggle .kb-account-details[data-account-view] {
    display: none;
}

.kb-account-toggle .kb-account-main .kb-account-view-active {
    display: block;
}

.kb-account-toggle [data-account-view="api"][data-account-panel] {
    display: none;
}

.kb-account-toggle [data-account-view="api"][data-account-panel].kb-account-panel-active {
    display: block;
}

.kb-account-toggle .kb-account-details.kb-account-view-active {
    display: block;
}

.kb-account-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.kb-account-panel {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(2, 186, 255, 0.2);
    border-radius: 18px;
    padding: 32px;
    box-shadow: 0 8px 24px rgba(2, 186, 255, 0.12);
}

.kb-account-actions {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.kb-account-hero {
    background: rgba(15, 23, 42, 0.6);
    border: 2px solid rgba(2, 186, 255, 0.4);
    border-radius: 16px;
    padding: 40px;
    margin-bottom: 32px;
    box-shadow: 0 8px 24px rgba(2, 186, 255, 0.2);
}

.kb-account-main .kb-account-hero {
    margin-bottom: 0;
}

.kb-account-main .kb-upgrade-banner {
    margin-top: 16px;
    margin-bottom: 0;
}

.kb-account-hero-header {
    margin-bottom: 20px;
}

.kb-account-hero-title {
    color: #ffffff;
    font-size: 1.4rem;
    margin: 0 0 6px 0;
    font-weight: 700;
}

.kb-account-subtext {
    margin: 0;
    color: #94a3b8;
    font-size: 0.95rem;
}

.kb-account-plan-badge {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 2px solid rgba(2, 186, 255, 0.3);
}

.kb-plan-icon {
    font-size: 4rem;
    line-height: 1;
    filter: drop-shadow(0 4px 8px rgba(2, 186, 255, 0.4));
}

.kb-plan-details h2 {
    color: #02baff;
    font-size: 2.5rem;
    margin: 0 0 8px 0;
    font-weight: 700;
}

.kb-plan-details .kb-plan-status {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.kb-plan-meta {
    margin: -12px 0 24px 0;
    color: #94a3b8;
    font-size: 0.95rem;
}

.kb-account-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.kb-info-card {
    background: rgba(2, 186, 255, 0.05);
    border: 1px solid rgba(2, 186, 255, 0.2);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
}

.kb-info-card:hover {
    border-color: rgba(2, 186, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: none;
}

.kb-info-icon {
    font-size: 2rem;
    color: #02baff;
    line-height: 1;
}

.kb-help-icon {
    display: inline-block;
    margin-left: 8px;
    color: #94a3b8;
    cursor: help;
    font-size: 0.9em;
    transition: color 0.2s ease;
    vertical-align: middle;
    position: relative;
}

.kb-help-icon:hover {
    color: #02baff;
}

.kb-help-icon:hover + .kb-tooltip {
    display: block;
}

.kb-tooltip {
    position: fixed;
    display: none;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(2, 186, 255, 0.3);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 900;
    min-width: 320px;
    max-width: 400px;
    pointer-events: none;
    margin-top: -10px;
}

.kb-tooltip:hover {
    display: block;
    pointer-events: auto;
}

.kb-help-icon:hover .kb-tooltip {
    display: block;
}

.kb-tooltip-content h4 {
    color: #02baff;
    font-size: 1.1rem;
    margin: 0 0 16px 0;
    font-weight: 600;
}

.kb-tooltip-option {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.kb-tooltip-option:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.kb-tooltip-option strong {
    color: #e5e5e5;
    display: block;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.kb-tooltip-option p {
    color: #94a3b8;
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
}

.kb-tooltip-option em {
    color: #02baff;
    font-style: normal;
    font-weight: 500;
    font-size: 0.85rem;
}

.kb-form-group {
    position: relative;
    overflow: visible;
}

.kb-info-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kb-info-label {
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kb-info-value {
    color: #e5e5e5;
    font-size: 1.1rem;
    font-weight: 600;
}

.kb-account-management {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(2, 186, 255, 0.3);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.kb-account-management h3 {
    color: #02baff;
    font-size: 1.6rem;
    margin: 0 0 24px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.kb-pms-wrapper {
    margin-top: 20px;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(2, 186, 255, 0.3);
    background: rgba(15, 23, 42, 0.6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.kb-pms-wrapper.kb-pms-hidden {
    display: none;
}

.kb-pms-summary-card.kb-pms-summary-hidden {
    display: none;
}

.kb-account-actions-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.kb-action-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(2, 186, 255, 0.08);
    border: 1px solid rgba(2, 186, 255, 0.2);
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.kb-action-card i {
    color: #02baff;
}

.kb-action-card:hover {
    transform: translateY(-2px);
    border-color: rgba(2, 186, 255, 0.5);
    box-shadow: 0 10px 20px rgba(2, 186, 255, 0.2);
}

.kb-upgrade-banner {
    margin: 0;
    margin-bottom: 20px;
}

/* Style PMS content in wrapper */
.kb-pms-wrapper .pms-account-links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.kb-pms-wrapper .pms-account-navigation,
.kb-pms-wrapper .pms-account-links {
    display: flex;
    gap: 0;
    background: transparent;
    border-radius: 0;
    padding: 0;
    border: none;
    border-bottom: 2px solid rgba(148, 163, 184, 0.2);
    overflow: visible;
}

.kb-pms-wrapper .pms-account-links a,
.kb-pms-wrapper .pms-account-navigation a {
    flex: 1;
    text-align: center;
    padding: 16px 24px;
    background: transparent;
    color: #94a3b8 !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    border-radius: 0;
    transition: all 0.2s ease;
    position: relative;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

.kb-pms-wrapper .pms-account-links a:hover,
.kb-pms-wrapper .pms-account-navigation a:hover {
    color: #e5e5e5 !important;
    background: transparent;
}

.kb-pms-wrapper .pms-account-links a.pms-account-active,
.kb-pms-wrapper .pms-account-links .pms-account-active a,
.kb-pms-wrapper .pms-account-navigation a.pms-account-active,
.kb-pms-wrapper .pms-account-navigation .pms-account-active a {
    color: #ffffff !important;
    background: transparent;
    box-shadow: none;
    border-bottom-color: #02baff;
}

.kb-pms-wrapper .pms-account-links a.pms-account-active::after,
.kb-pms-wrapper .pms-account-links .pms-account-active a::after,
.kb-pms-wrapper .pms-account-navigation a.pms-account-active::after,
.kb-pms-wrapper .pms-account-navigation .pms-account-active a::after {
    display: none;
}

/* Hide Logout tab */
.kb-pms-wrapper .pms-account-navigation a[href*="logout"],
.kb-pms-wrapper .pms-account-links a[href*="logout"] {
    display: none !important;
}

.kb-pms-wrapper .pms-account-subscription-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.kb-pms-wrapper .pms-account-subscription-actions a {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e5e5e5;
    transition: all 0.3s ease;
}

.kb-pms-wrapper .pms-account-subscription-actions a:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.kb-pms-wrapper .pms-account-subscription-actions a[href*="cancel"],
.kb-pms-wrapper .pms-account-subscription-actions a[href*="abandon"] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-color: rgba(239, 68, 68, 0.5);
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 6px;
}

.kb-pms-wrapper .pms-account-subscription-action-link__cancel {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-color: rgba(239, 68, 68, 0.5);
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 6px;
}

.kb-pms-wrapper .pms-account-subscription-action-link__cancel:hover,
.kb-pms-wrapper .pms-account-subscription-actions a[href*="cancel"]:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}

.kb-pms-wrapper .pms-account-subscription-action-link__renew,
.kb-pms-wrapper .pms-account-subscription-actions a[href*="renew"],
.kb-pms-wrapper .pms-account-subscription-actions a[href*="upgrade"] {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    border-color: rgba(20, 184, 166, 0.5);
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 6px;
}

.kb-pms-wrapper .pms-account-subscription-action-link__renew:hover,
.kb-pms-wrapper .pms-account-subscription-actions a[href*="renew"]:hover,
.kb-pms-wrapper .pms-account-subscription-actions a[href*="upgrade"]:hover {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    box-shadow: 0 6px 16px rgba(20, 184, 166, 0.4);
}

.kb-pms-wrapper .pms-account-subscription-actions a[href*="abandon"] {
    display: none;
}

.kb-pms-wrapper .pms-account-subscription-action-link__abandon {
    display: none !important;
}

.kb-no-subscription {
    background: rgba(15, 23, 42, 0.6);
    border: 2px dashed rgba(2, 186, 255, 0.3);
    border-radius: 16px;
    padding: 60px 40px;
    text-align: center;
}

.kb-no-sub-icon {
    font-size: 5rem;
    margin-bottom: 20px;
    filter: drop-shadow(0 4px 8px rgba(2, 186, 255, 0.3));
}

.kb-no-subscription h2 {
    color: #02baff;
    font-size: 2rem;
    margin: 0 0 12px 0;
}

.kb-no-subscription p {
    color: #94a3b8;
    font-size: 1.1rem;
    margin: 0 0 24px 0;
}

@media (max-width: 768px) {
    .kb-account-grid {
        grid-template-columns: 1fr;
    }

    .kb-account-main {
        display: contents;
    }

    .kb-account-hero {
        order: 1;
    }

    .kb-account-sidebar {
        order: 2;
    }

    .kb-upgrade-banner {
        order: 3;
    }

    .kb-account-details {
        order: 4;
    }

    .kb-api-access-card {
        order: 5;
    }

    .kb-account-twofa-card {
        order: 6;
    }
    
    .kb-account-panel {
        padding: 24px;
    }

    .kb-account-summary-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .kb-account-plan-status {
        text-align: left;
    }

    .kb-account-hero {
        padding: 24px;
    }
    
    .kb-account-plan-badge {
        flex-direction: column;
        text-align: center;
    }
    
    .kb-plan-details h2 {
        font-size: 2rem;
    }
    
    .kb-account-info-grid {
        grid-template-columns: 1fr;
    }
    
    .kb-account-management {
        padding: 24px;
    }
}

/* ============================================
   LANDING PAGE STYLES
   ============================================ */

.kb-landing-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.kb-account-deleted-banner {
    margin: 20px auto 0;
    padding: 14px 18px;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #d1fae5;
    font-weight: 600;
    max-width: 900px;
    text-align: center;
}

/* Hero Section */
.kb-hero-section {
    text-align: left;
    padding: 80px 20px 100px;
    background: linear-gradient(135deg, rgba(2, 186, 255, 0.05) 0%, rgba(13, 157, 216, 0.05) 100%);
    border-radius: 24px;
    margin-bottom: 80px;
}

.kb-hero-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 48px;
    align-items: center;
}

.kb-hero-content {
    max-width: 620px;
}

.kb-hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 24px 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.kb-hero-highlight {
    background: linear-gradient(135deg, #02baff 0%, #0d9dd8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.kb-hero-subtitle {
    font-size: 1.25rem;
    color: #c9d1d9;
    margin: 0 0 48px 0;
    line-height: 1.6;
}

.kb-hero-stats {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}

.kb-stat-item {
    text-align: center;
}

.kb-stat-number {
    font-size: 3rem;
    font-weight: 800;
    color: #02baff;
    margin-bottom: 8px;
}

.kb-stat-number i {
    color: #34d399;
    font-size: 2.2rem;
}

.kb-stat-label {
    font-size: 0.9rem;
    color: #b7c2d3;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.kb-stat-divider {
    width: 1px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
}

@media (min-width: 900px) {
    .kb-hero-stats {
        flex-wrap: nowrap;
    }
}

.kb-hero-cta {
    display: flex;
    justify-content: flex-start;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.kb-btn-hero-primary {
    padding: 16px 40px;
    background: linear-gradient(135deg, #02baff 0%, #0d9dd8 100%);
    color: #ffffff;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    box-shadow: none;
    border: none;
    cursor: pointer;
}

.kb-btn-hero-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(2, 186, 255, 0.3);
}

.kb-btn-hero-secondary {
    padding: 16px 40px;
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border: 2px solid rgba(2, 186, 255, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
}

.kb-btn-hero-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(2, 186, 255, 0.6);
}

.kb-hero-note {
    color: #b7c2d3;
    font-size: 0.95rem;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    line-height: 1.5;
}

.kb-hero-points {
    list-style: none;
    padding: 0;
    margin: 0 0 28px 0;
    display: grid;
    gap: 12px;
    color: #c9d1d9;
    font-size: 1rem;
}

.kb-hero-points li {
    display: flex;
    gap: 12px;
    align-items: center;
}

.kb-hero-points i {
    color: #34d399;
    font-size: 1.1rem;
}

.kb-hero-media {
    display: flex;
    justify-content: center;
}

.kb-media-placeholder {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 28px;
    text-align: left;
    color: #e2e8f0;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.kb-hero-media-gif {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35);
    clip-path: inset(6px round 14px);
}

.kb-media-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(2, 186, 255, 0.15);
    color: #7ad8ff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 16px;
}

.kb-media-placeholder h3 {
    margin: 0 0 12px 0;
    font-size: 1.4rem;
    color: #ffffff;
}

.kb-media-placeholder p {
    margin: 0 0 18px 0;
    color: #cbd5f5;
    line-height: 1.6;
}

.kb-media-outline {
    border-radius: 16px;
    border: 1px dashed rgba(148, 163, 184, 0.5);
    background: rgba(15, 23, 42, 0.3);
    padding: 18px;
    margin-bottom: 16px;
}

.kb-media-window {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

.kb-media-window span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.6);
}

.kb-media-lines div {
    height: 10px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
    margin-bottom: 10px;
}

.kb-media-lines div:nth-child(2) {
    width: 70%;
}

.kb-media-lines div:nth-child(3) {
    width: 50%;
    margin-bottom: 0;
}

.kb-media-note {
    font-size: 0.85rem;
    color: #94a3b8;
    margin: 0;
}

.kb-hero-link {
    margin-left: 12px;
    color: #02baff;
    text-decoration: none;
    font-weight: 600;
}

.kb-hero-link:hover {
    text-decoration: underline;
}

/* Features Section */
.kb-features-section {
    padding: 80px 20px;
}

.kb-section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 60px 0;
}

.kb-subsection-title {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 40px 0;
}

.kb-section-subtitle {
    text-align: center;
    font-size: 1.1rem;
    color: #b7c2d3;
    margin: -40px 0 40px 0;
}

.kb-subsection-subtitle {
    text-align: center;
    font-size: 0.95rem;
    color: #b7c2d3;
    margin: -30px 0 30px 0;
}

.kb-updated-time {
    text-align: center;
    font-size: 0.85rem;
    color: #98a6bd;
    margin: -20px 0 28px 0;
    min-height: 1.2em;
}

/* What's New & Trending Section */
.kb-recent-releases-section {
    padding: 72px 20px;
    background: rgba(255, 255, 255, 0.02);
    text-align: center;
    margin-bottom: 80px;
}

.kb-recent-releases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto 40px auto;
}

.kb-release-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    text-align: left;
}

.kb-release-card:hover {
    transform: translateY(-4px);
    border-color: rgba(2, 186, 255, 0.4);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.kb-release-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 24px 22px 16px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.kb-release-logo {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    background: white;
    padding: 10px;
    object-fit: contain;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.kb-release-meta {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kb-release-name {
    font-size: 1.35rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kb-release-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.kb-cncf-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kb-cncf-badge.kb-graduated {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.kb-cncf-badge.kb-incubating {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.kb-cncf-badge.kb-sandbox {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.kb-cncf-badge.kb-opensource {
    background: rgba(148, 163, 184, 0.2);
    color: #94a3b8;
}

.kb-category-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
}

.kb-impact-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid;
    transition: all 0.2s ease;
    cursor: help;
}

.kb-impact-badge:hover {
    transform: translateY(-1px);
    opacity: 0.9;
}

.kb-release-body {
    padding: 16px 22px;
    text-align: left;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 16px;
    align-items: start;
}

.kb-release-version-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 0;
    flex-wrap: wrap;
    grid-column: 1;
}

.kb-version-label {
    color: #b7c2d3;
    font-size: 0.85rem;
}

.kb-version-number {
    font-size: 1.05rem;
    font-weight: 700;
    color: #02baff;
    font-family: 'Courier New', monospace;
}

.kb-security-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.kb-security-badge.kb-security-critical {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.kb-security-badge.kb-security-high {
    background: rgba(251, 146, 60, 0.2);
    color: #fb923c;
}

.kb-security-badge.kb-security-medium {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.kb-release-time {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    color: #b7c2d3;
    font-size: 0.85rem;
    margin-bottom: 0;
    grid-column: 2;
    justify-content: flex-end;
}

.kb-release-notes {
    color: #c9d1d9;
    line-height: 1.6;
    font-size: 0.9rem;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    grid-column: 1 / -1;
}

.kb-release-footer {
    padding: 12px 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: right;
}

.kb-btn-release-view {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #02baff 0%, #0d9dd8 100%);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    font-size: 0.85rem;
}

.kb-btn-release-view:hover {
    background: linear-gradient(135deg, #0d9dd8 0%, #0a7ab8 100%);
    transform: translateX(2px);
    box-shadow: 0 4px 12px rgba(2, 186, 255, 0.4);
}

.kb-recent-releases-cta {
    text-align: center;
    margin-top: 40px;
}

.kb-no-releases, .kb-error {
    text-align: center;
    color: #94a3b8;
    padding: 40px;
    font-size: 1.1rem;
}

.kb-inline-cta {
    max-width: 1000px;
    margin: 60px auto 80px auto;
    padding: 28px 32px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    position: relative;
    overflow: hidden;
}

.kb-inline-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(2, 186, 255, 0.08), transparent 45%);
    opacity: 0.7;
}

.kb-inline-cta h3 {
    margin: 0 0 8px 0;
    font-size: 1.4rem;
    color: #ffffff;
}

.kb-inline-cta p {
    margin: 0;
    color: #b7c2d3;
}

.kb-inline-cta-content,
.kb-inline-cta-actions {
    position: relative;
    z-index: 1;
}

.kb-inline-cta-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Popular Projects Card within What's New & Trending */
.kb-popular-projects-wrapper {
    max-width: 1000px;
    margin: 60px auto 0 auto;
    padding: 32px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.kb-popular-projects-wrapper .kb-subsection-title,
.kb-popular-projects-wrapper .kb-subsection-subtitle {
    text-align: left;
}

/* Popular Projects Section (standalone - kept for legacy) */
.kb-popular-projects-section {
    padding: 80px 20px;
    background: rgba(255, 255, 255, 0.03);
}

.kb-popular-projects-section .kb-section-title,
.kb-popular-projects-section .kb-section-subtitle {
    text-align: left;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.kb-popular-projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    max-width: 1000px;
    margin: 0 auto;
}

.kb-popular-project-card {
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: start;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    position: relative;
}

.kb-popular-project-card:hover {
    border-color: rgba(2, 186, 255, 0.35);
    transform: translateY(-1px);
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

.kb-popular-project-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: white;
    padding: 6px;
    object-fit: contain;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.kb-popular-project-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kb-popular-project-name {
    margin: 0 0 6px 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kb-popular-project-count {
    margin: 0;
    color: #b7c2d3;
    font-size: 0.85rem;
    text-align: left;
}

.kb-popular-project-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.kb-popular-project-activity {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    flex-wrap: wrap;
}

.kb-activity-pill {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    background: rgba(2, 186, 255, 0.16);
    color: #7ad8ff;
    border: 1px solid rgba(2, 186, 255, 0.28);
}

.kb-activity-stat {
    font-size: 0.8rem;
    color: #b7c2d3;
}

@media screen and (max-width: 768px) {
    .kb-hero-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
        justify-items: center;
    }

    .kb-stat-divider {
        display: none;
    }

    .kb-hero-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .kb-hero-content {
        max-width: none;
    }

    .kb-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .kb-recent-releases-grid {
        grid-template-columns: 1fr;
    }
    
    .kb-release-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .kb-release-meta {
        text-align: center;
    }

    .kb-release-badges {
        justify-content: center;
    }

    .kb-release-body {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .kb-release-time {
        grid-column: 1;
        justify-content: center;
    }

    .kb-release-version-row {
        justify-content: center;
    }

    .kb-release-footer {
        text-align: center;
    }
    
    .kb-popular-projects-wrapper {
        padding: 24px 20px;
        border-radius: 16px;
    }
    
    .kb-popular-projects-grid {
        grid-template-columns: 1fr;
    }
}

.kb-landing-page a:focus-visible,
.kb-landing-page button:focus-visible {
    outline: 2px solid rgba(2, 186, 255, 0.85);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(2, 186, 255, 0.2);
}

@media screen and (max-width: 640px) {
    .kb-hero-section {
        padding: 56px 16px 72px;
        margin-bottom: 56px;
        text-align: center;
    }

    .kb-hero-title {
        font-size: 2.4rem;
        line-height: 1.2;
    }

    .kb-hero-subtitle {
        font-size: 1.05rem;
        margin-bottom: 36px;
    }

    .kb-hero-stats {
        justify-content: center;
    }

    .kb-hero-cta,
    .kb-hero-note {
        justify-content: center;
    }

    .kb-hero-points {
        text-align: left;
    }

    .kb-stat-number {
        font-size: 2.4rem;
    }

    .kb-inline-cta {
        margin: 40px auto 64px auto;
        padding: 22px 20px;
        flex-direction: column;
        align-items: flex-start;
    }

    .kb-inline-cta-actions {
        width: 100%;
    }

    .kb-inline-cta-actions a {
        width: 100%;
        justify-content: center;
    }

    .kb-recent-releases-section,
    .kb-features-section,
    .kb-faq-section,
    .kb-dashboard-section,
    .kb-pricing-section,
    .kb-comparison-section {
        padding: 56px 16px;
    }
}

@media screen and (max-width: 480px) {
    .kb-hero-title {
        font-size: 2.1rem;
    }

    .kb-hero-cta {
        gap: 12px;
    }

    .kb-btn-hero-primary,
    .kb-btn-hero-secondary {
        width: 100%;
        justify-content: center;
    }

    .kb-release-header {
        padding: 22px 18px 16px 18px;
        gap: 12px;
    }

    .kb-release-logo {
        width: 72px;
        height: 72px;
    }

    .kb-release-body {
        padding: 16px 18px;
    }

    .kb-release-footer {
        padding: 14px 18px;
    }

    .kb-release-name {
        font-size: 1.25rem;
    }

    .kb-release-version-row {
        margin-bottom: 8px;
    }

    .kb-release-time {
        margin-bottom: 10px;
        font-size: 0.85rem;
    }

    .kb-release-notes {
        -webkit-line-clamp: 1;
    }

    .kb-popular-project-badges {
        display: none;
    }

    .kb-popular-project-card {
        grid-template-columns: 44px 1fr;
        align-items: center;
    }

    .kb-popular-project-logo {
        width: 44px;
        height: 44px;
    }

    .kb-cncf-badge,
    .kb-category-badge {
        font-size: 0.65rem;
        padding: 3px 8px;
    }

    .kb-popular-project-card {
        padding: 14px 16px;
        gap: 12px;
    }

    .kb-popular-project-logo {
        width: 44px;
        height: 44px;
    }
}

.kb-skeleton-card {
    position: relative;
    overflow: hidden;
}

.kb-skeleton-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
}

.kb-skeleton-logo {
    width: 56px;
    height: 56px;
}

.kb-skeleton-block {
    width: 100%;
    display: grid;
    gap: 10px;
}

.kb-skeleton-line {
    height: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
}

.kb-line-wide {
    width: 80%;
}

.kb-line-medium {
    width: 60%;
}

.kb-line-short {
    width: 40%;
}

.kb-skeleton-card::after,
.kb-skeleton-line::after,
.kb-skeleton-circle::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    height: 100%;
    width: 120%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    animation: kb-skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes kb-skeleton-shimmer {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(220%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .kb-skeleton-card::after,
    .kb-skeleton-line::after,
    .kb-skeleton-circle::after,
    .kb-btn-hero-primary,
    .kb-btn-hero-secondary,
    .kb-release-card,
    .kb-popular-project-card,
    .kb-feature-card {
        animation: none;
        transition: none;
        transform: none;
    }
}

.kb-error-state {
    text-align: center;
    padding: 32px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    color: #b7c2d3;
}

.kb-error-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}
/* FAQ Section */
.kb-faq-section {
    padding: 80px 20px;
    background: rgba(255, 255, 255, 0.02);
}

.kb-faq-grid {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kb-faq-more-link {
    margin-top: 32px;
    text-align: center;
    font-size: 1rem;
    color: #c9d1d9;
}

.kb-faq-more-link a {
    color: #02baff;
    text-decoration: none;
    font-weight: 500;
}

.kb-faq-more-link a:hover {
    text-decoration: underline;
}

.kb-faq-item {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.kb-faq-item:hover {
    border-color: rgba(2, 186, 255, 0.3);
}

.kb-faq-item.active {
    border-color: rgba(2, 186, 255, 0.5);
}

.kb-faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
}

.kb-faq-question:hover {
    color: #02baff;
}

.kb-faq-question i {
    color: #02baff;
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.kb-faq-item.active .kb-faq-question i {
    transform: rotate(180deg);
}

.kb-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 24px;
}

.kb-faq-item.active .kb-faq-answer {
    max-height: 500px;
    padding: 0 24px 20px 24px;
}

.kb-faq-answer p {
    color: #c9d1d9;
    line-height: 1.7;
    font-size: 1rem;
    margin: 0;
}

.kb-faq-answer a {
    color: #02baff;
    text-decoration: none;
    font-weight: 500;
}

.kb-faq-answer a:hover {
    text-decoration: underline;
}

.kb-faq-answer strong {
    color: #ffffff;
    font-weight: 600;
}

@media screen and (max-width: 768px) {
    .kb-faq-question {
        font-size: 1rem;
        padding: 16px 20px;
    }
    
    .kb-faq-answer {
        font-size: 0.95rem;
    }
    
    .kb-faq-item.active .kb-faq-answer {
        padding: 0 20px 16px 20px;
    }
}

.kb-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
}

.kb-mcp-section {
    text-align: left;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(2, 186, 255, 0.05) 0%, rgba(13, 157, 216, 0.05) 100%);
    border-radius: 24px;
}

.kb-mcp-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 1;
}

@media (min-width: 900px) {
    .kb-mcp-grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    }
}

.kb-mcp-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    z-index: 1;
}

.kb-mcp-right {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.kb-mcp-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #ffffff;
    margin: 24px 0 0 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.kb-mcp-copy {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
}

.kb-mcp-copy h2 {
    font-size: 2.1rem;
    margin-bottom: 0;
}

.kb-mcp-copy p {
    color: var(--kb-text-muted);
}

.kb-mcp-description {
    color: #c9d1d9;
    line-height: 1.6;
    font-size: 1.1rem;
    margin: 0;
}

.kb-mcp-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
    color: #c9d1d9;
    font-size: 1rem;
}

.kb-mcp-points li {
    display: flex;
    gap: 12px;
    align-items: center;
}

.kb-mcp-points i {
    color: #34d399;
    font-size: 1.1rem;
}

.kb-mcp-examples {
    margin-top: 8px;
}

.kb-mcp-examples h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 12px 0;
}

.kb-mcp-query-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
    font-size: 0.95rem;
}

.kb-mcp-query-list li {
    color: #94a3b8;
    padding-left: 20px;
    position: relative;
    font-style: italic;
}

.kb-mcp-query-list li::before {
    content: '"';
    position: absolute;
    left: 0;
    color: #38bdf8;
    font-size: 1.2rem;
    font-style: normal;
}

.kb-mcp-cta {
    display: flex;
    justify-content: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.kb-btn-mcp-primary {
    padding: 14px 32px;
    background: linear-gradient(135deg, #02baff 0%, #0d9dd8 100%);
    color: #ffffff;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: none;
    border: none;
    cursor: pointer;
}

.kb-btn-mcp-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(2, 186, 255, 0.3);
}

.kb-btn-mcp-secondary {
    padding: 14px 32px;
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 2px solid rgba(2, 186, 255, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
}

.kb-btn-mcp-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(2, 186, 255, 0.6);
}

.kb-mcp-note {
    margin-top: 16px;
    font-size: 0.95rem;
    color: var(--kb-text-muted);
}

.kb-mcp-terminal {
    background: transparent;
    border-radius: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    position: relative;
    overflow: hidden;
}

.kb-code-terminal {
    background: transparent;
    border: none;
    padding: 0;
}

.kb-code-terminal-header {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 16px 16px 0 0;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: #c6d4ff;
}

.kb-terminal-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.75;
}

.kb-terminal-dot-red {
    background: #ff5f56;
    opacity: 1;
}

.kb-terminal-dot-yellow {
    background: #ffbd2e;
    opacity: 1;
}

.kb-terminal-dot-green {
    background: #27c93f;
    opacity: 1;
}

.kb-code-terminal pre {
    margin: 0;
    padding: 18px;
    background: rgba(2, 6, 23, 0.85);
    border-radius: 0 0 16px 16px;
    font-family: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 1.03rem;
    color: #f8fafc;
    line-height: 1.5;
    white-space: pre-line;
}

.kb-terminal-prompt {
    display: block;
    font-size: 0.95rem;
    color: #94a3b8;
    margin-bottom: 0.35rem;
}

.kb-terminal-user {
    color: #38bdf8;
    font-weight: 600;
}

.kb-terminal-at {
    color: #94a3b8;
}

.kb-terminal-host {
    color: #a5f3fc;
    font-weight: 600;
}

.kb-terminal-symbol {
    color: #f472b6;
    margin-right: 0.4rem;
}

.kb-terminal-command {
    display: block;
    color: #e2e8f0;
    font-weight: 600;
}

.kb-terminal-note {
    margin-top: 0.65rem;
    font-size: 0.9rem;
    color: var(--kb-text-muted);
}

@media (max-width: 960px) {
    .kb-mcp-section {
        padding: 24px;
    }
    .kb-mcp-grid {
        grid-template-columns: 1fr;
    }
}

.kb-feature-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 32px;
    transition: all 0.3s ease;
    clip-path: none;
    mask: none;
    background-image: none;
    position: relative;
    overflow: visible;
}

.kb-features-grid .kb-feature-card::before,
.kb-features-grid .kb-feature-card::after {
    content: none;
}

.kb-feature-card:hover {
    transform: translateY(-4px);
    border-color: rgba(2, 186, 255, 0.4);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.kb-feature-icon {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #ffffff;
    margin-bottom: 20px;
}

.kb-feature-card h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 12px 0;
}

.kb-feature-card p {
    color: #c9d1d9;
    line-height: 1.6;
    margin: 0;
}

.kb-feature-data {
    display: grid;
    gap: 12px;
}

.kb-feature-data-line {
    font-size: 0.85rem;
    color: #94a3b8;
    margin: 0;
}

.kb-feature-data-line span {
    color: #e2e8f0;
    font-weight: 600;
}

.kb-feature-note {
    font-size: 0.9rem;
    color: #94a3b8;
    margin-top: 6px;
}

.kb-dashboard-section {
    padding: 80px 20px;
}

.kb-dashboard-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}

@media (max-width: 900px) {
    .kb-dashboard-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

.kb-dashboard-placeholder {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 20px;
    padding: 32px;
    min-height: 240px;
    display: grid;
    gap: 16px;
}

.kb-dashboard-gif {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
    clip-path: inset(6px round 12px);
}

.kb-dashboard-window {
    display: flex;
    gap: 6px;
}

.kb-dashboard-window span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.6);
}

.kb-dashboard-lines div {
    height: 12px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
    margin-bottom: 12px;
}

.kb-dashboard-lines div:nth-child(2) {
    width: 80%;
}

.kb-dashboard-lines div:nth-child(3) {
    width: 65%;
}

.kb-dashboard-lines div:nth-child(4) {
    width: 50%;
    margin-bottom: 0;
}

.kb-dashboard-caption {
    margin: 0;
    font-size: 0.85rem;
    color: #94a3b8;
}

.kb-dashboard-content h2 {
    margin: 0 0 16px 0;
    font-size: 2.1rem;
    color: #ffffff;
}

.kb-dashboard-content p {
    margin: 0 0 16px 0;
    color: #c9d1d9;
    line-height: 1.6;
}

.kb-dashboard-list {
    margin: 0 0 16px 20px;
    color: #c9d1d9;
    line-height: 1.6;
}

.kb-dashboard-list li {
    margin-bottom: 8px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.kb-dashboard-list i {
    color: #34d399;
    margin-top: 4px;
}

.kb-dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.kb-example-note {
    color: #94a3b8;
    font-size: 0.9rem;
}

.kb-example-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 16px 12px 0;
    color: #02baff;
    text-decoration: none;
    font-weight: 600;
}

.kb-example-link:hover {
    text-decoration: underline;
}

.kb-example-link-muted {
    color: #94a3b8;
}

.kb-feature-coming-soon {
    opacity: 0.6;
    position: relative;
    pointer-events: none;
}

.kb-coming-soon-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #ef4444;
    color: white;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

/* Comparison Section */
.kb-comparison-section {
    padding: 80px 20px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 24px;
    margin-bottom: 80px;
}

.kb-comparison-table-wrapper {
    overflow-x: auto;
    margin: 0 auto;
    max-width: 1000px;
}

.kb-comparison-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
}

.kb-comparison-table thead {
    background: #0e273f;
}

.kb-comparison-table th {
    padding: 20px;
    text-align: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    border-bottom: 2px solid rgba(2, 186, 255, 0.3);
    background: #0e273f;
}

.kb-comparison-table th:first-child {
    text-align: left;
}

.kb-highlight-col {
    background: rgba(2, 186, 255, 0.08) !important;
}

.kb-product-name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #02baff;
    font-size: 1.1rem;
}

.kb-comparison-table td {
    padding: 16px 20px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.kb-comparison-table td:first-child {
    text-align: left;
    font-weight: 600;
    color: #ffffff;
}

.kb-comparison-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.kb-check {
    color: #34a853;
    font-size: 1.2rem;
}

.kb-no {
    color: #ef4444;
    font-size: 1.2rem;
}

.kb-partial {
    color: #fbbf24;
    font-size: 1.2rem;
}

/* Mobile Responsive - Comparison Table */
@media screen and (max-width: 768px) {
    .kb-comparison-section {
        padding: 40px 15px;
    }

    .kb-comparison-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -15px;
        padding: 0 15px;
    }

    .kb-comparison-table {
        min-width: 600px; /* Ensure table doesn't get too cramped */
    }

    .kb-comparison-table th,
    .kb-comparison-table td {
        padding: 12px 10px;
        font-size: 0.9rem;
    }

    .kb-product-name {
        font-size: 0.9rem;
    }

    .kb-check,
    .kb-no,
    .kb-partial {
        font-size: 1.1rem;
    }

    /* Add scroll hint */
    .kb-comparison-table-wrapper::after {
        content: '← Swipe to see more →';
        display: block;
        text-align: center;
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.75rem;
        padding: 10px;
        font-style: italic;
    }
}

/* Pricing Section */
.kb-pricing-section {
    padding: 80px 20px;
}

.kb-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
    max-width: 800px;
    margin: 0 auto;
}

.kb-pricing-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 40px;
    position: relative;
    transition: all 0.3s ease;
}

.kb-pricing-card:hover {
    transform: translateY(-4px);
    border-color: rgba(2, 186, 255, 0.4);
}

.kb-pricing-featured {
    border-color: #02baff;
    background: rgba(2, 186, 255, 0.08);
}

.kb-pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #02baff;
    color: #ffffff;
    padding: 6px 20px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
}

.kb-pricing-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 16px 0;
}

.kb-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 32px;
}

.kb-price-amount {
    font-size: 3rem;
    font-weight: 800;
    color: #02baff;
}

.kb-price-period {
    font-size: 1.1rem;
    color: #94a3b8;
}

.kb-pricing-note {
    margin: 8px 0 0 0;
    color: #cbd5f5;
    font-size: 0.9rem;
}

.kb-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 32px 0;
}

.kb-pricing-features li {
    padding: 12px 0;
    color: #c9d1d9;
    display: flex;
    align-items: center;
    gap: 12px;
}

.kb-pricing-features li i {
    color: #34a853;
}

.kb-pricing-footnote {
    margin: 12px 0 0 0;
    color: #94a3b8;
    font-size: 0.85rem;
}

.kb-btn-pricing {
    display: block;
    width: 100%;
    padding: 14px 24px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(2, 186, 255, 0.3);
    color: #ffffff;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
}

.kb-btn-pricing:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #02baff;
}

.kb-btn-pricing-featured {
    background: linear-gradient(135deg, #02baff 0%, #0d9dd8 100%);
    border: none;
}

.kb-btn-pricing-featured:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(2, 186, 255, 0.4);
}

.kb-btn-pricing-active {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.5);
    color: #86efac;
    cursor: default;
    pointer-events: none;
}

.kb-btn-pricing-active i {
    margin-right: 8px;
}

.kb-btn-pricing-featured.kb-btn-pricing-active {
    background: rgba(34, 197, 94, 0.2);
    border: 2px solid rgba(34, 197, 94, 0.5);
}

.kb-btn-pricing-downgrade {
    background: rgba(148, 163, 184, 0.1);
    border-color: rgba(148, 163, 184, 0.3);
    color: #cbd5e1;
}

.kb-btn-pricing-downgrade:hover {
    background: rgba(148, 163, 184, 0.15);
    border-color: rgba(148, 163, 184, 0.5);
}

.kb-btn-pricing-downgrade i {
    margin-right: 8px;
}

/* Final CTA */
.kb-final-cta {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(2, 186, 255, 0.1) 0%, rgba(13, 157, 216, 0.1) 100%);
    border-radius: 24px;
    margin-bottom: 80px;
    margin-top: 80px;
}

.kb-final-cta h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 16px 0;
}

.kb-final-cta p {
    font-size: 1.2rem;
    color: #c9d1d9;
    margin: 0 0 40px 0;
}

/* Responsive */
@media (max-width: 768px) {
    .kb-hero-title {
        font-size: 2.5rem;
    }
    
    .kb-hero-stats {
        flex-direction: column;
        gap: 24px;
    }
    
    .kb-stat-divider {
        display: none;
    }
    
    .kb-hero-cta {
        flex-direction: column;
    }
    
    .kb-btn-hero-primary,
    .kb-btn-hero-secondary {
        width: 100%;
        justify-content: center;
    }
    
    .kb-features-grid {
        grid-template-columns: 1fr;
    }
    
    .kb-pricing-grid {
        grid-template-columns: 1fr;
    }
}

/* Request Project Page */
.kb-request-page {
    display: flex;
    justify-content: center;
    padding: 80px 20px;
}

.kb-request-card {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(2, 186, 255, 0.2);
    border-radius: 20px;
    max-width: 720px;
    width: 100%;
    padding: 40px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.kb-request-header h1 {
    font-size: 2rem;
    color: #02baff;
    margin: 0 0 12px 0;
}

.kb-request-header p {
    color: #cbd5e1;
    margin: 0 0 24px 0;
}

.kb-request-form {
    display: grid;
    gap: 16px;
}

.kb-request-consent {
    background: rgba(2, 186, 255, 0.08);
    border: 1px solid rgba(2, 186, 255, 0.2);
    border-radius: 10px;
    padding: 14px 16px;
    color: #e2e8f0;
}

.kb-request-consent label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    margin-bottom: 8px;
}

.kb-request-consent input[type="checkbox"] {
    accent-color: #02baff;
    width: 18px;
    height: 18px;
}

.kb-request-consent p {
    margin: 0;
    color: #cbd5e1;
    font-size: 0.95rem;
    line-height: 1.5;
}

.kb-request-form label {
    color: #e2e8f0;
    font-weight: 600;
    font-size: 0.95rem;
}

.kb-request-form .kb-input,
.kb-request-form .kb-textarea {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(2, 186, 255, 0.3);
    border-radius: 8px;
    padding: 12px 14px;
    color: #e2e8f0;
    font-size: 1rem;
}

.kb-request-form .kb-input:focus,
.kb-request-form .kb-textarea:focus {
    outline: none;
    border-color: #02baff;
    box-shadow: 0 0 0 3px rgba(2, 186, 255, 0.1);
}

.kb-btn-request {
    background: linear-gradient(135deg, #02baff 0%, #0284c7 100%);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 14px 18px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform 0.2s ease;
}

.kb-btn-request:hover {
    transform: translateY(-2px);
}

.kb-btn-request-secondary {
    background: rgba(2, 186, 255, 0.12);
    border: 1px solid rgba(2, 186, 255, 0.35);
    color: #e2e8f0;
    text-decoration: none;
    margin-top: 12px;
    display: inline-flex;
}

.kb-btn-request-secondary:hover {
    background: rgba(2, 186, 255, 0.2);
}

.kb-request-success,
.kb-request-error {
    display: flex;
    gap: 12px;
    padding: 16px;
    border-radius: 10px;
    margin-bottom: 20px;
    align-items: center;
}

.kb-request-success {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #86efac;
}

.kb-request-success p {
    margin: 6px 0 0 0;
    color: #bbf7d0;
}

.kb-request-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

@media (max-width: 768px) {
    .kb-request-page {
        padding: 40px 16px;
    }

    .kb-request-card {
        padding: 28px 22px;
    }
}

/* ==========================================
   PMS Register Page Styling
   ========================================== */

/* Main register form container */
.pms-form,
#pms_register-form,
.pms_register-form {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(2, 186, 255, 0.2);
    border-radius: 16px;
    padding: 40px;
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Register page heading */
.pms-form h3,
#pms_register-form h3,
.pms_register-form h3 {
    color: #02baff;
    font-size: 1.8rem;
    margin: 0 0 24px 0;
    font-weight: 600;
}

/* Subscription plan section */
.pms-subscription-plans,
.pms_subscription-plans {
    margin-bottom: 32px;
}

.pms-subscription-plans h3,
.pms_subscription-plans h3 {
    color: #e2e8f0;
    font-size: 1.3rem;
    margin: 0 0 16px 0;
}

.pms-subscription-plans p,
.pms_subscription-plans p {
    color: #94a3b8;
    line-height: 1.6;
}

/* Subscription plan boxes */
.pms_subscription-plan,
.pms-subscription-plan {
    background: rgba(15, 23, 42, 0.6);
    border: 2px solid rgba(2, 186, 255, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.pms_subscription-plan:hover,
.pms-subscription-plan:hover {
    border-color: #02baff;
    box-shadow: 0 4px 16px rgba(2, 186, 255, 0.2);
    transform: translateY(-2px);
}

.pms_subscription-plan input[type="radio"],
.pms-subscription-plan input[type="radio"] {
    margin-right: 12px;
    accent-color: #02baff;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.pms_subscription-plan label,
.pms-subscription-plan label {
    color: #e2e8f0;
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 100%;
    gap: 24px;
}

.pms-subscription-plan-price,
.pms_subscription-plan-price {
    color: #02baff;
    font-size: 1.5rem;
    font-weight: 700;
    margin-left: auto;
    margin-right: 18px;
}

/* Form fields */
.pms-field,
.pms_field,
.pms-form-field {
    margin-bottom: 24px;
}

.pms-field label,
.pms_field label,
.pms-form-field label {
    color: #e2e8f0;
    font-size: 1rem;
    font-weight: 500;
    display: block;
    margin-bottom: 8px;
}

.pms-field label.pms-required::after,
.pms_field label.pms-required::after {
    content: " *";
    color: #ef4444;
}

.pms-field input[type="text"],
.pms-field input[type="email"],
.pms-field input[type="password"],
.pms_field input[type="text"],
.pms_field input[type="email"],
.pms_field input[type="password"],
.pms-form-field input[type="text"],
.pms-form-field input[type="email"],
.pms-form-field input[type="password"] {
    width: 100%;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(2, 186, 255, 0.3);
    border-radius: 8px;
    padding: 12px 16px;
    color: #e2e8f0;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.pms-field input:focus,
.pms_field input:focus,
.pms-form-field input:focus {
    outline: none;
    border-color: #02baff;
    box-shadow: 0 0 0 3px rgba(2, 186, 255, 0.1);
}

/* Checkbox styling */
.pms-field input[type="checkbox"],
.pms_field input[type="checkbox"] {
    accent-color: #02baff;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    cursor: pointer;
}

.pms-checkbox-wrap label,
.pms_checkbox-wrap label {
    display: flex;
    align-items: center;
    color: #94a3b8;
    cursor: pointer;
}

/* Payment method section */
.pms-payment-methods,
.pms_payment-methods,
#pms-payment-options {
    margin: 32px 0;
}

.pms-payment-methods h3,
.pms_payment-methods h3 {
    color: #e2e8f0;
    font-size: 1.3rem;
    margin: 0 0 16px 0;
}

.pms-payment-method,
.pms_payment-method,
.pms-payment-option {
    background: rgba(15, 23, 42, 0.6);
    border: 2px solid rgba(2, 186, 255, 0.2);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pms-payment-method:hover,
.pms_payment-method:hover,
.pms-payment-option:hover {
    border-color: #02baff;
    box-shadow: 0 4px 12px rgba(2, 186, 255, 0.15);
}

.pms-payment-method input[type="radio"],
.pms_payment-method input[type="radio"] {
    accent-color: #02baff;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.pms-payment-method label,
.pms_payment-method label {
    color: #e2e8f0;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    flex: 1;
}

.pms-payment-method img,
.pms_payment-method img {
    max-height: 30px;
    margin-left: auto;
}

/* Auto-renewal checkbox */
.pms-subscription-auto-renew,
.pms_subscription-auto-renew {
    background: rgba(2, 186, 255, 0.05);
    border: 1px solid rgba(2, 186, 255, 0.2);
    border-radius: 8px;
    padding: 16px;
    margin: 20px 0;
}

.pms-subscription-auto-renew label,
.pms_subscription-auto-renew label {
    color: #e2e8f0;
    font-size: 1rem;
}

/* Submit button */
.pms-submit,
.pms_submit,
#pms_register-form input[type="submit"],
.pms-form input[type="submit"] {
    background: linear-gradient(135deg, #02baff 0%, #0284c7 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 14px 32px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    margin-top: 24px;
}

.pms-submit:hover,
.pms_submit:hover,
#pms_register-form input[type="submit"]:hover,
.pms-form input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: none;
}

.pms-submit:active,
.pms_submit:active,
#pms_register-form input[type="submit"]:active {
    transform: translateY(0);
}

/* Error and success messages */
.pms-field-errors,
.pms_field-errors,
.pms-errors,
.pms_errors {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    padding: 12px 16px;
    color: #fca5a5;
    margin: 16px 0;
}

.pms-success,
.pms_success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 8px;
    padding: 12px 16px;
    color: #86efac;
    margin: 16px 0;
}

/* Description text */
.pms-subscription-plan-description,
.pms_subscription-plan-description,
.pms-description {
    color: #94a3b8;
    font-size: 0.95rem;
    margin-top: 8px;
    line-height: 1.5;
}

/* Trial period info */
.pms-subscription-plan-trial,
.pms_subscription-plan-trial {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 6px;
    padding: 8px 12px;
    color: #86efac;
    font-size: 0.9rem;
    margin-top: 12px;
    display: inline-block;
}

/* Responsive styling */
@media (max-width: 768px) {
    .pms-form,
    #pms_register-form,
    .pms_register-form {
        padding: 24px;
        border-radius: 12px;
    }
    
    .pms-payment-method,
    .pms_payment-method {
        flex-wrap: wrap;
    }
    
    .pms-payment-method img,
    .pms_payment-method img {
        margin: 8px 0 0 0;
    }
}

/* ==========================================
   Modal Dialog Styling
   ========================================== */

.kb-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    z-index: 998;
    animation: kb-fadeIn 0.2s ease;
}

.kb-modal-overlay.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.kb-modal {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%);
    border: 2px solid rgba(2, 186, 255, 0.3);
    border-radius: 16px;
    padding: 32px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: kb-modalSlideIn 0.3s ease;
    position: relative;
    overflow: visible;
}

.kb-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.kb-modal-icon {
    font-size: 2rem;
    filter: drop-shadow(0 4px 8px rgba(2, 186, 255, 0.3));
}

.kb-modal-icon.warning {
    color: #fbbf24;
}

.kb-modal-icon.error {
    color: #ef4444;
}

.kb-modal-icon.info {
    color: #02baff;
}

.kb-modal-icon.success {
    color: #22c55e;
}

.kb-modal-icon.upgrade {
    color: #02baff;
}

.kb-modal h3 {
    color: #e2e8f0;
    font-size: 1.5rem;
    margin: 0;
    font-weight: 600;
}

.kb-modal-body {
    color: #94a3b8;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 28px;
}

.kb-modal-body p {
    margin: 0 0 12px 0;
}

.kb-modal-body p:last-child {
    margin-bottom: 0;
}

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

.kb-modal-btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    outline: none;
}

.kb-modal-btn-primary {
    background: linear-gradient(135deg, #02baff 0%, #0284c7 100%);
    color: white;
}

.kb-modal-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: none;
}

.kb-modal-btn-secondary {
    background: rgba(51, 65, 85, 0.8);
    color: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.kb-modal-btn-secondary:hover {
    background: rgba(71, 85, 105, 0.8);
    border-color: rgba(148, 163, 184, 0.5);
}

.kb-modal-btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.kb-modal-btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4);
}

@keyframes kb-fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes kb-modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .kb-modal {
        padding: 24px;
        max-width: 95%;
    }
    
    .kb-modal h3 {
        font-size: 1.3rem;
    }
    
    .kb-modal-actions {
        flex-direction: column-reverse;
    }
    
    .kb-modal-btn {
        width: 100%;
    }
}

/* Finish setup page */
.kb-finish-setup {
    position: relative;
    max-width: 980px;
    margin: 64px auto;
    padding: 36px 16px 28px;
    border-radius: 0;
    background: none;
    border: none;
    box-shadow: none;
    overflow: visible;
    text-align: center;
}

.kb-finish-setup::before {
    content: "";
    position: absolute;
    inset: -160px 25% 55% -160px;
    background: radial-gradient(circle, rgba(2, 186, 255, 0.12), transparent 70%);
    pointer-events: none;
}

.kb-finish-setup::after {
    content: "";
    position: absolute;
    inset: 65% -140px -140px 55%;
    background: radial-gradient(circle, rgba(2, 186, 255, 0.1), transparent 70%);
    pointer-events: none;
}

.kb-finish-setup-hero {
    position: relative;
    z-index: 1;
    margin-bottom: 28px;
}

.kb-finish-setup-hero h2 {
    margin: 0 0 10px 0;
    font-size: 2.2rem;
    color: #f8fafc;
    letter-spacing: -0.02em;
}

.kb-finish-setup-hero p {
    margin: 0;
    color: #cbd5f5;
    font-size: 1.05rem;
}

.kb-finish-setup-form {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 0 auto;
    text-align: left;
}

.kb-finish-setup .pms-register {
    margin: 0;
}

.kb-finish-setup .pms-subscription-plan {
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(2, 186, 255, 0.25);
    border-radius: 14px;
    padding: 16px;
}

.kb-finish-setup .pms-form label {
    color: #cbd5f5;
}

.kb-finish-setup .pms-form input[type="text"],
.kb-finish-setup .pms-form input[type="email"],
.kb-finish-setup .pms-form input[type="password"],
.kb-finish-setup .pms-form input[type="tel"],
.kb-finish-setup .pms-form input[type="number"],
.kb-finish-setup .pms-form select {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.35);
    color: #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
}

.kb-finish-setup .pms-form input:focus,
.kb-finish-setup .pms-form select:focus {
    outline: none;
    border-color: rgba(2, 186, 255, 0.7);
    box-shadow: 0 0 0 3px rgba(2, 186, 255, 0.2);
}

.kb-finish-setup .pms-submit {
    margin-top: 12px;
}

.kb-finish-setup .pms-submit input,
.kb-finish-setup .pms-submit button {
    background: linear-gradient(135deg, #02baff 0%, #0284c7 100%);
    color: #0f172a;
    border: none;
    border-radius: 12px;
    padding: 12px 20px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
}

.kb-finish-setup .pms-submit input:hover,
.kb-finish-setup .pms-submit button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(2, 186, 255, 0.25);
}

.kb-finish-setup-skip {
    position: relative;
    z-index: 1;
    margin-top: 18px;
    font-size: 0.95rem;
}

.kb-finish-setup-skip a {
    color: #94a3b8;
    text-decoration: none;
    border-bottom: 1px solid rgba(148, 163, 184, 0.3);
    padding-bottom: 2px;
}

.kb-finish-setup-skip a:hover {
    color: #e2e8f0;
    border-color: rgba(226, 232, 240, 0.6);
}

@media (max-width: 900px) {
    .kb-finish-setup {
        margin: 36px 16px;
        padding: 32px 24px 28px;
    }

    .kb-finish-setup-hero h2 {
        font-size: 1.9rem;
    }

    .kb-finish-setup-form {
        max-width: 100%;
    }
}

/* Status Page */
.kb-status-page {
    max-width: 1100px;
    margin: 60px auto 80px;
    padding: 0 20px;
    color: #e2e8f0;
}

.kb-status-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 28px 30px;
    border-radius: 22px;
    background: rgba(15, 23, 42, 0.6);
    border: 2px solid rgba(2, 186, 255, 0.4);
    box-shadow: 0 8px 24px rgba(2, 186, 255, 0.2);
}

.kb-status-hero h1 {
    margin: 0 0 6px;
    font-size: 2rem;
    color: #f8fafc;
}

.kb-status-hero p {
    margin: 0;
    color: #94a3b8;
}

.kb-status-hero {
    position: relative;
    overflow: hidden;
}

.kb-status-hero.kb-status-hero-degraded {
    border-color: rgba(245, 158, 11, 0.45);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.2);
}

.kb-status-hero.kb-status-hero-outage {
    border-color: rgba(239, 68, 68, 0.45);
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.25);
}

.kb-status-hero.kb-status-hero-maintenance {
    border-color: rgba(245, 158, 11, 0.45);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.25);
}

.kb-status-pill.kb-status-maintenance {
    background: rgba(245, 158, 11, 0.2);
    color: #fde68a;
    border-color: rgba(245, 158, 11, 0.35);
}

.kb-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.kb-status-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.25);
}

.kb-status-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.kb-status-card h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #e2e8f0;
}

.kb-status-card p {
    margin: 0;
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1.5;
}

.kb-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    border: 1px solid transparent;
}

.kb-status-operational {
    background: rgba(34, 197, 94, 0.18);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.35);
}

.kb-status-degraded {
    background: rgba(245, 158, 11, 0.2);
    color: #facc15;
    border-color: rgba(245, 158, 11, 0.35);
}

.kb-status-outage {
    background: rgba(239, 68, 68, 0.2);
    color: #fecaca;
    border-color: rgba(239, 68, 68, 0.35);
}

.kb-status-unknown {
    background: rgba(148, 163, 184, 0.2);
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.35);
}

.kb-status-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.6);
    color: #cbd5e1;
}

.kb-status-updated {
    font-size: 0.85rem;
    color: #94a3b8;
}

.kb-status-incidents-meta {
    margin-left: 8px;
    color: #94a3b8;
    font-size: 0.85rem;
}

.kb-status-history {
    margin-top: 26px;
    padding: 18px 20px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.65);
}

.kb-status-history h3 {
    margin: 0 0 12px 0;
    color: #e2e8f0;
    font-size: 1.1rem;
}

.kb-status-history p {
    margin: 0;
    color: #94a3b8;
}

.kb-status-history ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.kb-status-history li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px 14px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.15);
    color: #cbd5e1;
}

.kb-status-history li strong {
    color: #e2e8f0;
}

.kb-status-history li span {
    color: #94a3b8;
}

.kb-status-history li em {
    font-style: normal;
    font-size: 0.85rem;
    color: #94a3b8;
}

@media (max-width: 720px) {
    .kb-status-history li {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }
}

/* Support Page */
.kb-support-page {
    max-width: 1100px;
    margin: 60px auto 80px;
    padding: 0 20px;
    color: #e2e8f0;
}

.kb-support-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 28px 30px;
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(2, 186, 255, 0.3);
    box-shadow: 0 10px 26px rgba(2, 186, 255, 0.18);
}

.kb-support-hero h1 {
    margin: 0 0 6px;
    font-size: 2.1rem;
    color: #f8fafc;
}

.kb-support-hero p {
    margin: 0;
    color: #94a3b8;
}

.kb-support-hero-badges {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.85rem;
    color: #cbd5e1;
}

.kb-support-hero-badges span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.kb-support-hero-badges i {
    color: #02baff;
}

.kb-support-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.kb-support-card {
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.25);
}

.kb-support-card h3 {
    margin: 0 0 8px;
    color: #f8fafc;
}

.kb-support-card p {
    margin: 0 0 12px;
    color: #94a3b8;
    font-size: 0.95rem;
}

.kb-support-link {
    color: #02baff;
    text-decoration: none;
    font-weight: 600;
}

.kb-support-link:hover {
    color: #38bdf8;
}

.kb-support-form {
    margin-top: 28px;
    padding: 28px 30px;
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(2, 186, 255, 0.3);
    box-shadow: 0 10px 28px rgba(2, 186, 255, 0.18);
}

.kb-support-form h2 {
    margin: 0 0 6px;
    color: #f8fafc;
}

.kb-support-form p {
    margin: 0 0 18px;
    color: #94a3b8;
}

.kb-support-form-grid {
    display: grid;
    gap: 20px;
}

.kb-support-form-aside {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.kb-support-aside-card {
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
}

.kb-support-aside-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.kb-support-aside-title {
    display: flex;
    align-items: center;
}

.kb-support-aside-card h4 {
    margin: 0;
    color: #f8fafc;
}

.kb-support-aside-email {
    display: block;
    color: #02baff;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 8px;
}

.kb-support-aside-card p {
    margin: 6px 0 0;
    color: #94a3b8;
    font-size: 0.9rem;
}

.kb-support-aside-card a {
    color: #02baff;
    font-weight: 600;
    text-decoration: none;
}

.kb-support-aside-card a:hover {
    color: #38bdf8;
}

.kb-support-aside-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(2, 186, 255, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #02baff;
    margin-bottom: 12px;
}

.kb-support-aside-highlight {
    background: linear-gradient(135deg, rgba(2, 186, 255, 0.18), rgba(13, 157, 216, 0.18));
    border-color: rgba(2, 186, 255, 0.35);
}

.kb-support-aside-card ul {
    margin: 8px 0 0;
    padding-left: 18px;
    color: #94a3b8;
    font-size: 0.9rem;
}

.kb-support-form-panel {
    padding: 18px 20px;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.kb-support-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.kb-support-field label {
    display: block;
    font-size: 0.85rem;
    color: #cbd5e1;
    margin-bottom: 6px;
}

.kb-support-field input,
.kb-support-field select,
.kb-support-field textarea {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(15, 23, 42, 0.8);
    color: #e2e8f0;
    padding: 12px 14px;
    font-size: 0.95rem;
}

.kb-support-field input:focus,
.kb-support-field select:focus,
.kb-support-field textarea:focus {
    outline: none;
    border-color: rgba(2, 186, 255, 0.7);
    box-shadow: 0 0 0 3px rgba(2, 186, 255, 0.2);
}

.kb-support-submit {
    border: none;
    background: linear-gradient(135deg, #02baff 0%, #0284c7 100%);
    color: #0f172a;
    font-weight: 700;
    padding: 12px 20px;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.kb-support-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(2, 186, 255, 0.25);
}

.kb-support-privacy {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    margin: 12px 0 16px;
    border-radius: 12px;
    background: rgba(2, 186, 255, 0.08);
    border: 1px solid rgba(2, 186, 255, 0.25);
    color: #cbd5e1;
    font-size: 0.88rem;
}

.kb-support-privacy i {
    color: #02baff;
    margin-top: 2px;
}

.kb-support-privacy a {
    color: #02baff;
    font-weight: 600;
    text-decoration: none;
}

.kb-support-privacy a:hover {
    color: #38bdf8;
}

.kb-support-success,
.kb-support-error {
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 0.95rem;
}

.kb-support-success {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #bbf7d0;
}

.kb-support-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fecaca;
}

.kb-support-faq {
    margin-top: 30px;
    padding: 30px 28px;
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(2, 186, 255, 0.3);
    box-shadow: 0 10px 28px rgba(2, 186, 255, 0.18);
}

.kb-support-faq-header {
    text-align: center;
    margin-bottom: 22px;
}

.kb-support-faq-header h2 {
    margin: 0 0 8px 0;
    color: #f8fafc;
}

.kb-support-faq-header p {
    margin: 0;
    color: #94a3b8;
}

.kb-support-faq-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}

.kb-support-faq-tab {
    border-radius: 12px;
    border: 1px solid rgba(2, 186, 255, 0.2);
    background: rgba(15, 23, 42, 0.6);
    color: #cbd5e1;
    padding: 10px 16px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.kb-support-faq-tab:hover {
    border-color: rgba(2, 186, 255, 0.45);
    color: #e2e8f0;
}

.kb-support-faq-tab.is-active {
    border: 2px solid rgba(2, 186, 255, 0.55);
    color: #e2e8f0;
    background: rgba(15, 23, 42, 0.85);
    box-shadow: 0 8px 18px rgba(2, 186, 255, 0.18);
}

.kb-support-faq-list {
    margin-top: 22px;
    display: grid;
    gap: 12px;
}

.kb-support-faq-item {
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.22);
    overflow: hidden;
}

.kb-support-faq-question {
    width: 100%;
    border: none;
    background: transparent;
    color: #f8fafc;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 1rem;
    cursor: pointer;
}

.kb-support-faq-question i {
    color: #94a3b8;
    transition: transform 0.2s ease;
}

.kb-support-faq-item.is-open .kb-support-faq-question i {
    transform: rotate(180deg);
}

.kb-support-faq-answer {
    display: none;
    padding: 0 20px 18px;
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1.6;
}

.kb-support-faq-item.is-open .kb-support-faq-answer {
    display: block;
}

.kb-support-faq-empty {
    text-align: center;
    color: #94a3b8;
    padding: 20px;
}

@media (max-width: 720px) {
    .kb-support-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .kb-support-faq-tabs {
        justify-content: flex-start;
    }

    .kb-support-form-grid {
        grid-template-columns: 1fr;
    }
}
.kb-status-maintenance {
    margin: 18px 0;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.12);
    color: #fde68a;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.25);
}

.kb-status-maintenance span {
    margin-left: 6px;
    color: #fef3c7;
}

.kb-status-maintenance-time {
    margin-top: 6px;
    font-size: 0.85rem;
    color: #fef3c7;
}

@media (max-width: 720px) {
    .kb-status-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .kb-status-foot {
        flex-direction: column;
        align-items: flex-start;
    }
}



.back-to-top,
#back-to-top,
.scroll-to-top,
#scroll-to-top,
.to-top,
#to-top,
.generate-back-to-top,
.generate-back-to-top__show {
    z-index: 999 !important;
    position: fixed;
}

@media (max-width: 900px) {
    .back-to-top,
    #back-to-top,
    .scroll-to-top,
    #scroll-to-top,
    .to-top,
    #to-top,
    .generate-back-to-top,
    .generate-back-to-top__show {
        z-index: 999 !important;
    }
}
/* Label management */
.kb-label-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.kb-label-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: color-mix(in srgb, var(--kb-label-color, #94a3b8), white 60%);
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background-color: color-mix(in srgb, var(--kb-label-color, #94a3b8), transparent 85%);
    border-color: color-mix(in srgb, var(--kb-label-color, #94a3b8), transparent 60%);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kb-label-badge.kb-label-more {
    background: rgba(148, 163, 184, 0.18);
    color: #e2e8f0;
    border: 1px dashed rgba(148, 163, 184, 0.4);
    cursor: pointer;
}

.kb-label-manager {
    margin-bottom: 0;
}

.kb-label-create {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 12px 0 16px;
}

.kb-label-create-heading {
    font-weight: 600;
    color: #e2e8f0;
    margin-top: 8px;
}

.kb-label-divider {
    height: 1px;
    background: rgba(148, 163, 184, 0.2);
    margin: 10px 0 14px;
}

.kb-label-create .kb-input {
    flex: 1 1 180px;
}

.kb-label-color-picker {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kb-label-color-control {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.kb-label-color-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(15, 23, 42, 0.6);
    color: #cbd5e1;
    cursor: pointer;
    min-height: 44px;
    width: 72px;
    justify-content: space-between;
}

.kb-label-color-control.is-open .kb-label-color-button {
    border-color: rgba(2, 186, 255, 0.65);
    box-shadow: 0 0 0 2px rgba(2, 186, 255, 0.2);
}

.kb-label-color-preview {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    display: inline-block;
}

.kb-label-color-panel {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    min-width: 200px;
    max-width: 240px;
    padding: 12px;
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    display: none;
    z-index: 850;
}

.kb-label-row-color-control .kb-label-color-panel,
.kb-label-modal-color-control .kb-label-color-panel {
    left: auto;
    right: 0;
}

.kb-label-color-panel.is-open {
    display: block;
}

.kb-label-color-custom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    font-size: 12px;
    color: #94a3b8;
}

.kb-label-color-custom input[type="color"] {
    width: 44px;
    height: 36px;
    padding: 4px;
    border-radius: 10px;
}

.kb-label-list {
    display: grid;
    gap: 10px;
    max-height: 360px;
    overflow: auto;
    padding-right: 6px;
}

.kb-label-row {
    display: grid;
    grid-template-columns: 1fr minmax(200px, 240px) 90px 90px;
    gap: 10px;
    align-items: center;
}

.kb-label-row .kb-input {
    width: 100%;
}

.kb-label-search-wrap {
    flex: 1 1 240px;
    position: relative;
}

.kb-label-search-wrap i,
.kb-label-search-wrap svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

.kb-label-search-wrap svg {
    fill: currentColor;
}

.kb-label-search-wrap .kb-input {
    padding-left: 36px;
    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='%2394a3b8'%3E%3Cpath d='M21 20.3l-4.4-4.4a7.5 7.5 0 1 0-1.4 1.4L19.6 22zM4 10.5a6.5 6.5 0 1 1 13 0 6.5 6.5 0 0 1-13 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 16px 16px;
}

.kb-label-color-swatches {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.kb-label-color-swatches .kb-color-swatch {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.kb-label-color-swatches .kb-color-swatch.is-selected {
    box-shadow: 0 0 0 2px rgba(2, 186, 255, 0.6);
}

.kb-label-modal-color-control,
.kb-label-create-color-control,
.kb-label-row-color-control {
    min-width: 160px;
}

.kb-label-row-color-control .kb-label-color-button,
.kb-label-modal-color-control .kb-label-color-button,
.kb-label-create-color-control .kb-label-color-button {
    width: 72px;
}

.kb-label-checkboxes {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

.kb-label-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.kb-label-empty {
    color: #94a3b8;
    font-size: 13px;
    margin: 8px 0;
}

.kb-table-labels .kb-label-badges {
    margin-top: 0;
}

.kb-btn-labels {
    background: rgba(2, 186, 255, 0.15);
    border: 1px solid rgba(2, 186, 255, 0.4);
    color: #e2e8f0;
}

.kb-label-modal {
    max-width: 560px;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.kb-label-modal .kb-modal-body {
    flex: 1;
    overflow: visible;
    display: flex;
    flex-direction: column;
}

.kb-label-modal-create {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px auto;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    align-items: center;
    position: relative;
    z-index: 2;
}

.kb-label-modal-create .kb-input {
    min-width: 0;
    width: 100%;
    max-width: 520px;
}

.kb-label-modal-create .kb-label-color-control {
    justify-self: start;
    align-self: center;
    min-width: 96px;
}

.kb-label-modal-create .kb-btn-primary {
    justify-self: start;
    white-space: nowrap;
}

.kb-label-manager-toolbar,
.kb-label-modal-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.kb-label-modal-toolbar .kb-label-search-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.kb-label-modal-search,
#kb-label-search {
    flex: 1 1 220px;
}

.kb-label-modal-count,
.kb-label-count {
    color: #94a3b8;
    font-size: 12px;
    white-space: nowrap;
}

.kb-label-helper {
    color: #94a3b8;
    font-size: 14px;
    margin: -2px 0 12px;
}

.kb-label-modal-status {
    color: #94a3b8;
    font-size: 12px;
    min-height: 16px;
    margin-bottom: 8px;
}

.kb-label-modal-list {
    display: grid;
    gap: 8px;
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding-right: 6px;
    position: relative;
    z-index: 1;
}

.kb-label-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kb-label-pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    color: color-mix(in srgb, var(--kb-label-color, #94a3b8), white 60%);
    background-color: rgba(255, 255, 255, 0.08);
    background-color: color-mix(in srgb, var(--kb-label-color, #94a3b8), transparent 85%);
    border-color: color-mix(in srgb, var(--kb-label-color, #94a3b8), transparent 60%);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kb-label-pill:focus-visible {
    outline: 2px solid rgba(2, 186, 255, 0.8);
    outline-offset: 2px;
}

.kb-label-editor-modal .kb-modal-body {
    display: grid;
    gap: 16px;
}

.kb-label-editor-field span {
    display: block;
    margin-bottom: 8px;
    color: #cbd5e1;
    font-weight: 600;
}

.kb-label-editor-actions {
    justify-content: flex-end;
    gap: 10px;
}

.kb-modal-btn-danger {
    background: rgba(239, 68, 68, 0.15);
    color: #fecaca;
    border: 1px solid rgba(239, 68, 68, 0.45);
}

.kb-modal-btn-danger:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.7);
}

@media (max-width: 768px) {
    .kb-label-row {
        grid-template-columns: 1fr;
    }

    .kb-label-color-control {
        width: 100%;
    }

    .kb-label-color-button {
        width: 100%;
        justify-content: space-between;
    }

    .kb-label-create {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        align-items: center;
    }

    .kb-label-create .kb-input {
        width: 100%;
        grid-column: 1 / -1;
    }

    .kb-label-create .kb-label-color-control {
        width: 72px;
    }

    .kb-label-create .kb-btn-primary {
        width: auto;
        justify-self: start;
    }

    .kb-label-manager-toolbar,
    .kb-label-modal-toolbar {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 6px;
    }

    .kb-label-manager-toolbar .kb-label-search-wrap,
    .kb-label-modal-toolbar .kb-label-search-wrap {
        width: 100%;
        flex: 0 0 auto;
    }

    .kb-label-search-wrap {
        width: 100%;
        position: relative;
        flex: 0 0 auto;
    }

    .kb-label-search-wrap .kb-input {
        width: 100%;
    }

    .kb-label-modal-search {
        width: 100%;
    }

    .kb-label-count {
        align-self: flex-start;
        order: 2;
        margin-top: 4px;
    }

    .kb-label-helper {
        margin: 4px 0 8px;
    }

    .kb-label-modal-create {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .kb-label-modal-create .kb-input {
        grid-column: 1 / -1;
        max-width: 100%;
    }

    .kb-label-modal-create .kb-label-color-control {
        justify-self: start;
        width: auto;
    }

    .kb-label-modal-create .kb-btn-primary {
        grid-column: 2;
        justify-self: start;
        width: auto;
    }

    .kb-label-modal-create .kb-label-color-button {
        width: 72px;
    }

    .kb-label-modal {
        max-width: 94vw;
        max-height: 88vh;
    }

    .kb-label-modal-list {
        grid-template-columns: 1fr;
        max-height: none;
    }

    .kb-webhook-card {
        padding: 20px;
        width: 100%;
        box-sizing: border-box;
    }

    .kb-webhook-url-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        min-width: 0;
    }

    .kb-webhook-url-grid > div {
        min-width: 0;
    }

    .kb-webhook-note {
        font-size: 0.8rem;
        margin-top: 6px;
    }

    .kb-webhook-release-types-row {
        margin-top: 16px !important;
    }

    .kb-webhook-release-types-row .kb-email-apply-group {
        text-align: center;
    }

    .kb-webhook-release-types-row .kb-email-apply-group > div {
        justify-content: center;
    }
}
.kb-sub-labels {
    margin: -6px 0 8px;
}

.kb-sub-labels .kb-label-badges {
    margin-top: 0;
}

/* Fix WP 2FA modal conflicts */
/* Hide fixed elements when WP 2FA modal is visible */
.wp2fa-modal.is-open ~ * .scroll-to-top,
.wp2fa-modal.is-open ~ * #scroll-to-top,
.wp2fa-modal.is-open ~ * .to-top,
.wp2fa-modal.is-open ~ * #to-top,
.wp2fa-modal.is-open ~ * .generate-back-to-top,
.wp2fa-modal.is-open ~ * .kb-actions-dropdown,
.wp2fa-modal.is-open ~ * .kb-tooltip,
.wp2fa-modal.is-open ~ * .kb-modal-overlay {
    display: none !important;
}

/* Also hide when body has modal open class */
body.wp2fa-modal-open .scroll-to-top,
body.wp2fa-modal-open #scroll-to-top,
body.wp2fa-modal-open .to-top,
body.wp2fa-modal-open #to-top,
body.wp2fa-modal-open .generate-back-to-top,
body.wp2fa-modal-open .kb-modal-overlay {
    display: none !important;
}

/* Hide KubeBuddy modal overlay when any micromodal is present */
.micromodal-slide.is-open ~ .kb-modal-overlay,
body:has(.micromodal-slide.is-open) .kb-modal-overlay {
    display: none !important;
}

/* Aggressively hide anything that might show through - reduce z-index of all elements except the modal */
body:has(.micromodal-slide.is-open) > *:not(.micromodal-slide):not(.wp2fa-modal),
body:has(.wp2fa-modal.is-open) > *:not(.micromodal-slide):not(.wp2fa-modal) {
    z-index: 0 !important;
}

/* Fix WP 2FA modal button heights - reset KubeBuddy button styles */
.wp2fa-modal .modal__container button,
.micromodal-slide .modal__container button {
    padding: 10px 20px !important;
    line-height: normal !important;
    height: auto !important;
    min-height: auto !important;
}
/* How It Works Section */
.kb-how-it-works-section {
    padding: 80px 20px;
    margin-bottom: 80px;
}

.kb-how-it-works-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    max-width: 1400px;
    margin: 60px auto 0;
    flex-wrap: wrap;
}

.kb-step-card {
    flex: 1 1 220px;
    max-width: 280px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
}

.kb-step-card:hover {
    transform: translateY(-4px);
    border-color: rgba(2, 186, 255, 0.3);
    box-shadow: 0 8px 24px rgba(2, 186, 255, 0.1);
}

.kb-step-number {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #02baff 0%, #0284c7 100%);
    border: 3px solid #0d1b2a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.2rem;
    color: #ffffff;
    z-index: 1;
}

.kb-step-icon {
    width: 80px;
    height: 80px;
    margin: 16px auto 20px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.kb-step-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 12px;
}

.kb-step-card p {
    font-size: 0.95rem;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0;
}

.kb-step-arrow {
    font-size: 2rem;
    color: #02baff;
    opacity: 0.4;
    flex-shrink: 0;
}

/* Comparison Section Updates */
.kb-comparison-callout {
    display: flex;
    gap: 20px;
    background: rgba(2, 186, 255, 0.05);
    border: 2px solid rgba(2, 186, 255, 0.2);
    border-radius: 16px;
    padding: 28px;
    margin: 40px auto 60px;
    max-width: 1000px;
}

.kb-comparison-callout-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: #ffffff;
}

.kb-comparison-callout-content h3 {
    margin: 0 0 12px;
    font-size: 1.35rem;
    color: #02baff;
    font-weight: 700;
}

.kb-comparison-callout-content p {
    margin: 0 0 12px;
    font-size: 1rem;
    line-height: 1.7;
    color: #e2e8f0;
}

.kb-comparison-callout-content p:last-child {
    margin-bottom: 0;
}

.kb-comparison-footer {
    text-align: center;
    margin-top: 40px;
    padding: 24px;
    background: rgba(2, 186, 255, 0.05);
    border-radius: 12px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.kb-comparison-footer p {
    margin: 0;
    font-size: 1.1rem;
    color: #ffffff;
    line-height: 1.6;
}

.kb-comparison-table .kb-note {
    display: block;
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 400;
    margin-top: 4px;
}

/* Mobile Responsive - How It Works */
@media screen and (max-width: 1200px) {
    .kb-how-it-works-grid {
        flex-direction: column;
        max-width: 500px;
    }

    .kb-step-arrow {
        transform: rotate(90deg);
        font-size: 1.5rem;
    }

    .kb-step-card {
        max-width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .kb-how-it-works-section {
        padding: 40px 15px;
    }

    .kb-comparison-callout {
        flex-direction: column;
        padding: 20px;
        margin: 30px 15px 40px;
    }

    .kb-comparison-callout-icon {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }

    .kb-comparison-callout-content h3 {
        font-size: 1.15rem;
    }

    .kb-comparison-callout-content p {
        font-size: 0.9rem;
    }

    .kb-comparison-footer {
        margin-top: 30px;
        padding: 20px;
    }

    .kb-comparison-footer p {
        font-size: 1rem;
    }

    .kb-step-card {
        padding: 28px 20px;
    }

    .kb-step-icon {
        width: 64px;
        height: 64px;
        font-size: 1.75rem;
    }

    .kb-step-card h3 {
        font-size: 1.1rem;
    }

    .kb-step-card p {
        font-size: 0.9rem;
    }
}

/* Cluster Runs */
.kb-cluster-runs-app {
  margin-top: 0.75rem;
  display: grid;
  gap: 1.25rem;
}

.kb-cluster-runs-toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  align-items: end;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(2, 186, 255, 0.12);
  margin-top: 0.25rem;
}

.kb-cluster-runs-toolbar label {
  display: grid;
  gap: 0.4rem;
}

.kb-toolbar-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kb-toolbar-label i {
  color: rgba(2, 186, 255, 0.75);
  font-size: 0.8rem;
}

.kb-cluster-runs-toolbar select {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(2, 186, 255, 0.16);
  background: rgba(24, 42, 69, 0.85);
  color: #ecf6ff;
  padding: 12px 14px;
  font: inherit;
  line-height: 1.2;
  min-height: 44px;
}

.kb-cluster-mode-nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid rgba(2, 186, 255, 0.18);
  margin-bottom: 1.25rem;
}

.kb-cluster-mode-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.15rem;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  border-radius: 8px 8px 0 0;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  background: transparent;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.kb-cluster-mode-link:hover {
  color: #02baff;
  background: rgba(2, 186, 255, 0.06);
}

.kb-cluster-mode-link-active {
  color: #02baff;
  border-bottom-color: #02baff;
  font-weight: 700;
  background: rgba(2, 186, 255, 0.07);
}

.kb-compare-toolbar-note {
  margin: 0.8rem 0 0;
  font-size: 0.88rem;
  color: #c8e6f2;
}

.kb-compare-mobile-notice {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  border: 1px solid rgba(2, 186, 255, 0.26);
  background: linear-gradient(135deg, rgba(2, 186, 255, 0.12), rgba(14, 165, 233, 0.04));
}

.kb-compare-mobile-notice-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 186, 255, 0.2);
  border: 1px solid rgba(2, 186, 255, 0.35);
  color: #7de8ff;
  font-size: 1rem;
}

.kb-compare-mobile-notice-body h4 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  color: #e0f2fe;
}

.kb-compare-mobile-notice-body p {
  margin: 0;
  color: rgba(226, 232, 240, 0.82);
  font-size: 0.86rem;
  line-height: 1.45;
}

.kb-report-mobile-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-bottom: 0.7rem;
  padding: 0.65rem 0.72rem;
  border: 1px solid rgba(2, 186, 255, 0.22);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(2, 186, 255, 0.1), rgba(14, 165, 233, 0.04));
}

.kb-report-mobile-notice i {
  color: #7de8ff;
  margin-top: 0.12rem;
  flex: 0 0 auto;
}

.kb-report-mobile-notice p {
  margin: 0;
  color: rgba(226, 232, 240, 0.84);
  font-size: 0.82rem;
  line-height: 1.4;
}

.kb-report-mobile-summary .kb-report-checklist {
  border-right: 0;
}

.kb-report-mobile-summary .kb-check-scroll {
  max-height: 360px;
}

.kb-compare-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}

.kb-compare-summary-sub {
  margin: 0;
  color: rgba(226, 232, 240, 0.72);
  font-size: 0.9rem;
}

.kb-cluster-runs-compare-mode .kb-cluster-runs-toolbar {
  border: 1px solid rgba(2, 186, 255, 0.26);
  border-radius: 12px;
  padding: 0.75rem;
  background: linear-gradient(135deg, rgba(2, 186, 255, 0.08), rgba(14, 165, 233, 0.04));
}

.kb-compare-builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: stretch;
  background: linear-gradient(145deg, rgba(2, 186, 255, 0.12), rgba(2, 186, 255, 0.03));
}

.kb-compare-builder-col {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.kb-compare-select-label {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.82rem;
  color: #cbd5e1;
}

.kb-compare-select-label select {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(2, 186, 255, 0.16);
  background: rgba(24, 42, 69, 0.85);
  color: #ecf6ff;
  padding: 12px 14px;
  font: inherit;
  line-height: 1.2;
  min-height: 44px;
}

.kb-cluster-runs-toolbar select:focus,
.kb-compare-select-label select:focus {
  outline: none;
  border-color: #02baff;
  box-shadow: 0 0 0 3px rgba(2, 186, 255, 0.12);
}

.kb-compare-builder-center {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem;
}

.kb-compare-arrow {
  font-size: 1.7rem;
  line-height: 1;
  color: #02baff;
}

.kb-compare-run-card {
  border: 1px solid rgba(2, 186, 255, 0.22);
  border-radius: 12px;
  padding: 1rem 1rem 1.2rem;
  background: rgba(2, 6, 23, 0.42);
  flex: 1 1 auto;
  min-height: 0;
}

.kb-compare-run-card-baseline {
  border-color: rgba(245, 158, 11, 0.24);
  background: linear-gradient(160deg, rgba(245, 158, 11, 0.08), rgba(2, 6, 23, 0.42));
}

.kb-compare-run-card-target {
  border-color: rgba(2, 186, 255, 0.24);
  background: linear-gradient(160deg, rgba(2, 186, 255, 0.08), rgba(2, 6, 23, 0.42));
}

.kb-compare-run-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.7rem;
}

.kb-compare-run-role {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.kb-compare-run-time {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.52);
  text-align: right;
}

.kb-compare-run-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.6rem;
}

.kb-compare-run-title-row h3 {
  margin: 0;
  font-size: 1.12rem;
  color: #f8fafc;
  line-height: 1.2;
}

.kb-compare-run-meta {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  margin-bottom: 0.9rem;
  color: rgba(226, 232, 240, 0.8);
  font-size: 0.84rem;
}

.kb-compare-run-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.kb-compare-run-meta .fas {
  color: #02baff;
  width: 14px;
  text-align: center;
}

.kb-compare-run-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.2rem;
}

.kb-compare-run-stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.7rem 0.6rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

.kb-compare-run-stat-num {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  color: #f8fafc;
}

.kb-compare-run-stat-lbl {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255, 255, 255, 0.46);
}

.kb-compare-run-footnote {
  margin-top: 0.75rem;
  font-size: 0.76rem;
  color: rgba(226, 232, 240, 0.58);
}

.kb-compare-detail-context {
  margin: 0.1rem 0 0.9rem;
  font-size: 0.9rem;
  color: #cbd5e1;
}

.kb-compare-check-main {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  min-width: 240px;
}

.kb-compare-check-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.kb-compare-check-title-row code {
  font-size: 0.72rem;
  color: #7de8ff;
  background: rgba(2, 186, 255, 0.12);
  border: 1px solid rgba(2, 186, 255, 0.35);
  border-radius: 999px;
  padding: 0.12rem 0.44rem;
}

.kb-compare-check-title-row strong {
  color: #f8fafc;
  font-size: 0.9rem;
  line-height: 1.25;
}

.kb-compare-check-msg {
  color: rgba(226, 232, 240, 0.78);
  font-size: 0.8rem;
  line-height: 1.35;
}

.kb-compare-check-guidance {
  color: #86efac;
  font-size: 0.77rem;
  line-height: 1.35;
}

.kb-compare-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  border: 1px solid transparent;
  white-space: nowrap;
}

.kb-compare-status-clear {
  color: #bbf7d0;
  border-color: rgba(34, 197, 94, 0.45);
  background: rgba(34, 197, 94, 0.12);
}

.kb-compare-status-failing {
  color: #fecaca;
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.12);
}

.kb-compare-status-worse {
  color: #fed7aa;
  border-color: rgba(249, 115, 22, 0.45);
  background: rgba(249, 115, 22, 0.12);
}

.kb-compare-status-better {
  color: #bbf7d0;
  border-color: rgba(34, 197, 94, 0.45);
  background: rgba(34, 197, 94, 0.12);
}

.kb-compare-status-same {
  color: #dbeafe;
  border-color: rgba(14, 165, 233, 0.45);
  background: rgba(14, 165, 233, 0.12);
}

.kb-compare-status-meta {
  display: block;
  margin-top: 0.28rem;
  font-size: 0.74rem;
  color: rgba(226, 232, 240, 0.62);
  line-height: 1.3;
}

.kb-compare-resource-diff {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 260px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(226, 232, 240, 0.82);
}

.kb-compare-resource-diff strong {
  color: #f8fafc;
  font-size: 0.76rem;
}

.kb-compare-resource-diff code {
  display: inline;
  margin: 0;
  padding: 0.08rem 0.28rem;
  border-radius: 3px;
  background: rgba(2, 186, 255, 0.08);
  border: none;
  color: #93c5fd;
  font-size: 0.72rem;
  white-space: normal;
  word-break: break-all;
}

.kb-compare-section {
  margin-top: 1.1rem;
}

.kb-compare-section:first-of-type {
  margin-top: 0.4rem;
}

.kb-compare-section-sub {
  margin: 0.1rem 0 0.8rem;
  color: rgba(226, 232, 240, 0.68);
  font-size: 0.86rem;
}

.kb-compare-section h5 {
  margin: 0.95rem 0 0.55rem;
  color: #7de8ff;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.kb-compare-no-diff {
  margin: 0.55rem 0 0.9rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 10px;
  background: rgba(34, 197, 94, 0.08);
  color: #bbf7d0;
  font-size: 0.9rem;
}

.kb-cluster-run-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.kb-cluster-run-grid-tight {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.65rem;
}

.kb-cluster-run-card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  overflow: hidden;
}

/* Nested metric cards inside grids get an inset look */
.kb-cluster-run-grid .kb-cluster-run-card {
  border: 1px solid rgba(2, 186, 255, 0.18);
  padding: 0.9rem 1rem;
  box-shadow: none;
}

.kb-cluster-run-card h3 {
  margin: 0 0 8px;
  color: #02baff;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Sub-section headings inside compare sections need breathing room after tables */
.kb-compare-section .kb-cluster-run-table-wrap + h3 {
  margin-top: 2rem;
}

/* First sub-section heading gets less top margin */
.kb-compare-section > h3:first-child {
  margin-top: 0.6rem;
}

.kb-cluster-run-card h4 {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  color: rgba(2, 186, 255, 0.7);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.kb-cluster-run-metric {
  margin: 0;
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
}

.kb-cluster-run-table-wrap {
  width: 100%;
  max-height: 520px;
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.kb-cluster-run-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  border-radius: 12px;
  overflow: visible;
  font-size: 0.9rem;
}

.kb-cluster-run-table thead {
  background: #0e273f;
  border-bottom: 2px solid rgba(2, 186, 255, 0.3);
  position: sticky;
  top: 0;
  z-index: 2;
}

.kb-cluster-run-table th {
  padding: 16px;
  text-align: left;
  color: #02baff;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #0e273f;
}

.kb-cluster-run-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.2s ease;
}

.kb-cluster-run-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.08);
}

.kb-cluster-run-table td {
  padding: 14px 16px;
  color: #e5e5e5;
  text-align: left;
  vertical-align: top;
}

.kb-cluster-run-trend-list {
  margin: 0;
  padding-left: 1.2rem;
}

.kb-cluster-run-freshness-summary {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0.6rem 0 1rem;
  font-size: 0.9rem;
}

.kb-cluster-run-compare-lists {
  margin-top: 0.75rem;
  display: grid;
  gap: 0.3rem;
  font-size: 0.88rem;
}

.kb-cluster-run-mini-chart {
  width: 100%;
  height: 130px;
  display: block;
}

.kb-severity-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.6rem 0 1rem;
}

.kb-sev-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.7rem;
  margin: 0.3rem 0 1rem;
}

.kb-sev-summary-card {
  border: 1px solid var(--kb-border, #30363d);
  border-radius: 10px;
  padding: 0.75rem;
  background: rgba(148, 163, 184, 0.08);
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 0.3rem;
}

.kb-sev-summary-card-active {
  box-shadow: 0 0 0 1px #02baff inset;
}

.kb-sev-summary-title {
  text-transform: capitalize;
  font-weight: 700;
}

.kb-sev-summary-count {
  font-size: 0.95rem;
}

.kb-sev-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.56rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: capitalize;
  border: 1px solid transparent;
  white-space: nowrap;
}

.kb-sev-pill-btn {
  cursor: pointer;
  background: transparent;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.kb-sev-pill-btn:hover {
  transform: translateY(-1px);
}

.kb-sev-pill-active {
  box-shadow: 0 0 0 1px #02baff inset;
}

.kb-sev-all {
  background: rgba(148, 163, 184, 0.16);
  color: #cbd5e1;
  border-color: rgba(148, 163, 184, 0.45);
}

.kb-sev-critical {
  background: rgba(220, 38, 38, 0.16);
  color: #fecaca;
  border-color: rgba(220, 38, 38, 0.45);
}

.kb-sev-high {
  background: rgba(249, 115, 22, 0.16);
  color: #fed7aa;
  border-color: rgba(249, 115, 22, 0.45);
}

.kb-sev-warning {
  background: rgba(245, 158, 11, 0.16);
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.45);
}

.kb-sev-medium {
  background: rgba(14, 165, 233, 0.16);
  color: #bae6fd;
  border-color: rgba(14, 165, 233, 0.45);
}

.kb-sev-low,
.kb-sev-info {
  background: rgba(34, 197, 94, 0.16);
  color: #bbf7d0;
  border-color: rgba(34, 197, 94, 0.45);
}

.kb-sev-unknown {
  background: rgba(148, 163, 184, 0.16);
  color: #cbd5e1;
  border-color: rgba(148, 163, 184, 0.45);
}

/* Dashboard cluster score trend */
.kb-cluster-score-controls {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.kb-cluster-score-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.36rem;
  border: 1px solid rgba(2, 186, 255, 0.65);
  color: #d8f6ff;
  border-radius: 999px;
  padding: 0.42rem 1rem;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  background: linear-gradient(135deg, rgba(2, 186, 255, 0.28), rgba(2, 186, 255, 0.12));
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.kb-cluster-score-cta:hover {
  background: #02baff;
  color: #00131c;
  border-color: #2bc6ff;
  transform: translateY(-1px);
}

.kb-cluster-score-cta-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.kb-cluster-score-window-toggle {
  display: inline-flex;
  gap: 0.15rem;
  padding: 0.14rem;
  border-radius: 999px;
  border: 1px solid var(--kb-border, #334155);
  background: rgba(15, 23, 42, 0.55);
}

.kb-cluster-score-window-btn {
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 0.25rem 0.72rem;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.kb-cluster-score-window-btn:hover {
  border-color: rgba(2, 186, 255, 0.45);
  color: #c8efff;
}

.kb-cluster-score-window-btn-active {
  background: #02baff;
  color: #00151f;
  border-color: #02baff;
}

.kb-cluster-score-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.kb-cluster-score-stat {
  border: 1px solid var(--kb-border, #30363d);
  border-radius: 10px;
  padding: 0.85rem 0.65rem 0.7rem;
  background: rgba(2, 186, 255, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  min-height: 106px;
}

.kb-cluster-score-stat-value {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.1;
}

.kb-cluster-score-stat-value-hero {
  font-size: clamp(2.1rem, 4.2vw, 3rem);
  letter-spacing: 0.015em;
  line-height: 1;
}

.kb-cluster-score-stat-label {
  margin-top: 0.24rem;
  font-size: 0.8rem;
  opacity: 0.8;
  text-align: center;
}

.kb-cluster-score-delta-up {
  color: #22c55e;
}

.kb-cluster-score-delta-down {
  color: #ef4444;
}

.kb-cluster-score-delta-neutral {
  color: #94a3b8;
}

.kb-cluster-score-chart-wrap {
  width: 100%;
  min-height: 220px;
  background: rgba(72, 86, 110, 0.34);
  border: 1px solid rgba(120, 144, 180, 0.22);
  border-radius: 18px;
  padding: 0.85rem 0.95rem 0.7rem;
}

.kb-cluster-score-chart-scroll {
  width: 100%;
  overflow: hidden;
  padding-bottom: 2px; /* prevent clipping dot strokes */
}

.kb-cluster-score-chart {
  width: 100%;
  height: 220px;
  display: block;
}

.kb-cluster-score-legend {
  margin-top: 0.45rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  font-size: 0.78rem;
  opacity: 0.9;
}

.kb-cluster-score-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.kb-cluster-score-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
}

.kb-cluster-score-grid-line {
  stroke: rgba(148, 163, 184, 0.3);
  stroke-width: 1;
}

.kb-cluster-score-axis-label {
  fill: #bfd0e8;
  font-size: 10px;
}

.kb-cluster-score-line {
  fill: none;
  stroke: #02baff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kb-cluster-score-point {
  fill: #02baff;
  stroke: rgba(2, 186, 255, 0.35);
  stroke-width: 4;
}

.kb-na-tip {
  display: inline-block;
  border-bottom: 1px dotted #94a3b8;
  color: #94a3b8;
  cursor: help;
  font-weight: 600;
}

@media (max-width: 720px) {
  .kb-cluster-run-table {
    min-width: 680px;
  }

  .kb-compare-builder {
    grid-template-columns: 1fr;
  }

  .kb-compare-builder-center {
    grid-auto-flow: column;
    justify-content: space-between;
  }

  .kb-compare-arrow {
    transform: rotate(90deg);
  }

  .kb-cluster-score-controls {
    justify-content: flex-start;
  }

  .kb-cluster-score-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kb-cluster-score-stat {
    min-height: 98px;
  }

  .kb-cluster-score-stat-value-hero {
    font-size: clamp(1.4rem, 6vw, 1.9rem);
  }

  .kb-cluster-page-hero {
    padding: 0.85rem 1rem;
    gap: 0.75rem;
  }

  .kb-cluster-fleet-title-row {
    flex-direction: column;
    gap: 0.65rem;
  }

  .kb-cluster-fleet-controls {
    gap: 0.65rem;
  }
}

/* ── Cluster Reports page hero ── */
.kb-cluster-page-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  margin-bottom: 1rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.kb-cluster-page-hero-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(2, 186, 255, 0.22), rgba(2, 186, 255, 0.07));
  border: 1px solid rgba(2, 186, 255, 0.32);
  border-radius: 10px;
  flex-shrink: 0;
  font-size: 1.2rem;
  color: #02baff;
}

.kb-cluster-page-hero-title {
  margin: 0 0 0.22rem;
  font-size: 1.35rem;
  font-weight: 700;
  color: #02baff;
  letter-spacing: -0.01em;
}

.kb-cluster-page-hero-sub {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.88rem;
}

/* ── Dashboard Fleet Overview card ── */
.kb-cluster-fleet-head {
  margin-bottom: 1.1rem;
}

.kb-cluster-fleet-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}

.kb-cluster-fleet-controls {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  padding: 0.55rem 0.85rem;
  background: rgba(2, 186, 255, 0.05);
  border: 1px solid rgba(2, 186, 255, 0.14);
  border-radius: 10px;
}

.kb-fleet-control-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.kb-fleet-control-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Cluster overview page */
.kb-cluster-overview-grid {
  display: grid;
  gap: 1rem;
}

.kb-cluster-overview-summary .kb-cluster-run-card {
  min-height: 118px;
}

.kb-cluster-overview-card-clusters {
  background: linear-gradient(165deg, rgba(96, 165, 250, 0.16), rgba(15, 23, 42, 0.42));
  border-color: rgba(96, 165, 250, 0.34);
}
.kb-cluster-overview-card-clusters .kb-cluster-run-metric {
  color: #bfdbfe;
}
.kb-cluster-overview-card-clusters h4 {
  color: rgba(191, 219, 254, 0.88);
}

.kb-cluster-overview-card-score {
  background: linear-gradient(165deg, rgba(2, 186, 255, 0.18), rgba(15, 23, 42, 0.42));
  border-color: rgba(2, 186, 255, 0.38);
  box-shadow: 0 0 20px rgba(2, 186, 255, 0.1);
}
.kb-cluster-overview-card-score .kb-cluster-run-metric {
  color: #67e8f9;
}
.kb-cluster-overview-card-score h4 {
  color: rgba(103, 232, 249, 0.88);
}

.kb-cluster-overview-card-failed {
  background: linear-gradient(165deg, rgba(220, 38, 38, 0.18), rgba(15, 23, 42, 0.42));
  border-color: rgba(220, 38, 38, 0.35);
  box-shadow: 0 0 20px rgba(220, 38, 38, 0.14);
}
.kb-cluster-overview-card-failed .kb-cluster-run-metric {
  color: #fca5a5;
}
.kb-cluster-overview-card-failed h4 {
  color: rgba(252, 165, 165, 0.88);
}

.kb-cluster-overview-card-trend {
  background: linear-gradient(165deg, rgba(14, 165, 233, 0.16), rgba(15, 23, 42, 0.42));
  border-color: rgba(14, 165, 233, 0.32);
}
.kb-cluster-overview-card-trend .kb-cluster-run-metric {
  color: #7dd3fc;
}
.kb-cluster-overview-card-trend h4 {
  color: rgba(125, 211, 252, 0.88);
}

/* Explicit metric colors to avoid broader theme overrides */
.kb-cluster-overview-summary .kb-cluster-overview-metric-clusters {
  color: #bfdbfe !important;
}

.kb-cluster-overview-summary .kb-cluster-overview-metric-score {
  color: #67e8f9 !important;
}

.kb-cluster-overview-summary .kb-cluster-overview-metric-failed {
  color: #fca5a5 !important;
}

.kb-cluster-overview-summary .kb-cluster-overview-metric-trend {
  color: #7dd3fc !important;
}

.kb-cluster-overview-summary .kb-cluster-overview-metric-trend.kb-cluster-score-delta-up {
  color: #4ade80 !important;
}

.kb-cluster-overview-summary .kb-cluster-overview-metric-trend.kb-cluster-score-delta-down {
  color: #f87171 !important;
}

.kb-cluster-overview-summary .kb-cluster-overview-metric-trend.kb-cluster-score-delta-neutral {
  color: #cbd5e1 !important;
}

.kb-cluster-overview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.kb-cluster-overview-actions .kb-cluster-score-cta i {
  margin-right: 0.28rem;
}

.kb-cluster-overview-table {
  min-width: 720px;
}

.kb-cluster-overview-table-recent {
  min-width: 640px;
}

.kb-cluster-overview-link {
  color: #7de8ff;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}

.kb-cluster-overview-link:hover {
  color: #b6f3ff;
}

.kb-cluster-overview-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.2rem 0.56rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: capitalize;
  border: 1px solid transparent;
  line-height: 1;
  white-space: nowrap;
}

.kb-cluster-overview-badge-critical {
  background: rgba(220, 38, 38, 0.16);
  color: #fecaca;
  border-color: rgba(220, 38, 38, 0.45);
}

.kb-cluster-overview-badge-warning {
  background: rgba(245, 158, 11, 0.16);
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.45);
}

.kb-cluster-overview-badge-healthy {
  background: rgba(34, 197, 94, 0.16);
  color: #bbf7d0;
  border-color: rgba(34, 197, 94, 0.45);
}

.kb-cluster-overview-badge-queued {
  background: rgba(148, 163, 184, 0.16);
  color: #cbd5e1;
  border-color: rgba(148, 163, 184, 0.45);
}

.kb-cluster-overview-bottom {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 1rem;
}

.kb-cluster-overview-risks {
  display: grid;
  gap: 0.55rem;
}

.kb-cluster-overview-risk-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.72rem 0.8rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(220, 38, 38, 0.08);
}

.kb-cluster-overview-risk-item strong {
  color: #f8fafc;
}

.kb-cluster-overview-risk-item span {
  color: #fecaca;
  font-size: 0.86rem;
  font-weight: 700;
}

@media (max-width: 720px) {
  .kb-cluster-overview-bottom {
    grid-template-columns: 1fr;
  }

  .kb-cluster-fleet-controls {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
    padding: 0.65rem 0.7rem;
  }

  .kb-fleet-control-group {
    width: 100%;
    justify-content: space-between;
  }

  .kb-cluster-score-window-toggle {
    width: 100%;
    justify-content: space-between;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .kb-cluster-score-window-btn {
    white-space: nowrap;
    flex: 1 0 auto;
  }

  .kb-cluster-score-stats {
    grid-template-columns: 1fr;
  }

  .kb-cluster-score-stat {
    min-height: 84px;
    padding: 0.68rem 0.62rem 0.62rem;
  }

  .kb-cluster-score-stat-label {
    font-size: 0.74rem;
    line-height: 1.25;
  }

  .kb-cluster-overview-table,
  .kb-cluster-overview-table-recent {
    min-width: 0;
    width: 100%;
  }

  .kb-cluster-overview-table thead {
    display: none;
  }

  .kb-cluster-overview-table tbody,
  .kb-cluster-overview-table tr,
  .kb-cluster-overview-table td {
    display: block;
    width: 100%;
  }

  .kb-cluster-overview-table tr {
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 10px;
    padding: 0.5rem 0.65rem;
    background: rgba(15, 23, 42, 0.34);
    margin-bottom: 0.55rem;
  }

  .kb-cluster-overview-table td {
    border: 0;
    padding: 0.38rem 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.7rem;
    font-size: 0.82rem;
    line-height: 1.3;
    text-align: right;
  }

  .kb-cluster-overview-table td::before {
    content: attr(data-label);
    color: rgba(191, 208, 232, 0.72);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    flex: 0 0 auto;
  }

  .kb-cluster-overview-table td > * {
    text-align: right;
  }

  .kb-cluster-overview-table td[data-label="Cluster"] > * {
    text-align: right;
    font-weight: 700;
  }
}

/* ─── Cluster Reports Full-Redesign Styles ─── */

/* Score ring SVG */
.kb-score-ring-svg {
  width: 80px;
  height: 80px;
  transform: rotate(-90deg);
  flex-shrink: 0;
}
.kb-score-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 7;
}
.kb-score-ring-fill {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s ease, stroke 0.4s ease;
}
.kb-score-ring-text {
  font-size: 22px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: middle;
  transform: rotate(90deg);
  transform-origin: 48px 48px;
  font-family: inherit;
}

/* Report hero strip */
.kb-report-hero {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1.2rem 1.5rem;
  margin-bottom: 1rem;
}
.kb-hero-score-wrap {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-shrink: 0;
}
.kb-hero-score-labels {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.kb-hero-score-value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}
.kb-hero-score-caption {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.kb-hero-delta {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.kb-hero-divider {
  width: 1px;
  height: 60px;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}
.kb-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1;
  min-width: 160px;
}
.kb-hero-meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.85);
}
.kb-hero-meta-item .fas {
  color: #02baff;
  width: 14px;
  text-align: center;
}
.kb-k8s-support-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 0.35rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  line-height: 1.2;
  vertical-align: middle;
}
.kb-k8s-support-ok {
  color: #bbf7d0;
  border-color: rgba(34, 197, 94, 0.55);
  background: rgba(34, 197, 94, 0.15);
}
.kb-k8s-support-warn {
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.55);
  background: rgba(245, 158, 11, 0.15);
}
.kb-k8s-support-critical {
  color: #fecaca;
  border-color: rgba(239, 68, 68, 0.6);
  background: rgba(239, 68, 68, 0.15);
}
.kb-k8s-support-unknown {
  color: #cbd5e1;
  border-color: rgba(148, 163, 184, 0.6);
  background: rgba(148, 163, 184, 0.15);
}
.kb-hero-stats {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-left: auto;
}
.kb-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.55rem 0.9rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-width: 64px;
  min-height: 72px;
}
.kb-hero-stat.kb-sev-critical { border-color: rgba(220, 38, 38, 0.45); background: rgba(220, 38, 38, 0.1); }
.kb-hero-stat.kb-sev-high { border-color: rgba(249, 115, 22, 0.45); background: rgba(249, 115, 22, 0.1); }
.kb-hero-stat.kb-sev-warning { border-color: rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.1); }
.kb-hero-stat.kb-sev-medium { border-color: rgba(14, 165, 233, 0.45); background: rgba(14, 165, 233, 0.1); }
.kb-hero-stat-num {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
  width: 100%;
  text-align: center;
}
.kb-hero-stat-lbl {
  font-size: 0.67rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.2rem;
  width: 100%;
  text-align: center;
}

/* Top improvements strip */
.kb-improvements-card h3 { margin-bottom: 0.8rem; }
.kb-improvements-strip {
  display: flex;
  gap: 0.6rem;
  flex-wrap: nowrap;
}
.kb-improvement-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  padding: 0.7rem 0.95rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  text-align: left;
  transition: transform 0.12s ease, border-color 0.15s ease, background 0.15s ease;
  flex: 1 1 0;
  min-width: 0;
}
.kb-improvement-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(2, 186, 255, 0.4);
  background: rgba(2, 186, 255, 0.07);
}
.kb-improvement-tile.kb-sev-critical {
  border-color: rgba(255, 77, 92, 0.45);
  box-shadow: 0 0 0 1px rgba(255, 77, 92, 0.12), 0 8px 22px rgba(255, 77, 92, 0.16);
}
.kb-improvement-tile.kb-sev-critical:hover {
  border-color: rgba(255, 77, 92, 0.75);
  background: rgba(255, 77, 92, 0.08);
  box-shadow: 0 0 0 1px rgba(255, 77, 92, 0.22), 0 10px 26px rgba(255, 77, 92, 0.24);
}
.kb-improvement-tile.kb-sev-high {
  border-color: rgba(249, 115, 22, 0.45);
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.11), 0 8px 22px rgba(249, 115, 22, 0.14);
}
.kb-improvement-tile.kb-sev-high:hover {
  border-color: rgba(249, 115, 22, 0.75);
  background: rgba(249, 115, 22, 0.08);
}
.kb-improvement-tile.kb-sev-warning {
  border-color: rgba(245, 166, 35, 0.45);
  box-shadow: 0 0 0 1px rgba(245, 166, 35, 0.11), 0 8px 22px rgba(245, 166, 35, 0.14);
}
.kb-improvement-tile.kb-sev-warning:hover {
  border-color: rgba(245, 166, 35, 0.75);
  background: rgba(245, 166, 35, 0.08);
}
.kb-improvement-tile.kb-sev-info,
.kb-improvement-tile.kb-sev-low {
  border-color: rgba(34, 197, 94, 0.45);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.11), 0 8px 22px rgba(34, 197, 94, 0.14);
}
.kb-improvement-tile.kb-sev-info:hover,
.kb-improvement-tile.kb-sev-low:hover {
  border-color: rgba(34, 197, 94, 0.75);
  background: rgba(34, 197, 94, 0.08);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.22), 0 10px 26px rgba(34, 197, 94, 0.2);
}
.kb-improvement-pts {
  font-size: 1.05rem;
  font-weight: 800;
  color: #02baff;
  line-height: 1;
}
.kb-improvement-id code {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
}
.kb-improvement-name {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.3;
}

/* Split panel layout */
.kb-split-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  padding: 0 0 0.5rem 0.25rem;
}
.kb-report-split-wrap h3 { margin-bottom: 0.8rem; }
.kb-report-split {
  display: grid;
  grid-template-columns: minmax(280px, 38%) 1fr;
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
}

/* Left: severity tabs + check list */
.kb-report-checklist {
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(6, 18, 36, 0.38);
}
.kb-sev-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.16);
}
.kb-sev-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.73rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.55);
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
  text-transform: capitalize;
}
.kb-sev-tab:hover { color: #fff; filter: brightness(1.2); }
/* Always-on severity colours (muted when not selected) */
.kb-sev-tab.kb-sev-critical { background: rgba(220, 38, 38, 0.12); color: #fca5a5; border-color: rgba(220, 38, 38, 0.35); }
.kb-sev-tab.kb-sev-high { background: rgba(249, 115, 22, 0.12); color: #fdba74; border-color: rgba(249, 115, 22, 0.35); }
.kb-sev-tab.kb-sev-warning { background: rgba(245, 158, 11, 0.12); color: #fcd34d; border-color: rgba(245, 158, 11, 0.35); }
.kb-sev-tab.kb-sev-medium { background: rgba(14, 165, 233, 0.12); color: #7dd3fc; border-color: rgba(14, 165, 233, 0.35); }
.kb-sev-tab.kb-sev-low,
.kb-sev-tab.kb-sev-info { background: rgba(34, 197, 94, 0.12); color: #86efac; border-color: rgba(34, 197, 94, 0.35); }
.kb-sev-tab.kb-sev-all { background: rgba(2, 186, 255, 0.1); color: #7de8ff; border-color: rgba(2, 186, 255, 0.35); }
.kb-sev-tab.kb-sev-unknown { background: rgba(148, 163, 184, 0.12); color: #cbd5e1; border-color: rgba(148, 163, 184, 0.35); }
/* Active: stronger colour */
.kb-sev-tab.kb-sev-critical.kb-sev-tab-active { background: rgba(220, 38, 38, 0.28); color: #fecaca; border-color: rgba(220, 38, 38, 0.7); box-shadow: 0 0 0 1px rgba(220,38,38,0.5) inset; }
.kb-sev-tab.kb-sev-high.kb-sev-tab-active { background: rgba(249, 115, 22, 0.28); color: #fed7aa; border-color: rgba(249, 115, 22, 0.7); box-shadow: 0 0 0 1px rgba(249,115,22,0.5) inset; }
.kb-sev-tab.kb-sev-warning.kb-sev-tab-active { background: rgba(245, 158, 11, 0.28); color: #fde68a; border-color: rgba(245, 158, 11, 0.7); box-shadow: 0 0 0 1px rgba(245,158,11,0.5) inset; }
.kb-sev-tab.kb-sev-medium.kb-sev-tab-active { background: rgba(14, 165, 233, 0.28); color: #bae6fd; border-color: rgba(14, 165, 233, 0.7); box-shadow: 0 0 0 1px rgba(14,165,233,0.5) inset; }
.kb-sev-tab.kb-sev-low.kb-sev-tab-active,
.kb-sev-tab.kb-sev-info.kb-sev-tab-active { background: rgba(34, 197, 94, 0.28); color: #bbf7d0; border-color: rgba(34, 197, 94, 0.7); box-shadow: 0 0 0 1px rgba(34,197,94,0.5) inset; }
.kb-sev-tab.kb-sev-all.kb-sev-tab-active { background: rgba(2, 186, 255, 0.22); color: #d8f6ff; border-color: rgba(2, 186, 255, 0.65); box-shadow: 0 0 0 1px rgba(2,186,255,0.45) inset; }
.kb-sev-tab.kb-sev-unknown.kb-sev-tab-active { background: rgba(148, 163, 184, 0.22); color: #e2e8f0; border-color: rgba(148, 163, 184, 0.6); }
.kb-sev-tab-count {
  font-size: 0.7rem;
  opacity: 0.8;
}
.kb-check-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 520px;
  overscroll-behavior: contain;
  padding: 0.4rem 0;
  scrollbar-gutter: stable both-edges;
}
.kb-check-list-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.65rem 0.85rem;
  text-align: left;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
  cursor: pointer;
  transition: background 0.1s ease, border-left-color 0.15s ease;
}
.kb-check-list-item:hover { background: rgba(255, 255, 255, 0.05); }
.kb-check-list-item-active {
  background: rgba(2, 186, 255, 0.08);
  border-left-color: #02baff;
}
.kb-sev-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.kb-sev-dot.kb-sev-critical { background: #ef4444; }
.kb-sev-dot.kb-sev-high { background: #f97316; }
.kb-sev-dot.kb-sev-warning { background: #f59e0b; }
.kb-sev-dot.kb-sev-medium { background: #0ea5e9; }
.kb-sev-dot.kb-sev-low,
.kb-sev-dot.kb-sev-info { background: #22c55e; }
.kb-sev-dot.kb-sev-unknown { background: #94a3b8; }
.kb-check-list-body {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.kb-check-list-name {
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.92);
}
.kb-check-list-meta {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.45);
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}
.kb-check-list-meta code {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  padding: 0 0.3em;
  font-size: 0.72rem;
  color: #02baff;
}
.kb-check-list-gain {
  color: #22c55e;
  font-weight: 700;
}
.kb-check-list-total { color: rgba(255, 255, 255, 0.5); }
.kb-check-list-arrow {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
  transition: color 0.12s ease;
}
.kb-check-list-item:hover .kb-check-list-arrow,
.kb-check-list-item-active .kb-check-list-arrow { color: #02baff; }
.kb-check-list-id {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #7de8ff;
  background: rgba(2, 186, 255, 0.12);
  border: 1px solid rgba(2, 186, 255, 0.35);
  border-radius: 999px;
  padding: 0.14rem 0.48rem;
  flex-shrink: 0;
  line-height: 1.1;
}

/* Right: detail panel */
.kb-report-detail {
  display: flex;
  flex-direction: column;
  padding: 1rem 1.2rem;
  overflow-y: auto;
  max-height: 580px;
  overscroll-behavior: contain;
  background: rgba(0, 0, 0, 0.1);
}
.kb-report-detail-empty {
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.9rem;
  flex-direction: row;
}
.kb-report-detail-empty .fas { color: #02baff; opacity: 0.5; }
.kb-detail-header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.kb-detail-id {
  font-size: 0.76rem;
  background: rgba(2, 186, 255, 0.12);
  color: #02baff;
  border-radius: 4px;
  padding: 0.1em 0.45em;
}
.kb-detail-header .kb-detail-name {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
  color: #fff;
  flex: 1 1 220px;
  display: inline-flex;
  align-items: center;
}
.kb-detail-badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.kb-detail-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
}
.kb-detail-badge-gain {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.35);
  color: #86efac;
}
.kb-detail-badge .fas { font-size: 0.68rem; }

/* Collapsible sections */
.kb-collapsible-section { overflow: hidden; }
.kb-collapsible-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  padding-bottom: 0;
}
.kb-collapsible-trigger h3 { margin-bottom: 0; }
.kb-collapsible-icon {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.45);
  transition: transform 0.25s ease;
  transform: rotate(180deg); /* default: pointing up = open */
}
.kb-collapsible-trigger:hover .kb-collapsible-icon { color: #02baff; }
.kb-collapsible-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.25s ease;
  padding-top: 0;
}
.kb-collapsible-body-open {
  max-height: 900px;
  padding-top: 1rem;
}
.kb-sect-cluster-name {
  font-size: 0.78rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
}

/* Checklist column header (title + icon toggle) */
.kb-checklist-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  padding: 0.7rem 0.9rem 0.62rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  min-height: 44px;
  background: rgba(0, 0, 0, 0.14);
}
.kb-checklist-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.38);
}
.kb-checklist-icon-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  font-size: 0.72rem;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  margin-left: auto;
}
.kb-checklist-icon-toggle:hover {
  background: rgba(2, 186, 255, 0.12);
  border-color: rgba(2, 186, 255, 0.35);
  color: #02baff;
}

/* Collapsed left panel: narrow + compact items */
.kb-report-split[data-collapsed="true"] {
  grid-template-columns: 132px 1fr;
}
.kb-report-split[data-collapsed="true"] .kb-sev-tabs { display: none; }
.kb-report-split[data-collapsed="true"] .kb-show-toggle { display: none; }
.kb-report-split[data-collapsed="true"] .kb-check-list-meta { display: none; }
.kb-report-split[data-collapsed="true"] .kb-check-list-arrow { display: none; }
.kb-report-split[data-collapsed="true"] .kb-check-list-name { display: none; }
.kb-report-split[data-collapsed="true"] .kb-check-list-item {
  padding: 0.65rem 0.85rem;
  gap: 0.7rem;
}
.kb-report-split[data-collapsed="true"] .kb-check-list-item:hover {
  background: rgba(255, 255, 255, 0.05);
}
.kb-report-split[data-collapsed="true"] .kb-check-list-item-active {
  background: rgba(2, 186, 255, 0.09);
}
.kb-report-split[data-collapsed="true"] .kb-check-list-id {
  min-width: 62px;
  font-size: 0.66rem;
  padding: 0.14rem 0.48rem;
  background: rgba(2, 186, 255, 0.12);
  border-color: rgba(2, 186, 255, 0.35);
  color: #7de8ff;
}
.kb-report-split[data-collapsed="true"] .kb-sev-dot {
  width: 10px;
  height: 10px;
}
.kb-report-split[data-collapsed="true"] .kb-check-list-body {
  display: none;
}

/* Hero: excluded namespaces row */
.kb-hero-excluded {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 0.75rem;
  margin-top: 0.5rem;
  width: 100%;
}
.kb-hero-excluded-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Outdated artifacts stats row */
.kb-outdated-card h3 { margin-bottom: 0.9rem; }
.kb-report-processing-panel {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid rgba(2, 186, 255, 0.18);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(2, 186, 255, 0.08), rgba(15, 23, 42, 0.66));
    color: #dbeafe;
}
.kb-report-processing-panel strong {
    display: block;
    margin-bottom: 4px;
    color: #f8fafc;
    font-size: 0.98rem;
}
.kb-report-processing-panel p {
    margin: 0;
    color: rgba(226, 232, 240, 0.84);
}
.kb-report-processing-panel-inline {
    width: 100%;
}
.kb-report-processing-panel-info {
    align-items: center;
}
.kb-report-processing-panel-info .fas {
    color: #fbbf24;
    font-size: 1rem;
    margin-top: 2px;
}
.kb-report-processing-spinner {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.16);
    border-top-color: #02baff;
    flex: 0 0 auto;
    margin-top: 2px;
    animation: kb-report-spin 0.9s linear infinite;
}
@keyframes kb-report-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.kb-artifact-stats {
  display: flex;
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.2rem;
}
.kb-artifact-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.85rem 1rem;
  flex: 1;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}
.kb-artifact-stat:last-child { border-right: none; }
.kb-artifact-stat-warn { background: rgba(220, 38, 38, 0.08); }
.kb-artifact-stat-muted { background: rgba(245, 158, 11, 0.06); }
.kb-artifact-stat-num {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
.kb-artifact-stat-warn .kb-artifact-stat-num { color: #fca5a5; }
.kb-artifact-stat-lbl {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.3rem;
  text-align: center;
}
.kb-artifact-none {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.88rem;
  margin-bottom: 1.2rem;
}
.kb-artifact-disclaimer {
  margin: 0 0 0.9rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.86rem;
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}
.kb-artifact-disclaimer .fas {
  color: #f59e0b;
  margin-top: 0.08rem;
}
.kb-artifact-inventory-title {
  margin-top: 1.15rem;
  margin-bottom: 0.65rem;
  color: #02baff;
  font-size: 1.03rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  border-top: none;
  padding-top: 0;
}
.kb-outdated-card .kb-cluster-run-table-wrap {
  margin-bottom: 0.35rem;
}
.kb-outdated-card .kb-cluster-run-table-wrap:last-child {
  margin-bottom: 0;
}
.kb-outdated-card .kb-cluster-run-table td a {
  color: #7de8ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.kb-outdated-card .kb-cluster-run-table td a:hover {
  color: #b6f3ff;
}
.kb-report-detail .kb-cluster-run-table {
  table-layout: fixed;
  width: 100%;
}
.kb-report-detail .kb-cluster-run-table th,
.kb-report-detail .kb-cluster-run-table td {
  white-space: normal;
  word-break: break-word;
}
.kb-report-detail .kb-cluster-run-table th {
  font-size: 0.72rem;
}
.kb-report-detail .kb-cluster-run-table td {
  font-size: 0.76rem;
}

/* Responsive: stack split panels on narrow screens */
@media (max-width: 700px) {
  .kb-report-split,
  .kb-report-split[data-collapsed="true"] { grid-template-columns: 1fr; }
  .kb-report-checklist { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .kb-report-split[data-collapsed="true"] .kb-check-list-meta { display: flex; }
  .kb-report-split[data-collapsed="true"] .kb-check-list-arrow { display: block; }
  .kb-check-scroll { max-height: 300px; }
  .kb-report-detail { max-height: none; }
  .kb-report-hero {
    gap: 0.9rem;
    flex-direction: column;
    align-items: stretch;
    padding: 0.95rem 0.9rem;
  }
  .kb-hero-divider { display: none; }
  .kb-hero-score-wrap {
    justify-content: flex-start;
    width: 100%;
  }
  .kb-hero-meta {
    width: 100%;
    min-width: 0;
  }
  .kb-hero-stats {
    margin-left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }
  .kb-hero-stat {
    min-width: 0;
    width: 100%;
    min-height: 76px;
    padding: 0.5rem 0.45rem;
  }
  .kb-hero-stat-num {
    font-size: 1.25rem;
  }
  .kb-hero-stat-lbl {
    font-size: 0.62rem;
    line-height: 1.2;
  }
  .kb-improvements-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.3rem;
  }
  .kb-improvement-tile {
    flex: 0 0 170px;
    min-width: 170px;
    scroll-snap-align: start;
    padding: 0.65rem 0.72rem;
    gap: 0.24rem;
  }
  .kb-improvement-name {
    font-size: 0.74rem;
    line-height: 1.25;
  }
  .kb-improvement-pts {
    font-size: 0.96rem;
  }
  .kb-artifact-stats { flex-wrap: wrap; }
  .kb-artifact-stat { flex: 1 1 30%; }
  .kb-checklist-icon-toggle { display: none; }

  .kb-report-detail {
    padding: 0.85rem 0.75rem;
  }
  .kb-report-detail .kb-cluster-run-table {
    table-layout: auto;
    min-width: 720px;
  }
  .kb-report-detail .kb-cluster-run-table th {
    font-size: 0.68rem;
    white-space: nowrap;
  }
  .kb-report-detail .kb-cluster-run-table td {
    font-size: 0.74rem;
    white-space: normal;
    word-break: normal;
  }
}

/* ── AKS Best Practices card ───────────────────────────────── */
.kb-aks-card {
  border-top: 3px solid #0078d4;
}
.kb-aks-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.kb-aks-card-header h3 { margin: 0; }
.kb-aks-cluster-tag {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Hero stat strip */
.kb-aks-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.kb-aks-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 0.9rem;
  min-height: 88px;
  gap: 0.3rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #2b4360;
}
.kb-aks-stat-score { background: #314d6d; }
.kb-aks-stat-pass { background: rgba(34, 197, 94, 0.08); }
.kb-aks-stat-fail { background: rgba(220, 38, 38, 0.08); }
.kb-aks-stat-rating {
  background: rgba(2, 186, 255, 0.11);
  border-color: rgba(2, 186, 255, 0.3);
}
.kb-aks-hero-num {
  font-size: 2.45rem;
  font-weight: 800;
  line-height: 1;
  color: #b8c7d7;
}
.kb-aks-stat-pass .kb-aks-hero-num { color: #86efac; }
.kb-aks-stat-fail .kb-aks-hero-num { color: #fca5a5; }
.kb-aks-stat-rating .kb-aks-hero-num {
  font-size: 2.55rem;
  line-height: 1;
}
.kb-aks-hero-lbl {
  font-size: 0.84rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.58);
}

/* Rating box */
.kb-aks-hero-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 2rem;
  gap: 0.3rem;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  min-width: 76px;
}
.kb-aks-rating-letter {
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1;
}
.kb-aks-rating-a { background: rgba(34, 197, 94, 0.12); }
.kb-aks-rating-a .kb-aks-rating-letter { color: #22c55e; }
.kb-aks-rating-b { background: rgba(2, 186, 255, 0.1); }
.kb-aks-rating-b .kb-aks-rating-letter { color: #02baff; }
.kb-aks-rating-c { background: rgba(245, 158, 11, 0.1); }
.kb-aks-rating-c .kb-aks-rating-letter { color: #f59e0b; }
.kb-aks-rating-d { background: rgba(234, 100, 28, 0.1); }
.kb-aks-rating-d .kb-aks-rating-letter { color: #ea641c; }
.kb-aks-rating-f { background: rgba(220, 38, 38, 0.12); }
.kb-aks-rating-f .kb-aks-rating-letter { color: #ef4444; }
.kb-aks-stat-rating.kb-aks-rating-a .kb-aks-hero-num { color: #22c55e; }
.kb-aks-stat-rating.kb-aks-rating-b .kb-aks-hero-num { color: #02baff; }
.kb-aks-stat-rating.kb-aks-rating-c .kb-aks-hero-num { color: #f59e0b; }
.kb-aks-stat-rating.kb-aks-rating-d .kb-aks-hero-num { color: #ea641c; }
.kb-aks-stat-rating.kb-aks-rating-f .kb-aks-hero-num { color: #ef4444; }

/* ── Failed / All toggle pills ── */
.kb-show-toggle {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(2, 186, 255, 0.18);
  border-radius: 999px;
  padding: 3px 4px;
  gap: 3px;
  flex-shrink: 0;
}
.kb-show-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.32rem 0.72rem;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.1;
  transition: background 0.15s ease, color 0.15s ease;
  letter-spacing: 0.02em;
  min-height: 26px;
}
.kb-show-pill:hover { color: #fff; }
.kb-show-pill-active {
  background: rgba(2, 186, 255, 0.18);
  color: #d8f6ff;
  box-shadow: 0 0 0 1px rgba(2, 186, 255, 0.45) inset, 0 0 10px rgba(2, 186, 255, 0.18);
}

/* ── Passed check list items ── */
.kb-check-list-item-pass .kb-sev-dot { opacity: 0.45; }
.kb-check-list-pass-label { color: #4ade80; font-size: 0.7rem; font-weight: 600; }
.kb-check-list-divider {
  padding: 0.4rem 1rem 0.25rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 0.25rem;
}

/* ── Passed badge in detail header ── */
.kb-detail-badge-pass {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
}

.kb-aks-filter-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}
.kb-aks-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
.kb-aks-filter-pill:hover { color: #fff; filter: brightness(1.2); }
.kb-aks-pill-active {
  filter: none;
}
.kb-aks-filter-pill.kb-aks-pill-all { background: rgba(2, 186, 255, 0.1); border-color: rgba(2, 186, 255, 0.35); color: #7de8ff; }
.kb-aks-filter-pill.kb-aks-pill-network { background: rgba(14, 165, 233, 0.12); border-color: rgba(14, 165, 233, 0.35); color: #7dd3fc; }
.kb-aks-filter-pill.kb-aks-pill-networking { background: rgba(14, 165, 233, 0.12); border-color: rgba(14, 165, 233, 0.35); color: #7dd3fc; }
.kb-aks-filter-pill.kb-aks-pill-security { background: rgba(220, 38, 38, 0.12); border-color: rgba(220, 38, 38, 0.35); color: #fca5a5; }
.kb-aks-filter-pill.kb-aks-pill-reliability { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.35); color: #fcd34d; }
.kb-aks-filter-pill.kb-aks-pill-compute { background: rgba(249, 115, 22, 0.12); border-color: rgba(249, 115, 22, 0.35); color: #fdba74; }
.kb-aks-filter-pill.kb-aks-pill-cost-management { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.35); color: #86efac; }
.kb-aks-filter-pill.kb-aks-pill-governance { background: rgba(14, 165, 233, 0.12); border-color: rgba(14, 165, 233, 0.35); color: #7dd3fc; }
.kb-aks-filter-pill.kb-aks-pill-storage { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.35); color: #86efac; }
.kb-aks-filter-pill.kb-aks-pill-resource-management { background: rgba(249, 115, 22, 0.12); border-color: rgba(249, 115, 22, 0.35); color: #fdba74; }
.kb-aks-filter-pill.kb-aks-pill-best-practices { background: rgba(2, 186, 255, 0.1); border-color: rgba(2, 186, 255, 0.35); color: #7de8ff; }
.kb-aks-filter-pill.kb-aks-pill-disaster-recovery { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.35); color: #fcd34d; }
.kb-aks-filter-pill.kb-aks-pill-identity-access { background: rgba(167, 139, 250, 0.12); border-color: rgba(167, 139, 250, 0.35); color: #c4b5fd; }
.kb-aks-pill-count {
  font-size: 0.66rem;
  opacity: 0.95;
  background: rgba(0,0,0,0.18);
  border-radius: 999px;
  padding: 0.08rem 0.38rem;
  line-height: 1;
}

.kb-aks-filter-pill.kb-aks-pill-all.kb-aks-pill-active { background: rgba(2, 186, 255, 0.22); color: #d8f6ff; border-color: rgba(2, 186, 255, 0.65); box-shadow: 0 0 0 1px rgba(2,186,255,0.45) inset; }
.kb-aks-filter-pill.kb-aks-pill-network.kb-aks-pill-active,
.kb-aks-filter-pill.kb-aks-pill-networking.kb-aks-pill-active,
.kb-aks-filter-pill.kb-aks-pill-governance.kb-aks-pill-active { background: rgba(14, 165, 233, 0.28); color: #bae6fd; border-color: rgba(14, 165, 233, 0.7); box-shadow: 0 0 0 1px rgba(14,165,233,0.5) inset; }
.kb-aks-filter-pill.kb-aks-pill-best-practices.kb-aks-pill-active { background: rgba(2, 186, 255, 0.22); color: #d8f6ff; border-color: rgba(2, 186, 255, 0.65); box-shadow: 0 0 0 1px rgba(2,186,255,0.45) inset; }
.kb-aks-filter-pill.kb-aks-pill-security.kb-aks-pill-active { background: rgba(220, 38, 38, 0.28); color: #fecaca; border-color: rgba(220, 38, 38, 0.7); box-shadow: 0 0 0 1px rgba(220,38,38,0.5) inset; }
.kb-aks-filter-pill.kb-aks-pill-reliability.kb-aks-pill-active,
.kb-aks-filter-pill.kb-aks-pill-disaster-recovery.kb-aks-pill-active { background: rgba(245, 158, 11, 0.28); color: #fde68a; border-color: rgba(245, 158, 11, 0.7); box-shadow: 0 0 0 1px rgba(245,158,11,0.5) inset; }
.kb-aks-filter-pill.kb-aks-pill-compute.kb-aks-pill-active,
.kb-aks-filter-pill.kb-aks-pill-resource-management.kb-aks-pill-active { background: rgba(249, 115, 22, 0.28); color: #fed7aa; border-color: rgba(249, 115, 22, 0.7); box-shadow: 0 0 0 1px rgba(249,115,22,0.5) inset; }
.kb-aks-filter-pill.kb-aks-pill-cost-management.kb-aks-pill-active,
.kb-aks-filter-pill.kb-aks-pill-storage.kb-aks-pill-active { background: rgba(34, 197, 94, 0.28); color: #bbf7d0; border-color: rgba(34, 197, 94, 0.7); box-shadow: 0 0 0 1px rgba(34,197,94,0.5) inset; }
.kb-aks-filter-pill.kb-aks-pill-identity-access.kb-aks-pill-active { background: rgba(167, 139, 250, 0.28); color: #ddd6fe; border-color: rgba(167, 139, 250, 0.7); box-shadow: 0 0 0 1px rgba(167,139,250,0.5) inset; }

/* Section wrappers */
.kb-aks-section { margin-bottom: 1rem; }
.kb-aks-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.5rem;
  padding: 0 0.1rem;
}

/* Scrollable table container — rounds+clips the table */
.kb-aks-table-scroll {
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  overflow-x: auto;
  overscroll-behavior: contain;
}
.kb-aks-table-scroll-all {
  max-height: 360px;
  overflow-y: auto;
  overflow-x: auto;
  overscroll-behavior: contain;
}
/* Make table fit the container cleanly */
.kb-aks-table-scroll .kb-cluster-run-table {
  min-width: 1050px;
  border-radius: 0;
  overflow: visible;
}
.kb-aks-table-scroll .kb-cluster-run-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Passed collapsible */
.kb-aks-passed-details {
  margin-top: 0.5rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.kb-aks-passed-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.9rem;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  user-select: none;
  list-style: none;
  background: rgba(255, 255, 255, 0.03);
}
.kb-aks-passed-summary::-webkit-details-marker { display: none; }
.kb-aks-passed-summary::before {
  content: '▶';
  font-size: 0.6rem;
  opacity: 0.6;
  transition: transform 0.2s;
}
.kb-aks-passed-details[open] > .kb-aks-passed-summary::before { transform: rotate(90deg); }
.kb-aks-passed-details[open] > .kb-aks-passed-summary { border-bottom: 1px solid rgba(255,255,255,0.08); }
.kb-aks-passed-details .kb-aks-table-scroll {
  border-radius: 0;
  border: none;
}

/* Category breakdown pills */
.kb-aks-cat-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}
.kb-aks-cat-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.38);
  margin-right: 0.2rem;
}
.kb-aks-cat-pill {
  font-size: 0.72rem;
  padding: 0.18rem 0.55rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.kb-aks-cat-pill strong { color: #fff; }

/* AKS table row coloring */
.kb-aks-table .kb-aks-row-fail { background: rgba(220, 38, 38, 0.04); }
.kb-aks-table .kb-aks-row-pass { opacity: 0.55; }
.kb-aks-status-pass {
  color: #22c55e;
  font-weight: 700;
  font-size: 0.78rem;
  white-space: nowrap;
}
.kb-aks-status-fail {
  color: #ef4444;
  font-weight: 700;
  font-size: 0.78rem;
  white-space: nowrap;
}
.kb-aks-check-id { font-size: 0.8rem; }
.kb-aks-check-name { max-width: 180px; }
.kb-aks-cat { white-space: nowrap; font-size: 0.8rem; color: rgba(255, 255, 255, 0.65); }
.kb-aks-message,
.kb-aks-rec {
  max-width: 220px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
}
.kb-aks-learn-more {
  font-size: 0.75rem;
  color: #02baff;
  text-decoration: none;
  white-space: nowrap;
}
.kb-aks-learn-more:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .kb-aks-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kb-aks-hero-stat { padding: 0.72rem 0.8rem; min-height: 74px; }
  .kb-aks-hero-rating { border-left: none; border-top: 1px solid rgba(255,255,255,0.08); width: 100%; }
  .kb-aks-check-name, .kb-aks-message, .kb-aks-rec { max-width: 120px; }
}

/* ===== Dark Mode Dropdowns ===== */
/* Force native option list to use dark palette in all browsers */
.kb-radar-container select,
.kb-radar-container select option {
    background: #0f172a;
    color: #e5e5e5;
}
.kb-radar-container select option:checked,
.kb-radar-container select option:hover {
    background: rgba(2, 186, 255, 0.18);
    color: #02baff;
}

/* ===== Branded Scrollbars ===== */
/* WebKit (Chrome, Edge, Safari) */
.kb-radar-container ::-webkit-scrollbar,
.kb-radar-container::-webkit-scrollbar,
.kb-cluster-runs-app ::-webkit-scrollbar,
.kb-cluster-runs-app::-webkit-scrollbar,
.kb-modal-overlay ::-webkit-scrollbar,
.kb-modal-overlay::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.kb-radar-container ::-webkit-scrollbar-track,
.kb-radar-container::-webkit-scrollbar-track,
.kb-cluster-runs-app ::-webkit-scrollbar-track,
.kb-cluster-runs-app::-webkit-scrollbar-track,
.kb-modal-overlay ::-webkit-scrollbar-track,
.kb-modal-overlay::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
}
.kb-radar-container ::-webkit-scrollbar-thumb,
.kb-radar-container::-webkit-scrollbar-thumb,
.kb-cluster-runs-app ::-webkit-scrollbar-thumb,
.kb-cluster-runs-app::-webkit-scrollbar-thumb,
.kb-modal-overlay ::-webkit-scrollbar-thumb,
.kb-modal-overlay::-webkit-scrollbar-thumb {
    background: rgba(2, 186, 255, 0.45);
    border-radius: 999px;
}
.kb-radar-container ::-webkit-scrollbar-thumb:hover,
.kb-radar-container::-webkit-scrollbar-thumb:hover,
.kb-cluster-runs-app ::-webkit-scrollbar-thumb:hover,
.kb-cluster-runs-app::-webkit-scrollbar-thumb:hover,
.kb-modal-overlay ::-webkit-scrollbar-thumb:hover,
.kb-modal-overlay::-webkit-scrollbar-thumb:hover {
    background: #02baff;
}
.kb-radar-container ::-webkit-scrollbar-corner,
.kb-radar-container::-webkit-scrollbar-corner,
.kb-cluster-runs-app ::-webkit-scrollbar-corner,
.kb-cluster-runs-app::-webkit-scrollbar-corner,
.kb-modal-overlay ::-webkit-scrollbar-corner,
.kb-modal-overlay::-webkit-scrollbar-corner {
    background: transparent;
}
/* Firefox */
.kb-cluster-run-table-wrap,
.kb-compare-table-wrap,
.kb-modal-body,
.kb-aks-table-wrap,
.kb-check-scroll,
.kb-report-detail,
.kb-subscriptions-table-scroll,
.kb-release-notes,
.kb-label-list,
.kb-label-modal-list,
.kb-docs-section pre,
.kb-comparison-table-wrapper {
    scrollbar-width: thin;
    scrollbar-color: rgba(2, 186, 255, 0.45) rgba(255, 255, 255, 0.04);
    overscroll-behavior: contain;
}

.kb-cluster-configs-app {
    display: block;
}

.kb-cluster-configs-sidebar,
.kb-cluster-configs-preview textarea,
.kb-cluster-configs-field textarea,
.kb-cluster-configs-checks-wrap,
.kb-cluster-configs-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(2, 186, 255, 0.45) rgba(255, 255, 255, 0.04);
}

.kb-cluster-configs-sidebar::-webkit-scrollbar,
.kb-cluster-configs-preview textarea::-webkit-scrollbar,
.kb-cluster-configs-field textarea::-webkit-scrollbar,
.kb-cluster-configs-checks-wrap::-webkit-scrollbar,
.kb-cluster-configs-list::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.kb-cluster-configs-sidebar::-webkit-scrollbar-track,
.kb-cluster-configs-preview textarea::-webkit-scrollbar-track,
.kb-cluster-configs-field textarea::-webkit-scrollbar-track,
.kb-cluster-configs-checks-wrap::-webkit-scrollbar-track,
.kb-cluster-configs-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
}

.kb-cluster-configs-sidebar::-webkit-scrollbar-thumb,
.kb-cluster-configs-preview textarea::-webkit-scrollbar-thumb,
.kb-cluster-configs-field textarea::-webkit-scrollbar-thumb,
.kb-cluster-configs-checks-wrap::-webkit-scrollbar-thumb,
.kb-cluster-configs-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(2, 186, 255, 0.7), rgba(2, 132, 199, 0.65));
    border-radius: 999px;
    border: 2px solid rgba(10, 20, 40, 0.55);
}

.kb-cluster-configs-sidebar::-webkit-scrollbar-thumb:hover,
.kb-cluster-configs-preview textarea::-webkit-scrollbar-thumb:hover,
.kb-cluster-configs-field textarea::-webkit-scrollbar-thumb:hover,
.kb-cluster-configs-checks-wrap::-webkit-scrollbar-thumb:hover,
.kb-cluster-configs-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(82, 216, 255, 0.9), rgba(2, 186, 255, 0.8));
}

.kb-cluster-configs-intro {
    margin-bottom: 20px;
}

.kb-cluster-configs-bootstrap {
    margin-bottom: 20px;
    border: 1px solid rgba(2, 186, 255, 0.28);
    background: linear-gradient(135deg, rgba(2, 186, 255, 0.08), rgba(15, 23, 42, 0.88));
}

.kb-cluster-configs-bootstrap-copy {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.kb-cluster-configs-bootstrap-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.kb-cluster-configs-bootstrap-item {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(18, 31, 52, 0.62);
    padding: 14px 16px;
}

.kb-cluster-configs-bootstrap-item strong {
    display: block;
    color: #ffffff;
    margin-bottom: 6px;
}

.kb-cluster-configs-bootstrap-item span {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(2, 186, 255, 0.28);
    border-radius: 999px;
    padding: 3px 8px;
    color: #9fe7ff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.kb-cluster-configs-bootstrap-item p {
    margin: 0;
    color: rgba(236, 246, 255, 0.72);
    line-height: 1.45;
    font-size: 0.92rem;
}

.kb-cluster-configs-intro-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.kb-cluster-configs-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.kb-cluster-configs-layout {
    display: grid;
    grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.kb-cluster-configs-main {
    display: grid;
    gap: 20px;
    grid-column: 2;
}

.kb-cluster-configs-sidebar {
    grid-column: 1;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 120px);
    overflow: auto;
}

.kb-cluster-configs-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.kb-cluster-configs-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.kb-cluster-configs-btn {
    border: 1px solid rgba(2, 186, 255, 0.28);
    background: rgba(7, 20, 40, 0.55);
    color: #dbe9ff;
    border-radius: 12px;
    padding: 8px 12px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.88rem;
    line-height: 1.2;
}

.kb-cluster-configs-btn:hover {
    border-color: rgba(2, 186, 255, 0.5);
    color: #ffffff;
}

.kb-cluster-configs-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.kb-cluster-configs-btn-primary {
    background: linear-gradient(135deg, rgba(0, 186, 255, 0.22), rgba(0, 112, 255, 0.15));
    color: #02baff;
}

.kb-cluster-configs-sidebar select,
.kb-cluster-configs-field input,
.kb-cluster-configs-field select,
.kb-cluster-configs-field textarea {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(2, 186, 255, 0.16);
    background: rgba(24, 42, 69, 0.85);
    color: #ecf6ff;
    padding: 12px 14px;
    font: inherit;
}

.kb-cluster-configs-field textarea {
    min-height: 104px;
    resize: vertical;
}

.kb-cluster-configs-field-inline {
    display: inline-flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    min-height: 48px;
}

.kb-cluster-configs-field-inline input[type="checkbox"] {
    width: auto;
}

.kb-cluster-configs-field span {
    display: block;
    margin-bottom: 8px;
    color: rgba(236, 246, 255, 0.82);
    font-size: 0.86rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.kb-cluster-configs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.kb-cluster-configs-radar-credentials-grid {
    margin-top: 10px;
}

.kb-cluster-configs-field-full {
    grid-column: 1 / -1;
}

.kb-cluster-configs-section {
    padding-top: 0;
    margin-top: 18px;
    border-top: 0;
}

.kb-cluster-configs-section:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.kb-cluster-configs-section h4 {
    margin: 0 0 14px;
    color: #02baff;
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.kb-cluster-configs-section-hidden {
    display: none;
}

.kb-cluster-configs-help {
    margin: 8px 0 0;
    color: rgba(236, 246, 255, 0.68);
    font-size: 0.94rem;
    line-height: 1.45;
}

.kb-cluster-configs-help code {
    background: rgba(2, 186, 255, 0.08);
    border: 1px solid rgba(2, 186, 255, 0.16);
    border-radius: 8px;
    padding: 1px 6px;
    color: #9fe7ff;
}

.kb-cluster-configs-static-pill {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(2, 186, 255, 0.18);
    background: rgba(24, 42, 69, 0.55);
    color: #ecf6ff;
    font-weight: 600;
}

.kb-cluster-configs-radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.kb-cluster-configs-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid rgba(2, 186, 255, 0.18);
    background: rgba(24, 42, 69, 0.55);
    color: #ecf6ff;
    white-space: nowrap;
    font-size: 0.92rem;
}

.kb-cluster-configs-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    margin-top: 12px;
    padding-top: 0;
    border-top: 0;
}

.kb-cluster-configs-flags label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(236, 246, 255, 0.9);
}

.kb-cluster-configs-flags input[type="checkbox"] {
    accent-color: #02baff;
}

.kb-cluster-configs-flags-tight {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.kb-cluster-configs-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.kb-cluster-configs-field-head span {
    margin-bottom: 0;
}

.kb-cluster-configs-field-copy-btn {
    padding: 6px 10px;
    font-size: 0.8rem;
    line-height: 1.1;
}

.kb-cluster-configs-subsection {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 0;
}

.kb-cluster-configs-subsection-label {
    margin-bottom: 10px !important;
    color: #9fe7ff !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
}

.kb-cluster-configs-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.kb-cluster-configs-sidebar-section {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.kb-cluster-configs-list-item {
    width: 100%;
    text-align: left;
    border: 1px solid rgba(2, 186, 255, 0.12);
    background: rgba(18, 31, 52, 0.82);
    border-radius: 14px;
    padding: 10px 12px;
    color: #dbe9ff;
    cursor: pointer;
    display: grid;
    gap: 4px;
}

.kb-cluster-configs-list-item strong {
    color: #ffffff;
    font-size: 0.94rem;
    line-height: 1.25;
}

.kb-cluster-configs-list-item span {
    color: rgba(236, 246, 255, 0.72);
    font-size: 0.82rem;
    line-height: 1.25;
}

.kb-cluster-configs-list-item-active {
    border-color: rgba(2, 186, 255, 0.5);
    box-shadow: inset 0 0 0 1px rgba(2, 186, 255, 0.25);
}

.kb-cluster-configs-note,
.kb-cluster-configs-empty {
    color: rgba(236, 246, 255, 0.72);
}

.kb-cluster-configs-status {
    min-height: 1.25rem;
    margin-bottom: 12px;
    color: rgba(236, 246, 255, 0.72);
}

.kb-cluster-configs-status-ok {
    color: #20df6c;
}

.kb-cluster-configs-status-error {
    color: #ff7f8f;
}

.kb-cluster-configs-checks-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.kb-cluster-configs-check-search {
    min-width: 260px;
    margin: 0;
}

.kb-cluster-configs-checks-wrap {
    display: grid;
    gap: 14px;
    max-height: 560px;
    overflow: auto;
    padding-right: 4px;
}

.kb-cluster-configs-check-group {
    border: 1px solid rgba(2, 186, 255, 0.12);
    border-radius: 14px;
    background: rgba(18, 31, 52, 0.62);
    overflow: hidden;
}

.kb-cluster-configs-check-group-title {
    padding: 12px 14px;
    color: #02baff;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.kb-cluster-configs-check-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kb-cluster-configs-check-item {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: #dbe9ff;
}

.kb-cluster-configs-check-item:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.04);
}

.kb-cluster-configs-check-item input[type="checkbox"] {
    width: auto;
    accent-color: #02baff;
}

.kb-cluster-configs-check-id {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(2, 186, 255, 0.24);
    color: #02baff;
    font-size: 0.8rem;
    font-weight: 700;
}

.kb-cluster-configs-check-name {
    color: rgba(236, 246, 255, 0.88);
    line-height: 1.35;
}

.kb-configs-error {
    border-color: rgba(255, 96, 120, 0.35);
}

@media (max-width: 620px) {
    .kb-cluster-configs-layout {
        grid-template-columns: 1fr;
    }

    .kb-cluster-configs-main,
    .kb-cluster-configs-sidebar {
        grid-column: auto;
    }

    .kb-cluster-configs-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .kb-cluster-configs-bootstrap-copy {
        flex-direction: column;
    }
}

@media (max-width: 720px) {
    .kb-cluster-configs-grid {
        grid-template-columns: 1fr;
    }

    .kb-cluster-configs-check-list {
        grid-template-columns: 1fr;
    }

    .kb-cluster-configs-check-item:nth-child(odd) {
        border-right: 0;
    }
}