:root{--bg-top: #f0f7ff;--bg-bottom: #fff7ef;--card: #ffffff;--text: #1f2a37;--muted: #5f6b7a;--accent: #1f6feb;--accent-2: #ef6c00;--border: #d9e2ec}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Microsoft YaHei,PingFang SC,sans-serif;color:var(--text);background:linear-gradient(160deg,var(--bg-top),var(--bg-bottom));min-height:100vh}.app{width:min(860px,92vw);margin:28px auto 40px}.hero{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}.hero h1{font-size:clamp(1.5rem,3vw,2rem)}.hero-centered{justify-content:center}.hero-centered h1{text-align:center}.user-info{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.9rem}.btn-logout{border:1px solid var(--border);background:transparent;color:var(--muted);padding:4px 12px;border-radius:8px;cursor:pointer;font-size:.85rem}.btn-logout:hover{background:#f3f4f6}.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px;margin-top:16px;box-shadow:0 8px 24px #1f2a370f}.btn{border:none;border-radius:10px;padding:10px 16px;font-size:.95rem;cursor:pointer;color:#fff;background:var(--accent)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:#6b7280}@media (max-width: 640px){.card{padding:16px}}