/*!
 * 星云导航 - 前台首页专属样式
 * 版本: 3.1.2 Pro
 *
 * 基于 common.css 设计令牌扩展: 玻璃拟态、流光边框、渐变文字、卡片悬浮、粒子特效
 * 不重复定义设计令牌, 仅做页面级布局与组件装饰
 */

/* ========== 页面基础 ========== */
body {
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 2rem 0 calc(2rem + env(safe-area-inset-bottom));
    position: relative;
    overflow-x: hidden;
    /* 内容保护 */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

::selection { background: var(--primary); color: #fff; }

/* ========== 背景光晕 ========== */
.bg-orbs {
    position: fixed; inset: 0; z-index: 0;
    pointer-events: none; overflow: hidden;
}
.bg-orb {
    position: absolute; border-radius: 50%;
    filter: blur(100px); opacity: 0.4;
    will-change: transform;
    animation: orbFloat 20s ease-in-out infinite;
}
.bg-orb:nth-child(1) { width: 480px; height: 480px; background: var(--primary); top: -150px; left: -150px; }
.bg-orb:nth-child(2) { width: 400px; height: 400px; background: var(--accent); top: 10%; right: -120px; animation-delay: -7s; }
.bg-orb:nth-child(3) { width: 360px; height: 360px; background: var(--secondary); bottom: -120px; left: 25%; animation-delay: -14s; }

@keyframes orbFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    33%      { transform: translate3d(50px, -40px, 0) scale(1.1); }
    66%      { transform: translate3d(-30px, 30px, 0) scale(0.95); }
}

/* ========== 鼠标粒子画布 ========== */
.particle-canvas {
    position: fixed; inset: 0; z-index: 99999;
    pointer-events: none;
}
@media (max-width: 768px), (hover: none) {
    .particle-canvas { display: none; }
}

/* ========== 星空(深色模式) — 必须保留 ========== */
.star-field {
    position: fixed; inset: 0; z-index: 0;
    pointer-events: none; opacity: 0;
    transition: opacity 1.2s ease;
}
.dark-mode .star-field { opacity: 1; }
.star {
    position: absolute; background: #fff; border-radius: 50%;
    animation: starTwinkle ease-in-out infinite;
    box-shadow: 0 0 4px rgba(255,255,255,0.6);
}
@keyframes starTwinkle {
    0%, 100% { opacity: 0.2; transform: scale(0.8); }
    50%      { opacity: 1; transform: scale(1.4); }
}

/* ========== 布局容器 ========== */
.wrapper {
    position: relative; z-index: 2;
    width: 100%; max-width: 780px;
    margin: 0 auto;
    padding: 1rem;
    overflow-x: hidden;
}
@media (min-width: 1024px) {
    .wrapper { max-width: 860px; }
}

.main {
    position: relative; overflow: hidden;
    padding: 3rem 2.4rem;
    border-radius: var(--radius-xl);
    /* 浅色模式: 高通透玻璃感, 弱化框感, 让内容融入背景 */
    background: rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 12px 40px rgba(var(--primary-rgb), 0.06), 0 2px 8px rgba(0,0,0,0.03);
    transition: box-shadow var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
.main:hover { box-shadow: 0 20px 56px rgba(var(--primary-rgb), 0.1), 0 4px 12px rgba(0,0,0,0.04); }

/* 流光顶部边框 */
.main::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent), var(--secondary), var(--primary));
    background-size: 300% 100%;
    animation: borderShimmer 4s linear infinite;
}
@keyframes borderShimmer {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* ========== 品牌区 ========== */
.header-area { text-align: center; margin-bottom: 2.4rem; position: relative; }
.header-logo {
    width: 92px; height: 92px; margin: 0 auto 1.3rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    animation: logoFloat 5s ease-in-out infinite;
    transition: transform var(--duration) var(--ease-out);
}
.header-logo:hover { transform: scale(1.1); }
.header-logo:active { transform: scale(0.95); }
.header-logo:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 24px; }
/* 防御性规则: 禁止任何伪元素图标出现在logo区域, 确保有logo图片时只显示图片 */
.header-logo::before, .header-logo::after { content: none; display: none; }
@keyframes logoFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
.header-logo img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    filter: drop-shadow(0 16px 40px rgba(var(--primary-rgb), 0.35));
}
.logo-icon-fallback {
    width: 92px; height: 92px; border-radius: 26px;
    background: var(--gradient);
    display: flex; align-items: center; justify-content: center;
    font-size: 2.4rem; color: #fff;
    box-shadow: var(--shadow-glow), 0 8px 24px rgba(var(--primary-rgb), 0.3);
}
.site-title {
    font-size: 2.5rem; font-weight: 800; letter-spacing: 5px;
    background: var(--gradient-text); background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.6rem;
    animation: gradientShift 9s ease-in-out infinite;
    text-shadow: 0 0 40px rgba(var(--secondary-rgb), 0.15);
}
/* 标题呼吸灯+渐变流光动画: 渐变位置在字体内部流动 + opacity 柔和呼吸(无外部光晕)
   -webkit-text-fill-color: transparent 确保背景渐变显示在文字内部 */
@keyframes gradientShift {
    0%   { background-position: 0% center;   opacity: 0.93; }
    50%  { background-position: 100% center; opacity: 1; }
    100% { background-position: 0% center;   opacity: 0.93; }
}
@media (prefers-reduced-motion: reduce) {
    .site-title { animation: none; }
}
.header-subtitle {
    font-size: 0.85rem; color: var(--text-muted);
    letter-spacing: 6px; opacity: 0.8; font-weight: 500;
    text-transform: uppercase;
}

/* ========== 滚动公告(整体美化: 玻璃质感+渐变遮罩+hover暂停) ========== */
.scroll-announcement {
    display: flex; align-items: center; gap: 12px;
    padding: 0.7rem 1rem; margin-bottom: 1rem;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.08), rgba(var(--accent-rgb), 0.05));
    border: 1px solid rgba(var(--secondary-rgb), 0.15);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.04), 0 2px 8px rgba(var(--primary-rgb), 0.06);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
    position: relative;
}
.dark-mode .scroll-announcement {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.14), rgba(var(--accent-rgb), 0.09));
    border-color: rgba(var(--primary-rgb), 0.28);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2), 0 2px 10px rgba(var(--primary-rgb), 0.1);
}
.scroll-announcement > i {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0.8rem;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3);
    animation: hornPulse 3s ease-in-out infinite;
}
@keyframes hornPulse {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.08); }
}
.scroll-announcement .scroll-content {
    flex: 1; overflow: hidden; white-space: nowrap;
    /* 左右渐变遮罩: 文字滚入滚出更自然 */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.scroll-announcement .scroll-content span {
    display: inline-block; padding-left: 100%;
    animation: scrollText 20s linear infinite;
    font-size: 0.9rem; font-weight: 500; line-height: 1.6;
    color: var(--text);
    will-change: transform;
}
.dark-mode .scroll-announcement .scroll-content span {
    color: rgba(255,255,255,0.92);
}
/* hover时暂停滚动 */
.scroll-announcement:hover .scroll-content span {
    animation-play-state: paused;
}
@keyframes scrollText {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* ========== 内联公告 ========== */
.inline-announcement {
    padding: 1.1rem 1.4rem; margin-bottom: 1.3rem;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(16,185,129,0.07), rgba(6,182,212,0.05));
    border: 1px solid rgba(16, 185, 129, 0.15);
    border-left: 4px solid var(--success);
}
.inline-announcement .inline-title { font-size: 0.95rem; font-weight: 700; color: var(--text); margin-bottom: 0.5rem; }
.inline-announcement .inline-title i { color: var(--success); margin-right: 6px; }
.inline-announcement .inline-content { font-size: 0.86rem; line-height: 1.8; color: var(--text-light); }

/* ========== 折叠公告(手风琴) ========== */
.bookmark-btn {
    width: 100%; margin-bottom: 0.8rem;
    border-radius: var(--radius-sm);
    background: var(--gradient);
    color: #fff;
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.25);
    overflow: hidden;
    transition: box-shadow var(--duration) ease, transform var(--duration-fast) ease;
}
.bookmark-btn:hover {
    box-shadow: 0 12px 36px rgba(var(--primary-rgb), 0.38);
    transform: translateY(-2px);
}
.domain-toggle {
    width: 100%; padding: 0.7rem 1rem;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: transparent; border: none; color: #fff;
    font-size: 0.88rem; font-weight: 600; cursor: pointer;
    transition: background-color 0.25s ease;
}
.domain-toggle:hover { background: rgba(255, 255, 255, 0.08); }
.domain-toggle .toggle-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.domain-toggle .toggle-label { letter-spacing: 1px; opacity: 0.95; flex-shrink: 0; }
.toggle-arrow {
    font-size: 0.8rem; opacity: 0.8;
    transition: transform var(--duration-slow) var(--ease-spring);
}
.bookmark-btn.expanded .toggle-arrow { transform: rotate(180deg); }
/* 未展开时紧凑: 标题行刚好一行文字高度, 去掉多余上下空白 */
.bookmark-btn:not(.expanded) { margin-bottom: 0.5rem; }
.bookmark-btn:not(.expanded) .domain-toggle { padding: 0.3rem 0.9rem; font-size: 0.82rem; }
.bookmark-btn:not(.expanded) .domain-body { padding-top: 0; padding-bottom: 0; }
/* 关键: 未展开时domain-content的padding必须归零, 否则grid 0fr仍被padding撑开出现空白 */
.bookmark-btn:not(.expanded) .domain-content { padding: 0; opacity: 0; }
/* grid-template-rows 0fr→1fr 流畅展开, 替代 max-height 跳变 */
.domain-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s ease, padding 0.5s ease;
    padding: 0 1.3rem;
}
.bookmark-btn.expanded .domain-body {
    grid-template-rows: 1fr;
    padding: 0 1rem 1rem;
}
.domain-content {
    overflow: hidden;
    padding: 0.6rem 0.9rem;
    line-height: 1.7;
    font-size: 0.85rem;
    color: var(--text);
    background: rgba(255,255,255,0.85);
    border-radius: var(--radius-xs);
    opacity: 0;
    transition: opacity 0.35s ease 0.1s, padding 0.3s ease;
}
/* 夜间模式: 深色半透明背景 + 高对比白字 (显式覆盖, 不用:not选择器避免匹配body) */
.dark-mode .domain-content {
    background: rgba(0,0,0,0.55);
    color: rgba(255,255,255,0.96);
}
.bookmark-btn.expanded .domain-content { opacity: 1; }
.ann-field { padding: 0.35rem 0; border-bottom: 1px solid rgba(0,0,0,0.08); }
.ann-field:last-child { border-bottom: none; }
.dark-mode .ann-field { border-bottom-color: rgba(255,255,255,0.12); }
.ann-field strong {
    color: var(--primary);
    min-width: 5em;
    display: inline-block;
}
.dark-mode .ann-field strong {
    color: rgba(255,255,255,0.95);
    text-decoration: underline;
    text-decoration-color: var(--primary);
    text-underline-offset: 3px;
}
.ann-tip { opacity: 0.8; }

/* 折叠公告内网址复制按钮 */
.bookmark-btn .domain-content .ann-url {
    background: rgba(0,0,0,0.06);
    border-color: rgba(0,0,0,0.1);
    color: var(--text);
}
.dark-mode .bookmark-btn .domain-content .ann-url {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.95);
}
.bookmark-btn .domain-content .ann-url-copy {
    background: rgba(0,0,0,0.08);
    color: var(--text);
    border-radius: 4px;
    padding: 2px 6px;
    opacity: 0.85;
}
.bookmark-btn .domain-content .ann-url-copy:hover {
    background: rgba(0,0,0,0.12);
    opacity: 1;
}
.dark-mode .bookmark-btn .domain-content .ann-url-copy {
    background: rgba(255,255,255,0.2);
    color: #fff;
}
.dark-mode .bookmark-btn .domain-content .ann-url-copy:hover {
    background: rgba(255,255,255,0.3);
}

/* ========== 线路卡片列表 ========== */
.link-section-title {
    font-size: 0.92rem; font-weight: 700; color: var(--text);
    margin: 0 0 0.6rem 0;
    display: flex; align-items: center; gap: 8px;
    letter-spacing: 1.5px;
}
.link-section-title i { color: var(--primary); font-size: 0.85rem; }
.dark-mode .link-section-title i { color: rgba(var(--primary-rgb), 0.95); }
.link-list {
    list-style: none; margin-bottom: 1rem;
    display: flex; flex-direction: column; gap: 0.75rem;
}
.link-item {
    position: relative; overflow: hidden;
    background: var(--item-bg);
    border: 1px solid var(--card-border-color);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.9rem 0.55rem 0.9rem;
    min-height: 56px;
    box-sizing: border-box;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    opacity: 0;
    display: flex; flex-wrap: nowrap; align-items: center;
    animation: fadeIn 0.4s ease-out forwards;
    transition: transform var(--duration) var(--ease-out),
                background var(--duration) var(--ease-out),
                box-shadow var(--duration) var(--ease-out),
                border-color var(--duration) var(--ease-out);
}
.link-item::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--gradient);
    transform: scaleY(0); transform-origin: center;
    transition: transform var(--duration) var(--ease-out);
}
.link-item::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent);
    opacity: 0; transition: opacity var(--duration) ease;
    pointer-events: none;
}
.link-item:hover, .link-item:active {
    transform: translateY(-3px);
    background: var(--item-hover);
    border-color: rgba(var(--secondary-rgb), 0.4);
    box-shadow: 0 12px 32px rgba(var(--primary-rgb), 0.2), 0 0 0 1px rgba(var(--secondary-rgb), 0.18), 0 0 24px rgba(var(--secondary-rgb), 0.08);
}
.link-item:hover::before { transform: scaleY(1); }
.link-item:hover::after { opacity: 1; }
.link-item.disabled {
    opacity: 0.4; cursor: not-allowed; filter: grayscale(0.7);
    transform: none !important;
}
.link-item.disabled a { pointer-events: none; }
.link-item.disabled::after { display: none; }

/* 延迟状态指示器(绿/黄/红) — 左上角定位, 精致角标 */
.ms-display {
    position: absolute; top: 0; left: 0;
    padding: 2px 8px; min-width: 46px; width: auto; text-align: center;
    font-size: 0.58rem; font-weight: 700; letter-spacing: 0.3px; color: #fff;
    border-top-left-radius: var(--radius-sm); border-bottom-right-radius: 10px;
    transition: background-color 0.4s ease;
    box-sizing: border-box;
    z-index: 2;
}
.ms-green  { background: linear-gradient(135deg, var(--success), var(--success)); }
.ms-yellow { background: linear-gradient(135deg, var(--warning), var(--warning)); }
.ms-red, .ms-error { background: linear-gradient(135deg, var(--danger), var(--danger)); }
.ms-checking {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    position: relative; overflow: hidden;
}
.ms-checking::after {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: checkingShimmer 1.2s infinite;
}
@keyframes checkingShimmer {
    0%   { left: -100%; }
    100% { left: 100%; }
}

/* 状态徽章颜色 */
.status-normal { background: linear-gradient(135deg, var(--success), var(--success)); color: #fff; }
.status-error  { background: linear-gradient(135deg, var(--danger), var(--danger)); color: #fff; }

/* 线路内容行: 线路名(左) + 当前域名 + 复制按钮 + 状态徽章(右), 单行布局, 自适应不叠加 */
.url-content {
    margin-top: 12px; /* 让开左上角延迟徽章 */
    display: flex; align-items: center; justify-content: flex-start;
    gap: 8px; width: 100%;
    height: auto; min-height: 26px;
    flex-wrap: nowrap;
}
.url-label {
    flex-shrink: 0; min-width: 0; max-width: 38%;
    display: flex; align-items: center; gap: 5px;
    font-size: 0.88rem; font-weight: 800; color: var(--text);
    overflow: hidden;
}
.url-label .link-name-text {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.url-label i { color: var(--primary); font-size: 0.78rem; flex-shrink: 0; }
/* 域名内联显示: 紧跟名称, 小字灰色, 弹性收缩防止叠加 */
.link-domain-inline {
    display: inline-flex; align-items: center; gap: 4px;
    flex: 1 1 auto; min-width: 50px;
    font-family: var(--font-mono, monospace);
    font-size: 0.66rem; color: var(--text-muted);
    overflow: hidden;
}
.link-domain-inline .link-domain-value {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.link-domain-label { display: none; }
.url-link-wrap { display: none !important; }
.url-link-wrap a {
    min-width: 0; justify-content: center; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
    font-size: 0.8rem; opacity: 0.65; color: var(--primary);
    text-decoration: none; font-weight: 500;
    display: flex; align-items: center; gap: 5px;
    transition: opacity var(--duration-fast) ease;
}
.url-link-wrap a:hover { opacity: 1; }

/* 复制按钮: 精致小巧, 固定宽度不收缩 */
.copy-btn {
    flex-shrink: 0; margin-left: auto;
    padding: 5px 12px; border: none; border-radius: var(--radius-xs);
    background: var(--gradient); color: #fff;
    font-size: 0.72rem; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
    box-shadow: 0 3px 10px rgba(var(--primary-rgb), 0.25);
    transition: transform var(--duration) var(--ease-out),
                box-shadow var(--duration) var(--ease-out);
    white-space: nowrap;
}
.copy-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(var(--primary-rgb), 0.35); }
.copy-btn:active { transform: translateY(0); }

/* 状态徽章: 精致小巧 */
.status-badge {
    flex-shrink: 0;
    padding: 3px 10px; border-radius: var(--radius-full);
    font-size: 0.68rem; font-weight: 600; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center; gap: 3px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition: background var(--duration) ease;
}

/* ========== 防屏蔽: 当前域名显示 ========== */
.link-current-domain {
    transition: background 0.3s ease;
}
.link-domain-label { display: none; }
.link-domain-value {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: opacity 0.22s ease;
}
.current-domain-text {
    transition: opacity 0.22s ease;
}
/* 域名轮询更新时的淡出淡入 */
.domain-updating {
    opacity: 0;
}
.link-domain-empty { color: var(--text-muted); font-style: italic; }

/* 泛域名标识徽章 */
.link-wildcard-badge {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: 6px; padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--gradient-accent);
    color: #fff; font-family: var(--font-sans);
    font-size: 0.62rem; font-weight: 600; letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.25);
}
.link-wildcard-badge i { font-size: 0.6rem; }

/* 多域名轮询指示器(小圆点呼吸动画) */
.link-domain-indicator {
    flex-shrink: 0;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
    animation: dotPulse 2.2s ease-in-out infinite;
}
@keyframes dotPulse {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
    70%  { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* ========== 联系方式 ========== */
.notice {
    display: flex; flex-direction: column; gap: 10px;
    margin: 1rem 0; padding: 1rem 1.1rem;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.04), rgba(var(--accent-rgb), 0.03));
    border: 1px solid rgba(var(--secondary-rgb), 0.12);
}
.dark-mode .notice {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.08), rgba(var(--accent-rgb), 0.05));
    border-color: rgba(var(--primary-rgb), 0.2);
}
.notice-header { display: flex; align-items: center; gap: 10px; padding-bottom: 0.6rem; border-bottom: 1px solid var(--card-border-color); }
.notice-icon {
    flex-shrink: 0; color: var(--primary); font-size: 1rem;
    width: 30px; height: 30px; border-radius: 9px;
    background: rgba(var(--primary-rgb), 0.12);
    display: flex; align-items: center; justify-content: center;
}
.dark-mode .notice-icon { background: rgba(var(--primary-rgb), 0.18); }
.notice-title { font-size: 0.92rem; font-weight: 800; color: var(--text); white-space: nowrap; letter-spacing: 0.5px; }
.notice-links { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }

.contact-link {
    display: flex; align-items: center; gap: 8px;
    padding: 0.35rem 0.6rem;
    background: var(--card-bg); border: 1px solid var(--card-border-color);
    border-radius: 9px; font-size: 0.72rem; color: var(--text);
    text-decoration: none; font-weight: 500;
    transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.contact-link:hover {
    transform: translateX(4px);
    border-color: rgba(var(--primary-rgb), 0.35);
    background: var(--item-hover);
    box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.1);
    color: var(--text);
}
.contact-icon {
    display: flex; width: 22px; height: 22px; border-radius: 6px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    align-items: center; justify-content: center; color: #fff;
    font-size: 0.62rem; flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.2);
}
.contact-icon i { color: #fff; }
/* 单行布局: 名称 + 链接/文字 并排 */
.contact-text { display: flex; flex-direction: row; align-items: center; gap: 5px; flex: 1; min-width: 0; }
.contact-text strong { font-size: 0.7rem; font-weight: 700; color: var(--text); white-space: nowrap; flex-shrink: 0; }
.contact-value {
    font-size: 0.65rem; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1; min-width: 0;
    font-family: var(--font-mono, monospace);
}
.contact-link:hover .contact-text strong,
.contact-link:hover .contact-value { color: var(--primary); }
.contact-arrow { display: inline; color: var(--text-muted); font-size: 0.58rem; flex-shrink: 0; opacity: 0.4; transition: opacity 0.2s, transform 0.2s; }
.contact-link:hover .contact-arrow { opacity: 0.8; transform: translateX(2px); }

/* ========== 统计栏 ========== */
.line-status-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.5rem 1.1rem;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(6,182,212,0.04));
    border: 1px solid rgba(16,185,129,0.15);
}
.dark-mode .line-status-bar {
    background: linear-gradient(135deg, rgba(52,211,153,0.08), rgba(34,211,238,0.05));
    border-color: rgba(52,211,153,0.2);
}
.line-status-bar .left-part {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.85rem; font-weight: 700; color: var(--text);
}
.line-status-bar .left-part i { color: var(--success); font-size: 0.95rem; }
.line-status-bar .right-part { display: flex; gap: 12px; font-size: 0.82rem; font-weight: 600; }
.status-item {
    display: flex; align-items: center; gap: 5px;
    padding: 4px 12px; border-radius: var(--radius-full);
    font-weight: 700;
}
.status-item.normal { background: rgba(16,185,129,0.12); }
.status-item.normal i, .status-item.normal span { color: var(--success); }
.status-item.error { background: rgba(239,68,68,0.12); }
.status-item.error i, .status-item.error span { color: var(--danger); }

/* ========== 运行天数 ========== */
.uptime-box {
    margin-top: 1.3rem; padding: 1rem 1.3rem;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.07), rgba(var(--accent-rgb), 0.04));
    border: 1px solid rgba(var(--secondary-rgb), 0.15);
    display: flex; align-items: baseline; justify-content: center;
    gap: 8px; flex-wrap: nowrap; white-space: nowrap;
    width: 100%; box-sizing: border-box;
    position: relative; overflow: hidden;
}
.uptime-box::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.08), transparent);
    animation: uptimeShimmer 4s ease-in-out infinite;
}
@keyframes uptimeShimmer {
    0%, 100% { left: -100%; }
    50% { left: 100%; }
}
.uptime-label { font-size: 0.85rem; color: var(--text-muted); letter-spacing: 1px; flex-shrink: 0; margin-bottom: 0; position: relative; z-index: 1; }
.uptime-label i { margin-right: 4px; }
.uptime-value {
    font-size: 1.6rem; font-weight: 800; line-height: 1;
    flex-shrink: 0; position: relative; z-index: 1;
    text-shadow: 0 0 20px rgba(var(--secondary-rgb), 0.2);
}
.uptime-unit { font-size: 0.88rem; font-weight: 600; color: var(--text-muted); flex-shrink: 0; position: relative; z-index: 1; }

/* ========== 深色模式切换按钮 ========== */
.mode-toggle {
    position: fixed; top: 20px; right: 20px; z-index: 9999;
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    background: var(--card-bg); border: 1px solid var(--card-border);
    border-radius: 50%; color: var(--text); font-size: 1.15rem;
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--shadow-sm), 0 0 20px rgba(var(--secondary-rgb), 0.1);
    transition: transform var(--duration-slow) var(--ease-spring),
                color var(--duration) ease, box-shadow var(--duration) ease,
                background var(--duration) ease;
    cursor: pointer;
}
.mode-toggle:hover { color: var(--primary); transform: scale(1.15) rotate(20deg); box-shadow: var(--shadow), 0 0 30px rgba(var(--secondary-rgb), 0.25); }
.mode-toggle.spinning { animation: toggleSpin 0.5s var(--ease-spring); }
@keyframes toggleSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ========== 底部 ========== */
.footer { margin-top: 1.8rem; text-align: center; color: var(--text-muted); font-size: 0.78rem; letter-spacing: 1.5px; opacity: 0.85; transition: opacity 0.3s; }
.footer:hover { opacity: 1; }

/* ========== 响应式: 平板 768-1024px ========== */
@media (max-width: 1024px) and (min-width: 769px) {
    .wrapper { max-width: 700px; }
    .main { padding: 2.5rem 2rem; }
    .site-title { font-size: 2.2rem; }
}

/* ========== 响应式: 手机 <768px ========== */
@media (max-width: 768px) {
    body { padding: 1.2rem 0 calc(1.2rem + env(safe-area-inset-bottom)); }
    .wrapper { padding: 0.8rem; }
    .main { padding: 2.1rem 1.4rem; border-radius: 24px; }
    /* 手机端主题切换按钮: fixed定位, 确保不被裁剪遮挡, 右上角悬浮 */
    .mode-toggle {
        display: flex;
        width: 44px;
        height: 44px;
        top: 16px;
        right: 16px;
        font-size: 1.1rem;
        z-index: 9999;
    }
    .site-title { font-size: 2rem; letter-spacing: 3px; }
    .header-logo { width: 72px; height: 72px; }
    .logo-icon-fallback { width: 72px; height: 72px; font-size: 1.9rem; border-radius: 20px; }
    .header-subtitle { font-size: 0.76rem; letter-spacing: 3px; }

    .link-list { gap: 0.55rem; margin-bottom: 0.8rem; }
    .link-item { padding: 0.5rem 0.65rem 0.5rem 0.65rem; min-height: 50px; }
    .url-content { flex-wrap: nowrap; align-items: center; justify-content: flex-start; margin-top: 11px; gap: 5px; height: auto; min-height: 22px; }
    .url-label { font-size: 0.8rem; font-weight: 800; flex-shrink: 0; max-width: 35%; }
    .link-domain-inline { font-size: 0.62rem; min-width: 35px; }
    .copy-btn { padding: 4px 9px; font-size: 0.64rem; }
    .status-badge { padding: 2px 7px; font-size: 0.6rem; }
    .ms-display { padding: 2px 6px; font-size: 0.54rem; min-width: 40px; width: auto; }
    .domain-content { padding: 0.55rem 0.75rem; font-size: 0.82rem; line-height: 1.65; }
    .bookmark-btn:not(.expanded) .domain-toggle { padding: 0.35rem 0.8rem; }

    .line-status-bar { padding: 0.4rem 0.8rem; gap: 8px; }
    .line-status-bar .left-part { font-size: 0.78rem; white-space: nowrap; }
    .line-status-bar .right-part { gap: 8px; font-size: 0.75rem; flex-shrink: 0; }
    .status-item { padding: 3px 9px; }

    /* 手机端联系方式布局微调 */
    .notice { flex-direction: column; align-items: stretch; gap: 6px; padding: 0.8rem 0.9rem; }
    .notice-header { margin-bottom: 0; padding-bottom: 0.45rem; border-bottom: 1px solid var(--card-border-color); }
    .notice-links { align-items: stretch; gap: 5px; }
    .contact-link { padding: 0.25rem 0.5rem; gap: 5px; }
    .contact-icon { width: 19px; height: 19px; font-size: 0.54rem; border-radius: 5px; }
    .contact-text { gap: 3px; }
    .contact-text strong { font-size: 0.67rem; }
    .contact-value { font-size: 0.6rem; }

    .bg-orb { filter: blur(70px); }
    .bg-orb:nth-child(1) { width: 280px; height: 280px; }
    .bg-orb:nth-child(2) { width: 240px; height: 240px; }
    .bg-orb:nth-child(3) { width: 220px; height: 220px; }
    .uptime-box { padding: 0.8rem 0.9rem; gap: 5px; }
    .uptime-label { font-size: 0.74rem; letter-spacing: 0.5px; }
    .uptime-box .uptime-value { font-size: 1.3rem; }
    .uptime-unit { font-size: 0.76rem; }
    .footer { margin-top: 1.4rem; font-size: 0.74rem; }
}

/* ========== 超小屏 <480px ========== */
@media (max-width: 480px) {
    .main { padding: 1.6rem 1.1rem; }
    .site-title { font-size: 1.6rem; letter-spacing: 2px; }
    .header-logo { width: 64px; height: 64px; }
    .logo-icon-fallback { width: 64px; height: 64px; font-size: 1.6rem; }
    .link-item { padding: 0.42rem 0.55rem 0.42rem 0.55rem; min-height: 48px; }
    .url-content { margin-top: 10px; height: auto; min-height: 20px; gap: 4px; }
    .url-label { font-size: 0.75rem; max-width: 32%; }
    .copy-btn { padding: 3px 7px; font-size: 0.6rem; }
    .status-badge { padding: 2px 6px; font-size: 0.57rem; }
    .line-status-bar .left-part { font-size: 0.74rem; }
    .line-status-bar .right-part { font-size: 0.72rem; gap: 8px; }
    .uptime-box { padding: 0.7rem 0.8rem; }
    .uptime-label { font-size: 0.7rem; }
    .uptime-box .uptime-value { font-size: 1.15rem; }
}

/* ========== v3.0.6 线路卡片简化 ========== */
.url-link-wrap { display: none !important; }

/* 复制按钮在简化卡片中的样式微调 */
.copy-btn {
    margin-left: auto;
}

/* 空状态(未配置域名)卡片样式 */
.link-item.disabled .url-label {
    opacity: 0.5;
}
.link-item.disabled .copy-btn {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========== 公告网址复制按钮 ========== */
.ann-url {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    margin: 0 2px;
    background: rgba(var(--primary-rgb), 0.06);
    border: 1px solid rgba(var(--secondary-rgb), 0.15);
    border-radius: var(--radius-xs);
    font-family: var(--font-mono, monospace);
    font-size: 0.82rem;
    color: var(--primary);
    word-break: break-all;
    vertical-align: middle;
}
.dark-mode .ann-url {
    background: rgba(var(--primary-rgb), 0.1);
    border-color: rgba(var(--primary-rgb), 0.25);
}
.ann-url-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 280px;
}
.ann-url-copy {
    flex-shrink: 0;
    padding: 2px 6px;
    border: none;
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    font-size: 0.75rem;
    opacity: 0.7;
    transition: opacity 0.2s ease, transform 0.15s ease;
}
.ann-url-copy:hover { opacity: 1; transform: scale(1.15); }
.ann-url-copy:active { transform: scale(0.95); }

/* ========== 域名切换高亮闪烁反馈 ========== */
.domain-flash {
    animation: domainFlash 300ms ease-out;
}
@keyframes domainFlash {
    0%   { background: rgba(var(--primary-rgb), 0.22); }
    100% { background: transparent; }
}

/* ========== 移动端: 公告网址适配 ========== */
@media (max-width: 768px) {
    .ann-url-text { max-width: 180px; }
    .link-current-domain { font-size: 0.74rem; }
}

/* ========== 深色模式变量覆盖: 提升全局文字对比度 ========== */
.dark-mode {
    --text-muted: rgba(255,255,255,0.6);
    --text-light: rgba(255,255,255,0.8);
    --card-bg: rgba(15,15,35,0.72);
    --card-border-color: rgba(255,255,255,0.1);
    --item-bg: rgba(25,25,50,0.5);
    --item-hover: rgba(49,46,129,0.5);
    --glass-border: 1px solid rgba(255,255,255,0.08);
}
.dark-mode ::placeholder { color: rgba(255,255,255,0.4); }
.dark-mode .glass-card { background: rgba(15,15,35,0.72); border: 1px solid rgba(255,255,255,0.08); }
.dark-mode .main { box-shadow: 0 24px 64px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06); }

/* ========== 深色模式: 图标亮度全面提升(确保对比度≥4.5:1) ========== */
/* 主题切换按钮 */
.dark-mode .mode-toggle { color: rgba(255,255,255,0.92); }
.dark-mode .mode-toggle:hover { color: rgba(var(--secondary-rgb), 1); }
/* 线路项内图标 */
.dark-mode .url-label i { color: rgba(var(--primary-rgb), 0.95); }
.dark-mode .current-domain-link i { color: rgba(var(--primary-rgb), 0.9); }
.dark-mode .copy-btn i { color: #fff; }
.dark-mode .link-wildcard-badge i { color: #fff; }
.dark-mode .link-domain-indicator { background: rgba(52,211,153,0.9); }
/* 公告区域图标: 滚动公告喇叭图标为渐变圆底白字, 深色下保持白字 */
.dark-mode .scroll-announcement > i { color: #fff; }
.dark-mode .inline-title i { color: rgba(52,211,153,0.95); }
.dark-mode .domain-toggle .toggle-left > i { color: rgba(255,255,255,0.95); }
.dark-mode .toggle-arrow { color: rgba(255,255,255,0.9); opacity: 0.9; }
/* 联系方式图标 */
.dark-mode .notice-icon { color: #a5b4fc; background: rgba(var(--primary-rgb), 0.2); }
.dark-mode .contact-icon { color: #fff; }
.dark-mode .contact-icon i { color: #fff; }
.dark-mode .contact-arrow { color: rgba(255,255,255,0.65); opacity: 0.85; }
/* 运行天数图标 */
.dark-mode .uptime-label i { color: rgba(var(--primary-rgb), 0.9); }
/* 统计栏图标 */
.dark-mode .line-status-bar .left-part i { color: rgba(52,211,153,0.95); }
.dark-mode .status-item i { opacity: 1; }
/* 公告网址复制按钮图标 */
.dark-mode .ann-url-copy { color: rgba(var(--primary-rgb), 0.9); }
.dark-mode .ann-url-copy:hover { color: rgba(var(--secondary-rgb), 1); }
/* 线路标题图标 */
.dark-mode .link-section-title i { color: rgba(var(--primary-rgb), 0.95); }
/* 域名字段标签 */
.dark-mode .link-domain-label { color: rgba(var(--secondary-rgb), 0.95); }

/* ========== 全局盒模型与防溢出 ========== */
*, *::before, *::after { box-sizing: border-box; }
.glass-card, .link-item, .bookmark-btn, .scroll-announcement,
.inline-announcement, .notice, .line-status-bar, .uptime-box {
    max-width: 100%;
}

/* ========== 主题色滚动条 ========== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary), var(--secondary));
    border-radius: 4px;
    opacity: 0.6;
}
::-webkit-scrollbar-thumb:hover { opacity: 1; }
.dark-mode ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(var(--primary-rgb), 0.5), rgba(var(--secondary-rgb), 0.5));
}

/* ============================================================
   v3.2.0 前台高端化增强层 — 付费级质感 / 主题深度融合 / 沉浸感
   ============================================================ */

/* ---- 1. 背景系统升级: 多层光晕 + 网格纹理 + 深度感 ---- */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(var(--secondary-rgb), 0.06) 0%, transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(var(--accent-rgb), 0.05) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(var(--primary-rgb), 0.03) 0%, transparent 60%);
}
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.4;
    background-image:
        linear-gradient(rgba(var(--secondary-rgb), 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--secondary-rgb), 0.03) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.dark-mode body::after {
    opacity: 0.25;
    background-image:
        linear-gradient(rgba(var(--primary-rgb), 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--primary-rgb), 0.05) 1px, transparent 1px);
}

/* 光晕升级: 更大、更柔和、更有层次 + 明显的动态漂移 */
.bg-orb {
    filter: blur(120px);
    opacity: 0.4;
    animation: orbFloatDynamic 20s ease-in-out infinite;
    will-change: transform;
}
/* 光晕动态漂移: 每个光晕有独立的运动轨迹, 明显可见的位置变化
   组合平移+缩放+轻微旋转, 营造流动感 */
@keyframes orbFloatDynamic {
    0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
    20%  { transform: translate(60px, -40px) scale(1.08) rotate(5deg); }
    40%  { transform: translate(-30px, 50px) scale(0.95) rotate(-3deg); }
    60%  { transform: translate(50px, 30px) scale(1.05) rotate(4deg); }
    80%  { transform: translate(-50px, -20px) scale(0.98) rotate(-5deg); }
    100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}
.bg-orb:nth-child(1) {
    width: 560px; height: 560px;
    background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
    top: -200px; left: -200px;
    animation-duration: 24s;
    animation-delay: 0s;
}
.bg-orb:nth-child(2) {
    width: 480px; height: 480px;
    background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
    top: 5%; right: -150px;
    animation-duration: 28s;
    animation-delay: -8s;
}
.bg-orb:nth-child(3) {
    width: 420px; height: 420px;
    background: radial-gradient(circle, var(--secondary) 0%, transparent 70%);
    bottom: -150px; left: 30%;
    animation-duration: 26s;
    animation-delay: -16s;
}
.dark-mode .bg-orb {
    opacity: 0.5;
    filter: blur(140px);
}

/* ---- 2. 主卡片升级: 超通透玻璃 + 渐变边框 + 深度羽化阴影 ---- */
.main {
    /* 极度通透: 让背景光晕、云朵、星空充分透过来, logo两侧空白不再白茫茫一片 */
    background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.09));
    backdrop-filter: blur(36px) saturate(180%);
    -webkit-backdrop-filter: blur(36px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.2);
    /* 底部阴影大幅羽化: 超大模糊半径+低透明度, 边缘柔和无硬边 */
    box-shadow:
        0 40px 100px rgba(var(--primary-rgb), 0.1),
        0 20px 50px rgba(0,0,0,0.04),
        0 8px 20px rgba(0,0,0,0.02),
        inset 0 1px 0 rgba(255,255,255,0.6),
        inset 0 -1px 0 rgba(255,255,255,0.15);
    transition: box-shadow 0.5s var(--ease-premium), transform 0.5s var(--ease-premium);
}
.main:hover {
    box-shadow:
        0 50px 120px rgba(var(--primary-rgb), 0.14),
        0 24px 60px rgba(0,0,0,0.05),
        0 10px 24px rgba(0,0,0,0.03),
        inset 0 1px 0 rgba(255,255,255,0.7),
        inset 0 -1px 0 rgba(255,255,255,0.2);
}
.dark-mode .main {
    /* 深色模式极度通透: 让星空和光晕透过来 */
    background: linear-gradient(135deg, rgba(15,23,42,0.25), rgba(30,27,75,0.15));
    border: 1px solid rgba(255,255,255,0.05);
    box-shadow:
        0 40px 100px rgba(0,0,0,0.4),
        0 20px 50px rgba(0,0,0,0.25),
        0 8px 20px rgba(0,0,0,0.15),
        inset 0 1px 0 rgba(255,255,255,0.07),
        inset 0 -1px 0 rgba(255,255,255,0.02);
}
.dark-mode .main:hover {
    box-shadow:
        0 50px 120px rgba(0,0,0,0.45),
        0 24px 60px rgba(0,0,0,0.3),
        0 10px 24px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.09),
        inset 0 -1px 0 rgba(255,255,255,0.03);
}

/* 流光顶部边框升级: 更宽、更柔和 */
.main::before {
    height: 2.5px;
    background: linear-gradient(90deg, transparent, var(--primary), var(--accent), var(--secondary), transparent);
    background-size: 200% 100%;
    animation: borderShimmer 5s linear infinite;
    filter: blur(0.5px);
}

/* 主卡片底部微光 */
.main::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--secondary-rgb), 0.3), rgba(var(--accent-rgb), 0.2), transparent);
    pointer-events: none;
}

/* ---- 3. 品牌区升级: 更强视觉冲击力 ---- */
.header-area {
    margin-bottom: 2.8rem;
    position: relative;
}
/* 品牌区背后光晕 */
.header-area::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(var(--secondary-rgb), 0.12) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.dark-mode .header-area::before {
    background: radial-gradient(circle, rgba(var(--primary-rgb), 0.15) 0%, transparent 70%);
}
.header-area > * { position: relative; z-index: 1; }

.header-logo {
    width: 100px;
    height: 100px;
    margin-bottom: 1.5rem;
    animation: logoFloat 6s ease-in-out infinite;
}
.header-logo img {
    filter: drop-shadow(0 20px 48px rgba(var(--primary-rgb), 0.4));
    transition: filter 0.4s var(--ease-premium);
}
.header-logo:hover img {
    filter: drop-shadow(0 24px 56px rgba(var(--primary-rgb), 0.5)) drop-shadow(0 0 24px rgba(var(--secondary-rgb), 0.2));
}
.logo-icon-fallback {
    width: 100px;
    height: 100px;
    border-radius: 28px;
    font-size: 2.6rem;
    box-shadow:
        0 12px 32px rgba(var(--primary-rgb), 0.4),
        0 0 48px rgba(var(--secondary-rgb), 0.2),
        inset 0 1px 0 rgba(255,255,255,0.4);
    position: relative;
    overflow: hidden;
}
.logo-icon-fallback::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: logoShine 4s ease-in-out infinite;
}
@keyframes logoShine {
    0%, 60% { left: -100%; }
    80%, 100% { left: 100%; }
}

.site-title {
    font-size: 2.8rem;
    font-weight: 900;
    letter-spacing: 6px;
    background: var(--gradient-premium);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.8rem;
    animation: titleBreath 4s ease-in-out infinite;
    text-shadow: none;
    filter: drop-shadow(0 4px 12px rgba(var(--secondary-rgb), 0.15));
    will-change: background-position, opacity;
}
/* 标题呼吸灯: 渐变位置在文字内部流动 + opacity柔和呼吸(0.88→1→0.88)
   -webkit-text-fill-color: transparent 确保背景渐变显示在文字内部
   呼吸周期4s, 与主题色深度融合 */
@keyframes titleBreath {
    0%   { background-position: 0% center;   opacity: 0.88; }
    25%  { background-position: 50% center;  opacity: 1; }
    50%  { background-position: 100% center; opacity: 0.95; }
    75%  { background-position: 50% center;  opacity: 1; }
    100% { background-position: 0% center;   opacity: 0.88; }
}
.header-subtitle {
    font-size: 0.88rem;
    letter-spacing: 8px;
    opacity: 0.7;
    font-weight: 600;
    background: linear-gradient(90deg, var(--text-muted), var(--primary), var(--text-muted));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: premiumGradientShift 6s ease-in-out infinite;
}
.dark-mode .header-subtitle {
    background: linear-gradient(90deg, rgba(255,255,255,0.5), rgba(var(--secondary-rgb), 0.9), rgba(255,255,255,0.5));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---- 4. 玻璃卡片统一升级: 更通透, 让背景光晕和云朵透过来 ---- */
.glass-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.32), rgba(255,255,255,0.18));
    backdrop-filter: blur(28px) saturate(170%);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: var(--radius-premium-lg);
    box-shadow:
        0 6px 24px rgba(var(--primary-rgb), 0.06),
        0 2px 6px rgba(0,0,0,0.02),
        inset 0 1px 0 rgba(255,255,255,0.5);
    transition: all 0.4s var(--ease-premium);
}
.glass-card:hover {
    box-shadow:
        0 10px 32px rgba(var(--primary-rgb), 0.1),
        0 3px 10px rgba(0,0,0,0.03),
        inset 0 1px 0 rgba(255,255,255,0.6);
}
.dark-mode .glass-card {
    background: linear-gradient(135deg, rgba(15,23,42,0.4), rgba(30,27,75,0.28));
    border: 1px solid rgba(255,255,255,0.07);
    box-shadow:
        0 6px 24px rgba(0,0,0,0.25),
        0 2px 6px rgba(0,0,0,0.15),
        inset 0 1px 0 rgba(255,255,255,0.05);
}
.dark-mode .glass-card:hover {
    box-shadow:
        0 12px 36px rgba(0,0,0,0.4),
        0 4px 12px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.08);
        border-color: rgba(var(--primary-rgb), 0.2);
}

/* ---- 5. 线路卡片升级: 更精致的hover和微交互 ---- */
.link-item {
    background: linear-gradient(135deg, rgba(255,255,255,0.55), rgba(255,255,255,0.35));
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--radius-premium-md);
    padding: 0.65rem 1rem 0.65rem 1rem;
    min-height: 60px;
    box-shadow:
        0 4px 16px rgba(var(--primary-rgb), 0.06),
        0 1px 4px rgba(0,0,0,0.02),
        inset 0 1px 0 rgba(255,255,255,0.6);
    transition: all 0.35s var(--ease-premium);
    position: relative;
    overflow: hidden;
}
.link-item::before {
    width: 3.5px;
    background: var(--gradient-premium);
    border-radius: 0 4px 4px 0;
}
.link-item::after {
    background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent 60%);
}
.link-item:hover, .link-item:active {
    transform: translateY(-4px) scale(1.01);
    background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(255,255,255,0.5));
    border-color: rgba(var(--secondary-rgb), 0.35);
    box-shadow:
        0 16px 40px rgba(var(--primary-rgb), 0.18),
        0 4px 12px rgba(0,0,0,0.05),
        0 0 0 1px rgba(var(--secondary-rgb), 0.15),
        0 0 32px rgba(var(--secondary-rgb), 0.08),
        inset 0 1px 0 rgba(255,255,255,0.8);
}
.dark-mode .link-item {
    background: linear-gradient(135deg, rgba(30,41,59,0.6), rgba(15,23,42,0.45));
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow:
        0 4px 16px rgba(0,0,0,0.3),
        0 1px 4px rgba(0,0,0,0.15),
        inset 0 1px 0 rgba(255,255,255,0.05);
}
.dark-mode .link-item:hover, .dark-mode .link-item:active {
    background: linear-gradient(135deg, rgba(49,46,129,0.55), rgba(30,27,75,0.45));
    border-color: rgba(var(--primary-rgb), 0.3);
    box-shadow:
        0 16px 40px rgba(0,0,0,0.45),
        0 4px 12px rgba(0,0,0,0.25),
        0 0 0 1px rgba(var(--primary-rgb), 0.2),
        0 0 32px rgba(var(--primary-rgb), 0.1),
        inset 0 1px 0 rgba(255,255,255,0.08);
}

/* 延迟徽章升级 */
.ms-display {
    padding: 3px 10px;
    min-width: 50px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    border-top-left-radius: var(--radius-premium-md);
    border-bottom-right-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    backdrop-filter: blur(8px);
}
.ms-green {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 2px 10px rgba(16,185,129,0.35);
}
.ms-yellow {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 2px 10px rgba(245,158,11,0.35);
}
.ms-red, .ms-error {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 2px 10px rgba(239,68,68,0.35);
}

/* 复制按钮升级 */
.copy-btn {
    padding: 6px 14px;
    border-radius: var(--radius-premium-sm);
    background: var(--gradient-premium);
    font-size: 0.74rem;
    font-weight: 700;
    box-shadow:
        0 4px 12px rgba(var(--primary-rgb), 0.3),
        inset 0 1px 0 rgba(255,255,255,0.3);
    position: relative;
    overflow: hidden;
}
.copy-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s var(--ease-premium);
}
.copy-btn:hover::after { left: 100%; }
.copy-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 18px rgba(var(--primary-rgb), 0.4),
        0 0 24px rgba(var(--secondary-rgb), 0.15),
        inset 0 1px 0 rgba(255,255,255,0.35);
}

/* 状态徽章升级 */
.status-badge {
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.status-normal {
    background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(6,182,212,0.1));
    color: #059669;
    border: 1px solid rgba(16,185,129,0.25);
}
.dark-mode .status-normal {
    background: linear-gradient(135deg, rgba(52,211,153,0.15), rgba(34,211,238,0.1));
    color: #34d399;
    border-color: rgba(52,211,153,0.25);
}
.status-error {
    background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(249,115,22,0.1));
    color: #dc2626;
    border: 1px solid rgba(239,68,68,0.25);
}
.dark-mode .status-error {
    background: linear-gradient(135deg, rgba(248,113,113,0.15), rgba(251,146,60,0.1));
    color: #f87171;
    border-color: rgba(248,113,113,0.25);
}

/* 线路名称文字 */
.url-label {
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.3px;
}
.url-label i {
    font-size: 0.82rem;
    filter: drop-shadow(0 0 4px rgba(var(--secondary-rgb), 0.2));
}

/* 域名显示 */
.link-domain-inline {
    font-size: 0.68rem;
    padding: 2px 8px;
    background: rgba(var(--secondary-rgb), 0.06);
    border-radius: var(--radius-premium-xs);
    border: 1px solid rgba(var(--secondary-rgb), 0.1);
}
.dark-mode .link-domain-inline {
    background: rgba(var(--primary-rgb), 0.08);
    border-color: rgba(var(--primary-rgb), 0.15);
}

/* 泛域名徽章升级 */
.link-wildcard-badge {
    padding: 3px 10px;
    font-size: 0.64rem;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(var(--accent-rgb), 0.3);
}

/* ---- 6. 公告区域升级 ---- */
.scroll-announcement {
    padding: 0.8rem 1.2rem;
    margin-bottom: 1.2rem;
    border-radius: var(--radius-premium-md);
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.1), rgba(var(--accent-rgb), 0.06));
    border: 1px solid rgba(var(--secondary-rgb), 0.18);
    box-shadow:
        inset 0 1px 3px rgba(255,255,255,0.4),
        0 4px 16px rgba(var(--primary-rgb), 0.08);
}
.dark-mode .scroll-announcement {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.16), rgba(var(--accent-rgb), 0.1));
    border-color: rgba(var(--primary-rgb), 0.3);
}
.scroll-announcement > i {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
    box-shadow: 0 3px 10px rgba(var(--primary-rgb), 0.35), inset 0 1px 0 rgba(255,255,255,0.3);
}
.scroll-announcement .scroll-content span {
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* 折叠公告升级 */
.bookmark-btn {
    border-radius: var(--radius-premium-md);
    background: var(--gradient-premium);
    box-shadow:
        0 8px 24px rgba(var(--primary-rgb), 0.3),
        0 2px 8px rgba(0,0,0,0.05),
        inset 0 1px 0 rgba(255,255,255,0.25);
    position: relative;
    overflow: hidden;
}
.bookmark-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    animation: bookmarkShine 4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes bookmarkShine {
    0%, 70% { left: -100%; }
    85%, 100% { left: 100%; }
}
.bookmark-btn:hover {
    box-shadow:
        0 14px 36px rgba(var(--primary-rgb), 0.4),
        0 4px 12px rgba(0,0,0,0.08),
        0 0 32px rgba(var(--secondary-rgb), 0.15),
        inset 0 1px 0 rgba(255,255,255,0.3);
    transform: translateY(-2px);
}
.domain-toggle {
    padding: 0.8rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.domain-toggle .toggle-label {
    letter-spacing: 1.5px;
}
.domain-content {
    padding: 0.8rem 1rem;
    line-height: 1.8;
    font-size: 0.88rem;
    border-radius: var(--radius-premium-sm);
    background: rgba(255,255,255,0.92);
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.04);
}
.dark-mode .domain-content {
    background: rgba(0,0,0,0.5);
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.2);
}
.ann-field {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(var(--secondary-rgb), 0.08);
}
.dark-mode .ann-field {
    border-bottom-color: rgba(255,255,255,0.08);
}
.ann-field strong {
    color: var(--primary);
    font-weight: 700;
    min-width: 5.5em;
}

/* ---- 7. 联系方式区域升级 ---- */
.notice {
    margin: 0.9rem 0;
    padding: 0.75rem 1.1rem;
    border-radius: var(--radius-premium-md);
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.05), rgba(var(--accent-rgb), 0.03));
    border: 1px solid rgba(var(--secondary-rgb), 0.12);
    box-shadow:
        0 3px 12px rgba(var(--primary-rgb), 0.05),
        inset 0 1px 0 rgba(255,255,255,0.5);
}
.dark-mode .notice {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.08), rgba(var(--accent-rgb), 0.05));
    border-color: rgba(var(--primary-rgb), 0.18);
}
.notice-header {
    padding-bottom: 0.55rem;
    margin-bottom: 0.55rem;
    border-bottom: 1px solid rgba(var(--secondary-rgb), 0.08);
}
.dark-mode .notice-header {
    border-bottom-color: rgba(255,255,255,0.07);
}
.notice-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.14), rgba(var(--secondary-rgb), 0.09));
    font-size: 0.95rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.dark-mode .notice-icon {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.18), rgba(var(--secondary-rgb), 0.13));
}
.notice-title {
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.8px;
}
.notice-links {
    gap: 6px;
}
.contact-link {
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius-premium-sm);
    background: linear-gradient(135deg, rgba(255,255,255,0.55), rgba(255,255,255,0.35));
    border: 1px solid rgba(255,255,255,0.35);
    font-size: 0.74rem;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.04);
    transition: all 0.3s var(--ease-premium);
}
.dark-mode .contact-link {
    background: linear-gradient(135deg, rgba(30,41,59,0.45), rgba(15,23,42,0.35));
    border: 1px solid rgba(255,255,255,0.07);
}
.contact-link:hover {
    transform: translateX(5px);
    border-color: rgba(var(--secondary-rgb), 0.28);
    background: linear-gradient(135deg, rgba(255,255,255,0.75), rgba(255,255,255,0.55));
    box-shadow:
        0 5px 16px rgba(var(--primary-rgb), 0.1),
        0 2px 5px rgba(0,0,0,0.04);
}
/* 深色模式联系方式hover: 必须与背景有明显区分, 用更亮的紫蓝色渐变+边框+辉光 */
.dark-mode .contact-link:hover {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.35), rgba(var(--secondary-rgb), 0.25));
    border-color: rgba(165,180,252,0.45);
    box-shadow:
        0 5px 18px rgba(var(--primary-rgb), 0.25),
        0 0 16px rgba(var(--primary-rgb), 0.15),
        inset 0 1px 0 rgba(255,255,255,0.1);
}
.dark-mode .contact-link:hover .contact-text strong,
.dark-mode .contact-link:hover .contact-value {
    color: #e0e7ff;
}
.contact-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: 0.62rem;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.22), inset 0 1px 0 rgba(255,255,255,0.22);
}
.contact-text strong {
    font-size: 0.72rem;
    font-weight: 700;
}
.contact-value {
    font-size: 0.66rem;
}

/* ---- 8. 统计栏升级 ---- */
.line-status-bar {
    padding: 0.7rem 1.3rem;
    border-radius: var(--radius-premium-md);
    background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(6,182,212,0.05));
    border: 1px solid rgba(16,185,129,0.18);
    box-shadow:
        0 4px 16px rgba(16,185,129,0.06),
        inset 0 1px 0 rgba(255,255,255,0.5);
}
.dark-mode .line-status-bar {
    background: linear-gradient(135deg, rgba(52,211,153,0.1), rgba(34,211,238,0.06));
    border-color: rgba(52,211,153,0.22);
}
.line-status-bar .left-part {
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.line-status-bar .left-part i {
    font-size: 1rem;
    filter: drop-shadow(0 0 4px rgba(16,185,129,0.3));
}
.status-item {
    padding: 5px 14px;
    border-radius: var(--radius-full);
    font-weight: 800;
    font-size: 0.8rem;
    backdrop-filter: blur(8px);
}
.status-item.normal {
    background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(6,182,212,0.1));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.status-item.error {
    background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(249,115,22,0.1));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}

/* ---- 9. 运行天数升级 ---- */
.uptime-box {
    margin-top: 1.5rem;
    padding: 1.2rem 1.5rem;
    border-radius: var(--radius-premium-lg);
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.09), rgba(var(--secondary-rgb), 0.06), rgba(var(--accent-rgb), 0.04));
    border: 1px solid rgba(var(--secondary-rgb), 0.18);
    box-shadow:
        0 6px 20px rgba(var(--primary-rgb), 0.08),
        inset 0 1px 0 rgba(255,255,255,0.5);
    position: relative;
    overflow: hidden;
}
.dark-mode .uptime-box {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.12), rgba(var(--secondary-rgb), 0.08), rgba(var(--accent-rgb), 0.06));
    border-color: rgba(var(--primary-rgb), 0.25);
}
.uptime-box::before {
    background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.12), transparent);
    animation: uptimeShimmer 5s ease-in-out infinite;
}
.uptime-label {
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--text-light);
}
.uptime-label i {
    margin-right: 6px;
    filter: drop-shadow(0 0 4px rgba(var(--secondary-rgb), 0.2));
}
.uptime-value {
    font-size: 1.9rem;
    font-weight: 900;
    background: var(--gradient-premium);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: premiumGradientShift 6s ease-in-out infinite;
    text-shadow: none;
    filter: drop-shadow(0 2px 8px rgba(var(--secondary-rgb), 0.15));
    font-variant-numeric: tabular-nums;
}
.uptime-unit {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-light);
}

/* ---- 10. 深色模式切换按钮升级 ---- */
.mode-toggle {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(255,255,255,0.5), rgba(255,255,255,0.3));
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.35);
    box-shadow:
        0 4px 16px rgba(var(--primary-rgb), 0.12),
        0 0 24px rgba(var(--secondary-rgb), 0.08),
        inset 0 1px 0 rgba(255,255,255,0.5);
    font-size: 1.2rem;
}
.dark-mode .mode-toggle {
    background: linear-gradient(135deg, rgba(30,41,59,0.6), rgba(15,23,42,0.5));
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow:
        0 4px 16px rgba(0,0,0,0.35),
        0 0 24px rgba(var(--primary-rgb), 0.1),
        inset 0 1px 0 rgba(255,255,255,0.06);
}
.mode-toggle:hover {
    transform: scale(1.15) rotate(25deg);
    box-shadow:
        0 8px 24px rgba(var(--primary-rgb), 0.2),
        0 0 36px rgba(var(--secondary-rgb), 0.15),
        inset 0 1px 0 rgba(255,255,255,0.6);
}

/* ---- 11. 底部升级 ---- */
.footer {
    margin-top: 2rem;
    font-size: 0.8rem;
    letter-spacing: 2px;
    opacity: 0.7;
    transition: all 0.3s var(--ease-premium);
}
.footer:hover {
    opacity: 1;
    letter-spacing: 2.5px;
}
.footer p {
    background: linear-gradient(90deg, var(--text-muted), var(--primary), var(--text-muted));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: premiumGradientShift 8s ease-in-out infinite;
}

/* ---- 12. 深色模式沉浸感增强 ---- */
.dark-mode {
    --text-muted: rgba(255,255,255,0.55);
    --text-light: rgba(255,255,255,0.82);
}
/* 深色模式星空增强 */
.dark-mode .star-field {
    opacity: 0.9;
}
.dark-mode .star {
    box-shadow: 0 0 6px rgba(255,255,255,0.8), 0 0 12px rgba(var(--primary-rgb), 0.3);
}
/* 深色模式粒子画布更亮 */
.dark-mode .particle-canvas {
    opacity: 0.9;
}

/* ---- 13. 入场动画升级 ---- */
.animate-fade-in-up {
    animation: premiumFadeInUp 0.6s var(--ease-premium) both;
}
@keyframes premiumFadeInUp {
    from {
        opacity: 0;
        transform: translateY(28px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ---- 14. 响应式优化 ---- */
@media (max-width: 1024px) and (min-width: 769px) {
    .wrapper { max-width: 720px; }
    .main { padding: 2.6rem 2.2rem; }
    .site-title { font-size: 2.4rem; letter-spacing: 5px; }
}

@media (max-width: 768px) {
    body { padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom)); }
    .wrapper { padding: 0.7rem; }
    .main {
        padding: 2.2rem 1.5rem;
        border-radius: var(--radius-premium-xl);
    }
    .site-title {
        font-size: 2.1rem;
        letter-spacing: 4px;
    }
    .header-logo { width: 76px; height: 76px; }
    .logo-icon-fallback { width: 76px; height: 76px; font-size: 2rem; border-radius: 22px; }
    .header-subtitle { font-size: 0.78rem; letter-spacing: 4px; }

    .link-list { gap: 0.65rem; margin-bottom: 0.9rem; }
    .link-item { padding: 0.55rem 0.75rem; min-height: 54px; }
    .url-content { margin-top: 12px; gap: 6px; }
    .url-label { font-size: 0.82rem; max-width: 36%; }
    .link-domain-inline { font-size: 0.64rem; padding: 2px 6px; }
    .copy-btn { padding: 5px 11px; font-size: 0.66rem; }
    .status-badge { padding: 3px 9px; font-size: 0.62rem; }
    .ms-display { padding: 2px 8px; font-size: 0.56rem; min-width: 44px; }

    .line-status-bar { padding: 0.5rem 0.9rem; }
    .line-status-bar .left-part { font-size: 0.8rem; }
    .line-status-bar .right-part { gap: 8px; font-size: 0.76rem; }
    .status-item { padding: 4px 10px; font-size: 0.74rem; }

    .notice { padding: 0.9rem 1rem; gap: 8px; }
    .notice-header { padding-bottom: 0.55rem; }
    .notice-links { gap: 6px; }
    .contact-link { padding: 0.35rem 0.6rem; gap: 6px; }
    .contact-icon { width: 20px; height: 20px; font-size: 0.58rem; border-radius: 6px; }
    .contact-text strong { font-size: 0.7rem; }
    .contact-value { font-size: 0.62rem; }

    .uptime-box { padding: 0.9rem 1.1rem; gap: 6px; }
    .uptime-label { font-size: 0.76rem; letter-spacing: 1px; }
    .uptime-value { font-size: 1.5rem; }
    .uptime-unit { font-size: 0.8rem; }

    .bg-orb { filter: blur(80px); }
    .bg-orb:nth-child(1) { width: 320px; height: 320px; }
    .bg-orb:nth-child(2) { width: 280px; height: 280px; }
    .bg-orb:nth-child(3) { width: 260px; height: 260px; }

    .footer { margin-top: 1.6rem; font-size: 0.76rem; letter-spacing: 1.5px; }
    .domain-toggle { padding: 0.7rem 0.9rem; font-size: 0.84rem; }
    .domain-content { padding: 0.7rem 0.85rem; font-size: 0.84rem; line-height: 1.7; }
    .scroll-announcement { padding: 0.7rem 1rem; margin-bottom: 1rem; }
    .scroll-announcement > i { width: 28px; height: 28px; font-size: 0.78rem; }
    .scroll-announcement .scroll-content span { font-size: 0.86rem; }
}

@media (max-width: 480px) {
    .main { padding: 1.8rem 1.2rem; }
    .site-title { font-size: 1.8rem; letter-spacing: 3px; }
    .header-logo { width: 68px; height: 68px; }
    .logo-icon-fallback { width: 68px; height: 68px; font-size: 1.7rem; }
    .link-item { padding: 0.5rem 0.65rem; min-height: 50px; }
    .url-content { margin-top: 11px; gap: 5px; }
    .url-label { font-size: 0.78rem; max-width: 34%; }
    .copy-btn { padding: 4px 9px; font-size: 0.62rem; }
    .status-badge { padding: 2px 7px; font-size: 0.58rem; }
    .line-status-bar .left-part { font-size: 0.76rem; }
    .line-status-bar .right-part { font-size: 0.72rem; gap: 6px; }
    .uptime-box { padding: 0.8rem 0.95rem; }
    .uptime-label { font-size: 0.72rem; }
    .uptime-value { font-size: 1.3rem; }
    .uptime-unit { font-size: 0.74rem; }
}

/* ---- 14.5 日间模式动态云朵背景 — 随机大小/数量/位置/速度 ---- */
/* 云朵容器: 固定定位, 日间显示, 深色模式平滑淡出(带短暂延迟, 让云朵"短暂"可见后再消失) */
.cloud-field {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.8;
    /* 切换夜间模式: 云朵先短暂可见(0.3s延迟), 然后0.8s平滑淡出 */
    transition: opacity 0.8s ease 0.3s;
}
.dark-mode .cloud-field {
    opacity: 0;
    /* 切回日间模式: 立即开始淡入, 无延迟 */
    transition: opacity 0.8s ease 0s;
}
/* 云朵基础样式: 用4层径向渐变组合成蓬松云朵形状, filter轻微模糊柔化边缘 */
.cloud {
    position: absolute;
    background:
        radial-gradient(ellipse 50% 60% at 25% 60%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.6) 50%, transparent 75%),
        radial-gradient(ellipse 40% 50% at 50% 38%, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.7) 50%, transparent 75%),
        radial-gradient(ellipse 45% 55% at 75% 55%, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.55) 50%, transparent 75%),
        radial-gradient(ellipse 60% 40% at 50% 72%, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.4) 60%, transparent 80%);
    filter: blur(2.5px);
    will-change: transform;
    animation: cloudDrift linear infinite;
    /* 每朵云有微妙的倾斜差异, JS会随机设置transform-origin */
}
/* 云朵形状变体A: 偏扁平横向拉伸 */
.cloud.shape-a {
    background:
        radial-gradient(ellipse 55% 50% at 20% 65%, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.55) 50%, transparent 75%),
        radial-gradient(ellipse 35% 45% at 45% 45%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.65) 50%, transparent 75%),
        radial-gradient(ellipse 50% 48% at 72% 58%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.5) 50%, transparent 75%),
        radial-gradient(ellipse 65% 35% at 48% 75%, rgba(255,255,255,0.68) 0%, rgba(255,255,255,0.38) 60%, transparent 80%);
}
/* 云朵形状变体B: 偏高耸有明显凸起 */
.cloud.shape-b {
    background:
        radial-gradient(ellipse 42% 65% at 30% 55%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.58) 50%, transparent 75%),
        radial-gradient(ellipse 38% 60% at 55% 35%, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.72) 50%, transparent 75%),
        radial-gradient(ellipse 40% 55% at 78% 52%, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.52) 50%, transparent 75%),
        radial-gradient(ellipse 55% 42% at 52% 70%, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.4) 60%, transparent 80%);
}
/* 云朵形状变体C: 小而紧凑 */
.cloud.shape-c {
    background:
        radial-gradient(ellipse 48% 55% at 35% 58%, rgba(255,255,255,0.93) 0%, rgba(255,255,255,0.62) 50%, transparent 75%),
        radial-gradient(ellipse 42% 52% at 62% 48%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.6) 50%, transparent 75%),
        radial-gradient(ellipse 55% 40% at 50% 68%, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.42) 60%, transparent 80%);
}
/* 云朵漂移动画: 从左到右缓慢移动, 带轻微上下浮动和缩放呼吸 */
@keyframes cloudDrift {
    0% {
        transform: translateX(-20vw) translateY(0) scale(1);
    }
    25% {
        transform: translateX(20vw) translateY(-12px) scale(1.02);
    }
    50% {
        transform: translateX(55vw) translateY(-20px) scale(1);
    }
    75% {
        transform: translateX(85vw) translateY(-8px) scale(0.98);
    }
    100% {
        transform: translateX(120vw) translateY(0) scale(1);
    }
}
/* 手机端云朵整体缩小并降低密度, 避免遮挡内容 */
@media (max-width: 768px) {
    .cloud-field { opacity: 0.55; }
    .cloud { filter: blur(1.5px); }
}
@media (max-width: 480px) {
    .cloud-field { opacity: 0.4; }
}

/* ---- 15. 无障碍与减少动画 ---- */
@media (prefers-reduced-motion: reduce) {
    .site-title,
    .header-subtitle,
    .uptime-value,
    .footer p,
    .bg-orb,
    .header-logo,
    .logo-icon-fallback::after,
    .bookmark-btn::before,
    .main::before,
    .uptime-box::before {
        animation: none !important;
    }
    .link-item:hover,
    .copy-btn:hover,
    .contact-link:hover,
    .mode-toggle:hover {
        transform: none !important;
    }
}

/* ============================================================
   v3.2.2 细节付费级增强层 — 全卡片通透统一 + 微交互精修
   ============================================================ */

/* ---- 1. 所有子卡片与主卡片统一通透度, 消除"卡片叠卡片"的厚重感 ---- */
.link-item {
    background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.12));
    border: 1px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.link-item:hover, .link-item:active {
    background: linear-gradient(135deg, rgba(255,255,255,0.32), rgba(255,255,255,0.2));
    border-color: rgba(var(--secondary-rgb), 0.3);
}
.dark-mode .link-item {
    background: linear-gradient(135deg, rgba(30,41,59,0.3), rgba(15,23,42,0.2));
    border: 1px solid rgba(255,255,255,0.06);
}
.dark-mode .link-item:hover, .dark-mode .link-item:active {
    background: linear-gradient(135deg, rgba(49,46,129,0.35), rgba(30,27,75,0.25));
    border-color: rgba(var(--primary-rgb), 0.25);
}

/* 滚动公告通透化 */
.scroll-announcement {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.06), rgba(var(--accent-rgb), 0.04));
    border: 1px solid rgba(var(--secondary-rgb), 0.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.dark-mode .scroll-announcement {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.1), rgba(var(--accent-rgb), 0.06));
    border-color: rgba(var(--primary-rgb), 0.18);
}

/* 折叠公告按钮通透化 */
.bookmark-btn {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.14), rgba(var(--secondary-rgb), 0.1), rgba(var(--accent-rgb), 0.08));
    border: 1px solid rgba(var(--secondary-rgb), 0.2);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.domain-content {
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.dark-mode .domain-content {
    background: rgba(0,0,0,0.3);
}

/* 统计栏通透化 */
.line-status-bar {
    background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(6,182,212,0.04));
    border: 1px solid rgba(16,185,129,0.14);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.dark-mode .line-status-bar {
    background: linear-gradient(135deg, rgba(52,211,153,0.08), rgba(34,211,238,0.05));
    border-color: rgba(52,211,153,0.18);
}

/* 运行天数通透化 */
.uptime-box {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.06), rgba(var(--secondary-rgb), 0.04), rgba(var(--accent-rgb), 0.03));
    border: 1px solid rgba(var(--secondary-rgb), 0.14);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.dark-mode .uptime-box {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.08), rgba(var(--secondary-rgb), 0.05), rgba(var(--accent-rgb), 0.04));
    border-color: rgba(var(--primary-rgb), 0.2);
}

/* 联系方式区域通透化(已在v3.2.1收窄, 此处补充backdrop-filter) */
.notice {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.contact-link {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ---- 2. 品牌区细节精修 ---- */
.header-area {
    margin-bottom: 2.4rem;
}
/* Logo周围增加微妙的光晕呼吸 */
.header-logo::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(var(--secondary-rgb), 0.15) 0%, transparent 70%);
    border-radius: 50%;
    animation: logoGlowPulse 4s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}
@keyframes logoGlowPulse {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}
.header-logo {
    position: relative;
}

/* 副标题呼吸效果 */
.header-subtitle {
    animation: subtitleBreath 5s ease-in-out infinite;
}
@keyframes subtitleBreath {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.9; }
}

/* ---- 3. 线路卡片微交互精修 ---- */
.link-item {
    position: relative;
    overflow: hidden;
}
/* 卡片左上角微妙高光 */
.link-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.12), transparent);
    pointer-events: none;
    border-radius: inherit;
}
.dark-mode .link-item::after {
    background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent);
}
/* 左侧渐变指示条增强 */
.link-item::before {
    box-shadow: 0 0 10px rgba(var(--secondary-rgb), 0.3);
}

/* 复制按钮光泽精修 */
.copy-btn {
    position: relative;
    overflow: hidden;
}
.copy-btn:active {
    transform: translateY(0) scale(0.96);
}

/* ---- 4. 主题切换按钮精修 ---- */
.mode-toggle {
    transition: all 0.4s var(--ease-premium);
}
.mode-toggle:active {
    transform: scale(0.92);
}

/* ---- 5. 深色模式文字对比度精修 ---- */
.dark-mode {
    --text: #f1f5f9;
    --text-light: #e2e8f0;
    --text-muted: rgba(226,232,240,0.6);
}
.dark-mode .url-label {
    color: #f1f5f9;
}
.dark-mode .link-domain-inline {
    color: rgba(226,232,240,0.7);
}
.dark-mode .notice-title {
    color: #e2e8f0;
}
.dark-mode .contact-text strong {
    color: #e2e8f0;
}
.dark-mode .contact-value {
    color: rgba(226,232,240,0.65);
}
.dark-mode .uptime-label {
    color: rgba(226,232,240,0.75);
}
.dark-mode .uptime-unit {
    color: rgba(226,232,240,0.7);
}
.dark-mode .line-status-bar .left-part {
    color: #e2e8f0;
}
.dark-mode .domain-toggle {
    color: #e2e8f0;
}
.dark-mode .domain-content {
    color: #cbd5e1;
}
.dark-mode .ann-field strong {
    color: #a5b4fc;
}
.dark-mode .scroll-announcement .scroll-content span {
    color: #e2e8f0;
}

/* ---- 6. 底部版权精修 ---- */
.footer {
    margin-top: 1.8rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(var(--secondary-rgb), 0.08);
}
.dark-mode .footer {
    border-top-color: rgba(255,255,255,0.06);
}

/* ---- 7. 入场动画交错精修 ---- */
.header-area { animation-delay: 0.05s; }
.link-list { animation-delay: 0.15s; }
.notice { animation-delay: 0.25s; }
.line-status-bar { animation-delay: 0.3s; }
.uptime-box { animation-delay: 0.35s; }
.footer { animation-delay: 0.4s; }

/* ---- 8. 减少动画时关闭新增动画 ---- */
@media (prefers-reduced-motion: reduce) {
    .header-logo::after,
    .header-subtitle,
    .link-item::before {
        animation: none !important;
    }
}

/* ============================================================
   v3.2.3 修复增强层 — 日间文字BUG修复 + 日夜通透统一 + 付费级精修
   ============================================================ */

/* ---- 1. 【紧急BUG修复】日间模式对接信息变白看不到 ----
   根因: v3.2.2将.bookmark-btn背景调透明后, .domain-toggle文字仍为#fff,
   白色文字透过透明背景叠加在浅色页面上导致不可见。
   修复: 日间模式明确设置为深色文字, 夜间模式保持浅色文字。 */
.domain-toggle {
    color: var(--text);
}
.domain-toggle .toggle-label {
    color: var(--text);
    font-weight: 700;
}
.domain-toggle .toggle-arrow {
    color: var(--text-muted);
}
.domain-toggle .toggle-left > i {
    color: var(--primary);
}
/* 夜间模式: 浅色文字 */
.dark-mode .domain-toggle {
    color: #e2e8f0;
}
.dark-mode .domain-toggle .toggle-label {
    color: #e2e8f0;
}
.dark-mode .domain-toggle .toggle-arrow {
    color: rgba(226,232,240,0.7);
}
.dark-mode .domain-toggle .toggle-left > i {
    color: #a5b4fc;
}

/* ---- 2. 【BUG修复】折叠公告按钮背景确保文字可见 ----
   保持通透感的同时, 增加一层微妙的底色确保日间深色文字和夜间浅色文字都清晰 */
.bookmark-btn {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.1), rgba(var(--secondary-rgb), 0.07), rgba(var(--accent-rgb), 0.05));
    border: 1px solid rgba(var(--secondary-rgb), 0.18);
    box-shadow:
        0 4px 16px rgba(var(--primary-rgb), 0.08),
        inset 0 1px 0 rgba(255,255,255,0.4);
}
.bookmark-btn:hover {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.14), rgba(var(--secondary-rgb), 0.1), rgba(var(--accent-rgb), 0.07));
    border-color: rgba(var(--secondary-rgb), 0.3);
    box-shadow:
        0 8px 24px rgba(var(--primary-rgb), 0.14),
        0 0 20px rgba(var(--secondary-rgb), 0.06),
        inset 0 1px 0 rgba(255,255,255,0.5);
}
.dark-mode .bookmark-btn {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.12), rgba(var(--secondary-rgb), 0.08), rgba(var(--accent-rgb), 0.06));
    border: 1px solid rgba(var(--primary-rgb), 0.22);
    box-shadow:
        0 4px 16px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.05);
}
.dark-mode .bookmark-btn:hover {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.16), rgba(var(--secondary-rgb), 0.12), rgba(var(--accent-rgb), 0.08));
    border-color: rgba(var(--primary-rgb), 0.35);
    box-shadow:
        0 8px 24px rgba(0,0,0,0.35),
        0 0 20px rgba(var(--primary-rgb), 0.08),
        inset 0 1px 0 rgba(255,255,255,0.06);
}

/* 折叠展开内容区域: 日夜都保持通透且文字清晰 */
.domain-content {
    background: rgba(255,255,255,0.55);
    color: var(--text);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.dark-mode .domain-content {
    background: rgba(0,0,0,0.35);
    color: #cbd5e1;
}
.domain-content .ann-field strong {
    color: var(--primary);
}
.dark-mode .domain-content .ann-field strong {
    color: #a5b4fc;
}

/* ---- 3. 【日夜统一】所有子卡片日夜通透感对齐 ----
   确保日间和夜间模式下, 线路卡片、公告、统计、运行天数、联系方式
   都保持一致的通透玻璃质感, 不出现日间厚重/夜间也厚重的问题。 */

/* 线路卡片: 日夜通透统一 */
.link-item {
    background: linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0.14));
    border: 1px solid rgba(255,255,255,0.25);
}
.link-item:hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.35), rgba(255,255,255,0.22));
}
.dark-mode .link-item {
    background: linear-gradient(135deg, rgba(30,41,59,0.35), rgba(15,23,42,0.22));
    border: 1px solid rgba(255,255,255,0.07);
}
.dark-mode .link-item:hover {
    background: linear-gradient(135deg, rgba(49,46,129,0.4), rgba(30,27,75,0.28));
}

/* 滚动公告: 日夜通透统一 */
.scroll-announcement {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.07), rgba(var(--accent-rgb), 0.04));
    border: 1px solid rgba(var(--secondary-rgb), 0.14);
}
.dark-mode .scroll-announcement {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.11), rgba(var(--accent-rgb), 0.07));
    border: 1px solid rgba(var(--primary-rgb), 0.2);
}

/* 统计栏: 日夜通透统一 */
.line-status-bar {
    background: linear-gradient(135deg, rgba(16,185,129,0.07), rgba(6,182,212,0.04));
    border: 1px solid rgba(16,185,129,0.16);
}
.dark-mode .line-status-bar {
    background: linear-gradient(135deg, rgba(52,211,153,0.09), rgba(34,211,238,0.05));
    border: 1px solid rgba(52,211,153,0.2);
}

/* 运行天数: 日夜通透统一 */
.uptime-box {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.07), rgba(var(--secondary-rgb), 0.05), rgba(var(--accent-rgb), 0.03));
    border: 1px solid rgba(var(--secondary-rgb), 0.16);
}
.dark-mode .uptime-box {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.09), rgba(var(--secondary-rgb), 0.06), rgba(var(--accent-rgb), 0.04));
    border: 1px solid rgba(var(--primary-rgb), 0.22);
}

/* 联系方式: 日夜通透统一 */
.notice {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.05), rgba(var(--accent-rgb), 0.03));
    border: 1px solid rgba(var(--secondary-rgb), 0.12);
}
.dark-mode .notice {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.07), rgba(var(--accent-rgb), 0.04));
    border: 1px solid rgba(var(--primary-rgb), 0.16);
}
.contact-link {
    background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0.18));
    border: 1px solid rgba(255,255,255,0.25);
}
.contact-link:hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.42), rgba(255,255,255,0.28));
}
.dark-mode .contact-link {
    background: linear-gradient(135deg, rgba(30,41,59,0.35), rgba(15,23,42,0.22));
    border: 1px solid rgba(255,255,255,0.07);
}
.dark-mode .contact-link:hover {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.3), rgba(var(--secondary-rgb), 0.2));
    border-color: rgba(165,180,252,0.35);
}

/* ---- 4. 【云朵过渡】切换夜间模式云朵短暂可见后平滑消失 ----
   已在v3.2.2设置: 0.3s延迟 + 0.8s淡出。
   此处强化: 确保z-index在背景层, 不遮挡内容, 过渡曲线更自然。 */
.cloud-field {
    z-index: 0;
    transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.25s;
}
.dark-mode .cloud-field {
    transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0s;
}
/* 确保云朵在所有内容之下, 主卡片之上是背景层 */
.bg-orbs, .star-field, .particle-canvas, .cloud-field {
    z-index: 0;
}
.wrapper {
    position: relative;
    z-index: 1;
}

/* ---- 5. 【付费级精修】主卡片内部微光层次 ---- */
/* 主卡片内部增加一层微妙的顶部高光, 增强玻璃立体感 */
.main::before {
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.4), rgba(var(--secondary-rgb), 0.3), rgba(var(--accent-rgb), 0.35), transparent);
    filter: blur(0.5px);
}
/* 主卡片内部底部微妙反光 */
.main::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--secondary-rgb), 0.25), rgba(var(--accent-rgb), 0.18), transparent);
    pointer-events: none;
}

/* ---- 6. 【付费级精修】线路卡片内部层次增强 ---- */
.link-item {
    position: relative;
    overflow: hidden;
}
/* 卡片顶部微妙高光带 */
.link-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 45%;
    background: linear-gradient(180deg, rgba(255,255,255,0.14), transparent);
    pointer-events: none;
    border-radius: inherit;
}
.dark-mode .link-item::after {
    background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent);
}
/* 左侧渐变指示条辉光增强 */
.link-item::before {
    box-shadow: 0 0 12px rgba(var(--secondary-rgb), 0.35), 0 0 24px rgba(var(--secondary-rgb), 0.15);
}

/* ---- 7. 【付费级精修】按钮交互反馈增强 ---- */
.copy-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s var(--ease-premium);
}
.copy-btn:active {
    transform: translateY(0) scale(0.95);
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3), inset 0 1px 0 rgba(255,255,255,0.2);
}
.mode-toggle:active {
    transform: scale(0.9);
}
.domain-toggle:active {
    transform: scale(0.99);
}

/* ---- 8. 【付费级精修】品牌区域视觉增强 ---- */
.header-logo img {
    transition: filter 0.4s var(--ease-premium), transform 0.4s var(--ease-premium);
}
.header-logo:hover img {
    transform: scale(1.05);
}
/* Logo光晕呼吸(已在v3.2.2添加, 此处增强) */
.header-logo::after {
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(var(--secondary-rgb), 0.18) 0%, rgba(var(--accent-rgb), 0.08) 40%, transparent 70%);
}

/* ---- 9. 【付费级精修】统计数字等宽对齐 ---- */
.stat-num, .uptime-value, .ms-display {
    font-variant-numeric: tabular-nums;
}

/* ---- 10. 【付费级精修】滚动条美化 ---- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(var(--secondary-rgb), 0.25), rgba(var(--accent-rgb), 0.2));
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(var(--secondary-rgb), 0.4), rgba(var(--accent-rgb), 0.3));
}
.dark-mode ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(var(--primary-rgb), 0.35), rgba(var(--secondary-rgb), 0.25));
}

/* ---- 11. 【日夜统一】文字颜色全局确保 ----
   兜底: 确保日间模式下所有关键区域文字都是深色, 不会出现白色文字在浅色背景上。 */
body:not(.dark-mode) .domain-toggle,
body:not(.dark-mode) .domain-toggle .toggle-label,
body:not(.dark-mode) .scroll-announcement .scroll-content span,
body:not(.dark-mode) .line-status-bar .left-part,
body:not(.dark-mode) .notice-title,
body:not(.dark-mode) .contact-text strong,
body:not(.dark-mode) .uptime-label,
body:not(.dark-mode) .domain-content {
    color: var(--text);
}
body:not(.dark-mode) .contact-value,
body:not(.dark-mode) .link-domain-inline {
    color: var(--text-muted);
}

/* ---- 12. 减少动画偏好覆盖新增动画 ---- */
@media (prefers-reduced-motion: reduce) {
    .cloud-field,
    .header-logo::after,
    .link-item::before,
    .main::before {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================
   v3.2.4 修复增强层 — 标题字体呼吸灯 + 夜间通透 + 整圈流光跑马灯
   ============================================================ */

/* ---- 1. 【去掉logo光晕】用户要求去掉logo和文字下面的光晕 ----
   v3.2.2/v3.2.3添加的.header-logo::after光晕被用户反馈不需要,
   呼吸灯应该在标题字体内部, 而不是logo周围。 */
.header-logo::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    animation: none !important;
}
/* 同时去掉品牌区背后的光晕(.header-area::before), 让背景更干净 */
.header-area::before {
    display: none !important;
}

/* ---- 2. 【标题字体呼吸灯增强】呼吸灯在字体内部, 效果更明显 ----
   根因: 之前titleBreath的opacity变化太微妙(0.88→1→0.95), 用户感觉不到。
   修复: 加大opacity变化范围(0.72→1→0.85→1→0.72), 同时增加发光强度呼吸,
   让渐变在文字内部明显流动, 形成真正的"呼吸灯"效果。 */
.site-title {
    font-size: 2.8rem;
    font-weight: 900;
    letter-spacing: 6px;
    /* 三色渐变, 颜色更鲜明, 流动时更明显 */
    background: linear-gradient(90deg,
        var(--primary) 0%,
        var(--secondary) 20%,
        var(--secondary) 40%,
        var(--accent) 60%,
        var(--secondary) 80%,
        var(--primary) 100%);
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.8rem;
    /* 呼吸灯动画: 4秒周期, 渐变流动+opacity呼吸+发光呼吸 */
    animation: titleBreathStrong 4s ease-in-out infinite;
    text-shadow: none;
    filter: drop-shadow(0 4px 16px rgba(var(--secondary-rgb), 0.25));
    will-change: background-position, opacity, filter;
}
/* 强化版标题呼吸灯:
   - 渐变位置从0%→100%→0%完整流动, 在文字内部明显可见
   - opacity从0.72→1→0.85→1→0.72, 呼吸感明显
   - 发光强度(drop-shadow)同步呼吸, 形成"呼吸灯"光晕在文字边缘 */
@keyframes titleBreathStrong {
    0% {
        background-position: 0% center;
        opacity: 0.72;
        filter: drop-shadow(0 2px 8px rgba(var(--secondary-rgb), 0.15));
    }
    25% {
        background-position: 50% center;
        opacity: 1;
        filter: drop-shadow(0 6px 24px rgba(var(--secondary-rgb), 0.4));
    }
    50% {
        background-position: 100% center;
        opacity: 0.85;
        filter: drop-shadow(0 4px 16px rgba(var(--accent-rgb), 0.3));
    }
    75% {
        background-position: 50% center;
        opacity: 1;
        filter: drop-shadow(0 6px 24px rgba(var(--secondary-rgb), 0.4));
    }
    100% {
        background-position: 0% center;
        opacity: 0.72;
        filter: drop-shadow(0 2px 8px rgba(var(--secondary-rgb), 0.15));
    }
}
/* 深色模式标题呼吸灯: 颜色更亮, 发光更强 */
.dark-mode .site-title {
    background: linear-gradient(90deg,
        var(--primary) 0%,
        var(--secondary) 20%,
        #e879f9 40%,
        var(--accent) 60%,
        var(--secondary) 80%,
        var(--primary) 100%);
    background-size: 300% auto;
    filter: drop-shadow(0 4px 20px rgba(var(--primary-rgb), 0.35));
}
@keyframes titleBreathStrongDark {
    0% {
        background-position: 0% center;
        opacity: 0.75;
        filter: drop-shadow(0 2px 10px rgba(var(--primary-rgb), 0.2));
    }
    25% {
        background-position: 50% center;
        opacity: 1;
        filter: drop-shadow(0 8px 32px rgba(var(--primary-rgb), 0.5));
    }
    50% {
        background-position: 100% center;
        opacity: 0.88;
        filter: drop-shadow(0 6px 24px rgba(var(--accent-rgb), 0.4));
    }
    75% {
        background-position: 50% center;
        opacity: 1;
        filter: drop-shadow(0 8px 32px rgba(var(--primary-rgb), 0.5));
    }
    100% {
        background-position: 0% center;
        opacity: 0.75;
        filter: drop-shadow(0 2px 10px rgba(var(--primary-rgb), 0.2));
    }
}
.dark-mode .site-title {
    animation: titleBreathStrongDark 4s ease-in-out infinite;
}

/* ---- 3. 【夜间模式品牌区更透明】能看到下面的星空 ----
   用户反馈夜间模式logo下面背景不够透明, 看不到星空。
   修复: 降低夜间模式下主卡片和品牌区的背景不透明度,
   同时确保backdrop-filter不会完全模糊掉星空。 */
.dark-mode .main {
    background: linear-gradient(135deg, rgba(15,23,42,0.18), rgba(30,27,75,0.1));
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.05);
}
.dark-mode .main:hover {
    background: linear-gradient(135deg, rgba(15,23,42,0.22), rgba(30,27,75,0.13));
}
/* 夜间模式品牌区完全透明, 让星空直接透过来 */
.dark-mode .header-area {
    background: transparent;
}
/* 夜间模式线路卡片更透明 */
.dark-mode .link-item {
    background: linear-gradient(135deg, rgba(30,41,59,0.25), rgba(15,23,42,0.15));
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.dark-mode .link-item:hover {
    background: linear-gradient(135deg, rgba(49,46,129,0.3), rgba(30,27,75,0.2));
}
/* 夜间模式其他子卡片也更透明 */
.dark-mode .scroll-announcement,
.dark-mode .line-status-bar,
.dark-mode .uptime-box,
.dark-mode .notice,
.dark-mode .bookmark-btn {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ---- 4. 【整圈流光跑马灯边框】主卡片整圈流动光效 ----
   用户要求: 跑马灯不要只在顶部一条, 要整圈都有流动光效。
   实现: 用.main::before作为整圈边框层, conic-gradient旋转动画,
   mask技巧只显示1.5px宽度的边框, 形成整圈流动的跑马灯效果。
   替换掉之前只有顶部的流光边框。 */
.main {
    position: relative;
    overflow: hidden;
}
/* 整圈流光跑马灯边框层 */
.main::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    /* 锥形渐变: 透明→亮色→透明, 旋转时形成流动光点 */
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 60deg,
        rgba(var(--primary-rgb), 0.7) 90deg,
        rgba(var(--secondary-rgb), 0.9) 120deg,
        rgba(var(--accent-rgb), 0.7) 150deg,
        transparent 180deg,
        transparent 360deg
    );
    /* mask技巧: 只显示padding区域(边框), 内容区域透明 */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    /* 旋转动画: 4秒一圈, 线性匀速, 形成跑马灯效果 */
    animation: borderRun 4s linear infinite;
    pointer-events: none;
    z-index: 1;
    filter: drop-shadow(0 0 6px rgba(var(--secondary-rgb), 0.4));
}
/* 跑马灯旋转动画 */
@keyframes borderRun {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* 深色模式跑马灯: 颜色更亮, 发光更强 */
.dark-mode .main::before {
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 60deg,
        rgba(var(--primary-rgb), 0.8) 90deg,
        rgba(var(--secondary-rgb), 1) 120deg,
        rgba(var(--accent-rgb), 0.8) 150deg,
        transparent 180deg,
        transparent 360deg
    );
    filter: drop-shadow(0 0 8px rgba(var(--primary-rgb), 0.5));
}
/* 主卡片内容层: 确保内容在跑马灯边框之上 */
.main > * {
    position: relative;
    z-index: 2;
}
/* 主卡片底部微光(保留之前的::after) */
.main::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--secondary-rgb), 0.25), rgba(var(--accent-rgb), 0.18), transparent);
    pointer-events: none;
    z-index: 1;
}

/* ---- 5. 【响应式适配】手机端标题和跑马灯优化 ---- */
@media (max-width: 768px) {
    .site-title {
        font-size: 2rem;
        letter-spacing: 4px;
    }
    .main::before {
        padding: 1px;
        animation-duration: 5s;
    }
}
@media (max-width: 480px) {
    .site-title {
        font-size: 1.7rem;
        letter-spacing: 3px;
    }
}

/* ---- 6. 减少动画偏好: 关闭跑马灯和呼吸灯 ---- */
@media (prefers-reduced-motion: reduce) {
    .main::before {
        animation: none !important;
    }
    .site-title {
        animation: none !important;
        opacity: 1 !important;
    }
}

/* ============================================================
   v3.2.5 修复增强层 — 夜间文字BUG修复 + 呼吸灯放慢 + 边框渐变呼吸 + 主题融合
   ============================================================ */

/* ---- 1. 【严重BUG修复】夜间模式标题文字消失 ----
   根因: v3.2.4中@keyframes titleBreathStrong设置了filter: drop-shadow,
   与-webkit-background-clip:text冲突, 导致夜间模式下文字渲染异常只显示色块。
   修复: 彻底去掉所有filter, 只用background-position和opacity做呼吸效果;
   确保日间和夜间模式下-webkit-background-clip:text和-webkit-text-fill-color:transparent都正确设置。 */

/* 日间模式标题呼吸灯: 用CSS变量融合主题色, 7秒周期, 柔和呼吸不闪 */
.site-title {
    font-size: 2.8rem;
    font-weight: 900;
    letter-spacing: 6px;
    /* 用全局主题CSS变量, 切换主题时自动跟随, 保持沉浸感 */
    background: linear-gradient(90deg,
        var(--primary) 0%,
        var(--secondary) 35%,
        var(--accent) 50%,
        var(--secondary) 65%,
        var(--primary) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.8rem;
    /* 7秒周期, 渐变缓慢流动 + opacity柔和呼吸(0.88→1→0.92→1→0.88), 不闪 */
    animation: titleBreathV325 7s ease-in-out infinite;
    text-shadow: none;
    filter: none;
    will-change: background-position, opacity;
}
/* 标题呼吸灯动画: 7秒周期, 缓慢不闪, 颜色完全跟随主题CSS变量 */
@keyframes titleBreathV325 {
    0% {
        background-position: 0% center;
        opacity: 0.88;
    }
    25% {
        background-position: 50% center;
        opacity: 1;
    }
    50% {
        background-position: 100% center;
        opacity: 0.92;
    }
    75% {
        background-position: 50% center;
        opacity: 1;
    }
    100% {
        background-position: 0% center;
        opacity: 0.88;
    }
}

/* 夜间模式标题: 用浅色主题变量, 确保文字可见, 去掉所有filter */
.dark-mode .site-title {
    background: linear-gradient(90deg,
        var(--primary) 0%,
        var(--secondary) 35%,
        var(--accent) 50%,
        var(--secondary) 65%,
        var(--primary) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: titleBreathV325 7s ease-in-out infinite;
    filter: none;
    text-shadow: none;
}

/* ---- 2. 【删除原地转圈跑马灯】改成边框渐变慢变色呼吸 ----
   用户反馈: v3.2.4的conic-gradient旋转是原地转圈, 不是沿边框移动;
   用户想要: 呼吸灯那种慢慢变色的效果, 不是快的。
   修复: 去掉conic-gradient旋转, 改成线性渐变+mask边框,
   渐变位置缓慢移动+opacity柔和呼吸, 8秒周期, 颜色跟随主题CSS变量。 */

/* 先彻底清除v3.2.4的旋转跑马灯样式 */
.main::before {
    animation: none;
    transform: none;
    background: none;
    -webkit-mask: none;
    mask: none;
    padding: 0;
    filter: none;
    border-radius: 0;
}

/* 新增: 边框渐变呼吸灯 - 慢慢变色, 不旋转, 颜色跟随主题 */
.main::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    /* 用全局主题CSS变量, 切换主题时边框灯颜色自动跟随 */
    background: linear-gradient(135deg,
        var(--primary) 0%,
        var(--secondary) 30%,
        var(--accent) 50%,
        var(--secondary) 70%,
        var(--primary) 100%);
    background-size: 300% 300%;
    /* mask技巧: 只显示padding区域(1.5px边框), 内容区域透明 */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    /* 8秒周期, 渐变位置缓慢移动+opacity柔和呼吸, 慢慢变色不闪 */
    animation: borderBreathV325 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
/* 边框呼吸灯动画: 8秒周期, 渐变缓慢移动, opacity柔和呼吸
   颜色完全跟随var(--primary/secondary/accent), 主题切换自动变化 */
@keyframes borderBreathV325 {
    0% {
        background-position: 0% 50%;
        opacity: 0.35;
    }
    25% {
        background-position: 50% 50%;
        opacity: 0.6;
    }
    50% {
        background-position: 100% 50%;
        opacity: 0.45;
    }
    75% {
        background-position: 50% 50%;
        opacity: 0.6;
    }
    100% {
        background-position: 0% 50%;
        opacity: 0.35;
    }
}
/* 夜间模式边框呼吸灯: 颜色更亮, opacity稍高 */
.dark-mode .main::before {
    background: linear-gradient(135deg,
        var(--primary) 0%,
        var(--secondary) 30%,
        var(--accent) 50%,
        var(--secondary) 70%,
        var(--primary) 100%);
    background-size: 300% 300%;
}

/* 主卡片内容层: 确保内容在边框灯之上 */
.main > * {
    position: relative;
    z-index: 2;
}

/* ---- 3. 【夜间模式背景更透明】能看到星空 ----
   用户反馈: 夜间模式背景不够透明, 看不到星空。
   修复: 主卡片背景降到0.1/0.05, blur降到14px;
   子卡片背景也相应降低, 减少模糊度让星空更清晰。 */

.dark-mode .main {
    background: linear-gradient(135deg, rgba(15,23,42,0.1), rgba(30,27,75,0.05));
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.035);
}
.dark-mode .main:hover {
    background: linear-gradient(135deg, rgba(15,23,42,0.13), rgba(30,27,75,0.07));
}

/* 夜间模式线路卡片更透明 */
.dark-mode .link-item {
    background: linear-gradient(135deg, rgba(30,41,59,0.15), rgba(15,23,42,0.08));
    backdrop-filter: blur(8px) saturate(130%);
    -webkit-backdrop-filter: blur(8px) saturate(130%);
    border: 1px solid rgba(255,255,255,0.05);
}
.dark-mode .link-item:hover {
    background: linear-gradient(135deg, rgba(49,46,129,0.2), rgba(30,27,75,0.12));
}

/* 夜间模式其他子卡片更透明 */
.dark-mode .scroll-announcement,
.dark-mode .line-status-bar,
.dark-mode .uptime-box,
.dark-mode .notice,
.dark-mode .bookmark-btn,
.dark-mode .domain-content {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* 夜间模式星空更亮 */
.dark-mode .star-field {
    opacity: 1;
}
.dark-mode .star {
    box-shadow: 0 0 8px rgba(255,255,255,0.9), 0 0 16px rgba(var(--primary-rgb), 0.4);
}

/* ---- 4. 【主题色深度融合】所有灯的颜色跟随全局主题 ----
   用户要求: 不管什么灯, 颜色都要和全局主题结合, 有沉浸感,
   不能单独一个灯是一个颜色, 主题是另一个颜色。
   实现: 呼吸灯和边框灯都用var(--primary)、var(--secondary)、var(--accent),
   副标题也用主题色渐变, 确保所有视觉元素颜色统一。 */

/* 副标题用主题色渐变呼吸 */
.header-subtitle {
    background: linear-gradient(90deg,
        var(--text-muted) 0%,
        var(--primary) 50%,
        var(--text-muted) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: subtitleBreathV325 9s ease-in-out infinite;
    filter: none;
}
@keyframes subtitleBreathV325 {
    0%, 100% { background-position: 0% center; opacity: 0.75; }
    50% { background-position: 100% center; opacity: 0.95; }
}
.dark-mode .header-subtitle {
    background: linear-gradient(90deg,
        rgba(255,255,255,0.5) 0%,
        #a5b4fc 50%,
        rgba(255,255,255,0.5) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 复制按钮用主题渐变 */
.copy-btn {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
}

/* 延迟徽章用主题色 */
.ms-green { background: linear-gradient(135deg, var(--success), #059669); }
.ms-yellow { background: linear-gradient(135deg, #f59e0b, #d97706); }
.ms-red, .ms-error { background: linear-gradient(135deg, var(--danger), #dc2626); }

/* ---- 5. 【响应式适配】手机端优化 ---- */
@media (max-width: 768px) {
    .site-title {
        font-size: 2rem;
        letter-spacing: 4px;
    }
    .main::before {
        padding: 1px;
    }
}
@media (max-width: 480px) {
    .site-title {
        font-size: 1.7rem;
        letter-spacing: 3px;
    }
}

/* ---- 6. 减少动画偏好: 关闭所有灯动画 ---- */
@media (prefers-reduced-motion: reduce) {
    .site-title,
    .main::before,
    .header-subtitle {
        animation: none !important;
        opacity: 1 !important;
    }
}