*{box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;margin:0;background:#f7fafb;color:#333}
.container{max-width:1000px;margin:0 auto;padding:20px}
.header-section{text-align:center;margin-bottom:24px}
.avatar{width:120px;height:120px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.main-title{font-size:28px;font-weight:700;margin:12px 0}
.progress-section{background:#fff;border-radius:12px;padding:16px;box-shadow:0 6px 18px rgba(0,0,0,.08);margin-bottom:20px}
.progress-info{text-align:center;color:#666;margin-bottom:10px}
.progress-bar{height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,#1e6bb8,#34d399)}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.day-card{background:#fff;border-radius:12px;padding:16px;box-shadow:0 6px 18px rgba(0,0,0,.08);text-align:center}
.day-card.completed{opacity:.9}
.day-number-en{font-size:12px;letter-spacing:2px;color:#999;text-transform:uppercase}
.day-number-cn{font-size:18px;font-weight:700;margin:8px 0 14px 0}
.learn-button{background:#1e6bb8;color:#fff;border:none;border-radius:999px;padding:10px 18px;cursor:pointer}
.learn-button:hover{background:#155e99}
.learn-button.disabled{background:#a0aec0;cursor:not-allowed}
@media(max-width:480px){.avatar{width:90px;height:90px}.main-title{font-size:22px}}