/* ═══════════════════════════════════════════
   通用设计系统 — 液态玻璃 (Apple-style)
   适用于：主页 / 工具箱 / 博客 / 仪表盘
   ═══════════════════════════════════════════ */

/* ── Fonts ── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── CSS Variables ── */
:root {
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans SC', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --bg: #f2f2f7;
  --surface: rgba(255,255,255,0.55);
  --surface-hover: rgba(255,255,255,0.78);
  --text: #1d1d1f;
  --text-secondary: #86868b;
  --text-tertiary: #aeaeb2;
  --accent: #0071e3;
  --accent2: #5e5ce6;
  --accent3: #bf5af2;
  --gradient: linear-gradient(135deg, #0071e3 0%, #5e5ce6 50%, #bf5af2 100%);
  --border: rgba(0,0,0,0.06);
  --border-light: rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.03);
  --shadow-md: 0 8px 32px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.02);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.03);
  --green: #34c759;
  --orange: #ff9500;
  --red: #ff3b30;
  --radius: 28px;
  --radius-sm: 18px;
}

[data-theme="dark"] {
  --bg: #000000;
  --surface: rgba(28,28,30,0.55);
  --surface-hover: rgba(38,38,46,0.78);
  --text: #f5f5f7;
  --text-secondary: #98989d;
  --text-tertiary: #636366;
  --accent: #0a84ff;
  --accent2: #7d6aff;
  --accent3: #d45aff;
  --gradient: linear-gradient(135deg, #0a84ff 0%, #7d6aff 50%, #d45aff 100%);
  --border: rgba(255,255,255,0.08);
  --border-light: rgba(255,255,255,0.05);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 8px 32px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.2);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3);
  --green: #30d158;
  --orange: #ff9f0a;
  --red: #ff453a;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-font-smoothing:antialiased;scroll-behavior:smooth;scrollbar-width:none}
::-webkit-scrollbar{display:none}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;transition:background 0.5s,color 0.5s;cursor:default;overflow-x:hidden}
a{color:var(--accent);text-decoration:none}

/* ── Animated Orbs ── */
.orb{position:fixed;border-radius:50%;pointer-events:none;z-index:0;filter:blur(160px);opacity:0.4;animation:orbDrift 30s ease-in-out infinite}
.orb-1{width:700px;height:700px;background:radial-gradient(circle,#0071e3 0%,transparent 70%);top:-250px;right:-200px}
.orb-2{width:550px;height:550px;background:radial-gradient(circle,#bf5af2 0%,transparent 70%);bottom:-250px;left:-150px;animation-delay:-12s}
.orb-3{width:400px;height:400px;background:radial-gradient(circle,#5e5ce6 0%,transparent 70%);top:50%;left:50%;animation-delay:-22s;opacity:0.25}
@keyframes orbDrift{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(60px,-40px) scale(1.08)}50%{transform:translate(-30px,50px) scale(0.93)}75%{transform:translate(-50px,-20px) scale(1.04)}}

/* ── Glass Card ── */
.glass{background:var(--surface);backdrop-filter:blur(80px) saturate(180%);-webkit-backdrop-filter:blur(80px) saturate(180%);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:transform 0.5s cubic-bezier(0.16,1,0.3,1),box-shadow 0.5s cubic-bezier(0.16,1,0.3,1);position:relative;overflow:hidden}
.glass::before{content:'';position:absolute;top:-80px;left:-80%;width:260%;height:160px;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,0.03) 45%,rgba(255,255,255,0.08) 50%,rgba(255,255,255,0.03) 55%,transparent 60%);pointer-events:none;z-index:3;opacity:0;transition:opacity 0.4s}
.glass::after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,0.07),transparent 60%);pointer-events:none;opacity:0;transition:opacity 0.4s;z-index:2}
.glass:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.glass:hover::before,.glass:hover::after{opacity:1}

/* ── Navigation ── */
.nav{position:fixed;top:24px;right:28px;z-index:100;display:flex;gap:6px;align-items:center;background:var(--surface);backdrop-filter:blur(60px) saturate(180%);-webkit-backdrop-filter:blur(60px) saturate(180%);border:1px solid var(--border);border-radius:28px;padding:5px 6px;box-shadow:var(--shadow-sm)}
.nav-link{font-size:13px;color:var(--text-secondary);text-decoration:none;font-weight:600;padding:9px 16px;border-radius:22px;transition:all 0.3s cubic-bezier(0.16,1,0.3,1)}
.nav-link:hover,.nav-link.active{color:var(--accent);background:rgba(128,128,128,0.08)}
.nav-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:transparent;cursor:pointer;font-size:17px;display:flex;align-items:center;justify-content:center;color:var(--text);transition:all 0.3s cubic-bezier(0.16,1,0.3,1)}
.nav-btn:hover{background:rgba(128,128,128,0.08);transform:scale(1.1)}

/* ── Section Header ── */
.section-header{display:flex;align-items:center;gap:14px;margin-bottom:24px;margin-top:20px;padding:0 6px}
.section-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 16px rgba(0,113,227,0.5);animation:dotPulse 2s ease-in-out infinite}
@keyframes dotPulse{0%,100%{box-shadow:0 0 8px rgba(0,113,227,0.3)}50%{box-shadow:0 0 24px rgba(0,113,227,0.7)}}
.section-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:3px;color:var(--text-tertiary)}
.section-line{flex:1;height:1px;background:var(--border)}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 30px;border-radius:30px;text-decoration:none;font-size:14px;font-weight:600;letter-spacing:-0.2px;transition:all 0.35s cubic-bezier(0.16,1,0.3,1);border:none;cursor:pointer;font-family:var(--font)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 4px 24px rgba(0,113,227,0.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 36px rgba(0,113,227,0.45)}
.btn-ghost{background:rgba(128,128,128,0.06);color:var(--text);border:1px solid var(--border)}
.btn-ghost:hover{background:rgba(128,128,128,0.12);border-color:var(--accent);transform:translateY(-1px)}
.btn-sm{padding:8px 16px;font-size:12px}
.btn-xs{padding:4px 10px;font-size:11px}

/* ── Reveal Animation ── */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1),transform 0.8s cubic-bezier(0.16,1,0.3,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.r1{transition-delay:0.04s}.r2{transition-delay:0.1s}.r3{transition-delay:0.16s}.r4{transition-delay:0.22s}
.r5{transition-delay:0.28s}.r6{transition-delay:0.34s}.r7{transition-delay:0.40s}.r8{transition-delay:0.46s}

/* ── Responsive ── */
@media(max-width:768px){
  .nav{top:14px;right:12px;padding:4px 5px;gap:3px}
  .nav-link{font-size:11px;padding:7px 11px}
  .nav-btn{width:34px;height:34px;font-size:15px}
  .orb{opacity:0.25}
}
@media(max-width:480px){
  .nav{top:10px;right:4px;border-radius:22px;padding:3px 3px}
  .nav-link{font-size:10px;padding:6px 8px;border-radius:16px}
  .nav-btn{width:28px;height:28px;font-size:13px}
  .section-title{font-size:10px;letter-spacing:2px}
}