/* ── Wrap & Hook ────────────────────────────────────────────────────────────── */
.pthmood-wrap { max-width: 640px; margin: 0 auto; font-family: inherit; }
.pthmood-hook { text-align: center; padding: 32px 16px 24px; }
.pthmood-hook__brain { font-size: 48px; display: block; margin-bottom: 8px; }
.pthmood-hook__title { font-size: 24px; font-weight: 700; margin: 0; color: #1a1a2e; }

/* ── Progress bar ───────────────────────────────────────────────────────────── */
.pthmood-progress { height: 5px; background: #f3f4f6; border-radius: 4px; margin-bottom: 24px; overflow: hidden; }
.pthmood-progress__bar { height: 100%; background: linear-gradient(90deg,#6366f1,#8b5cf6); border-radius: 4px; transition: width .35s ease; width: 0%; }

/* ── Questions ──────────────────────────────────────────────────────────────── */
.pthmood-q { background: #fff; border: 2px solid #e5e7eb; border-radius: 14px; padding: 24px; margin-bottom: 18px; transition: border-color .2s; }
.pthmood-q__label { font-size: 17px; font-weight: 600; margin: 0 0 4px; color: #1a1a2e; }
.pthmood-q__hint  { font-size: 13px; color: #6b7280; margin: 0 0 14px; }
.pthmood-optional { font-size: 13px; font-weight: 400; color: #9ca3af; }
.pthmood-q--sticky { border-color: #e0d9fc; background: #f9f8ff; }

/* ── Emoji grid ─────────────────────────────────────────────────────────────── */
.pthmood-emoji-grid { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.pthmood-emoji-option {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 14px 10px; border: 2px solid #e5e7eb; border-radius: 12px;
    cursor: pointer; flex: 1; min-width: 80px;
    transition: border-color .15s, background .15s;
    user-select: none;
}
.pthmood-emoji-option input { display: none; }
.pthmood-emoji-option__icon  { font-size: 28px; line-height: 1; }
.pthmood-emoji-option__label { font-size: 13px; font-weight: 500; color: #374151; }
.pthmood-emoji-option.selected { border-color: #6366f1; background: #eef2ff; }
.pthmood-emoji-option.selected .pthmood-emoji-option__label { color: #4338ca; }

/* ── Choice list ────────────────────────────────────────────────────────────── */
.pthmood-choice-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.pthmood-choice-list--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pthmood-choice {
    display: flex; align-items: center; gap: 12px; padding: 13px 16px;
    border: 2px solid #e5e7eb; border-radius: 10px; cursor: pointer;
    transition: border-color .15s, background .15s; font-size: 15px;
    user-select: none;
}
.pthmood-choice input { display: none; }
.pthmood-choice__icon { font-size: 20px; }
.pthmood-choice.selected { border-color: #6366f1; background: #eef2ff; color: #4338ca; font-weight: 500; }

/* ── Pill grid (emotions, trigger, need) ────────────────────────────────────── */
.pthmood-pill-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.pthmood-pill {
    padding: 9px 18px; border: 2px solid #e5e7eb; border-radius: 999px;
    cursor: pointer; font-size: 14px; font-weight: 500;
    transition: border-color .15s, background .15s, color .15s; color: #374151;
    user-select: none;
}
.pthmood-pill input { display: none; }
.pthmood-pill.selected { border-color: #6366f1; background: #6366f1; color: #fff; }
.pthmood-pill.pthmood-pill--maxed { opacity: .4; cursor: not-allowed; }

/* ── Stress scale ───────────────────────────────────────────────────────────── */
.pthmood-stress-scale { display: flex; gap: 0; margin-top: 16px; border-radius: 10px; overflow: hidden; border: 2px solid #e5e7eb; }
.pthmood-stress-option { flex: 1; text-align: center; padding: 12px 4px; cursor: pointer; font-size: 13px; font-weight: 500; transition: background .15s; border-right: 1px solid #e5e7eb; user-select: none; }
.pthmood-stress-option:last-child { border-right: none; }
.pthmood-stress-option input { display: none; }
.pthmood-stress-option[data-level="none"]     { color: #10b981; }
.pthmood-stress-option[data-level="mild"]     { color: #84cc16; }
.pthmood-stress-option[data-level="moderate"] { color: #f59e0b; }
.pthmood-stress-option[data-level="high"]     { color: #f97316; }
.pthmood-stress-option[data-level="extreme"]  { color: #ef4444; }
.pthmood-stress-option.selected { background: #1a1a2e; color: #fff !important; }

/* ── Text input ─────────────────────────────────────────────────────────────── */
.pthmood-text-input { width: 100%; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 10px; font-size: 16px; margin-top: 14px; box-sizing: border-box; outline: none; transition: border-color .15s; }
.pthmood-text-input:focus { border-color: #6366f1; }

/* ── Submit ─────────────────────────────────────────────────────────────────── */
.pthmood-submit-wrap { text-align: center; padding: 20px 0 8px; }
.pthmood-submit-btn { background: #6366f1; color: #fff; border: none; padding: 16px 40px; border-radius: 14px; font-size: 17px; font-weight: 700; cursor: pointer; transition: opacity .15s, transform .1s; }
.pthmood-submit-btn:hover { opacity: .9; transform: translateY(-1px); }
.pthmood-submit-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.pthmood-submit-error { color: #ef4444; text-align: center; margin-top: 12px; font-size: 14px; }

/* ── Result card ────────────────────────────────────────────────────────────── */
.pthmood-result-card { background: #fff; border-radius: 16px; border: 1px solid #e5e7eb; overflow: hidden; }
.pthmood-result-header { display: flex; gap: 20px; align-items: flex-start; padding: 24px; }
.pthmood-score-ring { width: 90px; height: 90px; border-radius: 50%; border: 5px solid var(--ring-color,#6366f1); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
.pthmood-score-ring__value { font-size: 26px; font-weight: 800; line-height: 1; color: #1a1a2e; }
.pthmood-score-ring__label { font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .5px; }
.pthmood-result-date { font-size: 13px; color: #9ca3af; margin: 0 0 8px; }
.pthmood-emotion-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pthmood-emotion-tag { background: #eef2ff; color: #4338ca; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; }
.pthmood-reflection { font-style: italic; color: #6b7280; margin: 4px 0 0; font-size: 14px; }
.pthmood-radar-wrap { padding: 0 24px 16px; max-height: 320px; }
.pthmood-trend-bar { display: flex; align-items: center; gap: 12px; padding: 12px 24px; border-top: 1px solid #f3f4f6; }
.pthmood-trend-label { font-size: 13px; color: #9ca3af; }
.pthmood-trend-delta { font-size: 16px; font-weight: 700; }
.pthmood-trend-delta--up   { color: #10b981; }
.pthmood-trend-delta--down { color: #ef4444; }
.pthmood-trend-delta--same { color: #9ca3af; }

/* ── Recommendations on result card ─────────────────────────────────────────── */
.pthmood-recs-section { padding: 20px 24px; border-top: 1px solid #f3f4f6; }
.pthmood-recs-section__heading { font-size: 16px; font-weight: 700; margin: 0 0 14px; color: #1a1a2e; }
.pthmood-rec-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.pthmood-rec-item { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 14px 16px; }
.pthmood-rec-item__title { display: block; font-size: 14px; font-weight: 700; color: #166534; margin-bottom: 4px; }
.pthmood-rec-item__text { margin: 0; font-size: 14px; color: #166534; line-height: 1.5; }

/* ── Paywall ────────────────────────────────────────────────────────────────── */
.pthmood-paywall { background: #f9f8ff; border-top: 1px solid #e5e7eb; padding: 24px; }
.pthmood-paywall__inner { text-align: center; }
.pthmood-paywall__title { font-size: 17px; font-weight: 700; margin: 0 0 12px; }
.pthmood-paywall__list { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pthmood-paywall__list li::before { content: "✓ "; color: #6366f1; font-weight: 700; }
.pthmood-paywall__list li { font-size: 14px; color: #374151; }
.pthmood-paywall__btn { display: inline-block; background: #6366f1; color: #fff; padding: 12px 32px; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 15px; }

/* ── Paid insights ──────────────────────────────────────────────────────────── */
.pthmood-insights { padding: 24px; border-top: 1px solid #e5e7eb; }
.pthmood-insights__heading { font-size: 18px; font-weight: 700; margin: 0 0 20px; }
.pthmood-risk-meters { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.pthmood-risk-meter__label { font-size: 13px; font-weight: 600; color: #374151; display: block; margin-bottom: 6px; }
.pthmood-risk-bar { height: 10px; background: #f3f4f6; border-radius: 999px; overflow: hidden; margin-bottom: 4px; }
.pthmood-risk-bar__fill { height: 100%; border-radius: 999px; transition: width .8s ease; }
.pthmood-risk-meter__value { font-size: 13px; color: #6b7280; }
.pthmood-trend-chart-wrap, .pthmood-emotion-chart-wrap { margin-bottom: 24px; }

@media(max-width:520px) {
    .pthmood-emoji-grid { gap: 6px; }
    .pthmood-emoji-option { min-width: 60px; padding: 10px 6px; }
    .pthmood-choice-list--2col { grid-template-columns: 1fr; }
    .pthmood-risk-meters { grid-template-columns: 1fr; }
}

/* ── Two-column chart row ────────────────────────────────────────────────────── */
.pthmood-charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid #f3f4f6; }
.pthmood-chart-panel { padding: 20px 24px; }
.pthmood-chart-panel + .pthmood-chart-panel { border-left: 1px solid #f3f4f6; }
.pthmood-chart-title { font-size: 14px; font-weight: 700; margin: 0 0 2px; color: #1a1a2e; }
.pthmood-chart-sub   { font-size: 12px; color: #9ca3af; margin: 0 0 12px; }
.pthmood-radar-wrap  { max-height: 240px; }

/* ── Comparison chart ────────────────────────────────────────────────────────── */
.pthmood-comparison-wrap { padding: 20px 24px; border-top: 1px solid #f3f4f6; }
.pthmood-comparison-loading { color: #9ca3af; font-size: 13px; padding: 20px 0; text-align: center; }
.pthmood-comparison-chart-wrap { position: relative; }
.pthmood-comparison-note { font-size: 13px; color: #9ca3af; text-align: center; padding: 16px 0; margin: 0; }

@media (max-width: 600px) {
    .pthmood-charts-row { grid-template-columns: 1fr; }
    .pthmood-chart-panel + .pthmood-chart-panel { border-left: none; border-top: 1px solid #f3f4f6; }
}