:root {
    --bg: #f7f9fc;
    --text: #0b1220;
    --muted: #5a6275;
    --accent: #0d6efd;
    --accent-2: #6c8cff;
    --border: #e6e8ef;
    --card: #ffffff;
    --chip: #f2f4f9;
    --ring: 0 0 0 3px rgba(13,110,253,.15);
}

* {
    box-sizing: border-box
}

html, body {
    height: 100%
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}

header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(255,255,255,.85);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--border)
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px
}

h1 {
    margin: 0 0 6px;
    font-size: 22px;
    letter-spacing: .2px
}

h2 {
    margin: 0 0 8px;
    font-size: 18px
}

/* tabs */
.tabs {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap
}

.btn {
    border-radius: 12px;
    height:30px;
    padding:5px;
    font-size:small;
}

.tab {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    cursor: pointer;
    font-weight: 600
}

    .tab.active {
        background: #eef2ff;
        border-radius: 12px;
        border-color: #dfe7ff;
        color: #1a2b8a
    }

/* controls bar */
.bar {
    display: grid;
    gap: 10px;
    grid-template-columns: 1.4fr auto auto auto auto
}

    .bar input, .bar select, .bar button {
        padding: 10px 12px;
        border: 1px solid var(--border);
        color: var(--text)
    }

        .bar input:focus, .bar select:focus {
            outline: none;
            box-shadow: var(--ring);
            border-color: #cdd8ff
        }

.row {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-top: 0px;
    flex-wrap: wrap
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    font-size: 12px
}

main {
    padding: 10px 10px
}

.grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill,minmax(320px,1fr))
}

.card {
    border: 1px solid var(--border);
    background: var(--card);
    border-radius: 16px;
    padding: 16px;
    overflow: hidden;
    box-shadow: 0 8px 26px rgba(16,24,40,.04)
}

    .card h3 {
        margin: 0 0 6px;
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .card .desc {
        margin: 2px 0 8px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.35;
        min-height: 3.9em;
        word-break: break-word;
        overflow-wrap: anywhere
    }

.meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: var(--muted)
}

    .meta .k {
        padding: 4px 8px;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: #fff;
        white-space: nowrap
    }

.pagination {
    margin-top: 16px;
    display: flex;
    justify-content: center;
    gap: 8px
}

    .pagination button {
        padding: 10px 14px;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: #fff
    }

/* dashboard tiles */
.dash-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fill,minmax(220px,1fr))
}

.dash-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(16,24,40,.05)
}

    .dash-card:hover {
        box-shadow: 0 10px 30px rgba(16,24,40,.08)
    }

    .dash-card .t {
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .dash-card .c {
        color: var(--muted)
    }


.toast {
    position: fixed;
    right: 16px;
    bottom: 16px;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 12px;
    box-shadow: 0 8px 26px rgba(0,0,0,.08);
    background: #fff;
    border: 1px solid var(--border);
    font-size: 14px
}

    .toast.ok {
        border-color: #c4f2d2
    }

    .toast.warn {
        border-color: #fde68a
    }

    .toast.err {
        border-color: #fecaca
    }

@media (max-width:700px) {
    .bar {
        grid-template-columns: 1fr 1fr 1fr auto
    }

    .hide-sm {
        display: none
    }
}

@media (prefers-reduced-motion:no-preference) {
    .dash-card {
        transition: box-shadow .2s ease, transform .1s ease
    }

}

/* stats, charts, tables */
.stats {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill,minmax(260px,1fr));
    margin-bottom: 12px
}

.stat-card {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 14px;
    padding: 14px
}

    .stat-card h4 {
        margin: 0 0 8px;
        font-size: 14px
    }

.chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.chip {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--chip);
    font-size: 12px
}

    .chip a {
        color: inherit;
        text-decoration: none
    }

.section-title {
    margin: 18px 0 10px
}

.analysis {
    margin-top: 6px;
    margin-bottom: 24px
}

.charts {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill,minmax(280px,1fr))
}

.chart-card {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 14px;
    padding: 12px
}

    .chart-card h5 {
        margin: 0 0 6px;
        font-size: 13px
    }

    .chart-card canvas {
        display: block;
        width: 100%
    }

.tables {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill,minmax(280px,1fr))
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px
}

th {
    font-size: 12px;
    color: var(--muted);
    text-align: left;
    font-weight: 600
}

td {
    font-size: 13px
}

.rowcap {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff
}

.mono {
    font-variant-numeric: tabular-nums
}

.panel-hidden {
    display: none
}

/* toolbar & filter */
.filterbar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 8px 0 6px;
    flex-wrap: wrap
}

.muted {
    color: var(--muted)
}

/* load more at bottom */
.load-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 10px
}

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

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

    .contributor img {
        width: 24px;
        height: 24px;
        border-radius: 50%;
    }
/* Give breathing room between the filter/sort row and the repo cards */
/* Create extra space before the Repositories section */
#panel-dash #repo-filter {
    margin-top: 28px; /* increase this number until it feels right */
}

#panel-dash #repos-title {
    margin-top: 12px; /* ensures the heading is not glued to the bar */
}

.filterbar {
    margin-top: 28px !important;
}

#panel-dash #term-results {
    margin-top: 6px; /* tiny gap before the grid */
}

.dense #repo-filter {
    margin-bottom: 18px;
}

.dense #repos-title {
    margin-top: 4px;
    margin-bottom: 8px;
}

.dense #term-results {
    margin-top: 6px;
}

#panel-dash #repo-filter .sort-bar {
    margin-left: 8px;
}
/* ========== Elegant ecosystems list ========== */
/* Filter toolbar spacing */
.terms-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 10px 0 32px; /* ⬅️ increased bottom margin from 14px → 24px */
}


#filter-terms {
    height: 38px;
    padding: 8px 12px 8px 34px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    outline: none;
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
    transition: box-shadow .15s ease, border-color .15s ease;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%235a6275" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>');
    background-repeat: no-repeat;
    background-position: 9px 50%;
}

    #filter-terms:focus {
        border-color: #cfd8ff;
        box-shadow: var(--ring);
    }

#terms-count {
    font-size: 12px;
    color: var(--muted);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px 10px;
}

/* grid */
#terms.dash-grid {
    grid-template-columns: repeat(auto-fill,minmax(260px,1fr));
    gap: 12px;
}

/* card */
.eco-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(16,24,40,.05);
    transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}

    .eco-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(16,24,40,.08);
        border-color: #dfe6ff;
    }

    .eco-card .eco-title {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        .eco-card .eco-title .emoji {
            width: 28px;
            height: 28px;
            display: inline-grid;
            place-items: center;
            border-radius: 10px;
            background: #eef2ff;
            color: #1a2b8a;
            font-size: 16px;
        }

    .eco-card .eco-meta {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        font-size: 12px;
        color: var(--muted);
    }

    .eco-card .pill {
        padding: 4px 8px;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: #fff;
    }

    .eco-card .count {
        margin-left: auto;
        font-size: 12px;
        color: #1f2937;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 8px;
        border-radius: 999px;
        background: #f5f7ff;
        border: 1px solid #e7ebff;
    }

        .eco-card .count .dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #6c8cff;
            display: inline-block;
        }

/* thin divider under section header */
#ecosystems-header + hr#terms-sep {
    margin: 10px 0 14px;
    border: 0;
    border-top: 1px solid var(--border);
}

/* ===== SecoDash Dashboard Polish ===== */
:root {
    --bg: #f7f9fc;
    --card: #ffffff;
    --text: #0b1220;
    --muted: #6b7280;
    --border: #e6ebf5;
    --accent: #2e6bff;
    --accent-weak: #eef3ff;
    --ring: 0 0 0 3px rgba(46,107,255,.18);
    --shadow: 0 8px 30px rgba(16,24,40,.08);
    --shadow-sm: 0 2px 10px rgba(16,24,40,.05);
}

body {
    background: var(--bg);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header row */
.dashboard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 18px 0 12px 0;
}

    .dashboard-head h2 {
        font-size: 20px;
        font-weight: 700;
        letter-spacing: .2px;
        margin: 0;
        color: var(--text);
    }

.dashboard-meta {
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
}

/* Filter bar */
#ecosystems-header {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
    box-shadow: var(--shadow-sm);
}

    #ecosystems-header .toolbar {
        display: flex;
        gap: 12px;
        align-items: center;
        flex-wrap: wrap;
    }

#filter-terms {
    min-width: 280px;
    flex: 1;
    height: 40px;
    padding: 0 14px 0 40px;
    border: 1px solid var(--border);
    border-radius: 999px;
    outline: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2390a4c6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l4 4'/%3E%3C/svg%3E") no-repeat 12px 50% #fff;
    transition: box-shadow .12s ease, border-color .12s ease;
}

    #filter-terms:focus {
        border-color: #c7d4ff;
        box-shadow: var(--ring);
    }

/* Count pill on the right */
#terms-count {
    font-size: 12.5px;
    color: var(--muted);
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
}

/* Grid */
#terms {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 22px; /* space between items */
}

@media (max-width: 1100px) {
    #terms {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
}

@media (max-width: 780px) {
    #terms {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 520px) {
    #terms {
        grid-template-columns: 1fr;
    }
}

/* Ecosystem cards */
.eco-card {
    cursor: pointer;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px 14px 12px 14px;
    box-shadow: var(--shadow-sm);
    transition: transform .12s ease, box-shadow .16s ease, border-color .12s ease;
}

    .eco-card:hover {
        transform: translateY(-2px);
        border-color: #d8e3ff;
        box-shadow: var(--shadow);
    }

.eco-title {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
}

    .eco-title .emoji {
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        background: var(--accent-weak);
        font-size: 18px;
    }

    .eco-title .name {
        font-weight: 600;
        color: var(--text);
        letter-spacing: .1px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .eco-title .count {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: #2643a5;
        padding: 6px 10px;
        background: #eef2ff;
        border: 1px solid #e0e7ff;
        border-radius: 999px;
    }

        .eco-title .count .dot {
            width: 8px;
            height: 8px;
            border-radius: 999px;
            background: #5186ff;
            display: inline-block;
        }

/* Lower meta row */
.eco-meta {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

    .eco-meta .pill {
        font-size: 12px;
        color: var(--muted);
        padding: 6px 10px;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 10px;
    }

/* Separator line spacing */
#terms-sep {
    margin: 22px 0;
    border-top: 1px solid var(--border);
}

/* Tabs top spacing alignment (optional) */
.tabs {
    margin-bottom: 8px;
}

/* ===== Professional layout polish for SecoDash ===== */
/* Respect template header + sidebar you already set */
:root {
    --pcoded-header-h: 56px; /* adjust if needed */
    --pcoded-sidebar-w: 260px; /* your expanded sidebar width */
    --seco-maxw: 1180px; /* content max width */
    --seco-padx: 18px; /* page side padding */
    --seco-border: #e6ebf5;
    --seco-shadow-sm: 0 2px 10px rgba(16,24,40,.05);
    --seco-shadow: 0 10px 24px rgba(16,24,40,.08);
}

/* Keep the app header sticky but visually lighter */
#seco .seco-header {
    position: sticky;
    top: var(--pcoded-header-h);

    padding: 10px 0 6px;
    background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.70));
    backdrop-filter: saturate(140%) blur(6px);
}

/* Center the whole app content area (within the remaining viewport) */
#seco .seco-shell {
    max-width: var(--seco-maxw);
    margin: 0 auto;
    padding: 0 var(--seco-padx);
}

/* Elegant white bar that holds title + tabs + collector controls */
#seco .seco-bar {
    background: #fff;
    border: 1px solid var(--seco-border);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: var(--seco-shadow-sm);
}

    /* Title & tabs alignment */
    #seco .seco-bar h1 {
        margin: 0 0 10px;
        font-size: 22px;
        letter-spacing: .2px;
    }

#seco .tabs {
    display: inline-flex;
    gap: 8px;
    margin: 0 0 6px;
}

#seco .tab {
    padding: 7px 12px;
    border: 1px solid var(--seco-border);
    border-radius: 12px;
    background: #fff;
    font-weight: 600;
    line-height: 1;
}

    #seco .tab.active {
        background: #eef2ff;
        border-color: #dfe7ff;
        color: #1a2b8a;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
    }

/* Give the main subtle top spacing and keep it centered */
#seco .seco-main {
    padding: 14px 0 24px;
}

    #seco .seco-main .seco-shell {
        padding-top: 4px;
    }

/* Ecosystems header card stays full width of the shell */
#seco #ecosystems-header {
    background: #fff;
    border: 1px solid var(--seco-border);
    border-radius: 14px;
    padding: 12px;
    box-shadow: var(--seco-shadow-sm);
}

/* Center the cards grid nicely across breakpoints */
#seco #terms {
    /* fixed tile width so we can truly center columns */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    /* the magic: constrain and center the grid lines */
    max-width: var(--seco-maxw);
    margin: 14px auto 0;
    justify-items: stretch;
}

/* Optional: if you want perfect centering with fixed tile width */
@media (min-width: 700px) {
    #seco #terms {
        grid-template-columns: repeat(auto-fit, 300px);
        justify-content: center; /* centers the columns */
    }
}

/* Card visual polish */
#seco .eco-card {
    border: 1px solid var(--seco-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--seco-shadow-sm);
    transition: transform .12s ease, box-shadow .16s ease, border-color .12s ease;
}

    #seco .eco-card:hover {
        transform: translateY(-2px);
        border-color: #d8e3ff;
        box-shadow: var(--seco-shadow);
    }

/* Filter input: full width within shell and centered look */
#seco #terms-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

#seco #filter-terms {
    flex: 1;
    min-width: 260px;
    height: 40px;
    padding: 0 14px 0 40px;
    border: 1px solid var(--seco-border);
    border-radius: 999px;
    outline: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2390a4c6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l4 4'/%3E%3C/svg%3E") no-repeat 12px 50% #fff;
    transition: box-shadow .12s ease, border-color .12s ease;
}

    #seco #filter-terms:focus {
        border-color: #c7d4ff;
        box-shadow: 0 0 0 3px rgba(46,107,255,.18);
    }

/* Subtle divider */
#seco #terms-sep {
    border-top: 1px solid var(--seco-border);
    margin: 22px 0;
}

/* Make collector controls sit snugly below tabs inside the white bar */
#seco #collect-controls {
    margin-top: 8px;
}

#seco .bar {
    margin-top: 6px;
}

/* Keep everything crisp on mobile */
@media (max-width: 991.98px) {
    #seco .seco-bar {
        border-radius: 12px;
    }

    #seco #terms {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}


/* If any dropdowns/tooltips are clipped inside cards, allow overflow on those cards */
#seco .card.allow-overflow {
    overflow: visible;
}
/* Offset the whole app from the left sidebar (desktop) */
@media (min-width: 992px) {
    #seco {
        padding-left: var(--pcoded-sidebar-w);
    }

    .pcoded-navbar {
        position: fixed;
        top: var(--pcoded-header-h);
        left: 0;
        height: calc(100vh - var(--pcoded-header-h));
        z-index: 1030;
    }
}

/* When sidebar collapses to mini width (adjust 80px if your mini is different) */
.pcoded.is-collapsed #seco,
body.navbar-collapsed #seco {
    padding-left: 80px !important;
}
/* ==================== SecoDash — Professional Baseline ==================== */
/* keep your existing :root if you like; these are the only vars we use here */
:root {
    --pcoded-header-h: 56px; /* adjust to your real header height */
    --pcoded-sidebar-w: 260px; /* full sidebar width (desktop) */
    --seco-maxw: 1180px; /* content width */
    --seco-pad: 18px; /* page side padding */
    --line: #e7ebf3; /* separators/borders */
    --text: #0b1220;
    --muted: #6b7280;
}

/* Layout: keep the app below the blue bar and clear of the left sidebar */
#seco {
    padding-left: 0;
}

@media (min-width: 992px) {
    #seco {
        padding-left: var(--pcoded-sidebar-w);
    }

    .pcoded-navbar {
        position: fixed;
        top: var(--pcoded-header-h);
        left: 0;
        height: calc(100vh - var(--pcoded-header-h));
        z-index: 1030;
    }
}

/* Sticky header: flat, no card look */
#seco .seco-header {
    position: sticky;
    top: var(--pcoded-header-h);
    background: transparent;
    backdrop-filter: none;
    padding: 10px 0 8px;
    border-bottom: 1px solid var(--line);
}

/* Center shell but bias to the left (to balance sidebar) */
/* Shell now fills everything right of sidebar */
#seco .seco-shell {
    margin: 0;
    padding: 0 var(--seco-pad);
}

/* Contain the main grid/content in a centered block */
#seco .seco-main .seco-shell > * {
    max-width: var(--seco-maxw);
    margin-left: auto;
    margin-right: auto;
}



/* Title & tabs — minimal */
#seco .seco-bar {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

    #seco .seco-bar h1 {
        margin: 0 0 8px;
        font-size: 22px;
        letter-spacing: .2px;
        color: var(--text);
    }

#seco .tabs {
    display: inline-flex;
    gap: 8px;
    margin: 0;
}

#seco .tab {
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font-weight: 600;
    line-height: 1;
    color: var(--text);
}

    #seco .tab.active {
        background: #f4f7ff;
        border-color: #dfe6ff;
        color: #1a2b8a;
    }

/* Main area spacing */
#seco .seco-main {
    padding: 14px 0 24px;
}

/* “Analyzed Ecosystems” header: flat section, not a card */
#seco #ecosystems-header {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 12px 0 10px;
}

#seco .dashboard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    #seco .dashboard-head h2 {
        margin: 0;
        font-size: 18px;
    }

#seco .dashboard-meta {
    font-size: 12.5px;
    color: var(--muted);
}

/* Filter pill keeps the soft look */
#seco #terms-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

#seco #filter-terms {
    flex: 1;
    min-width: 260px;
    height: 40px;
    padding: 0 14px 0 40px;
    border: 1px solid var(--line);
    border-radius: 999px;
    outline: 0;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2390a4c6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l4 4'/%3E%3C/svg%3E") no-repeat 12px 50%;
}

    #seco #filter-terms:focus {
        border-color: #cbd6ff;
        box-shadow: 0 0 0 3px rgba(46,107,255,.16);
    }

/* Divider */
#seco #terms-sep {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 18px 0;
}

/* Grid — centered without “card-in-card” feels */
#seco #terms {
    display: grid;
    gap: 16px;
    margin: 8px auto 0;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Ecosystem tile: single hairline border by default, soft hover */
#seco .eco-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: none;
    padding: 14px;
    transition: transform .12s ease, box-shadow .16s ease, border-color .12s ease;
}

    #seco .eco-card:hover {
        transform: translateY(-1px);
        border-color: #dfe6ff;
        box-shadow: 0 8px 18px rgba(16,24,40,.06);
    }

/* Repo/analysis cards (same minimal recipe) */
#seco .card {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
}

    #seco .card:hover {
        box-shadow: 0 8px 18px rgba(16,24,40,.06);
    }

/* Inside-card elements should not add new borders/shadows unless necessary */
#seco .pill {
    border: 1px solid var(--line);
}

#seco .pagination button {
    border: 1px solid var(--line);
}

/* Mobile niceties */
@media (max-width: 991.98px) {
    #seco {
        padding-left: 0;
    }
}
/* 1) The shell fills everything to the right of the sidebar */
#seco .seco-shell {
    max-width: none; /* stop centering the shell itself */
    margin: 0;
    padding: 0 var(--seco-pad);
}

/* 2) Anchor major sections to the LEFT (not centered) with a max width */
#seco #ecosystems-header,
#seco #terms,
#seco #term-header,
#seco #term-analysis,
#seco #panel-collect {
    max-width: var(--seco-maxw); /* keep a pleasant reading width */
    margin-left: 0; /* hug the left */
    margin-right: auto; /* let the extra space live on the right */
}

/* 3) Make the cards grid start at the left edge */
#seco #terms {
    justify-content: start !important;
    margin-top: 8px;
}

/* (optional) tighten maximum width if you still see too much space on the right */
:root {
    --seco-maxw: 2080px;
}
/* try 1080–1140px; pick what looks best */
/* ===== Left–right gap tweak for SecoDash ===== */
:root {
    /* tune these two numbers to taste */
    --seco-pad-left: 8px; /* was ~18px — smaller = closer to sidebar */
    --seco-pad-right: 24px; /* keep a little breathing room on the right */
}

/* apply asymmetric padding on the shell only */
#seco .seco-shell {
    max-width: none; /* shell spans the content area */
    margin: 0; /* no centering on the shell itself */
    padding-left: var(--seco-pad-left);
    padding-right: var(--seco-pad-right);
}

/* ensure sections don’t add their own left offset */
#seco #ecosystems-header,
#seco #terms,
#seco #term-header,
#seco #term-analysis,
#seco #panel-collect {
    max-width: var(--seco-maxw); /* keep your preferred content width */
    margin-left: 0; /* hug the left edge of the content area */
    margin-right: auto; /* extra space stays on the right */
}

/* make the cards grid start right at that left edge */
#seco #terms {
    justify-content: start;
}

/* mobile: symmetric padding again */
@media (max-width: 991.98px) {
    #seco .seco-shell {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* === SecoDash compact controls (uniform height) === */
/* 1) Pick your control height once (34px looks great) */
#seco {
    --control-h: 34px;
    --control-pad-x: 10px;
}

    /* 2) Normalize all form controls in the collector toolbar */
    #seco #collect-controls .bar input,
    #seco #collect-controls .bar select,
    #seco #collect-controls .bar button {
        height: var(--control-h);
        padding: 0 var(--control-pad-x);
        border-radius: 10px;
        font-size: 13px;
        line-height: 1; /* avoids vertical drift across browsers */
    }

    /* 3) Buttons use flex so the label is perfectly centered */
    #seco #collect-controls .bar button {
        display: inline-flex;
        align-items: center;
        gap: 8px; /* for icons if any */
    }

    /* 4) Make pills match the same height too */
    #seco .pill {
        height: var(--control-h);
        display: inline-flex;
        align-items: center;
        padding: 0 10px;
        border-radius: 999px;
        font-size: 12.5px;
    }

    /* 5) Fix native selects so they visually match inputs/buttons */
    #seco #collect-controls .bar select {
        appearance: none;
        -webkit-appearance: none;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23566' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center #fff;
        padding-right: 30px; /* room for the caret */
    }

    /* 6) Align everything on the row */
    #seco #collect-controls .bar {
        align-items: center;
    }

    /* 7) Optional: slightly tighter primary button radius if you like */
    #seco #go.btn.primary {
        border-radius: 10px;
    }

    /* --- Stop any card text from spilling out on mobile --- */
    #seco .card,
    #seco .stat-card,
    #seco .chart-card {
        overflow: hidden; /* clip to rounded corners */
    }

        /* Long strings (package names, urls, tokens) can wrap/break safely */
        #seco .card *,
        #seco .stat-card *,
        #seco .chart-card * {
            min-width: 0; /* CRUCIAL for flex/grid children */
            word-break: break-word;
            overflow-wrap: anywhere;
        }

    /* Ecosystem header meta line can wrap too */
    #seco #term-meta {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* --- Compact list rows (“Top software packages”, “Top contributors”) --- */
    #seco .compact-list {
        min-width: 0;
    }

        #seco .compact-list .item {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto; /* name shrinks, count stays fixed */
            align-items: center;
            gap: 8px;
            box-sizing: border-box;
        }

        #seco .compact-list .name {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap; /* single-line with ellipsis */
        }

        #seco .compact-list .count {
            flex: none;
            padding: 0 8px;
            border-left: 1px dashed var(--line, #e7ebf3);
            color: var(--muted, #6b7280);
            font-variant-numeric: tabular-nums;
        }

/* On very small phones allow two-line names instead of overflow */
@media (max-width: 420px) {
    #seco .compact-list .name {
        white-space: normal; /* let it wrap */
    }
}

/* SecoDash network custom tooltip */
#net-tip {
    position: absolute;
    z-index: 20;
    background: #fff;
    color: #0b1220;
    border: 1px solid var(--border, #e6e8ef);
    border-radius: 10px;
    padding: 8px 10px;
    box-shadow: 0 10px 24px rgba(16,24,40,.12);
    font-size: 12.5px;
    line-height: 1.35;
    pointer-events: none;
    display: none;
    max-width: 320px;
    white-space: normal;
}

    #net-tip b {
        font-weight: 700
    }

    #net-tip .muted {
        color: var(--muted,#6b7280)
    }

    #net-tip a {
        color: #2563eb;
        text-decoration: none
    }

        #net-tip a:hover {
            text-decoration: underline
        }


/* --- tiny section toggle pill --- */
.section-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--border, #e6e8ef);
    background: #fff;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

    .section-toggle .chev {
        display: inline-block;
        width: 10px;
        height: 10px;
        transition: transform .18s ease;
        position: relative;
    }

        .section-toggle .chev::before {
            content: "";
            position: absolute;
            inset: 2px 0 0 0;
            border: solid currentColor;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

    .section-toggle[aria-expanded="false"] .chev {
        transform: rotate(-90deg); /* points right when closed */
    }

    .section-toggle:hover {
        box-shadow: 0 2px 10px rgba(16,24,40,.06);
    }

    .section-toggle .txt-when-open {
        display: inline;
    }

    .section-toggle .txt-when-closed {
        display: none;
    }

    .section-toggle[aria-expanded="false"] .txt-when-open {
        display: none;
    }

    .section-toggle[aria-expanded="false"] .txt-when-closed {
        display: inline;
    }

/* wrapper row for section title + toggle */
.section-headline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0; /* inherit heading margins from child */
}

/* keep the existing look */

/* tiny show/hide pill */
.section-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--border,#e6e8ef);
    background: #fff;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

    .section-toggle .chev {
        width: 10px;
        height: 10px;
        position: relative;
        transition: transform .18s ease
    }

        .section-toggle .chev::before {
            content: "";
            position: absolute;
            inset: 2px 0 0 0;
            border: solid currentColor;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

    .section-toggle[aria-expanded="false"] .chev {
        transform: rotate(-90deg)
    }

    .section-toggle .txt-when-open {
        display: inline
    }

    .section-toggle .txt-when-closed {
        display: none
    }

    .section-toggle[aria-expanded="false"] .txt-when-open {
        display: none
    }

    .section-toggle[aria-expanded="false"] .txt-when-closed {
        display: inline
    }
/* Section heads + toggle */
#seco .seco-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 6px 0 8px;
    position: sticky;
    top: calc(var(--pcoded-header-h) + 8px); /* ✅ won’t slide under the blue navbar */
    z-index: 1020; /* below the header (1030), above content */
    background: var(--bg, #f7f9fc);
    padding: 4px 0;
}

#seco .seco-toggle {
    appearance: none;
    border: 1px solid var(--border, #e6e8ef);
    background: #fff;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12.5px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(16,24,40,.05);
}

    #seco .seco-toggle[aria-expanded="false"]::before {
        content: "Show";
    }

    #seco .seco-toggle[aria-expanded="true"]::before {
        content: "Hide";
    }

/* When collapsed, only the body disappears; header stays */
#seco .seco-collapsed {
    display: none !important;
}










/* === Terminal-like AI modal === */
.ai-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.ai-modal {
    width: min(960px, 96vw);
    height: min(680px, 90vh);
    background: #0b1220;
    color: #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0,0,0,.45);
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    border: 1px solid #1f2937;
}

.ai-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #0e1629;
    border-bottom: 1px solid #1f2937;
}

    .ai-head .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }

    .ai-head h4 {
        margin: 0;
        font-size: 14px;
        color: #c7d2fe;
    }

.ai-controls {
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center;
}

    .ai-controls select, .ai-controls input[type="checkbox"] {
        background: #0b1220;
        color: #e5e7eb;
        border: 1px solid #263145;
        border-radius: 8px;
        height: 32px;
        padding: 0 8px;
        font-size: 12.5px;
    }

.ai-body {
    padding: 10px 12px;
    overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.ai-msg {
    margin: 0 0 10px;
    white-space: pre-wrap;
    word-break: break-word;
}

    .ai-msg.user::before {
        content: "> ";
        color: #60a5fa;
    }

    .ai-msg.assistant::before {
        content: "< ";
        color: #34d399;
    }

.ai-foot {
    padding: 10px;
    display: flex;
    gap: 8px;
    border-top: 1px solid #1f2937;
    background: #0e1629;
}

.ai-input {
    flex: 1;
    border: 1px solid #263145;
    border-radius: 10px;
    padding: 10px 12px;
    background: #0b1220;
    color: #e5e7eb;
}

.ai-btn {
    border: 1px solid #334155;
    border-radius: 10px;
    padding: 10px 12px;
    background: #1f2937;
    color: #fff;
    cursor: pointer;
}

    .ai-btn:hover {
        filter: brightness(1.08);
    }

.ai-pill {
    font-size: 12px;
    color: #93a3bf;
    padding: 6px 8px;
    border: 1px solid #263145;
    border-radius: 999px;
}
.ask-ai-repo {
    margin-left: 6px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1;
}

    .ask-ai-repo:hover {
        box-shadow: 0 2px 8px rgba(16,24,40,.06);
    }
/* repo card header with right-aligned Ask AI */
.repo-card .repo-head {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
}

.btn-ghost {
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 999px;
    font-size: 12.5px;
    color: var(--muted);
}

    .btn-ghost .ic {
        opacity: .9
    }

    .btn-ghost:hover {
        box-shadow: 0 2px 10px rgba(16,24,40,.06);
        border-color: #dfe6ff
    }

/* de-noise the meta chips */
.repo-card .meta {
    gap: 6px;
}

    .repo-card .meta .k {
        border-radius: 10px;
        padding: 3px 8px;
        background: #fff;
        border: 1px solid var(--border);
    }

/* tame description and whitespace */
.repo-card .desc {
    -webkit-line-clamp: 2;
    min-height: 2.7em;
}

/* subtle rows to avoid clutter */
.repo-card .meta.row1, .repo-card .meta.row2, .repo-card .meta.row3 {
    margin-top: 6px;
}

/* Console tone: slightly brighter text, tighter line-height, larger input */
.ai-modal {
    border-radius: 12px
}

.ai-body {
    font-size: 13.5px;
    line-height: 1.45;
    color: #e8edf7
}

.ai-head {
    background: #0d1530
}

.ai-foot {
    background: #0d1530
}

.ai-input {
    height: 40px;
    font-size: 13.5px
}

.ai-msg {
    margin: 6px 0 10px
}

    .ai-msg.user::before {
        color: #8ab4ff
    }

    .ai-msg.assistant::before {
        color: #34d399
    }
#term-stats {
    font-size: 13px;
    line-height: 1.45;
    color: #333;
}

    #term-stats strong {
        display: inline-block;
        width: 110px;
        color: #111;
    }

/* tighter grid spacing for the repo cards grid */
#term-results.grid {
    gap: 8px 8px; /* row-gap column-gap */
}

/* slightly denser card */
#term-results .repo-card.card {
    padding: 12px;
}

#term-results .meta {
    gap: 6px;
}

    #term-results .meta .k {
        padding: 3px 6px;
        font-size: 11.5px;
    }

#term-results .card .desc {
    -webkit-line-clamp: 2;
    min-height: 2.7em;
}

/* turn the repo grid into a masonry layout */
#term-results.masonry {
    column-width: 320px; /* target card width; tweak 300–340 */
    column-gap: 12px;
}

    /* each repo card becomes a column "block" */
    #term-results.masonry .repo-card {
        display: inline-block;
        width: 100%;
        break-inside: avoid; /* prevent splitting */
        margin: 0 0 12px; /* vertical space between cards */
    }

/* ---------- Tighter gaps for both dashboard & collector ---------- */
#term-results.grid,
#panel-collect .grid,
#collect-results.grid {
    gap: 8px 8px; /* row-gap column-gap */
}

/* Slightly denser repo cards everywhere */
#term-results .repo-card.card,
#panel-collect .repo-card.card,
#collect-results .repo-card.card {
    padding: 12px;
}

#term-results .meta,
#panel-collect .meta,
#collect-results .meta {
    gap: 6px;
}

    #term-results .meta .k,
    #panel-collect .meta .k,
    #collect-results .meta .k {
        padding: 3px 6px;
        font-size: 11.5px;
    }

#term-results .card .desc,
#panel-collect .card .desc,
#collect-results .card .desc {
    -webkit-line-clamp: 2;
    min-height: 2.7em;
}

/* ---------- Masonry layout (column-based packing) ---------- */
/* Reusable: apply the class .masonry to any grid container */
.grid.masonry {
    column-width: 320px; /* target card width; tweak 300–340 */
    column-gap: 12px;
}
    /* Each card becomes a block in the column flow */
    .grid.masonry > .card,
    .grid.masonry > .repo-card {
        display: inline-block;
        width: 100%;
        break-inside: avoid;
        margin: 0 0 12px; /* vertical spacing between cards */
    }

/* Optional: slightly smaller “chip” look on Collector */
#panel-collect .meta .k {
    font-size: 11.25px;
    padding: 2.5px 6px;
}


/* ---------- Collector: compact grid + tighter rows ---------- */
#panel-collect .grid,
#collect-results.grid {
    /* force a normal grid, not columns */
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    /* reduce spacing between rows/columns */
    gap: 8px 10px !important;
}

/* Make the card itself a bit denser */
#panel-collect .repo-card.card {
    padding: 12px !important;
    margin: 0 !important; /* kill any stray bottom margins */
}

    /* Headline & description a tad tighter */
    #panel-collect .repo-card.card h3 {
        font-size: 14px;
        margin: 0 0 4px;
    }

/* Two-line clamp in collector to shrink height */
#panel-collect .card .desc {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    min-height: 2.6em; /* keeps rows visually even */
}

/* Chips/metadata are smaller and closer */
#panel-collect .meta {
    gap: 6px;
}

    #panel-collect .meta .k {
        padding: 3px 6px;
        font-size: 11.5px;
    }

/* If your global styles add extra spacing after each row via wrappers, trim it */
#panel-collect .grid > * {
    margin-bottom: 0 !important;
}

.taxonomy-tags {
    margin-top: 6px;
}

    .taxonomy-tags .taxo {
        background: #2563eb;
        color: white;
        font-size: 11px;
        padding: 2px 6px;
        border-radius: 6px;
    }
/* Taxonomy row (bottom of card) */
.taxo-wrap {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.taxo-label {
    font-size: 11.5px;
    color: var(--muted);
}

.taxo-pills {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}

.taxo-pill {
    font-size: 11.5px;
    font-weight: 400; /* not bold */
    color: #374151; /* subtle text */
    background: #f5f7fb; /* soft gray */
    border: 1px solid var(--border);
    padding: 3px 8px;
    border-radius: 999px;
    line-height: 1;
}

.taxonomy-row {
    margin-top: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.chip-tax {
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fffaf0; /* soft */
    font-size: 12px;
    font-weight: 500; /* not bold-heavy */
    color: #7c5800; /* amber-ish text */
}


/* lightweight legend styling */
.net-legend {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 12px;
    background: #fff;
}

    .net-legend .pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12.5px;
        color: #374151;
        border: 1px solid #e5e7eb;
        padding: 4px 8px;
        border-radius: 999px;
        background: #fff;
    }

    .net-legend .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
    }
/* Minimal dot inside the chips (used in #network-stats) */
#network-stats .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
}

/* keep the large top margin only for the repo filter bar */
#seco #repo-filter.filterbar {
    margin-top: 28px;
}

/* default filterbars */
.filterbar {
    margin-top: 10px;
}

/* tighten spacing specifically inside the KG card */
#seco #network-card #network-toolbar {
    margin-top: 4px !important;
}

#seco #network-card h5 {
    margin-bottom: 6px;
}
/* optional: nudge title→legend gap */


/* Taxonomy row (compact, wraps nicely) */
.taxonomy-row {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* On-brand pill for taxonomy tags */
.chip-tax {
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--chip); /* ← matches theme */
    color: var(--text); /* readable on light chip */
    font-size: 11.5px;
    font-weight: 400;
}

/* Tiny (+N)/(−) toggle */
.taxo-toggle {
    border: 1px solid var(--border);
    background: #fff;
    color: var(--muted);
    border-radius: 999px;
    padding: 2px 7px;
    line-height: 1;
    font-size: 11.5px;
    cursor: pointer;
}

    .taxo-toggle:hover {
        box-shadow: 0 2px 8px rgba(16,24,40,.06);
        border-color: #dfe6ff;
    }

/* hide container utility */
.taxo-more[hidden] {
    display: none !important;
}


/* Do NOT break inside taxonomy chips (or other chips) */
.taxonomy-row .chip-tax,
.chip,
.meta .k {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}

/* Optional: if you want long tags to truncate with … instead of overflowing */
.taxonomy-row .chip-tax,
.chip {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* keep the loose wrapping only where it’s useful */
#seco .card .desc {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* remove the old global “*” rule entirely, or at least exclude chips */


/* Let the overlay anchor properly */
#network-card {
    position: relative;
}

/* Loading overlay for the KG */
#network-overlay {
    position: absolute;
    inset: 44px 10px 10px 10px; /* avoid header row */
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.65);
    backdrop-filter: blur(2px) saturate(120%);
    border: 1px solid var(--border,#e6e8ef);
    border-radius: 12px;
    z-index: 7;
}

    #network-overlay .net-load {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    #network-overlay .msg {
        color: #1f2937;
        font-size: 13px;
    }

/* Unified Ask-AI button */
.ask-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--border,#e6e8ef);
    background: #fff;
    border-radius: 999px;
    font-size: 12.5px;
    color: var(--muted,#6b7280);
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

    .ask-ai-btn:hover {
        box-shadow: 0 2px 10px rgba(16,24,40,.06);
        border-color: #dfe6ff;
    }

    .ask-ai-btn:focus {
        outline: none;
        box-shadow: var(--ring,0 0 0 3px rgba(46,107,255,.18))
    }

    .ask-ai-btn .ai-ic {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
        opacity: .9;
    }

/* Place neatly in repo card header row */
.repo-card .repo-head {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between
}

/* If you prefer a floating badge style on cards, uncomment:
.repo-card { position: relative; }
.repo-card .ask-ai-btn { position:absolute; top:8px; right:8px; }
*/


/* Controls row already looks good; just ensure consistent heights */
.ai-head .ai-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .ai-head .ai-controls select,
    .ai-head .ai-controls .ai-btn {
        height: 32px;
    }

/* Checkbox “pills” – vertically center input + label text */
.ai-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #263145;
    border-radius: 999px;
    background: #0b1220;
    color: #c9d3ea;
    line-height: 1; /* stop baseline drift */
}

    .ai-pill input {
        width: 16px;
        height: 16px;
        margin: 0;
        vertical-align: middle;
        transform: translateY(-1px); /* nudge to optical center across browsers */
        accent-color: #60a5fa; /* nice blue tick on dark bg */
    }

    .ai-pill span {
        line-height: 1;
        white-space: nowrap; /* keep the label on one line */
        padding-top: 1px; /* tiny optical tweak */
    }
/* Backdrop + shell polish */
.ai-modal-backdrop {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(2,10,22,.55);
    backdrop-filter: blur(2px);
    z-index: 2000;
}

.ai-modal {
    width: min(960px,96vw);
    height: min(680px,90vh);
    display: grid;
    grid-template-rows: auto 1fr auto;
    border: 1px solid #1f2937;
    border-radius: 14px;
    background: linear-gradient(180deg,#0b1220 0%,#0c1322 100%);
    box-shadow: 0 30px 80px rgba(0,0,0,.45);
    overflow: hidden;
    color: #e8edf7;
}

/* Header as a 3-column grid: title | controls | close */
.ai-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #0d1530;
    border-bottom: 1px solid #1f2937;
}

/* Title with robot */
.ai-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .ai-title h4 {
        margin: 0;
        font-size: 14px;
        color: #dbe7ff;
        letter-spacing: .2px;
    }

    .ai-title .robot {
        font-size: 18px;
        line-height: 1;
        transform: translateY(1px);
    }

/* Controls row — consistent heights */
.ai-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.ai-select, .ai-btn {
    height: 32px;
}

.ai-select {
    background: #0b1220;
    color: #e5e7eb;
    border: 1px solid #263145;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 12.5px;
}

/* Checkbox pills: lowered by 2px for perfect optical alignment */
.ai-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #263145;
    border-radius: 999px;
    background: #0b1220;
    color: #c9d3ea;
    line-height: 1;
}

    .ai-pill input {
        width: 16px;
        height: 16px;
        margin: 0;
        accent-color: #60a5fa;
        transform: translateY(2px); /* ↓ a touch lower */
    }

    .ai-pill span {
        line-height: 1;
        white-space: nowrap;
        padding-top: 1px;
    }

/* Close button trimmed and aligned */
.ai-close {
    margin-left: 8px;
}

/* Body + foot */
.ai-body {
    padding: 10px 12px;
    overflow: auto;
    font: 13.5px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
    color: #e8edf7;
}

.ai-msg {
    margin: 6px 0 10px;
    white-space: pre-wrap;
    word-break: break-word;
}

    .ai-msg.user::before {
        content: "> ";
        color: #8ab4ff;
    }

    .ai-msg.assistant::before {
        content: "< ";
        color: #34d399;
    }

.ai-foot {
    padding: 10px;
    display: flex;
    gap: 8px;
    align-items: center;
    border-top: 1px solid #1f2937;
    background: #0d1530;
}

.ai-input {
    flex: 1;
    height: 40px;
    font-size: 13.5px;
    border: 1px solid #263145;
    border-radius: 10px;
    background: #0b1220;
    color: #e5e7eb;
    padding: 0 12px;
}

.ai-btn {
    border: 1px solid #334155;
    border-radius: 10px;
    background: #1f2937;
    color: #fff;
    padding: 0 12px;
    cursor: pointer;
}

    .ai-btn:hover {
        filter: brightness(1.08);
    }


/* The scrollable chat area */
.ai-body {
    position: relative; /* REQUIRED for ::before to anchor */
    min-height: 260px; /* so the hint has room to appear */
}

    /* Faint overlay hint when there are no messages */
    .ai-body.empty::before {
        content: "💡 Tip: Ask about this ecosystem or its repos.\A• “Summarize key trends and top languages.”\A• “Which repos are most active in the last year?”\A• “Compare repo A vs repo B (stars, activity, languages).”";
        white-space: pre-line;
        position: absolute;
        left: 12%;
        right: 12%;
        top: 18%;
        text-align: center;
        font-size: 13.5px;
        line-height: 1.6;
        color: #9fb2d7; /* subtle on your dark theme */
        opacity: .6;
        pointer-events: none; /* don’t block scrolling/clicks */
    }
#seco #collect-controls .bar .pill input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    transform: translateY(1px);
}

/* Collector actions: keep Start + checkbox on one line, right-aligned */
#collect-controls .collect-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-self: end; /* sits at the right edge of the grid row */
    white-space: nowrap;
}

    /* Match your compact controls height */
    #collect-controls .collect-actions .btn {
        height: var(--control-h, 34px);
        line-height: 1;
        padding: 0 var(--control-pad-x, 10px);
        border-radius: 10px;
    }

    /* Checkbox pill looks consistent with the rest */
    #collect-controls .collect-actions .toggle-pill {
        height: var(--control-h, 34px);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 0 10px;
    }

        #collect-controls .collect-actions .toggle-pill input {
            width: 16px;
            height: 16px;
            margin: 0;
            transform: translateY(1px);
            accent-color: #2e6bff; /* optional: on-brand tick */
        }

/* When space gets tight, allow the whole group to wrap cleanly */
@media (max-width: 700px) {
    #collect-controls .collect-actions {
        justify-self: start;
    }
}
/* ================= Collector — compact, elegant toolbar ================ */
#collect-controls .collect-toolbar {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  gap: 10px;
  align-items: center;
}

/* Fields */
#collect-controls .ct-field {
  display: grid;
  grid-template-rows: auto auto;
  gap: 6px;
  min-width: 0;
}

#collect-controls .ct-grow { min-width: 320px; }

#collect-controls .ct-field input,
#collect-controls .ct-field select {
  height: 36px;
  border: 1px solid var(--border, #e6e8ef);
  background: #fff;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 13px;
  color: var(--text, #0b1220);
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
#collect-controls .ct-field input:focus,
#collect-controls .ct-field select:focus {
  border-color: #cbd6ff;
  box-shadow: var(--ring, 0 0 0 3px rgba(46,107,255,.18));
}

/* Tiny label above selects/inputs (keeps layout stable) */
#collect-controls .ct-label {
  font-size: 11.5px;
  color: var(--muted, #6b7280);
  line-height: 1;
}

/* Search icon inside keyword */
#collect-controls .with-icon {
  position: relative;
  grid-template-rows: auto; /* labelless */
}
#collect-controls .with-icon input {
  padding-left: 36px;
}
#collect-controls .with-icon .ct-ic {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #90a4c6;
  pointer-events: none;
}

/* Token field gets a sensible min width but shrinks if needed */
#collect-controls .ct-token { min-width: 220px; }

/* Actions (switch + start) */
#collect-controls .ct-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}

/* Start button — compact, not full-width */
#collect-controls .ct-start {
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  line-height: 1;
}

/* Switch (Update existing) */
#collect-controls .ct-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  cursor: pointer;
}
#collect-controls .ct-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
#collect-controls .ct-switch-ui {
  width: 34px;
  height: 20px;
  background: #e5e7eb;
  border: 1px solid var(--border,#e6e8ef);
  border-radius: 999px;
  position: relative;
  transition: background .18s ease, border-color .18s ease;
}
#collect-controls .ct-switch-ui::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
  transition: transform .18s ease;
}
#collect-controls .ct-switch input:checked + .ct-switch-ui {
  background: #2e6bff22;
  border-color: #2e6bff;
}
#collect-controls .ct-switch input:checked + .ct-switch-ui::after {
  transform: translateX(14px);
}
#collect-controls .ct-switch-txt {
  font-size: 12.5px;
  color: var(--muted,#6b7280);
  white-space: nowrap;
}

/* Align with your compact controls baseline */
#collect-controls .collect-toolbar .btn,
#collect-controls .collect-toolbar input,
#collect-controls .collect-toolbar select {
  height: var(--control-h, 34px);
}

/* Responsive: on narrow screens, flow into two rows cleanly */
@media (max-width: 900px) {
  #collect-controls .collect-toolbar {
    grid-template-columns: 1fr auto auto;
    grid-auto-rows: auto;
  }
  #collect-controls .ct-token { grid-column: 2 / span 1; }
  #collect-controls .ct-actions { grid-column: 3 / span 1; justify-self: end; }
}
@media (max-width: 640px) {
  #collect-controls .collect-toolbar {
    grid-template-columns: 1fr 1fr;
  }
  #collect-controls .ct-grow { grid-column: 1 / -1; }
  #collect-controls .ct-actions { grid-column: 2; justify-self: end; }
}
/* ===== Collector header (clean grid) ===== */
#collect-controls .collect-bar {
    display: grid;
    gap: 10px;
    align-items: center;
    grid-template-columns: minmax(320px,1fr) auto auto minmax(260px,0.8fr) auto;
    grid-template-areas:
        "q sort order token actions";
}

/* map areas */
#collect-controls .cc-q {
    grid-area: q;
}

#collect-controls .cc-sort {
    grid-area: sort;
}

#collect-controls .cc-order {
    grid-area: order;
}

#collect-controls .cc-token {
    grid-area: token;
}

#collect-controls .cc-actions {
    grid-area: actions;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* inputs/selects/buttons unify */
#collect-controls .collect-bar input,
#collect-controls .collect-bar select,
#collect-controls .collect-bar button {
    height: 36px;
    border: 1px solid var(--border,#e6e8ef);
    background: #fff;
    color: var(--text,#0b1220);
    border-radius: 10px;
    padding: 0 12px;
    font-size: 13px;
    line-height: 1;
}

    #collect-controls .collect-bar input:focus,
    #collect-controls .collect-bar select:focus {
        outline: none;
        border-color: #cbd6ff;
        box-shadow: 0 0 0 3px rgba(46,107,255,.18);
    }

#collect-controls #go {
    padding: 0 14px;
}

/* pill switch */
#collect-controls .toggle-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    border: 1px solid var(--border,#e6e8ef);
    border-radius: 999px;
    padding: 0 10px;
    background: #fff;
    color: var(--muted,#6b7280);
    font-size: 12.5px;
    line-height: 1;
}

    #collect-controls .toggle-pill input {
        width: 16px;
        height: 16px;
        margin: 0;
        accent-color: #2563eb;
    }

/* meta row under the bar */
#collect-controls .collect-meta {
    padding: 10px 0 0;
    gap: 8px;
    flex-wrap: wrap;
}

/* responsive stacking */
@media (max-width: 980px) {
    #collect-controls .collect-bar {
        grid-template-columns: 1fr 1fr auto;
        grid-template-areas:
            "q q actions"
            "sort order token";
    }

    #collect-controls .cc-token {
        min-width: 220px;
    }
}

@media (max-width: 640px) {
    #collect-controls .collect-bar {
        grid-template-columns: 1fr;
        grid-template-areas:
            "q"
            "sort"
            "order"
            "token"
            "actions";
    }

    #collect-controls .cc-actions {
        justify-self: stretch;
        justify-content: space-between;
    }
}
/* Separator under tabs (matches Ecosystems look) */
.tab-sep {
    border: 0;
    border-top: 1px solid #e5e7eb;
    margin: 10px 0 16px;
}

/* Card shell */
.seco-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 14px rgba(0,0,0,.04);
}

.seco-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

    .seco-card-head h4 {
        margin: 0;
        font-weight: 600;
    }

.seco-card-body {
    padding-top: 4px;
}

/* Grid layout for inputs */
.ingest-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 2fr auto auto 1fr;
    gap: 10px;
    align-items: center;
}

.ingest-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

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

    .right-meta {
        display: none;
    }
    /* pills collapse on small screens */
}


/* --- Tabs separator under header (matches ecosystem page rhythm) --- */
.seco-header .seco-tabs-sep,
.seco-tabs-sep {
    border: 0;
    height: 1px;
    background: rgba(17, 24, 39, 0.08);
    margin: 12px 0 14px;
}

/* --- Card shell for Ingest & Enrich --- */
.seco-card {
    background: #fff;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(17, 24, 39, 0.04);
    padding: 14px 16px;
}

.seco-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

    .seco-card-head h4 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
    }

    .seco-card-head .right-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

/* Ensure pills have a consistent look beside ecosystem pills */
.seco-card .pill {
    background: #f3f4f6;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 13px;
    color: #111827;
}

/* --- Form grid (desktop first) --- */
.ingest-grid {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 0.6fr 1.2fr;
    grid-column-gap: 16px;
    grid-row-gap: 12px;
    align-items: end;
}

.field {
    display: grid;
    grid-template-rows: auto auto;
}

    .field .lab {
        font-size: 12px;
        color: #6b7280;
        margin-bottom: 6px;
    }

    .field .input {
        width: 100%;
        min-height: 36px;
        border: 1px solid rgba(17, 24, 39, 0.16);
        border-radius: 10px;
        padding: 8px 10px;
        font-size: 14px;
        background: #fff;
    }

    /* Widen “Search term” and guarantee visibility */
    .field.full {
        grid-column: 1 / -1;
    }

#q.input {
    min-width: 240px;
}

/* Small dedicated slots */
.field.sm {
    min-width: 160px;
}

.field.xs {
    min-width: 120px;
}

.field.full-sm {
    grid-column: 4 / 5;
}
/* token on right on wide screens */

/* Actions row spans full width and wraps neatly */
.actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.toggle-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(17, 24, 39, 0.12);
    padding: 6px 10px;
    border-radius: 999px;
    user-select: none;
}

    .toggle-pill input {
        transform: translateY(1px);
    }

/* Buttons consistent with dashboard pills */
.btn.btn-primary {
    border-radius: 10px;
    padding: 8px 12px;
}

/* --- Responsiveness --- */
/* Large tablets: collapse token to its own row if needed */
@media (max-width: 1100px) {
    .ingest-grid {
        grid-template-columns: 1fr 0.7fr 0.6fr 1fr;
    }
}

/* Tablets: two columns */
@media (max-width: 920px) {
    .ingest-grid {
        grid-template-columns: 1fr 1fr;
    }

    .field.full-sm {
        grid-column: 1 / -1;
    }
    /* token goes full width */
}

/* Phones: single column and stacked head meta */
@media (max-width: 640px) {
    .seco-card-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .ingest-grid {
        grid-template-columns: 1fr;
    }

    .field.full,
    .field.full-sm,
    .actions {
        grid-column: 1 / -1;
    }

    #q.input {
        min-width: 0;
    }
    /* never squeeze, but allow full width */
    .seco-card .pill {
        font-size: 12px;
        padding: 5px 9px;
    }
}

/* Ensure the card never collapses its inputs due to any ancestor flex quirks */
#collect-controls, #ingest-form, #ingest-form * {
    box-sizing: border-box;
}




/* ——— Factors table polish ——— */
#seco .eco-table-wrap {
    overflow: auto
}

#seco .eco-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 980px
}

    #seco .eco-table th, #seco .eco-table td {
        padding: 10px 12px;
        border-bottom: 1px solid #eef2f7;
        vertical-align: middle
    }

    #seco .eco-table thead th {
        position: sticky;
        top: 0;
        background: #fbfdff;
        z-index: 2;
        font-weight: 600;
        font-size: 13px;
        text-align: left;
        border-bottom: 1px solid #e5e9f2;
        white-space: nowrap
    }

    #seco .eco-table tbody tr:nth-child(odd) {
        background: #fafbff
    }

    #seco .eco-table tbody tr:hover {
        background: #f3f4ff
    }

#factors-table thead th:first-child,
#factors-table tbody td:first-child {
    position: sticky;
    left: 0;
    background: #fbfdff;
    z-index: 3
}

.num {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap
}

.cell {
    display: flex;
    align-items: center;
    gap: 10px
}

.val {
    min-width: 76px
}

.bar {
    position: relative;
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: #eef2f7;
    overflow: hidden
}

    .bar::after {
        content: "";
        position: absolute;
        inset: 0;
        width: calc(var(--p,0)*1%);
        background: #c7d2fe
    }

.dir {
    font-size: 12px;
    font-weight: 700
}

    .dir.up {
        color: #059669
    }
    /* ▲ better */
    .dir.down {
        color: #dc2626
    }
    /* ▼ worse  */
    .dir.mid {
        color: #6b7280
    }
/* → near mean */

.sortable {
    cursor: pointer;
    user-select: none
}

.sort-ind {
    margin-left: 6px;
    opacity: .7
}

.muted {
    color: #6b7280;
    font-size: 12px
}

.tag {
    display: inline-block;
    font-size: 12px;
    line-height: 1;
    padding: 6px 8px;
    margin: 2px 6px 2px 0;
    background: #f3f4f6;
    border-radius: 999px;
    white-space: nowrap
}