/* ============================================================
   tools_tech.css — 工具卡片「科技智能」视觉升级
   只做观感(玻璃质感 / 渐变光边 / 光晕跟随 / 悬浮抬升),
   不改动任何 HTML 结构与业务逻辑;禁用时删掉 tools.php 里的 link 即可。
   注意:卡片内的伪元素被既有 CSS 占用(永久会员的 ∞、锁定卡片的屏蔽规则),
   所以光晕层用真实元素 .tool-scan 承载,避免互相踩踏。
   ============================================================ */

:root {
    --tech-blue:  #1a7eff;
    --tech-cyan:  #22d3ee;
    --tech-deep:  #0d6efd;
    --tech-ink:   #0f2740;
}

/* ---------- 网格:稍微松一点,卡片才有呼吸感 ---------- */
.tools-grid {
    gap: 22px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* ---------- 卡片主体 ---------- */
.tool-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(26, 126, 255, .12);
    border-radius: 18px;
    padding: 16px 14px 14px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow:
        0 1px 2px rgba(16, 40, 80, .05),
        0 10px 22px -14px rgba(16, 40, 80, .22);
    transition:
        transform .38s cubic-bezier(.2, .7, .3, 1),
        box-shadow .38s ease,
        border-color .38s ease;
}

.tool-card:hover {
    transform: translateY(-6px);
    border-color: rgba(26, 126, 255, .38);
    box-shadow:
        0 2px 6px rgba(16, 40, 80, .06),
        0 20px 38px -18px rgba(26, 126, 255, .45);
}

/* 内容层要压在光晕之上,否则光晕会盖住文字。
   注意:这里只能用 z-index,不能加 position:relative。
   .tool-fav-btn 是 absolute,一旦 header 变成定位父级,星标就会从"卡片右上角"
   掉到"头部行右上角",正好压住序号 —— 所以让它们保持 static,
   靠 flex item 的 z-index 生效即可(卡片是 column flex,z-index 对 flex item 有效)。 */
.tool-header,
.tool-content,
.tool-footer {
    z-index: 1;
}

/* ---------- 光晕层:跟随鼠标的柔光 + 顶部一道科技光边 ---------- */
.tool-scan {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease;
    background: radial-gradient(
        260px circle at var(--mx, 50%) var(--my, 0%),
        rgba(34, 211, 238, .20),
        rgba(26, 126, 255, .09) 45%,
        transparent 70%
    );
}

.tool-card:hover .tool-scan { opacity: 1; }

.tool-scan::before {
    content: '';
    position: absolute;
    left: 14%;
    right: 14%;
    top: 0;
    height: 1.5px;
    border-radius: 2px;
    background: linear-gradient(90deg,
        transparent,
        rgba(26, 126, 255, .55),
        rgba(34, 211, 238, .95),
        transparent);
}

/* 触屏没有 hover,光晕会变成"点一下就一直亮",直接关掉 */
@media (hover: none) {
    .tool-scan { display: none; }
}

/* ---------- 图标:玻璃高光 + 悬浮微动 ---------- */
.tool-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    font-size: 1.15rem;
    box-shadow:
        0 8px 18px -8px rgba(26, 126, 255, .55),
        inset 0 1px 0 rgba(255, 255, 255, .45),
        inset 0 -1px 0 rgba(0, 0, 0, .06);
    transition: transform .38s cubic-bezier(.2, .7, .3, 1), box-shadow .38s ease;
}

/* 左上角斜向高光,让纯色渐变有"镜片"感 */
.tool-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 55%);
}

.tool-icon i {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .18));
}

.tool-card:hover .tool-icon {
    transform: translateY(-2px) scale(1.06);
    box-shadow:
        0 12px 22px -8px rgba(26, 126, 255, .65),
        inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* ---------- 序号:小胶囊 + 等宽数字 ---------- */
/* 原来的规则让每张卡片的序号都在"无限跳动",几十张卡一起动太吵,
   这里关掉常驻动画,只在悬浮时给一点抬升和同色光晕。 */
.tool-number {
    font-size: .72rem !important;
    font-weight: 800 !important;
    letter-spacing: .03em;
    opacity: 1 !important;
    animation: none !important;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .045);
    border: 1px solid rgba(15, 23, 42, .07);
    font-variant-numeric: tabular-nums;
    /* space-between 会把三个子项摊开(图标-序号-星标),序号会孤零零悬在中间;
       用 auto margin 把序号吸到星标旁边,整体靠右 */
    margin-left: auto;
    transition: transform .3s cubic-bezier(.2, .7, .3, 1),
                box-shadow .3s ease,
                background .3s ease;
}

/* 光晕用 currentColor:沿用卡片自己的主题色(葫芦娃七色循环) */
.tool-card:hover .tool-number {
    transform: translateY(-2px);
    background: #fff;
    box-shadow: 0 6px 14px -6px currentColor;
}

/* ---------- 收藏按钮 ---------- */
.tool-fav-btn {
    background: rgba(255, 255, 255, .75) !important;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(26, 126, 255, .18) !important;
    color: #94a3b8 !important;
    transition: all .25s ease;
}
.tool-fav-btn:hover {
    color: #f59e0b !important;
    border-color: rgba(245, 158, 11, .5) !important;
    background: #fff !important;
    transform: scale(1.1);
}
.tool-fav-btn.active {
    color: #f59e0b !important;
    background: rgba(245, 158, 11, .12) !important;
    border-color: rgba(245, 158, 11, .45) !important;
}

/* ---------- 标题:hover 时渐变字 ---------- */
.tool-title {
    font-size: .98rem;
    letter-spacing: .01em;
}
.tool-title-link:hover {
    background: linear-gradient(120deg, #1a7eff, #22d3ee);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* ---------- 徽章:统一胶囊 + 发光 ---------- */
.vip-badge,
.free-badge {
    border-radius: 999px !important;
    padding: 2px 7px !important;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff !important;
}
.vip-badge {
    background: linear-gradient(135deg, #f59e0b, #f97316) !important;
    box-shadow: 0 3px 8px -3px rgba(245, 158, 11, .8);
}
.free-badge {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    box-shadow: 0 3px 8px -3px rgba(34, 197, 94, .8);
}

/* ---------- 使用次数 / 热门标记 ---------- */
.tool-access-info { font-size: .7rem; }
.tool-access-number {
    font-variant-numeric: tabular-nums;
    color: var(--tech-ink);
}
.tool-hot-tag {
    background: linear-gradient(135deg, rgba(255, 59, 59, .14), rgba(245, 158, 11, .14)) !important;
    color: #ef4444 !important;
    border-radius: 999px !important;
    padding: 1px 6px !important;
}

/* ---------- 底部按钮 ---------- */
.tool-footer .btn,
.tool-footer-split .btn {
    border-radius: 12px !important;
    background: linear-gradient(135deg, #1a7eff, #22d3ee) !important;
    box-shadow: 0 6px 16px -8px rgba(26, 126, 255, .9);
}
.tool-footer .btn:hover {
    background: linear-gradient(135deg, #0d6efd, #06b6d4) !important;
    box-shadow: 0 12px 22px -10px rgba(26, 126, 255, .95);
}
/* 锁定态:低调灰 → hover 点亮成"开通VIP"的暖色引导 */
.tool-footer .vip-locked-btn {
    border-radius: 12px !important;
    border: 1px solid rgba(15, 23, 42, .12) !important;
    background: linear-gradient(135deg, #f8fafc, #eef2f7) !important;
    color: #475569 !important;
}
.tool-footer .vip-locked-btn:hover {
    background: linear-gradient(135deg, #f59e0b, #f97316) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 12px 22px -12px rgba(245, 158, 11, .95);
}
.tool-footer-split .tool-detail-btn {
    border-radius: 12px !important;
    border: 1px solid rgba(26, 126, 255, .35) !important;
    color: var(--tech-blue) !important;
}
.tool-footer-split .tool-detail-btn:hover {
    background: linear-gradient(135deg, rgba(26, 126, 255, .08), rgba(34, 211, 238, .14)) !important;
    border-color: var(--tech-blue) !important;
    color: var(--tech-deep) !important;
}

/* ---------- 锁定的工具:退到灰阶,hover 时给一点"解锁"的暖意 ---------- */
.tool-card.vip-locked {
    background: linear-gradient(180deg, #f8fafc, #f1f5f9) !important;
    border: 1px dashed rgba(15, 23, 42, .14) !important;
}
.tool-card.vip-locked:hover {
    border-color: rgba(245, 158, 11, .45) !important;
    box-shadow: 0 20px 34px -20px rgba(245, 158, 11, .55);
}
.tool-card.vip-locked .tool-icon {
    filter: grayscale(.55);
    box-shadow: none;
    opacity: .85;
}
.tool-card.vip-locked .tool-scan { display: none; }

/* ---------- 会员卡片的身份感 ---------- */
.tool-card.vip-tool-card {
    border-color: rgba(245, 158, 11, .3);
}
.tool-card.permanent-vip-tool-card {
    border-color: rgba(255, 199, 0, .5);
    box-shadow: 0 12px 26px -16px rgba(255, 180, 0, .75);
}

/* ---------- 移动端:收一点,避免拥挤 ---------- */
@media (max-width: 768px) {
    .tools-grid { gap: 12px; }
    .tool-card { padding: 14px 12px 12px; border-radius: 16px; }
    .tool-icon { width: 40px; height: 40px; border-radius: 12px; }
    .tool-card:hover { transform: none; }
}