.recommendation-layout { display: grid; gap: 18px; }
.recommendation-card { padding: 22px; }
.recommendation-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.recommendation-head h2 { font-size: 17px; margin: 0; }
.recommendation-head p { margin: 7px 0 0; color: var(--muted); line-height: 1.6; }
.recommendation-meta { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-top: 12px; color: var(--muted); font-size: 12px; }
.status-pill { background: #f2f5f8; border-radius: 999px; padding: 4px 9px; }
.status-pill.fresh { background: #eaf8f2; color: #12815b; }
.status-pill.expired { background: #fff5e6; color: #a56509; }
.recommendation-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.goal-select, .track-editor, .ai-input { border: 1px solid #cfd7e2; border-radius: 6px; background: #fff; padding: 9px 10px; color: var(--ink); font: inherit; }
.goal-select { min-width: 130px; }
.recommendation-sync-status { margin-top: 18px; }
.recommendation-sync-summary { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--muted); font-size: 12px; }
.recommendation-sync-summary b { color: #344054; font-size: 13px; }
.recommendation-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.progress-step { display: flex; align-items: center; gap: 8px; background: #f5f7fa; border-radius: 7px; padding: 12px; color: var(--muted); font-size: 12px; }
.progress-step i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #c7ced8; }
.progress-step.active { background: #edf5ff; color: var(--blue); font-weight: 600; }
.progress-step.active i { background: var(--blue); box-shadow: 0 0 0 4px rgba(22,119,255,.1); animation: recommendation-pulse 1.2s ease infinite; }
.progress-step.complete { background: #edf8f3; color: #14805b; font-weight: 600; }
.progress-step.complete i { background: #20a474; }
.progress-step.error { background: #fff1f1; color: #b13b3b; font-weight: 600; }
.progress-step.error i { background: var(--danger); }
@keyframes recommendation-pulse { 50% { box-shadow: 0 0 0 7px rgba(22,119,255,.03); } }
.recommendation-error { margin-top: 14px; padding: 10px 12px; border-radius: 7px; background: #fff1f1; color: #b13b3b; }

.recommendation-table { min-width: 1120px; table-layout: fixed; }
.recommendation-table .rank-column { width: 52px; }
.recommendation-table .title-column { width: 330px; }
.recommendation-table .source-column { width: 92px; }
.recommendation-table .metric-column { width: 78px; }
.recommendation-table .score-column { width: 84px; }
.recommendation-table .reason-column { width: auto; }
.recommendation-table th, .recommendation-table td { vertical-align: middle; }
.recommendation-table th { white-space: normal; word-break: keep-all; }
.recommendation-table th:nth-child(1),
.recommendation-table td:nth-child(1),
.recommendation-table th:nth-child(n+4):nth-child(-n+7),
.recommendation-table td:nth-child(n+4):nth-child(-n+7) { text-align: center; white-space: nowrap; }
.recommendation-table .question-cell { max-width: none; overflow: hidden; }
.recommendation-title-link { display: -webkit-box; min-width: 0; white-space: normal; overflow: hidden; word-break: break-word; overflow-wrap: anywhere; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.recommendation-table .reason-cell { min-width: 0; color: #566274; line-height: 1.55; white-space: normal; word-break: break-word; overflow-wrap: anywhere; }
.source-tags { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.source-tag { font-size: 11px; background: #eef5ff; color: #3179d7; padding: 2px 5px; border-radius: 4px; white-space: nowrap; }
.score { font-weight: 700; color: var(--blue); }

.consent-list { color: #5d6878; line-height: 1.8; margin: 14px 0 20px; }
.track-definition { font-size: 15px; color: #344054 !important; white-space: pre-wrap; }
.track-editor { width: 100%; min-height: 110px; resize: vertical; margin-top: 14px; }
.ai-provider-card { padding: 22px; }
.ai-provider-list { display: grid; gap: 10px; }
.ai-provider-row { display: grid; grid-template-columns: 32px 160px minmax(180px, 1fr) minmax(180px, 1fr) auto; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.provider-name { display: flex; align-items: center; gap: 9px; font-weight: 600; }
.provider-name img { width: 24px; height: 24px; object-fit: contain; }
.ai-input { width: 100%; min-width: 0; }
.provider-status { display: block; color: var(--muted); font-size: 11px; font-weight: 400; margin-top: 3px; }
.provider-status.success { color: var(--green); }
.provider-status.failed { color: var(--danger); }
.provider-buttons { display: flex; gap: 6px; }
.ai-balance-button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 140px; width: 140px; min-width: 140px; max-width: 140px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-decoration: none; }
.ai-balance-status.loading { color: var(--muted); }
.ai-balance-status.update_failed { color: var(--danger); border-color: #f2c4c4; }

@media (max-width: 900px) {
  .ai-provider-row { grid-template-columns: 28px 1fr; }
  .ai-provider-row .ai-input, .provider-buttons { grid-column: 2; }
  .recommendation-head { display: block; }
  .recommendation-actions { margin-top: 14px; }
  .recommendation-progress { grid-template-columns: 1fr; }
}