/* Testimonial / Winning predictions listing (/testimonial) */
.tw-sec { background: #fff; border-radius: 1.25rem; overflow: hidden; box-shadow: 0 4px 18px rgba(62, 42, 0, .06); }
.tw-sec-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.125rem; background: transparent; }
.tw-sec-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #8a5e00, #f5c451, #B27900); }
.tw-sec-title { margin: 0; color: #1a1200; font-size: 1.125rem; font-weight: 700; letter-spacing: .3px; display: flex; align-items: center; gap: .5rem; }
.tw-sec-title i { color: #B27900; }
.tw-sec-sub { margin: .125rem 0 0; color: #6b6b6b; font-size: .75rem; }
.tw-sec-badge { flex-shrink: 0; background: rgba(245, 196, 81, .15); border: 1px solid rgba(245, 196, 81, .45); color: #8a5e00; font-size: .75rem; font-weight: 700; padding: .3rem .75rem; border-radius: 9999px; white-space: nowrap; }

.tw-list { display: flex; flex-direction: column; gap: .625rem; padding: 1rem .75rem 1.25rem; }

.tw-row {
    display: grid; align-items: center; gap: .625rem .75rem;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "meta status" "match match" "pick pick";
    background: #fff; border: 1px solid #efe2c4; border-left: 3px solid #14AE5C; border-radius: 1rem;
    padding: .75rem .875rem; transition: border-color .2s, box-shadow .2s, transform .2s;
}
.tw-row:hover { border-color: #B27900; border-left-color: #14AE5C; box-shadow: 0 10px 24px rgba(178, 121, 0, .14); transform: translateY(-1px); }
.tw-row.is-won { background: linear-gradient(90deg, #F1FBF5, #fff 40%); }
.tw-row.is-lost { border-left-color: #9CA3AF; opacity: .9; }
.tw-row.is-void, .tw-row.is-pending { border-left-color: #B27900; }

.tw-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .625rem; min-width: 0; font-size: .6875rem; }
.tw-league { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; padding: .1875rem .5rem; border-radius: 9999px; background: #FBF6EC; border: 1px solid #efe2c4; color: #3E2A00; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-league i, .tw-date i { color: #B27900; }
.tw-date { display: inline-flex; align-items: center; gap: .3rem; color: #6b6b6b; font-weight: 600; white-space: nowrap; }
.tw-date b { color: #3E2A00; font-weight: 800; padding-left: .3rem; border-left: 1px solid #efe2c4; }

.tw-match { grid-area: match; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .5rem; min-width: 0; }
.tw-team { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.tw-team.is-home { flex-direction: row-reverse; text-align: right; }
.tw-team-name { min-width: 0; color: #1a1200; font-size: .8125rem; font-weight: 700; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.tw-logo, .tw-avatar { width: 2rem; height: 2rem; flex-shrink: 0; object-fit: contain; }
.tw-avatar { border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: #F3EBD9; color: #8a5e00; font-size: .6875rem; font-weight: 800; text-transform: uppercase; }
.tw-score { min-width: 3.75rem; padding: .375rem .625rem; border-radius: 9999px; background: linear-gradient(180deg, #3E2A00, #1a1200); color: #f5c451; font-size: .9375rem; font-weight: 800; text-align: center; white-space: nowrap; letter-spacing: .04em; box-shadow: inset 0 0 0 1px rgba(245, 196, 81, .25); }

.tw-pick { grid-area: pick; display: flex; align-items: stretch; gap: .5rem; min-width: 0; }
.tw-tip, .tw-odd { display: flex; flex-direction: column; justify-content: center; gap: .0625rem; padding: .3125rem .75rem; border-radius: .75rem; background: #FBF6EC; border: 1px solid #efe2c4; min-width: 0; }
.tw-tip { flex: 1; }
.tw-tip small, .tw-odd small { font-size: .5625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a5e00; }
.tw-tip strong { color: #1a1200; font-size: .8125rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-odd { flex-shrink: 0; text-align: center; }
.tw-odd strong { color: #B27900; font-size: .8125rem; font-weight: 800; }

.tw-status { grid-area: status; display: flex; justify-content: flex-end; }
.tw-badge { display: inline-flex; align-items: center; gap: .25rem; font-style: normal; font-size: .625rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .25rem .625rem; border-radius: 9999px; color: #f5c451; background: #3E2A00; white-space: nowrap; }
.tw-badge.is-won { color: #fff; background: #14AE5C; }
.tw-badge.is-lost { color: #fff; background: #9CA3AF; }
.tw-badge.is-void { color: #fff; background: #6b7280; }

.tw-pager { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1rem 1.25rem; border-top: 1px solid #efe2c4; background: #FBF6EC; }
.tw-sec { scroll-margin-top: 6rem; }
.tw-list { transition: opacity .2s; }
.tw-list.is-loading { opacity: .45; pointer-events: none; }
a.tw-match { text-decoration: none; color: inherit; }
a.tw-match:hover .tw-team-name { color: #8a5e00; }
.tw-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: .375rem; }
.tw-page { min-width: 2.25rem; height: 2.25rem; padding: 0 .625rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .75rem; border: 1px solid #efe2c4; background: #fff; color: #3E2A00; font-size: .8125rem; font-weight: 700; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.tw-page:hover:not(:disabled):not(.is-active):not(.is-gap) { border-color: #B27900; color: #B27900; }
.tw-page.is-active { background: linear-gradient(180deg, #3E2A00, #1a1200); border-color: #3E2A00; color: #f5c451; cursor: default; }
.tw-page:disabled { opacity: .45; cursor: not-allowed; }
.tw-page.is-gap { border-color: transparent; background: transparent; cursor: default; }
.tw-pager-info { color: #6b6b6b; font-size: .75rem; font-weight: 600; }

.tw-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 3.5rem 1rem; }
.tw-empty-icon { width: 4.5rem; height: 4.5rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: #FBF6EC; border: 1px solid #efe2c4; color: #B27900; font-size: 2rem; margin-bottom: 1rem; }
.tw-empty h3 { margin: 0 0 .375rem; color: #1a1200; font-size: 1.125rem; font-weight: 700; }
.tw-empty p { margin: 0; max-width: 28rem; color: #6b6b6b; font-size: .875rem; }

@media (max-width: 639px) {
    .tw-match { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "home score" "away score"; row-gap: .375rem; }
    .tw-team.is-home { grid-area: home; flex-direction: row; text-align: left; }
    .tw-team.is-away { grid-area: away; }
    .tw-score { grid-area: score; align-self: center; }
    .tw-team-name { -webkit-line-clamp: 1; word-break: normal; }
}

@media (min-width: 640px) {
    .tw-list { padding: 1.125rem 1rem 1.25rem; }
    .tw-team-name { font-size: .875rem; }
    .tw-logo, .tw-avatar { width: 2.25rem; height: 2.25rem; }
}

@media (min-width: 1024px) {
    .tw-sec-head { padding: 1.125rem 1.5rem; }
    .tw-sec-title { font-size: 1.25rem; }
    .tw-list { padding: 1.25rem 1.5rem 1.5rem; gap: .5rem; }
    .tw-row {
        grid-template-columns: 11.5rem minmax(0, 1fr) 13rem 5.5rem;
        grid-template-areas: "meta match pick status";
        gap: 1.25rem; padding: .75rem 1.125rem;
    }
    .tw-meta { flex-direction: column; align-items: flex-start; gap: .375rem; }
    .tw-score { min-width: 4.25rem; font-size: 1rem; }
}