.time-card{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:24px;border-radius:12px;text-align:center;margin-bottom:12px;cursor:pointer;transition:all 0.3s}
.time-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(102,126,234,0.3)}
.time-display{font-size:48px;font-weight:700;margin:12px 0;font-family:monospace}
.time-label{font-size:14px;opacity:0.9;margin-bottom:8px}
.time-detail{background:rgba(255,255,255,0.15);padding:12px;border-radius:8px;margin-top:12px;font-size:13px}
.cycle-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:12px}
.cycle-item{background:#f7fafc;padding:16px;border-radius:8px;text-align:center;border:2px solid transparent;transition:all 0.2s}
.cycle-item:hover{border-color:#667eea;transform:scale(1.05)}
.cycle-time{font-size:24px;font-weight:700;color:#667eea;margin-bottom:4px}
.cycle-label{font-size:12px;color:#718096}
.quality-card{background:#f7fafc;padding:16px;border-radius:8px;margin-top:12px}
.quality-title{font-weight:600;margin-bottom:8px;color:#667eea}
.quality-content{line-height:1.8;color:#4a5568;font-size:14px}
.progress-bar{height:24px;background:#e2e8f0;border-radius:999px;overflow:hidden;margin-top:8px}
.progress-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:600;transition:width 0.5s ease}
.quick-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.quick-tag{padding:6px 12px;background:#edf2f7;border-radius:6px;cursor:pointer;font-size:13px;transition:all 0.2s}
.quick-tag:hover{background:#667eea;color:#fff}
.icon-moon{font-size:64px;margin:16px 0}