@font-face {
  font-family: '2s Preview Inter';
  src: url('assets/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* App previews use the current neutral canvas, white actions and Inter face. */
.current-preview, .social-card { font-family: '2s Preview Inter', system-ui, sans-serif; }
.current-preview { --preview-bg: #0d0e11; --preview-surface: #151619; --preview-raised: #1e1f22; --preview-rule: #343538; background: var(--preview-bg); color: #fcfcfc; }
.current-preview h3 { letter-spacing: -.025em; }
.preview-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.preview-screen-header { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 14px 16px; border-bottom: 1px solid #ffffff14; }
.preview-screen-header > span:first-child { color: #b4b4b4; }
.preview-screen-header h3 { flex: 1; min-width: 0; font-size: 16px; font-weight: 650; line-height: 1.3; }
.preview-menu { color: #b4b4b4; font-size: 13px; letter-spacing: 1px; }
.preview-search { display: flex; align-items: center; gap: 10px; margin: 12px 16px; padding: 12px; border-radius: 8px; background: var(--preview-raised); color: #b4b4b4; font-size: 11px; line-height: 1.5; }
.preview-search .preview-icon { width: 16px; height: 16px; }
.preview-section-label { margin: 22px 16px 10px; font-size: 10px; font-weight: 600; color: #b4b4b4; letter-spacing: .04em; }
.preview-sport-row { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid #ffffff14; }
.preview-sport-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--preview-raised); color: #fcfcfc; flex: none; }
.preview-sport-mark .preview-icon { width: 21px; height: 21px; }
.preview-sport-row > div { flex: 1; min-width: 0; }
.preview-sport-row b { font-size: 13px; font-weight: 600; }
.preview-sport-row small { display: block; margin-top: 3px; color: #b4b4b4; font-size: 10px; }
.preview-sport-row > .preview-icon { width: 12px; height: 12px; color: #9a9a9a; }
.preview-picked { display: flex; align-items: center; gap: 8px; }
.preview-fan-pill { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 999px; background: var(--preview-raised); color: #fcfcfc; font-size: 10px; font-weight: 600; white-space: nowrap; }
.preview-fan-pill > .preview-icon, .preview-header-fan { color: var(--amber); }
.preview-pin { display: grid; place-items: center; color: #fcfcfc; }
.preview-filled-icon { fill: currentColor; stroke-width: 2; }
.preview-picked .preview-icon { width: 16px; height: 16px; }
.preview-directory { display: flex; justify-content: space-between; align-items: center; padding: 17px; font-size: 12px; color: #fcfcfc; }
.preview-directory > span { color: #b4b4b4; }
.preview-team-mark { display: inline-block; flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px #ffffff18; background: #494a4d; }
.preview-team-mark--ny { background: linear-gradient(90deg,#1a4c96 0% 18%,#ee9943 18% 23%,#1c3f83 23% 47%,#ee9943 47% 53%,#1c3f83 53% 77%,#ee9943 77% 82%,#1a4c96 82%); }
.preview-team-mark--lal { background: linear-gradient(135deg,#542d91 0% 26%,#e5bb47 26% 48%,#542d91 48% 54%,#e5bb47 54% 76%,#542d91 76%); }
.preview-team-mark--tor { background: linear-gradient(155deg,#bc2448 0% 42%,#f3f3f3 42% 49%,#17171b 49% 65%,#f3f3f3 65% 71%,#bc2448 71%); }
.preview-team-mark--bos { background: linear-gradient(#246c44 0% 30%,#f5f5f5 30% 36%,#246c44 36% 64%,#f5f5f5 64% 70%,#246c44 70%); }
.preview-header-action { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: transparent; color: #fcfcfc; }
.preview-header-action.preview-header-fan { color: var(--amber); }
.preview-header-action .preview-icon { width: 15px; height: 15px; }
.preview-screen-tabs { display: flex; align-items: stretch; border-bottom: 1px solid #ffffff14; }
.preview-screen-tabs > span { position: relative; flex: 1; text-align: center; padding: 14px 4px; font-size: 11px; font-weight: 600; color: #b4b4b4; }
.preview-screen-tabs .selected { color: #fcfcfc; }
.preview-screen-tabs .selected::after { content: ''; position: absolute; bottom: 0; height: 3px; width: 29px; left: calc(50% - 14.5px); background: #fcfcfc; border-radius: 2px 2px 0 0; }
.team-cutout.current-preview .score-rail { padding: 9px 12px; gap: 8px; border-bottom: 1px solid #ffffff14; }
.team-cutout.current-preview .rail-fixture { flex: 1 0 120px; padding: 9px; border-radius: 11px; border: 1px solid #ffffff14; background: var(--preview-surface); }
.current-preview .rail-fixture.is-live { border-color: #ffffff14; }
.preview-fixture-meta { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 8px; margin-bottom: 5px; }
.preview-fixture-meta > small { font-size: 8px; color: #b4b4b4; }
.preview-live { display: inline-flex; align-items: center; gap: 4px; color: #f97362; font-size: 8px; font-weight: 650; letter-spacing: .01em; white-space: nowrap; }
.preview-live i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.preview-rail-team { display: flex; align-items: center; gap: 5px; height: 23px; }
.preview-rail-team .preview-team-mark { width: 16px; height: 16px; }
.preview-rail-team b { font-size: 11px; font-weight: 650; }
.preview-rail-team .matrix-score { margin-left: auto; width: 48px; }
.preview-rail-team .matrix-score svg { width: 100%; height: 18px; }
.preview-fixture-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; color: #b4b4b4; font-size: 8px; }
.preview-mini-action { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: var(--preview-raised); color: #fcfcfc; }
.preview-mini-action .preview-icon { width: 12px; height: 12px; }
.preview-fan-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.preview-fan-badges > span { display: inline-flex; align-items: center; gap: 4px; border-radius: 20px; padding: 2px 7px 2px 3px; font-size: 9px; line-height: 1.5; font-weight: 550; background: #1e1f22; color: var(--amber); }
.preview-fan-badges .preview-team-mark { width: 14px; height: 14px; }
.preview-disclaimer { margin-top: 16px; color: #a6a6ae; font-size: 12px; line-height: 1.5; }
.personal-stage > .preview-disclaimer { margin-left: auto; width: 95%; }
.angle-scoreboard.current-preview { border-radius: 15px; background: var(--preview-bg); padding: 5px; box-shadow: 0 18px 45px #0004; }
.preview-game-banner { background: var(--preview-surface); border-radius: 12px; padding: 14px 12px 18px; }
.preview-game-meta { display: flex; align-items: center; gap: 8px; color: #fcfcfc; font-size: 9px; }
.preview-game-meta > b { letter-spacing: .04em; }
.preview-game-meta > .preview-live { margin-left: auto; }
.preview-game-meta .preview-icon { width: 16px; height: 16px; color: #b4b4b4; }
.preview-watch { margin-left: auto; padding: 6px 13px; border-radius: 20px; background: #fcfcfc; color: #0d0e11; font-size: 8px; font-weight: 750; letter-spacing: .07em; }
.preview-scoreline { display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.25fr) minmax(36px,.8fr) minmax(0,1.25fr) minmax(0,.7fr); align-items: center; gap: 6px; margin-top: 16px; }
.preview-game-team { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
.preview-game-team .preview-team-mark { width: 25px; height: 25px; }
.preview-game-team b { font-size: 17px; font-weight: 650; letter-spacing: -.04em; }
.preview-game-clock { text-align: center; color: #fcfcfc; font-size: 11px; line-height: 1.4; }
.preview-game-clock small { display: block; color: #b4b4b4; margin-top: 3px; font-size: 8px; }
.preview-scoreline .matrix-score { width: 100%; justify-content: center; }
.preview-scoreline .matrix-score svg { width: 100%; height: 52px; }
.preview-chat { padding: 0; border-radius: 16px; overflow: hidden; background: var(--preview-bg); }
.preview-chat-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; border-bottom: 1px solid #ffffff14; }
.preview-chat-heading h3 { font-size: 14px; font-weight: 650; }
.preview-chat-people { display: flex; padding-left: 8px; }
.preview-chat-people img { object-fit: cover; border-radius: 50%; border: 2px solid var(--preview-bg); margin-left: -7px; }
.preview-chat-messages { padding: 20px 17px 24px; }
.preview-chat-message { display: flex; align-items: flex-start; gap: 10px; }
.preview-chat-message + .preview-chat-message { margin-top: 19px; }
.preview-chat-avatar { position: relative; flex: none; }
.preview-chat-avatar > img { width: 30px; height: 30px; object-fit: cover; border-radius: 50%; }
.preview-chat-avatar .preview-team-mark { position: absolute; width: 12px; height: 12px; right: -3px; bottom: -2px; outline: 2px solid var(--preview-bg); }
.preview-chat-message > div:last-child { flex: 1; min-width: 0; }
.preview-chat-author { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; }
.preview-chat-author b { font-size: 11px; font-weight: 650; }
.preview-chat-author small { font-size: 9px; color: #b4b4b4; }
.preview-chat-message p { margin-top: 5px; font-size: 13px; line-height: 1.5; color: #fcfcfc; }
.preview-chat-composer { display: flex; align-items: center; justify-content: space-between; margin: 0 13px; padding: 12px 15px; border-radius: 25px; background: var(--preview-raised); color: #b4b4b4; font-size: 12px; }
.preview-chat-composer > span:last-child { color: #fcfcfc; font-size: 16px; }
.preview-chat .preview-disclaimer { margin: 12px 17px 17px; font-size: 12px; }
@media(max-width:1100px) { .preview-screen-header { gap: 7px; padding-inline: 12px; } .preview-screen-header h3 { font-size: 14px; } }
@media(max-width:600px) { .preview-screen-header h3 { font-size: 14px; } .preview-screen-header { gap: 7px; padding-inline: 11px; } .preview-screen-header .preview-team-mark { width: 20px; height: 20px; } .preview-picked { gap: 8px; } .preview-sport-row { padding-inline: 12px; gap: 9px; } .preview-scoreline { gap: 4px; } .preview-game-team b { font-size: 14px; } .preview-game-clock { font-size: 10px; } .preview-game-banner { padding-inline: 10px; } .preview-chat-message p { font-size: 12px; } }

/* Exact current app artwork. Preserve geometry and filled-state rendering. */
svg[data-app-icon],
.ui-icon.app-icon[data-app-icon],
.preview-icon[data-app-icon],
.native-icon[data-app-icon],
.post-video-toolbar svg[data-app-icon] {
  fill: var(--app-icon-fill,none);
  stroke: currentColor;
  stroke-width: var(--app-icon-stroke,2);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.preview-menu > svg { width: 18px; height: 18px; }