:root {
    --bg: #E4E9F7;
    --card: #ffffff;
    --text: #0f172a;
    --muted: #64748b;
    --line: #e5e7eb;
    --primary: #695CFE;
    --win: #16a34a;
    --lose: #ef4444;
    --draw: #f59e0b;
    --shadow: 0 16px 40px rgba(15, 23, 42, .12);
    --shadow2: 0 10px 26px rgba(15, 23, 42, .10);
    --r: 18px;
    --commentsPanel: #eef1f7;
    --commentCard: #ffffff;
    --commentStroke: #e5e7eb;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
}

.vm-page {
    max-width: 1320px;
    margin: 0 auto;
    padding: 16px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.vm-main {
    flex: 1 1 auto;
    min-width: 0;
}

.vm-side {
    width: 500px;
    flex: 0 0 500px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 10px;
    height: calc(100vh - 20px);
    align-self: flex-start;
}

.vm-rightcards {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
}

.vm-comments {
    width: 100%;
    flex: 1 1 auto;
    background: var(--commentsPanel);
    border: 1px solid rgba(15, 23, 42, .10);
    box-shadow: var(--shadow2);
    border-radius: var(--r);
    display: flex;
    flex-direction: column;
    min-height: 320px;
    overflow: visible;
}

.vm-hero {
    padding: 14px;
    margin-top: 0;
}

.heroTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.heroLeft {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.heroAI {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(105, 92, 254, .10);
    border: 1px solid rgba(105, 92, 254, .18);
    flex: 0 0 34px;
}

.heroAI i {
    font-size: 18px;
    color: rgba(105, 92, 254, .98);
}

.heroTitle {
    font-weight: 950;
    letter-spacing: -0.02em;
    font-size: 14px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.heroActions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sharePop {
    position: fixed;
    width: fit-content;
    max-width: calc(100vw - 20px);
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .10),
        0 20px 60px rgba(0, 0, 0, .18);
    padding: 12px;
    z-index: 999999;
    display: none;
}

.sharePop.open {
    display: block;
}

.sharePopHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.sharePopTitle {
    font-weight: 1000;
    color: rgba(15, 23, 42, .86);
}

.sharePopClose {
    border: none;
    background: transparent;
    cursor: pointer;
    color: rgba(15, 23, 42, .55);
}

.sharePopClose i {
    font-size: 20px;
}

.sharePopLinkRow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.sharePopInput {
    flex: 1;
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 999px;
    padding: 10px 12px;
    font-size: 12px;
    background: rgba(15, 23, 42, .03);
    color: rgba(15, 23, 42, .78);
}

.sharePopCopy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
    background: rgba(105, 92, 254, .10);
    color: rgba(105, 92, 254, .98);
    font-weight: 1000;
}

.sharePopCopy i {
    font-size: 18px;
}

.sharePopActions {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 8px;
}

.shareAct {
    border: none;
    background: rgba(15, 23, 42, .04);
    border-radius: 14px;
    padding: 10px 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(15, 23, 42, .78);
    font-weight: 1000;
    font-size: 11px;
}

.shareAct i {
    font-size: 18px;
}

.shareAct:hover {
    background: rgba(105, 92, 254, .10);
    color: rgba(105, 92, 254, .98);
}

.sharePopHint {
    font-size: 11px;
    color: rgba(15, 23, 42, .55);
}

@media (max-width: 520px) {
    .sharePopActions {
        grid-template-columns: repeat(3, 1fr);
    }
}

.heroGrid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 14px;
    align-items: start;
}

.teamsBlock {
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    padding: 12px;
    background: rgba(255, 255, 255, .60);
}

.teamRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 10px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    background: #fff;
}

.teamRow+.teamRow {
    margin-top: 10px;
}

.teamSide {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.teamLogo {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(105, 92, 254, .10);
    border: 1px solid rgba(105, 92, 254, .18);
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.teamLogo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.teamName {
    font-weight: 950;
    letter-spacing: -0.02em;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sideTag {
    font-size: 12px;
    color: var(--muted);
    font-weight: 800;
    margin-top: 2px;
}

.winnerPill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(22, 163, 74, .12);
    border: 1px solid rgba(22, 163, 74, .25);
    color: #166534;
    font-weight: 900;
    font-size: 12px;
    white-space: nowrap;
}

.winnerBig {
    border-color: rgba(22, 163, 74, .30);
    box-shadow: 0 10px 22px rgba(22, 163, 74, .10);
}

.metaBlock {
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    padding: 12px;
    background: #fff;
}

.metaLine {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    padding: 6px 0;
}

.metaLine i {
    font-size: 18px;
    color: rgba(105, 92, 254, .95);
}

.scoreBlock {
    margin-top: 12px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    background: #fff;
}

.aiScore {
    font-size: 34px;
    font-weight: 1000;
    letter-spacing: -0.03em;
    line-height: 1;
}

.aiScore small {
    display: block;
    font-size: 12px;
    color: var(--muted);
    font-weight: 900;
    margin-top: 3px;
}

.mostLikely {
    text-align: right;
    font-weight: 1000;
    font-size: 18px;
    letter-spacing: -0.01em;
}

.mostLikely small {
    display: block;
    font-size: 12px;
    color: var(--muted);
    font-weight: 900;
    margin-top: 3px;
}

.segWrap {
    margin-top: 12px;
}

.segBar {
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(15, 23, 42, .04);
    display: flex;
}

.seg {
    height: 100%;
}

.seg-win {
    background: var(--win);
}

.seg-lose {
    background: var(--lose);
}

.seg-draw {
    background: var(--draw);
}

.segLegend {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.leg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: #fff;
    font-size: 12px;
    font-weight: 950;
    color: var(--text);
}

.dot.win {
    background: var(--win);
}

.dot.draw {
    background: var(--draw);
}

.dot.lose {
    background: var(--lose);
}

.lockHint {
    margin-top: 10px;
    font-size: 12px;
    color: var(--muted);
    font-weight: 900;
}

.vm-card {
    padding: 14px 14px 16px;
    overflow: visible;
}

.vm-card .mHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e5e7eb;
}

.vm-card .mAuthor {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.vm-card .mAvatar {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(105, 92, 254, .10);
    border: 1px solid rgba(105, 92, 254, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 34px;
}

.vm-card .mAvatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 999px;
}

.vm-card .mWho {
    min-width: 0;
}

.vm-card .mName {
    font-size: 13px;
    font-weight: 1000;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vm-card .mWhen {
    margin-top: 2px;
    font-size: 12px;
    color: var(--muted);
    font-weight: 900;
}

.vm-card .mBody {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text);
    padding: 0px 10px;
}

.vm-card .mText {
    white-space: pre-wrap;
}

.aCard {
    position: relative;
    padding: 14px 14px 16px;
    margin-bottom: 14px;
    overflow: visible;
}

.aHead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.aLeft {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.phaseIcon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: rgba(105, 92, 254, .10);
    border: 1px solid rgba(105, 92, 254, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
}

.phaseIcon i {
    font-size: 20px;
    color: rgba(105, 92, 254, .98);
}

.aTitle {
    margin: 0;
    font-size: 15px;
    font-weight: 1000;
    letter-spacing: -0.02em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aSub {
    margin-top: 4px;
    font-size: 12px;
    color: var(--muted);
    font-weight: 900;
}

.aBody {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.60;
    color: #0f172a;
    white-space: pre-wrap;
}

.divider {
    height: 1px;
    background: rgba(15, 23, 42, .08);
    margin: 12px 0 2px;
}

.aFoot {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 10px;
}

.srcBtn:hover {
    box-shadow: 0 14px 30px rgba(15, 23, 42, .16);
}

.srcDrop::-webkit-scrollbar {
    width: 6px;
}

.srcDrop::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, .18);
    border-radius: 999px;
}

.srcDrop::-webkit-scrollbar-track {
    background: transparent;
}

.srcItem {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
}

.srcItem:last-child {
    border-bottom: none;
}

.srcMeta {
    margin-top: 4px;
    font-size: 12px;
    color: rgba(15, 23, 42, .55);
    font-weight: 900;
}

.srcNote {
    margin-top: 4px;
    font-size: 12px;
    color: var(--muted);
    font-weight: 900;
}

.lockWrap {
    position: relative;
}

.locked .aCard {
    filter: blur(7px);
    pointer-events: none;
    user-select: none;
}

.unlockOverlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.unlockBox {
    width: min(560px, 92%);
    background: rgba(0, 0, 0, .55);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    border-radius: 20px;
    padding: 18px;
    text-align: center;
    backdrop-filter: blur(8px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}

.unlockBox h3 {
    margin: 0 0 6px;
    font-size: 16px;
}

.unlockBox p {
    margin: 0 0 12px;
    font-size: 13px;
    opacity: .92;
}

.unlockBtn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: none;
    cursor: pointer;
    background: var(--primary);
    color: #fff;
    padding: 10px 14px;
    border-radius: 14px;
    font-weight: 1000;
}

.cm-head {
    padding: 12px 9px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
}

.cm-head-right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.cm-count-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    background: #fff;
    padding: 7px 10px;
    border-radius: 999px;
    font-weight: 900;
    color: #0f172a;
}

.cm-count-pill i {
    font-size: 18px;
    opacity: .85;
}

.cm-sort {
    position: relative;
}

.cm-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: rgba(15, 23, 42, .04);
    border-radius: 999px;
    padding: 8px 10px;
    cursor: pointer;
    color: rgba(15, 23, 42, .78);
    font-weight: 1000;
    font-size: 12px;
}

.cm-sort-btn i {
    font-size: 18px;
}

.cm-sort-btn:hover {
    background: rgba(105, 92, 254, .10);
    color: rgba(105, 92, 254, .98);
}

.cm-sort-menu {
    position: absolute;
    top: calc(100% + 0px);
    left: 54px;
    min-width: 190px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .10);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .12);
    border-radius: 14px;
    padding: 6px;
    display: none;
    z-index: 9999;
}

.cm-sort-menu.open {
    display: block;
}

.cm-sort-item {
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 12px;
    color: rgba(15, 23, 42, .78);
    font-weight: 1000;
}

.cm-sort-item i {
    font-size: 18px;
}

.cm-sort-item:hover {
    background: rgba(15, 23, 42, .04);
}

.cm-sort-item.active {
    background: rgba(105, 92, 254, .10);
    color: rgba(105, 92, 254, .98);
}

.cm-list {
    flex: 1 1 auto;
    overflow: auto;
    padding: 12px;
}

.cm-load {
    width: 100%;
    border: 1px dashed rgba(15, 23, 42, .25);
    background: rgba(255, 255, 255, .7);
    border-radius: 14px;
    padding: 10px 12px;
    cursor: pointer;
    font-weight: 1000;
    color: var(--text);
    margin-bottom: 12px;
}

.cm-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.cm-avatar,
.cm-avatarSmall {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    overflow: hidden;
    flex: 0 0 34px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(105, 92, 254, .10);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 1000;
    color: rgba(105, 92, 254, .95);
    font-size: 12px;
}

.cm-avatar img,
.cm-avatarSmall img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cm-stack {
    flex: 1;
    min-width: 0;
}

.cm-card {
    background: var(--commentCard);
    border: 1px solid var(--commentStroke);
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: 0 10px 18px rgba(15, 23, 42, .06);
}

.cm-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.cm-name {
    font-weight: 1000;
    font-size: 13px;
    letter-spacing: -0.01em;
}

.cm-time {
    font-size: 12px;
    color: rgba(15, 23, 42, .55);
    font-weight: 900;
}

.cm-body {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-wrap;
}

.cm-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    padding-left: 6px;
}

.likeBtn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-weight: 1000;
    font-size: 12px;
    color: rgba(15, 23, 42, .75);
    padding: 4px 6px;
    border-radius: 10px;
}

.likeBtn:hover {
    background: rgba(15, 23, 42, .06);
}

.likeBtn.liked {
    color: #b91c1c;
}

.likeBtn i {
    font-size: 16px;
}

.cm-compose {
    border-top: 1px solid rgba(15, 23, 42, .10);
    padding: 12px;
    background: rgba(255, 255, 255, .65);
    backdrop-filter: blur(6px);
}

.cm-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cm-inputWrap {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .14);
    border-radius: 999px;
    padding: 6px 10px;
}

.cm-input {
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    font-size: 14px;
    line-height: 1.35;
    padding: 6px 6px;
    background: transparent;
    max-height: calc(1.35em * 4 + 12px);
    overflow-y: auto;
}

.cm-send {
    width: 40px;
    height: 40px;
    border: none;
    cursor: pointer;
    background: var(--primary);
    color: #fff;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.cm-send:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.hint {
    margin-top: 8px;
    font-size: 12px;
    color: var(--muted);
    font-weight: 900;
}

.vm-sections {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
}

.dataCard {
    padding: 0;
    overflow: hidden;
}

.dataHead {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(15, 23, 42, .10);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: linear-gradient(180deg, rgba(105, 92, 254, .07), rgba(255, 255, 255, .0));
}

.dataTitle {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.dataTitle h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 1100;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dataTitle .mini {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(105, 92, 254, .10);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(105, 92, 254, .95);
    flex: 0 0 28px;
}

.dataPill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, .12);
    background: rgba(255, 255, 255, .8);
    font-weight: 1000;
    font-size: 12px;
    color: rgba(15, 23, 42, .78);
}

.dataPill img {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    object-fit: cover;
}

.dataBody {
    padding: 10px 12px 12px;
}

.tbl {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 720px;
}

.tbl thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    font-size: 12px;
    font-weight: 1100;
    color: rgba(15, 23, 42, .60);
    background: rgba(248, 250, 252, .92);
    border-bottom: 1px solid rgba(15, 23, 42, .10);
    padding: 10px 12px;
    white-space: nowrap;
}

.tbl tbody td {
    padding: 12px;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    vertical-align: middle;
    font-size: 13px;
    font-weight: 900;
    color: rgba(15, 23, 42, .88);
    white-space: nowrap;
}

.tbl tbody tr:last-child td {
    border-bottom: none;
}

.tbl tbody tr:hover td {
    background: rgba(105, 92, 254, .06);
}

.cellTeam {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 220px;
}

.badge24 {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: rgba(105, 92, 254, .10);
    border: 1px solid rgba(15, 23, 42, .10);
    overflow: hidden;
    flex: 0 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge24 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cellSub {
    font-size: 12px;
    font-weight: 900;
    color: rgba(15, 23, 42, .55);
    margin-top: 2px;
}

.stack2 {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.stack2 .main {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scorePill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 1100;
    border: 1px solid rgba(15, 23, 42, .12);
    background: rgba(255, 255, 255, .9);
}

.scorePill.win {
    border-color: rgba(16, 185, 129, .30);
    background: rgba(16, 185, 129, .10);
    color: #047857;
}

.scorePill.lose {
    border-color: rgba(239, 68, 68, .30);
    background: rgba(239, 68, 68, .10);
    color: #b91c1c;
}

.scorePill.draw {
    border-color: rgba(245, 158, 11, .30);
    background: rgba(245, 158, 11, .12);
    color: #92400e;
}

.scorePill.ns {
    border-color: rgba(105, 92, 254, .22);
    background: rgba(105, 92, 254, .10);
    color: rgba(105, 92, 254, .95);
}

.detailsGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.detailRow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 14px;
    background: rgba(255, 255, 255, .85);
}

.detailRow .k {
    font-size: 12px;
    font-weight: 1100;
    color: rgba(15, 23, 42, .60);
}

.detailRow .v {
    font-size: 13px;
    font-weight: 1000;
    color: rgba(15, 23, 42, .88);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 70%;
}

@media (max-width: 1100px) {
    .vm-side {
        width: 420px;
        flex-basis: 420px;
    }
}

@media (max-width: 900px) {
    .vm-page {
        flex-direction: column;
    }

    .vm-side {
        width: 100%;
        flex-basis: auto;
        height: auto;
        position: static;
    }

    .vm-comments {
        height: auto;
    }
}

.vm-cards>.vm-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.srcDock {
    position: relative;
    display: inline-flex;
    justify-content: flex-end;
    width: 100%;
}

.srcDrop[aria-hidden="false"] {
    display: block;
}

.vm-card,
.card,
.vm-cards {
    overflow: visible !important;
}

a {
    color: inherit;
}

.mCard {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: #fff;
    border: 1px solid #e9e9ef;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
    overflow: hidden;
    max-width: 980px;
    margin: 16px auto;
}

.mCardTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px;
    border-bottom: 1px solid #eee;
    background: #fff;
    gap: 12px;
}

.mAuthor {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.mAvatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #f1f1f5;
    flex: 0 0 auto;
}

.mAvatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mWho {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mName {
    font-weight: 700;
    font-size: 14px;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 360px;
}

.mWhen {
    font-size: 12px;
    color: #6b7280;
}

.mCardRight {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid #e8e8f3;
    background: #fbfbff;
    font-size: 12px;
    white-space: nowrap;
}

.pillLabel {
    color: #6b7280;
}

.pillValue {
    font-weight: 800;
}

.pill--pick {
    border-color: rgba(16, 185, 129, .25);
    background: rgba(16, 185, 129, .10);
    color: #065f46;
}

.pill--conf {
    border-color: rgba(105, 92, 254, .20);
    background: rgba(105, 92, 254, .10);
    color: #3b36a8;
}

.pill--score {
    border-color: rgba(59, 130, 246, .18);
    background: rgba(59, 130, 246, .08);
    color: #1e3a8a;
}

.pillHot {
    display: none;
    margin-left: -2px;
    font-size: 16px;
}

.mCardBody {
    padding: 12px 14px 14px;
}

.probBlock {
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 12px;
    background: #fff;
}

.probHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.probTitle {
    font-weight: 800;
}

.probSum {
    font-size: 12px;
    color: #6b7280;
}

.probBar {
    display: flex;
    height: 34px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #eee;
    background: #fafafa;
}

.probSeg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: #111;
    min-width: 44px;
}

.probSeg span {
    mix-blend-mode: multiply;
    opacity: .88;
}

.probSeg--home {
    background: rgba(16, 185, 129, .18);
}

.probSeg--draw {
    background: rgba(234, 179, 8, .18);
}

.probSeg--away {
    background: rgba(239, 68, 68, .16);
}

.probLegend {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.probChip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #374151;
    padding: 6px 10px;
    border: 1px solid #eee;
    border-radius: 999px;
    background: #fff;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
}

.dotHome {
    background: rgba(16, 185, 129, .65);
}

.dotDraw {
    background: rgba(234, 179, 8, .65);
}

.dotAway {
    background: rgba(239, 68, 68, .55);
}

.drivers {
    margin-top: 12px;
}

.secHead {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}

.secTitle {
    font-weight: 800;
}

.secSub {
    font-size: 12px;
    color: #6b7280;
}

.driversList {
    margin: 0;
    padding-left: 18px;
    color: #111;
    font-size: 12px;
}

.driversList li {
    margin: 5px 0;
    color: #111;
    line-height: 1.3;
    font-size: 12px;
}

.driversList li::marker {
    color: #695CFE;
}

.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

@media (max-width:860px) {
    .grid2 {
        grid-template-columns: 1fr;
    }
}

.box {
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 12px;
    background: #fff;
}

.movement {
    margin: -2px 0 10px 0;
    padding: 10px 10px;
    border-radius: 12px;
    background: rgba(99, 102, 241, .08);
    border: 1px solid rgba(99, 102, 241, .18);
    color: #3730a3;
    font-size: 12px;
    line-height: 1.35;
}

.tableWrap {
    overflow: auto;
    border-radius: 12px;
    border: 1px solid #eee;
}

.t {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 460px;
}

.t thead th {
    position: sticky;
    top: 0;
    background: #fafafa;
    color: #6b7280;
    font-weight: 700;
    font-size: 12px;
    border-bottom: 1px solid #eee;
    padding: 10px;
}

.t td {
    border-bottom: 1px solid #f0f0f3;
    padding: 10px;
    vertical-align: middle;
}

.t tr:last-child td {
    border-bottom: none;
}

.t .c {
    text-align: center;
}

.srcName {
    font-weight: 700;
    color: #111;
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.muted {
    color: #9ca3af;
}

.pickPill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #fff;
    font-weight: 800;
}

.pick1 {
    border-color: rgba(16, 185, 129, .25);
    background: rgba(16, 185, 129, .10);
    color: #065f46;
}

.pickX {
    border-color: rgba(234, 179, 8, .25);
    background: rgba(234, 179, 8, .10);
    color: #7c5e00;
}

.pick2 {
    border-color: rgba(239, 68, 68, .22);
    background: rgba(239, 68, 68, .10);
    color: #7f1d1d;
}

.loadMoreRow {
    display: flex;
    justify-content: center;
    padding-top: 10px;
}

.loadMoreBtn {
    appearance: none;
    border: 1px solid rgba(105, 92, 254, .25);
    background: rgba(105, 92, 254, .08);
    color: #3b36a8;
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 800;
    font-size: 12px;
    cursor: pointer;
    transition: transform .05s ease, background .2s ease;
}

.loadMoreBtn:hover {
    background: rgba(105, 92, 254, .12);
}

.loadMoreBtn:active {
    transform: translateY(1px);
}

.loadMoreBtn[disabled] {
    opacity: .55;
    cursor: default;
}

.loadMoreCount {
    color: #6b7280;
    font-weight: 700;
    margin-left: 6px;
}

.footNote {
    margin-top: 12px;
    color: #6b7280;
    font-size: 12px;
}

code {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 2px 6px;
}

.mgSummaryCard {
    padding: 14px 16px;
    max-width: 980px;
    margin: 0 auto;
    border-radius: 16px;
    border: 1px solid #E8ECF6;
    box-shadow: 0 14px 40px rgba(15, 23, 42, .08);
    overflow: hidden;
    background: #fff;
}

.vm-feedHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 10px 12px;
    border-bottom: 1px solid #E8ECF6;
    background: radial-gradient(800px 140px at 18% 0%, rgba(105, 92, 254, .14), transparent 60%),
        #fff;
    border-radius: 12px;
}

.feedLeft {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.feedLiveDot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
    flex: 0 0 auto;
    position: relative;
}

.feedLiveDot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(105, 92, 254, .35);
    animation: livePulse 1.6s infinite;
}

@keyframes livePulse {
    0% {
        transform: scale(1);
        opacity: .8;
    }

    70% {
        transform: scale(2.4);
        opacity: 0;
    }

    100% {
        transform: scale(2.4);
        opacity: 0;
    }
}

.feedLiveDot {
    animation: liveBeat 1.6s infinite;
}

@keyframes liveBeat {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.24);
    }
}

.feedTitle {
    font-weight: 900;
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #111;
}

.feedActions {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

.haBtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid #E8ECF6;
    background: #fff;
    cursor: pointer;
    transition: .15s ease;
    color: rgba(15, 23, 42, .82);
    font-weight: 1000;
}

.haBtn:hover {
    transform: translateY(-1px);
    border-color: #D7DDF0;
}

.haBtn i {
    font-size: 18px;
    color: var(--primary);

}

.haCount {
    font-size: 12px;
    color: var(--muted);
}

.mgSumTop {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
    padding-top: 14px;
}

.mgSumLeft {
    min-width: 0;
    flex: 1 1 980px;
}

.mTeamsRow {
    display: flex;
    justify-content: center;
}

.mTeam {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    width: 100%;
    flex-direction: column;
}

.mTeamLogo {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid #E6EAF7;
    background: #F1F3FF;
    flex: 0 0 auto;
}

.mTeamName {
    font-weight: 950;
    font-size: 16px;
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

.mWinnerBadge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(16, 185, 129, .14);
    border: 1px solid rgba(16, 185, 129, .28);
    color: #065f46;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.mWinnerBadge i {
    font-size: 14px;
}

.mCenterMeta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px dashed rgba(105, 92, 254, .30);
    background: rgba(105, 92, 254, .06);
    min-width: 220px;
    text-align: center;
}

.mVs {
    font-weight: 950;
    color: rgba(15, 23, 42, .60);
    letter-spacing: .5px;
    line-height: 1;
}

.mMetaLine {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
}

.mMetaLine i {
    font-size: 15px;
    color: var(--primary);
}

.mMetaVenue {
    display: inline-block;
    max-width: 139px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mgProbBlock {
    margin-top: 12px;
    border: 1px solid #E8ECF6;
    border-radius: 14px;
    padding: 12px;
    background: #fff;
}

.mgProbHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.mgProbTitle {
    font-weight: 600;
}

.mgProbBar {
    display: flex;
    height: 34px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #E8ECF6;
    background: #fafafa;
}

.mgSeg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 950;
    color: #111;
    min-width: 44px;
}

.mgSeg--home {
    background: rgba(16, 185, 129, .18);
}

.mgSeg--draw {
    background: rgba(59, 130, 246, .18);
}

.mgSeg--away {
    background: rgba(244, 63, 94, .18);
}

.mgProbLegend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.mgLegendLeft,
.mgLegendRight {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.mgProbChip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid #E8ECF6;
    background: #F8FAFF;
    color: #475569;
    font-size: 13px;
    white-space: nowrap;
}

.mgProbChip b {
    color: var(--text);
}

.mgDot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.mgDotHome {
    background: #10B981;
}

.mgDotDraw {
    background: #3B82F6;
}

.mgDotAway {
    background: #F43F5E;
}

.mgConfChip {
    background: rgba(105, 92, 254, .08);
    border-color: rgba(105, 92, 254, .18);
    color: #2b2f44;
    font-weight: 600;
}

.mgConfChip i {
    font-size: 16px;
    color: #F59E0B;
}

.sgTop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.sgSummary {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--stroke);
    border-radius: 16px;
    background: #fff;
    flex: 1;
}

.sgSummary i {
    font-size: 18px;
    color: var(--muted);
    margin-top: 1px;
}

.sgSummaryTitle {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 3px;
}

.sgSummaryText {
    font-size: 14px;
    line-height: 1.35;
}

.sgKick {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
}

.sgKickChip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--stroke);
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
}

.sgKickChip i {
    font-size: 16px;
    color: var(--muted);
}

.sgRows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sgRow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--stroke);
    border-radius: 16px;
    background: #fff;
}

.sgLeft {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 240px;
    flex: 0 0 240px;
}

.sgLeft i {
    font-size: 18px;
    color: var(--muted);
    margin-top: 2px;
}

.sgTeam {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sgName {
    font-size: 14px;
    color: var(--text);
}

.sgMeta {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.2;
}

.sgMid {
    flex: 1;
}

.sgBar {
    height: 10px;
    border: 1px solid var(--stroke);
    border-radius: 999px;
    background: #F1F5F9;
    overflow: hidden;
}

.sgFill {
    height: 100%;
    border-radius: 999px;
    background: rgba(105, 92, 254, .45);
}

.sgRight {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    min-width: 72px;
    flex: 0 0 72px;
}

.sgPos {
    font-size: 12px;
    color: var(--muted);
    border: 1px solid var(--stroke);
    background: #fff;
    padding: 4px 8px;
    border-radius: 999px;
}

.sgPts {
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(105, 92, 254, .25);
    background: rgba(105, 92, 254, .08);
    color: var(--text);
}

@media (max-width:680px) {
    .sgTop {
        flex-direction: column;
        align-items: stretch;
    }

    .sgKick {
        align-items: flex-start;
    }

    .sgRow {
        flex-direction: column;
        align-items: stretch;
    }

    .sgLeft {
        flex: 1;
        min-width: auto;
    }

    .sgRight {
        flex-direction: row;
        justify-content: space-between;
        min-width: auto;
    }
}

.pick-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(105, 92, 254, .10);
    border: 1px solid rgba(105, 92, 254, .20);
    font-weight: 850;
    color: #2b2675;
    font-size: 11px;
    letter-spacing: -.1px;
    white-space: nowrap;
}

.pick-pill i {
    font-size: 16px;
}

.vm-cards {
    width: 100%;
    max-width: none !important;
}

.vm-cards .mCard {
    max-width: none !important;
    margin: 0px 19px;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, .08);
    background: #fff;
    box-shadow: 0 8px 22px rgba (15, 23, 42, .06);
    overflow: hidden;
    display: flex !important;
    flex-direction: column !important;
    margin-top: 14px;
}

.vm-cards .mHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.vm-cards .mAuthor {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.vm-cards .mAvatar {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(15, 23, 42, .03);
    flex: 0 0 auto;
}

.vm-cards .mAvatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vm-cards .mWho {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.vm-cards .mName {
    font-weight: 700;
    font-size: 13px;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}

.vm-cards .mWhen {
    font-size: 12px;
    color: #64748b;
}

.vm-cards .mHeadRight {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.vm-cards .mTitlePill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(105, 92, 254, .22);
    background: rgba(105, 92, 254, .08);
    color: #0f172a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2px;
    white-space: nowrap;
}

.vm-cards .mTitlePill i {
    font-size: 14px;
    color: var(--primary, #695CFE);
}

.vm-cards .mImpactPill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, .35);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .2px;
    white-space: nowrap;
    line-height: 1;
}

.vm-cards .mImpactPill--pos {
    background: rgba(16, 185, 129, .16);
    border-color: rgba(16, 185, 129, .28);
    color: #065f46;
}

.vm-cards .mImpactPill--zero {
    background: rgba(59, 130, 246, .14);
    border-color: rgba(59, 130, 246, .24);
    color: #1e3a8a;
}

.vm-cards .mImpactPill--neg {
    background: rgba(244, 63, 94, .14);
    border-color: rgba(244, 63, 94, .24);
    color: #7f1d1d;
}

.vm-cards .mBody {
    padding: 10px 2px 2px;
}

.mgMuted {
    color: #64748b;
    font-size: 13px;
    line-height: 1.4;
}

.mgNo {
    color: #94a3b8;
}

.mgRow {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.mgChip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, .08);
    background: #ffffff;
    font-size: 12px;
    color: #0f172a;
    flex: 1 1 220px;
    min-width: 220px;
}

.mgChip i {
    font-size: 16px;
    color: var(--primary, #695CFE);
}

.mgK {
    color: #64748b;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .2px;
}

.mgV {
    font-weight: 700;
    color: #0f172a;
}

.mgSummary {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: 14px;
    color: #0f172a;
    padding-left: 19px;
}

.mgSummary i {
    font-size: 18px;
    color: var(--primary, #695CFE);
    margin-top: 1px;
}

.mgSummary .mgSummaryTitle {
    font-weight: 700;
    color: #0f172a;
    font-size: 13px;
    margin-bottom: 2px;
}

.mgHint {
    margin-top: 6px;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.35;
}

.mgSummary .mgSummaryText {
    color: #334155;
    font-size: 13px;
    line-height: 1.35;
}

.mgBlock {
    border: 1px solid rgba(15, 23, 42, .08);
    background: #ffffff;
    border-radius: 14px;
    padding: 12px;
    margin-top: 10px;
}

.mgBlockTitle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #0f172a;
}

.mgBlockTitle i {
    color: var(--primary, #695CFE);
    font-size: 18px;
}

.mgList {
    margin: 10px 0 0 0;
    padding: 0;
    list-style: none;
}

.mgList li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0;
    border-top: 1px dashed rgba(15, 23, 42, .10);
}

.mgList li:first-child {
    border-top: 0;
    padding-top: 0;
}

.mgBullet {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .18);
    margin-top: 7px;
    flex: 0 0 auto;
}

.mgStrong {
    font-weight: 700;
    color: #0f172a;
}

.mgMain {
    font-weight: 650;
    color: #0f172a;
}

.mgGrid2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.mgMetric {
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 14px;
    padding: 10px 12px;
    background: #fff;
}

.mgMetricTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mgMetricLabel {
    font-size: 11px;
    color: #64748b;
    font-weight: 700;
    letter-spacing: .2px;
}

.mgMetricValue {
    font-size: 14px;
    color: #0f172a;
    font-weight: 800;
}

.mgMetricSub {
    margin-top: 4px;
    font-size: 12px;
    color: #64748b;
}

.mgPillRow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.mgPill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(15, 23, 42, .02);
    font-size: 12px;
    color: #0f172a;
    font-weight: 600;
}

.mgPill .mgPillK {
    color: #64748b;
    font-weight: 700;
}

.mgPill .mgPillV {
    color: #0f172a;
    font-weight: 650;
}

.mgPillRow--tight {
    margin-top: 8px;
    gap: 6px;
}

.mgOddsGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 720px) {
    .mgOddsGrid {
        grid-template-columns: 1fr;
    }
}

.mgOddsBox {
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 14px;
    padding: 10px 12px;
    background: #fff;
}

.mgOddsK {
    font-size: 11px;
    color: #64748b;
    font-weight: 700;
    letter-spacing: .2px;
    margin-bottom: 6px;
}

.mgOddsRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-top: 1px dashed rgba(15, 23, 42, .10);
    font-size: 13px;
    color: #0f172a;
}

.mgOddsRow:first-of-type {
    border-top: 0;
}

.mgType {
    color: #0f172a;
    font-size: 13px;
    line-height: 1.2;
}

.mgTable {
    margin-top: 10px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.mgTHead,
.mgTRow {
    display: grid;
    grid-template-columns: var(--mg-cols, 1.4fr 1fr 1fr 1fr);
    gap: 10px;
    padding: 10px 12px;
    font-size: 12px;
}

.mgTHead {
    background: rgba(15, 23, 42, .02);
    color: #64748b;
    font-weight: 700;
}

.mgTRow {
    border-top: 1px solid rgba(15, 23, 42, .06);
    color: #0f172a;
}

.mgTRow .mgNo {
    font-size: 12px;
}

.mgPlayer {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.mgPlayerImg {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .06);
    border: 1px solid rgba(15, 23, 42, .08);
    overflow: hidden;
    flex: 0 0 auto;
}

.mgPlayerImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mgPlayerName {
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mgTeamTag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .04);
    border: 1px solid rgba(15, 23, 42, .08);
    color: #334155;
    font-size: 11px;
    font-weight: 700;
    margin-left: 6px;
}

.mSources {
    position: relative;
}

.srcBtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(15, 23, 42, .03);
    color: #0f172a;
    font-weight: 800;
    font-size: 12px;
    cursor: pointer;
}

.srcDrop {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 220px;
    max-width: 320px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 14px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .12);
    padding: 8px;
    z-index: 40;
    display: none;
}

.srcDock.open .srcDrop {
    display: block;
}

.srcItem a {
    display: block;
    padding: 9px 10px;
    border-radius: 12px;
    color: #0f172a;
    text-decoration: none;
    font-size: 13px;
    font-weight: 750;
}

.srcItem a:hover {
    background: rgba(105, 92, 254, .08);
}

.oddsTable {
    margin-top: 10px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 14px;
    overflow: hidden;
}

.oddsHead,
.oddsRow {
    display: grid;
    grid-template-columns: 1.2fr .7fr .5fr .4fr;
    gap: 10px;
    padding: 10px 12px;
}

.oddsHead {
    background: rgba(15, 23, 42, .03);
    font-size: 11px;
    font-weight: 900;
    color: #475569;
}

.oddsRow {
    border-top: 1px solid rgba(15, 23, 42, .06);
    font-size: 12px;
}

.oddsRow .mgStrong {
    font-weight: 900;
}

.oddsMoreWrap {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.oddsMoreBtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 12px;
    border: 1px solid rgba(105, 92, 254, .22);
    background: rgba(105, 92, 254, .08);
    color: #0f172a;
    font-weight: 700;
    cursor: pointer;
}

.oddsMoreBtn i {
    color: var(--primary, #695CFE);
}

.mgcm-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}

.mgcm-main {
    flex: 1;
    min-width: 0;
}

.mgcm-moreCol {
    flex: 0 0 auto;
}

.mgcm-moreAnchor {
    position: relative;
    width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mgcm-moreBtn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.mgcm-moreBtn i {
    font-size: 18px;
    line-height: 1;
}

.mgcm-moreMenu {
    position: absolute;
    right: 0;
    top: 38px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .12);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .12);
    border-radius: 12px;
    padding: 6px;
    z-index: 999999;
    min-width: 140px;
}

.mgcm-delBtn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    padding: 10px 10px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
}

.mgcm-delBtn:hover {
    background: rgba(15, 23, 42, .06);
}

.liveAgentsNotice {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0px 19px;
    padding: 14px 18px;
    border-radius: 12px;
    background-color: white;
}

.lanIcon {
    font-size: 20px;
    color: #636363;
    flex-shrink: 0;
    opacity: .95;
}

.lanText {
    flex: 1;
    font-size: 13px;
    color: #374151;
    line-height: 1.5;
}

.lanAvatars {
    display: flex;
    align-items: center;
}

.lanAva {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    margin-left: -10px;
    background: #fff;
    box-shadow: 0 0 0 2px #fff;
}

.lanAva:first-child {
    margin-left: 0;
}

.lanAva img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #dfdfdf;
}


/* =========================
   MOBILE COMMENTS PANEL
   ========================= */

.cm-mobile-sticky,
.cm-mobile-panel {
    display: none;
}

.cm-mobile-headActions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cm-mobile-close {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 999px;
    background: rgba(15, 23, 42, .05);
    color: rgba(15, 23, 42, .82);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cm-mobile-close i {
    font-size: 20px;
}

@media (max-width: 900px) {
    .vm-page {
        flex-direction: column;
        padding-bottom: 76px;
    }

    .vm-side {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        width: 0 !important;
        flex: 0 0 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: fixed !important;
        left: -99999px !important;
        top: 0 !important;
    }

    .cm-mobile-sticky {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 54px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        background: rgba(255, 255, 255, .98);
        border-top: 1px solid rgba(15, 23, 42, .10);
        box-shadow: 0 -8px 24px rgba(15, 23, 42, .10);
        z-index: 9200;
        cursor: pointer;
    }

    .cm-mobile-sticky-avatar {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        border-radius: 999px;
        overflow: hidden;
        border: 1px solid rgba(15, 23, 42, .10);
        background: rgba(105, 92, 254, .10);
        color: rgba(105, 92, 254, .95);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 1000;
    }

    .cm-mobile-sticky-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .cm-mobile-sticky-text {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cm-mobile-sticky-arrow {
        width: 28px;
        height: 28px;
        flex: 0 0 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary);
    }

    .cm-mobile-sticky-arrow i {
        font-size: 22px;
    }

    .cm-mobile-panel {
        position: fixed;
        inset: 0;
        z-index: 9300;
        display: block;
        pointer-events: none;
        visibility: hidden;
    }

    .cm-mobile-panel.open {
        pointer-events: auto;
        visibility: visible;
    }

    .cm-mobile-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(15, 23, 42, .42);
        opacity: 0;
        transition: opacity .22s ease;
    }

    .cm-mobile-panel.open .cm-mobile-backdrop {
        opacity: 1;
    }

    .cm-mobile-sheet {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: min(90vh, 100%);
        background: var(--commentsPanel);
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -18px 48px rgba(15, 23, 42, .22);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transform: translateY(100%);
        transition: transform .24s ease;
    }

    .cm-mobile-panel.open .cm-mobile-sheet {
        transform: translateY(0);
    }

    .cm-mobile-grabberWrap {
        display: flex;
        justify-content: center;
        padding: 8px 0 4px;
        background: #fff;
        border-bottom: 1px solid rgba(15, 23, 42, .06);
    }

    .cm-mobile-grabber {
        width: 42px;
        height: 5px;
        border-radius: 999px;
        background: rgba(15, 23, 42, .18);
    }

    #cListMobile {
        flex: 1 1 auto;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }

    .cm-compose-mobile {
        background: rgba(255, 255, 255, .96);
        backdrop-filter: blur(8px);
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
}


/* ===== MOBILE COMMENTS PANEL FINAL OVERRIDES ===== */
.cm-mobile-sticky,
.cm-mobile-panel {
    display: none;
}

.cm-mobile-headActions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cm-mobile-close {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 999px;
    background: rgba(15, 23, 42, .05);
    color: rgba(15, 23, 42, .82);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cm-mobile-close i {
    font-size: 20px;
}

@media (max-width: 900px) {
    .vm-page {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 12px;
        gap: 12px;
        overflow-x: hidden;
        padding-bottom: 96px;
    }

    .vm-main {
        width: 100%;
        min-width: 0;
    }

    .vm-side {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        width: 0 !important;
        flex: 0 0 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: fixed !important;
        left: -99999px !important;
        top: 0 !important;
    }

    .vm-comments {
        height: 0 !important;
        min-height: 0 !important;
    }

    .mgSummaryCard {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .vm-cards {
        width: 100%;
        max-width: none !important;
        margin: 0;
        padding: 0;
    }

    .vm-cards .mCard {
        width: 100%;
        max-width: none !important;
        margin: 14px 0 0 0 !important;
        padding: 10px;
    }

    .mgSummary {
        padding-left: 12px;
        padding-right: 12px;
    }

    .cm-mobile-sticky {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: 8px;
        min-height: 64px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        background: rgba(255, 255, 255, .98);
        border: 1px solid rgba(15, 23, 42, .10);
        border-radius: 16px;
        box-shadow: 0 -8px 24px rgba(15, 23, 42, .10);
        z-index: 9200;
        cursor: pointer;
    }

    .cm-mobile-sticky-avatar {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        border-radius: 999px;
        overflow: hidden;
        border: 1px solid rgba(15, 23, 42, .10);
        background: rgba(105, 92, 254, .10);
        color: rgba(105, 92, 254, .95);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 1000;
    }

    .cm-mobile-sticky-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .cm-mobile-sticky-text {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 14px;
        font-weight: 800;
        color: #0f172a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cm-mobile-sticky-arrow {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary);
    }

    .cm-mobile-sticky-arrow i {
        font-size: 24px;
    }

    .cm-mobile-panel {
        position: fixed;
        inset: 0;
        z-index: 9300;
        display: block;
        pointer-events: none;
        visibility: hidden;
    }

    .cm-mobile-panel.open {
        pointer-events: auto;
        visibility: visible;
    }

    .cm-mobile-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(15, 23, 42, .42);
        opacity: 0;
        transition: opacity .22s ease;
    }

    .cm-mobile-panel.open .cm-mobile-backdrop {
        opacity: 1;
    }

    .cm-mobile-sheet {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 54vh;
        min-height: 380px;
        max-height: 100vh;
        background: var(--commentsPanel);
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -18px 48px rgba(15, 23, 42, .22);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        touch-action: pan-y;
        transform: translateY(100%);
        transition: height .22s ease, transform .22s ease, border-radius .22s ease;
    }

    .cm-mobile-panel.open .cm-mobile-sheet {
        transform: translateY(0);
    }

    .cm-mobile-panel.expanded .cm-mobile-sheet {
        height: 100vh;
        border-radius: 0;
    }

    .cm-mobile-grabberWrap {
        display: flex;
        justify-content: center;
        padding: 10px 0 8px;
        background: #fff;
        border-bottom: 1px solid rgba(15, 23, 42, .06);
        touch-action: none;
        cursor: grab;
    }

    .cm-mobile-grabber {
        width: 42px;
        height: 5px;
        border-radius: 999px;
        background: rgba(15, 23, 42, .18);
    }

    #cListMobile {
        flex: 1 1 auto;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }

    .cm-compose-mobile {
        background: rgba(255, 255, 255, .98);
        backdrop-filter: blur(8px);
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
}


.mgSummaryCard {
    position: relative;
}

.mgSummaryCard.is-locked {
    overflow: hidden;
}

.mgSummaryCard.is-locked>*:not(#unlockOverlay) {
    filter: none;
    pointer-events: auto;
    user-select: auto;
}

.unlockOverlay {
    position: absolute;
    inset: 0;
    z-index: 7;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(255, 255, 255, .50);
    backdrop-filter: blur(2px);
}

.unlockBox {
    width: min(420px, 100%);
    background: rgba(255, 255, 255, .98);
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .16);
    padding: 18px 16px;
    text-align: center;
}

.unlockBox h3 {
    margin: 0 0 8px;
}

.unlockBox p {
    margin: 0 0 14px;
}

.unlockBtn {
    cursor: pointer;
}

@media (max-width: 900px) {
    .unlockOverlay {
        padding: 12px;
    }

    .unlockBox {
        border-radius: 16px;
        padding: 16px 14px;
    }
}


:root {
    --cm-vh: 100dvh;
}

.mgSummaryCard.is-locked {
    padding: 0;
    min-height: 240px;
    display: flex;
    align-items: stretch;
}

.mgSummaryLockCard {
    width: 100%;
    min-height: 240px;
    display: flex;
    flex-direction: column;
}

.mgSummaryLockHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    background: linear-gradient(180deg, rgba(105, 92, 254, .05), rgba(105, 92, 254, 0));
}

.mgSummaryLockBody {
    flex: 1 1 auto;
    min-height: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px 18px 28px;
    text-align: center;
}

.mgSummaryLockText {
    max-width: 520px;
    color: #334155;
    font-size: 14px;
    line-height: 1.6;
}

.mgSummaryUnlockBtn {
    min-width: 180px;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.mgSummaryCard.is-locked .unlockOverlay {
    display: none !important;
}

@media (max-width: 900px) {
    .mTeamsRow {
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px 10px;
    }

    .mTeamsRow .mTeam {
        flex: 1 1 calc(50% - 10px);
        min-width: 132px;
    }

    .mTeamsRow .mCenterMeta {
        order: 3;
        width: 100%;
        align-items: center;
    }

    .mgSummaryCard.is-locked,
    .mgSummaryLockCard {
        min-height: 210px;
    }

    .mgSummaryLockHead {
        padding: 14px 14px;
    }

    .mgSummaryLockBody {
        min-height: 150px;
        padding: 20px 14px 24px;
    }

    .cm-mobile-panel {
        padding-top: env(safe-area-inset-top, 0px);
    }

    .cm-mobile-sheet {
        height: 54svh;
        min-height: 360px;
        max-height: var(--cm-vh);
    }

    .cm-mobile-panel.expanded .cm-mobile-sheet {
        height: var(--cm-vh);
        max-height: var(--cm-vh);
        border-radius: 0;
    }

    .cm-mobile-grabberWrap,
    .cm-head {
        padding-top: max(0px, env(safe-area-inset-top, 0px));
    }

    .cm-mobile-headActions,
    .cm-head-right {
        min-height: 44px;
    }
}


/* v4 adjustments */
.mgSummaryCard.is-locked {
    min-height: 188px;
}

.mgSummaryLockCard {
    min-height: 188px;
}

.mgSummaryLockHead.vm-feedHead {
    padding: 14px 16px;
    min-height: 62px;
}

.mgSummaryLockHead .feedActions .haBtn[disabled] {
    opacity: 1;
    filter: none;
    cursor: pointer;
}

.mgSummaryLockBody {
    min-height: 126px;
    padding: 20px 18px 22px;
    gap: 14px;
}

.mgSummaryUnlockBtn {
    position: relative;
    z-index: 2;
    filter: none !important;
    backdrop-filter: none !important;
}

@media (max-width: 900px) {

    .mgSummaryCard.is-locked,
    .mgSummaryLockCard {
        min-height: 168px;
    }

    .mgSummaryLockHead.vm-feedHead {
        padding: 12px 14px;
    }

    .mgSummaryLockBody {
        min-height: 112px;
        padding: 16px 14px 18px;
        gap: 12px;
    }

    .mgSummaryLockText {
        font-size: 13px;
        line-height: 1.5;
    }

    .cm-mobile-panel {
        padding-top: 0;
    }

    .cm-mobile-sheet {
        padding-top: env(safe-area-inset-top, 0px);
    }

    .cm-head {
        padding-top: 0;
    }

    .liveAgentsNotice {
        flex-direction: column;
        margin: 0px;
    }

}


/* v5 lock card interaction */
.mgSummaryLockHead .feedActions .haBtn {
    opacity: 1;
    filter: none !important;
    pointer-events: auto;
}

.mgSummaryUnlockBtn {
    filter: none !important;
    opacity: 1 !important;
}