/**
 * Quelld Seasonal Planner — Module Styles
 */

#quelld-seasonal-root { max-width: 640px; margin: 0 auto; background: #FFFFFF; overflow-x: hidden; }

.qs-phase { padding: 24px 20px 32px; }
.qs-eyebrow { font-size: 11px; font-weight: 600; color: var(--quelld-purple, #954FE0); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 8px; }

/* Month header */
.qs-month-header { background: linear-gradient(135deg, var(--quelld-purple-light, #EDE5FF), var(--quelld-teal-light, #E5F6F6)); border-radius: 20px; padding: 24px; margin-bottom: 20px; text-align: center; }
.qs-month-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.qs-month-nav__btn { width: 40px !important; height: 40px !important; border-radius: 50% !important; border: none !important; background: rgba(255,255,255,0.6) !important; font-size: 18px !important; cursor: pointer !important; font-family: inherit !important; color: #2D2D3A !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.qs-month-name { font-size: 26px; font-weight: 700; color: #2D2D3A; }
.qs-month-season { font-size: 14px; color: #7A7A8A; margin-top: 2px; }
.qs-month-overview { font-size: 14px; color: #7A7A8A; line-height: 1.6; margin-top: 12px; }

/* Progress */
.qs-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 14px 18px; background: #F7F7FA; border-radius: 14px; }
.qs-progress__text { font-size: 14px; font-weight: 600; color: #2D2D3A; }
.qs-progress__bar { flex: 1; height: 6px; border-radius: 3px; background: #EAEAEF; overflow: hidden; }
.qs-progress__fill { height: 100%; border-radius: 3px; background: var(--quelld-teal, #4AE1E0); transition: width 0.3s; }

/* Category */
.qs-category { margin-bottom: 24px; }
.qs-category__header { font-size: 15px; font-weight: 600; color: #2D2D3A; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.qs-category__icon { font-size: 18px; }

/* Task card */
.qs-task { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; margin-bottom: 6px; border-radius: 12px; background: #F7F7FA; border: 1px solid transparent; cursor: pointer; transition: all 0.15s; }
.qs-task--done { background: var(--quelld-teal-light, #E5F6F6); border-color: rgba(74, 225, 224, 0.2); }
.qs-task__check { width: 24px; height: 24px; border-radius: 7px; border: 2px solid #EAEAEF; display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-size: 12px; font-weight: 700; flex-shrink: 0; margin-top: 1px; transition: all 0.2s; }
.qs-task__check--done { border-color: var(--quelld-teal, #4AE1E0); background: var(--quelld-teal, #4AE1E0); }
.qs-task__content { flex: 1; min-width: 0; }
.qs-task__name { font-size: 14px; font-weight: 500; color: #2D2D3A; line-height: 1.4; }
.qs-task--done .qs-task__name { text-decoration: line-through; color: #7A7A8A; }
.qs-task__meta { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.qs-task__time { font-size: 11px; color: #7A7A8A; }

/* Badges */
.qs-badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 5px; flex-shrink: 0; }
.qs-badge--high { background: #FDE8E8; color: #E04F4F; }
.qs-badge--medium { background: #FEF3EC; color: #E8834A; }
.qs-badge--low { background: #E6F4EA; color: #34A853; }
.qs-badge--pro { background: #FEF3EC; color: #E8834A; }
.qs-badge--diy { background: #E6F4EA; color: #34A853; }

/* Tip (expanded) */
.qs-task__tip { margin-top: 8px; padding: 10px 14px; background: var(--quelld-teal-light, #E5F6F6); border-radius: 10px; font-size: 13px; color: #2CB8B8; line-height: 1.5; display: flex; align-items: flex-start; gap: 8px; }

/* Pro CTA */
.qs-pro-cta { background: var(--quelld-purple-light, #EDE5FF); border-radius: 16px; padding: 18px 20px; text-align: center; margin-top: 24px; }
.qs-pro-cta__text { font-size: 14px; color: #7B3DC4; font-weight: 500; margin-bottom: 10px; }
.qs-pro-cta__btn { padding: 14px 24px !important; border-radius: 12px !important; border: none !important; background: var(--quelld-purple, #954FE0) !important; color: #FFFFFF !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important; font-family: inherit !important; }

/* Loading */
.qs-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; text-align: center; }
.qs-loading__icon { font-size: 48px; margin-bottom: 20px; animation: quelld-spin 2s linear infinite; }

@media (max-width: 480px) { .qs-phase { padding-top: 16px; } }