/* Soccerstrive arrangement of the match page: rounded white cards, dark/amber header bands, single column. */
.mx-theme-ss { --mx-radius: 16px; background: linear-gradient(135deg, #fcfcfd, #f9fafb); font-family: inherit; font-size: 15px; }
.ss-wrap { max-width: 1200px; margin: 0 auto; padding: 32px 16px 0; }
.ss-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 32px; }

.mx-theme-ss .mx-card { border-radius: 16px; border: 1px solid #f3f4f6; box-shadow: 0 1px 2px rgba(0,0,0,.05); padding: 20px 24px; }
.mx-theme-ss .mx-card > .mx-card__head:first-child,
.mx-theme-ss .mx-card > .mx-card__title:first-child { margin: -20px -24px 20px; padding: 16px 24px; background: linear-gradient(90deg, #111827, #1f2937); color: #fff; border-radius: 15px 15px 0 0; }
.mx-theme-ss .mx-card > .mx-card__title:first-child { display: block; }
.mx-theme-ss .mx-card > .mx-card__head:first-child .mx-card__title,
.mx-theme-ss .mx-card > .mx-card__title:first-child { color: #fff; font-size: 18px; font-weight: 600; }
.mx-theme-ss .mx-card > .mx-card__head:first-child .mx-card__title::before,
.mx-theme-ss .mx-card > .mx-card__title:first-child::before { font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f080"; color: #fbbf24; margin-right: 10px; font-size: 16px; }
.mx-theme-ss #h2h .mx-card__title::before { content: "\f0ec"; }
.mx-theme-ss #table .mx-card__title::before { content: "\f46d"; color: #4ade80; }
.mx-theme-ss #form .mx-card__title::before { content: "\f201"; }
.mx-theme-ss #odds .mx-card__title::before { content: "\f3d1"; }
.mx-theme-ss #model .mx-card__title::before { content: "\f5dc"; }
.mx-theme-ss #preview .mx-card__title::before { content: "\f15c"; }
.mx-theme-ss #more .mx-card__title::before { content: "\f1e3"; }
.mx-theme-ss .mx-card > .mx-card__head:first-child .mx-chip { background: rgba(251,191,36,.16); color: #fbbf24; }
.mx-theme-ss .mx-card > .mx-card__head:first-child .mx-toggle { background: rgba(255,255,255,.1); }
.mx-theme-ss .mx-card > .mx-card__head:first-child .mx-toggle button { color: rgba(255,255,255,.8); }
.mx-theme-ss .mx-card > .mx-card__head:first-child .mx-toggle button.is-on { background: #fbbf24; color: #111827; }
.mx-theme-ss .mx-card > .mx-card__head:first-child .mx-more { color: #fbbf24; border-color: rgba(251,191,36,.4); background: transparent; }
.mx-theme-ss .mx-pill--w { background: #fbbf24; color: #111827; }

.ss-card { background: #fff; border-radius: 16px; border: 1px solid #f3f4f6; box-shadow: 0 1px 2px rgba(0,0,0,.05); overflow: hidden; }
.ss-league { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; background: linear-gradient(90deg, #111827, #78350f); color: #fff; }
.ss-league h2 { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #fff; }
.ss-league h2 img { width: 26px; height: 26px; object-fit: contain; background: #fff; border-radius: 6px; padding: 2px; }
.ss-league__country { color: #bfdbfe; }
.ss-league__when { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: #dbeafe; }
.ss-league__round { padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.12); font-size: 12px; }
.ss-body { padding: 24px; }
@media (min-width: 640px) { .ss-body { padding: 32px; } }

.ss-board { display: grid; gap: 18px; align-items: center; }
@media (min-width: 1024px) { .ss-board { grid-template-columns: 5fr 2fr 5fr; } }
.ss-team { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
@media (min-width: 1024px) { .ss-team--home { align-items: flex-end; text-align: right; } .ss-team--away { align-items: flex-start; } }
.ss-team__row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ss-team__name { font-size: 20px; font-weight: 700; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-team__crest { width: 52px; height: 52px; flex: none; object-fit: contain; background: #fff; border: 2px solid #fff; border-radius: 999px; padding: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.ss-team__rank { font-size: 12px; color: #6b7280; }
.ss-forms { display: flex; gap: 6px; }
.ss-f { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; background: #6b7280; }
.ss-f--w { background: #fbbf24; color: #111827; }
.ss-f--l { background: #ef4444; }
.ss-score { display: flex; align-items: center; justify-content: center; gap: 4px; }
.ss-score b { width: 44px; text-align: center; font-size: 32px; font-weight: 700; color: #111827; }
.ss-vs { padding: 4px 12px; border-radius: 999px; background: #f3f4f6; color: #4b5563; font-size: 14px; font-weight: 500; }
.ss-status { margin-top: 8px; text-align: center; }
.ss-status span { display: inline-block; padding: 4px 12px; border-radius: 999px; background: #eff6ff; color: #1d4ed8; font-size: 12px; font-weight: 500; }
.ss-status--live span { background: #fef2f2; color: #dc2626; }
.ss-sub { margin-top: 6px; text-align: center; font-size: 12px; color: #6b7280; }

.ss-events { max-width: 600px; margin: 22px auto 0; display: grid; gap: 4px; font-size: 13px; }
.ss-event { display: flex; align-items: center; gap: 8px; color: #374151; }
.ss-event--away { flex-direction: row-reverse; text-align: right; }
.ss-event__min { min-width: 36px; color: #9ca3af; font-variant-numeric: tabular-nums; }
.ss-event .mx-event__icon--goal { background: #111827; box-shadow: inset 0 0 0 3px #fff, 0 0 0 1px #111827; }

.ss-expert { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; padding: 16px 20px; border: 1px solid #fde68a; border-radius: 12px; background: linear-gradient(90deg, #fffbeb, #fef3c7); }
.ss-expert__text { flex: 1 1 260px; }
.ss-expert h3 { font-size: 14px; font-weight: 500; color: #6b7280; }
.ss-expert p { margin: 2px 0 4px; font-size: 18px; font-weight: 700; color: #111827; }
.ss-expert p span { font-size: 14px; font-weight: 400; color: #6b7280; }
.ss-expert p a { color: #b45309; font-size: 14px; margin-left: 6px; }
.ss-expert small { display: block; font-size: 13px; color: #6b7280; }
.ss-result { margin-left: 8px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-style: normal; color: #fff; vertical-align: 2px; }
.ss-result--won { background: #16a34a; }
.ss-result--lost { background: #dc2626; }
.ss-meter { flex: 0 0 200px; text-align: right; }
.ss-meter__bar { height: 8px; border-radius: 999px; background: #fde68a; overflow: hidden; }
.ss-meter__bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f59e0b, #b45309); }
.ss-meter small { font-size: 12px; color: #92400e; font-weight: 600; }

.ss-h { margin: 24px 0 12px; font-size: 14px; font-weight: 500; color: #6b7280; }
.ss-h span { color: #9ca3af; }
.ss-odds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ss-odd { padding: 12px; text-align: center; background: #fff; border: 1px solid #f3f4f6; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: box-shadow .2s; }
.ss-odd:hover { box-shadow: 0 4px 10px rgba(0,0,0,.08); }
.ss-odd p { margin: 0; font-size: 12px; font-weight: 500; color: #6b7280; }
.ss-odd strong { display: block; margin-top: 4px; font-size: 18px; font-weight: 700; color: #111827; }
.ss-odd small { font-size: 11px; color: #9ca3af; }

.ss-tips { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.ss-tip { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid #f3f4f6; border-left: 4px solid #111827; border-radius: 8px; background: #f9fafb; }
.ss-tip--vip { border-left-color: #F8B504; }
.ss-tip__market { font-size: 12px; font-weight: 500; color: #6b7280; }
.ss-tip__value { font-size: 17px; font-weight: 700; color: #111827; }
.ss-tip__value small { font-size: 12px; font-weight: 500; color: #6b7280; }
.ss-tip__lock { font-size: 13px; font-weight: 600; color: #b45309; }
.ss-won { color: #16a34a; }
.ss-lost { color: #dc2626; }
.ss-facts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 22px; font-size: 13px; color: #6b7280; }
.ss-facts i { color: #F8B504; margin-right: 4px; }

.ss-related { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ss-related__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #f3f4f6; border-radius: 10px; color: #111827; transition: border-color .2s; }
.ss-related__item:hover { border-color: #F8B504; }
.ss-related__time { font-size: 12px; color: #6b7280; }
.ss-related__teams { display: grid; flex: 1; min-width: 0; font-size: 13px; }
.ss-related__teams span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ss-related__teams img { display: inline-block; width: 14px; height: 14px; object-fit: contain; vertical-align: -2px; }
.ss-related__tip { padding: 2px 10px; border-radius: 999px; background: #111827; color: #fbbf24; font-size: 12px; font-weight: 700; }
.mx-theme-ss .mx-pill--d { background: #6b7280; color: #fff; }