*{box-sizing:border-box}body{margin:0;background:#f6f7f9;color:#172333;font:15px/1.6 Arial,sans-serif}
a{color:#0969c7}button,a{touch-action:manipulation}button{cursor:pointer}
header{background:#fff;border-bottom:1px solid #e1e5eb}
.wrap{max-width:1200px;margin:auto;padding:22px}
.top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.brand{font-size:26px;font-weight:bold;color:#173b32;text-decoration:none}
.telegram{background:#087bbd;color:white;padding:9px 16px;border-radius:6px;text-decoration:none}
h1{font-size:25px;margin:12px 0}h2{font-size:20px}h3{font-size:17px}
.sub,.muted{color:#657181}.notice{background:#fff8e8;border:1px solid #ead5a6;padding:12px;border-radius:6px}
.panel{background:white;border:1px solid #e1e5eb;border-radius:8px;margin:20px 0;overflow:hidden}
.panelhead{padding:14px 18px;border-bottom:1px solid #e1e5eb;font-weight:bold}
table{width:100%;border-collapse:collapse}th,td{padding:13px 12px;text-align:left;border-bottom:1px solid #eef0f3}
th{font-size:12px;color:#657181;text-transform:uppercase;background:#fafbfc}
tbody tr:nth-child(even){background:#f4f5f7}.league{display:inline-block;background:#168b66;color:white;padding:4px 8px;font-size:12px;border-radius:3px}
.pick{font-weight:bold}.score{color:#0969c7;font-weight:bold;white-space:nowrap}
.state{font-weight:bold;white-space:nowrap}.pending{color:#0969c7}.win{color:#15803d}.loss{color:#c22d38}.review{color:#657181}
.analysis{border:1px solid #cdd8e3;background:white;color:#0969c7;padding:6px 10px;border-radius:4px;font:inherit;white-space:nowrap;text-decoration:none}
.history{padding:16px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.token{padding:2px 7px;color:white;border-radius:3px}.token.win{background:#15803d}.token.loss{background:#c22d38}
.article{background:white;padding:24px;border:1px solid #e1e5eb;border-radius:8px;margin-top:18px}
.probs{display:flex;gap:12px;flex-wrap:wrap;margin:15px 0}.prob{background:#edf5f1;padding:10px 16px;border-radius:5px}
.stats{overflow:auto}.stats table{min-width:560px}.copy p{margin:12px 0}.copy h3{margin-top:24px}
footer{color:#657181;padding:20px 0;font-size:13px}
dialog{width:min(850px,94vw);max-height:90vh;border:0;padding:0;border-radius:10px;box-shadow:0 15px 80px #0005}
dialog::backdrop{background:#13202e99}.modalbar{position:sticky;top:0;background:white;padding:12px 20px;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:center;z-index:1}
.close{font-size:24px;border:0;background:none;padding:4px 12px}.modalbody{padding:20px}
@media(max-width:700px){
.wrap{padding:14px}.brand{font-size:22px}.telegram{font-size:13px;padding:8px}
#matches thead{display:none}#matches tbody,#matches tr{display:block}
#matches tr{padding:12px 14px;border-bottom:1px solid #ddd}
#matches td{display:block;border:0;padding:3px 0}
#matches td:nth-child(1),#matches td:nth-child(2){display:inline-block;margin-right:10px}
#matches td:nth-child(3){font-weight:bold;font-size:16px}
#matches td:nth-child(4)::before{content:"Prediction: ";font-weight:normal;color:#657181}
#matches td:nth-child(5)::before{content:"Score: ";font-weight:normal;color:#657181}
#matches td:nth-child(6){display:inline-block;margin-right:15px}
#matches td:nth-child(7){display:inline-block;margin-top:8px}
dialog{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;border-radius:0;margin:0}
.article{padding:16px}
}

/* Mobile-first refinements */
html {
    -webkit-text-size-adjust: 100%;
}
body {
    overflow-wrap: anywhere;
}
button, a[data-analysis] {
    touch-action: manipulation;
}
@media (max-width: 700px) {
    body {
        margin: 0;
        font-size: 15px;
        line-height: 1.5;
    }
    header {
        padding: 12px !important;
        gap: 10px;
        flex-wrap: wrap;
    }
    header a {
        white-space: nowrap;
    }
    main {
        padding: 14px 12px !important;
        margin: 0 auto !important;
        width: auto !important;
    }
    h1 {
        font-size: 23px !important;
        line-height: 1.25;
        margin: 8px 0 12px;
    }
    main > p {
        margin: 8px 0 12px;
        font-size: 14px;
    }

    /* Fixture table becomes compact match cards */
    table:has(a[data-analysis]) {
        display: block;
        width: 100%;
        border: 0;
        background: transparent;
    }
    table:has(a[data-analysis]) thead {
        display: none;
    }
    table:has(a[data-analysis]) tbody {
        display: grid;
        gap: 12px;
    }
    table:has(a[data-analysis]) tbody tr {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px 12px;
        padding: 14px !important;
        border: 1px solid #dde5e8;
        border-radius: 12px;
        background: #fff !important;
        box-shadow: 0 2px 5px rgba(15, 40, 35, .03);
    }
    table:has(a[data-analysis]) tbody td {
        display: block !important;
        padding: 0 !important;
        border: 0 !important;
        min-width: 0;
        text-align: left;
    }
    table:has(a[data-analysis]) tbody td::before {
        display: none !important;
    }
    table:has(a[data-analysis]) td:nth-child(1) {
        grid-column: 1;
        font-size: 12px;
    }
    table:has(a[data-analysis]) td:nth-child(2) {
        grid-column: 2;
        text-align: right;
        font-size: 12px;
        color: #64748b;
    }
    table:has(a[data-analysis]) td:nth-child(3) {
        grid-column: 1 / -1;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.4;
        padding-top: 4px !important;
    }
    table:has(a[data-analysis]) td:nth-child(4) {
        grid-column: 1 / -1;
        padding: 9px 10px !important;
        border-radius: 7px;
        background: #edf8f2;
        color: #126746;
        font-size: 14px;
    }
    table:has(a[data-analysis]) td:nth-child(4)::before {
        content: "Prediction: ";
        display: inline !important;
        position: static !important;
        font-weight: 400;
    }
    table:has(a[data-analysis]) td:nth-child(5) {
        grid-column: 1;
        font-size: 14px;
    }
    table:has(a[data-analysis]) td:nth-child(5)::before {
        content: "Score: ";
        display: inline !important;
        position: static !important;
        color: #64748b;
    }
    table:has(a[data-analysis]) td:nth-child(6) {
        grid-column: 2;
        text-align: right;
        font-size: 14px;
    }
    table:has(a[data-analysis]) td:nth-child(7) {
        grid-column: 1 / -1;
    }
    a[data-analysis] {
        display: flex !important;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 100%;
        min-height: 44px;
        margin-top: 3px;
        background: #14865d;
        color: #fff !important;
        border: 1px solid #14865d !important;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 600;
    }

    /* Analysis dialog */
    dialog {
        box-sizing: border-box;
        width: calc(100vw - 16px) !important;
        max-width: none !important;
        max-height: calc(100dvh - 16px) !important;
        margin: auto;
        padding: 16px !important;
        border-radius: 12px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    dialog::backdrop {
        background: rgba(10, 25, 20, .65);
    }
    dialog button {
        min-width: 44px;
        min-height: 44px;
    }
    #articleContent {
        font-size: 15px;
        line-height: 1.7;
    }
    #articleContent h1 {
        font-size: 22px !important;
    }
    #articleContent h3 {
        font-size: 18px;
        margin-top: 22px;
    }
    #articleContent table {
        width: 100%;
        font-size: 12px;
    }
    #articleContent th,
    #articleContent td {
        padding: 7px 4px;
    }
    footer {
        padding: 18px 12px !important;
        font-size: 12px;
        line-height: 1.6;
    }
}

/* Independent modal header and scrolling article */
#analysisDialog[open] {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: min(850px, calc(100vw - 24px)) !important;
    height: 90vh !important;
    height: 90dvh !important;
    max-height: 90dvh !important;
    margin: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 12px;
}
#analysisDialog .modalbar {
    position: static !important;
    flex: 0 0 auto;
    min-height: 60px;
    padding: 8px 16px;
    gap: 12px;
    background: #fff;
    border-bottom: 1px solid #e1e5eb;
}
#analysisDialog #fullArticle {
    font-size: 14px;
    line-height: 1.4;
}
#analysisDialog #closeDialog {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 28px;
    border-radius: 8px;
}
#analysisDialog #modalBody {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
}
#analysisDialog #articleContent {
    margin: 0;
    min-width: 0;
}
#analysisDialog #articleContent h1 {
    margin-top: 0;
}
#analysisDialog .stats {
    overflow-x: auto;
}
@media (max-width: 700px) {
    #analysisDialog[open] {
        width: calc(100vw - 16px) !important;
        height: calc(100dvh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        margin: auto !important;
        border-radius: 12px;
    }
}