/* ============================================================
   狂狮个人主页 - 统一样式 ks.css
   风格：2026 液态玻璃 苹果风 (Liquid Glass / Apple Style)
   全站所有页面统一引用本文件
   ============================================================ */

/* ---------- CSS 变量 ---------- */
:root {
    --ks-primary: #0A84FF;
    --ks-primary-2: #5E5CE6;
    --ks-primary-3: #BF5AF2;
    --ks-success: #30D158;
    --ks-warning: #FF9F0A;
    --ks-danger: #FF453A;
    --ks-text: #1C1C1E;
    --ks-text-2: #3A3A3C;
    --ks-text-muted: #8E8E93;
    --ks-glass: rgba(255, 255, 255, 0.55);
    --ks-glass-strong: rgba(255, 255, 255, 0.72);
    --ks-glass-weak: rgba(255, 255, 255, 0.35);
    --ks-glass-border: rgba(255, 255, 255, 0.45);
    --ks-glass-border-strong: rgba(255, 255, 255, 0.65);
    --ks-shadow: 0 8px 32px rgba(31, 38, 135, 0.12);
    --ks-shadow-lg: 0 16px 48px rgba(31, 38, 135, 0.18);
    --ks-radius: 24px;
    --ks-radius-sm: 14px;
    --ks-radius-xs: 10px;
    --ks-blur: 28px;
    --ks-nav-h: 64px;
    --ks-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
        "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --ks-mono: "SF Mono", "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace;
}

/* ---------- 浏览器兼容性降级 ---------- */
/* 不支持 backdrop-filter 的旧浏览器：毛玻璃失效时回退为更不透明的背景，保证可读性 */
@supports not (backdrop-filter: blur(1px)) {
    .ks-nav,
    .ks-card,
    .ks-modal,
    .ks-widget {
        background: rgba(255, 255, 255, 0.92) !important;
    }
    body.ks-dark .ks-nav,
    body.ks-dark .ks-card,
    body.ks-dark .ks-modal,
    body.ks-dark .ks-widget {
        background: rgba(30, 30, 32, 0.92) !important;
    }
}
/* 不支持 CSS aspect-ratio 的旧浏览器：用 padding-top hack 保证封面区有高度 */
@supports not (aspect-ratio: 16 / 10) {
    .ks-project-cover,
    .ks-site-screenshot {
        height: 0;
        padding-top: 62.5%;
    }
}

/* ---------- 基础重置 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--ks-font);
    color: var(--ks-text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    background: #eef2f9;
    overflow-x: hidden;
}

/* 液态玻璃流动背景 */
.ks-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    background: linear-gradient(135deg, #e8ecf7 0%, #f3ecfa 45%, #e9f3fb 100%);
    overflow: hidden;
}
.ks-bg::before,
.ks-bg::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.55;
}
.ks-bg::before {
    width: 55vw; height: 55vw;
    left: -15vw; top: -20vw;
    background: radial-gradient(circle at 30% 30%, #7aa5ff 0%, rgba(122, 165, 255, 0) 70%);
    animation: ksFloat1 22s ease-in-out infinite alternate;
}
.ks-bg::after {
    width: 50vw; height: 50vw;
    right: -12vw; bottom: -18vw;
    background: radial-gradient(circle at 60% 60%, #d9a7ff 0%, rgba(217, 167, 255, 0) 70%);
    animation: ksFloat2 26s ease-in-out infinite alternate;
}
.ks-bg .ks-bg-blob {
    position: absolute;
    width: 34vw; height: 34vw;
    left: 38vw; top: 30vh;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.4;
    background: radial-gradient(circle at 40% 40%, #9be0ff 0%, rgba(155, 224, 255, 0) 70%);
    animation: ksFloat3 30s ease-in-out infinite alternate;
}
@keyframes ksFloat1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(6vw, 5vh) scale(1.12); } }
@keyframes ksFloat2 { from { transform: translate(0, 0) scale(1.08); } to { transform: translate(-6vw, -4vh) scale(1); } }
@keyframes ksFloat3 { from { transform: translate(0, 0); } to { transform: translate(-5vw, 6vh); } }

a { color: var(--ks-primary); text-decoration: none; transition: opacity .2s; }
a:hover { opacity: .8; }

img { max-width: 100%; display: block; }

::selection { background: rgba(10, 132, 255, .25); }

/* ---------- 滚动条美化 ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(120, 120, 128, .35);
    border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(120, 120, 128, .55); }

/* ---------- 玻璃卡片 ---------- */
.ks-card {
    background: var(--ks-glass);
    -webkit-backdrop-filter: blur(var(--ks-blur)) saturate(180%);
    backdrop-filter: blur(var(--ks-blur)) saturate(180%);
    border: 1px solid var(--ks-glass-border);
    border-radius: var(--ks-radius);
    box-shadow: var(--ks-shadow);
    padding: 28px;
}

.ks-card-strong {
    background: var(--ks-glass-strong);
    -webkit-backdrop-filter: blur(var(--ks-blur)) saturate(180%);
    backdrop-filter: blur(var(--ks-blur)) saturate(180%);
    border: 1px solid var(--ks-glass-border-strong);
    border-radius: var(--ks-radius);
    box-shadow: var(--ks-shadow);
    padding: 28px;
}

.ks-card-hover { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.ks-card-hover:hover {
    transform: translateY(-6px);
    box-shadow: var(--ks-shadow-lg);
}

/* 卡片顶部标题 */
.ks-card-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.02em;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}
.ks-card-title .ks-tint {
    width: 34px; height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #fff;
    background: linear-gradient(135deg, var(--ks-primary), var(--ks-primary-2));
    box-shadow: 0 4px 14px rgba(10, 132, 255, .35);
    flex: none;
}
.ks-card-sub { font-size: 13px; color: var(--ks-text-muted); margin-top: 2px; }

/* ---------- 顶部导航 ---------- */
/* 无 href 的导航 a 标签：保持指针光标 + 无下划线 */
.ks-nav-brand, .ks-nav-links a, .ks-bottom-nav-item {
    cursor: pointer;
    text-decoration: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
.ks-nav {
    position: -webkit-sticky;
    position: sticky;
    top: 16px;
    z-index: 100;
    margin: 16px auto 0;
    max-width: 1080px;
    width: calc(100% - 32px);
    height: var(--ks-nav-h);
    border-radius: 999px;
    /* 95% 透明液态玻璃：极淡背景 + 强模糊 + 厚边框 + 多层光影 */
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .03) 50%, rgba(255, 255, 255, .05) 100%),
        linear-gradient(135deg, rgba(10, 132, 255, .04), rgba(191, 90, 242, .04), rgba(255, 45, 146, .03));
    -webkit-backdrop-filter: blur(28px) saturate(200%) brightness(1.05);
    backdrop-filter: blur(28px) saturate(200%) brightness(1.05);
    border: 1.5px solid rgba(255, 255, 255, .25);
    box-shadow:
        0 12px 40px rgba(31, 38, 135, .18),
        0 4px 12px rgba(31, 38, 135, .08),
        inset 0 1px 1px rgba(255, 255, 255, .7),
        inset 0 -1px 1px rgba(120, 120, 128, .12),
        inset 0 0 25px rgba(255, 255, 255, .08);
    display: flex;
    align-items: center;
    padding: 0 10px 0 22px;
}
/* 顶部导航顶部高光线 */
.ks-nav::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 14%;
    right: 14%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
    border-radius: 1px;
    pointer-events: none;
    z-index: 1;
}
/* 注意：上面 ::after 会覆盖原 ::after 三色光斑伪元素，移到 ::before 同位置 */
.ks-nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -.02em;
    color: var(--ks-text);
    margin-right: auto;
}
.ks-nav-brand .ks-logo {
    width: 34px; height: 34px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--ks-primary), var(--ks-primary-3));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 900;
    box-shadow: 0 4px 14px rgba(94, 92, 230, .4);
}
.ks-nav-links { display: flex; align-items: center; gap: 2px; min-width: 0; max-width: 58vw; overflow-x: auto; scrollbar-width: none; }
.ks-nav-links::-webkit-scrollbar { display: none; }
.ks-nav-links a {
    padding: 9px 13px;
    border-radius: 999px;
    color: var(--ks-text-2);
    font-size: 14px;
    font-weight: 600;
    transition: all .25s;
    white-space: nowrap;
    flex: none;
}
.ks-nav-links a:hover { background: rgba(255, 255, 255, .6); opacity: 1; }
.ks-nav-links a.active {
    background: linear-gradient(135deg, var(--ks-primary), var(--ks-primary-2));
    color: #fff;
    box-shadow: 0 4px 14px rgba(10, 132, 255, .35);
}
.ks-nav-cta {
    margin-left: 10px;
    padding: 9px 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--ks-primary), var(--ks-primary-2));
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(10, 132, 255, .35);
    transition: transform .25s, box-shadow .25s;
}
.ks-nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(10, 132, 255, .45); opacity: 1; }

/* 移动端导航 */
.ks-nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 22px;
    color: var(--ks-text);
    cursor: pointer;
    padding: 8px 12px;
}
@media (max-width: 820px) {
    .ks-nav-toggle { display: block; }
    .ks-nav-links {
        display: none;
        position: absolute;
        top: calc(var(--ks-nav-h) + 12px);
        left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        background: var(--ks-glass-strong);
        -webkit-backdrop-filter: blur(var(--ks-blur)) saturate(180%);
        backdrop-filter: blur(var(--ks-blur)) saturate(180%);
        border: 1px solid var(--ks-glass-border-strong);
        border-radius: var(--ks-radius-sm);
        box-shadow: var(--ks-shadow-lg);
        padding: 10px;
        z-index: 99;
    }
    .ks-nav-links.open { display: flex; }
    .ks-nav-links a {
        padding: 12px 16px;
        font-size: 15px;
        text-align: center;
    }
    .ks-nav { position: sticky; }
    .ks-nav-wrap { position: relative; }

    /* 移动端导航栏优化 */
    .ks-nav {
        height: 56px;
        padding: 0 8px 0 14px;
        width: calc(100% - 24px);
    }
    .ks-nav-brand { font-size: 15px; gap: 8px; }
    .ks-nav-brand .ks-logo { width: 30px; height: 30px; font-size: 14px; }
    .ks-nav-cta {
        padding: 7px 14px;
        font-size: 12px;
    }
}
.ks-nav-wrap { display: contents; }

/* ---------- SPA 顶部导航 ---------- */
.ks-navbar {
    position: sticky;
    top: 16px;
    z-index: 100;
    margin: 16px auto 0;
    max-width: 1080px;
    padding: 0 16px;
}
.ks-navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 12px;
    background: var(--ks-glass-strong);
    backdrop-filter: blur(var(--ks-blur));
    -webkit-backdrop-filter: blur(var(--ks-blur));
    border: 1.5px solid var(--ks-glass-border-strong);
    border-radius: 999px;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.12);
}
.ks-nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    padding: 8px 16px;
    border-radius: 999px;
    transition: all .2s;
}
.ks-nav-brand:hover { opacity: 1; background: rgba(255,255,255,.6); }
.ks-nav-logo {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ks-primary), var(--ks-primary-3));
    color: #fff;
    border-radius: 50%;
    font-size: 18px;
}
.ks-nav-title {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
}
.ks-nav-menu {
    display: flex;
    align-items: center;
    gap: 4px;
}
.ks-nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--ks-text-2);
    font-size: 14px;
    font-weight: 600;
    transition: all .2s;
}
.ks-nav-link:hover {
    opacity: 1;
    background: rgba(255,255,255,.6);
    color: var(--ks-text);
}
.ks-nav-link.active {
    background: var(--ks-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(10, 132, 255, .4);
}
.ks-nav-icon { font-size: 14px; }
.ks-nav-admin {
    margin-left: 8px;
    background: var(--ks-primary);
    color: #fff !important;
    font-weight: 700;
}
.ks-nav-admin:hover {
    background: var(--ks-primary-2) !important;
    opacity: 1 !important;
}
@media (max-width: 768px) {
    .ks-navbar-inner { height: 56px; padding: 0 8px; }
    .ks-nav-title { display: none; }
    .ks-nav-link { padding: 6px 12px; font-size: 13px; }
    .ks-nav-icon { display: none; }
}

/* ---------- 加载动画 ---------- */
.ks-loading {
    text-align: center;
    padding: 80px 20px;
    color: var(--ks-text-muted);
}
.ks-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(10, 132, 255, .2);
    border-top-color: var(--ks-primary);
    border-radius: 50%;
    animation: ksSpin .8s linear infinite;
    margin: 0 auto 16px;
}
@keyframes ksSpin { to { transform: rotate(360deg); } }
.ks-loading-text { font-size: 14px; font-weight: 600; }

/* ---------- 底部工具栏 ---------- */
.ks-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    padding: 12px 0;
    background: linear-gradient(to top, rgba(238, 242, 249, .95), rgba(238, 242, 249, .6));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    pointer-events: none;
}
.ks-bottom-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: auto;
}
.ks-visit-info {
    font-size: 13px;
    color: var(--ks-text-muted);
    font-weight: 600;
}
.ks-theme-btn {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--ks-glass-strong);
    backdrop-filter: blur(var(--ks-blur));
    -webkit-backdrop-filter: blur(var(--ks-blur));
    border: 1.5px solid var(--ks-glass-border);
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
    box-shadow: 0 4px 16px rgba(31, 38, 135, 0.12);
}
.ks-theme-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(31, 38, 135, 0.2);
}
body.ks-dark .ks-bottom-bar {
    background: linear-gradient(to top, rgba(28, 28, 30, .95), rgba(28, 28, 30, .6));
}

/* 底部工具栏移动端优化 */
@media (max-width: 768px) {
    .ks-bottom-bar { padding: 10px 0; }
    .ks-visit-info { font-size: 11px; }
    .ks-theme-btn { width: 40px; height: 40px; font-size: 16px; }
}

/* ---------- 布局容器 ---------- */
.ks-container { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.ks-main { padding: 24px 0 100px; }
.ks-section { margin-bottom: 32px; scroll-margin-top: 100px; }
.ks-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ks-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 820px) {
    .ks-grid-2, .ks-grid-3 { grid-template-columns: 1fr; }
}

/* ========== 移动端全局优化 ========== */
@media (max-width: 768px) {
    /* 基础间距调整 */
    .ks-container { padding: 0 12px; }
    .ks-main { padding: 16px 0 90px; }
    .ks-section { margin-bottom: 24px; scroll-margin-top: 80px; }

    /* 卡片内边距减小 */
    .ks-card, .ks-card-strong { padding: 20px; border-radius: 20px; }

    /* 标题字号调整 */
    .ks-card-title { font-size: 18px; margin-bottom: 14px; }
    .ks-card-title .ks-tint { width: 30px; height: 30px; font-size: 15px; }

    /* Hero 区域优化 */
    .ks-hero { padding: 32px 20px; gap: 24px; }
    .ks-avatar { width: 120px; height: 120px; border-radius: 36px; }
    .ks-hero-name { font-size: 28px; }
    .ks-hero-slogan { font-size: 14px; line-height: 1.6; }
    .ks-hero-social { gap: 10px; margin-top: 18px; }
    .ks-social-btn { width: 40px; height: 40px; font-size: 16px; }

    /* Hero 居中布局 */
    .ks-hero-center { padding: 40px 20px 32px; }
    .ks-avatar-lg { width: 120px; height: 120px; }
    .ks-hero-center-content .ks-hero-name { font-size: 32px; }
    .ks-hero-center-content .ks-hero-slogan { font-size: 15px; }
    .ks-social-btn-pill { padding: 10px 18px; font-size: 13px; }

    /* 时间卡片 */
    .ks-time-card { padding: 28px 20px; }
    .ks-time-clock { font-size: 56px; }
    .ks-time-date { font-size: 16px; }

    /* 小组件网格 */
    .ks-widgets { gap: 16px; }
    .ks-widget { padding: 18px 20px; }

    /* 项目卡片 */
    .ks-project-cover { height: 140px; font-size: 36px; }
    .ks-project-body { padding: 18px 20px 20px; }
    .ks-project-title { font-size: 16px; }
    .ks-project-desc { font-size: 13px; }

    /* 按钮尺寸 */
    .ks-btn { padding: 10px 20px; font-size: 13px; }
    .ks-btn-lg { padding: 12px 28px; font-size: 15px; }

    /* 表单元素 */
    .ks-input, .ks-select, .ks-textarea { padding: 11px 14px; font-size: 14px; }

    /* 表格横向滚动优化 */
    .ks-table { min-width: auto; font-size: 13px; }
    .ks-table th, .ks-table td { padding: 10px 12px; }

    /* 留言板 */
    .ks-message-item { padding: 14px 0; gap: 12px; }
    .ks-message-avatar { width: 38px; height: 38px; font-size: 14px; }
    .ks-message-content { font-size: 13px; }

    /* 页脚 */
    .ks-footer { padding: 28px 12px 36px; font-size: 12px; }
    .ks-footer-stats { gap: 12px; font-size: 11px; }

    /* 赞助卡片 */
    .ks-sponsor-bubble { padding: 20px 22px; }
    .ks-sponsor-qrcode img { width: 180px; height: 180px; }

    /* 关于气泡 */
    .ks-about-bubble { padding: 18px 22px; }

    /* 安装引导 */
    .ks-install-shell { margin: 30px auto 40px; padding: 0 12px; }
    .ks-install-logo { width: 64px; height: 64px; font-size: 28px; }
    .ks-install-title { font-size: 22px; }

    /* 步骤条移动端 */
    .ks-step-label { display: none; }
    .ks-step-line { width: 24px; margin: 0 6px; }

    /* 检测列表 */
    .ks-check-item { padding: 11px 14px; gap: 10px; }
    .ks-check-name { min-width: 0; font-size: 13px; }
    .ks-check-value { display: none; }

    /* 空状态 */
    .ks-empty { padding: 36px 16px; }
    .ks-empty .ks-empty-icon { font-size: 32px; }
}

/* 超小屏幕进一步优化 */
@media (max-width: 480px) {
    .ks-container { padding: 0 10px; }
    .ks-card, .ks-card-strong { padding: 16px; border-radius: 18px; }

    .ks-hero { padding: 24px 16px; }
    .ks-avatar { width: 100px; height: 100px; border-radius: 30px; }
    .ks-hero-name { font-size: 24px; }
    .ks-hero-slogan { font-size: 13px; }

    .ks-hero-center { padding: 32px 16px 24px; }
    .ks-avatar-lg { width: 100px; height: 100px; }
    .ks-hero-center-content .ks-hero-name { font-size: 26px; }

    .ks-time-clock { font-size: 48px; }
    .ks-time-date { font-size: 14px; }

    .ks-widget { padding: 16px; }

    .ks-project-cover { height: 120px; font-size: 32px; }
    .ks-project-body { padding: 16px; }

    .ks-nav { padding: 0 8px 0 16px; }
    .ks-nav-brand { font-size: 15px; gap: 8px; }
    .ks-nav-brand .ks-logo { width: 30px; height: 30px; font-size: 14px; }
}

/* ---------- 按钮 ---------- */
.ks-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 24px;
    border-radius: 999px;
    border: none;
    font-family: var(--ks-font);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .25s, box-shadow .25s, background .25s;
    -webkit-appearance: none;
    appearance: none;
    line-height: 1.2;
}
.ks-btn:active { transform: scale(.97); }
.ks-btn-primary {
    background: linear-gradient(135deg, var(--ks-primary), var(--ks-primary-2));
    color: #fff;
    box-shadow: 0 4px 14px rgba(10, 132, 255, .35);
}
.ks-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(10, 132, 255, .45); }
.ks-btn-ghost {
    background: rgba(255, 255, 255, .5);
    color: var(--ks-text);
    border: 1px solid var(--ks-glass-border-strong);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.ks-btn-ghost:hover { background: rgba(255, 255, 255, .75); transform: translateY(-2px); }
.ks-btn-danger {
    background: linear-gradient(135deg, #FF6961, var(--ks-danger));
    color: #fff;
    box-shadow: 0 4px 14px rgba(255, 69, 58, .35);
}
.ks-btn-danger:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(255, 69, 58, .45); }
.ks-btn-success {
    background: linear-gradient(135deg, #63E6A9, var(--ks-success));
    color: #fff;
    box-shadow: 0 4px 14px rgba(48, 209, 88, .35);
}
.ks-btn-success:hover { transform: translateY(-2px); }
.ks-btn-sm { padding: 7px 14px; font-size: 13px; }
.ks-btn-block { width: 100%; }

/* ---------- 表单 ---------- */
.ks-form-group { margin-bottom: 18px; }
.ks-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--ks-text-2);
    margin-bottom: 7px;
    letter-spacing: .01em;
}
.ks-label .ks-req { color: var(--ks-danger); margin-left: 3px; }
.ks-hint { font-size: 12px; color: var(--ks-text-muted); margin-top: 5px; }

.ks-input,
.ks-select,
.ks-textarea {
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--ks-radius-sm);
    border: 1px solid rgba(120, 120, 128, .22);
    background: rgba(255, 255, 255, .6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-family: var(--ks-font);
    font-size: 14px;
    color: var(--ks-text);
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.ks-textarea { min-height: 110px; resize: vertical; }
.ks-input:focus,
.ks-select:focus,
.ks-textarea:focus {
    border-color: var(--ks-primary);
    background: rgba(255, 255, 255, .85);
    box-shadow: 0 0 0 4px rgba(10, 132, 255, .15);
}
.ks-input::placeholder,
.ks-textarea::placeholder { color: var(--ks-text-muted); }
.ks-select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath fill='none' stroke='%238E8E93' stroke-width='2' stroke-linecap='round' d='M1 1.5 6 6.5 11 1.5'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}
.ks-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .ks-form-row { grid-template-columns: 1fr; } }

/* 开关 */
.ks-switch { position: relative; display: inline-block; width: 48px; height: 28px; flex: none; }
.ks-switch input { opacity: 0; width: 0; height: 0; }
.ks-switch .ks-slider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: rgba(120, 120, 128, .3);
    transition: background .25s;
    cursor: pointer;
}
.ks-switch .ks-slider::before {
    content: "";
    position: absolute;
    width: 24px; height: 24px;
    left: 2px; top: 2px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
    transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.ks-switch input:checked + .ks-slider { background: var(--ks-success); }
.ks-switch input:checked + .ks-slider::before { transform: translateX(20px); }

/* 单选按钮组 */
.ks-radio-group { display: flex; flex-direction: column; gap: 10px; }
.ks-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, .4);
    border: 1px solid var(--ks-glass-border);
    border-radius: var(--ks-radius-sm);
    cursor: pointer;
    transition: all .2s;
    font-size: 14px;
    color: var(--ks-text-2);
}
.ks-radio:hover { background: rgba(255, 255, 255, .6); }
.ks-radio input {
    width: 18px; height: 18px;
    accent-color: var(--ks-primary);
    cursor: pointer;
}
.ks-radio input:checked + span {
    color: var(--ks-primary);
    font-weight: 600;
}

/* ---------- 表格（后台） ---------- */
.ks-table-wrap { overflow-x: auto; border-radius: var(--ks-radius-sm); }
.ks-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 640px;
}
.ks-table th {
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: var(--ks-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(120, 120, 128, .18);
    white-space: nowrap;
}
.ks-table td {
    padding: 13px 14px;
    border-bottom: 1px solid rgba(120, 120, 128, .1);
    vertical-align: middle;
    color: var(--ks-text-2);
}
.ks-table tr:last-child td { border-bottom: none; }
.ks-table tbody tr { transition: background .2s; }
.ks-table tbody tr:hover { background: rgba(255, 255, 255, .5); }

/* ---------- 徽章 / 标签 ---------- */
.ks-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(10, 132, 255, .12);
    color: var(--ks-primary);
    border: 1px solid rgba(10, 132, 255, .2);
}
.ks-tag-green { background: rgba(48, 209, 88, .12); color: #1E9E4B; border-color: rgba(48, 209, 88, .25); }
.ks-tag-orange { background: rgba(255, 159, 10, .14); color: #C27200; border-color: rgba(255, 159, 10, .28); }
.ks-tag-red { background: rgba(255, 69, 58, .12); color: #D63025; border-color: rgba(255, 69, 58, .22); }
.ks-tag-gray { background: rgba(120, 120, 128, .12); color: var(--ks-text-2); border-color: rgba(120, 120, 128, .22); }
.ks-tag-purple { background: rgba(191, 90, 242, .12); color: #9D34C9; border-color: rgba(191, 90, 242, .24); }

/* ---------- 提示条 ---------- */
.ks-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border-radius: var(--ks-radius-sm);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 18px;
    border: 1px solid transparent;
}
.ks-alert-success {
    background: rgba(48, 209, 88, .14);
    color: #1E7C3A;
    border-color: rgba(48, 209, 88, .3);
}
.ks-alert-error {
    background: rgba(255, 69, 58, .12);
    color: #B02E24;
    border-color: rgba(255, 69, 58, .28);
}
.ks-alert-info {
    background: rgba(10, 132, 255, .12);
    color: #0A5EC4;
    border-color: rgba(10, 132, 255, .25);
}

/* ---------- 前台 Hero ---------- */
.ks-hero {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 48px;
}
@media (max-width: 820px) { .ks-hero { flex-direction: column; text-align: center; padding: 36px 24px; } }
.ks-avatar {
    width: 148px;
    height: 148px;
    border-radius: 44px;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, .8);
    box-shadow: 0 16px 40px rgba(31, 38, 135, .25);
    flex: none;
    animation: ksBreath 5s ease-in-out infinite;
}
@keyframes ksBreath {
    0%, 100% { transform: translateY(0); box-shadow: 0 16px 40px rgba(31, 38, 135, .25); }
    50% { transform: translateY(-8px); box-shadow: 0 24px 52px rgba(31, 38, 135, .32); }
}
.ks-hero-name {
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -.03em;
    display: flex;
    align-items: center;
    gap: 12px;
}
@media (max-width: 820px) { .ks-hero-name { justify-content: center; } }
.ks-hero-slogan { font-size: 16px; color: var(--ks-text-2); margin-top: 8px; line-height: 1.7; }
.ks-hero-social { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
@media (max-width: 820px) { .ks-hero-social { justify-content: center; } }
.ks-social-btn {
    width: 44px; height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .6);
    border: 1px solid var(--ks-glass-border-strong);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(31, 38, 135, .1);
    color: var(--ks-text-2);
    font-size: 18px;
    transition: transform .25s, box-shadow .25s, background .25s;
}
.ks-social-btn:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 10px 24px rgba(10, 132, 255, .3);
    background: #fff;
    color: var(--ks-primary);
    opacity: 1;
}

/* Hero 居中布局 */
.ks-hero-center {
    flex-direction: column;
    text-align: center;
    padding: 56px 40px 48px;
}
.ks-avatar-lg {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 5px solid rgba(255, 255, 255, .9);
}
.ks-hero-center-content {
    width: 100%;
    margin-top: 24px;
}
.ks-hero-center-content .ks-hero-name {
    justify-content: center;
    font-size: 42px;
}
.ks-hero-center-content .ks-hero-slogan {
    text-align: center;
    margin-top: 12px;
    font-size: 17px;
}
.ks-hero-social-center {
    justify-content: center;
    margin-top: 28px;
}
.ks-social-btn-pill {
    width: auto;
    height: auto;
    padding: 12px 24px;
    border-radius: 999px;
    gap: 10px;
    flex-direction: row;
    text-decoration: none;
}
@media (max-width: 640px) {
    .ks-hero-center { padding: 40px 24px 32px; }
    .ks-avatar-lg { width: 130px; height: 130px; }
    .ks-hero-center-content .ks-hero-name { font-size: 32px; }
    .ks-social-btn-pill { padding: 10px 18px; }
}

/* 时间卡片 */
.ks-time-card {
    text-align: center;
    padding: 36px 28px;
}
.ks-time-clock {
    font-size: 72px;
    font-weight: 800;
    letter-spacing: -.04em;
    background: linear-gradient(135deg, var(--ks-primary), var(--ks-primary-3));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.ks-time-date {
    font-size: 18px;
    color: var(--ks-text-muted);
    margin-top: 10px;
    font-weight: 600;
}
@media (max-width: 640px) {
    .ks-time-clock { font-size: 56px; }
    .ks-time-date { font-size: 15px; }
}

/* 标题居中 */
.ks-card-title-center {
    justify-content: center;
    position: relative;
}
.ks-card-title-center .ks-tint {
    margin-right: 4px;
}

/* 气泡对话框 */
.ks-about-bubble {
    background: rgba(255, 255, 255, .55);
    border-radius: 20px;
    padding: 22px 26px;
    border: 1px solid var(--ks-glass-border);
    position: relative;
    margin-top: 8px;
}
.ks-about-bubble::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid rgba(255, 255, 255, .55);
}

/* 赞助卡片 */
.ks-sponsor-card .ks-card-title {
    justify-content: center;
    gap: 12px;
}
.ks-sponsor-heart {
    font-size: 24px;
}
.ks-sponsor-dots {
    display: flex;
    gap: 6px;
    margin-left: auto;
}
.ks-sponsor-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.ks-sponsor-bubble {
    background: rgba(120, 120, 128, .08);
    border-radius: 18px;
    padding: 24px 28px;
    margin-top: 12px;
    border: 1px solid rgba(120, 120, 128, .1);
}
.ks-btn-lg {
    padding: 14px 32px;
    font-size: 16px;
}

/* 旗下站点列表（重写：桌面 3 列 / 移动 2 列 / 整体缩小） */
.ks-sites-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 10px;
}
.ks-site-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    transition: transform .3s cubic-bezier(.2,1.4,.3,1);
    padding: 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0,0,0,.05);
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.ks-site-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 22px rgba(0,0,0,.1);
}
.ks-site-screenshot {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .9);
    font-size: 36px;
    box-shadow: 0 4px 14px rgba(31, 38, 135, .18);
    border: 2px solid rgba(255, 255, 255, .55);
}
.ks-site-screenshot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ks-site-name {
    font-size: 15px;
    font-weight: 700;
    margin-top: 8px;
    letter-spacing: -.01em;
    color: var(--ks-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: center;
}
.ks-site-desc {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ks-text-muted);
    margin-top: 5px;
    text-align: center;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
/* 中等屏幕：2 列 */
@media (max-width: 1024px) {
    .ks-sites-list { grid-template-columns: repeat(2, 1fr); }
}
/* 移动端：保持 2 列，更紧凑 */
@media (max-width: 640px) {
    .ks-sites-list { gap: 10px; }
    .ks-site-item { padding: 10px 8px; border-radius: 12px; }
    .ks-site-screenshot { border-radius: 8px; font-size: 28px; border-width: 1.5px; }
    .ks-site-name { font-size: 13px; font-weight: 700; margin-top: 6px; }
    .ks-site-desc { font-size: 11.5px; margin-top: 4px; }
}

/* 友链入口按钮 */
.ks-btn-friends {
    padding: 14px 36px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .05em;
    border-radius: 999px;
    color: #FF6B00;
    background: rgba(255, 255, 255, .7);
    border: 2px solid rgba(255, 107, 0, .3);
    box-shadow: 0 6px 20px rgba(255, 107, 0, .2);
}
.ks-btn-friends:hover {
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(255, 107, 0, .3);
    opacity: 1;
}

/* 天气卡片新样式 */
.ks-weather-city-lg {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.01em;
    margin-bottom: 4px;
}
.ks-weather-temp-lg {
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
    background: linear-gradient(135deg, var(--ks-primary), var(--ks-primary-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.ks-weather-temp-lg small {
    font-size: 20px;
    -webkit-text-fill-color: var(--ks-text-muted);
    font-weight: 600;
}
.ks-weather-type {
    font-size: 13px;
    color: var(--ks-text-muted);
    margin-top: 6px;
}

/* 作息列表 */
.ks-schedule-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}
.ks-schedule-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 14px;
    background: rgba(120, 120, 128, .08);
    border-radius: 12px;
}
.ks-schedule-time {
    font-size: 15px;
    font-weight: 800;
    color: var(--ks-primary);
    font-variant-numeric: tabular-nums;
    min-width: 52px;
}
.ks-schedule-label {
    font-size: 14px;
    color: var(--ks-text-2);
    font-weight: 600;
}

/* 运势星级 */
.ks-fortune-stars {
    display: flex;
    gap: 6px;
    margin: 8px 0 14px;
}
.ks-fortune-star {
    font-size: 22px;
    opacity: .25;
    filter: grayscale(1);
    transition: all .3s;
}
.ks-fortune-star.active {
    opacity: 1;
    filter: none;
    text-shadow: 0 2px 8px rgba(255, 193, 7, .5);
}
.ks-fortune-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ks-fortune-item {
    display: flex;
    align-items: center;
    font-size: 13px;
}
.ks-fortune-label {
    color: var(--ks-text-muted);
    font-weight: 600;
    min-width: 42px;
}
.ks-fortune-value {
    color: var(--ks-text-2);
    font-weight: 700;
    font-size: 12px;
}

/* 拟态风格（Neumorphism） */
.ks-neumorphic {
    background: #eef2f9 !important;
    border: none !important;
    box-shadow:
        10px 10px 20px #c5cad4,
        -10px -10px 20px #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 天气卡片 - 龙猫风格 */
.ks-weather-card {
    overflow: hidden;
    position: relative;
    padding: 0 !important;
}
.ks-weather-inner {
    padding: 20px;
    position: relative;
    z-index: 2;
    min-height: 200px;
    display: flex;
    flex-direction: column;
}
.ks-weather-city-totoro {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
    position: relative;
    z-index: 3;
}
.ks-weather-city-name {
    font-size: 42px;
    font-weight: 900;
    background: linear-gradient(135deg, #64B5F6, #42A5F5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -.02em;
    line-height: 1.1;
}
.ks-weather-temp-totoro {
    font-size: 52px;
    font-weight: 900;
    color: #FFA726;
    letter-spacing: -.03em;
    line-height: 1;
    text-shadow: 2px 2px 0 #FFB74D, 4px 4px 0 rgba(255,167,38,.3);
}
.ks-weather-temp-totoro small {
    font-size: 22px;
    font-weight: 700;
    color: #FFB74D;
    margin-left: 2px;
}
.ks-weather-type-totoro {
    font-size: 14px;
    color: #666;
    font-weight: 600;
    margin-top: 8px;
    position: relative;
    z-index: 3;
}
.ks-totoro-bg {
    position: absolute;
    right: -10px;
    bottom: -10px;
    z-index: 1;
    pointer-events: none;
}
.ks-totoro {
    display: block;
    opacity: .85;
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,.15));
}
.ks-totoro-small {
    position: absolute;
    left: -20px;
    bottom: 20px;
    opacity: .7;
    filter: drop-shadow(1px 2px 4px rgba(0,0,0,.15));
}
.ks-totoro-rainbow {
    position: absolute;
    top: -20px;
    right: 20px;
    font-size: 60px;
    opacity: .6;
    filter: blur(.5px);
}

/* 天气组件移动端统一样式（820px 以下与运势两列并排时使用，已合并历史重复块） */
@media (max-width: 820px) {
    body:not(.admin) .ks-weather-inner {
        padding: 4px 0;
        min-height: auto;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    body:not(.admin) .ks-weather-city-totoro {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin-bottom: 4px;
    }
    body:not(.admin) .ks-weather-city-name {
        font-size: 15px;
        font-weight: 700;
        color: #0A84FF;
        background: none;
        -webkit-text-fill-color: initial;
        letter-spacing: -.01em;
        line-height: 1.2;
    }
    body:not(.admin) .ks-weather-temp-totoro {
        font-size: 34px;
        font-weight: 900;
        line-height: 1;
        letter-spacing: -0.03em;
        background: -webkit-linear-gradient(135deg, #0A84FF 0%, #5E5CE6 100%);
        background: linear-gradient(135deg, #0A84FF 0%, #5E5CE6 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: #0A84FF;
        text-shadow: none;
    }
    body:not(.admin) .ks-weather-temp-totoro small {
        font-size: 15px;
        font-weight: 700;
        background: -webkit-linear-gradient(135deg, #0A84FF 0%, #5E5CE6 100%);
        background: linear-gradient(135deg, #0A84FF 0%, #5E5CE6 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    body:not(.admin) .ks-weather-type-totoro {
        font-size: 12px;
        color: var(--ks-text-muted);
        margin-top: 4px;
        font-weight: 600;
        display: -webkit-box;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        gap: 4px;
    }
    /* 龙猫在两列布局下隐藏，保留尺寸供单列回退 */
    .ks-totoro svg { width: 110px; height: 98px; }
    .ks-totoro-small svg { width: 32px; height: 32px; }
    .ks-totoro-rainbow { font-size: 48px; top: -16px; right: 14px; }
}

@media (max-width: 480px) {
    body:not(.admin) .ks-weather-temp-totoro { font-size: 28px; }
    body:not(.admin) .ks-weather-temp-totoro small { font-size: 13px; }
    body:not(.admin) .ks-weather-city-name { font-size: 13px; }
    body:not(.admin) .ks-weather-type-totoro { font-size: 11px; }
    .ks-totoro svg { width: 90px; height: 80px; }
    .ks-totoro-small svg { width: 28px; height: 28px; }
}

/* 暗色模式天气城市名（移动端） */
@media (max-width: 820px) {
    body.ks-dark:not(.admin) .ks-weather-city-name {
        color: #64B5F6;
        -webkit-text-fill-color: #64B5F6;
    }
}

/* 运势进度条风格 */
.ks-fortune-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 26px;
    font-weight: 800;
    color: #666;
    margin-bottom: 18px;
    letter-spacing: -.01em;
}
.ks-fortune-stars-inline {
    display: flex;
    gap: 6px;
}
.ks-fortune-stars-inline .ks-fortune-star {
    font-size: 28px;
    opacity: .3;
    filter: grayscale(1);
}
.ks-fortune-stars-inline .ks-fortune-star.active {
    opacity: 1;
    filter: none;
    text-shadow: 0 2px 8px rgba(255, 193, 7, .6);
}
.ks-fortune-bars {
    background: #eef2f9;
    border-radius: 22px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow:
        inset 4px 4px 8px #c5cad4,
        inset -4px -4px 8px #ffffff;
}
.ks-fortune-bar-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
}
.ks-fortune-bar-label {
    font-size: 22px;
    font-weight: 700;
    color: #666;
    min-width: 72px;
    flex-shrink: 0;
    letter-spacing: -.01em;
}
.ks-fortune-bar {
    flex: 1;
    height: 20px !important;
    min-height: 20px;
    background: #e0e4ec;
    border-radius: 999px;
    box-shadow:
        inset 2px 2px 5px #c5cad4,
        inset -2px -2px 5px #ffffff;
    overflow: hidden;
    position: relative;
}
.ks-fortune-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #CE93D8, #64B5F6, #80DEEA);
    box-shadow: 0 0 12px rgba(206, 147, 216, .6);
    transition: width 1.2s ease;
    display: block;
    min-width: 20px;
}

/* 运势组件移动端优化 */
@media (max-width: 768px) {
    .ks-fortune-title { font-size: 22px; margin-bottom: 14px; }
    .ks-fortune-stars-inline .ks-fortune-star { font-size: 24px; }
    .ks-fortune-bars { padding: 16px 18px; gap: 12px; border-radius: 18px; }
    .ks-fortune-bar-label { font-size: 18px; min-width: 60px; }
    .ks-fortune-bar { height: 16px !important; min-height: 16px; }
}

@media (max-width: 480px) {
    .ks-fortune-title { font-size: 20px; }
    .ks-fortune-stars-inline .ks-fortune-star { font-size: 20px; }
    .ks-fortune-bars { padding: 14px 16px; gap: 10px; }
    .ks-fortune-bar-label { font-size: 16px; min-width: 52px; }
    .ks-fortune-bar { height: 14px !important; min-height: 14px; }
}

/* 关于我页面信息项 */
.ks-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: rgba(255,255,255,.5);
    border-radius: 14px;
    border: 1px solid var(--ks-glass-border);
}
.ks-info-label {
    font-size: 14px;
    color: var(--ks-text-muted);
    font-weight: 600;
}
.ks-info-value {
    font-size: 15px;
    color: var(--ks-text-2);
    font-weight: 700;
}

/* 在线状态 */
.ks-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(48, 209, 88, .14);
    border: 1px solid rgba(48, 209, 88, .3);
    color: #1E7C3A;
    font-size: 13px;
    font-weight: 700;
}
.ks-status .ks-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ks-success);
    box-shadow: 0 0 0 0 rgba(48, 209, 88, .5);
    animation: ksPulse 2s infinite;
}
@keyframes ksPulse {
    0% { box-shadow: 0 0 0 0 rgba(48, 209, 88, .5); }
    70% { box-shadow: 0 0 0 8px rgba(48, 209, 88, 0); }
    100% { box-shadow: 0 0 0 0 rgba(48, 209, 88, 0); }
}
.ks-status.offline { background: rgba(120,120,128,.14); border-color: rgba(120,120,128,.28); color: var(--ks-text-muted); }
.ks-status.offline .ks-dot { background: var(--ks-text-muted); animation: none; }

/* ---------- 技能条 ---------- */
.ks-skill { margin-bottom: 18px; }
.ks-skill:last-child { margin-bottom: 0; }
.ks-skill-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
}
.ks-skill-head span:last-child { color: var(--ks-text-muted); font-weight: 600; }
.ks-skill-bar {
    height: 10px;
    border-radius: 999px;
    background: rgba(120, 120, 128, .16);
    overflow: hidden;
}
.ks-skill-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ks-primary), var(--ks-primary-3));
    box-shadow: 0 2px 8px rgba(94, 92, 230, .4);
    width: 0;
    transition: width 1.2s cubic-bezier(.2,.8,.2,1);
}

/* ---------- 项目卡片 ---------- */
.ks-project {
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.ks-project-cover {
    height: 160px;
    background: linear-gradient(135deg, var(--ks-primary), var(--ks-primary-3));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    color: rgba(255,255,255,.9);
    position: relative;
    overflow: hidden;
}
.ks-project-cover img { width: 100%; height: 100%; object-fit: cover; }
.ks-project-body { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.ks-project-title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.ks-project-desc {
    font-size: 13.5px;
    color: var(--ks-text-2);
    line-height: 1.65;
    margin: 8px 0 14px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ks-project-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ks-project-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ks-primary);
}

/* ---------- 留言板 ---------- */
.ks-message-item {
    display: flex;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(120, 120, 128, .12);
}
.ks-message-item:last-child { border-bottom: none; }
.ks-message-avatar {
    width: 42px; height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--ks-primary-2), var(--ks-primary-3));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
    flex: none;
}
.ks-message-name { font-weight: 700; font-size: 14px; }
.ks-message-time { font-size: 12px; color: var(--ks-text-muted); margin-left: 8px; font-weight: 500; }
.ks-message-content { font-size: 14px; color: var(--ks-text-2); line-height: 1.7; margin-top: 4px; word-break: break-word; }

/* ---------- 页脚 ---------- */
.ks-footer {
    text-align: center;
    padding: 34px 16px 42px;
    color: var(--ks-text-muted);
    font-size: 13px;
    line-height: 2;
}
.ks-footer a { color: var(--ks-text-2); font-weight: 600; }

/* ---------- 安装引导 ---------- */
.ks-install-shell {
    max-width: 780px;
    margin: 40px auto 60px;
    padding: 0 16px;
}
.ks-install-head { text-align: center; margin-bottom: 30px; }
.ks-install-logo {
    width: 76px; height: 76px;
    margin: 0 auto 18px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--ks-primary), var(--ks-primary-3));
    color: #fff;
    font-size: 34px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 32px rgba(94, 92, 230, .45);
    animation: ksBreath 5s ease-in-out infinite;
}
.ks-install-title { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.ks-install-sub { color: var(--ks-text-muted); font-size: 14px; margin-top: 6px; }

/* 步骤条 */
.ks-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 28px;
}
.ks-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ks-text-muted);
}
.ks-step-num {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(120, 120, 128, .16);
    border: 1px solid rgba(120, 120, 128, .2);
    color: var(--ks-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    transition: all .3s;
    flex: none;
}
.ks-step.active { color: var(--ks-primary); }
.ks-step.active .ks-step-num {
    background: linear-gradient(135deg, var(--ks-primary), var(--ks-primary-2));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px rgba(10, 132, 255, .4);
}
.ks-step.done { color: var(--ks-success); }
.ks-step.done .ks-step-num {
    background: linear-gradient(135deg, #63E6A9, var(--ks-success));
    border-color: transparent;
    color: #fff;
}
.ks-step-line {
    width: 56px; height: 2px;
    background: rgba(120, 120, 128, .25);
    margin: 0 14px;
    border-radius: 2px;
}
.ks-step-line.done { background: var(--ks-success); }
@media (max-width: 640px) {
    .ks-step-label { display: none; }
    .ks-step-line { width: 34px; margin: 0 8px; }
}

/* 环境检测列表 */
.ks-check-list { display: flex; flex-direction: column; gap: 10px; }
.ks-check-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 18px;
    border-radius: var(--ks-radius-sm);
    background: rgba(255, 255, 255, .5);
    border: 1px solid rgba(255, 255, 255, .55);
}
.ks-check-icon {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 900;
    color: #fff;
    flex: none;
}
.ks-check-ok .ks-check-icon { background: linear-gradient(135deg, #63E6A9, var(--ks-success)); }
.ks-check-warn .ks-check-icon { background: linear-gradient(135deg, #FFC53D, var(--ks-warning)); }
.ks-check-fail .ks-check-icon { background: linear-gradient(135deg, #FF6961, var(--ks-danger)); }
.ks-check-name { font-weight: 700; font-size: 14px; min-width: 150px; }
.ks-check-value { font-size: 13px; color: var(--ks-text-muted); flex: 1; }
.ks-check-state { margin-left: auto; flex: none; }
@media (max-width: 560px) {
    .ks-check-name { min-width: 0; }
    .ks-check-value { display: none; }
}

/* 检测分数环 */
.ks-score-ring {
    --ks-score: 100;
    width: 92px; height: 92px;
    border-radius: 50%;
    background: conic-gradient(var(--ks-success) calc(var(--ks-score) * 1%), rgba(120,120,128,.15) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: none;
}
.ks-score-ring::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
}
.ks-score-num { position: relative; font-size: 22px; font-weight: 800; }
.ks-score-num small { font-size: 12px; color: var(--ks-text-muted); font-weight: 700; }

/* ---------- 通用工具类 ---------- */
.ks-text-center { text-align: center; }
.ks-flex { display: flex; align-items: center; gap: 12px; }
.ks-flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ks-mt-8 { margin-top: 8px; } .ks-mt-16 { margin-top: 16px; }
.ks-mt-24 { margin-top: 24px; } .ks-mt-32 { margin-top: 32px; }
.ks-mb-16 { margin-bottom: 16px; } .ks-mb-24 { margin-bottom: 24px; }
.ks-muted { color: var(--ks-text-muted); }
.ks-bold { font-weight: 800; }
.ks-code {
    font-family: var(--ks-mono);
    font-size: 13px;
    background: rgba(120, 120, 128, .12);
    padding: 2px 8px;
    border-radius: 6px;
}
.ks-block-code {
    font-family: var(--ks-mono);
    font-size: 13px;
    background: rgba(28, 28, 30, .88);
    color: #9BE7FF;
    padding: 16px 18px;
    border-radius: var(--ks-radius-sm);
    overflow-x: auto;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-all;
}

/* 空状态 */
.ks-empty {
    text-align: center;
    padding: 46px 20px;
    color: var(--ks-text-muted);
    font-size: 14px;
}
.ks-empty .ks-empty-icon { font-size: 40px; margin-bottom: 12px; opacity: .6; }

/* 滚动渐入动画 */
.ks-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.ks-reveal.visible { opacity: 1; transform: translateY(0); }

/* 暗色模式（body.ks-dark 由昼夜切换按钮控制，JS 首次访问跟随系统） */
body.ks-dark {
    --ks-text: #F2F2F7;
    --ks-text-2: #D1D1D6;
    --ks-text-muted: #98989F;
    --ks-glass: rgba(44, 44, 50, 0.55);
    --ks-glass-strong: rgba(36, 36, 42, 0.72);
    --ks-glass-border: rgba(255, 255, 255, 0.14);
    --ks-glass-border-strong: rgba(255, 255, 255, 0.2);
    --ks-shadow: 0 8px 32px rgba(0, 0, 0, .3);
    --ks-shadow-lg: 0 16px 48px rgba(0, 0, 0, .4);
}
body.ks-dark { background: #0d0f16; }
body.ks-dark .ks-bg { background: -webkit-linear-gradient(135deg, #141722 0%, #1c1526 45%, #101828 100%); background: linear-gradient(135deg, #141722 0%, #1c1526 45%, #101828 100%); }
body.ks-dark .ks-nav-links a:hover { background: rgba(255, 255, 255, .08); }
body.ks-dark .ks-input,
body.ks-dark .ks-select,
body.ks-dark .ks-textarea { background: rgba(60, 60, 67, .35); border-color: rgba(255, 255, 255, .12); }
body.ks-dark .ks-input:focus,
body.ks-dark .ks-select:focus,
body.ks-dark .ks-textarea:focus { background: rgba(60, 60, 67, .55); }
body.ks-dark .ks-check-item { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); }
body.ks-dark .ks-social-btn { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: var(--ks-text-2); }
body.ks-dark .ks-social-btn:hover { background: rgba(255, 255, 255, .16); }
body.ks-dark .ks-btn-ghost { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: var(--ks-text); }
body.ks-dark .ks-btn-ghost:hover { background: rgba(255, 255, 255, .14); }
body.ks-dark .ks-table tbody tr:hover { background: rgba(255, 255, 255, .05); }
body.ks-dark .ks-score-ring::before { background: rgba(28, 28, 32, .95); }
body.ks-dark .ks-tag-green { color: #4CDE80; }
body.ks-dark .ks-tag-orange { color: #FFB340; }
body.ks-dark .ks-tag-red { color: #FF6B61; }
body.ks-dark .ks-alert-success { color: #4CDE80; }
body.ks-dark .ks-alert-error { color: #FF6B61; }
body.ks-dark .ks-alert-info { color: #6EB6FF; }
body.ks-dark .ks-card-hover.ks-project { background: rgba(255, 255, 255, .05) !important; }
body.ks-dark .ks-message-item { border-bottom-color: rgba(255, 255, 255, .08); }
body.ks-dark .ks-theme-btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }
body.ks-dark .ks-about-bubble { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); }
body.ks-dark .ks-about-bubble::before { border-bottom-color: rgba(255, 255, 255, .06); }
body.ks-dark .ks-sponsor-bubble { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); }
body.ks-dark .ks-schedule-item { background: rgba(255, 255, 255, .06); }
body.ks-dark .ks-site-name { color: var(--ks-text-muted); }

/* 暗色模式 - 拟态风格 */
body.ks-dark .ks-neumorphic {
    background: #1C1C1E !important;
    box-shadow:
        10px 10px 20px #151516,
        -10px -10px 20px #232326 !important;
}
body.ks-dark .ks-weather-city-name {
    background: linear-gradient(135deg, #90CAF9, #64B5F6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
body.ks-dark .ks-weather-type-totoro { color: #999; }
body.ks-dark .ks-fortune-title { color: rgba(255,255,255,.6); }
body.ks-dark .ks-fortune-bars {
    background: #1C1C1E;
    box-shadow:
        inset 4px 4px 8px #151516,
        inset -4px -4px 8px #232326;
}
body.ks-dark .ks-fortune-bar-label { color: #999; }
body.ks-dark .ks-fortune-bar {
    background: #1C1C1E;
    box-shadow:
        inset 2px 2px 4px #151516,
        inset -2px -2px 4px #232326;
}
body.ks-dark .ks-fortune-bar-fill {
    background: linear-gradient(90deg, #7B1FA2, #1565C0, #00838F);
    box-shadow: 0 0 10px rgba(103, 58, 183, .5);
}
body.ks-dark .ks-info-item { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }

/* 暗色模式 - SPA导航 */
body.ks-dark .ks-navbar-inner {
    background: rgba(28, 28, 30, .8);
    border-color: rgba(255, 255, 255, .14);
}
body.ks-dark .ks-nav-brand:hover { background: rgba(255,255,255,.08); }
body.ks-dark .ks-nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
body.ks-dark .ks-theme-btn {
    background: rgba(28, 28, 30, .8);
    border-color: rgba(255,255,255,.14);
}
body.ks-dark .ks-bottom-bar {
    background: linear-gradient(to top, rgba(28, 28, 30, .95), rgba(28, 28, 30, .6));
}

/* ============================================================
   拟态模块组件（公告弹窗 / 天气 / 作息 / 运势 / 赞助 /
   旗下站点 / 友链 / 黑胶音乐播放器 / 昼夜切换）
   ============================================================ */

/* ---------- 主题切换按钮 ---------- */
.ks-theme-btn {
    width: 38px; height: 38px;
    margin-left: 8px;
    border-radius: 50%;
    border: 1px solid var(--ks-glass-border-strong);
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
    font-size: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .3s, background .3s;
    flex: none;
}
.ks-theme-btn:hover { transform: rotate(20deg) scale(1.08); background: #fff; }

/* ---------- 公告弹窗 ---------- */
.ks-modal-mask {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(15, 15, 25, .4);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: ksFadeIn .3s ease;
}
.ks-modal {
    max-width: 430px;
    width: 100%;
    background: var(--ks-glass-strong);
    -webkit-backdrop-filter: blur(var(--ks-blur)) saturate(180%);
    backdrop-filter: blur(var(--ks-blur)) saturate(180%);
    border: 1px solid var(--ks-glass-border-strong);
    border-radius: var(--ks-radius);
    box-shadow: var(--ks-shadow-lg);
    padding: 30px 28px 26px;
    text-align: center;
    animation: ksPop .45s cubic-bezier(.2, 1.2, .3, 1);
    position: relative;
}
@keyframes ksFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ksPop { from { opacity: 0; transform: scale(.85) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.ks-modal-icon { font-size: 46px; line-height: 1; }
.ks-modal-title { font-size: 20px; font-weight: 800; margin-top: 12px; letter-spacing: -.02em; }
.ks-modal-body { font-size: 14px; color: var(--ks-text-2); line-height: 1.8; margin-top: 10px; white-space: pre-wrap; }
.ks-modal-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(120, 120, 128, .15);
    color: var(--ks-text-2);
    font-size: 15px;
    cursor: pointer;
    transition: background .2s;
}
.ks-modal-close:hover { background: rgba(120, 120, 128, .3); }

/* ---------- 小组件卡片行（天气/作息/运势） ---------- */
.ks-widgets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 820px) { .ks-widgets { grid-template-columns: 1fr; } }
.ks-widget { padding: 22px 24px; }
.ks-widget-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
    color: var(--ks-text-muted);
    margin-bottom: 12px;
}
.ks-weather-main { display: flex; align-items: center; gap: 14px; }
.ks-weather-icon { font-size: 38px; line-height: 1; }
.ks-weather-temp { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.ks-weather-temp small { font-size: 14px; font-weight: 700; color: var(--ks-text-muted); }
.ks-weather-city { font-size: 12.5px; color: var(--ks-text-muted); margin-top: 4px; }
.ks-weather-loading { font-size: 13px; color: var(--ks-text-muted); }
.ks-schedule-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}
.ks-schedule-text { font-size: 14px; font-weight: 600; color: var(--ks-text-2); line-height: 1.6; }
.ks-fortune-level { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--ks-primary); }
.ks-fortune-meta { font-size: 12.5px; color: var(--ks-text-muted); margin-top: 6px; }
.ks-fortune-quote { font-size: 12.5px; color: var(--ks-text-2); margin-top: 10px; line-height: 1.7; border-top: 1px dashed rgba(120,120,128,.25); padding-top: 10px; }

/* ---------- 赞助模块 ---------- */
.ks-sponsor-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ks-sponsor-text { flex: 1; min-width: 200px; font-size: 14.5px; color: var(--ks-text-2); line-height: 1.7; }
.ks-sponsor-qrcode { display: none; text-align: center; margin-top: 18px; }
.ks-sponsor-qrcode img {
    width: 200px; height: 200px;
    object-fit: contain;
    border-radius: 16px;
    margin: 0 auto;
    border: 1px solid var(--ks-glass-border-strong);
    background: #fff;
    padding: 8px;
}

/* ---------- 旗下站点卡片 ---------- */
.ks-site-cover {
    height: 110px;
    border-radius: var(--ks-radius-sm);
    background: linear-gradient(135deg, var(--ks-primary), var(--ks-primary-3));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    margin-bottom: 16px;
    overflow: hidden;
}
.ks-site-cover img { width: 100%; height: 100%; object-fit: cover; }
.ks-site-more { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--ks-primary); letter-spacing: .02em; }

/* ---------- 友链页面 ---------- */
.ks-friend-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .ks-friend-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ks-friend-grid { grid-template-columns: 1fr; } }
.ks-friend-card { display: flex; gap: 14px; align-items: flex-start; }
.ks-friend-avatar {
    width: 52px; height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--ks-primary-2), var(--ks-primary-3));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    flex: none;
    object-fit: cover;
}
.ks-friend-name { font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.ks-friend-intro { font-size: 12.5px; color: var(--ks-text-muted); margin-top: 4px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 友链移动端优化 */
@media (max-width: 768px) {
    .ks-friend-card { gap: 12px; }
    .ks-friend-avatar { width: 46px; height: 46px; font-size: 18px; border-radius: 14px; }
    .ks-friend-name { font-size: 14px; }
    .ks-friend-intro { font-size: 12px; }
}

/* ---------- 黑胶唱片音乐播放器 ---------- */
.ks-player {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 400;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px 10px 10px;
    border-radius: 999px;
    background: var(--ks-glass-strong);
    -webkit-backdrop-filter: blur(var(--ks-blur)) saturate(180%);
    backdrop-filter: blur(var(--ks-blur)) saturate(180%);
    border: 1px solid var(--ks-glass-border-strong);
    box-shadow: var(--ks-shadow-lg);
    max-width: calc(100vw - 44px);
}
.ks-player-disc {
    width: 54px; height: 54px;
    border-radius: 50%;
    flex: none;
    background: radial-gradient(circle at 35% 30%, #6ea8ff 0%, #4a5fd8 45%, #1c2340 100%);
    background-size: cover;
    background-position: center;
    position: relative;
    box-shadow: 0 6px 18px rgba(31, 38, 135, .35), inset 0 0 0 6px rgba(255, 255, 255, .08);
    animation: ksSpin 9s linear infinite;
    animation-play-state: paused;
    cursor: pointer;
}
.ks-player.playing .ks-player-disc { animation-play-state: running; }
@keyframes ksSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.ks-player-disc::before {
    content: "";
    position: absolute;
    inset: 30%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18);
}
.ks-player-disc::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 12px; height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(20, 20, 40, .55);
}
.ks-player-meta { min-width: 0; max-width: 170px; }
.ks-player-title {
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ks-player-artist { font-size: 11.5px; color: var(--ks-text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ks-player-bar {
    height: 4px;
    border-radius: 999px;
    background: rgba(120, 120, 128, .25);
    margin-top: 7px;
    overflow: hidden;
    cursor: pointer;
}
.ks-player-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ks-primary), var(--ks-primary-3));
}
.ks-player-ctrls { display: flex; align-items: center; gap: 4px; flex: none; }
.ks-player-ctrls button {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--ks-text-2);
    font-size: 15px;
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.ks-player-ctrls button:hover { background: rgba(120, 120, 128, .15); transform: scale(1.08); }
.ks-player-time { font-size: 10.5px; color: var(--ks-text-muted); font-variant-numeric: tabular-nums; }
.ks-player-list {
    position: absolute;
    right: 0;
    bottom: calc(100% + 14px);
    width: 260px;
    max-height: 260px;
    overflow-y: auto;
    border-radius: var(--ks-radius-sm);
    background: var(--ks-glass-strong);
    -webkit-backdrop-filter: blur(var(--ks-blur)) saturate(180%);
    backdrop-filter: blur(var(--ks-blur)) saturate(180%);
    border: 1px solid var(--ks-glass-border-strong);
    box-shadow: var(--ks-shadow-lg);
    padding: 8px;
    display: none;
}
.ks-player-list.open { display: block; animation: ksPop .3s cubic-bezier(.2,1.2,.3,1); }
.ks-player-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    transition: background .2s;
}
.ks-player-list-item:hover { background: rgba(120, 120, 128, .12); }
.ks-player-list-item.active { background: rgba(10, 132, 255, .14); color: var(--ks-primary); font-weight: 700; }
.ks-player-list-item .ks-pl-artist { margin-left: auto; font-size: 11px; color: var(--ks-text-muted); flex: none; }
@media (max-width: 640px) {
    .ks-player { right: 12px; bottom: 12px; padding: 8px 12px 8px 8px; }
    .ks-player-meta { max-width: 110px; }
    .ks-player-list { width: 230px; }
}

/* 播放器移动端进一步优化 */
@media (max-width: 480px) {
    .ks-player {
        right: 10px;
        bottom: 10px;
        padding: 6px 10px 6px 6px;
        border-radius: 999px;
    }
    .ks-player-disc { width: 44px; height: 44px; }
    .ks-player-meta { max-width: 90px; }
    .ks-player-title { font-size: 12px; }
    .ks-player-artist { font-size: 10px; }
    .ks-player-ctrls button { width: 30px; height: 30px; font-size: 13px; }
    .ks-player-list { width: 200px; max-height: 220px; }
}

/* ---------- 底部统计 ---------- */
.ks-footer-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--ks-text-muted);
}
.ks-footer-stats .ks-divider { width: 1px; height: 12px; background: rgba(120, 120, 128, .3); }

/* ============================================================
   后台管理页面移动端优化
   ============================================================ */

/* 后台导航栏移动端 */
@media (max-width: 768px) {
    /* 后台导航栏调整 */
    .ks-nav { padding: 0 8px 0 14px; }
    .ks-nav-brand { font-size: 14px; gap: 8px; }
    .ks-nav-brand .ks-logo { width: 28px; height: 28px; font-size: 13px; }
    .ks-nav-links a { padding: 10px 14px; font-size: 13px; }
    .ks-nav-cta { padding: 7px 14px; font-size: 12px; }

    /* 后台主内容区 */
    .ks-main { padding: 16px 0 90px; }
    .ks-container { padding: 0 12px; }

    /* 后台卡片标题 */
    .ks-card-title { font-size: 17px; margin-bottom: 14px; }
    .ks-card-title .ks-tint { width: 28px; height: 28px; font-size: 14px; }

    /* 后台表单元素 */
    .ks-form-group { margin-bottom: 14px; }
    .ks-label { font-size: 12px; margin-bottom: 6px; }
    .ks-input, .ks-select, .ks-textarea { padding: 10px 12px; font-size: 13px; }

    /* 后台按钮 */
    .ks-btn { padding: 9px 18px; font-size: 12px; }
    .ks-btn-sm { padding: 6px 12px; font-size: 12px; }

    /* 后台表格 */
    .ks-table { font-size: 12px; min-width: auto; }
    .ks-table th { padding: 10px 10px; font-size: 11px; }
    .ks-table td { padding: 10px 10px; font-size: 12px; }

    /* 后台消息项 */
    .ks-message-item { padding: 12px 0; gap: 10px; }
    .ks-message-avatar { width: 36px; height: 36px; font-size: 13px; border-radius: 12px; }
    .ks-message-name { font-size: 13px; }
    .ks-message-time { font-size: 11px; }
    .ks-message-content { font-size: 12px; }

    /* 留言 pill 标签移动端适配 */
    .ks-msg-head { gap: 6px; }
    .ks-msg-time-detail { font-size: 10px; padding: 2px 7px; }
    .ks-msg-time-detail i { font-size: 10px; }
    .ks-msg-meta-bar { gap: 6px; margin-top: 5px; }
    .ks-msg-meta-pill { font-size: 10px; padding: 2px 8px; gap: 4px; }
    .ks-msg-meta-pill i { font-size: 11px; }
    .ks-fab-weather-bar { padding: 8px 10px; gap: 6px; }
    .ks-fab-weather-pill { font-size: 12px; padding: 5px 10px; gap: 5px; }
    .ks-fab-weather-pill i { font-size: 14px; }

    /* 后台标签 */
    .ks-tag { padding: 3px 10px; font-size: 11px; }

    /* 后台提示条 */
    .ks-alert { padding: 11px 14px; font-size: 13px; }

    /* 后台仪表盘欢迎语 */
    .ks-flex-between h1 { font-size: 22px !important; }
    .ks-flex-between p { font-size: 12px !important; }

    /* 后台统计卡片 */
    .ks-grid-3 > div { min-width: 0; }
    .ks-card-hover[style*="padding"] { padding: 18px 14px !important; }
    .ks-card-hover > div:first-child { font-size: 26px !important; }
    .ks-card-hover > div:nth-child(2) { font-size: 24px !important; }
    .ks-card-hover > div:last-child { font-size: 12px !important; }
}

/* 超小屏幕后台优化 */
@media (max-width: 480px) {
    .ks-nav { padding: 0 6px 0 12px; height: 52px; }
    .ks-nav-brand { font-size: 13px; }
    .ks-nav-brand .ks-logo { width: 26px; height: 26px; font-size: 12px; }
    .ks-nav-links a { padding: 9px 12px; font-size: 12px; }

    .ks-card, .ks-card-strong { padding: 14px; border-radius: 16px; }
    .ks-card-title { font-size: 16px; }
    .ks-card-title .ks-tint { width: 26px; height: 26px; font-size: 13px; }

    .ks-input, .ks-select, .ks-textarea { padding: 9px 11px; font-size: 12px; }
    .ks-btn { padding: 8px 16px; font-size: 11px; }

    .ks-table { font-size: 11px; }
    .ks-table th, .ks-table td { padding: 8px 8px; }

    .ks-message-item { padding: 10px 0; }
    .ks-message-avatar { width: 32px; height: 32px; font-size: 12px; }
    .ks-message-name { font-size: 12px; }
    .ks-message-content { font-size: 11px; }

    /* 留言 pill 标签超小屏适配 */
    .ks-msg-meta-bar { gap: 5px; }
    .ks-msg-meta-pill { font-size: 9px; padding: 2px 7px; gap: 3px; }
    .ks-fab-weather-pill { font-size: 11px; padding: 4px 8px; }

    .ks-flex-between h1 { font-size: 20px !important; }
}

/* ============================================================
   🌟 炫酷加载与导航增强 (参考 nitai5pro.xfabe.com)
   - iOS 风格顶部导航增强（液态玻璃 + 流动光斑）
   - 移动端底部悬浮导航（iOS App Store 风格）
   - 悬浮按钮 FAB（点击 Q 弹展开留言/友链申请弹窗）
   - 模糊 Q 弹加载动画
   - 页面切换模糊过渡
   ============================================================ */

/* ---------- 顶部导航增强（液态玻璃 · Q弹悬停） ---------- */
.ks-nav {
    position: relative;
    overflow: hidden;
}

/* 导航链接 Q 弹悬停 */
.ks-nav-links a {
    position: relative;
    transition: all .35s cubic-bezier(.2, 1.6, .3, 1);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: none; /* 滑动选择时不触发滚动 */
}
.ks-nav-links a:hover {
    transform: translateY(-2px) scale(1.04);
    opacity: 1;
    background: rgba(255, 255, 255, .35);
}
.ks-nav-links a.active {
    transform: translateY(-1px);
    animation: ksNavPop .5s cubic-bezier(.2, 1.6, .3, 1);
    background: linear-gradient(135deg, rgba(10, 132, 255, .18), rgba(191, 90, 242, .14));
    color: var(--ks-primary);
    box-shadow: 0 4px 14px rgba(10, 132, 255, .25), inset 0 0 12px rgba(10, 132, 255, .15);
}
@keyframes ksNavPop {
    0% { transform: scale(.7); }
    60% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

/* 顶部导航：滑动选择目标液态高亮（与底部导航同款） */
.ks-nav-links a.dragging-source {
    opacity: .35;
    transform: scale(.88);
    pointer-events: none;
}
.ks-nav-links a.drop-target {
    color: var(--ks-primary);
    background:
        radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .25) 40%, transparent 70%),
        linear-gradient(135deg, rgba(10, 132, 255, .28), rgba(191, 90, 242, .22));
    transform: scale(1.12) translateY(-2px);
    box-shadow:
        0 6px 18px rgba(10, 132, 255, .35),
        inset 0 1px 1px rgba(255, 255, 255, .8),
        inset 0 0 12px rgba(10, 132, 255, .25);
}
.ks-nav-links a.drop-fire {
    animation: ksNavDropFire .4s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes ksNavDropFire {
    0% { transform: scale(1.12) translateY(-2px); }
    50% { transform: scale(1.28) translateY(-4px); box-shadow: 0 10px 26px rgba(10, 132, 255, .5), inset 0 0 20px rgba(10, 132, 255, .4); }
    100% { transform: scale(1) translateY(0); }
}

/* ---------- 移动端：前台隐藏汉堡菜单，改用底部导航（后台不受影响） ---------- */
@media (max-width: 820px) {
    body:not(.admin) .ks-nav-toggle { display: none !important; }
    body:not(.admin) .ks-nav-links { display: none !important; }
    .ks-nav {
        height: 52px;
        padding: 0 12px 0 14px;
        width: calc(100% - 20px);
        margin: 10px auto 0;
        top: 10px;
    }
    .ks-nav-brand { font-size: 14px; gap: 8px; }
    .ks-nav-brand .ks-logo { width: 28px; height: 28px; font-size: 13px; }
    .ks-theme-btn {
        width: 34px; height: 34px;
        font-size: 15px;
        margin-left: auto;
    }
    /* 给底部导航让出空间 */
    .ks-main { padding-bottom: 110px !important; }
}

/* ---------- 移动端底部悬浮导航（95% 透明液态玻璃 · 滑动实时轨迹识别切换） ---------- */
.ks-bottom-nav {
    display: none;
    position: fixed;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    /* 95% 透明液态玻璃：极淡背景 + 强模糊 + 厚边框 + 多层光影 */
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .03) 50%, rgba(255, 255, 255, .05) 100%),
        linear-gradient(135deg, rgba(10, 132, 255, .04), rgba(191, 90, 242, .04), rgba(255, 45, 146, .03));
    -webkit-backdrop-filter: blur(28px) saturate(200%) brightness(1.05);
    backdrop-filter: blur(28px) saturate(200%) brightness(1.05);
    border: 1.5px solid rgba(255, 255, 255, .25);
    border-radius: 30px;
    box-shadow:
        0 14px 44px rgba(31, 38, 135, .2),
        0 4px 14px rgba(31, 38, 135, .08),
        inset 0 1px 1px rgba(255, 255, 255, .7),
        inset 0 -1px 1px rgba(120, 120, 128, .12),
        inset 0 0 25px rgba(255, 255, 255, .08);
    padding: 6px;
    max-width: calc(100% - 24px);
    width: 360px;
    animation: ksBottomNavIn .5s cubic-bezier(.2, 1.4, .3, 1);
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), opacity .25s ease;
}
/* 液态玻璃顶部高光线 */
.ks-bottom-nav::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 14%;
    right: 14%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
    border-radius: 1px;
    pointer-events: none;
}
/* 拖动中：导航栏整体淡化 */
.ks-bottom-nav.dragging {
    opacity: .55;
    transform: translateX(-50%) scale(.97);
}
@keyframes ksBottomNavIn {
    from { transform: translateX(-50%) translateY(120%); opacity: 0; }
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
}
.ks-bottom-nav-inner {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 2px;
}
.ks-bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px;
    border-radius: 20px;
    color: var(--ks-text-muted);
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s cubic-bezier(.2, 1.6, .3, 1);
    position: relative;
    min-width: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: none; /* 长按拖动时不触发滚动 */
}
.ks-bottom-nav-icon {
    font-size: 20px;
    line-height: 1;
    transition: transform .3s cubic-bezier(.2, 1.6, .3, 1);
}
.ks-bottom-nav-item.active {
    color: var(--ks-primary);
    background: rgba(10, 132, 255, .12);
    box-shadow: inset 0 0 12px rgba(10, 132, 255, .15);
}
.ks-bottom-nav-item.active .ks-bottom-nav-icon {
    transform: translateY(-2px) scale(1.18);
    filter: drop-shadow(0 4px 8px rgba(10,132,255,.4));
}
.ks-bottom-nav-item:active { transform: scale(.92); }

/* 滑动选择中：原位置按钮淡化（提示已脱离） */
.ks-bottom-nav-item.dragging-source {
    opacity: .35;
    transform: scale(.88);
    pointer-events: none;
}
/* 滑动经过的目标按钮：液态高亮（实时轨迹反馈） */
.ks-bottom-nav-item.drop-target {
    color: var(--ks-primary);
    background:
        radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .3) 40%, transparent 70%),
        linear-gradient(135deg, rgba(10, 132, 255, .28), rgba(191, 90, 242, .22));
    transform: scale(1.15) translateY(-2px);
    box-shadow:
        0 6px 18px rgba(10, 132, 255, .35),
        inset 0 1px 1px rgba(255, 255, 255, .8),
        inset 0 0 12px rgba(10, 132, 255, .25);
}
.ks-bottom-nav-item.drop-target .ks-bottom-nav-icon {
    transform: translateY(-2px) scale(1.3);
    filter: drop-shadow(0 4px 10px rgba(10, 132, 255, .55));
}
/* 落定爆开动画（松开瞬间触发） */
.ks-bottom-nav-item.drop-fire {
    animation: ksDropFire .4s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes ksDropFire {
    0% { transform: scale(1.15) translateY(-2px); }
    50% { transform: scale(1.3) translateY(-4px); box-shadow: 0 10px 26px rgba(10, 132, 255, .5), inset 0 0 20px rgba(10, 132, 255, .4); }
    100% { transform: scale(1) translateY(0); }
}

/* 移动端显示底部导航 */
@media (max-width: 820px) {
    .ks-bottom-nav { display: block; }
}

/* 暗色模式：底部导航 95% 透明液态玻璃 */
body.ks-dark .ks-bottom-nav {
    background:
        linear-gradient(135deg, rgba(40, 40, 50, .08) 0%, rgba(28, 28, 32, .05) 50%, rgba(40, 40, 50, .08) 100%),
        linear-gradient(135deg, rgba(10, 132, 255, .08), rgba(191, 90, 242, .08), rgba(255, 45, 146, .06));
    border-color: rgba(255, 255, 255, .12);
    box-shadow:
        0 14px 44px rgba(0, 0, 0, .35),
        0 4px 14px rgba(0, 0, 0, .2),
        inset 0 1px 1px rgba(255, 255, 255, .12),
        inset 0 -1px 1px rgba(0, 0, 0, .2),
        inset 0 0 25px rgba(255, 255, 255, .04);
}
body.ks-dark .ks-bottom-nav::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
}
/* 暗色模式：顶部导航 95% 透明液态玻璃 */
body.ks-dark .ks-nav {
    background:
        linear-gradient(135deg, rgba(40, 40, 50, .08) 0%, rgba(28, 28, 32, .05) 50%, rgba(40, 40, 50, .08) 100%),
        linear-gradient(135deg, rgba(10, 132, 255, .08), rgba(191, 90, 242, .08), rgba(255, 45, 146, .06));
    border-color: rgba(255, 255, 255, .12);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, .35),
        0 4px 12px rgba(0, 0, 0, .2),
        inset 0 1px 1px rgba(255, 255, 255, .12),
        inset 0 -1px 1px rgba(0, 0, 0, .2),
        inset 0 0 25px rgba(255, 255, 255, .04);
}
body.ks-dark .ks-nav::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
}
body.ks-dark .ks-nav-links a.drop-target {
    background:
        radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .25) 0%, transparent 60%),
        linear-gradient(135deg, rgba(10, 132, 255, .4), rgba(191, 90, 242, .3));
    box-shadow:
        0 6px 18px rgba(10, 132, 255, .45),
        inset 0 1px 1px rgba(255, 255, 255, .25),
        inset 0 0 12px rgba(10, 132, 255, .35);
}
body.ks-dark .ks-bottom-nav-item.drop-target {
    background:
        radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .25) 0%, transparent 60%),
        linear-gradient(135deg, rgba(10, 132, 255, .4), rgba(191, 90, 242, .3));
    box-shadow:
        0 6px 18px rgba(10, 132, 255, .45),
        inset 0 1px 1px rgba(255, 255, 255, .25),
        inset 0 0 12px rgba(10, 132, 255, .35);
}

/* ---------- 悬浮按钮 FAB（点击 Q 弹展开） ---------- */
.ks-fab-wrap {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 250;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}
.ks-fab-sub {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(20px) scale(.6);
    pointer-events: none;
    transition: all .4s cubic-bezier(.2, 1.6, .3, 1);
}
.ks-fab-wrap.open .ks-fab-sub {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.ks-fab-wrap.open .ks-fab-sub:nth-child(1) { transition-delay: .04s; }
.ks-fab-wrap.open .ks-fab-sub:nth-child(2) { transition-delay: .08s; }

.ks-fab-sub-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--ks-text);
    background: var(--ks-glass-strong);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--ks-glass-border-strong);
    padding: 7px 14px;
    border-radius: 999px;
    box-shadow: var(--ks-shadow);
    white-space: nowrap;
}
.ks-fab-sub-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--ks-glass-border-strong);
    background: var(--ks-glass-strong);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: var(--ks-shadow);
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .3s cubic-bezier(.2, 1.6, .3, 1), background .3s;
    flex: none;
}
.ks-fab-sub-btn:hover { transform: scale(1.1) rotate(6deg); }
.ks-fab-sub-btn:active { transform: scale(.92); }
.ks-fab-sub-btn.msg { background: linear-gradient(135deg, #0A84FF, #5E5CE6); color: #fff; }
.ks-fab-sub-btn.friend { background: linear-gradient(135deg, #BF5AF2, #FF6B9D); color: #fff; }

.ks-fab-main {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--ks-primary), var(--ks-primary-3));
    color: #fff;
    font-size: 26px;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(94, 92, 230, .45), 0 2px 8px rgba(10,132,255,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .4s cubic-bezier(.2, 1.6, .3, 1), box-shadow .3s;
    position: relative;
    overflow: hidden;
}
.ks-fab-main::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 60%);
}
.ks-fab-main:hover { transform: scale(1.08); box-shadow: 0 12px 32px rgba(94, 92, 230, .55); }
.ks-fab-main:active { transform: scale(.92); }
.ks-fab-wrap.open .ks-fab-main { transform: rotate(135deg); }
.ks-fab-main-icon { position: relative; z-index: 1; line-height: 1; }

/* 移动端 FAB 位置调整 */
@media (max-width: 820px) {
    .ks-fab-wrap {
        right: 14px;
        bottom: 86px;
    }
    .ks-fab-main { width: 52px; height: 52px; font-size: 24px; }
    .ks-fab-sub-btn { width: 42px; height: 42px; font-size: 18px; }
    .ks-fab-sub-label { font-size: 12px; padding: 6px 12px; }
}

/* ---------- 模糊 Q 弹加载动画 ---------- */
.ks-loading-q {
    text-align: center;
    padding: 80px 20px;
    color: var(--ks-text-muted);
}
.ks-loading-q-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
}
.ks-loading-q-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ks-primary), var(--ks-primary-3));
    box-shadow: 0 4px 12px rgba(10,132,255,.35);
    animation: ksQBounce 1.2s ease-in-out infinite;
}
.ks-loading-q-dot:nth-child(1) { animation-delay: 0s; }
.ks-loading-q-dot:nth-child(2) { animation-delay: .15s; }
.ks-loading-q-dot:nth-child(3) { animation-delay: .3s; }
@keyframes ksQBounce {
    0%, 80%, 100% { transform: scale(.6) translateY(0); opacity: .5; }
    40% { transform: scale(1.3) translateY(-12px); opacity: 1; }
}
.ks-loading-q-text {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    animation: ksQFade 1.4s ease-in-out infinite;
}
@keyframes ksQFade {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}

/* 页面加载模糊过渡 */
.ks-main.is-loading {
    filter: blur(6px);
    opacity: .4;
    transition: filter .25s, opacity .25s;
    pointer-events: none;
}
.ks-main.is-loaded {
    animation: ksPageIn .55s cubic-bezier(.2, 1.2, .3, 1);
}
@keyframes ksPageIn {
    from { opacity: 0; transform: translateY(12px) scale(.98); filter: blur(8px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* ---------- 表单弹窗（大号 Modal） ---------- */
.ks-modal-lg {
    max-width: 520px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    text-align: left;
    padding: 28px 26px 24px;
}
.ks-modal-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(120, 120, 128, .18);
}
.ks-modal-head-icon {
    width: 42px; height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    background: linear-gradient(135deg, var(--ks-primary), var(--ks-primary-2));
    box-shadow: 0 4px 14px rgba(10,132,255,.35);
    flex: none;
}
.ks-modal-head-title {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.02em;
}
.ks-modal-head-sub {
    font-size: 12px;
    color: var(--ks-text-muted);
    margin-top: 2px;
}
.ks-modal-close-corner {
    position: absolute;
    top: 14px; right: 14px;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid var(--ks-glass-border);
    background: rgba(255,255,255,.5);
    color: var(--ks-text-muted);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .25s;
}
.ks-modal-close-corner:hover {
    background: rgba(255,69,58,.12);
    color: var(--ks-danger);
    transform: rotate(90deg);
}

/* 弹窗内表单优化 */
.ks-modal-lg .ks-form-group { margin-bottom: 14px; }
.ks-modal-lg .ks-input,
.ks-modal-lg .ks-textarea {
    background: rgba(255,255,255,.7);
    border-radius: 12px;
}

/* ---------- 留言/友链入口提示卡（移动端 FAB 指引） ---------- */
.ks-fab-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(10,132,255,.08), rgba(191,90,242,.08));
    border: 1px dashed rgba(10,132,255,.3);
    border-radius: var(--ks-radius-sm);
    color: var(--ks-text-2);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 18px;
}
.ks-fab-hint-icon {
    font-size: 20px;
    animation: ksFabHint 2s ease-in-out infinite;
}
@keyframes ksFabHint {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* ---------- 暗色模式补充 ---------- */
body.ks-dark .ks-bottom-nav-item.active {
    color: #6EB6FF;
    background: rgba(10,132,255,.18);
}
body.ks-dark .ks-fab-sub-label,
body.ks-dark .ks-fab-sub-btn {
    background: rgba(28,28,30,.82);
    border-color: rgba(255,255,255,.14);
    color: var(--ks-text);
}
body.ks-dark .ks-fab-main {
    box-shadow: 0 8px 24px rgba(94,92,230,.55);
}
body.ks-dark .ks-modal-close-corner {
    background: rgba(60,60,67,.4);
    border-color: rgba(255,255,255,.14);
    color: var(--ks-text-muted);
}
body.ks-dark .ks-fab-hint {
    background: linear-gradient(135deg, rgba(10,132,255,.14), rgba(191,90,242,.14));
    border-color: rgba(10,132,255,.3);
    color: var(--ks-text-2);
}
body.ks-dark .ks-modal-head { border-bottom-color: rgba(255,255,255,.1); }
body.ks-dark .ks-modal-lg .ks-input,
body.ks-dark .ks-modal-lg .ks-textarea { background: rgba(60,60,67,.4); }

/* ---------- 防止移动端底部导航遮挡内容 ---------- */
@media (max-width: 820px) {
    .ks-footer { padding-bottom: 96px; }
}

/* ============================================================
   🆕 需求优化：滚动隐藏导航 + 移动端底部导航 + QQ头像
   ============================================================ */

/* ---------- 顶部导航滚动隐藏/显示（直接显隐，无动画） ---------- */
.ks-nav.nav-hidden {
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
    transition: none;
}
.ks-nav.nav-showing {
    transform: translateY(0);
    opacity: 1;
}

/* ---------- Phosphor Icons 图标库适配 ---------- */
.ph-fill, .ph-bold {
    vertical-align: middle;
    font-style: normal;
}

/* ---------- 头像上传预览 ---------- */
.ks-avatar-upload-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}
.ks-avatar-preview {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    background: linear-gradient(135deg, var(--ks-primary), var(--ks-primary-3));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 32px;
    flex: none;
    border: 3px solid rgba(255,255,255,.6);
    box-shadow: 0 6px 18px rgba(31,38,135,.18);
    overflow: hidden;
}
.ks-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.ks-avatar-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ks-avatar-actions .ks-btn { padding: 7px 14px; font-size: 13px; }

/* QQ 头像获取提示 */
.ks-qq-avatar-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--ks-primary);
    cursor: pointer;
    user-select: none;
}
.ks-qq-avatar-hint:hover { text-decoration: underline; }
.ks-qq-avatar-hint.loading { color: var(--ks-text-muted); cursor: default; }

/* ---------- 作息显示开关（首页模块） ---------- */
/* 已通过 PHP 条件控制，此处仅补充样式 */

/* ---------- 赞助二维码上传区 ---------- */
.ks-qrcode-upload {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
}
.ks-qrcode-preview {
    width: 100px;
    height: 100px;
    border-radius: 14px;
    object-fit: contain;
    background: rgba(255,255,255,.6);
    border: 1px solid var(--ks-glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ks-text-muted);
    font-size: 22px;
    flex: none;
    overflow: hidden;
}
.ks-qrcode-preview img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- 后台列表页 + 添加按钮布局 ---------- */
.ks-list-with-fab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.ks-list-with-fab .ks-card-title { margin-bottom: 0; }
.ks-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--ks-primary), var(--ks-primary-2));
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(10,132,255,.35);
    transition: transform .25s cubic-bezier(.2, 1.6, .3, 1), box-shadow .25s;
}
.ks-add-btn:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 8px 22px rgba(10,132,255,.45); }
.ks-add-btn:active { transform: scale(.96); }
.ks-add-btn .ph { font-size: 18px; }

/* ---------- 暗色模式补充 ---------- */
body.ks-dark .ks-nav.nav-hidden { box-shadow: none; }

/* ---------- 移动端后台底部导航 ---------- */
@media (max-width: 820px) {
    .ks-list-with-fab { flex-wrap: wrap; gap: 10px; }
    .ks-add-btn { padding: 8px 16px; font-size: 13px; }
}

/* ---------- 弹窗表单内文件输入 ---------- */
.ks-modal-lg input[type="file"] {
    width: 100%;
    padding: 10px;
    border-radius: 12px;
    border: 2px dashed rgba(120,120,128,.3);
    background: rgba(255,255,255,.4);
    cursor: pointer;
    font-size: 13px;
    color: var(--ks-text-2);
    transition: all .2s;
}
.ks-modal-lg input[type="file"]:hover {
    border-color: var(--ks-primary);
    background: rgba(10,132,255,.06);
}
body.ks-dark .ks-modal-lg input[type="file"] {
    background: rgba(60,60,67,.3);
    border-color: rgba(255,255,255,.18);
    color: var(--ks-text-2);
}

/* ---------- 留言列表头像 ---------- */
.ks-message-avatar-img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    border: 2px solid rgba(255,255,255,.6);
    box-shadow: 0 3px 10px rgba(31,38,135,.15);
}

/* ---------- 作息卡片开关 ---------- */
.ks-schedule-card {
    transition: all .4s;
}
.ks-schedule-card.disabled {
    opacity: .35;
    filter: grayscale(.6);
    pointer-events: none;
}

/* ---------- 导航滚动阴影效果（始终可见） ---------- */
.ks-nav.nav-scrolled {
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.18);
    transform: scale(0.98);
}

/* ---------- 关于我页面优化 ---------- */
.ks-about-hero {
    position: relative;
    overflow: hidden;
    padding: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.65), rgba(255,255,255,.4));
}
.ks-about-hero-bg {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(10,132,255,.15), transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(191,90,242,.15), transparent 50%);
    pointer-events: none;
}
.ks-about-hero-content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 32px;
    flex-wrap: wrap;
}
.ks-about-avatar-wrap {
    position: relative;
    flex: none;
}
.ks-about-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255,255,255,.8);
    box-shadow: 0 10px 40px rgba(31,38,135,.2);
    transition: transform .3s ease;
}
.ks-about-avatar:hover { transform: scale(1.05); }
.ks-about-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 52px;
    background: linear-gradient(135deg, #0A84FF, #BF5AF2);
}
.ks-about-online {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: rgba(255,255,255,.85);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #30D158;
    box-shadow: 0 4px 12px rgba(31,38,135,.15);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.ks-about-online.offline { color: #8E8E93; }
.ks-about-info { flex: 1; min-width: 240px; }
.ks-about-name {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 6px;
    background: linear-gradient(135deg, var(--ks-text), var(--ks-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.ks-about-slogan {
    margin: 0 0 14px;
    font-size: 15px;
    color: var(--ks-text-muted);
    font-weight: 500;
}
.ks-about-intro {
    line-height: 1.9;
    color: var(--ks-text-2);
    font-size: 14px;
}

/* 统计卡片 */
.ks-stat-card {
    text-align: center;
    padding: 24px 16px;
}
.ks-stat-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(10,132,255,.15), rgba(191,90,242,.15));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--ks-primary);
}
.ks-stat-num {
    font-size: 28px;
    font-weight: 800;
    color: var(--ks-text);
    margin-bottom: 4px;
    letter-spacing: -1px;
}
.ks-stat-label {
    font-size: 13px;
    color: var(--ks-text-muted);
    font-weight: 500;
}

/* 统计水平条（3 项并排，移动端保持水平一行） */
.ks-stat-row {
    display: flex;
    align-items: stretch;
    padding: 18px 8px;
    gap: 4px;
}
.ks-stat-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    padding: 4px 6px;
    position: relative;
}
.ks-stat-item + .ks-stat-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 15%;
    bottom: 15%;
    width: 1px;
    background: rgba(0,0,0,.08);
}
.ks-stat-item-icon {
    font-size: 22px;
    color: var(--ks-primary);
    line-height: 1;
    margin-bottom: 2px;
}
.ks-stat-row .ks-stat-num {
    font-size: 20px;
    font-weight: 800;
    color: var(--ks-text);
    line-height: 1.2;
    letter-spacing: -0.5px;
}
.ks-stat-row .ks-stat-label {
    font-size: 12px;
    color: var(--ks-text-muted);
    font-weight: 500;
}
/* 在线状态绿点（脉冲动画，复用 ksPulse） */
.ks-stat-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #30D158;
    box-shadow: 0 0 0 0 rgba(48,209,88,.5);
    animation: ksPulse 2s infinite;
    margin-bottom: 2px;
    display: inline-block;
}
.ks-stat-dot.offline {
    background: var(--ks-text-muted);
    animation: none;
    box-shadow: none;
}
/* Hero 卡在线点（补 .ks-about-online .ks-dot 缺失样式） */
.ks-about-online .ks-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #30D158;
    box-shadow: 0 0 0 0 rgba(48,209,88,.5);
    animation: ksPulse 2s infinite;
    display: inline-block;
    flex: none;
}
.ks-about-online.offline .ks-dot {
    background: #8E8E93;
    animation: none;
    box-shadow: none;
}
body.ks-dark .ks-stat-item + .ks-stat-item::before {
    background: rgba(255,255,255,.1);
}

/* ---------- 运势卡片优化 ---------- */
.ks-fortune-widget { overflow: hidden; }
.ks-fortune-header {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.ks-fortune-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ks-text-2);
}
.ks-fortune-label { color: var(--ks-text); }
.ks-fortune-level-badge {
    margin-left: auto;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #FF9F0A, #FF6B00);
    border-radius: 12px;
}
.ks-fortune-stars-row {
    display: flex;
    gap: 2px;
    margin-top: 4px;
}
.ks-fortune-stats {
    background: rgba(10,132,255,.05);
    border-radius: 12px;
    padding: 12px 14px;
}
.ks-fortune-stat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    font-size: 13px;
    color: var(--ks-text-2);
}
.ks-fortune-stat-row .label {
    flex: 0 0 40px;
    font-size: 12px;
    color: var(--ks-text-muted);
    font-weight: 600;
}
.ks-fortune-bar {
    flex: 1;
    height: 7px;
    background: rgba(0,0,0,.07);
    border-radius: 4px;
    overflow: hidden;
}
.ks-fortune-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #0A84FF, #BF5AF2);
    transition: width .6s ease;
}
.ks-fortune-desc {
    margin-top: 12px;
    padding: 10px 12px;
    font-size: 12px;
    color: var(--ks-text-muted);
    background: rgba(255,255,255,.5);
    border-radius: 10px;
    line-height: 1.6;
    font-style: italic;
}

/* 兼容旧运势样式 */
.ks-fortune-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ks-primary);
    margin-bottom: 8px;
}
.ks-fortune-stars-inline { display: inline-flex; gap: 2px; }
.ks-fortune-star { font-size: 14px; opacity: .2; }
.ks-fortune-star.active { opacity: 1; }

/* ---------- 留言回复样式 ---------- */
.ks-message-item.ks-message-root {
    padding-bottom: 16px;
    border-bottom: 1px dashed rgba(0,0,0,.08);
}
.ks-message-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.ks-msg-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    color: var(--ks-text-muted);
    background: rgba(0,0,0,.04);
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: all .2s;
    font-family: inherit;
}
.ks-msg-action:hover {
    color: var(--ks-primary);
    background: rgba(10,132,255,.1);
}
.ks-msg-action i { font-size: 14px; }
.ks-replies-wrap {
    margin-top: 12px;
    padding: 12px;
    background: rgba(10,132,255,.04);
    border-radius: 14px;
    border-left: 3px solid var(--ks-primary);
}
.ks-reply-item {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.ks-reply-item:last-child { border-bottom: none; }
.ks-reply-avatar {
    width: 32px !important;
    height: 32px !important;
    font-size: 13px;
}
.ks-reply-name {
    font-size: 13px;
    font-weight: 600;
}
.ks-reply-empty {
    text-align: center;
    padding: 12px;
    color: var(--ks-text-muted);
    font-size: 13px;
}
.ks-message-location {
    font-size: 11px;
    color: var(--ks-text-muted);
    background: rgba(0,0,0,.05);
    padding: 2px 8px;
    border-radius: 10px;
}
.ks-message-admin-reply {
    background: linear-gradient(135deg, rgba(10,132,255,.1), rgba(191,90,242,.1));
    border-radius: 12px;
    padding: 10px 14px;
    margin-top: 10px;
    font-size: 13px;
    color: var(--ks-text-2);
    border-left: 3px solid var(--ks-primary);
}

/* ---------- 留言 pill 标签（地址 + 天气 + 详细时间）---------- */
.ks-msg-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ks-msg-time-detail {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--ks-text-muted);
    background: rgba(120, 120, 128, .08);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
}
.ks-msg-time-detail i {
    font-size: 11px;
    opacity: .8;
}
.ks-msg-meta-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.ks-msg-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 12px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    transition: transform .2s cubic-bezier(.34, 1.56, .64, 1);
}
.ks-msg-meta-pill:active {
    transform: scale(.94);
}
.ks-msg-meta-pill i {
    font-size: 12px;
}
.ks-msg-loc-pill {
    color: var(--ks-primary);
    background: rgba(10, 132, 255, .1);
}
.ks-msg-weather-pill {
    color: #ff7a18;
    background: linear-gradient(135deg, rgba(255, 122, 24, .12), rgba(255, 175, 75, .12));
}

/* ---------- 留言分页器 ---------- */
.ks-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px dashed rgba(0,0,0,.08);
}
.ks-pager-nav {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-text-2);
    background: rgba(120,120,128,.08);
    border-radius: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s;
    -webkit-user-select: none;
    user-select: none;
}
.ks-pager-nav:hover {
    color: var(--ks-primary);
    background: rgba(10,132,255,.1);
}
.ks-pager-nav.is-disabled {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none;
}
.ks-pager-nums {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.ks-pager-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-text-2);
    background: rgba(120,120,128,.08);
    border-radius: 12px;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s;
    -webkit-user-select: none;
    user-select: none;
}
.ks-pager-num:hover {
    color: var(--ks-primary);
    background: rgba(10,132,255,.12);
}
.ks-pager-num.is-active {
    color: #fff;
    background: var(--ks-primary);
    box-shadow: 0 4px 14px rgba(10,132,255,.35);
    cursor: default;
}
.ks-pager-gap {
    padding: 0 2px;
    font-size: 13px;
    color: var(--ks-text-muted);
    -webkit-user-select: none;
    user-select: none;
}
@media (max-width: 480px) {
    .ks-pager { gap: 6px; margin-top: 18px; padding-top: 14px; }
    .ks-pager-nav { padding: 6px 10px; font-size: 12px; }
    .ks-pager-num { min-width: 30px; height: 30px; font-size: 12px; }
}

/* ---------- 留言弹窗中的天气 pill 区域 ---------- */
.ks-fab-weather-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 12px;
    margin-bottom: 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(10, 132, 255, .06), rgba(191, 90, 242, .06));
    border: 1px solid rgba(10, 132, 255, .12);
    animation: ksFabWeatherIn .35s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes ksFabWeatherIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.ks-fab-weather-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-text-1);
    background: rgba(255, 255, 255, .7);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.ks-fab-weather-pill i {
    font-size: 16px;
    color: var(--ks-primary);
}
.ks-fab-weather-pill .ks-fab-weather-text {
    color: var(--ks-text-2);
    font-weight: 500;
}
/* 弹窗中第二个 pill（天气）用暖色，区别于地址 pill */
.ks-fab-weather-pill#ksFabWeatherPill i {
    color: #ff7a18;
}

/* ---------- 留言详情抽屉式弹窗（从底部滑出）---------- */
.ks-drawer-mask {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, .45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    transition: opacity .3s ease;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /* 桌面端让弹窗整体上移，避免贴底 */
    padding-bottom: 40px;
}
.ks-drawer {
    position: relative;
    width: 100%;
    max-width: 640px;
    /* 固定高度，防止内容不同导致弹窗高度不一致 */
    height: 88vh;
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, .18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform .38s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
}
.ks-drawer-open { transform: translateY(0); }

.ks-drawer-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(120, 120, 128, .12);
    color: var(--ks-text-1);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .2s;
}
.ks-drawer-close:hover { background: rgba(120, 120, 128, .2); transform: rotate(90deg); }

.ks-drawer-loading {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    gap: 12px;
}

.ks-drawer-head {
    flex-shrink: 0;
    padding: 10px 20px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    text-align: center;
}
.ks-drawer-grab {
    width: 36px;
    height: 4px;
    background: rgba(120, 120, 128, .3);
    border-radius: 2px;
    margin: 0 auto 10px;
}
.ks-drawer-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.ks-drawer-title-row i { font-size: 18px; color: var(--ks-primary); }
.ks-drawer-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ks-text-1);
}
.ks-drawer-sub {
    font-size: 12px;
    color: var(--ks-text-muted);
    margin-left: 8px;
    font-weight: normal;
}

.ks-drawer-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px 20px 8px;
    scroll-behavior: smooth;
}
.ks-drawer-body::-webkit-scrollbar { width: 6px; }
.ks-drawer-body::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .12); border-radius: 3px; }

.ks-detail-main { margin-bottom: 16px; }
.ks-detail-date {
    text-align: center;
    font-size: 12px;
    color: var(--ks-text-muted);
    margin-bottom: 14px;
    font-weight: 500;
    letter-spacing: .3px;
}
.ks-detail-date-sub {
    margin-top: 22px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(0, 0, 0, .08);
}
.ks-detail-msg {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.ks-detail-msg .ks-detail-avatar,
.ks-detail-reply .ks-detail-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(10, 132, 255, .15), rgba(191, 90, 242, .15));
}
.ks-detail-avatar-text {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ks-primary);
    font-size: 15px;
    font-weight: 600;
}
.ks-detail-msg-body { flex: 1; min-width: 0; }
.ks-detail-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-text-1);
    margin-bottom: 4px;
}
.ks-detail-bubble {
    display: inline-block;
    max-width: 100%;
    background: rgba(120, 120, 128, .08);
    color: var(--ks-text-1);
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.55;
    word-break: break-word;
    margin-bottom: 6px;
}
.ks-detail-reply {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, .04);
}
.ks-detail-reply .ks-detail-avatar { width: 32px; height: 32px; font-size: 13px; }
.ks-detail-reply .ks-detail-bubble { font-size: 13px; padding: 9px 12px; }
.ks-detail-empty {
    text-align: center;
    padding: 36px 20px 24px;
    color: var(--ks-text-muted);
    font-size: 13px;
}
.ks-detail-empty i { display: block; font-size: 36px; margin-bottom: 10px; opacity: .4; }

/* 底部表单（图片3样式：身份栏 + 输入框 + 圆形发送按钮）*/
.ks-drawer-form {
    flex-shrink: 0;
    padding: 12px 16px 14px;
    border-top: 1px solid rgba(0, 0, 0, .06);
    background: rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.ks-drawer-alert {
    margin-bottom: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    text-align: center;
    animation: ksDrawerAlertIn .25s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes ksDrawerAlertIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 身份栏：头像 + 名字 + 地址/天气 pill */
.ks-drawer-ident-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(120, 120, 128, .06);
    cursor: pointer;
    margin-bottom: 8px;
    transition: background .2s, transform .2s cubic-bezier(.34, 1.56, .64, 1);
}
.ks-drawer-ident-bar:hover { background: rgba(120, 120, 128, .12); transform: translateY(-1px); }
.ks-drawer-ident-bar:active { transform: translateY(0); }
.ks-drawer-ident-flash { animation: ksIdentFlash 1.5s ease 0s 1; }
@keyframes ksIdentFlash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(10, 132, 255, 0); }
    30%, 70% { box-shadow: 0 0 0 4px rgba(10, 132, 255, .25); }
}
.ks-ident-info { flex-shrink: 0; }
.ks-ident-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: linear-gradient(135deg, rgba(10, 132, 255, .15), rgba(191, 90, 242, .15));
}
.ks-ident-avatar-text {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ks-primary);
    font-size: 14px;
    font-weight: 600;
}
.ks-ident-avatar-text i { font-size: 18px; }
.ks-ident-text { flex: 1; min-width: 0; }
.ks-ident-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-text-1);
    display: flex;
    align-items: center;
    gap: 6px;
}
.ks-ident-mode {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 8px;
    font-weight: normal;
    letter-spacing: .3px;
}
.ks-ident-mode-qq { background: rgba(0, 168, 255, .15); color: #00a8ff; }
.ks-ident-mode-anon { background: rgba(120, 120, 128, .15); color: var(--ks-text-muted); }
.ks-ident-mode-verified { background: rgba(52, 199, 89, .15); color: #34c759; display: inline-flex; align-items: center; gap: 2px; }
.ks-ident-mode-verified i { font-size: 11px; }
.ks-ident-mode-unverified { background: rgba(255, 69, 58, .15); color: #ff453a; display: inline-flex; align-items: center; gap: 2px; }
.ks-ident-mode-unverified i { font-size: 11px; }
.ks-ident-action {
    font-size: 11px;
    color: var(--ks-text-muted);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 3px;
}
.ks-ident-action i { font-size: 11px; }
.ks-ident-meta {
    flex-shrink: 0;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 50%;
}
.ks-ident-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 10px;
    background: rgba(120, 120, 128, .1);
    color: var(--ks-text-1);
    white-space: nowrap;
}
.ks-ident-meta-pill i { font-size: 11px; }
.ks-ident-loc { background: rgba(10, 132, 255, .1); color: #0a84ff; }
.ks-ident-weather { background: rgba(255, 122, 24, .1); color: #ff7a18; }
.ks-ident-loading { background: rgba(120, 120, 128, .15); color: var(--ks-text-muted); }

/* 输入区：textarea + 圆形发送按钮 */
.ks-drawer-input-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}
.ks-drawer-input-wrap {
    flex: 1;
    min-width: 0;
    background: rgba(120, 120, 128, .06);
    border-radius: 18px;
    padding: 8px 14px 4px;
    border: 1px solid rgba(120, 120, 128, .15);
    transition: border-color .2s, background .2s;
}
.ks-drawer-input-wrap:focus-within {
    border-color: rgba(10, 132, 255, .4);
    background: rgba(10, 132, 255, .04);
}
.ks-drawer-input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ks-text-1);
    resize: none;
    min-height: 24px;
    max-height: 120px;
    padding: 2px 0;
}
.ks-drawer-input::placeholder { color: var(--ks-text-muted); }
.ks-drawer-input-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    color: var(--ks-text-muted);
    margin-top: 4px;
}
.ks-drawer-enter-hint { opacity: .7; }

.ks-drawer-send {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #000;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), background .2s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}
.ks-drawer-send:hover { transform: scale(1.06); background: #1a1a1a; }
.ks-drawer-send:active { transform: scale(.94); }
.ks-drawer-send:disabled { opacity: .5; cursor: not-allowed; }
.ks-drawer-send-loading { animation: ksDrawerSendSpin 1s linear infinite; }
@keyframes ksDrawerSendSpin { to { transform: rotate(360deg); } }

.ks-drawer-tip {
    text-align: center;
    font-size: 11px;
    color: var(--ks-text-muted);
    margin-top: 8px;
}

/* 身份设置弹窗中的验证码区域 */
.ks-ident-captcha-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 4px 0 8px;
}
.ks-ident-captcha-wrap { flex: 1; min-width: 0; margin-bottom: 0; }
.ks-ident-captcha-wrap input {
    text-transform: uppercase;
    letter-spacing: 2px;
}
.ks-ident-captcha-img-wrap {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
.ks-ident-captcha-img-wrap img {
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, .08);
    background: #fff;
}
.ks-ident-captcha-refresh {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(120, 120, 128, .2);
    background: rgba(120, 120, 128, .06);
    color: var(--ks-text-1);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .2s;
}
.ks-ident-captcha-refresh:hover { background: rgba(120, 120, 128, .15); transform: rotate(180deg); }
.ks-ident-captcha-tip {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--ks-text-muted);
    margin: 0 0 12px;
    line-height: 1.4;
}
.ks-ident-captcha-tip i { font-size: 12px; flex-shrink: 0; }
.ks-ident-captcha-verified { color: #34c759; }
.ks-ident-captcha-verified i { color: #34c759; }

/* ---------- 身份设置弹窗（图片4样式）---------- */
.ks-ident-mask {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, .55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: opacity .25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ks-ident-modal {
    position: relative;
    width: 100%;
    max-width: 380px;
    background: #fff;
    border-radius: 18px;
    padding: 24px 22px 22px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), opacity .25s ease;
}
.ks-ident-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(120, 120, 128, .12);
    color: var(--ks-text-1);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .2s;
}
.ks-ident-close:hover { background: rgba(120, 120, 128, .2); transform: rotate(90deg); }
.ks-ident-title {
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    color: var(--ks-text-1);
    margin-bottom: 18px;
}
.ks-ident-tabs {
    display: flex;
    gap: 6px;
    background: rgba(120, 120, 128, .1);
    padding: 4px;
    border-radius: 12px;
    margin-bottom: 18px;
}
.ks-ident-tab {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px 0;
    border-radius: 9px;
    font-size: 13px;
    color: var(--ks-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: background .2s, color .2s, box-shadow .2s;
}
.ks-ident-tab.active {
    background: #fff;
    color: var(--ks-text-1);
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}
.ks-ident-tab i { font-size: 15px; }
.ks-ident-tab.active .ph-qq-logo { color: #00a8ff; }
.ks-ident-avatar-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
.ks-ident-avatar-preview {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(120, 120, 128, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ks-text-muted);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px dashed rgba(120, 120, 128, .25);
}
.ks-ident-avatar-preview i { font-size: 28px; }
.ks-ident-avatar-actions { flex: 1; min-width: 0; }
.ks-ident-avatar-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--ks-primary);
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(10, 132, 255, .08);
    transition: background .2s, transform .2s;
}
.ks-ident-avatar-btn:hover { background: rgba(10, 132, 255, .15); transform: translateY(-1px); }
.ks-ident-avatar-btn i { font-size: 13px; }
.ks-ident-avatar-tip {
    font-size: 11px;
    color: var(--ks-text-muted);
    margin-top: 6px;
    line-height: 1.4;
    transition: color .2s;
}
.ks-ident-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(120, 120, 128, .06);
    border: 1px solid rgba(120, 120, 128, .15);
    border-radius: 12px;
    padding: 0 12px;
    margin-bottom: 10px;
    transition: border-color .2s, background .2s;
}
.ks-ident-input-wrap:focus-within {
    border-color: rgba(10, 132, 255, .4);
    background: rgba(10, 132, 255, .04);
}
.ks-ident-input-wrap i { font-size: 16px; color: var(--ks-text-muted); flex-shrink: 0; }
.ks-ident-input-wrap input {
    flex: 1;
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: 11px 0;
    font-family: inherit;
    font-size: 14px;
    color: var(--ks-text-1);
}
.ks-ident-input-wrap input::placeholder { color: var(--ks-text-muted); }
.ks-ident-privacy {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--ks-text-muted);
    margin: 14px 0 16px;
    line-height: 1.4;
}
.ks-ident-privacy i { font-size: 13px; color: #34c759; flex-shrink: 0; }
.ks-ident-save {
    width: 100%;
    border: none;
    background: #000;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    padding: 12px 0;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), background .2s;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.ks-ident-save:hover { background: #1a1a1a; transform: translateY(-1px); }
.ks-ident-save:active { transform: translateY(0); }
.ks-ident-save i { font-size: 16px; }

/* 暗色模式 */
body.ks-dark .ks-drawer { background: #1c1c1e; box-shadow: 0 -8px 40px rgba(0, 0, 0, .5); }
body.ks-dark .ks-drawer-head { border-bottom-color: rgba(255, 255, 255, .08); }
body.ks-dark .ks-drawer-form { border-top-color: rgba(255, 255, 255, .08); background: rgba(40, 40, 50, .75); }
body.ks-dark .ks-drawer-close { background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .9); }
body.ks-dark .ks-drawer-grab { background: rgba(255, 255, 255, .25); }
body.ks-dark .ks-detail-bubble { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .9); }
body.ks-dark .ks-detail-date-sub { border-bottom-color: rgba(255, 255, 255, .08); }
body.ks-dark .ks-detail-reply { border-top-color: rgba(255, 255, 255, .06); }
body.ks-dark .ks-drawer-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); }
body.ks-dark .ks-drawer-ident-bar { background: rgba(255, 255, 255, .06); }
body.ks-dark .ks-drawer-ident-bar:hover { background: rgba(255, 255, 255, .12); }
body.ks-dark .ks-drawer-input-wrap { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
body.ks-dark .ks-drawer-input-wrap:focus-within { border-color: rgba(10, 132, 255, .5); background: rgba(10, 132, 255, .08); }
body.ks-dark .ks-drawer-input { color: rgba(255, 255, 255, .95); }
body.ks-dark .ks-drawer-send { background: #fff; color: #000; box-shadow: 0 4px 12px rgba(0, 0, 0, .4); }
body.ks-dark .ks-drawer-send:hover { background: #e0e0e0; }
body.ks-dark .ks-ident-modal { background: #1c1c1e; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
body.ks-dark .ks-ident-close { background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .9); }
body.ks-dark .ks-ident-tabs { background: rgba(255, 255, 255, .06); }
body.ks-dark .ks-ident-tab.active { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .95); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
body.ks-dark .ks-ident-avatar-preview { background-color: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .2); }
body.ks-dark .ks-ident-avatar-btn { background: rgba(10, 132, 255, .15); }
body.ks-dark .ks-ident-input-wrap { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
body.ks-dark .ks-ident-input-wrap input { color: rgba(255, 255, 255, .95); }
body.ks-dark .ks-ident-save { background: #fff; color: #000; box-shadow: 0 4px 14px rgba(0, 0, 0, .4); }
body.ks-dark .ks-ident-mode-verified { background: rgba(52, 199, 89, .2); color: #30d158; }
body.ks-dark .ks-ident-mode-unverified { background: rgba(255, 69, 58, .2); color: #ff6961; }
body.ks-dark .ks-ident-captcha-img-wrap img { border-color: rgba(255, 255, 255, .12); background: #2c2c2e; }
body.ks-dark .ks-ident-captcha-refresh { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .15); color: rgba(255, 255, 255, .9); }
body.ks-dark .ks-ident-captcha-refresh:hover { background: rgba(255, 255, 255, .12); }

/* 移动端适配 */
@media (max-width: 768px) {
    /* 移动端弹窗固定高度，避免不同内容高度不一 */
    .ks-drawer { height: 88vh; border-radius: 16px 16px 0 0; }
    /* 移动端贴底，不留 padding-bottom */
    .ks-drawer-mask { padding-bottom: 0; }
    .ks-drawer-head { padding: 10px 16px 12px; }
    .ks-drawer-body { padding: 14px 16px 6px; }
    .ks-drawer-form { padding: 10px 12px 12px; }
    .ks-detail-msg .ks-detail-avatar { width: 34px; height: 34px; }
    .ks-detail-reply .ks-detail-avatar { width: 30px; height: 30px; }
    .ks-detail-bubble { font-size: 13px; padding: 9px 12px; }
    .ks-detail-reply .ks-detail-bubble { font-size: 12px; padding: 8px 11px; }
    .ks-detail-name { font-size: 12px; }
    .ks-detail-date { font-size: 11px; }
    .ks-ident-avatar { width: 32px; height: 32px; font-size: 12px; }
    .ks-ident-meta { max-width: 60%; }
    .ks-ident-meta-pill { font-size: 10px; padding: 2px 6px; }
    .ks-drawer-input { font-size: 13px; }
    .ks-drawer-send { width: 36px; height: 36px; font-size: 16px; }
    .ks-ident-modal { padding: 20px 18px 18px; max-width: 340px; }
    .ks-ident-title { font-size: 16px; margin-bottom: 14px; }
    .ks-ident-captcha-img-wrap img { height: 36px; }
    .ks-ident-captcha-refresh { width: 30px; height: 30px; font-size: 13px; }
}

/* ---------- 浮动播放器防止长按选中 ---------- */
.ks-float-player,
.ks-float-player * {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
}
.ks-float-player img {
    -webkit-user-drag: none;
    user-select: none;
}

/* ---------- 暗色模式适配 ---------- */
body.ks-dark .ks-about-hero {
    background: linear-gradient(135deg, rgba(40,40,50,.65), rgba(30,30,40,.4));
}
body.ks-dark .ks-about-avatar {
    border-color: rgba(255,255,255,.15);
    box-shadow: 0 10px 40px rgba(0,0,0,.3);
}
body.ks-dark .ks-about-online {
    background: rgba(40,40,50,.85);
    color: #30D158;
}
body.ks-dark .ks-stat-icon {
    background: linear-gradient(135deg, rgba(10,132,255,.2), rgba(191,90,242,.2));
}
body.ks-dark .ks-nav.nav-scrolled {
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
body.ks-dark .ks-replies-wrap {
    background: rgba(255,255,255,.04);
}
body.ks-dark .ks-msg-action {
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.6);
}
body.ks-dark .ks-msg-time-detail {
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .55);
}
body.ks-dark .ks-msg-loc-pill {
    background: rgba(10, 132, 255, .18);
    color: #6cb6ff;
}
body.ks-dark .ks-msg-weather-pill {
    background: linear-gradient(135deg, rgba(255, 122, 24, .18), rgba(255, 175, 75, .12));
    color: #ffb064;
}
body.ks-dark .ks-pager {
    border-top-color: rgba(255,255,255,.08);
}
body.ks-dark .ks-pager-nav,
body.ks-dark .ks-pager-num {
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.72);
}
body.ks-dark .ks-pager-nav:hover,
body.ks-dark .ks-pager-num:hover {
    background: rgba(10,132,255,.2);
    color: #6cb6ff;
}
body.ks-dark .ks-pager-num.is-active {
    background: var(--ks-primary);
    color: #fff;
}
body.ks-dark .ks-fab-weather-bar {
    background: linear-gradient(135deg, rgba(10, 132, 255, .12), rgba(191, 90, 242, .12));
    border-color: rgba(10, 132, 255, .2);
}
body.ks-dark .ks-fab-weather-pill {
    background: rgba(40, 40, 50, .7);
    color: rgba(255, 255, 255, .9);
}
body.ks-dark .ks-fab-weather-pill .ks-fab-weather-text {
    color: rgba(255, 255, 255, .7);
}
body.ks-dark .ks-fortune-stats {
    background: rgba(255,255,255,.05);
}

/* ---------- 移动端 about 页面 ---------- */
@media (max-width: 768px) {
    .ks-about-hero-content {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
        gap: 20px;
    }
    .ks-about-info { min-width: auto; }
    .ks-about-name { font-size: 24px; }
    .ks-about-avatar { width: 100px; height: 100px; }
    .ks-about-online { white-space: nowrap; }
    .ks-stat-num { font-size: 22px; }
    /* 统计水平条移动端保持 3 列并排，缩小字号 */
    .ks-stat-row { padding: 14px 4px; }
    .ks-stat-row .ks-stat-num { font-size: 16px; }
    .ks-stat-row .ks-stat-label { font-size: 11px; }
    .ks-stat-item { padding: 4px 4px; }
    .ks-stat-item-icon { font-size: 18px; }
    .ks-stat-dot { width: 8px; height: 8px; }
}

/* ========== 后台 LOGO 头像样式 ========== */
.ks-nav-brand .ks-logo-img {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    object-fit: cover;
    box-shadow: 0 4px 14px rgba(94, 92, 230, .4);
    border: 2px solid rgba(255,255,255,.7);
}
body.ks-dark .ks-nav-brand .ks-logo-img {
    border-color: rgba(255,255,255,.15);
}
.ks-brand-name {
    font-weight: 700;
    font-size: 15px;
}

/* ========== 后台顶部导航头像下拉菜单 ========== */
.ks-nav-brand { position: relative; }
.ks-nav-avatar-btn {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: 11px;
    transition: transform .2s, opacity .2s;
}
.ks-nav-avatar-btn:hover { opacity: .9; }
.ks-nav-avatar-btn:active { transform: scale(.94); }
.ks-nav-user-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    min-width: 156px;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .16);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 1300;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.ks-nav-user-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.ks-nav-user-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ks-text);
    white-space: nowrap;
    transition: background .2s, color .2s;
}
.ks-nav-user-item:hover { background: rgba(94, 92, 230, .12); color: var(--ks-primary); }
.ks-nav-user-item i { font-size: 18px; }
body.ks-dark .ks-nav-user-menu {
    background: rgba(30, 30, 40, .96);
    border-color: rgba(255, 255, 255, .1);
}
body.ks-dark .ks-nav-user-item { color: #fff; }
body.ks-dark .ks-nav-user-item:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* ========== 后台导航汉堡按钮（桌面端默认隐藏） ========== */
.ks-nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 22px;
    color: var(--ks-text);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
}
/* 移动端汉堡按钮 + 下拉面板的完整定义见文末
   “顶部导航：统一定位（桌面 / 移动端）” 一节（唯一权威定义） */

/* ========== 后台主内容区顶部偏移 ========== */
body.admin #ksAdminContent {
    padding-top: 88px;
    min-height: calc(100vh - 88px);
}

/* ========== 弹窗开关布局修复 ========== */
.ks-auto-cover-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 10px 0;
    border-top: 1px dashed rgba(0,0,0,.08);
    margin-top: 4px;
}
.ks-auto-cover-wrap .ks-label {
    flex: 0 0 auto;
    margin-bottom: 0;
    font-size: 13px;
    min-width: auto;
}
.ks-auto-cover-wrap > div:last-child {
    flex: 1 1 100%;
    font-size: 11px;
    color: var(--ks-text-muted);
    margin-top: 2px;
}

/* 弹窗 max-height + 滚动 */
.ks-modal {
    max-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
}
.ks-modal form {
    overflow-y: auto;
    padding-right: 6px;
    flex: 1;
}
.ks-modal form::-webkit-scrollbar { width: 4px; }
.ks-modal form::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 4px; }

/* Phosphor 图标在导航中统一尺寸 */
.ks-nav-links a i.ph,
.ks-nav-links a i.ph-bold,
.ks-nav-cta i.ph {
    font-size: 18px;
}

/* 导航永远置顶不被滚动隐藏 */
.ks-nav {
    position: fixed !important;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 1280px;
    z-index: 1000;
    transition: box-shadow .3s;
}

/* 后台设置按钮 */
.ks-admin-settings-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: rgba(10,132,255,.08);
    border: 1px solid rgba(10,132,255,.2);
    border-radius: 10px;
    color: var(--ks-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    font-family: inherit;
}
.ks-admin-settings-btn:hover {
    background: rgba(10,132,255,.15);
    transform: translateY(-1px);
}
.ks-admin-settings-btn i { font-size: 16px; }

/* ========== 弹窗重大修复 + 玻璃模糊 + 关闭按钮可用 ========== */
.ks-modal-mask {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 15, 25, .38) !important;
    -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
    backdrop-filter: blur(14px) saturate(180%) !important;
    z-index: 1500 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    animation: ksFadeIn .3s ease !important;
}
.ks-modal {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 1501 !important;
    width: 100% !important;
    max-width: 520px !important;
    max-height: calc(100vh - 60px) !important;
    display: flex !important;
    flex-direction: column !important;
    background: rgba(255, 255, 255, 0.62) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.75) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255,255,255,0.9) !important;
    overflow: hidden !important;
    padding: 0 !important;
    text-align: left !important;
}
body.ks-dark .ks-modal {
    background: rgba(28, 28, 30, 0.62) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
body.ks-dark .ks-modal-mask {
    background: rgba(0, 0, 0, .55) !important;
}
/* 弹窗内表单区域：纯透明让玻璃透出来 */
.ks-modal form,
.ks-modal .ks-form {
    flex: 1;
    overflow-y: auto;
    background: transparent !important;
    padding: 18px 22px 22px !important;
}
.ks-modal form::-webkit-scrollbar { width: 4px; }
.ks-modal form::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 4px; }

/* 弹窗头部 */
.ks-modal .ks-modal-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px 4px;
    flex: none;
    background: transparent !important;
    border-bottom: none !important;
}
.ks-modal .ks-modal-head-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    background: linear-gradient(135deg, #0A84FF, #5E5CE6);
    color: #fff;
    flex: none;
}
.ks-modal .ks-modal-head-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.2;
}
.ks-modal .ks-modal-head-sub {
    font-size: 12px;
    color: var(--ks-text-muted);
    margin-top: 2px;
}

/* 关闭按钮强力修复：始终可点击 + 不被裁剪 */
.ks-modal-close-corner {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(0, 0, 0, 0.06) !important;
    color: var(--ks-text) !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all .22s !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.ks-modal-close-corner:hover {
    background: rgba(255, 69, 58, .18) !important;
    color: #FF3B30 !important;
    transform: rotate(90deg) !important;
}
.ks-modal-close-corner:active {
    transform: scale(.85) !important;
}
body.ks-dark .ks-modal-close-corner {
    background: rgba(255,255,255,.08) !important;
    color: rgba(255,255,255,.85) !important;
}
/* ========== 弹窗内开关样式修复 ========== */
/* 1) 带说明文字的开关：整行卡片式（左侧开关 + 右侧文字）
   注意：仅作用于非 .ks-flex 行（紧凑开关所在的行），避免把 48×28 的小开关拉成整行 */
.ks-modal .ks-form-group:not(.ks-flex) label.ks-switch,
.ks-modal > label.ks-switch {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 46px;
    padding: 10px 16px !important;
    margin-top: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    flex: none !important;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 12px;
    background: rgba(255, 255, 255, .5);
    box-sizing: border-box !important;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.ks-modal .ks-form-group:not(.ks-flex) label.ks-switch:hover,
.ks-modal > label.ks-switch:hover {
    background: rgba(255, 255, 255, .85);
    border-color: rgba(10, 132, 255, .25);
}
.ks-modal .ks-form-group:not(.ks-flex) label.ks-switch input[type="checkbox"],
.ks-modal > label.ks-switch input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 0;
    position: relative;
    opacity: 1;
    width: 44px;
    height: 24px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(0, 0, 0, .15);
    border-radius: 12px;
    cursor: pointer;
    transition: background .2s;
}
.ks-modal .ks-form-group:not(.ks-flex) label.ks-switch input[type="checkbox"]::before,
.ks-modal > label.ks-switch input[type="checkbox"]::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.ks-modal .ks-form-group:not(.ks-flex) label.ks-switch input[type="checkbox"]:checked,
.ks-modal > label.ks-switch input[type="checkbox"]:checked {
    background: var(--ks-success, #30D158);
}
.ks-modal .ks-form-group:not(.ks-flex) label.ks-switch input[type="checkbox"]:checked::before,
.ks-modal > label.ks-switch input[type="checkbox"]:checked::before {
    transform: translateX(20px);
}
.ks-modal .ks-form-group:not(.ks-flex) label.ks-switch > span,
.ks-modal > label.ks-switch > span {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ks-text);
    word-break: break-word;
    white-space: normal !important;
    display: block;
}
/* 2) 紧凑开关（.ks-flex 行内的 48×28 开关）：保持原尺寸与对齐 */
.ks-modal .ks-form-group.ks-flex {
    align-items: center;
    gap: 12px;
}
.ks-modal .ks-form-group.ks-flex > label.ks-switch {
    width: 48px !important;
    height: 28px !important;
    flex: 0 0 48px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: none !important;
}
body.ks-dark .ks-modal .ks-form-group:not(.ks-flex) label.ks-switch,
body.ks-dark .ks-modal > label.ks-switch {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .1);
}
body.ks-dark .ks-modal .ks-form-group:not(.ks-flex) label.ks-switch input[type="checkbox"],
body.ks-dark .ks-modal > label.ks-switch input[type="checkbox"] {
    background: rgba(255, 255, 255, .2);
}
body.ks-dark .ks-modal .ks-form-group:not(.ks-flex) label.ks-switch > span,
body.ks-dark .ks-modal > label.ks-switch > span {
    color: rgba(255, 255, 255, .85);
}
/* 弹窗内 img-upload 不被 label 挤压 */
.ks-modal .ks-img-upload {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.ks-modal .ks-img-upload-preview {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
}
.ks-modal .ks-img-upload > div:last-child {
    flex: 1;
    min-width: 0;
}
.ks-modal .ks-img-upload > div:last-child input {
    width: 100%;
    box-sizing: border-box;
}
body.ks-dark .ks-auto-cover-wrap {
    border-top-color: rgba(255,255,255,.1);
    border-bottom-color: rgba(255,255,255,.1);
}

/* ============================================================
   🔧 综合修复：导航定位 + 内容偏移 + 按钮显示 + 布局
   ============================================================ */

/* ---------- 统一顶部导航为 Fixed 定位（覆盖所有冲突定义） ---------- */
.ks-nav {
    position: fixed !important;
    top: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 32px) !important;
    max-width: 1280px !important;
    margin: 0 !important;
    z-index: 1000 !important;
}

/* ---------- 主内容区：给固定导航让出空间 ---------- */
.ks-main {
    padding-top: 104px !important;
    min-height: calc(100vh - 200px);
}

/* ---------- 桌面端（>820px）：显示导航链接，隐藏汉堡按钮 ---------- */
@media (min-width: 821px) {
    body.admin .ks-nav-links {
        display: flex !important;
        position: static !important;
        max-width: 58vw !important;
        flex-direction: row;
        align-items: center;
        gap: 2px;
        /* 复位移动端遗留状态（视口从移动端切回桌面时用） */
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    body.admin .ks-nav-toggle { display: none !important; }
}

/* ---------- 移动端（<=820px）：顶部导航简化，显示汉堡按钮 ---------- */
@media (max-width: 820px) {
    .ks-nav {
        top: 10px !important;
        width: calc(100% - 20px) !important;
        height: 52px !important;
        padding: 0 8px 0 14px !important;
    }
    .ks-nav-brand { font-size: 14px; gap: 8px; }
    .ks-nav-brand .ks-logo { width: 28px; height: 28px; font-size: 13px; }
    
    /* 移动端后台顶部导航：显示汉堡按钮（仅后台；前台由底部导航承担） */
    body.admin .ks-nav-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0 !important;
        border-radius: 12px;
        color: var(--ks-text);
        -webkit-tap-highlight-color: transparent;
        transition: background .2s ease, transform .2s ease;
    }
    body.admin .ks-nav-toggle:active { transform: scale(.92); }
    body.admin .ks-nav-toggle[aria-expanded="true"] {
        background: rgba(10, 132, 255, .12);
        color: var(--ks-primary);
    }
    
    /* 移动端导航面板：相对导航栏定位。
       注意：导航栏带 transform，会形成“包含块”，因此这里必须用 absolute；
       若用 fixed 会被导航栏的 overflow:hidden 裁剪，表现就是“点了没反应”。 */
    body.admin .ks-nav-links {
        display: flex !important;
        position: absolute !important;
        top: calc(100% + 10px) !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-width: none !important;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        background: var(--ks-glass-strong);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        backdrop-filter: blur(20px) saturate(180%);
        border-radius: 18px;
        padding: 10px;
        box-shadow: var(--ks-shadow-lg);
        border: 1px solid var(--ks-glass-border-strong);
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        overflow-x: hidden !important;
        z-index: 1001;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px) scale(.98);
        pointer-events: none;
        transition: opacity .24s ease, transform .3s cubic-bezier(.2, 1.4, .3, 1), visibility 0s linear .3s;
    }
    body.admin .ks-nav-links.open {
        visibility: visible;
        opacity: 1;
        transform: translateY(0) scale(1);
        transition-delay: 0s;
        pointer-events: auto;
    }
    body.admin .ks-nav-links a {
        padding: 12px 16px;
        border-radius: 12px;
        font-size: 15px;
        text-align: left;
        justify-content: flex-start;
        gap: 10px;
        transform: none;
    }
    body.admin .ks-nav-links a:hover { transform: none; }
    body.admin .ks-nav-links a.active { transform: none; animation: none; }
    body.admin .ks-nav-links a span { margin-left: 0; }
    
    /* 移动端主内容区：给顶部导航(52px+10px)和底部导航(70px)都留出空间 */
    .ks-main {
        padding-top: 78px !important;
        padding-bottom: 120px !important;
    }
}

/* ---------- 后台页面：导航固定 + 内容偏移 ---------- */
body.admin .ks-nav {
    top: 16px !important;
    height: 64px !important;
    /* 关键：下拉面板需要溢出导航栏显示，绝不能被裁剪 */
    overflow: visible !important;
}
body.admin #ksAdminContent,
body.admin .ks-main {
    padding-top: 96px !important;
}
@media (max-width: 820px) {
    body.admin .ks-nav { top: 10px !important; height: 52px !important; }
    body.admin #ksAdminContent,
    body.admin .ks-main { padding-top: 78px !important; }
}

/* ---------- 页脚：自适应底部 ---------- */
.ks-footer {
    text-align: center;
    padding: 34px 16px 42px;
    color: var(--ks-text-muted);
    font-size: 13px;
    line-height: 2;
    /* 自然跟随内容，不强制 fixed */
    position: relative;
}

/* 移动端页脚：在底部导航上方留出空间 */
@media (max-width: 820px) {
    .ks-footer {
        padding-bottom: 100px !important;
    }
}

/* ---------- 移动端底部导航图标：确保 ph-cubes 等都能显示 ---------- */
.ks-bottom-nav-icon {
    font-size: 22px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ---------- 弹窗遮罩确保在导航之上 ---------- */
.ks-modal-mask { z-index: 2000 !important; }
.ks-modal { z-index: 2001 !important; }

/* ---------- 悬浮按钮确保在底部导航之上 ---------- */
.ks-fab-wrap { z-index: 250 !important; }

/* ---------- 留言/友链 FAB 移动端避开底部导航 ---------- */
@media (max-width: 820px) {
    .ks-fab-wrap {
        bottom: 86px !important;
        right: 14px !important;
    }
}

/* ---------- 修复后台导航品牌区 ---------- */
body.admin .ks-brand-name {
    font-weight: 700;
    font-size: 15px;
}

/* ---------- 移除可能干扰的旧 sticky 声明 ---------- */
.ks-nav,
body.admin .ks-nav {
    position: fixed !important;
}

/* ============================================================
   🔧 弹窗 Flex 布局修复（确保大表单弹窗可正常滚动）
   ============================================================ */

/* .ks-modal-lg 作为表单容器：flex column，head 固定、body 滚动 */
.ks-modal.ks-modal-lg {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* 弹窗头部：固定不滚动 */
.ks-modal.ks-modal-lg > .ks-modal-head {
    flex: none;
    padding: 20px 22px 16px !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background: inherit;
    z-index: 2;
}

/* 弹窗内 body 容器（ksOpenAdminModal 用） */
.ks-modal.ks-modal-lg > #ksAdminModalBody {
    flex: 1 1 auto;
    overflow-y: auto !important;
    padding: 20px 22px !important;
    min-height: 0 !important;
    max-height: calc(88vh - 100px);
}

/* 弹窗内 form（ksOpenSettingsModal 等用） */
.ks-modal.ks-modal-lg > form,
.ks-modal.ks-modal-lg > #ksAdminModalBody > form {
    width: 100%;
}

/* .ks-modal-lg 内 form 直接作为 flex 子元素时 */
.ks-modal.ks-modal-lg > form.ks-form {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px 22px !important;
    min-height: 0;
    max-height: calc(88vh - 100px);
}

/* 弹窗内 form-group 紧凑化 */
.ks-modal.ks-modal-lg .ks-form-group {
    margin-bottom: 14px;
}

/* 弹窗内按钮固定在底部 */
.ks-modal.ks-modal-lg .ks-btn-block.ks-btn-primary {
    margin-top: 8px;
    flex: none;
}

/* 暗色模式弹窗头部分割线 */
body.ks-dark .ks-modal.ks-modal-lg > .ks-modal-head {
    border-bottom-color: rgba(255,255,255,.1) !important;
}

/* 弹窗内滚动条美化 */
.ks-modal.ks-modal-lg > #ksAdminModalBody::-webkit-scrollbar,
.ks-modal.ks-modal-lg > form.ks-form::-webkit-scrollbar {
    width: 6px;
}
.ks-modal.ks-modal-lg > #ksAdminModalBody::-webkit-scrollbar-thumb,
.ks-modal.ks-modal-lg > form.ks-form::-webkit-scrollbar-thumb {
    background: rgba(120,120,128,.3);
    border-radius: 3px;
}

/* 弹窗内图片上传组件的 flex 对齐 */
.ks-modal.ks-modal-lg .ks-img-upload {
    flex-wrap: wrap;
}
.ks-modal.ks-modal-lg .ks-img-upload-preview {
    flex: none !important;
}
.ks-modal.ks-modal-lg .ks-img-upload > div:last-child {
    flex: 1 1 200px;
    min-width: 200px;
}

/* ============================================================
   🆕 设置弹窗样式（ksOpenSettingsModal 专用，避开 .ks-modal label.ks-switch 全局覆盖）
   ============================================================ */

/* 设置弹窗开关卡片容器 */
.ks-modal .ks-settings-form {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 20px 22px !important;
    min-height: 0 !important;
    max-height: none !important;
}

.ks-modal .ks-settings-row {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 14px !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    border: 1px solid transparent !important;
    background: rgba(255, 255, 255, .5) !important;
    transition: all .2s !important;
}
.ks-modal .ks-settings-row:hover {
    transform: translateX(2px);
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.ks-modal .ks-settings-row-blue {
    background: rgba(10, 132, 255, .06) !important;
    border-color: rgba(10, 132, 255, .18) !important;
}
.ks-modal .ks-settings-row-purple {
    background: rgba(191, 90, 242, .06) !important;
    border-color: rgba(191, 90, 242, .18) !important;
}

.ks-modal .ks-settings-row-info {
    flex: 1 1 auto;
    min-width: 0;
}
.ks-modal .ks-settings-row-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--ks-text);
}
.ks-modal .ks-settings-row-desc {
    font-size: 12px;
    color: var(--ks-text-muted);
    margin-top: 3px;
    line-height: 1.5;
}

/* 关键：设置弹窗内的开关 label 还原回紧凑小开关，不受 .ks-modal label.ks-switch 全局覆盖 */
.ks-modal .ks-settings-switch {
    position: relative !important;
    display: inline-block !important;
    width: 48px !important;
    height: 28px !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}
.ks-modal .ks-settings-switch input[type="checkbox"] {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
    background: none !important;
}
.ks-modal .ks-settings-switch .ks-slider {
    position: absolute !important;
    cursor: pointer;
    inset: 0 !important;
    background: rgba(120, 120, 128, .32);
    border-radius: 28px !important;
    transition: background .25s;
}
.ks-modal .ks-settings-switch .ks-slider::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    transition: transform .25s cubic-bezier(.2, 1.2, .3, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.ks-modal .ks-settings-switch input:checked + .ks-slider {
    background: var(--ks-success, #30D158);
}
.ks-modal .ks-settings-switch input:checked + .ks-slider::before {
    transform: translateX(20px);
}

/* 设置弹窗底部固定按钮区 */
.ks-modal .ks-modal-footer {
    flex: none;
    padding: 14px 22px 20px !important;
    border-top: 1px solid rgba(0, 0, 0, .06);
    background: inherit;
}
body.ks-dark .ks-modal .ks-modal-footer {
    border-top-color: rgba(255, 255, 255, .1);
}

body.ks-dark .ks-modal .ks-settings-row {
    background: rgba(255, 255, 255, .05) !important;
}
body.ks-dark .ks-modal .ks-settings-row-blue {
    background: rgba(10, 132, 255, .1) !important;
    border-color: rgba(10, 132, 255, .25) !important;
}
body.ks-dark .ks-modal .ks-settings-row-purple {
    background: rgba(191, 90, 242, .1) !important;
    border-color: rgba(191, 90, 242, .25) !important;
}

/* 设置弹窗底部按钮：右对齐横排（修复按钮贴边/错位） */
.ks-modal .ks-modal-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}
.ks-modal .ks-modal-footer .ks-btn {
    min-width: 106px;
}

/* 每页显示条数：绿色数字输入行 */
.ks-modal .ks-settings-row-green {
    background: rgba(48, 209, 88, .07) !important;
    border-color: rgba(48, 209, 88, .22) !important;
}
.ks-modal .ks-settings-number {
    flex: none !important;
    width: 92px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid rgba(120, 120, 128, .28);
    background: rgba(255, 255, 255, .78);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    color: var(--ks-text);
    text-align: center;
    outline: none;
    -webkit-appearance: none;
    appearance: textfield;
    transition: border-color .2s, box-shadow .2s;
}
.ks-modal .ks-settings-number::-webkit-outer-spin-button,
.ks-modal .ks-settings-number::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ks-modal .ks-settings-number:focus {
    border-color: var(--ks-success, #30D158);
    box-shadow: 0 0 0 4px rgba(48, 209, 88, .15);
}
body.ks-dark .ks-modal .ks-settings-row-green {
    background: rgba(48, 209, 88, .12) !important;
    border-color: rgba(48, 209, 88, .3) !important;
}
body.ks-dark .ks-modal .ks-settings-number {
    background: rgba(60, 60, 67, .5);
    border-color: rgba(255, 255, 255, .16);
    color: #fff;
}

/* ============================================================
   🆕 音乐设置：音乐来源单选块 + 网络搜索弹窗
   ============================================================ */
.ks-modal .ks-music-source-block {
    margin-top: 6px;
}
.ks-modal .ks-music-source-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--ks-text-2);
    margin-bottom: 10px;
}
.ks-modal .ks-music-source-group {
    gap: 8px;
}
.ks-modal .ks-music-source-radio {
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .55);
}
.ks-modal .ks-music-source-radio input {
    margin-top: 2px;
    flex: none;
}
.ks-modal .ks-music-source-radio:has(input:checked) {
    border-color: var(--ks-primary) !important;
    background: rgba(10, 132, 255, .08) !important;
}
.ks-modal .ks-music-source-radio input:checked ~ .ks-music-source-text .ks-music-source-title {
    color: var(--ks-primary);
}
.ks-modal .ks-music-source-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ks-modal .ks-music-source-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ks-text);
    transition: color .2s;
}
.ks-modal .ks-music-source-desc {
    font-size: 11.5px;
    color: var(--ks-text-muted);
    line-height: 1.5;
}
.ks-modal .ks-input-block {
    width: 100%;
}
body.ks-dark .ks-modal .ks-music-source-radio {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .12);
}
body.ks-dark .ks-modal .ks-music-source-radio:has(input:checked) {
    background: rgba(10, 132, 255, .16) !important;
}
body.ks-dark .ks-modal .ks-music-source-title {
    color: #fff;
}
body.ks-dark .ks-modal .ks-music-source-label {
    color: rgba(255, 255, 255, .8);
}

.ks-online-search-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}
.ks-online-search-bar .ks-input {
    flex: 1;
    min-width: 0;
}
.ks-online-results {
    max-height: 46vh;
    overflow-y: auto;
    border-radius: 12px;
    background: rgba(0, 0, 0, .02);
    border: 1px solid rgba(120, 120, 128, .14);
    padding: 6px;
}
.ks-online-empty {
    text-align: center;
    color: var(--ks-text-muted);
    font-size: 13px;
    padding: 30px 10px;
}
.ks-online-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 10px;
    transition: background .2s;
}
.ks-online-item:hover {
    background: rgba(10, 132, 255, .06);
}
.ks-online-cover {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    overflow: hidden;
    flex: none;
    background: rgba(0, 0, 0, .06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ks-text-muted);
    font-size: 20px;
}
.ks-online-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ks-online-info {
    flex: 1;
    min-width: 0;
}
.ks-online-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ks-text);
}
.ks-online-name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ks-online-badge {
    flex: none;
    font-size: 10px;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 5px;
    font-weight: 600;
    letter-spacing: .3px;
}
.ks-online-badge-vip {
    color: #7a5200;
    background: linear-gradient(135deg, #ffd76e, #f0a500);
}
.ks-online-badge-free {
    color: #0a7a3d;
    background: rgba(52, 199, 89, .16);
}
.ks-online-badge-off {
    color: var(--ks-text-muted);
    background: rgba(120, 120, 128, .16);
}
body.ks-dark .ks-online-badge-vip {
    color: #2a1c00;
}
body.ks-dark .ks-online-badge-free {
    color: #52d97e;
}
.ks-online-artist {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--ks-text-muted);
    margin-top: 2px;
}
.ks-online-artist-name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ks-online-dur {
    flex: none;
    color: var(--ks-text-muted);
    font-variant-numeric: tabular-nums;
}
.ks-online-add {
    flex: none;
}
.ks-online-preview {
    flex: none;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(120, 120, 128, .28);
    background: rgba(120, 120, 128, .08);
    color: var(--ks-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: background .2s, border-color .2s, transform .15s;
}
.ks-online-preview:hover {
    background: rgba(10, 132, 255, .14);
    border-color: rgba(10, 132, 255, .5);
}
.ks-online-preview:active {
    transform: scale(.92);
}
.ks-online-item.previewing .ks-online-preview {
    background: linear-gradient(135deg, #0A84FF, #5E5CE6);
    border-color: transparent;
    color: #fff;
}
.ks-online-progress {
    display: none;
    align-items: center;
    gap: 10px;
    margin-top: 7px;
}
.ks-online-item.previewing .ks-online-progress {
    display: flex;
}
.ks-online-progress-track {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 4px;
    border-radius: 4px;
    background: rgba(120, 120, 128, .22);
    cursor: pointer;
    touch-action: none;
}
.ks-online-progress-track::before {
    content: '';
    position: absolute;
    left: -2px;
    right: -2px;
    top: -8px;
    bottom: -8px;
}
.ks-online-progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    border-radius: 4px;
    background: linear-gradient(90deg, #0A84FF, #5E5CE6);
}
.ks-online-progress-thumb {
    position: absolute;
    right: -5px;
    top: 50%;
    width: 11px;
    height: 11px;
    margin-top: -5.5px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #0A84FF;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
    transform: scale(0);
    transition: transform .15s;
}
.ks-online-item.previewing .ks-online-progress-thumb {
    transform: scale(1);
}
.ks-online-item.seeking .ks-online-progress-thumb {
    transform: scale(1.3);
}
.ks-online-time {
    flex: none;
    font-size: 11px;
    color: var(--ks-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ks-music-lyric {
    margin-top: 10px;
    max-height: 220px;
    overflow-y: auto;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .03);
    border: 1px solid rgba(120, 120, 128, .14);
    font-size: 13px;
    line-height: 1.9;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--ks-text);
}
body.ks-dark .ks-music-lyric {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .1);
}
body.ks-dark .ks-online-results {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .1);
}
body.ks-dark .ks-online-title {
    color: #fff;
}
body.ks-dark .ks-online-item:hover {
    background: rgba(255, 255, 255, .05);
}

/* ============================================================
   🆕 留言管理：头像、回复引用、站长回复框
   ============================================================ */

/* 真实头像图片 */
.ks-message-avatar-img {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    object-fit: cover;
    flex: none;
    background: linear-gradient(135deg, var(--ks-primary-2), var(--ks-primary-3));
}

/* 回复消息的左侧强调边框（行内 style 配合 CSS 过渡） */
.ks-message-reply-item {
    transition: background .2s;
}

/* 回复引用块 */
.ks-message-quote {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    flex-wrap: wrap;
    padding: 8px 12px;
    margin-top: 8px;
    margin-bottom: 2px;
    background: rgba(10, 132, 255, .06);
    border-left: 3px solid var(--ks-primary);
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ks-text-2);
    word-break: break-word;
}
.ks-quote-icon {
    color: var(--ks-primary);
    font-size: 14px;
    margin-top: 2px;
    flex: none;
}
.ks-quote-label {
    color: var(--ks-primary);
    font-weight: 600;
    flex: none;
}
.ks-quote-name {
    font-weight: 600;
    color: var(--ks-text);
    flex: none;
}
.ks-quote-sep {
    flex: none;
}
.ks-quote-content {
    color: var(--ks-text-muted);
}

/* 站长回复框：更明显的样式 */
.ks-message-admin-reply-box {
    margin-top: 10px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(10, 132, 255, .08), rgba(191, 90, 242, .08));
    border: 1px solid rgba(10, 132, 255, .2);
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.7;
}
.ks-admin-reply-label {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    margin-bottom: 6px;
}
.ks-admin-reply-content {
    color: var(--ks-text-2);
    font-weight: 500;
}

body.ks-dark .ks-message-quote {
    background: rgba(10, 132, 255, .12);
}
body.ks-dark .ks-message-admin-reply-box {
    background: linear-gradient(135deg, rgba(10, 132, 255, .14), rgba(191, 90, 242, .14));
    border-color: rgba(10, 132, 255, .28);
}

/* ============================================================
   🆕 移动端后台导航：确保汉堡按钮可点击区域够大
   ============================================================ */

@media (max-width: 820px) {
    body.admin .ks-nav-toggle {
        z-index: 1002;
        min-width: 40px;
        min-height: 40px;
    }
}

/* 头像移动端适配 */
@media (max-width: 640px) {
    .ks-message-avatar-img {
        width: 36px;
        height: 36px;
        border-radius: 12px;
    }
    .ks-message-quote {
        font-size: 12px;
        padding: 6px 10px;
    }
    .ks-admin-reply-box {
        padding: 10px 12px;
    }
}

/* ============================================================
   🆕 Hero 内嵌时间（原独立时间卡片已删除）
   ============================================================ */

.ks-hero-time-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
    padding: 8px 18px;
    background: linear-gradient(135deg, rgba(10,132,255,.08), rgba(191,90,242,.08));
    border: 1px solid rgba(10,132,255,.15);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.ks-hero-time-clock {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .02em;
    background: linear-gradient(135deg, #0A84FF, #BF5AF2);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums;
}
.ks-hero-time-sep {
    width: 1px;
    height: 14px;
    background: rgba(120, 120, 128, .25);
}
.ks-hero-time-date {
    font-size: 13px;
    font-weight: 500;
    color: var(--ks-text-muted);
}

/* ============================================================
   🆕 天气/运势 左右 2 列布局
   ============================================================ */

.ks-widgets-2col {
    grid-template-columns: 1fr 1fr !important;
}

@media (max-width: 820px) {
    .ks-widgets-2col {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* ============================================================
   🆕 运势渐变条（4 种配色 + 光泽流动效果）
   ============================================================ */

/* 运势通用条 */
.ks-fortune-stat-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.ks-fortune-stat-row .label {
    flex: none;
    width: 36px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ks-text-muted);
    text-align: right;
}
.ks-fortune-bar {
    flex: 1;
    height: 14px;
    background: rgba(120, 120, 128, .12);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}
.ks-fortune-bar-fill {
    height: 100%;
    border-radius: 20px;
    position: relative;
    transition: width .6s cubic-bezier(.2, 1.2, .3, 1);
    background-size: 200% 100%;
}
.ks-fortune-bar-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    animation: ksBarShine 2.8s ease-in-out infinite;
}
@keyframes ksBarShine {
    0%, 100% { transform: translateX(-100%); opacity: .6; }
    50% { transform: translateX(100%); opacity: .8; }
}

/* 渐变配色 */
.ks-fb-grad-1 {
    background-image: linear-gradient(90deg, #0A84FF 0%, #5E5CE6 50%, #BF5AF2 100%);
}
.ks-fb-grad-2 {
    background-image: linear-gradient(90deg, #FF2D55 0%, #FF6482 45%, #FF9F0A 100%);
}
.ks-fb-grad-3 {
    background-image: linear-gradient(90deg, #30D158 0%, #34C759 50%, #30B0C7 100%);
}
.ks-fb-grad-4 {
    background-image: linear-gradient(90deg, #FF9F0A 0%, #FFD60A 50%, #30D158 100%);
}

/* 暗色模式 */
body.ks-dark .ks-fortune-bar {
    background: rgba(255, 255, 255, .08);
}
body.ks-dark .ks-hero-time-row {
    background: linear-gradient(135deg, rgba(10,132,255,.15), rgba(191,90,242,.15));
    border-color: rgba(10,132,255,.25);
}

/* ============================================================
   🆕 移动端整体优化
   ============================================================ */

@media (max-width: 640px) {
    .ks-hero-time-row {
        margin-top: 10px;
        padding: 6px 14px;
        gap: 8px;
    }
/* 站点卡片暗色适配 */
body.ks-dark .ks-site-item {
    background: rgba(28,28,30,.5);
    border-color: rgba(255,255,255,.06);
}

    .ks-hero-time-clock {
        font-size: 17px;
    }
    .ks-hero-time-date {
        font-size: 11.5px;
    }
    .ks-hero-time-sep {
        height: 12px;
    }
    /* Hero 卡片整体紧凑化 */
    .ks-hero-center-content {
        margin-top: 18px;
    }
    .ks-hero-center-content .ks-hero-name { font-size: 28px; }
    .ks-hero-center-content .ks-hero-slogan {
        margin-top: 8px;
        font-size: 14px;
    }
    .ks-social-btn-pill {
        padding: 10px 16px;
        gap: 6px;
    }
    .ks-social-btn-pill span:first-child { font-size: 18px !important; }
    .ks-social-btn-pill span:last-child { font-size: 12px !important; }
    /* weather card 移动端 */
    .ks-widget.ks-weather-card,
    .ks-widget.ks-fortune-widget {
        padding: 18px 16px;
    }
    /* fortune bar 移动端更紧凑 */
    .ks-fortune-stat-row { gap: 8px; margin-bottom: 10px; }
    .ks-fortune-stat-row .label { width: 32px; font-size: 11px; }
    .ks-fortune-bar { height: 12px; }
}

@media (max-width: 380px) {
    /* 超小屏幕手机 */
    .ks-hero-time-clock { font-size: 15px; }
    .ks-hero-time-date { font-size: 11px; }
    .ks-hero-time-row { padding: 5px 12px; }
}

/* ============================================================
   🆕 作者名字彩色渐变 + 时间胶囊美化 + 导航隐藏逻辑完善
   ============================================================ */

/* Hero 名字渐变（文字彩虹效果 + 流动动画） */
.ks-hero-name-grad {
    background: linear-gradient(135deg, #0A84FF 0%, #5E5CE6 35%, #BF5AF2 65%, #FF9F0A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 900;
    letter-spacing: -.02em;
    background-size: 200% 200%;
    animation: ksNameGradShift 5s ease-in-out infinite;
}
@keyframes ksNameGradShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* 时间胶囊升级：更大气 + 渐变分隔线 + 内发光 */
.ks-hero-time-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
    padding: 10px 28px;
    background: rgba(255, 255, 255, .55);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1.5px solid rgba(255, 255, 255, .7);
    border-radius: 999px;
    box-shadow: 0 4px 20px rgba(10, 132, 255, .12), inset 0 1px 0 rgba(255,255,255,.8);
    position: relative;
    overflow: hidden;
}
.ks-hero-time-row::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10,132,255,.08), rgba(191,90,242,.08));
    pointer-events: none;
}
.ks-hero-time-row > * { position: relative; z-index: 1; }
.ks-hero-time-clock {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .03em;
    background: linear-gradient(135deg, #0A84FF, #5E5CE6, #BF5AF2);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums;
}
.ks-hero-time-sep {
    width: 2px;
    height: 16px;
    background: linear-gradient(180deg, transparent, rgba(10,132,255,.4), transparent);
    border-radius: 1px;
}
.ks-hero-time-date {
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-text-muted);
    letter-spacing: .02em;
}
body.ks-dark .ks-hero-time-row {
    background: rgba(28, 28, 30, .55);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 4px 20px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);
}

/* 导航隐藏/显示：保持直接显隐（无动画、无Q弹） */
.ks-nav.nav-hidden,
.ks-nav.nav-showing {
    transition: none !important;
    animation: none !important;
}

/* ============================================================
   🆕 移动端天气/运势：左右两列并排（天气文字样式见 1265 行统一块）
   ============================================================ */
@media (max-width: 820px) {
    .ks-widgets.ks-widgets-2col {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
    .ks-widget.ks-weather-card,
    .ks-widget.ks-fortune-widget { padding: 14px 12px; overflow: hidden; }
    .ks-totoro-bg { display: none; }
    .ks-fortune-header { margin-bottom:8px; }
    .ks-fortune-title-row { font-size:12px; }
    .ks-fortune-title-row .ks-fortune-label { font-weight:700; }
    .ks-fortune-level-badge { font-size:11px !important; padding:2px 8px !important; }
    .ks-fortune-stars-row { gap:0; }
    .ks-fortune-stars-row i { font-size:12px !important; }
    .ks-fortune-stat-row { gap:8px; margin-bottom:8px; }
    .ks-fortune-stat-row .label { width:28px; font-size:11px; }
    .ks-fortune-bar { height:10px; }
    .ks-fortune-desc { font-size:11.5px; }
}
@media (max-width: 480px) {
    .ks-widgets.ks-widgets-2col { gap:10px !important; }
    .ks-fortune-stat-row { margin-bottom:6px; }
    .ks-fortune-bar { height:9px; }
}

/* ============================================================
   🆕 后台仪表盘：问候区 + 统计卡片 + 快捷操作
   ============================================================ */

.ks-dash-greet {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
}
.ks-dash-greet-title {
    font-size:26px;
    font-weight:800;
    letter-spacing:-.02em;
    line-height:1.25;
    margin:0;
}
.ks-dash-greet-emoji {
    display:inline-block;
    margin-left:4px;
    animation: ksGreetWave 1.2s ease-in-out infinite;
    transform-origin: 70% 70%;
}
@keyframes ksGreetWave {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(15deg); }
    75% { transform: rotate(-8deg); }
}

/* 统计卡片（2 列） */
.ks-dash-stats {
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
}
.ks-dash-stat-card {
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 18px;
    background:rgba(255,255,255,.7);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    border:1px solid rgba(0,0,0,.05);
    border-radius:16px;
    text-decoration:none;
    color:inherit;
    transition:all .25s cubic-bezier(.2,1.4,.3,1);
    box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.ks-dash-stat-card:hover {
    transform:translateY(-3px);
    box-shadow:0 10px 28px rgba(0,0,0,.09);
}
.ks-dash-stat-icon {
    width:44px;
    height:44px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    flex:none;
}
.ks-dash-stat-body { flex:1; min-width:0; }
.ks-dash-stat-value {
    font-size:26px;
    font-weight:800;
    letter-spacing:-.02em;
    line-height:1;
}
.ks-dash-stat-title {
    font-size:13px;
    color:var(--ks-text-muted);
    font-weight:600;
    margin-top:4px;
}
body.ks-dark .ks-dash-stat-card {
    background:rgba(28,28,30,.55);
    border-color:rgba(255,255,255,.06);
}

/* 快捷操作（2 列） */
.ks-dash-actions {
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:10px;
}
.ks-dash-action {
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 14px;
    background:rgba(255,255,255,.7);
    border:1px solid rgba(0,0,0,.05);
    border-radius:12px;
    text-decoration:none;
    color:var(--ks-text);
    font-size:14px;
    font-weight:600;
    transition:all .2s;
}
.ks-dash-action:hover {
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(0,0,0,.08);
    border-color:rgba(0,0,0,.1);
}
.ks-dash-action i {
    font-size:20px;
    flex:none;
}
body.ks-dark .ks-dash-action {
    background:rgba(28,28,30,.55);
    border-color:rgba(255,255,255,.06);
}

/* 响应式 */
@media (max-width:640px) {
    .ks-dash-greet-title { font-size:22px; }
    .ks-dash-stats { gap:10px; }
    .ks-dash-stat-card { padding:14px 14px; gap:12px; }
    .ks-dash-stat-icon { width:40px; height:40px; font-size:20px; }
    .ks-dash-stat-value { font-size:22px; }
    .ks-dash-actions { gap:8px; }
    .ks-dash-action { padding:10px 12px; font-size:13px; }
    .ks-dash-action i { font-size:18px; }
}


/* ============================================================
   🆕 移动端：隐藏顶部汉堡按钮（底部导航已够用）
   ============================================================ */
@media (max-width: 820px) {
    body:not(.admin) .ks-nav .ks-nav-toggle { display:none !important; }
}

/* ============================================================
   🆕 底部导航：iOS 液态玻璃升级
   ============================================================ */
body:not(.admin) .ks-bottom-nav {
    background: rgba(255, 255, 255, 0.52);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    backdrop-filter: blur(24px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow:
        0 8px 32px rgba(31, 38, 135, 0.18),
        0 2px 8px rgba(0,0,0,0.06),
        inset 0 1px 0 rgba(255,255,255,0.9);
    padding: 7px;
}
body.ks-dark:not(.admin) .ks-bottom-nav {
    background: rgba(28, 28, 30, 0.55);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow:
        0 10px 36px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.08);
}
body:not(.admin) .ks-bottom-nav-item {
    color: rgba(0,0,0,0.48);
    padding: 9px 4px;
    border-radius: 18px;
}
body.ks-dark:not(.admin) .ks-bottom-nav-item {
    color: rgba(255,255,255,0.52);
}
body:not(.admin) .ks-bottom-nav-item.active {
    color: #0A84FF;
    background: rgba(10, 132, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(10, 132, 255, 0.12);
}
body:not(.admin) .ks-bottom-nav-item.active .ks-bottom-nav-icon {
    transform: translateY(-2px) scale(1.22);
    filter: drop-shadow(0 4px 10px rgba(10,132,255,0.5));
}
body:not(.admin) .ks-bottom-nav-icon {
    font-size: 22px;
}

/* ============================================================
   🆕 悬浮歌词：自适应屏幕居中显示（由 player.css + JS 控制定位）
   ============================================================ */
/* 历史代码已删除：原桌面/移动端"靠右锚定"覆盖会强制 left:auto/transform:none，
   与 player.css 中的居中样式 (left:50% + translateX(-50%)) 冲突，
   导致歌词位置错乱。现交由 player.css + syncLyricsToPlayer() 统一管理。 */
body:not(.admin) .ks-page-lyrics-content {
    background: rgba(0,0,0,0.38);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.28);
    padding: 6px 16px;
}
body:not(.admin) .ks-page-lyrics-current {
    font-size: 14px;
    max-width: 70vw;
}

/* 弹窗内输入框：让弹窗玻璃更通透 */
.ks-modal .ks-input,
.ks-modal .ks-textarea,
.ks-modal .ks-select {
    background: rgba(255, 255, 255, 0.5) !important;
    border-color: rgba(120, 120, 128, 0.22) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}
.ks-modal .ks-input:focus,
.ks-modal .ks-textarea:focus,
.ks-modal .ks-select:focus {
    background: rgba(255, 255, 255, 0.75) !important;
}
body.ks-dark .ks-modal .ks-input,
body.ks-dark .ks-modal .ks-textarea,
body.ks-dark .ks-modal .ks-select {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}
body.ks-dark .ks-modal .ks-input:focus,
body.ks-dark .ks-modal .ks-textarea:focus,
body.ks-dark .ks-modal .ks-select:focus {
    background: rgba(255, 255, 255, 0.12) !important;
}
/* 弹窗内 ks-alert 也透明化 */
.ks-modal .ks-alert {
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}
body.ks-dark .ks-modal .ks-alert {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* ============================================================
   🆕 项目卡片缩小：和旗下站点同尺寸
   ============================================================ */
.ks-project {
    padding: 10px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.55) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0,0,0,.05);
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    transition: transform .25s cubic-bezier(.2,1.4,.3,1), box-shadow .25s;
}
.ks-project:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 22px rgba(0,0,0,.1);
}
.ks-project-cover {
    height: auto !important;
    aspect-ratio: 16/10;
    border-radius: 10px;
    overflow: hidden;
    font-size: 36px;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.9);
    box-shadow: 0 4px 14px rgba(31, 38, 135, .18);
    border: 2px solid rgba(255, 255, 255, .55);
}
.ks-project-body { padding: 10px 4px 2px !important; }
.ks-project-title {
    font-size: 15px !important;
    font-weight: 700;
    letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ks-project-desc {
    font-size: 12px !important;
    color: var(--ks-text-muted);
    margin-top: 3px;
    line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ks-project-tags { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.ks-project-tags .ks-tag { font-size: 10px !important; padding: 1px 6px !important; }
.ks-project-link { display: none !important; }

/* 桌面：3 列 / 中等屏：2 列 / 移动端：2 列紧凑 */
@media (max-width: 1024px) {
    body:not(.admin) .ks-section#projects .ks-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
    body:not(.admin) .ks-section#projects .ks-grid-3 { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    body:not(.admin) .ks-section#projects .ks-project { padding: 8px 6px !important; border-radius: 12px; }
    body:not(.admin) .ks-section#projects .ks-project-cover { border-radius: 8px; font-size: 28px; border-width: 1.5px; }
    body:not(.admin) .ks-section#projects .ks-project-title { font-size: 13px; }
    body:not(.admin) .ks-section#projects .ks-project-desc { font-size: 11px; }
}

/* ============================================================
   🆕 歌词 + 播放器：自适应屏幕居中（统一交由 player.css + JS 控制）
   ============================================================ */
/* 历史代码已删除：原"靠右锚定 + !important"覆盖会强制
   left:auto !important / transform:none !important，
   与 player.css 的 left:50% + translateX(-50%) 居中方案冲突，
   并且 !important 会使 JS 设置的行内样式也失效。
   现歌词定位完全由 player.css 默认样式 + syncLyricsToPlayer() 控制，
   实现水平居中、与播放器同水平线。 */
body:not(.admin) .ks-player {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 400;
}