@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap');
:root, [data-theme="dark"] {
    --bg-page: #17171A; --bg-card: #232324; --border: rgba(255,255,255,0.06);
    --text-1: rgba(255,255,255,0.9); --text-2: rgba(255,255,255,0.55); --text-3: rgba(255,255,255,0.35); --text-4: rgba(255,255,255,0.15);
    --glow-1: rgba(22,93,255,0.06); --glow-2: rgba(114,46,209,0.04);
    --grid-color: rgba(22,93,255,0.03);
    --shadow: 0 16px 24px rgba(0,0,0,0.14), 0 6px 30px rgba(0,0,0,0.12), 0 8px 10px rgba(0,0,0,0.2);
}
[data-theme="light"] {
    --bg-page: #F5F6F7; --bg-card: #FFFFFF; --border: rgba(0,0,0,0.08);
    --text-1: rgba(0,0,0,0.88); --text-2: rgba(0,0,0,0.45); --text-3: rgba(0,0,0,0.25); --text-4: rgba(0,0,0,0.08);
    --glow-1: rgba(22,93,255,0.04); --glow-2: rgba(114,46,209,0.03);
    --grid-color: rgba(22,93,255,0.02);
    --shadow: 0 8px 10px rgba(0,0,0,0.04), 0 3px 14px rgba(0,0,0,0.03), 0 5px 5px rgba(0,0,0,0.04);
}
* { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif; margin:0; padding:0; box-sizing:border-box; }
body { background: var(--bg-page); min-height: 100vh; display: flex; align-items: center; justify-content: center; transition: background 0.3s; }
.bg-grid {
    background-image: linear-gradient(var(--grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
    background-size: 48px 48px;
}
.glow-1 { position:fixed; top:20%; left:30%; width:400px; height:400px; background:radial-gradient(circle, var(--glow-1) 0%, transparent 70%); pointer-events:none; }
.glow-2 { position:fixed; bottom:20%; right:25%; width:350px; height:350px; background:radial-gradient(circle, var(--glow-2) 0%, transparent 70%); pointer-events:none; }
.login-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); transition: background 0.3s, border-color 0.3s; }
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
.float-anim { animation: float 5s ease-in-out infinite; }
.theme-btn {
    position: fixed; top: 20px; right: 20px; z-index: 50;
    width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    background: var(--bg-card); border: 1px solid var(--border); cursor: pointer; color: var(--text-2); transition: all 0.2s;
}
.theme-btn:hover { color: var(--text-1); border-color: rgba(22,93,255,0.3); }
[data-theme="dark"] .theme-btn .icon-sun { display:none; }
[data-theme="light"] .theme-btn .icon-moon { display:none; }