* { 
    margin:0; padding:0; box-sizing:border-box; 
    user-select:none; -webkit-tap-highlight-color:transparent;
}
body {
    font-family:'Inter','Segoe UI',system-ui,sans-serif;
    background:#0a0c14; /* 基础底色 */
    color:#c9d1d9;min-height:100vh;
    overflow-x:hidden;
    -webkit-font-smoothing: antialiased;
}
/* 将渐变背景移出 body 以优化滚动性能 */
body::before {
    content: "";
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at 50% 50%,#1a1f35 0%,#0f1117 60%,#0a0c14 100%);
    z-index: -1;
    transform: translateZ(0);
}

.stars { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; transform: translateZ(0); }
.star { 
    position:absolute; background:#fff; border-radius:50%; 
    animation:twinkle var(--duration) ease-in-out infinite; 
    animation-delay:var(--delay); opacity:0; 
    will-change: opacity;
}
@keyframes twinkle { 0%,100% { opacity:.1; transform:scale(1) } 50% { opacity:.8; transform:scale(1.2) } }

.navbar {
    background:rgba(15,20,35,0.8); /* 降低透明度计算压力 */
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(255,255,255,0.06);
    padding:16px 28px;
    display:flex; justify-content:space-between; align-items:center;
    position:fixed; top:0; left:0; right:0; z-index:1000;
    transform: translateZ(0);
}
.navbar .logo {
    display:flex; align-items:center; gap:10px;
    text-decoration:none; white-space:nowrap;
}
.navbar .logo img {
    height:32px; width:auto; border-radius:8px; flex-shrink:0;
}
.navbar .logo span {
    font-size:1.2rem; font-weight:700;
    background:linear-gradient(135deg,#58a6ff,#bc8cff,#ff7b72);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:shimmer 3s ease infinite; background-size:300% 300%;
}
@keyframes shimmer { 0%,100% { background-position:0% 50% } 50% { background-position:100% 50% } }

.navbar .right { display:flex; gap:12px; align-items:center; position:relative; }
.nav-link {
    color:#8b949e; text-decoration:none; font-size:.85rem; font-weight:500;
    padding:8px 18px; border-radius:999px; transition:all .3s;
    border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02);
    cursor:pointer;
}
.nav-link:hover {
    color:#58a6ff; border-color:rgba(88,166,255,.3);
    background:rgba(88,166,255,.08); transform:translateY(-1px);
    box-shadow:0 4px 20px rgba(88,166,255,.1);
}

.user-menu {
    position:absolute; top:calc(100% + 10px); right:0;
    background:rgba(20,25,40,0.95); backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,0.1); border-radius:16px;
    padding:12px; min-width:160px; display:none; flex-direction:column; gap:8px;
    box-shadow:0 10px 30px rgba(0,0,0,0.5); z-index:1100;
}
.user-menu.show { display:flex; }
.user-info { padding:8px 12px; border-bottom:1px solid rgba(255,255,255,0.05); margin-bottom:4px; font-size:0.85rem; color:#8b949e; }
.user-menu-item {
    padding:10px 16px; border-radius:10px; text-decoration:none; color:#c9d1d9;
    font-size:0.85rem; transition:all 0.3s;
}
.user-menu-item:hover { background:rgba(255,255,255,0.05); color:#58a6ff; }

.toggleBtn {
    position:fixed; z-index:1100;
    width:100px; height:100px; /* 适当减小容器，更精准地对齐 logo */
    cursor:pointer; display:none; 
    align-items:flex-start; justify-content:center;
    top:64px; left:28px; /* 调整位置，使其贴着导航栏分割线 */
    transform: translateZ(0);
    transition: all 0.3s ease;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.rabbit-toggle-icon, .hand-icon {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: top center;
    pointer-events: auto; /* 确保图片本身可点击 */
    animation: rabbit-breath 3s ease-in-out infinite;
}
.hand-icon { display: none !important; }
@keyframes rabbit-breath {
    0%, 100% { 
        filter: drop-shadow(0 0 5px rgba(255,255,255,0.2));
        transform: scale(1);
    }
    50% { 
        filter: drop-shadow(0 0 15px rgba(255,255,255,0.5));
        transform: scale(1.02);
    }
}
.toggleBtn.active .rabbit-toggle-icon { display: none !important; }
.toggleBtn.active .hand-icon { 
    display: block !important; 
    width: 80px !important; 
    height: 80px !important;
    position: absolute;
    top: -10px;
    left: 10px;
}

.toggleBtn.active {
    display: block !important;
    width:280px !important; height:auto !important; 
    max-height:80vh !important;
    border-radius:24px !important; padding:24px !important;
    background:rgba(15,18,30,0.98) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    backdrop-filter: none !important;
    top: 64px !important; /* 保持与分割线贴合 */
}
/* 隐藏菜单滚动条 */
.toggleBtn.active::-webkit-scrollbar {
    display: none !important;
}
.toggleBtn.active {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
}
.sidebar-content {
    opacity:0; visibility:hidden; width:100%;
    transition: opacity 0.2s ease;
    padding-top: 10px; /* 解决 PROJECTS 标题太靠上的问题 */
}
.toggleBtn.active .sidebar-content {
    opacity:1; visibility:visible;
    padding-top: 60px; /* 为 hand.png 留出空间 */
}

.container { display:flex; max-width:1400px; margin:80px auto 20px; gap:24px; padding:0 24px; position:relative; z-index:1; }

.sidebar {
    width:340px !important; background:rgba(255,255,255,0.02);
    backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.06);
    border-radius:24px; padding:24px;
    height:fit-content; position:sticky; top:80px;
    transition:none; /* 电脑端不需要过渡动画 */
}
.side-section { margin-bottom:24px; width:100%; }
.side-title { font-size:0.75rem; color:#8b949e; margin-bottom:12px; letter-spacing:1px; font-weight:600; text-align:left; }
.side-link {
    display:flex; align-items:center; gap:16px;
    padding:16px 20px; color:#c9d1d9; text-decoration:none;
    border-radius:14px; transition:all 0.3s; cursor:pointer;
    margin-bottom:8px; border:1px solid transparent;
    text-align:left; width:100%;
}
aside.sidebar .side-link img { width:60px !important; height:60px !important; object-fit:contain !important; flex-shrink:0 !important; transition: all 0.3s ease !important; }
.toggleBtn.active .side-link img { width:40px !important; height:40px !important; }
.side-link span { flex:1; font-size: 1.2rem; }
.toggleBtn.active .side-link span { font-size: 0.95rem; }
.side-link:hover {
    background:rgba(255,255,255,0.05); color:#58a6ff;
    transform:translateX(4px); border-color:rgba(88,166,255,0.1);
}

.main {
    flex:1; background:rgba(255,255,255,0.02);
    backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.06);
    border-radius:24px; padding:32px; min-height:calc(100vh - 120px);
}
.welcome {
    padding:40px 20px; text-align:center; color:#c9d1d9;
    line-height:1.8; font-size:1.1rem;
}
.welcome b {
    background:linear-gradient(135deg,#58a6ff,#bc8cff);
    -webkit-background-clip:text; background-clip:text; color:transparent;
}

.item {
    margin-bottom:12px; transition:all 0.3s;
}
.item-title {
    display:block; padding:16px 20px;
    background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06);
    border-radius:16px; color:#c9d1d9; text-decoration:none;
    transition:all 0.3s; font-weight:500;
}
.item-title:hover {
    background:rgba(88,166,255,0.08); border-color:rgba(88,166,255,0.3);
    color:#58a6ff; transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(0,0,0,0.2);
}

.footer { text-align:center; padding:32px; color:#8b949e; font-size:0.8rem; opacity:0.6; }

@media (max-width:992px) {
    .sidebar { display:none !important; }
    .toggleBtn { display:flex !important; }
    .toggleBtn.active span.hamburger-icon { display:none; }
    .container { margin-top:100px; }
    /* 移动端全面禁用滤镜以换取极致性能 */
    * {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* 电脑端强制隐藏三道杠按钮 */
@media (min-width:993px) {
    .toggleBtn { display:none !important; }
    .sidebar { display:block !important; }
}