:root {
      /* 降低背景浓度，提升透明度，让壁纸透出来 */
      --glass: rgba(255, 255, 255, 0.04); 
      --glass-2: rgba(0, 0, 0, 0.15);
      --stroke: rgba(255, 255, 255, 0.12);
      --shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
      --text: rgba(255, 255, 255, 0.95);
      --muted: rgba(255, 255, 255, 0.7);
      --muted-2: rgba(255, 255, 255, 0.5);
      --radius-xl: 28px;
      --radius-lg: 20px;
      --max: 1100px;
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
      --vh: 1vh;
    }

    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
    html, body { height: 100%; margin: 0; }
    body {
      font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
      color: var(--text);
      overflow-x: hidden;
      background: #080c14;
    }

    /* 背景层 */
    .bgWrap { position: fixed; inset: 0; z-index: -3; overflow: hidden; background: #000; }
    .bgLayer {
      position: absolute; inset: 0; background: center / cover no-repeat;
      transform: scale(1.05); opacity: 0;
      transition: opacity 1200ms cubic-bezier(0.4, 0, 0.2, 1), transform 1200ms ease-out;
      will-change: opacity, transform;
    }
    .bgLayer.on { opacity: 1; transform: scale(1); }
    .bgWrap::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.4));
      z-index: 2; pointer-events: none;
    }

    /* HUD：解决移动端遮挡 */
    .hud { position: fixed; top: calc(12px + var(--safe-top)); left: 0; right: 0; z-index: 50; pointer-events: none; }
    .hud-inner { width: min(var(--max), calc(100% - 24px)); margin: 0 auto; display: flex; justify-content: space-between; gap: 8px; }
    .pill {
      pointer-events: auto; display: inline-flex; align-items: center; gap: 8px;
      padding: 8px 14px; border-radius: 999px; background: var(--glass-2);
      border: 1px solid var(--stroke); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    }
    .pill .k { color: var(--muted-2); font-size: 11px; text-transform: uppercase; }
    .pill .v { font-size: 13px; font-weight: 650; white-space: nowrap; }
    .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: #4effae; flex-shrink: 0; }

    @media (max-width: 520px) {
      .pill .k { display: none; } /* 移动端隐藏标签，只留核心信息 */
      .pill .v { font-size: 12px; font-family: monospace; }
    }

    main { width: min(var(--max), calc(100% - 28px)); margin: 0 auto; padding: calc(80px + var(--safe-top)) 0 calc(20px + var(--safe-bottom)); }

    /* 卡片：极致透明 */
    .card {
      border-radius: var(--radius-xl); background: var(--glass); border: 1px solid var(--stroke);
      box-shadow: var(--shadow); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      overflow: hidden; position: relative;
    }
    .hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 20px; padding: 24px; }

    .title h1 { margin: 0; font-size: clamp(24px, 4vw, 34px); font-weight: 800; }
    .subtitle { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
    .badge { padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,0.25); border: 1px solid var(--stroke); font-size: 11px; color: var(--muted); }

    .now { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; }
    .temp .big { font-size: clamp(56px, 9vw, 80px); font-weight: 900; line-height: 1; }
    .temp .feel { color: var(--muted); font-size: 14px; margin-top: 6px; }
    .cond { text-align: right; }
    .icon { font-size: 48px; margin-bottom: 4px; width: 64px; height: 64px; background: rgba(255,255,255,0.08); border-radius: 20px; display: inline-grid; place-items: center; }

    .metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .metric { padding: 16px; border-radius: var(--radius-lg); background: rgba(0,0,0,0.15); border: 1px solid var(--stroke); }
    .metric .v { font-size: 18px; font-weight: 800; margin: 4px 0; }
    .metric .k, .metric .s { font-size: 11px; color: var(--muted); }

    .side { display: flex; flex-direction: column; gap: 12px; }
    .mini { padding: 14px; border-radius: var(--radius-lg); background: rgba(0,0,0,0.15); border: 1px solid var(--stroke); }
    .mini .k { font-size: 11px; color: var(--muted); }
    .mini .v { font-size: 18px; font-weight: 800; margin-top: 4px; }
    .mini .t { font-size: 11px; color: var(--muted-2); margin-top: 4px; }

    /* 下滑提示 */
    .scroll-hint { margin: 15px auto 0; width: fit-content; padding: 10px 20px; border-radius: 999px; background: rgba(0,0,0,0.3); border: 1px solid var(--stroke); font-size: 13px; color: var(--muted); backdrop-filter: blur(8px); animation: floaty 2s infinite; cursor: pointer; }
    @keyframes floaty { 0%,100% { transform:translateY(0); } 50% { transform:translateY(5px); } }

    /* 未来天气详情样式恢复 */
    .section { margin-top: 30px; }
    .grid-days { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .day { padding: 20px; border-radius: var(--radius-xl); background: var(--glass); border: 1px solid var(--stroke); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
    .day .top { display: flex; justify-content: space-between; align-items: center; }
    .day .date { font-weight: 800; font-size: 16px; }
    .day .mid { display: flex; justify-content: space-between; align-items: center; margin: 15px 0; }
    .day .t { font-size: 28px; font-weight: 900; }
    .day .range { font-size: 12px; color: var(--muted); margin-top: 4px; }
    .day .bot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .chip { padding: 8px; border-radius: 12px; background: rgba(0,0,0,0.2); border: 1px solid var(--stroke); font-size: 11px; color: var(--muted); display: flex; justify-content: space-between; }
    .chip b { color: #fff; }

    /* 加载层：加入柔和缩放 */
    .overlay {
      position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
      background: rgba(0,0,0,0.7); backdrop-filter: blur(15px);
      transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .overlay.hidden { opacity: 0; visibility: hidden; transform: scale(1.08); }
    .loadCard { width: min(400px, 90%); padding: 30px; background: var(--glass); border: 1px solid var(--stroke); border-radius: var(--radius-xl); text-align: center; }
    .ring { width: 40px; height: 40px; border: 3px solid rgba(255,255,255,0.1); border-top-color: #fff; border-radius: 50%; margin: 0 auto 20px; animation: spin 0.8s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }

    @media (max-width: 920px) { .hero-grid { grid-template-columns: 1fr; } .metrics { grid-template-columns: 1fr; } .grid-days { grid-template-columns: 1fr; } }

    /* GitHub 按钮 */
    .pill.github { text-decoration: none; color: var(--text); }
    .pill.github svg { width: 16px; height: 16px; opacity: 0.9; }
    .pill.github:hover { background: rgba(0, 0, 0, 0.22); }