/**
 * Quelld Activity Creator — Module Styles
 */

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

.qa-phase { padding: 24px 20px 32px; }
.qa-eyebrow { font-size: 11px; font-weight: 600; color: var(--quelld-purple, #954FE0); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 8px; }
.qa-title { font-size: 24px; font-weight: 700; color: #2D2D3A; margin: 0 0 6px; line-height: 1.2; }
.qa-subtitle { font-size: 15px; color: #7A7A8A; margin: 0 0 24px; line-height: 1.5; }
.qa-back { cursor: pointer; font-size: 14px; color: var(--quelld-purple, #954FE0); font-weight: 500; padding: 14px 16px 14px 0; margin: 0 0 8px; display: inline-block; position: relative; z-index: 50; -webkit-user-select: none; user-select: none; }

.qa-field { margin-bottom: 24px; }
.qa-field__label { font-size: 14px; font-weight: 600; color: #2D2D3A; margin-bottom: 10px; }

/* Age stepper */
.qa-stepper { display: flex; align-items: center; gap: 16px; }
.qa-stepper__btn { width: 44px !important; height: 44px !important; border-radius: 12px !important; border: 1px solid #EAEAEF !important; background: #FFFFFF !important; font-size: 20px !important; cursor: pointer !important; font-family: inherit !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #3A3A4A !important; }
.qa-stepper__num { font-size: 28px; font-weight: 700; color: var(--quelld-purple, #954FE0); text-align: center; min-width: 60px; }
.qa-stepper__unit { font-size: 11px; color: #B0B0BE; text-align: center; }

/* Category chips */
.qa-cat-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.qa-cat-chip { padding: 10px 16px !important; border-radius: 12px !important; border: 1px solid #EAEAEF !important; background: #FFFFFF !important; color: #3A3A4A !important; font-size: 13px !important; font-weight: 400 !important; cursor: pointer !important; font-family: inherit !important; display: flex !important; align-items: center !important; gap: 6px !important; }
.qa-cat-chip--active { border: 2px solid var(--quelld-purple, #954FE0) !important; background: var(--quelld-purple-light, #EDE5FF) !important; color: var(--quelld-purple, #954FE0) !important; font-weight: 600 !important; }

/* Setting toggle */
.qa-setting-row { display: flex; gap: 8px; }
.qa-setting-btn { flex: 1 !important; padding: 12px !important; border-radius: 12px !important; border: 1px solid #EAEAEF !important; background: #FFFFFF !important; color: #3A3A4A !important; font-size: 14px !important; font-weight: 500 !important; cursor: pointer !important; font-family: inherit !important; text-align: center !important; }
.qa-setting-btn--active { border: 2px solid var(--quelld-purple, #954FE0) !important; background: var(--quelld-purple-light, #EDE5FF) !important; color: var(--quelld-purple, #954FE0) !important; font-weight: 600 !important; }

/* Time toggle */
.qa-time-row { display: flex; gap: 6px; flex-wrap: wrap; }
.qa-time-btn { padding: 10px 16px !important; border-radius: 10px !important; border: 1px solid #EAEAEF !important; background: #FFFFFF !important; color: #3A3A4A !important; font-size: 13px !important; cursor: pointer !important; font-family: inherit !important; }
.qa-time-btn--active { border: 2px solid var(--quelld-purple, #954FE0) !important; background: var(--quelld-purple-light, #EDE5FF) !important; color: var(--quelld-purple, #954FE0) !important; font-weight: 600 !important; }

/* Loading */
.qa-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; text-align: center; }

/* Results */
.qa-results-summary { background: linear-gradient(135deg, var(--quelld-purple-light, #EDE5FF), var(--quelld-teal-light, #E5F6F6)); border-radius: 20px; padding: 20px; margin-bottom: 20px; text-align: center; }
.qa-results-summary__text { font-size: 15px; font-weight: 500; color: #2D2D3A; line-height: 1.5; }

/* Activity card */
.qa-activity-card { margin-bottom: 10px; border-radius: 16px; border: 1px solid #EAEAEF; background: #FFFFFF; overflow: hidden; transition: border-color 0.2s; }
.qa-activity-card--expanded { border-color: rgba(149,79,224,0.25); }

.qa-activity-card__header { width: 100% !important; padding: 16px 18px !important; border: none !important; background: none !important; cursor: pointer !important; font-family: inherit !important; display: flex !important; align-items: center !important; gap: 14px !important; text-align: left !important; }
.qa-activity-card__icon { font-size: 28px; flex-shrink: 0; }
.qa-activity-card__title { font-size: 15px; font-weight: 600; color: #2D2D3A; line-height: 1.3; }
.qa-activity-card__meta { display: flex; gap: 8px; margin-top: 4px; font-size: 12px; color: #7A7A8A; flex-wrap: wrap; }
.qa-activity-card__arrow { font-size: 14px; color: #B0B0BE; transition: transform 0.2s; flex-shrink: 0; }
.qa-activity-card__arrow--open { transform: rotate(180deg); }

/* Badge */
.qa-badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 5px; }
.qa-badge--indoor { background: #EBF3FC; color: #4A90D9; }
.qa-badge--outdoor { background: #E6F4EA; color: #34A853; }
.qa-badge--either { background: #F7F7FA; color: #7A7A8A; }

/* Expanded detail */
.qa-activity-detail { padding: 0 18px 16px; border-top: 1px solid #EAEAEF; }
.qa-activity-detail__desc { font-size: 14px; color: #7A7A8A; line-height: 1.6; margin: 12px 0; }
.qa-activity-detail__section { margin-bottom: 14px; }
.qa-activity-detail__section-title { font-size: 12px; font-weight: 600; color: #2D2D3A; margin-bottom: 6px; }
.qa-activity-detail__item { font-size: 13px; color: #3A3A4A; padding: 4px 0; padding-left: 16px; position: relative; line-height: 1.5; }
.qa-activity-detail__item::before { content: "•"; position: absolute; left: 0; color: var(--quelld-teal, #4AE1E0); font-weight: 700; }
.qa-activity-detail__step { font-size: 13px; color: #3A3A4A; padding: 6px 0 6px 28px; position: relative; line-height: 1.5; }
.qa-activity-detail__step-num { position: absolute; left: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--quelld-purple-light, #EDE5FF); color: var(--quelld-purple, #954FE0); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; top: 5px; }
.qa-activity-detail__learning { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; background: var(--quelld-teal-light, #E5F6F6); border-radius: 10px; font-size: 13px; color: #2CB8B8; line-height: 1.5; margin-bottom: 4px; }
.qa-activity-detail__tip { margin-top: 10px; padding: 10px 14px; background: #FEF3EC; border-radius: 10px; font-size: 13px; color: #E8834A; line-height: 1.5; display: flex; align-items: flex-start; gap: 8px; }

.qa-regen-btn { width: 100% !important; padding: 14px !important; border-radius: 14px !important; border: 1px dashed #EAEAEF !important; background: none !important; color: #7A7A8A !important; font-size: 14px !important; font-weight: 500 !important; cursor: pointer !important; font-family: inherit !important; margin-top: 8px !important; }

@media (max-width: 480px) {
    .qa-phase { padding-top: 16px; }
    #quelld-activities-root input { font-size: 16px !important; }
}