:root {
    --glass-bg: rgba(22, 22, 26, 0.75);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-hover: rgba(255, 255, 255, 0.18);
    --accent-color: #3b82f6;
    --text-main: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.55);
    --radius-lg: 18px;
    --radius-sm: 10px;
    --ease-out: cubic-bezier(0.25, 0.8, 0.25, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
    font-family: 'Noto Sans SC', sans-serif;
    background-image: url('download.webp'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    padding: 20px;
}

/* 遮罩 */
.wallpaper-dimmer {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    z-index: -1;
}

.main-wrapper {
    width: 100%;
    max-width: 440px;
    animation: fadeIn 0.8s var(--ease-out);
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

/* 头部 */
.dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding: 0 5px;}
.brand-area { display: flex; align-items: center; gap: 8px; cursor: pointer; }

/* --- V10 新 Logo 样式：纯图形，无背景 --- */
.brand-logo {
    width: 42px; /* 尺寸适中，不突兀 */
    height: 42px;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.5s var(--ease-out);
    /* 默认带有轻微的蓝色辉光 */
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.4));
}
.brand-logo svg { width: 100%; height: 100%; }

/* Logo 动效：悬停时轻微旋转并增强发光 */
.brand-area:hover .brand-logo {
    transform: rotate(15deg) scale(1.1);
    filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.8));
}

.brand-text h1 { font-size: 19px; font-weight: 700; letter-spacing: 0.5px; line-height: 1.2; }
.brand-text .ver { font-size: 10px; background: rgba(255,255,255,0.2); padding: 2px 6px; border-radius: 4px; vertical-align: middle; transition: 0.3s; }
.brand-area:hover .ver { background: var(--accent-color); color: white; }
.brand-text p { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* 状态监测 */
.status-panel { 
    display: flex; align-items: center; gap: 10px; padding: 8px 14px; 
    background: rgba(0,0,0,0.5); border-radius: var(--radius-sm); border: 1px solid var(--glass-border); 
}
.status-indicator { width: 8px; height: 8px; border-radius: 50%; background: #fbbf24; transition: 0.3s; }
.pulse { animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.7); } 70% { box-shadow: 0 0 0 6px rgba(251, 191, 36, 0); } 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); } }
.status-info { display: flex; flex-direction: column; }
.status-label { font-size: 10px; font-weight: 700; }
.status-detail { font-size: 9px; color: var(--text-muted); }

/* 网格布局 */
.bento-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* 卡片通用 */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    text-decoration: none; color: #fff;
    overflow: hidden; position: relative;
    transform: translateY(0);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.4s var(--ease-out);
}
.glass-panel::after {
    content: ""; position: absolute; top: 0; left: -150%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: skewX(-20deg); pointer-events: none;
}
.glass-panel:hover::after { left: 150%; transition: left 0.6s ease-in-out; }
.glass-panel:hover {
    transform: translateY(-6px) scale(1.02);
    background: var(--glass-hover);
    border-color: rgba(255,255,255,0.25);
    box-shadow: 0 15px 35px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.1) inset;
}
.glass-panel:active { transform: scale(0.96); background: rgba(255,255,255,0.05); transition: 0.1s; }

/* 官网卡片 */
.main-card { grid-column: span 2; display: flex; align-items: center; padding: 22px; background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.01)); }
.icon-circle { 
    width: 48px; height: 48px; background: var(--accent-color); 
    border-radius: 50%; display: flex; align-items: center; justify-content: center; 
    margin-right: 18px; box-shadow: 0 4px 15px rgba(59,130,246,0.3);
    transition: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.glass-panel:hover .icon-circle { transform: scale(1.1) rotate(10deg); box-shadow: 0 0 20px rgba(59,130,246,0.6); }
.icon-circle svg { width: 24px; transition: 0.3s; }
.text-group h2 { font-size: 18px; font-weight: 700; margin-bottom: 2px; }
.meta-tag { font-size: 11px; color: var(--text-muted); transition: 0.3s; }
.glass-panel:hover .meta-tag { color: #fff; }

/* 备用 & 工具 */
.sub-card { padding: 16px; height: 100px; display: flex; flex-direction: column; justify-content: space-between; }
.sub-header { display: flex; justify-content: space-between; align-items: flex-start; }
.badge { font-size: 9px; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,0.1); color: var(--text-muted); transition: 0.3s; }
.glass-panel:hover .badge { background: #fff; color: #000; }
.latency-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); transition: 0.3s; }
.sub-card h3 { font-size: 13px; font-weight: 500; }
.latency-text { font-size: 10px; color: var(--text-muted); }

.tools-card { grid-column: span 1; display: flex; align-items: center; justify-content: space-evenly; }
.tool-item { flex: 1; text-align: center; font-size: 11px; padding: 15px 0; color: var(--text-muted); transition: 0.3s; position: relative; top: 0;}
.tool-item svg { width: 20px; margin: 0 auto 6px; display: block; transition: 0.3s; }
.tool-item:hover { color: #fff; top: -3px; text-shadow: 0 0 10px rgba(255,255,255,0.5); }
.tool-item:hover svg { transform: scale(1.2); }
.divider { width: 1px; height: 30px; background: rgba(255,255,255,0.1); }

/* TG 群卡片 */
.tg-card {
    grid-column: span 2; 
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px;
    background: linear-gradient(90deg, #0088cc 0%, #0077b3 100%);
    box-shadow: 0 10px 25px rgba(0, 136, 204, 0.3);
}
.tg-card:hover { 
    background: linear-gradient(90deg, #0099e6 0%, #0088cc 100%); 
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 15px 40px rgba(0, 153, 230, 0.4);
}
.tg-content { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; }
.tg-icon { width: 22px; height: 22px; transition: 0.3s; }
.tg-card:hover .tg-icon { transform: rotate(-10deg) scale(1.2); }
.arrow { opacity: 0.6; font-size: 18px; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.tg-card:hover .arrow { transform: translateX(8px); opacity: 1; }

/* 底部胶囊 */
.footer-container { display: flex; justify-content: center; margin-top: 35px; }
.glass-pill {
    display: flex; align-items: center; gap: 8px;
    background: rgba(0,0,0,0.3); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.05);
    padding: 8px 20px; border-radius: 50px;
    font-size: 11px; box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: 0.3s; cursor: default;
}
.glass-pill:hover { background: rgba(0,0,0,0.5); transform: translateY(-2px); border-color: rgba(255,255,255,0.2); }
.pill-label { color: var(--text-muted); }
.pill-value { color: #fff; font-weight: 700; letter-spacing: 0.5px; }
.pill-tip { color: #f8922d; font-size: 10px; border: 1px solid rgba(248, 146, 45, 0.3); padding: 1px 6px; border-radius: 4px; }

/* 高亮 */
.best-choice { 
    border: 1px solid #4ade80 !important; 
    background: rgba(74, 222, 128, 0.12) !important; 
    box-shadow: 0 0 30px rgba(74, 222, 128, 0.2) !important;
}

/* 移动端 */
@media (max-width: 480px) {
    body { padding: 15px; }
    .main-wrapper { margin-top: 10px; }
    .bento-grid { gap: 10px; }
    .sub-card { height: 90px; }
    .glass-panel:hover { transform: none; }
    .glass-panel:active { transform: scale(0.96); }
}