/* ── Theme Update Notes – Frontend Panel ── */
.tun-panel {
    --tun-radius:   8px;
    --tun-radius-lg:12px;
    --tun-border:   1px solid rgba(0,0,0,.2);
    --tun-bg:       #ffffff;
    --tun-bg-muted: #f6f7f8;
    --tun-text:     #111111;
    --tun-muted:    #6b7280;
    --tun-hint:     #9ca3af;

    /* label colours */
    --c-new-bg:      #e6f1fb; --c-new-fg:      #0c447c;
    --c-edit-bg:     #eeedfe; --c-edit-fg:     #3c3489;
    --c-seo-bg:      #e1f5ee; --c-seo-fg:      #085041;
    --c-speed-bg:    #eaf3de; --c-speed-fg:    #27500a;
    --c-bug-bg:      #faeeda; --c-bug-fg:      #633806;
    --c-critical-bg: #fcebeb; --c-critical-fg: #791f1f;

    --c-latest-bg:   #eaf3de; --c-latest-fg:   #27500a;
    --c-upcoming-bg: #faeeda; --c-upcoming-fg: #633806;

    font-family: inherit;
    color: var(--tun-text);
    margin: 1.5rem 0;
}

/* Dark mode */
.tun-panel[data-theme="dark"] {
    --tun-border:   1px solid rgba(255,255,255,.12);
    --tun-bg:       #1e1f21;
    --tun-bg-muted: #28292c;
    --tun-text:     #f0f0f0;
    --tun-muted:    #9ca3af;
    --tun-hint:     #6b7280;

    --c-new-bg:      #0c447c; --c-new-fg:      #b5d4f4;
    --c-edit-bg:     #3c3489; --c-edit-fg:     #cecbf6;
    --c-seo-bg:      #085041; --c-seo-fg:      #9fe1cb;
    --c-speed-bg:    #27500a; --c-speed-fg:    #c0dd97;
    --c-bug-bg:      #633806; --c-bug-fg:      #fac775;
    --c-critical-bg: #791f1f; --c-critical-fg: #f7c1c1;

    --c-latest-bg:   #27500a; --c-latest-fg:   #c0dd97;
    --c-upcoming-bg: #633806; --c-upcoming-fg: #fac775;
}

@media (prefers-color-scheme: dark) {
    .tun-panel[data-theme="auto"] {
        --tun-border:   1px solid rgba(255,255,255,.12);
        --tun-bg:       #1e1f21;
        --tun-bg-muted: #28292c;
        --tun-text:     #f0f0f0;
        --tun-muted:    #9ca3af;
        --tun-hint:     #6b7280;
        --c-new-bg:      #0c447c; --c-new-fg:      #b5d4f4;
        --c-edit-bg:     #3c3489; --c-edit-fg:     #cecbf6;
        --c-seo-bg:      #085041; --c-seo-fg:      #9fe1cb;
        --c-speed-bg:    #27500a; --c-speed-fg:    #c0dd97;
        --c-bug-bg:      #633806; --c-bug-fg:      #fac775;
        --c-critical-bg: #791f1f; --c-critical-fg: #f7c1c1;
        --c-latest-bg:   #27500a; --c-latest-fg:   #c0dd97;
        --c-upcoming-bg: #633806; --c-upcoming-fg: #fac775;
    }
}

/* ── Header ── */
.tun-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 1rem;
}
.tun-panel-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--tun-text);
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tun-theme-label {
    font-size: .75rem;
    font-weight: 500;
    background: var(--tun-bg-muted);
    border: var(--tun-border);
    border-radius: 99px;
    padding: 2px 10px;
    color: var(--tun-muted);
}

/* ── Filters ── */
.tun-filters { display: flex; flex-wrap: wrap; gap: 5px; }
.tun-filter {
    background: transparent;
    border: 1px solid var(--tun-hint);
    border-radius: var(--tun-radius);
    color: var(--tun-muted);
    cursor: pointer;
    font-size: .78rem;
    padding: 3px 10px;
    transition: all .15s;
    font-family: inherit;
}
.tun-filter:hover  { border-color: var(--tun-muted); color: var(--tun-text); }
.tun-filter.active {
    background: var(--tun-bg-muted);
    border-color: var(--tun-muted);
    color: var(--tun-text);
    font-weight: 600;
}

/* ── Search ── */
.tun-search {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 1rem;
    padding: 7px 12px;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: var(--tun-radius);
    background: var(--tun-bg-muted);
    color: var(--tun-text);
    font-size: .9rem;
    font-family: inherit;
}
.tun-search:focus { outline: 2px solid var(--c-new-fg); outline-offset: 1px; }

/* ── Version card ── */
.tun-version {
    background: var(--tun-bg);
    border: var(--tun-border);
    border-radius: var(--tun-radius-lg);
    margin-bottom: .75rem;
    overflow: hidden;
}
.tun-version.tun-upcoming {
    border-style: dashed;
    opacity: .92;
}
.tun-version-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
    cursor: pointer;
    user-select: none;
    transition: background .15s;
}
.tun-version-header:hover { background: var(--tun-bg-muted); }

.tun-chevron {
    width: 14px; height: 14px;
    color: var(--tun-hint);
    flex-shrink: 0;
    transition: transform .2s;
}
.tun-version[data-version="open"] .tun-chevron { transform: rotate(90deg); }

.tun-ver-num { font-size: .95rem; font-weight: 600; color: var(--tun-text); }

.tun-badge-latest {
    font-size: .68rem; font-weight: 600;
    padding: 2px 8px; border-radius: var(--tun-radius);
    background: var(--c-latest-bg); color: var(--c-latest-fg);
}
.tun-badge-upcoming {
    font-size: .68rem; font-weight: 600;
    padding: 2px 8px; border-radius: var(--tun-radius);
    background: var(--c-upcoming-bg); color: var(--c-upcoming-fg);
}

.tun-summary { display: none; gap: 5px; flex-wrap: wrap; }
.tun-version[data-version="open"] .tun-summary { display: none; }

.tun-count {
    font-size: .68rem; font-weight: 500;
    padding: 2px 8px; border-radius: var(--tun-radius);
}

.tun-date { font-size: .78rem; color: var(--tun-hint); margin-left: auto; }

/* ── Items ── */
.tun-items {
    display: none;
    border-top: var(--tun-border);
    padding: 10px 14px;
    flex-direction: column;
    gap: 8px;
}
.tun-version[data-version="open"] .tun-items { display: flex; }

.tun-item { display: flex; align-items: flex-start; gap: 8px; }
.tun-item.tun-hidden { display: none; }

.tun-badge {
    flex-shrink: 0;
    font-size: .68rem; font-weight: 600;
    padding: 2px 8px; border-radius: var(--tun-radius);
    margin-top: 2px; white-space: nowrap;
}
.tun-item-text { font-size: .88rem; color: var(--tun-muted); line-height: 1.55; }
.tun-item-text strong { color: var(--tun-text); font-weight: 600; }

/* ── Label colours ── */
.tun-type-new      { background: var(--c-new-bg);      color: var(--c-new-fg); }
.tun-type-edit     { background: var(--c-edit-bg);     color: var(--c-edit-fg); }
.tun-type-seo      { background: var(--c-seo-bg);      color: var(--c-seo-fg); }
.tun-type-speed    { background: var(--c-speed-bg);    color: var(--c-speed-fg); }
.tun-type-bug      { background: var(--c-bug-bg);      color: var(--c-bug-fg); }
.tun-type-critical { background: var(--c-critical-bg); color: var(--c-critical-fg); }

/* ── Empty / hidden ── */
.tun-empty { text-align: center; color: var(--tun-hint); padding: 2rem 0; font-size: .9rem; }
.tun-version.tun-hidden { display: none; }