:root {
    --primary-color: #6BB3D9;
    --primary-dark: #3498DB;
    --primary-light: #AED6F1;
    --secondary-color: #85C1E9;
    --accent-color: #5DADE2;
    --bg-color: #E8F4FC;
    --bg-gradient: linear-gradient(135deg, #E8F4FC 0%, #F0F8FF 100%);
    --surface-color: #FFFFFF;
    --text-color: #2C3E50;
    --text-muted: #7F8C8D;
    --text-light: #95A5A6;
    --border-color: #D6EAF8;
    --hover-bg: #F4F9FC;
    --shadow-sm: 0 2px 8px rgba(107, 179, 217, 0.1);
    --shadow-md: 0 4px 16px rgba(107, 179, 217, 0.15);
    --shadow-lg: 0 8px 24px rgba(107, 179, 217, 0.2);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: "Microsoft YaHei", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;
    background: var(--bg-gradient);
    background-attachment: fixed;
    color: var(--text-color);
    line-height: 1.6;
    font-size: 16px;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

body::before,
body::after,
body .cloud-bg-1,
body .cloud-bg-2,
body .cloud-bg-3,
body .cloud-bg-4 {
    content: '';
    position: fixed;
    z-index: -100;
    animation: cloudFloat 20s ease-in-out infinite;
    pointer-events: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

body::before {
    width: 220px;
    height: 100px;
    top: 8%;
    left: -5%;
    animation-delay: 0s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 100' fill='none'%3E%3Cpath d='M30 60 C20 60 15 50 20 40 C25 30 40 25 55 30 C60 25 75 20 90 30 C100 25 115 20 130 30 C140 25 155 25 170 35 C185 25 200 30 200 45 C200 55 195 65 185 70 C180 75 170 80 155 75 C150 85 140 90 125 85 C120 92 110 95 95 90 C90 97 80 98 65 92 C50 98 35 95 30 85 C20 95 10 85 15 70 C10 65 15 55 25 55 C20 58 15 65 25 65 C28 62 30 60 30 60 Z' stroke='%236BB3D9' stroke-width='1.5' stroke-opacity='0.3'/%3E%3C/svg%3E");
}

body::after {
    width: 280px;
    height: 120px;
    top: 25%;
    right: -8%;
    animation-delay: -5s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 120' fill='none'%3E%3Cpath d='M40 70 C30 70 25 55 35 45 C45 35 65 30 85 40 C95 30 120 25 145 40 C170 25 195 30 215 45 C235 35 255 40 260 55 C265 70 255 80 240 85 C225 95 205 95 185 85 C175 100 155 105 135 95 C120 110 95 105 75 95 C55 110 35 105 35 85 C25 100 15 85 25 70 C20 65 25 55 40 55 C35 60 35 68 40 70 Z' stroke='%236BB3D9' stroke-width='1.5' stroke-opacity='0.25'/%3E%3C/svg%3E");
}

body .cloud-bg-1 {
    width: 160px;
    height: 75px;
    top: 48%;
    left: 5%;
    animation-delay: -10s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 75' fill='none'%3E%3Cpath d='M25 45 C15 45 10 35 18 28 C26 21 42 18 58 25 C65 18 78 15 92 25 C105 18 120 20 130 32 C140 22 150 28 150 40 C150 50 145 58 135 60 C125 65 110 65 95 58 C88 70 72 72 58 65 C50 72 38 70 30 62 C20 70 12 62 18 50 C12 45 18 42 25 45 Z' stroke='%236BB3D9' stroke-width='1.5' stroke-opacity='0.35'/%3E%3C/svg%3E");
}

body .cloud-bg-2 {
    width: 200px;
    height: 90px;
    top: 65%;
    right: 3%;
    animation-delay: -15s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 90' fill='none'%3E%3Cpath d='M30 55 C20 55 15 42 25 33 C35 24 55 20 75 30 C85 22 105 18 125 30 C145 20 165 25 175 38 C185 28 195 35 195 50 C195 60 190 68 180 70 C170 75 155 75 140 68 C132 82 115 85 98 78 C88 88 70 85 55 78 C40 88 28 82 28 65 C18 78 8 65 15 52 C10 48 18 45 30 48 C25 52 28 55 30 55 Z' stroke='%236BB3D9' stroke-width='1.5' stroke-opacity='0.28'/%3E%3C/svg%3E");
}

body .cloud-bg-3 {
    width: 140px;
    height: 65px;
    top: 82%;
    left: 35%;
    animation-delay: -7s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 65' fill='none'%3E%3Cpath d='M22 40 C14 40 10 30 16 23 C22 16 36 14 50 20 C58 14 72 12 85 20 C98 14 112 16 120 26 C128 18 135 23 135 35 C135 43 130 50 120 52 C110 56 96 56 82 50 C75 60 60 62 47 56 C38 62 28 60 25 50 C16 58 8 48 12 38 C8 35 14 32 22 35 C18 38 20 40 22 40 Z' stroke='%236BB3D9' stroke-width='1.5' stroke-opacity='0.38'/%3E%3C/svg%3E");
}

body .cloud-bg-4 {
    width: 240px;
    height: 105px;
    top: 3%;
    left: 45%;
    animation-delay: -3s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 105' fill='none'%3E%3Cpath d='M35 62 C25 62 20 48 30 38 C40 28 62 24 82 35 C92 26 115 22 138 35 C160 24 185 28 200 42 C215 32 230 38 230 55 C230 68 222 78 210 80 C195 85 178 85 162 78 C152 92 132 95 115 88 C105 98 85 95 70 88 C55 98 38 92 38 75 C28 88 18 75 25 60 C22 56 28 52 35 55 C30 58 32 62 35 62 Z' stroke='%236BB3D9' stroke-width='1.5' stroke-opacity='0.22'/%3E%3C/svg%3E");
}

@keyframes cloudFloat {
    0%, 100% {
        transform: translateX(0) translateY(0);
    }
    25% {
        transform: translateX(30px) translateY(-10px);
    }
    50% {
        transform: translateX(0) translateY(-20px);
    }
    75% {
        transform: translateX(-30px) translateY(-10px);
    }
}

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

a {
    text-decoration: none !important;
    transition: all var(--transition-fast);
    color: var(--text-color);
    position: relative;
}

a:hover {
    color: var(--primary-color);
}

a.link-underline::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(to right, var(--primary-color), var(--primary-dark));
    transition: width var(--transition-normal);
}

a.link-underline:hover::after {
    width: 100%;
}

a.btn-link {
    color: inherit;
}

a.btn-link:hover {
    color: inherit;
}

a.btn-link::after {
    display: none;
}

ul, li {
    list-style: none;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.top-nav {
    width: 100%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 9999;
    animation: slideInLeft 0.5s ease;
    overflow: hidden;
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

.nav-logo {
    font-size: 1.4rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: transform var(--transition-fast);
}

/* .nav-logo:hover {
    transform: scale(1.05);
} */

.nav-tabs {
    display: flex;
    gap: 1rem;
    flex: 1;
    margin-left: 3rem;
    background: rgba(255, 255, 255, 0.92);
}

.nav-tabs a {
    color: var(--text-color);
    font-size: 1rem;
    padding: 1.5rem 1rem;
    position: relative;
    font-weight: 500;
    background: #ffffff;
    border: none;
    outline: none;
    z-index: 1;
    display: inline-block;
}

.nav-tabs a::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--primary-color);
    border-radius: 2px;
    transition: width var(--transition-normal);
}

.nav-tabs a:hover::after,
.nav-tabs a.active::after {
    width: 100%;
}

.nav-tabs a:hover,
.nav-tabs a.active {
    color: var(--primary-color);
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

.nav-user {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.nav-user a {
    padding: 0.5rem 1.2rem;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.nav-user .nav-login {
    background: var(--hover-bg);
    color: var(--primary-dark);
    border: 1px solid var(--border-color);
}

.nav-user .nav-login:hover {
    background: var(--primary-light);
    color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.nav-user .nav-register {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    box-shadow: 0 4px 12px rgba(107, 179, 217, 0.3);
}

.nav-user .nav-register:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(107, 179, 217, 0.4);
}

.nav-user span {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.nav-old-site {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: white;
    color: var(--text-color);
    font-size: 0.85rem;
    line-height: 1.4;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    font-family: inherit;
}

.nav-old-site:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: var(--hover-bg);
}

.language-switch {
    position: relative;
}

.lang-btn {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: white;
    color: var(--text-color);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.lang-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: var(--hover-bg);
}

.language-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 120px;
    display: none;
    z-index: 100;
    animation: scaleIn 0.2s ease;
}

.language-menu.show {
    display: block;
}

.language-menu a {
    display: block;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    color: var(--text-color);
    white-space: nowrap;
    transition: background var(--transition-fast);
}

.language-menu a:hover {
    background: var(--hover-bg);
    color: var(--primary-color);
}

.container {
    width: 100%;
    min-width: 0;
    margin: 0 auto;
    max-width: 90%;
    width: min(1400px, 92vw);
    padding: 2rem 1.5rem;
    display: grid;
    grid-template-columns: 280px 1fr 280px;
    gap: 2rem;
}

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
    animation: slideInLeft 0.6s ease;
}

.author-card {
    background: var(--surface-color);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
}

.author-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
    border: 4px solid var(--primary-light);
    box-shadow: 0 4px 12px rgba(107, 179, 217, 0.2);
}

.author-card h3 {
    color: var(--primary-dark);
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.author-card p {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.widget {
    background: var(--surface-color);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

.widget:hover {
    box-shadow: var(--shadow-md);
}

.widget h4 {
    color: var(--primary-dark);
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    padding-left: 12px;
}

.widget h4::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    background: linear-gradient(180deg, var(--primary-color), var(--primary-dark));
    border-radius: 2px;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag {
    background: var(--primary-color);
    color: #fff;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all var(--transition-fast);
    border: 1px solid var(--border-color);
}

.tag:hover {
    cursor: default;
}

.category-list li {
    margin-bottom: 0.5rem;
}

.category-list a {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0.8rem;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.category-list a:hover {
    background: var(--hover-bg);
}

.category-list a.active {
    background: var(--primary-light);
    color: var(--primary-dark);
    font-weight: 500;
}

.main-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

.search-box {
    display: flex;
    gap: 12px;
    align-items: center;
    background: var(--surface-color);
    padding: 18px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
    animation: fadeUp 0.5s ease;
}

.search-box input {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 48px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0 16px;
    font-size: 15px;
    background: var(--hover-bg);
    color: var(--text-color);
    outline: none;
    box-sizing: border-box;
    transition: all var(--transition-fast);
}

.search-box input:focus {
    border-color: var(--primary-color);
    background: white;
    box-shadow: 0 0 0 3px rgba(107, 179, 217, 0.1);
}

#searchBtn {
    flex-shrink: 0;
    height: 48px;
    padding: 0 28px;
    border: none;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 4px 12px rgba(107, 179, 217, 0.3);
}

#searchBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(107, 179, 217, 0.4);
}

.post-card {
    background: var(--surface-color);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    transition: all var(--transition-normal);
    cursor: pointer;
    opacity: 0;
    transform: translateY(20px);
}

.post-card.visible {
    animation: fadeUp 0.6s ease forwards;
}

.post-card:nth-child(2) { animation-delay: 0.1s; }
.post-card:nth-child(3) { animation-delay: 0.2s; }
.post-card:nth-child(4) { animation-delay: 0.3s; }
.post-card:nth-child(5) { animation-delay: 0.4s; }
.post-card:nth-child(6) { animation-delay: 0.5s; }
.post-card:nth-child(7) { animation-delay: 0.6s; }
.post-card:nth-child(8) { animation-delay: 0.7s; }
.post-card:nth-child(9) { animation-delay: 0.8s; }
.post-card:nth-child(10) { animation-delay: 0.9s; }

.post-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.post-cover img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: var(--radius-md);
    transition: transform var(--transition-normal);
}

.post-card:hover .post-cover img {
    transform: scale(1.03);
}

.post-meta {
    font-size: 0.85rem;
    color: var(--text-light);
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.post-title {
    font-size: 1.3rem;
    color: var(--text-color);
    font-weight: 600;
    transition: color var(--transition-fast);
    line-height: 1.4;
}

a:hover .post-title {
    color: var(--primary-color);
}

.post-excerpt {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.post-tags {
    font-size: 0.85rem;
    color: var(--primary-dark);
    font-weight: 500;
}

.post-card.sticky {
    position: relative;
    border: 2px solid var(--primary-light);
    background: linear-gradient(135deg, #FAFCFD 0%, white 100%);
}

.post-card.sticky::before {
    content: "置顶";
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    font-size: 0.8rem;
    padding: 0.25rem 0.7rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(107, 179, 217, 0.3);
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.pagination a, .pagination span, .pagination button {
    padding: 0.5rem 1rem;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-color);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.pagination a:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.pagination a.active {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    border-color: var(--primary-color);
    cursor: default;
}

.pagination .ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-color);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    line-height: 1.5;
    height: auto;
}

.pagination .ellipsis:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.pagination .prev, .pagination .next {
    font-size: 0.85rem;
}

.right-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
    animation: slideInRight 0.6s ease;
}

.friend-links {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.friend-links li a {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1rem;
    background-color: var(--hover-bg);
    border-radius: var(--radius-md);
    color: var(--text-color);
    transition: all var(--transition-fast);
    border: 1px solid var(--border-color);
}

.friend-links li a:hover {
    background-color: var(--primary-light);
    color: var(--primary-dark);
    transform: translateX(6px);
    border-color: var(--primary-color);
}

.email-card {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 0.6rem 0;
}

.email-link {
    color: var(--primary-dark);
    font-size: 0.95rem;
    font-weight: 600;
}

.email-link:hover {
    color: var(--primary-color);
}

.email-tip {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: 0.2rem;
}

.sponsor-widget {
    padding: 0.2rem;
}

.sponsor-btn {
    width: 100%;
    padding: 0.9rem 0;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 4px 12px rgba(107, 179, 217, 0.3);
}

.sponsor-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(107, 179, 217, 0.4);
}

.thanks-btn {
    display: block;
    width: 100%;
    padding: 0.8rem 0;
    margin-top: 0.8rem;
    background-color: var(--hover-bg);
    color: var(--primary-dark);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
    text-decoration: none !important;
}

.thanks-btn:hover {
    background-color: var(--primary-light);
    color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.back-to-top-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    padding: 0;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(107, 179, 217, 0.4);
    transition: all var(--transition-fast);
    opacity: 0;
    visibility: hidden;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

.back-to-top-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(107, 179, 217, 0.5);
}

.back-to-top-btn.show {
    opacity: 1;
    visibility: visible;
}

.footer {
    text-align: center;
    padding: 2.5rem 0 3rem;
    color: var(--text-light);
    font-size: 0.85rem;
    margin-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.update-log-container {
    max-height: 220px;
    overflow-y: auto;
    padding-right: 8px;
    margin-top: 5px;
}

.update-log-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.log-item {
    padding: 6px 0;
    border-bottom: 1px dashed var(--border-color);
}

.log-date {
    display: inline-block;
    font-size: 12px;
    color: white;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    padding: 2px 8px;
    border-radius: 10px;
    margin-bottom: 4px;
}

.log-text {
    font-size: 13px;
    color: var(--text-color);
    line-height: 1.4;
    padding-left: 2px;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--hover-bg);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-light);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

.update-log-container::-webkit-scrollbar {
    width: 5px;
}

.notice-widget {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.notice-widget::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary-color), var(--primary-dark));
    border-radius: 4px;
}

.notice-widget h4 {
    color: var(--primary-dark);
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 700;
    padding-left: 0.5rem;
}

.notice-content {
    padding-left: 0.5rem;
}

.notice-content p {
    margin-bottom: 0.6rem;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-color);
}

.notice-list {
    margin: 1rem 0;
    padding: 0.8rem;
    background: var(--hover-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.notice-list p {
    margin-bottom: 0.5rem;
    color: var(--primary-dark);
    font-weight: 500;
}

.notice-tip {
    font-size: 13px;
    color: var(--text-light);
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border-color);
}

.sponsor-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 1rem;
    box-sizing: border-box;
    backdrop-filter: blur(4px);
}

.sponsor-modal-content {
    background-color: var(--surface-color);
    padding: 2rem;
    border-radius: var(--radius-xl);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    text-align: center;
    position: relative;
    box-shadow: var(--shadow-lg);
    animation: scaleIn 0.3s ease;
}

.close-btn {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 1.5rem;
    color: var(--text-light);
    cursor: pointer;
    transition: color var(--transition-fast);
}

.close-btn:hover {
    color: var(--primary-color);
}

.sponsor-title {
    color: var(--primary-dark);
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.qr-code-container {
    display: flex;
    gap: 1.2rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
}

.qr-code-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    flex: 0 1 auto;
    max-width: 100%;
}

.qr-label {
    color: var(--text-color);
    font-weight: 600;
    font-size: 1rem;
}

.qr-img {
    width: 100%;
    max-width: 180px;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-md);
    border: 2px solid var(--border-color);
    box-sizing: border-box;
    transition: transform var(--transition-normal);
}

.qr-img:hover {
    transform: scale(1.05);
}

.agreement-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 1rem;
    backdrop-filter: blur(4px);
}

.agreement-content {
    width: 90%;
    max-width: 650px;
    background: var(--surface-color);
    border-radius: var(--radius-xl);
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    animation: scaleIn 0.3s ease;
}

.agreement-title {
    text-align: center;
    color: var(--primary-dark);
    margin-bottom: 1.2rem;
    font-size: 1.4rem;
    font-weight: 600;
}

.agreement-scroll {
    max-height: 380px;
    overflow-y: auto;
    background: var(--hover-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    color: var(--text-color);
    line-height: 1.8;
    font-size: 14px;
}

.agreement-scroll p {
    margin-bottom: 0.8rem;
}

.agreement-btns {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.agreement-btn {
    flex: 1;
    border: none;
    border-radius: var(--radius-md);
    padding: 0.9rem 0;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.decline-btn {
    background: var(--hover-bg);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

.decline-btn:hover {
    background: #f0f0f0;
    color: var(--text-color);
}

.accept-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
}

.accept-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(107, 179, 217, 0.3);
}

.accept-btn:disabled {
    background: var(--primary-light);
    cursor: not-allowed;
}

.theme-toggle-btn {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 9999;
    padding: 12px 18px;
    border: none;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.95);
    color: var(--text-color);
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(107, 179, 217, 0.15);
    backdrop-filter: blur(10px);
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-toggle-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(107, 179, 217, 0.25);
}

.auth-container {
    min-height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--surface-color);
    border-radius: var(--radius-xl);
    padding: 2.5rem 2rem;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    animation: fadeUp 0.5s ease;
}

.auth-card h1 {
    text-align: center;
    font-size: 1.8rem;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.auth-card .form-group {
    margin-bottom: 1.2rem;
}

.auth-card .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-color);
}

.auth-card .form-group input[type="text"],
.auth-card .form-group input[type="email"],
.auth-card .form-group input[type="password"] {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 1rem;
    transition: all var(--transition-fast);
    background: var(--hover-bg);
    color: var(--text-color);
    outline: none;
}

.auth-card .form-group input:focus {
    border-color: var(--primary-color);
    background: white;
    box-shadow: 0 0 0 3px rgba(107, 179, 217, 0.1);
}

.auth-card .form-help {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-light);
}

.auth-card .checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.auth-card .checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.auth-card .checkbox-group label {
    margin-bottom: 0;
    cursor: pointer;
}

.auth-card .btn-block {
    width: 100%;
    padding: 0.9rem;
    font-size: 1.1rem;
    margin-top: 0.5rem;
}

.auth-card .alert {
    padding: 0.8rem 1rem;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.auth-card .alert-error {
    background: #fef5f5;
    color: #e74c3c;
    border: 1px solid #fcc;
}

.auth-card .alert-success {
    background: #f0fdf4;
    color: #22c55e;
    border: 1px solid #bbf7d0;
}

.auth-card .auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-light);
}

.auth-card .auth-footer a {
    color: var(--primary-color);
    font-weight: 600;
}

.auth-card .auth-footer a:hover {
    color: var(--primary-dark);
}

.auth-divider {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
    color: var(--text-light);
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.auth-divider span {
    padding: 0 1rem;
    font-size: 0.85rem;
}

.auth-back-home {
    display: block;
    text-align: center;
    margin-top: 1rem;
    color: var(--text-light);
    font-size: 0.9rem;
}

.auth-back-home:hover {
    color: var(--primary-color);
}

.auth-forgot-password {
    display: block;
    text-align: right;
    color: var(--primary-color);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

.auth-forgot-password:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

@media (max-width: 1024px) {
    .container {
        grid-template-columns: 1fr 280px;
        gap: 1.5rem;
    }
    
    .sidebar {
        display: none;
    }
}

@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
        padding: 1.5rem 1rem;
        gap: 1.5rem;
    }
    
    .right-sidebar {
        display: flex;
    }
    
    .post-card:hover {
        transform: scale(1);
        box-shadow: var(--shadow-md);
    }
    
    .post-cover img {
        height: 160px;
    }
    
    .nav-tabs {
        display: none;
    }
    
    .nav-user {
        gap: 0.5rem;
    }
    
    .nav-user a {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }
    
    .search-box {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    #searchBtn {
        width: 100%;
    }
    
    .sponsor-modal-content {
        width: 100%;
        max-width: 100%;
        max-height: 85vh;
        padding: 1.2rem 1rem;
    }
    
    .qr-code-container {
        flex-direction: column;
        gap: 1rem;
    }
    
    .qr-code-item {
        width: 100%;
    }
    
    .qr-img {
        width: min(65vw, 180px);
        max-width: 180px;
        min-width: 120px;
    }
    
    .sponsor-title {
        font-size: 1rem;
        margin-bottom: 1rem;
    }
    
    .qr-label {
        font-size: 0.9rem;
    }
    
    .back-to-top-btn {
        width: 44px;
        height: 44px;
        bottom: 1.5rem;
        right: 1.5rem;
        font-size: 1.2rem;
    }
    
    .thanks-btn {
        padding: 0.7rem 0;
        font-size: 0.9rem;
    }
    
    .agreement-content {
        padding: 1.2rem;
    }
    
    .agreement-scroll {
        max-height: 300px;
    }
    
    .agreement-btns {
        flex-direction: column;
    }
    
    .theme-toggle-btn {
        left: 15px;
        bottom: 15px;
        padding: 10px 14px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .nav-user {
        gap: 0.3rem;
    }
    
    .nav-user a {
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
    }
    
    .qr-img {
        width: min(60vw, 150px);
        max-width: 150px;
    }
    
    .sponsor-modal-content {
        padding: 1rem 0.8rem;
    }
    
    .close-btn {
        top: 0.6rem;
        right: 1rem;
        font-size: 1.3rem;
    }
    
    .auth-card {
        padding: 2rem 1.5rem;
    }
}

body.dark-mode {
    --bg-color: #0f172a;
    --bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --surface-color: #1e293b;
    --text-color: #f1f5f9;
    --text-muted: #94a3b8;
    --text-light: #64748b;
    --border-color: #334155;
    --hover-bg: #334155;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
}

body.dark-mode::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 100' fill='none'%3E%3Cpath d='M30 60 C20 60 15 50 20 40 C25 30 40 25 55 30 C60 25 75 20 90 30 C100 25 115 20 130 30 C140 25 155 25 170 35 C185 25 200 30 200 45 C200 55 195 65 185 70 C180 75 170 80 155 75 C150 85 140 90 125 85 C120 92 110 95 95 90 C90 97 80 98 65 92 C50 98 35 95 30 85 C20 95 10 85 15 70 C10 65 15 55 25 55 C20 58 15 65 25 65 C28 62 30 60 30 60 Z' stroke='%2393C5FD' stroke-width='1.5' stroke-opacity='0.15'/%3E%3C/svg%3E");
}

body.dark-mode::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 120' fill='none'%3E%3Cpath d='M40 70 C30 70 25 55 35 45 C45 35 65 30 85 40 C95 30 120 25 145 40 C170 25 195 30 215 45 C235 35 255 40 260 55 C265 70 255 80 240 85 C225 95 205 95 185 85 C175 100 155 105 135 95 C120 110 95 105 75 95 C55 110 35 105 35 85 C25 100 15 85 25 70 C20 65 25 55 40 55 C35 60 35 68 40 70 Z' stroke='%2393C5FD' stroke-width='1.5' stroke-opacity='0.12'/%3E%3C/svg%3E");
}

body.dark-mode .cloud-bg-1 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 75' fill='none'%3E%3Cpath d='M25 45 C15 45 10 35 18 28 C26 21 42 18 58 25 C65 18 78 15 92 25 C105 18 120 20 130 32 C140 22 150 28 150 40 C150 50 145 58 135 60 C125 65 110 65 95 58 C88 70 72 72 58 65 C50 72 38 70 30 62 C20 70 12 62 18 50 C12 45 18 42 25 45 Z' stroke='%2393C5FD' stroke-width='1.5' stroke-opacity='0.18'/%3E%3C/svg%3E");
}

body.dark-mode .cloud-bg-2 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 90' fill='none'%3E%3Cpath d='M30 55 C20 55 15 42 25 33 C35 24 55 20 75 30 C85 22 105 18 125 30 C145 20 165 25 175 38 C185 28 195 35 195 50 C195 60 190 68 180 70 C170 75 155 75 140 68 C132 82 115 85 98 78 C88 88 70 85 55 78 C40 88 28 82 28 65 C18 78 8 65 15 52 C10 48 18 45 30 48 C25 52 28 55 30 55 Z' stroke='%2393C5FD' stroke-width='1.5' stroke-opacity='0.14'/%3E%3C/svg%3E");
}

body.dark-mode .cloud-bg-3 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 65' fill='none'%3E%3Cpath d='M22 40 C14 40 10 30 16 23 C22 16 36 14 50 20 C58 14 72 12 85 20 C98 14 112 16 120 26 C128 18 135 23 135 35 C135 43 130 50 120 52 C110 56 96 56 82 50 C75 60 60 62 47 56 C38 62 28 60 25 50 C16 58 8 48 12 38 C8 35 14 32 22 35 C18 38 20 40 22 40 Z' stroke='%2393C5FD' stroke-width='1.5' stroke-opacity='0.2'/%3E%3C/svg%3E");
}

body.dark-mode .cloud-bg-4 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 105' fill='none'%3E%3Cpath d='M35 62 C25 62 20 48 30 38 C40 28 62 24 82 35 C92 26 115 22 138 35 C160 24 185 28 200 42 C215 32 230 38 230 55 C230 68 222 78 210 80 C195 85 178 85 162 78 C152 92 132 95 115 88 C105 98 85 95 70 88 C55 98 38 92 38 75 C28 88 18 75 25 60 C22 56 28 52 35 55 C30 58 32 62 35 62 Z' stroke='%2393C5FD' stroke-width='1.5' stroke-opacity='0.11'/%3E%3C/svg%3E");
}

body.dark-mode .post-card,
body.dark-mode .widget,
body.dark-mode .author-card,
body.dark-mode .agreement-content,
body.dark-mode .sponsor-modal-content,
body.dark-mode .auth-card {
    background: var(--surface-color);
    color: var(--text-color);
    border-color: var(--border-color);
}

body.dark-mode a {
    color: var(--text-color);
}

body.dark-mode .nav-logo {
    color: var(--primary-light);
}

body.dark-mode .top-nav {
    background: rgba(30, 41, 59, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.dark-mode .nav-tabs {
    background: rgba(30, 41, 59, 1);
}

body.dark-mode .nav-tabs a {
    color: var(--text-color);
    background: rgba(30, 41, 59, 1) !important;
    border: none !important;
    box-shadow: none !important;
}

body.dark-mode .nav-tabs a:hover,
body.dark-mode .nav-tabs a.active {
    color: var(--primary-light);
}

body.dark-mode .nav-user span {
    color: var(--text-muted);
}

body.dark-mode .nav-user .nav-login {
    background: var(--hover-bg);
    color: var(--primary-light);
    border-color: var(--border-color);
}

body.dark-mode .nav-user .nav-login:hover {
    background: var(--border-color);
}

body.dark-mode .nav-old-site,
body.dark-mode .lang-btn {
    background: var(--hover-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

body.dark-mode .nav-old-site:hover,
body.dark-mode .lang-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-light);
}

body.dark-mode .language-menu {
    background: var(--surface-color);
    border-color: var(--border-color);
}

body.dark-mode .language-menu a {
    color: var(--text-color);
}

body.dark-mode .language-menu a:hover {
    background: var(--hover-bg);
    color: var(--primary-light);
}

body.dark-mode .search-box {
    background: var(--surface-color);
}

body.dark-mode .search-box input {
    background: var(--hover-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

body.dark-mode .tag {
    background: var(--primary-dark);
    color: #fff;
    border-color: var(--border-color);
}

body.dark-mode .tag:hover {
    cursor: default;
}

body.dark-mode .category-list a.active {
    background: var(--border-color);
    color: var(--primary-light);
}

body.dark-mode .post-title {
    color: var(--text-color);
}

body.dark-mode .friend-links li a {
    background-color: var(--hover-bg);
    border-color: var(--border-color);
}

body.dark-mode .friend-links li a:hover {
    background-color: var(--border-color);
    color: var(--primary-light);
}

body.dark-mode .notice-widget {
    background: var(--surface-color);
    border-color: var(--border-color);
}

body.dark-mode .notice-widget::before {
    background: linear-gradient(180deg, var(--primary-color), var(--primary-dark));
}

body.dark-mode .notice-content p {
    color: var(--text-color);
}

body.dark-mode .notice-list {
    background: var(--hover-bg);
    border-color: var(--border-color);
}

body.dark-mode .notice-list p {
    color: var(--primary-light);
}

body.dark-mode .notice-tip {
    color: var(--text-light);
    border-top-color: var(--border-color);
}

body.dark-mode .pagination a,
body.dark-mode .pagination span {
    background: var(--surface-color);
    border-color: var(--border-color);
    color: var(--text-color);
}

body.dark-mode .pagination a:hover {
    background: var(--primary-color);
}

body.dark-mode .pagination .ellipsis {
    background: var(--surface-color);
    border-color: var(--border-color);
    color: var(--text-color);
}

body.dark-mode .pagination a.active {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    border-color: var(--primary-color);
}

body.dark-mode .theme-toggle-btn {
    background: rgba(30, 41, 59, 0.95);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

body.dark-mode .footer {
    color: var(--text-light);
    border-top-color: var(--border-color);
}

body.dark-mode .thanks-btn {
    background: var(--hover-bg);
    color: var(--primary-light);
    border-color: var(--border-color);
}

body.dark-mode .thanks-btn:hover {
    background: var(--border-color);
}

body.dark-mode .auth-card .form-group input[type="text"],
body.dark-mode .auth-card .form-group input[type="email"],
body.dark-mode .auth-card .form-group input[type="password"] {
    background: var(--hover-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

body.dark-mode .auth-card .form-group input:focus {
    border-color: var(--primary-color);
}

body.dark-mode .auth-card .auth-footer {
    border-color: var(--border-color);
}

body.dark-mode .auth-card .alert-error {
    background: rgba(231, 76, 60, 0.1);
    color: #f88;
    border-color: rgba(231, 76, 60, 0.3);
}

body.dark-mode .log-text {
    color: var(--text-color);
}