* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}
html, body {
    width: 100%;
    height: 100%;
}
body {
    min-height: 100vh;
    transition: background 0.6s ease, color 0.6s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    position: relative;
    overflow-x: hidden;
}
/* 背景接口 */
body.dark-mode {
    background: linear-gradient(rgba(0,0,0,0.62), rgba(0,0,0,0.62)), url("https://api.yppp.net/api.php") center/cover no-repeat fixed;
    color: #e5e7eb;
}
body.light-mode {
    background: linear-gradient(rgba(255,255,255,0.72), rgba(255,255,255,0.72)), url("https://api.yppp.net/api.php") center/cover no-repeat fixed;
    color: #1f2937;
}
.bg-dots {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.bg-dots span {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    animation: float 8s infinite ease-in-out;
}
@keyframes float {
    0%,100% {transform: translateY(0);}
    50% {transform: translateY(-24px);}
}
.nav-container {
    width: 100%;
    max-width: 690px;
    padding: 34px;
    border-radius: 22px;
    transition: all 0.6s ease;
    z-index: 10;
}
body.dark-mode .nav-container {
    background: rgba(32,34,38,0.76);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.09);
    box-shadow: 0 24px 64px rgba(0,0,0,0.46);
}
body.light-mode .nav-container {
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(0,0,0,0.07);
    box-shadow: 0 24px 64px rgba(0,0,0,0.16);
}
.top-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}
.top-toolbar h1 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.mode-toggle {
    width: 58px;
    height: 30px;
    border-radius: 15px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.22);
    cursor: pointer;
    position: relative;
    transition: all 0.35s ease;
    pointer-events: auto !important;
}
body.light-mode .mode-toggle {
    background: rgba(0,0,0,0.06);
    border-color: rgba(0,0,0,0.12);
}
.mode-toggle-circle {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    transition: all 0.35s ease;
    box-shadow: 0 0 18px rgba(245,158,11,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    pointer-events: none;
}
.mode-toggle-circle.moon {
    left: 32px;
    background: linear-gradient(135deg, #a855f7, #8b5cf6);
    box-shadow: 0 0 18px rgba(168,85,247,0.9);
}
.icon-sun,.icon-moon {
    position: absolute;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.mode-toggle-circle .icon-sun {opacity:1;transform:scale(1);}
.mode-toggle-circle .icon-moon {opacity:0;transform:scale(0.5);}
.mode-toggle-circle.moon .icon-sun {opacity:0;transform:scale(0.5);}
.mode-toggle-circle.moon .icon-moon {opacity:1;transform:scale(1);}
/* 核心修改：天气框加宽，时间框缩小比例 1fr(天气) 1.35fr(时间) */
.header-row {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 18px;
    margin-bottom: 22px;
}
.weather-box,.time-box {
    padding: 18px 16px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap:14px;
    transition: all 0.6s ease;
}
body.dark-mode .weather-box,body.dark-mode .time-box {
    background: rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.1);
}
body.light-mode .weather-box,body.light-mode .time-box {
    background:#f7f9fc;
    border:1px solid #e5e7eb;
}
.weather-box {
    justify-content: flex-start;
    width: 100%;
}
.weather-icon {
    width:48px;
    height:48px;
    flex-shrink:0;
}
.weather-text {
    display:flex;
    flex-direction:column;
    gap:6px;
}
.city {font-size:13px;opacity:0.75;}
.temp {font-size:26px;font-weight:800;line-height:1;}
.weather-desc {font-size:13px;opacity:0.7;}
.time-box {
    flex-direction:column;
    justify-content:center;
    text-align:center;
    gap:8px;
}
/* 缩小时间字体 */
.time-main {
    font-size: 34px;
    font-weight:900;
    letter-spacing:1px;
}
.date-info {
    font-size:13px;
    opacity:0.72;
}
.runtime-box {
    padding:16px 20px;
    border-radius:14px;
    margin-bottom:26px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
body.dark-mode .runtime-box {
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.1);
}
body.light-mode .runtime-box {
    background:#f7f9fc;
    border:1px solid #e5e7eb;
}
.runtime-label {font-size:14px;opacity:0.75;}
.runtime-data {font-size:16px;font-weight:700;}
.site-grid {
    display:grid;
    grid-template-columns: repeat(2,1fr);
    gap:18px;
}
.site-card {
    padding:20px;
    border-radius:14px;
    display:flex;
    align-items:flex-start;
    gap:16px;
    cursor:pointer;
    transition:all 0.3s ease;
    pointer-events:auto !important;
}
body.dark-mode .site-card {
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.1);
}
body.light-mode .site-card {
    background:#f7f9fc;
    border:1px solid #e5e7eb;
}
.site-card:hover {
    transform:translateY(-4px);
}
body.dark-mode .site-card:hover {
    background:rgba(255,255,255,0.14);
    box-shadow:0 14px 32px rgba(0,0,0,0.28);
}
body.light-mode .site-card:hover {
    background:#fff;
    box-shadow:0 14px 32px rgba(0,0,0,0.14);
}
.site-logo {
    width:40px;
    height:40px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    font-size:22px;
    color:#fff;
}
.site-logo.cloud {background:linear-gradient(135deg,#0ea5e9,#38bdf8);}
.site-logo.box {background:linear-gradient(135deg,#f97316,#fb923c);}
.site-logo.group {background:linear-gradient(135deg,#22c55e,#4ade80);}
.site-logo.apk {background:linear-gradient(135deg,#10b981,#34d399);}
.site-logo.music {background:linear-gradient(135deg,#ec4899,#f472b6);}
.site-logo.play {background:linear-gradient(135deg,#ef4444,#f87171);}
.site-logo.blog {background:linear-gradient(135deg,#6366f1,#818cf8);}
.site-logo.donate {background:linear-gradient(135deg,#8b5cf6,#a78bfa);}
.site-text h4 {
    font-size:16px;
    margin-bottom:5px;
}
.site-text p {
    font-size:12px;
    line-height:1.6;
    opacity:0.68;
}

/* 完整手机端适配 */
@media screen and (max-width: 480px) {
    body {
        padding: 12px;
    }
    .nav-container {
        padding: 22px;
        border-radius: 18px;
    }
    .top-toolbar h1 {
        font-size: 20px;
    }
    /* 手机端天气时间上下单列 */
    .header-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    /* 手机端时间字体缩小 */
    .time-main {
        font-size: 28px;
    }
    /* 运行时长上下分行居中 */
    .runtime-box {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }
    /* 卡片单列铺满 */
    .site-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .site-card {
        padding: 16px;
    }
}