/* ==========================================================================
   十七免费个人源 · 玻璃拟态设计层（Apple / iOS 风）
   加载顺序：必须放在 home.css 之后
   ========================================================================== */

:root {
    --g-bg: #080a0f;
    --g-ink: #f5f7fb;
    --g-ink-2: rgba(245, 247, 251, .72);
    --g-ink-3: rgba(245, 247, 251, .45);
    --g-hair: rgba(255, 255, 255, .12);
    --g-hair-strong: rgba(255, 255, 255, .22);
    --g-fill: rgba(255, 255, 255, .055);
    --g-fill-hover: rgba(255, 255, 255, .095);
    --g-accent: #5b8cff;
    --g-accent-2: #a06bff;
    --g-ok: #34d399;
    --g-warn: #fbbf24;
    --g-danger: #f87171;
    --g-r-lg: 26px;
    --g-r-md: 20px;
    --g-r-sm: 14px;
    --g-blur: saturate(180%) blur(26px);
    --g-shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 12px 32px -8px rgba(0, 0, 0, .5);
    --g-shadow-lg: 0 2px 6px rgba(0, 0, 0, .3), 0 30px 70px -20px rgba(0, 0, 0, .65);
    --g-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 基础 ---------- */
html { -webkit-text-size-adjust: 100%; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                 "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
    background: var(--g-bg);
    color: var(--g-ink);
    letter-spacing: -.011em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    overflow-x: hidden;
}

/* 背景光斑：三团高斯模糊色块，缓慢漂移 */
body::before,
body::after {
    content: "";
    position: fixed;
    z-index: 0;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .55;
    pointer-events: none;
    will-change: transform;
}
body::before {
    width: 46vw; height: 46vw;
    top: -12vw; left: -10vw;
    background: radial-gradient(circle at 30% 30%, #2b4bff 0%, rgba(43, 75, 255, 0) 70%);
    animation: g-float-a 26s var(--g-ease) infinite alternate;
}
body::after {
    width: 52vw; height: 52vw;
    right: -14vw; top: 22vh;
    background: radial-gradient(circle at 60% 40%, #8b3dff 0%, rgba(139, 61, 255, 0) 70%);
    animation: g-float-b 32s var(--g-ease) infinite alternate;
}
@keyframes g-float-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(6vw, 8vh, 0) scale(1.15); }
}
@keyframes g-float-b {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-8vw, -6vh, 0) scale(1.12); }
}

.wrap, .topbar, main, footer { position: relative; z-index: 1; }

/* ---------- 顶栏：磨砂玻璃 + 滚动收缩 ---------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(10, 12, 18, .55);
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    border-bottom: 1px solid var(--g-hair);
    transition: background .35s var(--g-ease), box-shadow .35s var(--g-ease), padding .35s var(--g-ease);
}
.topbar.is-scrolled {
    background: rgba(8, 10, 15, .78);
    box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .9);
    border-bottom-color: var(--g-hair-strong);
}
.topbar-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}

/* ---------- 通用玻璃卡 ---------- */
.tool,
.stat-pill,
.sheet,
.card,
.app-card,
.tools-grid > * {
    background: var(--g-fill);
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    border: 1px solid var(--g-hair);
    border-radius: var(--g-r-lg);
    box-shadow: var(--g-shadow);
    transition: transform .38s var(--g-ease),
                background .3s var(--g-ease),
                border-color .3s var(--g-ease),
                box-shadow .38s var(--g-ease);
}

/* 卡片顶部高光，模拟玻璃反光 */
.tool::before,
.card::before,
.app-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    border-radius: var(--g-r-lg) var(--g-r-lg) 0 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
    opacity: .6;
    pointer-events: none;
}

.tool,
.card,
.app-card { position: relative; overflow: hidden; }

.tool:hover,
.card:hover,
.app-card:hover {
    transform: translateY(-3px);
    background: var(--g-fill-hover);
    border-color: var(--g-hair-strong);
    box-shadow: var(--g-shadow-lg);
}

/* ---------- 统计块 ---------- */
.stat-pill {
    padding: 16px 20px;
    border-radius: var(--g-r-md);
    text-align: center;
}
.stat-pill .n {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.02em;
    background: linear-gradient(135deg, #fff, #9ab4ff 70%, #c9a6ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.stat-pill .s {
    margin-top: 4px;
    font-size: 12px;
    color: var(--g-ink-3);
    letter-spacing: .04em;
}

/* ---------- 按钮：胶囊 + 弹簧 ---------- */
.btn-lg,
.add-btn,
button,
.btn {
    border-radius: 999px;
    border: 1px solid var(--g-hair);
    background: var(--g-fill);
    color: var(--g-ink);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    transition: transform .2s var(--g-ease), background .25s var(--g-ease),
                border-color .25s var(--g-ease), box-shadow .25s var(--g-ease);
}
.btn-lg:hover,
.add-btn:hover,
button:hover,
.btn:hover {
    background: var(--g-fill-hover);
    border-color: var(--g-hair-strong);
    transform: translateY(-1px);
}
.btn-lg:active,
.add-btn:active,
button:active,
.btn:active { transform: scale(.97); }

.btn-lg.ghost {
    background: rgba(255, 255, 255, .04);
    border-color: var(--g-hair);
}
.btn-lg.ghost:hover { background: rgba(255, 255, 255, .1); }

/* 主按钮：渐变填充 */
.btn-primary,
a.btn-primary {
    background: linear-gradient(135deg, var(--g-accent), var(--g-accent-2));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 24px -10px rgba(91, 140, 255, .8);
}
.btn-primary:hover {
    box-shadow: 0 12px 30px -10px rgba(91, 140, 255, .95);
}

/* ---------- 输入框 ---------- */
input[type="text"],
input[type="search"],
input[type="url"],
input[type="number"],
textarea,
select {
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--g-hair);
    border-radius: var(--g-r-sm);
    color: var(--g-ink);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: border-color .25s var(--g-ease), box-shadow .25s var(--g-ease), background .25s var(--g-ease);
}
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: rgba(91, 140, 255, .7);
    box-shadow: 0 0 0 4px rgba(91, 140, 255, .18);
    background: rgba(255, 255, 255, .09);
}

/* ---------- 标签 ---------- */
.tag {
    border-radius: 999px;
    border: 1px solid var(--g-hair);
    background: rgba(255, 255, 255, .06);
    color: var(--g-ink-2);
    padding: 3px 10px;
    font-size: 12px;
}
.tag.ok   { border-color: rgba(52, 211, 153, .45); color: #6ee7b7; background: rgba(52, 211, 153, .12); }
.tag.warn { border-color: rgba(251, 191, 36, .45); color: #fcd34d; background: rgba(251, 191, 36, .12); }
.tag.bad  { border-color: rgba(248, 113, 113, .45); color: #fca5a5; background: rgba(248, 113, 113, .12); }

/* ---------- 底部弹层（sheet）：iOS 底部卡片 ---------- */
.sheet-mask {
    background: rgba(4, 6, 10, .55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.sheet {
    border-radius: 28px 28px 0 0;
    border-bottom: none;
    background: rgba(18, 21, 30, .82);
    box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .9);
}
.sheet-handle {
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .28);
    margin: 10px auto 6px;
}
.sheet-actions button { border-radius: 999px; }

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .16);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .28); background-clip: content-box; }

/* ---------- 回到顶部 ---------- */
.to-top {
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--g-hair);
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    box-shadow: var(--g-shadow);
}
.to-top:hover { background: rgba(255, 255, 255, .16); }

/* ---------- 空状态 ---------- */
.empty {
    border: 1px dashed var(--g-hair);
    border-radius: var(--g-r-lg);
    background: rgba(255, 255, 255, .03);
    color: var(--g-ink-3);
}

/* ---------- 入场动画 ---------- */
@keyframes g-rise {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
.tools-grid > *,
.card,
.app-card,
.stat-pill {
    animation: g-rise .6s var(--g-ease) both;
}
.tools-grid > *:nth-child(2) { animation-delay: .05s; }
.tools-grid > *:nth-child(3) { animation-delay: .1s; }
.tools-grid > *:nth-child(4) { animation-delay: .15s; }
.stat-pill:nth-child(2) { animation-delay: .06s; }
.stat-pill:nth-child(3) { animation-delay: .12s; }
.stat-pill:nth-child(4) { animation-delay: .18s; }

/* ---------- 移动端 ---------- */
@media (max-width: 640px) {
    .topbar-inner { padding: 12px 16px; }
    .tool, .card, .app-card { border-radius: 22px; }
    body::before, body::after { filter: blur(70px); opacity: .45; }
}

/* ---------- 无障碍：减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
    body::before, body::after { animation: none; }
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- 兜底：不支持 backdrop-filter 时给实色 ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .topbar, .tool, .card, .app-card, .stat-pill, .sheet, .to-top {
        background: rgba(20, 23, 32, .94);
    }
}