/* One screen per purpose; lists use pages instead of a long stacked modal. */
#stats-backdrop { padding: 12px; }
#stats-backdrop .stats-metric:last-child { grid-column: auto; }
.progress-heading { flex: none; }
.progress-analysis-tabs { display: none; }
#stats-backdrop .stats-history { gap: 0; }
.progress-history-row { flex-shrink: 0; }
#stats-backdrop .stats-modal { width: min(850px, calc(100vw - 24px)); max-width: 850px; height: min(670px, calc(100dvh - var(--toast-space, 0px) - 24px)); max-height: calc(100dvh - var(--toast-space, 0px) - 24px); padding: 24px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; text-align: left; color: #294d3d; }
.progress-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding-right: 30px; }
.progress-eyebrow { display: block; font: 700 9px 'DM Sans', sans-serif; letter-spacing: 1.1px; color: #837347; }
#stats-title { margin: 4px 0 0; font-size: 30px; line-height: 1.1; }
#progress-lifetime { max-width: 160px; font-size: 11px; line-height: 1.4; text-align: right; color: #71816f; }
.progress-tabs { display: flex; flex: none; padding: 4px; gap: 4px; background: #eeeee3; border-radius: 10px; }
.progress-tabs button { flex: 1; min-height: 36px; border: 0; border-radius: 7px; background: transparent; color: #536753; font: 600 12px 'DM Sans', sans-serif; cursor: pointer; }
.progress-tabs button[aria-pressed="true"] { color: #fff; background: #244f3d; box-shadow: 0 2px 6px #244f3d19; }
.progress-filters { display: grid; grid-template-columns: 1.25fr 1fr 1.15fr; gap: 10px; flex: none; }
.progress-filters label { display: grid; gap: 4px; min-width: 0; font-size: 10px; color: #687861; }
.progress-filters select, .progress-breakdown select { min-width: 0; max-width: 100%; min-height: 34px; padding: 5px 7px; border: 1px solid #d9dfce; border-radius: 7px; color: #355743; background: #fffefa; font: 11px 'DM Sans', sans-serif; }
.progress-content { flex: 1; min-height: 0; display: flex; }
.progress-bilan, .progress-history-panel { display: flex; flex-direction: column; min-height: 0; width: 100%; gap: 10px; }
.progress-scope, .progress-data-note { margin: 0; color: #72816b; font-size: 10px; line-height: 1.4; }
#stats-backdrop .stats-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 0; flex: none; }
#stats-backdrop .stats-metric { padding: 12px 10px; border-radius: 9px; background: #f2f4eb; border: 1px solid #e1e5d7; }
#stats-backdrop .stats-metric span { font-size: 11px; color: #51694e; }
#stats-backdrop .stats-metric strong { margin: 5px 0; font: 600 25px 'Playfair Display',serif; color: #274f3b; }
#stats-backdrop .stats-metric small { display: block; font-size: 9px; line-height: 1.3; color: #78846f; }
.progress-analysis { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; flex: 1; min-height: 0; align-items: start; }
.progress-breakdown { min-width: 0; }
.progress-breakdown > label { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 7px; align-items: center; font-size: 11px; font-weight: 600; margin-bottom: 10px; }
.progress-breakdown table { width: 100%; border-collapse: collapse; font-size: 12px; }
.progress-breakdown th, .progress-breakdown td { border-bottom: 1px solid #e7e8da; padding: 10px 4px; text-align: right; }
.progress-breakdown th:first-child { text-align: left; }
.progress-breakdown thead th { color: #89917d; font-weight: 500; font-size: 10px; padding-top: 4px; }
.progress-observation { border: 1px solid #e1d9c2; border-radius: 9px; padding: 12px; background: #f7f3e8; min-width: 0; }
.progress-observation > strong { display: block; font-size: 13px; margin-top: 12px; }
.progress-observation p { margin: 6px 0 9px; font-size: 11px; line-height: 1.45; color: #75806b; }
#progress-recent > span, #progress-recent > small { display: block; font-size: 9px; line-height: 1.4; color: #75806b; }
.progress-result-strip { display: flex; gap: 4px; margin: 7px 0; }
.progress-result-strip > span { display: grid; place-items: center; border-radius: 4px; width: 22px; height: 23px; font-size: 10px; font-weight: 700; }
.progress-result-strip .is-win { background: #dcebdc; color: #286044; }
.progress-result-strip .is-loss { background: #f1e2d8; color: #9b5d43; }
.progress-button, #progress-insight-action, .progress-achievement button, .progress-pages button { cursor: pointer; border: 1px solid #cdd8c5; background: #f7faf2; color: #3b6144; border-radius: 7px; font: 600 11px 'DM Sans',sans-serif; min-height: 32px; padding: 6px 10px; }
.progress-button { background: #2d563f; color: white; border-color: #2d563f; }
.progress-link { padding: 5px 0; border: 0; color: #63754f; background: transparent; cursor: pointer; font: 600 11px 'DM Sans',sans-serif; text-decoration: underline; text-underline-offset: 3px; }
.progress-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid #e7e8da; padding-top: 8px; flex: none; }
#stats-backdrop .stats-privacy { margin: 0; font-size: 9px; color: #829078; line-height: 1.4; }
#stats-reset { flex: none; padding: 4px; font-size: 9px; }
#stats-backdrop .stats-history { display: flex; flex: 1; flex-direction: column; min-height: 0; max-height: none; overflow: hidden; }
.progress-history-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 68px; padding: 9px 0; box-sizing: border-box; border-bottom: 1px solid #e7e8da; font-size: 12px; }
.progress-history-row > div:first-child { min-width: 0; }
.progress-history-row strong, .progress-history-row span, .progress-history-row small { display: block; }
.progress-history-row span { font-size: 10px; margin-top: 4px; }
.progress-history-row small { font-size: 9px; color: #8b947d; margin-top: 3px; }
.progress-history-row > div:last-child { text-align: right; flex: none; }
.progress-history-row .is-win { color: #397553; }.progress-history-row .is-loss { color: #a45e48; }
.progress-pages { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 11px; flex: none; }
.progress-pages button:disabled, .progress-theme:disabled { opacity: .55; cursor: default; }
.progress-empty { color: #869179; font-size: 13px; text-align: center; margin: auto; }
#stats-backdrop .loyalty-detail { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; margin: 0; }
.progress-level { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.progress-level strong { font-size: 16px; }.progress-level span { font-size: 10px; color: #7d8a70; }
.progress-purpose { margin: 0; color: #73836b; font-size: 11px; line-height: 1.5; }
.progress-goal-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1; min-height: 0; }
.progress-goal-card { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 20px; border: 1px solid #dce2cf; border-radius: 12px; background: #f4f6ed; min-width: 0; }
.progress-next-reward { background: #f7f0df; border-color: #e4d9bc; }
.progress-goal-card h3 { margin: 0; font: 600 24px 'Playfair Display',serif; }.progress-goal-card p { margin: 0; color: #73836b; font-size: 12px; line-height: 1.5; }.progress-goal-card > strong { font-size: 12px; }
.progress-goal-card progress { width: 100%; height: 8px; border: 0; border-radius: 4px; overflow: hidden; accent-color: #60844c; background: #e2e5d6; }
.progress-goal-card progress::-webkit-progress-bar { background: #e2e5d6; }.progress-goal-card progress::-webkit-progress-value { background: #60844c; }
.progress-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.progress-theme-preview { flex: none; display: grid; place-items: center; width: 66px; height: 48px; border-radius: 50%; color: var(--preview-accent); border: 3px solid var(--preview-accent); background: var(--preview-color); box-shadow: 0 3px 8px #1d382025; }
.progress-reward-heading { display: flex; gap: 12px; align-items: center; }
.progress-daily-line { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11px; }
.progress-collection-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex: none; }
.progress-collection-heading h3 { font-size: 16px; margin: 0; }
.progress-collection-list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.progress-achievement { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; box-sizing: border-box; min-height: 100px; border: 1px solid #e2e5d4; border-radius: 9px; background: #f6f7f0; }
.progress-achievement > div { display: grid; gap: 6px; min-width: 0; }.progress-achievement strong { font-size: 14px; }.progress-achievement span { font-size: 12px; color: #728169; }.progress-achievement small { font-size: 10px; color: #8a784b; }.progress-achievement button { max-width: 100px; flex: none; }
.progress-achievement button[aria-pressed="true"] { background: #e5eedb; border-color: #9cb68e; }
.progress-theme-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: 1fr 1fr; gap: 12px; }
.progress-theme { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 1px solid #dce2cf; border-radius: 10px; background: #f7f7ef; color: #35533d; cursor: pointer; min-height: 0; padding: 10px; }
.progress-theme[aria-pressed="true"] { border: 2px solid #537747; background: #eaf1e2; }.progress-theme small { font-size: 10px; }
.progress-xp-explanation { display: flex; flex-direction: column; justify-content: space-evenly; flex: 1; min-height: 0; gap: 10px; color: #5e7358; font-size: 13px; line-height: 1.5; }.progress-xp-explanation p { margin: 0; }.progress-xp-explanation small { font-size: 11px; }.progress-missions { padding: 10px; background: #f0f3e7; border-radius: 8px; }.progress-missions p + p { margin-top: 6px; }
#stats-backdrop :is(button,select):focus-visible { outline: 2px solid #aa8645; outline-offset: 2px; }
@media (max-width: 580px) {
  #stats-backdrop .stats-modal { height: calc(100dvh - var(--toast-space, 0px) - var(--waiting-space, 0px) - 24px); }
  .progress-heading { display: block; }#progress-lifetime { display: block; max-width: none !important; text-align: left; margin-top: 4px; }
  #stats-backdrop .stats-modal { padding: 16px; gap: 8px; }
  .progress-eyebrow { font-size: 7px; }#stats-title { font-size: 24px; }#progress-lifetime { max-width: 95px; font-size: 9px; }
  .progress-filters { gap: 6px; }.progress-filters label { font-size: 9px; }.progress-filters select { font-size: 10px; padding: 4px; }
  #stats-backdrop .stats-summary { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }#stats-backdrop .stats-metric { padding: 8px; }#stats-backdrop .stats-metric strong { font-size: 21px; margin: 3px 0; }
  .progress-analysis { grid-template-columns: 1fr; gap: 10px; flex: none; }.progress-breakdown > label { margin-bottom: 4px; }.progress-breakdown th,.progress-breakdown td { padding: 7px 4px; font-size: 11px; }
  .progress-observation { padding: 9px; }.progress-observation > strong { font-size: 12px; margin-top: 7px; }.progress-observation p { font-size: 10px; margin: 4px 0; }#progress-recent > small { font-size: 8px; }
  .progress-bilan { gap: 7px; }.progress-data-note { font-size: 8px; }.progress-history-row { min-height: 83px; font-size: 11px; }.progress-history-row span { font-size: 9px; }
  .progress-goal-cards { grid-template-columns: 1fr; gap: 9px; }.progress-goal-card { padding: 14px; gap: 8px; }.progress-goal-card h3 { font-size: 21px; }.progress-goal-card p { font-size: 11px; }.progress-reward-heading { gap: 10px; }
  .progress-level { align-items: start; }.progress-level strong { font-size: 13px; }.progress-level span { font-size: 9px; max-width: 130px; text-align: right; }.progress-purpose { font-size: 10px; }
  .progress-daily-line { align-items: start; font-size: 10px; }.progress-daily-line > span { flex: 1; }.progress-link { font-size: 10px; }
  .progress-collection-heading h3 { font-size: 14px; }.progress-achievement { padding: 10px; gap: 8px; }.progress-achievement strong { font-size: 12px; }.progress-achievement span { font-size: 11px; }
  .progress-theme-grid { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(3,1fr); gap: 8px; }.progress-theme { gap: 7px; }.progress-theme-preview { width: 55px; height: 38px; }.progress-xp-explanation { font-size: 12px; gap: 7px; }
}
@media (max-width: 580px), (max-height: 450px) {
  #stats-backdrop .progress-bilan[data-analysis="results"] .stats-summary { display: none; }
  .progress-analysis-tabs { display: flex; gap: 12px; flex: none; }
  .progress-analysis-tabs button { border: 0; border-bottom: 2px solid transparent; background: transparent; color: #6b795f; font: 600 10px 'DM Sans', sans-serif; padding: 5px 0; cursor: pointer; }
  .progress-analysis-tabs button[aria-pressed="true"] { color: #244f3d; border-color: #64824c; }
  .progress-bilan[data-analysis="results"] .progress-observation, .progress-bilan[data-analysis="trend"] .progress-breakdown { display: none; }
  .progress-analysis { grid-template-columns: 1fr; flex: 1; }
}
@media (max-width: 580px) and (max-height: 700px) {
  #stats-backdrop .stats-metric { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px; }
  #stats-backdrop .stats-metric small { grid-column: 1 / -1; }
  #stats-backdrop .stats-modal { padding: 12px; gap: 6px; }.progress-heading .progress-eyebrow { display: none; }#stats-title { margin: 0; font-size: 22px; }
  .progress-tabs button { min-height: 30px; font-size: 11px; }.progress-filters select { min-height: 30px; }
  #stats-backdrop .stats-metric { padding: 5px 7px; }#stats-backdrop .stats-metric strong { font-size: 19px; margin: 2px 0; }#stats-backdrop .stats-metric span { font-size: 10px; }#stats-backdrop .stats-metric small { font-size: 8px; }
  .progress-breakdown > label { font-size: 10px; }.progress-breakdown select { min-height: 27px; }.progress-breakdown th,.progress-breakdown td { padding: 5px 3px; }.progress-breakdown thead th { font-size: 9px; }
  #progress-recent > span { display: none; }.progress-result-strip { margin: 0 0 4px; }.progress-result-strip > span { height: 18px; width: 20px; font-size: 9px; }
  .progress-observation { padding: 7px; }.progress-observation > strong { margin-top: 5px; font-size: 11px; }.progress-observation p { font-size: 9px; }#progress-insight-action { min-height: 27px; font-size: 10px; padding: 4px 8px; }
  .progress-footer { padding-top: 5px; }#stats-backdrop .stats-privacy { font-size: 8px; }
  #stats-backdrop .loyalty-detail { gap: 6px; }.progress-goal-card { padding: 8px 10px; gap: 5px; }.progress-goal-card h3 { font-size: 18px; }.progress-goal-card p { font-size: 10px; }.progress-goal-card > strong { font-size: 11px; }.progress-goal-card .progress-button { min-height: 28px; padding: 5px 8px; font-size: 10px; }
}
@media (max-height: 450px) and (min-width: 581px) {
  #stats-backdrop .stats-metric { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px; }
  #stats-backdrop .stats-metric small { grid-column: 1 / -1; }
  #stats-backdrop .stats-modal { padding: 10px 16px; gap: 6px; }.progress-heading .progress-eyebrow { display: none; }#stats-title { font-size: 22px; margin: 0; }.progress-heading { align-items: center; }
  .progress-tabs button { min-height: 28px; font-size: 11px; }.progress-filters { gap: 10px; }.progress-filters label { grid-template-columns: auto minmax(0,1fr); align-items: center; }.progress-filters select { min-height: 27px; font-size: 10px; }
  #stats-backdrop .stats-metric { padding: 5px 8px; }#stats-backdrop .stats-metric strong { font-size: 19px; margin: 2px 0; }#stats-backdrop .stats-metric span { font-size: 10px; }#stats-backdrop .stats-metric small { font-size: 8px; }
  .progress-bilan { gap: 4px; }.progress-breakdown > label { margin-bottom: 2px; font-size: 10px; }.progress-breakdown select { min-height: 25px; font-size: 10px; }.progress-breakdown th,.progress-breakdown td { padding: 4px; font-size: 10px; }
  .progress-observation { padding: 6px 8px; }.progress-observation > strong { margin-top: 4px; font-size: 11px; }.progress-observation p { font-size: 9px; margin: 3px 0; }.progress-result-strip { margin: 3px 0; }.progress-result-strip > span { height: 17px; }#progress-recent > span { display: none; }#progress-recent > small { font-size: 8px; }#progress-insight-action { min-height: 23px; padding: 3px 6px; font-size: 9px; }
  .progress-data-note { font-size: 8px; }.progress-footer { padding-top: 4px; }#stats-backdrop .stats-privacy { font-size: 8px; }
  #stats-backdrop .loyalty-detail { gap: 5px; }.progress-purpose { font-size: 9px; }.progress-level strong { font-size: 13px; }.progress-goal-card { padding: 9px 12px; gap: 5px; }.progress-goal-card h3 { font-size: 18px; }.progress-goal-card p { font-size: 10px; }.progress-goal-card > strong { font-size: 10px; }.progress-theme-preview { width: 45px; height: 30px; }.progress-button { min-height: 26px; font-size: 10px; padding: 4px 8px; }
  .progress-theme-grid { grid-template-columns: repeat(5,minmax(0,1fr)); grid-template-rows: 1fr; gap: 8px; }.progress-achievement { min-height: 60px; padding: 7px 10px; }.progress-achievement > div { gap: 3px; }.progress-achievement strong { font-size: 12px; }.progress-achievement span { font-size: 10px; }.progress-collection-heading h3 { font-size: 14px; }.progress-pages button { min-height: 25px; padding: 4px 8px; }
  .progress-xp-explanation { display: grid; grid-template-columns: 1fr 1fr; font-size: 10px; gap: 8px 15px; }.progress-xp-explanation small { font-size: 9px; }.progress-missions { padding: 6px; }
}
@media (max-width: 580px) and (max-height: 700px) {
  .progress-bilan { gap: 5px; }
  #stats-backdrop .stats-metric strong { margin: 0; }
  #stats-backdrop .stats-metric small { line-height: 1.15; }
}
@media (max-height: 450px) and (min-width: 581px) {
  .progress-observation { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  #progress-recent { grid-row: 1 / 4; }
  #progress-insight-action { justify-self: start; }
}
@media (min-width: 581px) and (min-height: 451px) and (max-height: 700px) {
  #stats-backdrop .stats-modal { padding: 16px; gap: 8px; }
  #stats-backdrop .stats-metric { padding: 8px 10px; }
  #stats-backdrop .stats-metric strong { font-size: 22px; margin: 3px 0; }
  .progress-breakdown th, .progress-breakdown td { padding: 6px 4px; }
  .progress-observation { padding: 9px; }
  .progress-observation > strong { margin-top: 7px; }
}