/* ==========================================================================
           TOPIC COMPETITION STATUS & STANDARD SCORE Premium Styles
           ========================================================================== */
    .word-status-TD {
        padding: 4px 12px;
        border-radius: 20px;
        font-weight: 800;
        color: #fff;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        display: inline-block;
        margin: 0 4px;
        letter-spacing: 0.5px;
    }
    .easy-td { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
    .normal-td { 
        background: transparent; 
        color: #f2994a; 
        border: 2px dotted #f2994a; 
        box-shadow: none; 
    }
    .hard-td { background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%); }
    .veryhard-td { background: linear-gradient(135deg, #870000 0%, #190a05 100%); }

    .staue-SC-TD {
        margin-top: -45px;
        text-align: center;
        position: relative;
        z-index: 2;
    }
    .staue-SC-TD .pop-text {
        background: linear-gradient(135deg, #45b1ff 0%, #ff9800 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 800;
        font-size: 18px;
    }
    
    .tc-status-text {
        margin-top: -30px !important;
        position: relative;
        z-index: 2;
        text-align: center;
    }

    /* ==========================================================================
       FETCH LOADER PREMIUM STYLES
       ========================================================================== */
    .passing { border: none; outline: none; background: none; color: #a5a4a4; }
    .container_passing {
        outline: none; border: none; color: white; padding: 7.5px 8px 8px; position: relative; background: transparent; overflow: hidden; border-radius: 6px; display: flex; justify-content: center; align-items: center; width: 570px; height: 177px; backdrop-filter: blur(8.1px); -webkit-backdrop-filter: blur(8.1px);
    }
    .container_passing:before, .container_passing:after { content: ""; position: absolute; }
    .container_passing:before {
        z-index: -2; width: 600px; height: 600px; background-color: var(--border-color); background-repeat: no-repeat; background-size: 50% 50%, 50% 50%; background-position: 0 0, 100% 0, 100% 100%, 0 100%;
        background-image: linear-gradient(transparent, transparent), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent), linear-gradient(var(--primary-color), var(--primary-color));
        animation: rotate 1.5s linear infinite;
    }
    .container_passing:after {
        --container_passing_after_size: 3px; z-index: -1; top: var(--container_passing_after_size); right: var(--container_passing_after_size); bottom: var(--container_passing_after_size); left: var(--container_passing_after_size); background: var(--bg-body); border-radius: 4px;
    }
    @keyframes rotate { 100% { transform: rotate(1turn); filter: blur(5); } }
    .wrap { text-align: center; vertical-align: middle; margin-bottom: 100px; background: var(--card-bg); padding-bottom: 100px; box-shadow: 0px 40px 60px -20px rgba(0, 0, 0, 0.2); }
    .spinsender {
        width: 100px; height: 100px; background: var(--card-bg); border-radius: 50%; position: relative; display: inline-block; float: right; margin-right: -50px; margin-top: 25px; right: 0; border: 5px solid var(--border-color);
    }
    .spinsender:after, .spinsender:before { content: ""; display: block; width: 100px; height: 100px; border-radius: 50%; box-sizing: content-box; }
    .spinsender-1:after { position: absolute; top: -9px; left: -9px; border: 4px solid transparent; border-top-color: var(--primary-color); border-bottom-color: var(--primary-color); animation: spinny 1s linear infinite; }
    @keyframes spinny { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(45deg) scale(1.2); } 100% { transform: rotate(360deg) scale(1); } }
    .spinsender-2 { animation: spin 2s linear infinite; }
    .spinsender-2:before, .spinsender-2:after { height: 20px; width: 20px; background: var(--border-color); position: absolute; top: -10px; left: 50%; margin-left: -10px; }
    .spinsender-2:after { top: auto; bottom: -10px; }
    @keyframes bouncy { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(30px); } }
    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    .spinsender-3:before, .spinsender-3:after { position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; background: #5ad1cd; animation: pulse 3s linear infinite; opacity: 0; }
    .spinsender-3:after { animation: pulse 2s linear 2.3s infinite; }
    .barsender { min-width: 300px; min-height: 5px; border-radius: 5px; position: relative; overflow: hidden;    margin-top: 5px; }
    .barsender::after { content: ""; min-height: 5px; position: absolute; background: var(--border-color); transform: translateX(-100%); animation: animate 3s infinite;    left: 0; }
    .barsender::before { content: ""; min-height: 5px; position: absolute; background: var(--primary-color); transform: translateX(-100%); animation: animate 3s ease-out infinite; animation-delay: 1s; z-index: 5; }
    @keyframes animate { 0% { transform: translateX(-100%); min-width: 10px; } 100% { transform: translateX(300%); min-width: 400px; } }
    .guin-recever { background-image: url(https://media.guinrank.com/Pic/Logo/Dark/GuinRank.webp); width: 50px; height: 50px; background-size: 80% 80%; width: 100px; height: 100px; border-radius: 50%; position: relative; display: inline-block; float: left; margin-left: -50px; margin-top: 25px; background-color: var(--card-bg); background-repeat: no-repeat; background-position: center; border: 5px solid var(--border-color); }
    .site-sender { background-size: 90% 90%; width: 90px; height: 90px; border-radius: 50%; background-color: var(--card-bg); background-repeat: no-repeat; background-position: center; position: absolute; top: 0px; left: 0px; padding: 5px; }
    .box-fetch-loader { width: 485px; }
    .animi-box-fetch { display: flex; flex-wrap: wrap; justify-content: center; }
    .guin-side-fetch { width: 50%; position: absolute; right: initial; z-index: 1; }
    .site-box-fetch { width: 50%; position: absolute; right: 0; z-index: 1; }
    .counter-box-fetch { margin-top: -40px; }
    .info-counter-fetch { display: flex; }
    .num-counter-fetch { font-size: 60px; font-family: "jersey-m54"; color: var(--text-main); cursor: default; }
    .pres-counter-fetch { font-size: 22px; color: var(--text-main); cursor: default; }
    .fotter-box-fetch { width: calc(100% - 50px); margin: auto; background: var(--card-bg); border-radius: 20px; position: absolute; bottom: 8px; left: 25px; height: 40px; }
    .barsender-box-fetch { display: flex; width: calc(100% - 10px); text-align: left; }
    .statu-barsender-fetch { width: 100px; line-height: 35px; }
    .info-box-fetch { display: flex; width: calc(100% - 80px); }
    .icon-barsender-fetch { font-size: 25px; width: 50px; height: 48px; color: #47cf73; line-height: 40px; text-align: center; }
    .info-barsender-fetch { height: 35px; line-height: 40px; padding-right: 10px; width: calc(100% - 45px); overflow: hidden; color: var(--text-main); word-break: break-all; }
    .word-barsender-fetch { background: var(--bg-body); padding-left: 10px; padding-right: 10px; margin-left: 5px; border-radius: 25px; margin-top: 5px; color: var(--text-muted); height: 30px; line-height: 30px; }
    .barsender-move-fetch { width: 95%; margin: auto; margin-top: -5px; margin-bottom: 2px; }
    .main-fetch-loader { position: relative; text-align: center; margin-top: calc(50vh - 300px); }
    .container-fetch-loader { position: relative; height: 177px; width: 570px; margin: auto; }
    .bg-back { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; opacity: 0.1; background-size: cover; border-radius: 20px; }
        .dropdown-search-box { position: relative; margin-bottom: 12px; }
    .dropdown-search-box i, .dropdown-search-box svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-muted); }
    .dropdown-search-box input { width: 100%; background: var(--bg-body); border: 1px solid var(--border-color); padding: 10px 10px 10px 36px; border-radius: 10px; font-size: 13px; color: var(--text-main); outline: none; }

    .fade-out-loader { opacity: 0 !important; transition: opacity 0.5s ease; pointer-events: none; }
    /* ==========================================================================
           UNIFIED SEARCH BAR PREMIUM STYLES & MODAL
           ========================================================================== */

    .analyzer-container {
        padding: 40px 0;
        animation: fadeIn 0.4s ease-out;
        max-width: 900px;
        margin: 0 auto;
        transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    #app-askradar.has-data .analyzer-container {
        padding-top: 10px;
    }

    #app-askradar.has-data .analyzer-header {
        height: 0;
        opacity: 0;
        overflow: hidden;
        margin-bottom: 20px;
        transition: all 0.3s ease;
    }

    /* Header */
    .analyzer-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
        margin-bottom: 40px;
    }

    .dash-section-title-box {
        display: flex;
        align-items: center;
        gap: 12px;
        justify-content: center;
    }

    .header-icon-box {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 16px var(--primary-shadow);
    }

    .analyzer-header h2 {
        font-size: 28px;
        font-weight: 800;
        color: var(--text-main);
        margin: 0;
    }

    .header-subtitle {
        color: var(--text-muted);
        font-size: 15px;
        margin: 8px 0 0 0;
    }

    /* Unified Search Container */
    .unified-search-container {
        position: relative;
        z-index: 50;
        width: 100%;
        transition: all 0.3s ease;
    }

        .unified-search-container.is-focused {
            z-index: 100;
        }

    .unified-search-bar {
        display: flex;
        align-items: center;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 40px;
        padding: 6px 6px 6px 7px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        position: relative;
        z-index: 2;
    }

    .unified-search-container.is-focused .unified-search-bar {
        border-color: var(--primary-color);
        box-shadow: 0 15px 40px var(--primary-shadow);
        transform: translateY(-2px);
    }

    .search-divider {
        width: 1px;
        height: 24px;
        background: var(--border-color);
        margin: 0 8px;
        flex-shrink: 0;
    }

    .search-segment {
        display: flex;
        align-items: center;
        height: 100%;
    }

    /* Segments */
    .dropdown-segment {
        position: relative;
        cursor: pointer;
        padding: 8px;
        border-radius: 20px;
        transition: background 0.2s;
        min-width: 70px;
        justify-content: center;
    }

        .dropdown-segment:hover {
            background: var(--bg-body);
        }

    .segment-content {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .segment-text {
        font-size: 14px;
        font-weight: 700;
        color: var(--text-main);
    }

    .flag-icon-wrapper.sm {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        overflow: hidden;
        border: 1px solid var(--border-color);
        display: flex;
    }

        .flag-icon-wrapper.sm img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .chevron-icon {
        width: 14px;
        height: 14px;
        color: var(--text-muted);
    }

    .input-segment {
        flex: 1;
        position: relative;
    }

    .input-search-icon {
        width: 20px;
        height: 20px;
        color: var(--primary-color);
        margin-right: 12px;
    }

    .main-keyword-input {
        width: 100%;
        background: transparent;
        border: none;
        font-size: 16px;
        font-weight: 500;
        color: var(--text-main);
        outline: none;
        padding: 10px 0;
    }

        .main-keyword-input::placeholder {
            color: var(--text-muted);
            opacity: 0.7;
        }

    /* Device / Btn */
    .mini-device-segment {
        padding: 0 8px;
    }

    .mini-device-tabs {
        display: flex;
        border-radius: 20px;
        padding: 4px;
        gap: 2px;
        border: 1px solid var(--border-color);
    }

    .mini-device-tab {
        background: transparent;
        border: none;
        border-radius: 16px;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-muted);
        cursor: pointer;
        transition: all 0.2s;
    }

        .mini-device-tab:hover {
            color: var(--text-main);
        }

        .mini-device-tab.active {
            background: var(--card-bg);
            color: var(--primary-color);
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }

        .mini-device-tab i {
            width: 16px;
            height: 16px;
        }

    .round-search-btn {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
        color: white;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s;
        box-shadow: 0 4px 12px var(--primary-shadow);
        flex-shrink: 0;
        margin-left: 4px;
    }

        .round-search-btn i {
            width: 20px;
            height: 20px;
            transition: transform 0.3s;
        }

        .round-search-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 20px var(--primary-shadow);
        }

            .round-search-btn:hover i {
                transform: translateX(2px);
            }

    /* Overlay */
    .results-overlay-panel {
        position: absolute;
        top: calc(100% + 12px);
        left: 0;
        right: 0;
        background: var(--card-bg);
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
        border: 1px solid var(--border-color);
        border-radius: 24px;
        box-shadow: 0 20px 50px rgba(0,0,0,0.1);
        padding: 20px;
        z-index: 1;
        max-height: 500px;
        display: flex;
        flex-direction: column;
    }

    .results-header-inline {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        padding-bottom: 16px;
    }

    .close-overlay-btn {
        background: var(--bg-body);
        border: none;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-muted);
        cursor: pointer;
        transition: all 0.2s;
    }

        .close-overlay-btn:hover {
            background: var(--icon-danger-bg);
            color: var(--danger);
        }

    .results-content-inline {
        overflow-y: auto;
        flex: 1;
        padding: 0;
    }

    /* Split Pane */
    .split-search-overlay {
        display: flex;
        gap: 0;
        min-height: 250px;
    }

    .pane-suggestions {
        width: 40%;
        border-right: 1px solid var(--border-color);
        padding: 16px;
        display: flex;
        flex-direction: column;
    }

    .pane-history {
        width: 60%;
        padding: 16px;
        display: flex;
        flex-direction: column;
    }

        .pane-history.full-width {
            width: 100%;
            border-left: none;
        }

    .pane-title {
        font-size: 13px;
        font-weight: 800;
        color: var(--text-muted);
        text-transform: uppercase;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
        letter-spacing: 0.5px;
    }

        .pane-title i {
            width: 16px;
            height: 16px;
        }

    .empty-pane {
        padding: 20px 0;
        text-align: center;
        color: var(--text-muted);
        font-size: 14px;
        font-weight: 500;
    }

    /* Lists */
    .clean-sugg-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .clean-sugg-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.2s;
        color: var(--text-main);
        font-size: 14px;
        font-weight: 500;
    }

        .clean-sugg-item i {
            width: 16px;
            height: 16px;
            color: var(--text-muted);
        }

        .clean-sugg-item:hover, .clean-sugg-item.keyboard-selected {
            background: var(--bg-body);
        }

        .clean-sugg-item.keyboard-selected {
            color: var(--primary-color);
        }

    .rich-hist-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-right: 4px;
    }

    .rich-hist-item {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 10px 16px;
        border-radius: 14px;
        background: linear-gradient(145deg, var(--bg-body), transparent);
        border: 1px solid var(--border-color);
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        position: relative;
        overflow: hidden;
    }

        .rich-hist-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: transparent;
            transition: all 0.3s ease;
        }

        .rich-hist-item:hover, .rich-hist-item.keyboard-selected {
            background: var(--card-bg);
            border-color: var(--primary-color);
            box-shadow: 0 8px 24px var(--primary-shadow);
            transform: translateY(-2px);
        }

            .rich-hist-item:hover::before, .rich-hist-item.keyboard-selected::before {
                background: var(--primary-color);
            }

    .hist-avatar {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: var(--bg-body);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
        flex-shrink: 0;
        border: 1px solid var(--border-color);
    }

    .res-flag {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-size: cover;
        background-position: center;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

    .hist-content {
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-width: 0;
    }

    .res-keyword {
        flex: 1;
        font-size: 15px;
        font-weight: 800;
        color: var(--text-main);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: color 0.2s;
    }

    .hist-tags {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }

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

        .h-tag i {
            width: 12px;
            height: 12px;
        }

    .score-pill {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 6px 14px;
        border-radius: 12px;
        min-width: 60px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }

        .score-pill .s-val {
            font-size: 14px;
            font-weight: 800;
            line-height: 1.1;
        }

        .score-pill .s-label {
            font-size: 9px;
            text-transform: uppercase;
            font-weight: 800;
            opacity: 0.7;
            margin-top: 2px;
        }

    .word-status-TD.kd-easy { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important; color: #fff !important; border: none !important; }
    .word-status-TD.kd-medium { background: transparent !important; color: #f2994a !important; border: 1px solid #f2994a !important; }
    .word-status-TD.kd-hard { background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%) !important; color: #fff !important; border: none !important; }
    .word-status-TD.kd-unknown { background: var(--bg-body) !important; color: var(--text-muted) !important; border: 1px dashed var(--border-color) !important; box-shadow: none !important; }

    /* Dropdowns */
    .segment-dropdown {
        position: absolute;
        top: calc(100% + 16px);
        left: -10px;
        min-width: 240px;
    }

    .glass-menu {
        background: var(--card-bg);
        backdrop-filter: blur(20px);
        border: 1px solid var(--border-color);
        border-radius: 16px;
        box-shadow: 0 12px 40px rgba(0,0,0,0.1);
        z-index: 100;
        padding: 12px;
    }

    .dropdown-search-box {
        position: relative;
        margin-bottom: 12px;
    }

        .dropdown-search-box i {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            color: var(--text-muted);
        }

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

    .dropdown-list {
        list-style: none;
        max-height: 220px;
        overflow-y: auto;
    }

    .dropdown-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 10px;
        cursor: pointer;
        margin-bottom: 2px;
    }

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

        .dropdown-item.selected {
            background: var(--primary-light);
        }

        .dropdown-item .item-text {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-main);
            flex: 1;
        }

        .dropdown-item.selected .item-text {
            font-weight: 700;
            color: var(--primary-color);
        }

    .check-icon {
        width: 16px;
        height: 16px;
        color: var(--primary-color);
    }

    /* DASHBOARD */
    .dashboard-wrapper {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding-bottom: 60px;
    }

    .dash-block {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .header-block {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 16px 24px;
        border-radius: 14px;
        border: 1px solid var(--border-color);
        background: linear-gradient(to right, var(--card-bg), var(--bg-body));
        position: relative;
        overflow: hidden;
    }

        .header-block::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(to bottom, var(--primary-color), var(--purple));
        }

    .hb-left {
        display: flex;
        align-items: center;
        gap: 20px;
        flex: 1;
        flex-wrap: wrap;
    }

    .hb-keyword {
        font-size: 20px;
        font-weight: 800;
        color: var(--text-main);
        margin: 0;
        text-transform: capitalize;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .hb-keyword i {
            width: 20px;
            height: 20px;
        }

    .hb-tags {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        align-items: center;
    }

    .hb-tag {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-main);
        display: flex;
        align-items: center;
        gap: 6px;
        background: var(--bg-body);
        padding: 4px 10px;
        border-radius: 6px;
        border: 1px solid var(--border-color);
    }

        .hb-tag i {
            width: 14px;
            height: 14px;
        }

    .btn-premium {
        background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
        color: white;
        border: none;
        cursor: pointer;
        transition: all 0.3s;
        padding: 10px 20px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 6px;
        box-shadow: 0 4px 12px rgba(69, 177, 255, 0.2);
    }

        .btn-premium:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(69, 177, 255, 0.3);
        }

    /* Small/Clean Charts Grid */
    .block-charts-3 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .span-2-cols {
        grid-column: span 2;
    }

    @media (max-width: 1024px) {
        .block-charts-3 {
            grid-template-columns: 1fr;
        }

        .span-2-cols {
            grid-column: span 1;
        }
    }

    .d-card {
        background: var(--card-bg);
        border: 1px dashed var(--border-color);
        border-radius: 16px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .d-card-header {
        padding: 12px 16px;
        border-bottom: 1px dashed var(--border-color);
        background: rgba(0,0,0,0.01);
    }

        .d-card-header h3 {
            margin: 0;
            font-size: 14px;
            font-weight: 800;
            color: var(--text-main);
        }

    .d-card-body {
        padding: 16px;
        flex: 1;
        text-align: center;
    }

    .chart-body-sm {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 120px;
        padding: 10px;
    }

    .mini-chart-container-sm {
        width: 100%;
        height: 120px;
    }

    .tc-status-text {
        font-size: 15px;
        font-weight: 800;
        margin-top: -10px;
        z-index: 2;
        text-transform: capitalize;
        text-align: center;
    }

    .snapshot-mini-sub {
        font-size: 12px;
        font-weight: 700;
        color: var(--text-muted);
        margin-top: -5px;
    }

    /* Metric Badges for Cards */
    .card-metric-badge {
        padding: 4px 12px;
        border-radius: 8px;
        border: 1px solid transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: -15px;
        margin-top: 15px;
    }

        .card-metric-badge .cm-val {
            font-size: 45px;
            font-weight: 900;
            font-family: monospace;
            letter-spacing: -0.5px;
        }

    .bg-orange-light {
        background: rgba(255, 152, 0, 0.1);
        border-color: rgba(255, 152, 0, 0.2);
        color: #ff9800;
    }

    .bg-blue-light {
        background: rgba(69, 177, 255, 0.1);
        border-color: rgba(69, 177, 255, 0.2);
        color: #45b1ff;
    }

    /* Compact SERP / Related Table */
    .compact-table th {
        font-size: 10px;
        padding: 8px;
        border-bottom: 0px solid var(--border-color);
    }

    .compact-table td {
        padding: 8px;
        font-size: 12px;
        background: transparent;
        border-top: 1px solid var(--border-color);
        border-bottom: none;
    }

    .compact-table tr:hover td {
        background: var(--bg-body);
    }

    .spark-chart-cell-sm {
        width: 80px;
        height: 26px;
    }

    /* Button Utilities */
    .btn-outline-sm {
        background: transparent;
        border: 1px solid var(--border-color);
        color: var(--text-main);
        padding: 4px 10px;
        border-radius: 6px;
        font-weight: 600;
        font-size: 12px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        cursor: pointer;
        transition: all 0.2s;
    }

        .btn-outline-sm:hover {
            background: var(--bg-body);
            border-color: var(--primary-color);
            color: var(--primary-color);
        }

        .btn-outline-sm.btn-green {
            border-color: var(--success);
            color: var(--success);
        }

            .btn-outline-sm.btn-green:hover {
                background: var(--success);
                color: white;
            }

    /* Words Filter Area (Professional design for Title/Desc words) */
    .section-header-with-filter {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--border-color);
        padding: 15px;
        padding-bottom: 8px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .word-count-filter {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
    }

    .filter-label {
        font-size: 11px;
        font-weight: 700;
        color: var(--text-muted);
        text-transform: uppercase;
        margin-right: 4px;
    }

    .filter-pill {
        background: var(--bg-body);
        border: 1px solid var(--border-color);
        color: var(--text-muted);
        padding: 3px 10px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s;
    }

        .filter-pill:hover {
            background: var(--card-bg);
            border-color: var(--primary-color);
            color: var(--primary-color);
        }

        .filter-pill.active {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

    /* New Professional Words Table */
    .words-table-container {
        overflow-x: auto;
        max-height: 400px;
        overflow-y: auto;
        border: 1px solid var(--border-color);
        border-radius: 12px;
        background: var(--bg-body);
    }

    .professional-words-table {
        border-collapse: collapse;
        width: 100%;
        min-width: 500px;
    }

        .professional-words-table th {
            position: sticky;
            top: 0;
            background: var(--card-bg);
            text-align: left;
            padding: 12px 16px;
            color: var(--text-muted);
            font-size: 11px;
            text-transform: uppercase;
            border-bottom: 1px solid var(--border-color);
            z-index: 10;
            font-weight: 800;
            letter-spacing: 0.5px;
        }

        .professional-words-table td {
            padding: 12px 16px;
            border-bottom: 1px solid var(--border-color);
            vertical-align: middle;
        }

        .professional-words-table tbody tr:hover {
            background: var(--card-bg);
        }

        .professional-words-table tbody tr:last-child td {
            border-bottom: none;
        }

    .freq-bar-wrapper {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
    }

    .freq-bar-bg {
        flex: 1;
        height: 8px;
        background: rgba(0,0,0,0.06);
        border-radius: 6px;
        overflow: hidden;
        display: flex;
    }

    .freq-bar-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--primary-color), var(--blue));
        border-radius: 6px;
        transition: width 0.5s ease-out;
    }

        .freq-bar-fill.progress-green {
            background: linear-gradient(90deg, #47CF73, #2bcbba);
        }

    .freq-val {
        font-size: 12px;
        font-weight: 800;
        color: var(--text-muted);
        width: 40px;
        text-align: right;
        font-family: monospace;
    }

    /* Words lists (reusing) */
    .w-term {
        font-size: 13px;
        font-weight: 600;
        color: var(--text-main);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .w-metrics {
        display: flex;
        gap: 6px;
        align-items: center;
    }

    .w-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 6px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 700;
        color: white;
    }

    .bg-blue {
        background: #45b1ff;
    }

    .bg-orange {
        background: #ff9800;
    }

    .bg-purple {
        background: #9c27b0;
    }

    .bg-yellow {
        background: #fbc02d;
        color: #333;
    }

    .bg-green {
        background: #47CF73;
    }

    .bg-red {
        background: #f44336;
    }

    .c-text-yellow {
        color: #ffc107;
    }

    .c-text-pink {
        color: #e91e63;
    }

    .c-text-purple {
        color: #9c27b0;
    }

    .c-text-green {
        color: #47CF73;
    }

    .c-text-blue {
        color: #45b1ff;
    }

    .c-text-orange {
        color: #ff9800;
    }

    .c-text-muted {
        color: var(--text-muted);
    }

    .c-text-main {
        color: var(--text-main);
    }

    .font-weight-bold {
        font-weight: 800;
    }

    /* ==========================================================================
           SERP DETAILED TABLE - HIGHLY PROFESSIONAL UX/UI
           ========================================================================== */
    .serp-table-container {
        padding: 0;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-top: none;
        border-radius: 0 0 16px 16px;
    }

    .serp-table-container.vol {

        border: 0px ;

    }

    .serp-table-rich {
        border-collapse: separate;
        border-spacing: 0 12px;
        padding: 0 24px 24px 24px;
    }

        .serp-table-rich th {
            font-weight: 800;
            color: var(--text-muted);
            letter-spacing: 0.5px;
        }

        .serp-table-rich td {
            background: var(--bg-body);
            border: 1px solid var(--border-color);
            border-style: solid none;
            padding: 16px 12px;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            vertical-align: middle;
        }

            .serp-table-rich td:first-child {
                border-left-style: solid;
                border-radius: 12px 0 0 12px;
            }

            .serp-table-rich td:last-child {
                border-right-style: solid;
                border-radius: 0 12px 12px 0;
            }

        .serp-table-rich tbody tr {
            box-shadow: 0 4px 12px rgba(0,0,0,0.015);
        }

            .serp-table-rich tbody tr:hover td {
                background: var(--card-bg);
                border-color: var(--primary-light);
                transform: translateY(-3px);
                box-shadow: 0 12px 30px rgba(0,0,0,0.06);
            }

    .st-thumbnail {
        width: 64px;
        height: 64px;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid var(--border-color);
        flex-shrink: 0;
        background: var(--card-bg);
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .st-thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .st-info-content {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .badge-good {
        background: rgba(71, 207, 115, 0.1);
        color: #47CF73;
        font-size: 10px;
        font-weight: 700;
        padding: 2px 6px;
        border-radius: 4px;
        display: inline-flex;
        align-items: center;
        gap: 3px;
    }

    .badge-low {
        background: rgba(255, 152, 0, 0.1);
        color: #ff9800;
        font-size: 10px;
        font-weight: 700;
        padding: 2px 6px;
        border-radius: 4px;
        display: inline-flex;
        align-items: center;
        gap: 3px;
    }

    .badge-overopti {
        background: var(--icon-danger-bg);
        color: var(--danger);
        font-size: 10px;
        font-weight: 700;
        padding: 2px 6px;
        border-radius: 4px;
        display: inline-flex;
        align-items: center;
        gap: 3px;
    }

        .badge-good i, .badge-low i, .badge-overopti i {
            width: 10px;
            height: 10px;
        }

    .s-tag-mini {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 6px;
        background: var(--bg-body);
        border-radius: 4px;
        border: 1px solid var(--border-color);
        font-size: 11px;
        font-weight: 600;
        color: var(--text-muted);
    }

    .btn-circle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--bg-body);
        transition: all 0.2s;
        border: 1px solid transparent;
    }

        .btn-circle:hover {
            background: var(--primary-light);
            border-color: var(--primary-color);
        }

        .btn-circle i {
            width: 14px;
            height: 14px;
        }

    /* Custom Toggle Switch */
    .custom-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        user-select: none;
    }

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

    .toggle-track {
        width: 36px;
        height: 20px;
        background: var(--border-color);
        border-radius: 20px;
        position: relative;
        transition: all 0.3s;
    }

        .toggle-track.active {
            background: var(--success);
        }

    .toggle-knob {
        width: 16px;
        height: 16px;
        background: white;
        border-radius: 50%;
        position: absolute;
        top: 2px;
        left: 2px;
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .toggle-track.active .toggle-knob {
        transform: translateX(16px);
    }

    /* SERP Summary Strip */
    .serp-summary-strip {
        display: flex;
        align-items: center;
        background: var(--bg-body);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 12px 20px;
        gap: 20px;
        flex-wrap: wrap;
    }

    .ss-item {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .ss-label {
        font-size: 11px;
        font-weight: 700;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .ss-val {
        font-size: 18px;
        font-weight: 900;
        color: var(--text-main);
        font-family: monospace;
    }

    .ss-divider {
        width: 1px;
        height: 30px;
        background: var(--border-color);
    }

    /* ==========================================================================
           MODAL & ADVANCED FILTERS
           ========================================================================== */
    .custom-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.6);
        backdrop-filter: blur(5px);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .custom-modal-content {
        background: var(--card-bg);
        width: 95vw;
        height: 95vh;
        max-width: 1400px;
        border-radius: 20px;
        box-shadow: 0 20px 60px rgba(0,0,0,0.2);
        border: 1px solid var(--border-color);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 24px;
    }

    .adv-filters-bar {
        background: var(--bg-body);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 8px 16px;
    }

    .adv-filter-group {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .af-icon {
        width: 16px;
        height: 16px;
        color: var(--text-muted);
    }

    .af-label {
        font-size: 11px;
        font-weight: 800;
        color: var(--text-muted);
        text-transform: uppercase;
        white-space: nowrap;
    }

    .adv-filter-group input, .adv-filter-group select {
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        padding: 6px 10px;
        border-radius: 8px;
        font-size: 13px;
        color: var(--text-main);
        outline: none;
        transition: border-color 0.2s;
    }

        .adv-filter-group input:focus, .adv-filter-group select:focus {
            border-color: var(--primary-color);
        }

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

    .table-hover tbody tr:hover {
        background: rgba(0,0,0,0.02);
    }

    .font-size-13 {
        font-size: 13px;
    }

    .flex-row {
        display: flex;
        flex-direction: row;
        gap: 8px;
    }

    .flex-col {
        display: flex;
        flex-direction: column;
    }

    .items-center {
        align-items: center;
    }

    .items-start {
        align-items: flex-start;
    }

    .justify-between {
        justify-content: space-between;
    }

    .justify-center {
        justify-content: center;
    }

    .gap-1 {
        gap: 4px;
    }

    .gap-2 {
        gap: 8px;
    }

    .gap-3 {
        gap: 12px;
    }

    .m-0 {
        margin: 0;
    }

    .w-100 {
        width: 100%;
    }

    .flex-1 {
        flex: 1;
    }

    .flex-wrap {
        flex-wrap: wrap;
    }

    .text-center {
        text-align: center;
    }

    .mt-1 {
        margin-top: 4px;
    }

    .mt-2 {
        margin-top: 8px;
    }

    .mt-3 {
        margin-top: 16px;
    }

    .mt-4 {
        margin-top: 24px;
    }

    .mb-1 {
        margin-bottom: 4px;
    }

    .mb-3 {
        margin-bottom: 16px;
    }

    .mb-4 {
        margin-bottom: 24px;
    }

    .pt-3 {
        padding-top: 16px;
    }

    .pb-0 {
        padding-bottom: 0;
    }

    .ml-2 {
        margin-left: 8px;
    }
    /* PROFESSIONAL WORDS TABLE CSS */
    .professional-words-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        margin-top: 10px;
    }
    .professional-words-table th {
        background: var(--bg-body);
        color: var(--text-muted);
        font-weight: 600;
        text-transform: uppercase;
        font-size: 11px;
        padding: 12px 16px;
        border-bottom: 2px solid var(--border-color);
        text-align: left;
    }
    .professional-words-table td {
        padding: 12px 16px;
        border-bottom: 1px solid var(--border-color);
        background: var(--card-bg);
        transition: background 0.2s ease;
    }
    .professional-words-table tbody tr:hover td {
        background: var(--bg-body);
    }
    .professional-words-table tbody tr:last-child td {
        border-bottom: none;
    }
    
    .freq-bar-wrapper {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .freq-bar-bg {
        flex: 1;
        height: 6px;
        background: var(--border-color);
        border-radius: 4px;
        overflow: hidden;
    }
    .freq-bar-fill {
        height: 100%;
        background: linear-gradient(90deg, #b886fa, #8b5cf6);
        border-radius: 4px;
    }
    .freq-bar-fill.progress-green {
        background: linear-gradient(90deg, #4facfe, #00f2fe);
    }
    .freq-val {
        font-size: 13px;
        font-weight: 600;
        color: var(--text-main);
        min-width: 24px;
    }
    
    /* WORD COUNT FILTER PILLS */
    .word-count-filter {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }
    .filter-label {
        font-size: 13px;
        color: var(--text-muted);
        font-weight: 600;
    }
    .filter-pill {
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        color: var(--text-main);
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    .filter-pill:hover {
        background: var(--bg-body);
        border-color: var(--primary-color);
    }
    .filter-pill.active {
        background: var(--primary-color);
        color: white;
        border-color: var(--primary-color);
        box-shadow: 0 2px 6px var(--primary-shadow);
    }


    /* TOGGLE SWITCH CSS */
    .custom-toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
    }
    .toggle-label {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-main);
    }
    .toggle-track {
        width: 44px;
        height: 24px;
        background: var(--border-color);
        border-radius: 12px;
        position: relative;
        transition: background 0.3s ease;
    }
    .toggle-track.active {
        background: #10b981; /* Green success */
    }
    .toggle-knob {
        width: 18px;
        height: 18px;
        background: white;
        border-radius: 50%;
        position: absolute;
        top: 3px;
        left: 3px;
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    .toggle-track.active .toggle-knob {
        transform: translateX(20px);
    }

    /* SERP SUMMARY STRIP */
    .serp-summary-strip {
        display: flex;
        align-items: center;
        gap: 20px;
        background: var(--bg-body);
        padding: 12px 24px;
        border-radius: 12px;
        border: 1px solid var(--border-color);
    }
    .ss-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .ss-label {
        font-size: 12px;
        color: var(--text-muted);
        text-transform: uppercase;
        font-weight: 600;
    }
    .ss-val {
        font-size: 18px;
        font-weight: 800;
        color: var(--text-main);
    }
    .ss-divider {
        width: 1px;
        height: 30px;
        background: var(--border-color);
    }
    
    /* CPC Badge specific */
    .cpc-badge {
        background: rgba(16, 185, 129, 0.1);
        color: #10b981;
        padding: 4px 8px;
        border-radius: 6px;
        font-weight: 700;
        font-size: 14px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin: auto;
        margin-top: 17px;
    }
    
    /* Advanced Filters main dashboard */
    .adv-filters-bar {
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 12px 16px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    }
    .adv-filter-group {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .adv-filter-group input, .adv-filter-group select {
        background: var(--bg-body);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        padding: 6px 10px;
        font-size: 13px;
        color: var(--text-main);
        outline: none;
        transition: border-color 0.2s;
    }
    .adv-filter-group input:focus, .adv-filter-group select:focus {
        border-color: var(--primary-color);
    }
    .af-label {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-muted);
    }
    .adv-filter-divider {
        width: 1px;
        height: 24px;
        background: var(--border-color);
    }
    /* LINGUISTIC DATA BLOCK CSS (Modern Redesign) */
    .ling-tabs-container {
        margin-top: 24px;
        padding-bottom: 10px;
        display: flex;
        overflow-x: auto;
    }
    .ling-tabs-wrapper {
        display: inline-flex;
        background: var(--bg-body);
        padding: 6px;
        border-radius: 16px;
        gap: 8px;
        border: 1px solid var(--border-color);
        margin: 7px;
    }
    .ling-tab-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 20px 10px 10px;
        background: transparent;
        border: none;
        border-radius: 12px;
        color: var(--text-muted);
        font-weight: 700;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .ling-tab-btn:hover {
        background: rgba(0,0,0,0.02);
        color: var(--text-main);
    }
    .ling-tab-btn.active {
        background: var(--card-bg);
        color: var(--text-main);
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }
    .ling-icon-box {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease;
    }
    .ling-tab-btn.active .ling-icon-box {
        transform: scale(1.1);
    }
    .ling-icon-box svg {
        width: 18px;
        height: 18px;
    }

    /* PREMIUM DATA ROWS (Outlines) */
    .premium-data-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        margin-bottom: 10px;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .premium-data-row:hover {
        transform: translateX(4px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.03);
        border-color: var(--primary-light);
    }
    .pdr-term {
        font-weight: 700;
        color: var(--text-main);
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .pdr-term svg {
        width: 18px;
        height: 18px;
        color: var(--text-muted);
    }
    
    /* COMPETITOR ACCORDION (Modern) */
    .premium-accordion-item {
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 16px;
        margin-bottom: 12px;
        overflow: hidden;
        transition: box-shadow 0.2s;
    }
    .premium-accordion-item:hover {
        box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    }
    .premium-accordion-head {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px;
        cursor: pointer;
        background: transparent;
        transition: background 0.2s;
    }
    .premium-accordion-head:hover {
        background: var(--bg-body);
    }
    .pa-rank {
        width: 28px;
        height: 28px;
        background: var(--text-main);
        color: var(--bg-body);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 13px;
    }
    .pa-domain {
        font-weight: 700;
        color: var(--text-main);
        font-size: 14px;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .pa-chevron {
        width: 20px;
        height: 20px;
        color: var(--text-muted);
        transition: transform 0.3s;
    }
    .pa-chevron.rotated {
        transform: rotate(180deg);
    }
    .premium-accordion-body {
        padding: 0 16px 16px 16px;
        border-top: 1px dashed var(--border-color);
        margin-top: 4px;
        padding-top: 16px;
    }
    .pa-tag-row {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 8px;
        padding: 8px 12px;
        border-radius: 8px;
        background: var(--bg-body);
    }
    .pa-tag-row svg {
        width: 16px;
        height: 16px;
        margin-top: 2px;
        color: var(--text-muted);
    }
    .pa-tag-row.tag-level-1 { margin-left: 0; border-left: 4px solid var(--purple); }
    .pa-tag-row.tag-level-2 { margin-left: 20px; border-left: 4px solid var(--blue); }
    .pa-tag-row.tag-level-3 { margin-left: 40px; border-left: 4px solid var(--success); }
    .pa-tag-text {
        font-size: 13px;
        color: var(--text-main);
        font-weight: 600;
        line-height: 1.4;
    }

    /* SENTIMENTS MODERN CARDS */
    .premium-sentiment-card {
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 16px;
        padding: 16px;
        margin-bottom: 12px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .premium-sentiment-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0,0,0,0.04);
        border-color: var(--success);
    }
    .psc-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .psc-term {
        font-size: 15px;
        font-weight: 800;
        color: var(--text-main);
    }
    .psc-badge {
        background: rgba(34, 195, 60, 0.15);
        color: var(--success);
        padding: 4px 10px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .psc-progress-wrap {
        height: 8px;
        background: var(--bg-body);
        border-radius: 4px;
        overflow: hidden;
    }
    .psc-progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #34d399, #10b981);
        border-radius: 4px;
        transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
    }
    /* MODERN WORDS GRID (Titles & Descriptions) */
    .words-modern-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 12px;
        padding: 15px;
        padding-top: 15px;
    }
    .word-chip-card {
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 12px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    }
    .word-chip-card:hover {
        border-color: var(--primary-light);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }
    .wcc-left {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1;
        overflow: hidden;
    }
    .wcc-icon {
        color: var(--text-muted);
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }
    .wcc-text {
        font-weight: 700;
        color: var(--text-main);
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .wcc-right {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-shrink: 0;
    }
    .wcc-freq {
        width: 60px;
        height: 6px;
        background: var(--bg-body);
        border-radius: 3px;
        overflow: hidden;
    }
    .wcc-freq-fill {
        height: 100%;
        background: var(--purple);
        border-radius: 3px;
    }
    .wcc-freq-fill.desc { background: var(--success); }
    .wcc-badge {
        font-size: 12px;
        font-weight: 800;
        padding: 4px 8px;
        background: rgba(139, 92, 246, 0.1);
        color: var(--purple);
        border-radius: 6px;
        min-width: 32px;
        text-align: center;
    }
    .wcc-badge.desc {
        background: rgba(16, 185, 129, 0.1);
        color: var(--success);
    }

    .col-header{
        gap: 6px;
        display: flex;
    }

    .has-data {
        padding-top: 0;
    }

    @keyframes fadeOut {
        0% {
            opacity: 1;
            max-height: 500px;
        }

        100% {
            opacity: 0;
            max-height: 0;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
    }

    .fadeout {
        animation: fadeOut 0.3s ease-in-out forwards;
        pointer-events: none;
    }

    /* Ask Radar Premium Styles */
.page-wrap { display: flex; flex-direction: column; gap: 24px; padding: 20px 0; }
.panel-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.03);margin-top:25px }
.card-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: var(--primary-color); margin-bottom: 16px; }
.card-eyebrow svg { width: 20px; height: 20px; }
.card-heading { font-size: 20px; font-weight: 800; color: var(--text-main); margin-top: 0; }

/* Grid Layouts */
.grid-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 24px; }

/* Feed / Live Scraping */
.feed-list { display: flex; flex-direction: column; gap: 12px; }
.feed-chip { display: flex; align-items: center; gap: 8px; background: var(--bg-body); padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 700; color: var(--text-main); border: 1px solid var(--border-color); }
.feed-chip .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* SERP Grid (Split layout) */
.serp-grid { display: flex; gap: 24px; }
.serp-urls { flex: 0 0 250px; display: flex; flex-direction: column; gap: 8px; max-height: 500px; overflow-y: auto; padding-right: 8px; }
.serp-url-btn { display: flex; align-items: center; gap: 8px; background: var(--bg-body); border: 1px solid var(--border-color); padding: 10px 12px; border-radius: 10px; text-align: right; cursor: pointer; transition: all 0.2s; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.serp-url-btn:hover { background: var(--card-bg); border-color: var(--primary-light); color: var(--text-main); }
.serp-url-btn.active { background: var(--primary-color); color: white; border-color: var(--primary-color); }
.serp-url-btn.active span { background: rgba(255,255,255,0.2) !important; color: white !important; }
.serp-content { flex: 1; background: var(--bg-body); border-radius: 16px; padding: 24px; border: 1px solid var(--border-color); }

/* QA Box */
.qa-box { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 16px; margin-bottom: 16px; transition: transform 0.2s; }
.qa-box:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,0.05); }
.qa-q { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; font-weight: 800; color: var(--text-main); margin-bottom: 8px; }
.qa-a { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin: 0; padding-right: 32px; }

/* Custom Checkbox */
.custom-check-wrapper { display: inline-flex; align-items: center; cursor: pointer; }
.custom-check-wrapper input { display: none; }
.custom-check { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--border-color); display: flex; align-items: center; justify-content: center; transition: all 0.2s; background: var(--card-bg); flex-shrink: 0; }
.custom-check svg { width: 12px; height: 12px; color: white; opacity: 0; transform: scale(0.5); transition: all 0.2s; }
.custom-check-wrapper input:checked + .custom-check { background: var(--primary-color); border-color: var(--primary-color); }
.custom-check-wrapper input:checked + .custom-check svg { opacity: 1; transform: scale(1); }

/* Creator Hub */
.creator-hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.creator-col { background: var(--bg-body); border: 1px solid var(--border-color); border-radius: 16px; overflow: hidden; }
.creator-head { padding: 16px; font-size: 16px; font-weight: 800; color: white; display: flex; align-items: center; gap: 8px; }
.creator-head.yt { background: linear-gradient(135deg, #ff0000, #cc0000); }
.creator-head.tk { background: linear-gradient(135deg, #000000, #333333); }
.creator-head.ig { background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.creator-head svg, .creator-head i { width: 20px; height: 20px; }
.creator-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }

/* Hub Item & Sparkline */
.hub-item { display: flex; align-items: flex-start; gap: 12px; background: var(--card-bg); padding: 12px; border-radius: 12px; border: 1px solid var(--border-color); font-size: 13px; font-weight: 700; color: var(--text-main); }
.sparkline { display: flex; align-items: flex-end; gap: 2px; height: 16px; }
.spark-bar { width: 4px; background: var(--primary-color); border-radius: 2px; opacity: 0.8; }

/* Insights & Questions List */
.insight-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.insight-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; color: var(--text-main); }
.q-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.q-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--bg-body); border-radius: 12px; border: 1px solid var(--border-color); transition: all 0.2s; }
.q-item:hover { border-color: var(--primary-light); background: var(--card-bg); box-shadow: 0 4px 12px rgba(0,0,0,0.03); }
.action-btn { background: var(--card-bg); border: 1px solid var(--border-color); color: var(--text-muted); width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; }
.action-btn:hover { color: var(--primary-color); border-color: var(--primary-color); background: var(--primary-light); }

/* Filters */
.filter-group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.filter-label { font-size: 13px; font-weight: 800; color: var(--text-muted); }
.chip { background: var(--bg-body); border: 1px solid var(--border-color); padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 700; color: var(--text-main); cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 6px; }
.chip:hover { background: var(--card-bg); border-color: var(--primary-color); color: var(--primary-color); }
.chip.active { background: var(--primary-color); color: white; border-color: var(--primary-color); box-shadow: 0 4px 12px var(--primary-shadow); }
.chip .count { opacity: 0.7; font-size: 11px; }

/* Letter Cards (Topic Clusters) */
.letter-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.letter-card { background: var(--bg-body); border: 1px solid var(--border-color); border-radius: 16px; padding: 16px; }
.letter-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; color: var(--text-main); }
.letter-badge { width: 36px; height: 36px; border-radius: 10px; background: rgba(69, 177, 255, 0.1);  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.letter-badge svg { width: 18px; height: 18px; }


.ka-img-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    padding: 8px;
}
.ka-img-grid .st-thumbnail {
    width: 100% !important;
    height: 80px !important;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid var(--border-color);
}
.ka-img-grid .st-thumbnail:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Inject Modal Styles */
.inject-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.3s ease;
}
.inject-modal-container {
    background: var(--card-bg, #fff);
    border-radius: 20px;
    width: 90%;
    max-width: 480px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-color, #e2e8f0);
    transform: scale(1);
    transition: transform 0.3s ease;
}
.inject-modal-header {
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-body, #f8fafc);
}
.inject-icon-box {
    background: rgba(147, 51, 234, 0.1);
    color: #9333ea;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(147, 51, 234, 0.1);
}
.inject-modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main, #1e293b);
}
.inject-modal-subtitle {
    margin: 4px 0 0 0;
    font-size: 13px;
    color: var(--text-muted, #64748b);
}
.inject-close-btn {
    background: transparent;
    border: none;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
}
.inject-close-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-main, #1e293b);
}
.inject-modal-body {
    padding: 20px;
}
.inject-modal-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main, #1e293b);
    margin-bottom: 8px;
}
.inject-modal-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    background: var(--bg-body, #f8fafc);
    color: var(--text-main, #1e293b);
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.inject-modal-input:focus {
    border-color: #9333ea;
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.15);
}
.inject-modal-error {
    color: #ef4444;
    font-size: 14px;
    font-weight: 500;
    background: rgba(239, 68, 68, 0.1);
    padding: 10px 14px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    border: 1px solid rgba(239, 68, 68, 0.2);
}
.inject-modal-error .error-icon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
}
.inject-modal-footer {
    background: var(--bg-body, #f8fafc);
    border-top: 1px solid var(--border-color, #e2e8f0);
    padding: 16px 20px;
}
.inject-btn-cancel {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.inject-btn-submit {
    padding: 10px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);
    border: none;
    color: white;
    box-shadow: 0 4px 12px rgba(147, 51, 234, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}
.inject-btn-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(147, 51, 234, 0.4);
}
.inject-btn-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.ka-img-item {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-body);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.ka-img-item:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1;
}
.ka-img-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.st-tab-btn {
    background: var(--card-bg);
    color: var(--text-muted);
    border-radius: 8px;
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    font-weight: 700;
    transition: all 0.2s;
}
.st-tab-btn.active {
    background: var(--primary-color);
    color: #fff;
    border: none;
}
.skeleton-row {
    animation: skeleton-pulse 1.5s infinite ease-in-out;
    opacity: 0.6;
}
.skeleton-row td {
    pointer-events: none;
}
.skeleton-row .st-title-link, .skeleton-row .st-desc {
    background: #f1f5f9;
    color: var(--text-muted);
    border-radius: 4px;
    padding: 2px 4px;
}
@keyframes skeleton-pulse {
    0% { opacity: 0.5; }
    50% { opacity: 0.8; }
    100% { opacity: 0.5; }
}
}

/* Data Grid Styles */
.data-grid {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}
.grid-head, .grid-row {
    display: grid;
    grid-template-columns: 40px 3fr 1fr 1fr 1fr;
    align-items: center;
}
.grid-head {
    background: rgba(0, 0, 0, 0.03);
    font-weight: 700;
    color: var(--text-muted);
    font-size: 13px;
    border-bottom: 1px solid var(--border-color);
}
.grid-row {
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease;
}
.grid-row:last-child {
    border-bottom: none;
}
.grid-row:hover {
    background: rgba(0, 0, 0, 0.02);
}
.cell {
    padding: 12px 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
}

/* ==========================================================================
   CREATION-STYLE HERO ENHANCEMENT
   ========================================================================== */
.console-hero {
    position: relative;
    z-index: 1;
    text-align: center;
    margin: 24px auto 28px;
    transition: all 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 900px;
}

.console-hero.console-compact {
    opacity: 0;
    max-height: 0;
    margin: 0 auto;
    transform: translateY(-24px) scale(0.97);
    overflow: hidden;
    pointer-events: none;
}

.hero-ambient-glow {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 650px;
    height: 240px;
    background: radial-gradient(circle, color-mix(in srgb, var(--primary-color) 22%, transparent) 0%, var(--primary-glow) 45%, transparent 70%);
    filter: blur(55px);
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
    transition: all 0.6s ease;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--primary-color);
    background: var(--primary-light);
    padding: 7px 18px;
    border-radius: 100px;
    margin-bottom: 16px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 28%, transparent);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--primary-color) 12%, transparent);
    backdrop-filter: blur(8px);
    position: relative;
    z-index: 2;
}

.hero-badge-icon {
    width: 14px;
    height: 14px;
    color: var(--primary-color);
}

.badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 10px var(--primary-color);
    animation: pulseDot 2s infinite ease-in-out;
}

@keyframes pulseDot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.6; }
}

.hero-title {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: -0.035em;
    color: var(--text-main);
    margin: 0 0 14px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.hero-title em {
    font-style: normal;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-gradient-end));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-desc {
    font-size: 15px;
    color: var(--text-muted);
    max-width: 680px;
    line-height: 1.6;
    margin: 0 auto 20px;
    position: relative;
    z-index: 2;
}

.hero-features-belt {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
    position: relative;
    z-index: 2;
}

.hfb-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
    background: var(--card-bg);
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.hfb-icon {
    width: 14px;
    height: 14px;
    color: var(--primary-color);
}

/* ==========================================================================
   SERP & PAA COMPETITOR INTELLIGENCE (WORLD-CLASS SAAS DESIGN)
   ========================================================================== */
.serp-intel-card {
    margin-top: 28px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 26px 28px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    position: relative;
}

/* --- Row 1: Top Header Cluster --- */
.serp-intel-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.serp-title-cluster {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    max-width: 680px;
}

.serp-icon-box {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--primary-light);
    border: 1px solid color-mix(in srgb, var(--primary-color) 30%, transparent);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color) 16%, transparent);
}

.serp-icon-box svg {
    width: 22px;
    height: 22px;
}

.serp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 4px;
}

.live-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 8px var(--primary-color);
    animation: pulseDot 2s infinite ease-in-out;
}

.serp-main-title {
    font-size: 21px;
    font-weight: 900;
    color: var(--text-main);
    margin: 0 0 4px;
    line-height: 1.3;
}

.serp-main-title em {
    font-style: normal;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-gradient-end));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.serp-main-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* Stat Badges Ribbon */
.serp-stat-ribbon {
    display: flex;
    align-items: center;
    gap: 12px;
}

.serp-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border-radius: 12px;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    min-width: 84px;
}

.serp-stat-card .stat-number {
    font-size: 18px;
    font-weight: 900;
    color: var(--text-main);
    line-height: 1.1;
}

.serp-stat-card .stat-caption {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 2px;
}

.serp-stat-card.primary {
    background: var(--primary-light);
    border-color: color-mix(in srgb, var(--primary-color) 30%, transparent);
}

.serp-stat-card.primary .stat-number {
    color: var(--primary-color);
}

.serp-stat-card.accent {
    background: color-mix(in srgb, var(--pink, #ec4899) 12%, var(--bg-body));
    border-color: color-mix(in srgb, var(--pink, #ec4899) 35%, transparent);
}

.serp-stat-card.accent .stat-number {
    color: var(--pink, #ec4899);
}

/* --- Row 2: Unified Control Toolbar --- */
.serp-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    margin-bottom: 22px;
}

.serp-toolbar-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.serp-search-field {
    position: relative;
    display: flex;
    align-items: center;
}

.serp-search-field .field-icon {
    position: absolute;
    left: 12px;
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    pointer-events: none;
}

.serp-input-control {
    height: 38px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0 32px 0 34px;
    font-size: 13px;
    color: var(--text-main);
    width: 220px;
    font-family: inherit;
    transition: all 0.2s ease;
}

.serp-input-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 16%, transparent);
}

.field-clear-btn {
    position: absolute;
    right: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 2px;
    display: flex;
    align-items: center;
}

.field-clear-btn svg {
    width: 13px;
    height: 13px;
}

.serp-filter-pills {
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-pill {
    height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0 13px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.filter-pill:hover {
    color: var(--text-main);
    border-color: color-mix(in srgb, var(--primary-color) 40%, var(--border-color));
}

.filter-pill.active {
    background: var(--primary-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: 800;
}

.filter-pill svg {
    width: 13px;
    height: 13px;
}

/* --- Custom Intent Dropdown --- */
.serp-custom-dropdown {
    position: relative;
}

.serp-dropdown-toggle {
    height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.serp-dropdown-toggle:hover {
    color: var(--text-main);
    border-color: color-mix(in srgb, var(--primary-color) 40%, var(--border-color));
}

.serp-dropdown-toggle.active {
    background: var(--primary-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: 800;
}

.serp-dropdown-toggle .sdt-icon {
    width: 12px;
    height: 12px;
    color: var(--primary-color);
}

.serp-dropdown-toggle .sdt-arrow {
    width: 12px;
    height: 12px;
    transition: transform 0.2s ease;
}

.serp-dropdown-toggle .sdt-arrow.rotate-180 {
    transform: rotate(180deg);
}

.serp-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 200px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15);
    padding: 6px;
    z-index: 250;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: fadeIn 0.18s ease;
}

.serp-dd-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    background: transparent;
    border: none;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.serp-dd-item:hover {
    background: var(--primary-light);
    color: var(--primary-color);
}

.serp-dd-item.selected {
    background: var(--primary-light);
    color: var(--primary-color);
    font-weight: 800;
}

.serp-dd-item svg {
    width: 13px;
    height: 13px;
}

.serp-dd-item .check-ico {
    margin-left: auto;
    width: 13px;
    height: 13px;
    color: var(--primary-color);
}

.serp-toolbar-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.serp-segmented-view {
    display: flex;
    height: 38px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 3px;
    gap: 3px;
}

.segment-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    padding: 0 12px;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.segment-btn svg {
    width: 13px;
    height: 13px;
}

.segment-btn.active {
    background: var(--bg-body);
    color: var(--primary-color);
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.serp-tool-btn {
    height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0 13px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.2s ease;
}

.serp-tool-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.serp-tool-btn.active {
    background: var(--primary-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.serp-tool-btn svg {
    width: 13px;
    height: 13px;
}

.serp-export-cta {
    height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--primary-color);
    color: #fff;
    border: 1px solid var(--primary-color);
    border-radius: 10px;
    padding: 0 16px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--primary-color) 25%, transparent);
}

.serp-export-cta:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

.serp-export-cta svg {
    width: 14px;
    height: 14px;
}

/* --- Visual Intelligence Studio (Custom ApexCharts) --- */
.serp-visual-studio {
    margin-bottom: 24px;
    animation: fadeIn 0.3s ease;
}

.visual-studio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 18px;
}

@media (max-width: 768px) {
    .visual-studio-grid {
        grid-template-columns: 1fr;
    }
}

.visual-chart-card {
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 20px 22px 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.visual-chart-card:hover {
    border-color: color-mix(in srgb, var(--primary-color) 45%, var(--border-color));
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.vcc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.vcc-title-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vcc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--primary-color);
}

.orbit-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ec4899;
    box-shadow: 0 0 6px #ec4899;
    animation: pulseDot 2s infinite ease-in-out;
}

.spectrum-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00f2fe;
    box-shadow: 0 0 6px #00f2fe;
    animation: pulseDot 2s infinite ease-in-out;
}

.vcc-title {
    font-size: 15px;
    font-weight: 900;
    color: var(--text-main);
    margin: 0;
    letter-spacing: -0.2px;
}

.vcc-sub {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 4px 10px;
    border-radius: 8px;
    white-space: nowrap;
}

.vcc-sub svg {
    width: 12px;
    height: 12px;
    color: var(--primary-color);
}

.vcc-sub strong {
    color: var(--primary-color);
    font-weight: 800;
}

.apex-custom-container {
    width: 100%;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.apexcharts-canvas {
    margin: 0 auto;
}

.apexcharts-legend-text {
    font-family: inherit !important;
}

/* Custom Tooltip Transparent Wrapper Override */
.apexcharts-tooltip,
.apexcharts-tooltip.apexcharts-theme-light,
.apexcharts-tooltip.apexcharts-theme-dark {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* --- Dual Layout: Left Rail & Right Feed --- */
.serp-dual-layout {
    display: grid;
    grid-template-columns: 310px 1fr;
    gap: 22px;
    align-items: start;
}

@media (max-width: 980px) {
    .serp-dual-layout {
        grid-template-columns: 1fr;
    }
}

.serp-competitor-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 680px;
    overflow-y: auto;
    padding-right: 6px;
}

.rail-header {
    padding: 2px 4px 8px;
}

.rail-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--text-muted);
}

.rail-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.competitor-nav-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.competitor-nav-card:hover {
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-light) 40%, var(--bg-body));
}

.competitor-nav-card.active {
    background: var(--primary-light);
    border-color: var(--primary-color);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.cnc-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cnc-rank {
    background: var(--border-color);
    color: var(--text-main);
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 800;
    font-family: monospace;
}

.competitor-nav-card.active .cnc-rank {
    background: var(--primary-color);
    color: #fff;
}

.cnc-domain {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-main);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.competitor-nav-card.active .cnc-domain {
    color: var(--primary-color);
}

.cnc-count {
    font-size: 10.5px;
    font-weight: 800;
    background: rgba(0,0,0,0.06);
    color: var(--text-muted);
    padding: 2px 6px;
    border-radius: 5px;
}

.cnc-title {
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* --- Active Competitor Feed --- */
.serp-active-pane {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.site-profile-banner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 18px 22px;
}

.spb-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.spb-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 2px;
}

.rank-pill {
    background: var(--primary-color);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 6px;
    text-transform: uppercase;
}

.domain-pill {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
}

.qa-count-pill {
    background: var(--primary-light);
    color: var(--primary-color);
    font-size: 11.5px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 6px;
}

.spb-title {
    font-size: 17.5px;
    font-weight: 900;
    color: var(--text-main);
    margin: 0;
    line-height: 1.35;
}

.spb-url {
    font-size: 12px;
    font-family: monospace;
    color: var(--text-muted);
    word-break: break-all;
}

.visit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 8px 15px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.visit-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: var(--primary-light);
}

.visit-btn svg {
    width: 13px;
    height: 13px;
}

/* --- Questions List Action Bar (Operational Header directly above cards) --- */
.serp-list-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 6px 4px;
    margin-bottom: 8px;
}

.serp-list-action-bar.stream-bar {
    margin-bottom: 14px;
    padding: 0 4px;
}

.slab-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.slab-count-badge {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--text-main);
}

.slab-selected-badge {
    background: var(--primary-light);
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 6px;
}

.slab-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.slab-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 11px;
    border-radius: 8px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.slab-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: var(--primary-light);
}

.slab-btn.active {
    background: var(--primary-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: 800;
}

.slab-btn svg {
    width: 12px;
    height: 12px;
}

/* --- Q&A Cards Stream --- */
.serp-qa-cards-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.serp-qa-card {
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px 18px;
    transition: all 0.2s ease;
}

.serp-qa-card:hover {
    border-color: color-mix(in srgb, var(--primary-color) 45%, transparent);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.sqc-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sqc-question-body {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.sqc-question-body.clickable {
    cursor: pointer;
    user-select: none;
}

.sqc-question-body.clickable:hover .sqc-question-text {
    color: var(--primary-color);
}

.sqc-tag {
    background: var(--primary-light);
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 6px;
}

/* --- Search Intent Badges --- */
.sqc-intent-badge {
    font-size: 10.5px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.2px;
}

.sqc-intent-badge.intent-info {
    background: color-mix(in srgb, #3b82f6 14%, transparent);
    color: #3b82f6;
    border: 1px solid color-mix(in srgb, #3b82f6 30%, transparent);
}

.sqc-intent-badge.intent-action {
    background: color-mix(in srgb, #10b981 14%, transparent);
    color: #10b981;
    border: 1px solid color-mix(in srgb, #10b981 30%, transparent);
}

.sqc-intent-badge.intent-comm {
    background: color-mix(in srgb, #ec4899 14%, transparent);
    color: #ec4899;
    border: 1px solid color-mix(in srgb, #ec4899 30%, transparent);
}

/* --- Live Keyword Highlighter --- */
.gr-highlight {
    background: color-mix(in srgb, #f59e0b 26%, transparent);
    color: var(--text-main);
    font-weight: 900;
    padding: 0 3px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px color-mix(in srgb, #f59e0b 45%, transparent);
}

.sqc-question-text {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.4;
    transition: color 0.2s ease;
}

.sqc-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sqc-toggle-answer-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sqc-toggle-answer-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: var(--primary-light);
}

.sqc-toggle-answer-btn.active {
    background: var(--primary-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.sqc-toggle-answer-btn .spark-icon {
    width: 12px;
    height: 12px;
    color: var(--primary-color);
}

.sqc-toggle-answer-btn .chev-icon {
    width: 13px;
    height: 13px;
    transition: transform 0.25s ease;
}

.sqc-toggle-answer-btn .chev-icon.rotate-180 {
    transform: rotate(180deg);
}

.sqc-action-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.sqc-action-btn:hover {
    color: var(--primary-color);
    background: var(--card-bg);
}

.sqc-action-btn.highlight {
    color: var(--primary-color);
}

.sqc-action-btn.highlight:hover {
    background: var(--primary-light);
}

.sqc-action-btn svg {
    width: 14px;
    height: 14px;
}

/* --- Rich Answer Box with Markdown Link Support --- */
.sqc-answer-box {
    margin-top: 14px;
    padding: 14px 18px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-color);
    border-radius: 12px;
    animation: fadeIn 0.25s ease;
}

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

.ans-header-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ans-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 800;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ans-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-body);
    padding: 1px 7px;
    border-radius: 5px;
    border: 1px solid var(--border-color);
}

.ans-stat-pill.optimal {
    color: #10b981;
    border-color: color-mix(in srgb, #10b981 35%, transparent);
    background: color-mix(in srgb, #10b981 10%, transparent);
    font-weight: 800;
}

.ans-stat-pill svg {
    width: 10.5px;
    height: 10.5px;
}

.ans-label svg {
    width: 12px;
    height: 12px;
}

.ans-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ans-copy-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: var(--primary-light);
}

.ans-copy-btn svg {
    width: 11px;
    height: 11px;
}

.answer-content-text {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text-main);
    font-weight: 450;
}

/* --- Styled Markdown Links --- */
.serp-markdown-link {
    color: var(--primary-color);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 5px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--primary-color) 9%, transparent);
    transition: all 0.2s ease;
}

.serp-markdown-link:hover {
    background: var(--primary-light);
    color: var(--primary-color);
    text-decoration-color: var(--primary-color);
}

.serp-markdown-link .ext-ico {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    opacity: 0.85;
}

/* --- Mode 2: Stream Grid --- */
.serp-stream-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 16px;
}

@media (max-width: 768px) {
    .serp-stream-grid {
        grid-template-columns: 1fr;
    }
}

.serp-empty-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 13.5px;
    font-weight: 600;
    gap: 8px;
    text-align: center;
}

.serp-empty-placeholder svg {
    width: 32px;
    height: 32px;
    opacity: 0.5;
}

.serp-empty-placeholder.full-span {
    grid-column: 1 / -1;
}

/* --- Floating Bulk Action Bar --- */
.serp-floating-bulk-bar {
    position: sticky;
    bottom: 20px;
    margin-top: 20px;
    background: var(--card-bg);
    border: 1px solid var(--primary-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-radius: 14px;
    padding: 10px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    z-index: 100;
    backdrop-filter: blur(10px);
}

.sf-bulk-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sf-badge {
    background: var(--primary-color);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    padding: 3px 9px;
    border-radius: 6px;
}

.sf-text {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-main);
}

.sf-bulk-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sf-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border-radius: 8px;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sf-btn:hover {
    background: var(--primary-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.sf-btn.ai-cta {
    background: linear-gradient(135deg, #564bf1, #ec4899);
    border: 1px solid transparent;
    color: #fff;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(86, 75, 241, 0.25);
}

.sf-btn.ai-cta:hover {
    background: linear-gradient(135deg, #4338ca, #db2777);
    color: #fff;
    box-shadow: 0 6px 18px rgba(86, 75, 241, 0.35);
    transform: translateY(-1px);
}

.sf-btn.highlight {
    background: var(--primary-light);
    border-color: color-mix(in srgb, var(--primary-color) 35%, transparent);
    color: var(--primary-color);
}

.sf-btn.highlight:hover {
    background: var(--primary-color);
    color: #fff;
}

.sf-btn.clear {
    background: transparent;
    color: var(--text-muted);
}

.sf-btn.clear:hover {
    color: #ef4444;
    border-color: #ef4444;
}

.sf-btn svg {
    width: 13px;
    height: 13px;
}

/* =========================================================================
   LIVE SCRAPING & REAL-TIME SEARCH TELEMETRY (REDESIGNED)
   ========================================================================= */
.live-stream-panel {
    margin-top: 24px;
    margin-bottom: 24px;
    border-radius: 18px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
}

.live-stream-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--primary-light) 25%, transparent);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
}

.lsh-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.lsh-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 20%, transparent), color-mix(in srgb, #10b981 20%, transparent));
    border: 1px solid color-mix(in srgb, var(--primary-color) 35%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 15%, transparent);
}

.lsh-icon-box svg {
    width: 20px;
    height: 20px;
}

.lsh-title-box {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.lsh-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--primary-color);
}

.live-stream-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
    animation: pulseDot 1.8s infinite ease-in-out;
}

.lsh-title {
    font-size: 18px;
    font-weight: 900;
    color: var(--text-main);
    margin: 0;
    letter-spacing: -0.3px;
}

.lsh-title em {
    font-style: normal;
    background: linear-gradient(135deg, var(--primary-color), #10b981);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.lsh-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
    font-weight: 500;
}

.lsh-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.lsh-search-field {
    position: relative;
    display: flex;
    align-items: center;
}

.lsh-search-ico {
    position: absolute;
    left: 10px;
    width: 13px;
    height: 13px;
    color: var(--text-muted);
    pointer-events: none;
}

.lsh-search-input {
    height: 36px;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 9px;
    padding: 0 28px 0 30px;
    font-size: 12px;
    color: var(--text-main);
    width: 180px;
    font-family: inherit;
    transition: all 0.2s ease;
}

.lsh-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--primary-color) 16%, transparent);
}

.lsh-clear-btn {
    position: absolute;
    right: 7px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 2px;
    display: flex;
    align-items: center;
}

.lsh-clear-btn svg {
    width: 12px;
    height: 12px;
}

/* --- Live Feed Limit Dropdown --- */
.lsh-custom-dropdown {
    position: relative;
}

.lsh-limit-toggle {
    height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 9px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.lsh-limit-toggle:hover {
    border-color: color-mix(in srgb, var(--primary-color) 40%, var(--border-color));
}

.lsh-limit-toggle.active {
    background: var(--primary-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: 800;
}

.lsh-limit-icon {
    width: 13px;
    height: 13px;
    color: var(--primary-color);
}

.lsh-arrow {
    width: 12px;
    height: 12px;
    transition: transform 0.2s ease;
}

.lsh-arrow.rotate-180 {
    transform: rotate(180deg);
}

.lsh-limit-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 170px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15);
    padding: 6px;
    z-index: 250;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: fadeIn 0.18s ease;
}

.lsh-limit-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 7px 11px;
    border-radius: 8px;
    background: transparent;
    border: none;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.lsh-limit-item:hover {
    background: var(--primary-light);
    color: var(--primary-color);
}

.lsh-limit-item.selected {
    background: var(--primary-light);
    color: var(--primary-color);
    font-weight: 800;
}

.lsh-limit-item .check-ico {
    margin-left: auto;
    width: 13px;
    height: 13px;
    color: var(--primary-color);
    display: flex;
    align-items: center;
}

.lsh-count-badge {
    height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 9px;
    font-size: 12px;
    font-weight: 800;
    color: var(--text-main);
}

.lsh-action-btn {
    height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 9px;
    padding: 0 13px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.2s ease;
}

.lsh-action-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: var(--primary-light);
}

.lsh-action-btn svg {
    width: 13px;
    height: 13px;
}

/* --- Live Feed Grid & Cards --- */
.live-feed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
    gap: 16px;
    padding: 20px;
}

@media (max-width: 992px) {
    .live-feed-grid {
        grid-template-columns: 1fr;
    }
}

.live-feed-card {
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px 18px;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

.live-feed-card:hover {
    border-color: color-mix(in srgb, var(--primary-color) 45%, var(--border-color));
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

.lfc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
}

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

.lfc-index {
    font-size: 10.5px;
    font-weight: 800;
    font-family: monospace;
    color: var(--text-muted);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 2px 6px;
    border-radius: 5px;
}

.lfc-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.lfc-status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.lfc-type-pill.ft-content {
    background: color-mix(in srgb, #8b5cf6 12%, transparent);
    color: #8b5cf6;
    border: 1px solid color-mix(in srgb, #8b5cf6 28%, transparent);
}
.lfc-type-pill.ft-content .lfc-status-dot { background: #8b5cf6; }

.lfc-type-pill.ft-query {
    background: color-mix(in srgb, #3b82f6 12%, transparent);
    color: #3b82f6;
    border: 1px solid color-mix(in srgb, #3b82f6 28%, transparent);
}
.lfc-type-pill.ft-query .lfc-status-dot { background: #3b82f6; }

.lfc-type-pill.ft-serp {
    background: color-mix(in srgb, #10b981 12%, transparent);
    color: #10b981;
    border: 1px solid color-mix(in srgb, #10b981 28%, transparent);
}
.lfc-type-pill.ft-serp .lfc-status-dot { background: #10b981; }

.lfc-type-pill.ft-stream {
    background: color-mix(in srgb, #ec4899 12%, transparent);
    color: #ec4899;
    border: 1px solid color-mix(in srgb, #ec4899 28%, transparent);
}
.lfc-type-pill.ft-stream .lfc-status-dot { background: #ec4899; }

.lfc-copy-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.lfc-copy-btn:hover {
    color: var(--primary-color);
    background: var(--card-bg);
}

.lfc-copy-btn svg {
    width: 13px;
    height: 13px;
}

.lfc-content {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-main);
}

.lfc-main-query {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 8px;
    line-height: 1.4;
}

.lfc-bullet-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lfc-bullet-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.55;
}

.lfc-bullet-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary-color);
    margin-top: 7px;
    flex-shrink: 0;
}

.lfc-bullet-text {
    flex: 1;
    color: var(--text-main);
}

.lfc-param-key {
    font-weight: 800;
    color: var(--primary-color);
    background: var(--primary-light);
    padding: 1px 6px;
    border-radius: 4px;
    margin-right: 4px;
    display: inline-block;
}

.lfc-single-text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-main);
}

/* =========================================================================
   CREATOR HUB: AI VIDEO STRATEGIST & VIRAL HOOKS STUDIO
   ========================================================================= */
.creator-hub-panel {
    margin-top: 24px;
    margin-bottom: 24px;
    border-radius: 18px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
}

.chp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--primary-light) 25%, transparent);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
}

.chp-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.chp-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, color-mix(in srgb, #ef4444 20%, transparent), color-mix(in srgb, #ec4899 20%, transparent));
    border: 1px solid color-mix(in srgb, #ef4444 35%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ef4444;
    box-shadow: 0 4px 12px color-mix(in srgb, #ef4444 15%, transparent);
}

.chp-icon-box svg {
    width: 20px;
    height: 20px;
}

.chp-title-box {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.chp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #ef4444;
}

.chp-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 8px #ef4444;
    animation: pulseDot 1.8s infinite ease-in-out;
}

.chp-title {
    font-size: 18px;
    font-weight: 900;
    color: var(--text-main);
    margin: 0;
    letter-spacing: -0.3px;
}

.chp-title em {
    font-style: normal;
    background: linear-gradient(135deg, #ef4444, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.chp-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
    font-weight: 500;
}

.chp-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.chp-search-field {
    position: relative;
    display: flex;
    align-items: center;
}

.chp-search-ico {
    position: absolute;
    left: 10px;
    width: 13px;
    height: 13px;
    color: var(--text-muted);
    pointer-events: none;
}

.chp-search-input {
    height: 36px;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 9px;
    padding: 0 28px 0 30px;
    font-size: 12px;
    color: var(--text-main);
    width: 180px;
    font-family: inherit;
    transition: all 0.2s ease;
}

.chp-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--primary-color) 16%, transparent);
}

.chp-clear-btn {
    position: absolute;
    right: 7px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 2px;
    display: flex;
    align-items: center;
}

.chp-clear-btn svg {
    width: 12px;
    height: 12px;
}

.chp-action-btn {
    height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 9px;
    padding: 0 13px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.2s ease;
}

.chp-action-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: var(--primary-light);
}

.chp-action-btn.primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-gradient-end));
    border-color: transparent;
    color: #fff;
    font-weight: 800;
    box-shadow: 0 3px 12px color-mix(in srgb, var(--primary-color) 25%, transparent);
}

.chp-action-btn.primary:hover {
    opacity: 0.92;
    transform: translateY(-1px);
    box-shadow: 0 5px 16px color-mix(in srgb, var(--primary-color) 35%, transparent);
}

.chp-action-btn.active {
    background: var(--primary-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.chp-action-btn svg {
    width: 13px;
    height: 13px;
}

.chp-spin svg {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    100% { transform: rotate(360deg); }
}

/* --- Platform Filter Tabs --- */
.chp-platform-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 20px;
    background: var(--bg-body);
    border-bottom: 1px solid var(--border-color);
}

.chp-tab-btn {
    height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.chp-tab-btn:hover {
    color: var(--text-main);
    border-color: color-mix(in srgb, var(--primary-color) 40%, var(--border-color));
}

.chp-tab-btn.active {
    background: var(--primary-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: 800;
}

.chp-tab-btn.yt.active {
    background: rgba(239, 68, 68, 0.12);
    border-color: #ef4444;
    color: #ef4444;
}

.chp-tab-btn.tk.active {
    background: rgba(6, 182, 212, 0.12);
    border-color: #06b6d4;
    color: #06b6d4;
}

.chp-tab-btn.ig.active {
    background: rgba(236, 72, 153, 0.12);
    border-color: #ec4899;
    color: #ec4899;
}

.chp-tab-btn.li.active {
    background: rgba(10, 102, 194, 0.12);
    border-color: #0a66c2;
    color: #0a66c2;
}

.chp-tab-btn svg {
    width: 13px;
    height: 13px;
}

.chp-tab-count {
    font-size: 11px;
    opacity: 0.8;
}

/* --- Platform Grid & Cards --- */
.creator-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    padding: 20px;
}

@media (max-width: 768px) {
    .creator-hub-grid {
        grid-template-columns: 1fr;
    }
}

.chp-platform-col {
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.chp-col-head {
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid var(--border-color);
    background: var(--card-bg);
}

.chp-col-head.cp-yt { border-top: 3px solid #ef4444; }
.chp-col-head.cp-tk { border-top: 3px solid #06b6d4; }
.chp-col-head.cp-ig { border-top: 3px solid #ec4899; }
.chp-col-head.cp-li { border-top: 3px solid #0a66c2; }

.cch-left {
    display: flex;
    align-items: center;
    gap: 9px;
}

.cch-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
}

.cp-yt .cch-icon { color: #ef4444; }
.cp-tk .cch-icon { color: #06b6d4; }
.cp-ig .cch-icon { color: #ec4899; }
.cp-li .cch-icon { color: #0a66c2; }

.cch-icon svg {
    width: 14px;
    height: 14px;
}

.cch-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-main);
    margin: 0;
}

.cch-subtitle {
    font-size: 10.5px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.2;
}

.cch-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 5px;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    white-space: nowrap;
}

.chp-col-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.chp-idea-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 14px;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chp-idea-card:hover {
    border-color: color-mix(in srgb, var(--primary-color) 45%, var(--border-color));
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

.chp-idea-card.selected {
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-light) 40%, var(--card-bg));
}

.cic-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.cic-meta-pills {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    margin-left: 6px;
}

.cic-hook-type {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--primary-color);
    background: var(--primary-light);
    padding: 2px 7px;
    border-radius: 5px;
}

.cic-duration {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    padding: 1px 6px;
    border-radius: 5px;
}

.cic-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cic-btn {
    height: 26px;
    padding: 0 7px;
    border-radius: 6px;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
}

.cic-btn:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.cic-btn.script-cta {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 15%, transparent), var(--primary-glow));
    border-color: color-mix(in srgb, var(--primary-color) 35%, transparent);
    color: var(--primary-color);
    font-weight: 800;
}

.cic-btn.script-cta:hover {
    background: var(--primary-color);
    color: #fff;
}

.cic-btn svg {
    width: 12px;
    height: 12px;
}

.cic-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--text-main);
}

.cic-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 6px;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
}

.cic-score {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cic-score-val {
    font-size: 11px;
    font-weight: 900;
    color: #10b981;
}

.cic-score-lbl {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
}

.cic-sparkline {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
    width: 50px;
}

.cic-spark-bar {
    flex: 1;
    background: color-mix(in srgb, #10b981 70%, transparent);
    border-radius: 1px;
    min-height: 3px;
    transition: height 0.3s ease;
}

.chp-empty-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 10px;
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
}

.chp-empty-col svg {
    width: 22px;
    height: 22px;
    margin-bottom: 6px;
    opacity: 0.6;
}

.creator-bulk {
    z-index: 300;
}