/**
 * 捷图热榜 · 自研版式（jttu-hot.css）
 * ---------------------------------------------------------------
 * 目的：把热榜卡片从一为热榜的默认外观，改造成捷图导航自有设计语言，
 *       形成明显差异，避免界面层面的雷同与侵权风险。
 * 约定：只作用于 .hotapi-card / .hotapi-tab-card，不影响其它模块。
 * 结构：列表项、工具条由 jttu-hot.js 生成，样式全部在本文件。
 * 回退：注销本文件的 enqueue 即恢复父主题默认外观。
 */

/* ============ 0. 变量（与全站主色一致，缺省值兜底） ============ */
.hotapi-card,
.hotapi-tab-card {
    --jt-c: var(--z-theme, #6a5cff);
    --jt-c-soft: var(--z-theme-soft, rgba(106, 92, 255, .10));
    --jt-hot: var(--theme-color, #f1404b);
    --jt-txt: #33353d;
    --jt-sub: #9aa0aa;
    --jt-line: rgba(0, 0, 0, .06);
    --jt-hover-bg: var(--jt-c-soft);
    --jt-rank-bg: #f1f2f6;
}

/* ============ 1. 卡片容器：圆角 + 悬停上浮 ============ */
.card.hotapi-card {
    border-radius: 14px;
    border: 1px solid var(--jt-line);
    transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease;
    overflow: hidden;
}

.card.hotapi-card:hover {
    border-color: rgba(106, 92, 255, .28);
    box-shadow: 0 8px 22px rgba(106, 92, 255, .13);
}

/* 卡片头：图标圆角方块 + 副题胶囊 */
.card.hotapi-card > .card-header {
    padding: 10px 12px 8px;
}

.card.hotapi-card > .card-header .hotapi-ico {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    object-fit: cover;
    margin-right: 6px;
}

.card.hotapi-card > .card-header .title-name {
    font-weight: 600;
    color: var(--jt-txt);
    letter-spacing: .2px;
}

.card.hotapi-card > .card-header .slug-name {
    background: var(--jt-c-soft);
    color: var(--jt-c);
    border-radius: 999px;
    padding: 1px 9px;
    font-size: 11px;
    line-height: 18px;
}

/* ============ 2. 列表：自研条目 ============ */
.hotapi-list.jt-list {
    list-style: none;
    margin: 0;
    padding: 2px 4px 4px;
}

.jt-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 9px;
    animation: jtIn .3s ease both;
    animation-delay: var(--d, 0ms);
    transition: background .18s ease;
}

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

/* 排名徽章：前三名渐变，其余浅底（与官方纯色块明显区分） */
.jt-rank {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    font-style: normal;
    color: #868b96;
    background: var(--jt-rank-bg);
    transition: transform .18s ease;
}

.jt-item:hover .jt-rank {
    transform: scale(1.06);
}

.jt-rank.t1 {
    background: linear-gradient(135deg, #ff7a7a, #f1404b);
    color: #fff;
    box-shadow: 0 2px 6px rgba(241, 64, 75, .28);
}

.jt-rank.t2 {
    background: linear-gradient(135deg, #ffc06b, #ff8c2b);
    color: #fff;
}

.jt-rank.t3 {
    background: linear-gradient(135deg, #a78bfa, #6a5cff);
    color: #fff;
}

.jt-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13.5px;
    line-height: 20px;
    color: var(--jt-txt);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jt-item:hover .jt-title {
    color: var(--jt-c);
}

/* 热度条：按榜首归一化（官方只有热度数字） */
.jt-bar {
    flex: 0 0 38px;
    width: 38px;
    height: 4px;
    border-radius: 3px;
    background: rgba(0, 0, 0, .07);
    overflow: hidden;
    display: none;
}

.jt-item.has-heat .jt-bar {
    display: block;
}

.jt-bar > b {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #6a5cff, #f1404b);
    opacity: .85;
}

.jt-heat {
    flex: 0 0 auto;
    max-width: 74px;
    font-size: 11.5px;
    color: var(--jt-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 隐藏父主题自带的底部数据行（其刷新按钮与自研工具条重复） */
.hotapi-card > .card-body > .d-flex.mt-auto.text-xs {
    display: none !important;
}

/* 窄卡片（首页右栏）：隐藏热度条，保留热度数值 */
.jt-narrow .jt-bar {
    display: none !important;
}

/* ============ 3. 工具条：更新时间 / 展开 / 复制 / 刷新 ============ */
.jt-tools {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 4px 6px 2px;
    padding: 6px 4px 2px;
    border-top: 1px dashed var(--jt-line);
    flex-wrap: nowrap;
    overflow: hidden;
}

.jt-time {
    margin-right: auto;
    font-size: 11px;
    color: var(--jt-sub);
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jt-btn {
    white-space: nowrap;
}

/* 窄卡片（首页右栏）：工具条整体收紧，避免折行 */
.jt-tools.jt-compact {
    gap: 1px;
    margin-left: 4px;
    margin-right: 4px;
}

.jt-tools.jt-compact .jt-btn {
    font-size: 11px;
    padding: 2px 5px;
}

.jt-tools.jt-compact .jt-time {
    font-size: 10.5px;
}

.jt-btn {
    font-size: 11.5px;
    line-height: 18px;
    color: var(--jt-sub);
    background: transparent;
    border: 0;
    padding: 2px 7px;
    border-radius: 6px;
    cursor: pointer;
    transition: color .18s ease, background .18s ease;
}

.jt-btn:hover {
    color: var(--jt-c);
    background: var(--jt-c-soft);
}

.jt-btn.jt-refresh {
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.jt-btn.jt-refresh svg {
    width: 13px;
    height: 13px;
    display: block;
}

.jt-btn.jt-refresh.spin svg {
    animation: jtSpin .8s linear infinite;
}

/* ============ 4. 加载骨架屏 ============ */
.jt-skel {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
}

.jt-skel i {
    flex: 0 0 22px;
    height: 22px;
    border-radius: 7px;
}

.jt-skel span {
    height: 12px;
    border-radius: 6px;
    flex: 1 1 auto;
}

.jt-skel i,
.jt-skel span {
    background: linear-gradient(90deg, #f0f1f5 25%, #e5e7ee 37%, #f0f1f5 63%);
    background-size: 400% 100%;
    animation: jtShimmer 1.3s ease infinite;
}

/* ============ 5. 首页 tab：胶囊药丸 ============ */
.hotapi-tab-card .hotapi-tab-btn {
    padding: 3px 11px;
    margin-right: 5px;
    border-radius: 999px;
    transition: background .2s ease, color .2s ease;
    cursor: pointer;
}

.hotapi-tab-card .hotapi-tab-btn:hover {
    background: var(--jt-c-soft);
}

.hotapi-tab-card .hotapi-tab-btn.active {
    background: var(--jt-c);
    box-shadow: 0 3px 10px rgba(106, 92, 255, .25);
}

.hotapi-tab-card .hotapi-tab-btn.active .title-name {
    color: #fff;
    font-weight: 600;
}

.hotapi-tab-card .hotapi-tab-btn .hotapi-ico {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    object-fit: cover;
    margin-right: 4px;
}

/* ============ 6. 复制成功提示 ============ */
.jt-toast {
    position: fixed;
    left: 50%;
    bottom: 42px;
    transform: translateX(-50%) translateY(8px);
    background: rgba(28, 30, 38, .92);
    color: #fff;
    font-size: 13px;
    padding: 8px 16px;
    border-radius: 999px;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
}

.jt-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============ 7. 动画 ============ */
@keyframes jtIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: none; }
}

@keyframes jtShimmer {
    from { background-position: 100% 0; }
    to   { background-position: 0 0; }
}

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

/* ============ 8. 夜间模式适配 ============
   本站夜间由父主题切到 <html class="io-black-mode">（实测确认） */
html.io-black-mode .hotapi-card,
html.io-black-mode .hotapi-tab-card {
    --jt-txt: #d7dae2;
    --jt-sub: #858b98;
    --jt-line: rgba(255, 255, 255, .10);
    --jt-rank-bg: #2b2e37;
    --jt-c-soft: rgba(106, 92, 255, .18);
}

html.io-black-mode .card.hotapi-card:hover {
    box-shadow: 0 8px 22px rgba(0, 0, 0, .38);
}

html.io-black-mode .jt-skel i,
html.io-black-mode .jt-skel span {
    background: linear-gradient(90deg, #2b2e37 25%, #353945 37%, #2b2e37 63%);
    background-size: 400% 100%;
}

html.io-black-mode .jt-bar {
    background: rgba(255, 255, 255, .12);
}

/* ============ 9. 小屏收敛 ============ */
@media (max-width: 575.98px) {
    .jt-bar { flex-basis: 28px; width: 28px; }
    .jt-heat { max-width: 58px; }
    .jt-tools { gap: 2px; }
}