/* The settlement panel's own layer on top of the user site's theme: the controls the site never had (market bars,
   runner actions, the settled section), the merged scorecard, the bets modal, and the pieces its other pages are
   built from (see the #view block). */


/* the site's odds boxes: nothing happens on a click here */
.market-odd-box[data-inert] { cursor: default; }
/* the fixtures rows: a match with bets stands out */
.bet-table-row.has-bets .bet-nation-game-name span:first-child { font-weight: 700; }
.bet-table-row .odd-box { cursor: default; }
.sports-tab .nav-item.ms-auto .nav-link { border: 1px dashed rgba(255, 255, 255, .4); }

/* market title bar: state, money, Settle / View more / hold */
.market-title { flex-wrap: wrap; gap: 4px 8px; }
.mk-bar { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-weight: 400; font-size: 12px; flex-wrap: wrap; }
.mk-bar .btn, .mk-ract .btn { padding: 1px 8px; font-size: 11px; line-height: 1.5; }
.mk-state { display: inline-block; padding: 0 6px; border-radius: 3px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; background: rgba(255, 255, 255, .2); color: #fff; }
.mk-state.open { background: #198754; } .mk-state.proposed { background: #0dcaf0; color: #000; } .mk-state.disputed { background: #dc3545; } .mk-state.held { background: #fd7e14; color: #000; } .mk-state.settled { background: #6c757d; } .mk-state.void { background: #343a40; }
.mk-ready { display: inline-flex; align-items: center; gap: 4px; background: rgba(255, 235, 59, .25); padding: 1px 6px; border-radius: 4px; }
.mk-ready b { color: #ffe066; }
.market-6 .mk-ready b, .mk-ract .mk-ready b { color: #b45309; }
/* a runner that can be settled by a click on its name */
.market-nation-name[data-mk="settle"] { cursor: pointer; }
.market-nation-name[data-mk="settle"]:hover { text-decoration: underline; }
/* fancy runner controls, inside the name */
.mk-ract { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; font-weight: 400; font-size: 11px; vertical-align: middle; }
.mk-ract .mk-state { font-size: 9.5px; padding: 0 4px; }
.mk-ico { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 4px; background: rgba(0, 0, 0, .08); color: inherit; cursor: pointer; }
.mk-ico:hover { background: rgba(0, 0, 0, .18); }
.mk-wrap { display: contents; }                         /* the site's market blocks stay direct children of the flex row: their own widths apply */
.mk-wrap.off-feed .market-body { opacity: .85; }
.mk-settled { width: 100%; }
.detail-page-container > .menu-tabs, .detail-page-container > [data-role] { width: 100%; }
.mk-wrap.off-feed .market-title::after { content: 'no live feed — the panel\'s own data'; font-size: 10px; font-weight: 400; opacity: .8; width: 100%; }
/* the settled markets, by category, at the bottom */
.mk-settled .mk-cat { padding: 4px 6px; }
.mk-settled .mk-cat-title { font-size: 12px; font-weight: 700; text-transform: uppercase; opacity: .75; padding: 4px 0 2px; }
.mk-settled .market-row.mk-done { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 6px; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.mk-settled .market-row.mk-done .market-nation-detail { flex: 1; display: flex; justify-content: space-between; }
.mk-done-acts { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; white-space: nowrap; }
.mk-info table { font-size: 12px; margin-bottom: 6px; }
.mk-info a[data-mk="card"] { cursor: pointer; text-decoration: underline; }

/* the merged scorecard */
.mk-scorebox { font-size: 12px; }
.sc-tabs { flex-wrap: nowrap; overflow-x: auto; margin-bottom: 4px; }
.sc-tabs .nav-link { padding: 3px 8px; font-size: 12px; white-space: nowrap; }
.sc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding: 4px 2px; }
.sc-team { font-weight: 700; } .sc-score { font-size: 14px; } .sc-src small { margin-right: 4px; opacity: .6; }
.sc-nav { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; }
.sc-balls { display: flex; flex-wrap: wrap; gap: 3px; padding: 4px 0; align-items: center; }
.sc-ball { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 5px; border-radius: 50%; background: #e9ecef; font-weight: 700; font-size: 12px; }
.sc-ball.four { background: #cfe2ff; color: #0b3d91; } .sc-ball.six { background: #d1e7dd; color: #0f5132; } .sc-ball.w { background: #dc3545; color: #fff; } .sc-ball.x { background: #fff3cd; color: #664d03; }
.sc-from { opacity: .6; margin-left: 4px; }
.sc-facts th { width: 26%; font-weight: 600; opacity: .8; }
.sc-facts td, .sc-facts th, .sc-bat td, .sc-bat th, .sc-all td, .sc-all th { padding: 2px 4px; font-size: 12px; }
.sc-fow { padding: 4px 0; } .sc-fow .w { display: inline-block; background: #dc3545; color: #fff; padding: 0 5px; border-radius: 3px; font-weight: 700; font-size: 11px; }
.sc-bat tr.out td { opacity: .65; }
.sc-all { max-height: 260px; overflow: auto; margin-top: 6px; border-top: 1px solid rgba(0, 0, 0, .08); }
.sc-all tr[data-action] { cursor: pointer; } .sc-all tr.on td { background: #fff3cd; } .sc-all tr.differ td:nth-child(2) { color: #b02a37; }
.sc-differ { display: inline-flex; flex-wrap: wrap; gap: 6px; color: #b02a37; } .sc-differ small { opacity: .8; }
.sc-none { opacity: .55; } .sc-empty { padding: 10px; opacity: .7; }

/* the bets modal */
.bets-more label { font-size: 11px; margin-bottom: 1px; opacity: .8; }
.bets-more .table { font-size: 12px; } .bets-more .table td, .bets-more .table th { padding: 3px 5px; white-space: nowrap; }
.bets-more tr.back-border td:first-child { border-left: 3px solid #72bbef; } .bets-more tr.lay-border td:first-child { border-left: 3px solid #faa9ba; }
.bets-more tr.in-range td { background: #fff3cd; }
.bets-more .nav-tabs .nav-link { cursor: pointer; padding: 3px 10px; }
.bets-more .report-table { max-height: 50vh; overflow: auto; }
.modal.xwide .bets-more { min-width: min(1100px, 92vw); }
@media (max-width: 767px) { .modal.xwide .bets-more { min-width: 0; } .bets-more .table td, .bets-more .table th { font-size: 11px; } }

/* header tweaks: the review count, the exposure numbers */
.header .header-rules .badge { font-size: 10px; vertical-align: top; }
.header .user-balance b[data-role="exposure"] { font-size: 14px; }
.header .news a { color: inherit; font-weight: 700; }
.search-list { max-height: 60vh; overflow: auto; }
.left-sidebar .menu-box .nav-link { cursor: pointer; }

/* the panel's modals keep working under bootstrap (which hides .modal and fixes it to the viewport) */
.modal-back > .modal { display: block; position: relative; inset: auto; overflow: visible; height: auto; z-index: auto; outline: 0; background: var(--surface, #fff); color: var(--text, #111); }
.modal-back > .modal.xwide { max-width: min(1200px, 96vw); }
.modal-back .btn { line-height: 1.4; }
.bets-more .nav-tabs .nav-link { color: #333; border: 1px solid #dee2e6; border-bottom: 0; margin-right: 2px; background: #f1f3f5; }
.bets-more .nav-tabs .nav-link.active { background: #fff; font-weight: 700; color: #000; }

/* casino: the tiles with their numbers, a table's rounds and books */
.casino-list-item.has-bets .casino-list-item-banner { outline: 2px solid #ffc107; }
.casino-list-item-banner { position: relative; }
.cs-flag { position: absolute; top: 4px; left: 4px; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 700; color: #fff; background: #6c757d; }
.cs-flag.stop { background: #dc3545; } .cs-flag.manual { background: #fd7e14; color: #000; } .cs-flag.held { background: #0dcaf0; color: #000; left: auto; right: 4px; }
.cs-money { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 6px; font-size: 11px; background: rgba(0, 0, 0, .65); color: #fff; }
.cs-section { font-weight: 700; margin: 8px 2px 0; font-size: 13px; }
.cs-head-num { flex: 0 0 auto; padding: 0 10px; font-size: 12px; }
.cs-page .casino-header { display: flex; justify-content: space-between; align-items: center; }
.cs-page .casino-header .pointer { cursor: pointer; text-decoration: underline; }
.cs-tabs { margin: 4px 0; } .cs-tabs .nav-link { cursor: pointer; padding: 4px 12px; font-size: 13px; }
.cs-round { width: 100%; }
.cs-round-body { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; }
.cs-market { flex: 1 1 300px; background: #fff; border: 1px solid rgba(0, 0, 0, .08); border-radius: 4px; }
.cs-market-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 6px; background: rgba(0, 0, 0, .04); font-weight: 700; font-size: 12px; }
.cs-market-title small { font-weight: 400; opacity: .8; }
.cs-book { margin: 0; font-size: 12px; } .cs-book td, .cs-book th { padding: 2px 6px; }
.cs-settle .field { margin-bottom: 8px; }
.cs-handpaid { border: 1px solid rgba(0, 0, 0, .1); border-radius: 6px; padding: 6px; margin-bottom: 8px; font-size: 12px; }
.cs-bet { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 3px 0; border-top: 1px solid rgba(0, 0, 0, .06); }
.cs-bet .input.sm { width: 90px; padding: 2px 6px; }
.cs-switches { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.cs-held { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.cs-results { display: flex; flex-wrap: wrap; gap: 4px; } .cs-results span { display: inline-block; padding: 1px 8px; border-radius: 10px; background: #e9ecef; font-size: 12px; font-weight: 700; }
.cs-tabs .nav-link { color: #333; background: #e9ecef; border: 1px solid #dee2e6; border-bottom: 0; margin-right: 2px; }
.cs-tabs .nav-link.active { background: #fff; color: #000; font-weight: 700; }

/* the panel's pages in the site's look: the pieces its pages are built from (ui.js) on top of the site's Bootstrap —
   what used to be panel.css components, here as they sit inside the site's cards */
/* the site gives each page a class on the centre (home-page / report-page / detail-page …) that makes .center-container
   100% wide; the panel's pages get the same through the router (see router.js) — and never grow past the viewport */
#view { padding: 0; min-width: 0; }
#view > .center-container { width: 100%; max-width: 100%; min-width: 0; padding: 6px; }
#view .report-table, #view .table-responsive { max-width: 100%; }
#view .page-head .sub { opacity: .85; font-weight: 400; }
#view .page-head .card-body { display: none; }
#view .card.report-card { border-radius: 0; }
#view .card-footer { padding: 6px 10px; background: #f8f9fa; }
#view .btn { white-space: nowrap; }
#view .btn:not([class*="btn-"]) { border: 1px solid #ced4da; background: #fff; color: #212529; }
#view .btn:not([class*="btn-"]):hover { background: #f1f3f5; }
#view .btn.sm { padding: .2rem .5rem; font-size: .8rem; }
#view .btn.xs { padding: .05rem .4rem; font-size: .75rem; }
#view .btn.primary { background: var(--bg-primary, #0d6efd); border-color: var(--bg-primary, #0d6efd); color: var(--text-primary, #fff); }
#view .btn.ok { background: #198754; border-color: #198754; color: #fff; }
#view .btn.bad { border-color: #dc3545; color: #dc3545; background: #fff; } #view .btn.bad.solid { background: #dc3545; color: #fff; }
#view .btn.warn { border-color: #ffc107; color: #856404; background: #fff8e1; }
#view .btn.ghost { border-color: transparent; background: transparent; }
#view .btn.link { border: 0; background: none; color: var(--bg-primary, #0d6efd); padding: 0; }
#view .btn:disabled { opacity: .55; }
#view .hrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#view .hrow.between { justify-content: space-between; } #view .hrow.end { justify-content: flex-end; }
#view .stack { display: flex; flex-direction: column; gap: 8px; } #view .stack > .card { margin-bottom: 0; }
#view .grow { flex: 1; min-width: 0; }
#view .two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; align-items: start; }
#view .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#view .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 991px) { #view .two, #view .grid2, #view .grid3 { grid-template-columns: 1fr; } }
#view .muted { color: #6c757d; } #view .nowrap { white-space: nowrap; } #view .hide { display: none !important; }
#view .pos { color: #198754; } #view .neg { color: #dc3545; } #view .warn-t { color: #b45309; }
#view .help { color: #495057; font-size: 13px; margin-bottom: 6px; }
#view .who b { display: block; } #view .who small, #view .report-table small { color: #6c757d; }
#view .kv th { width: 1%; white-space: nowrap; color: #6c757d; font-weight: 600; } #view .kv td { overflow-wrap: anywhere; }
#view .field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#view .field > label { font-size: 12px; font-weight: 600; color: #495057; }
#view .input, #view select.input, #view textarea.input { display: block; width: 100%; padding: .25rem .5rem; font-size: .875rem; line-height: 1.5; color: #212529; background: #fff; border: 1px solid #ced4da; border-radius: .2rem; }
#view textarea.input { min-height: 60px; }
#view .input:focus { border-color: #86b7fe; outline: 0; box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .25); }
#view .input.err { border-color: #dc3545; } #view .err-text { color: #dc3545; font-size: 12px; } #view .err-text:empty { display: none; } #view .hint { color: #6c757d; font-size: 12px; }
#view .check { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border: 1px solid #dee2e6; border-radius: 4px; cursor: pointer; }
#view .check input { margin-top: 3px; } #view .check.inline { border: 0; padding: 2px 0; }
#view .switch { position: relative; width: 38px; height: 22px; flex: none; display: inline-block; }
#view .switch input { opacity: 0; width: 0; height: 0; }
#view .switch span { position: absolute; inset: 0; background: #ced4da; border-radius: 22px; cursor: pointer; transition: background .15s; }
#view .switch span::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; }
#view .switch input:checked + span { background: #198754; } #view .switch input:checked + span::before { transform: translateX(16px); }
#view .note { border-radius: 4px; padding: 6px 10px; font-size: 13px; background: #e7f1ff; color: #084298; }
#view .note.warn { background: #fff3cd; color: #664d03; } #view .note.bad { background: #f8d7da; color: #842029; } #view .note.ok { background: #d1e7dd; color: #0f5132; } #view .note.plain { background: #f8f9fa; color: #495057; }
#view .chips { display: flex; gap: 4px; flex-wrap: wrap; }
#view .chip { border: 1px solid #ced4da; background: #fff; border-radius: 20px; padding: 2px 10px; font-size: 12px; cursor: pointer; color: #495057; }
#view .chip:hover, #view .chip.on { border-color: var(--bg-primary, #0d6efd); color: var(--bg-primary, #0d6efd); background: #e7f1ff; }
#view .figs { display: flex; gap: 4px; flex-wrap: wrap; }
#view .fig { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #dee2e6; border-radius: 4px; padding: 1px 6px; font-size: 12px; background: #f8f9fa; white-space: nowrap; }
#view .fig small { color: #6c757d; } #view .fig.final { border-color: #75b798; } #view .fig.void { color: #6c757d; }
#view .kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; }
#view .kpi { background: #fff; border: 1px solid #dee2e6; border-radius: 4px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; }
#view .kpi .lbl { color: #6c757d; font-size: 11px; font-weight: 600; } #view .kpi .val { font-size: 18px; font-weight: 700; } #view .kpi .sub { color: #6c757d; font-size: 11px; }
#view .kpi.alert { border-color: #ffc107; background: #fffbea; } #view .kpi.bad { border-color: #dc3545; }
#view .list { display: flex; flex-direction: column; }
#view .list > .li { padding: 6px 0; border-bottom: 1px solid #eee; display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; } #view .list > .li:last-child { border-bottom: 0; }
#view .list > .li .grow { min-width: 160px; } #view .list > .li .when { color: #6c757d; font-size: 12px; white-space: nowrap; }
#view .report-table tr.hi-warn td { background: #fff8e1; } #view .report-table tr.hi-bad td { background: #fde8e8; }
#view .report-table td.act .btn + .btn { margin-left: 3px; }
#view .pnl-tabs { margin: 0 0 4px; } #view .pnl-tabs .nav-link { cursor: pointer; }
#view .toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; padding: 6px 0; }
#view .toolbar .field { min-width: 140px; flex: 1 1 140px; max-width: 240px; } #view .toolbar .search { flex: 1 1 200px; max-width: 360px; }
#view .summary { display: flex; gap: 14px; flex-wrap: wrap; padding: 6px 0; font-size: 13px; color: #495057; }
#view pre.json { background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; padding: 8px; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 400px; overflow: auto; }
#view code { font-size: 12px; }
#view .copy { cursor: pointer; }
#view .spin { width: 26px; height: 26px; border: 3px solid #dee2e6; border-top-color: var(--bg-primary, #0d6efd); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; }
/* the site's report cards inside the panel */
.report-card .card-header { background: var(--bg-secondary, #0b3d66); color: var(--text-secondary, #fff); padding: 6px 10px; }
.report-card .card-title { font-size: 15px; font-weight: 700; }
.report-card .card-body { padding: 8px 10px; }
.report-card .report-table { font-size: 12px; } .report-card .report-table td, .report-card .report-table th { padding: 4px 6px; vertical-align: middle; }
.report-card tr.back-border td:first-child { border-left: 3px solid #72bbef; } .report-card tr.lay-border td:first-child { border-left: 3px solid #faa9ba; }
.report-card .figs { display: flex; flex-wrap: wrap; gap: 3px; }
.us-facts > div > span { display: block; font-size: 11px; opacity: .7; } .us-facts > div > b { font-size: 15px; }
#view .dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 14px; }
#view .dl div span { display: block; color: #6c757d; font-size: 12px; } #view .dl div b { overflow-wrap: anywhere; }
#view .wide { min-width: 220px; }
#view .qr { width: 200px; height: 200px; }
.mk-flash { outline: 2px solid #ffc107; outline-offset: 2px; }
.mk-src { padding: 1px 0; } .mk-src .mk-ico { cursor: pointer; }
/* a list that reads as cards on a phone (the review list: the one-click buttons under each item, nothing to scroll sideways) */
@media (max-width: 767px) {
  #view .report-table.cards table, #view .report-table.cards tbody, #view .report-table.cards tr, #view .report-table.cards td { display: block; width: 100%; }
  #view .report-table.cards thead { display: none; }
  #view .report-table.cards tr { border: 1px solid #dee2e6; border-radius: 4px; margin-bottom: 6px; padding: 6px 8px; background: #fff; }
  #view .report-table.cards td { border: 0; padding: 2px 0; text-align: left !important; white-space: normal; }
  #view .report-table.cards td:empty { display: none; }
  #view .report-table.cards td[data-l="At stake"]::before { content: "At stake: "; color: #6c757d; }
  #view .report-table.cards .quick-acts { justify-content: flex-start; margin: 4px 0 0; }
}
#view svg.i { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
#view .kv { table-layout: fixed; } #view .kv th { width: 36%; white-space: normal; } #view .kv td { word-break: break-word; }
#view .kpis > .card { min-width: 0; }
.mk-remark-flag { background: #fde8e8; color: #842029; border-left: 3px solid #dc3545; padding: 3px 8px; font-size: 12px; width: 100%; }
.mk-remark-flag a { color: #842029; font-weight: 700; text-decoration: underline; }
.btn.busy { opacity: .6; pointer-events: none; }
.settle-all { max-height: 55vh; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
#view .two > *, #view .stack > * { min-width: 0; }
#view .two { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
@media (max-width: 991px) { #view .two, #view .grid2, #view .grid3 { grid-template-columns: minmax(0, 1fr); } }
#toasts { max-width: calc(100vw - 24px); } #toasts .toast { max-width: 100%; overflow-wrap: anywhere; } #toasts:empty { display: none; }
#view .kv td, #view .kv td * { white-space: normal !important; overflow-wrap: anywhere; word-break: break-word; }

/* the AI page's tables fit their rows (the site's report tables keep a tall minimum) */
#view .ai-page .report-table { min-height: 0; }
.modal-back .badge.bg-success, .modal-back .badge.bg-danger, .modal-back .badge.bg-secondary { color: #fff; }
/* "Void these bets" under a remark about deleted bets */
#view .market-row:has(> .mk-rvoid) { display: flex; align-items: center; }
#view .mk-rvoid { flex: 0 0 auto; margin: 2px 6px; padding: 1px 8px; font-size: 12px; white-space: nowrap; }
/* the match list uses the whole page (the site's table keeps a 250 px box) */
#view .bet-table { max-height: none !important; height: auto !important; overflow: visible !important; }
#view .mk-hide { margin-left: 6px; color: #888; font-size: 13px; }
/* the match page: the markets without bets under their section's header (closed until clicked) */
#view .mk-group { width: 100%; margin-top: 4px; }
#view .mk-group-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--bg-secondary, #2c6b8a); color: var(--text-secondary, #fff); padding: 7px 10px; font-weight: 700; font-size: 14px; cursor: pointer; user-select: none; }
#view .mk-group-head small { font-weight: 400; opacity: .85; }
#view .mk-group-head i { width: 14px; }
#view .mk-group-body { border: 1px solid #d6dde3; border-top: 0; }
/* the Scorecard tab: providers linked, and the search over all of them */
.mk-linkbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; padding: 6px 8px; background: #eef3f7; border-bottom: 1px solid #d6dde3; }
.mk-srcchip { display: inline-block; padding: 1px 6px; margin: 1px 2px; border-radius: 10px; background: #dde3e8; color: #555; font-size: 11px; }
.mk-srcchip.on { background: #d1f0dc; color: #146c43; font-weight: 700; }
/* the AI box and the match's AI bar */
#view .mk-aibar { width: 100%; display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; padding: 4px 0; }
#view .mk-group-head .mk-ai-sec { color: #fff; margin-left: 6px; }
.modal-back .ai-answer { border-top: 1px solid #e3e7eb; padding-top: 8px; margin-top: 8px; }
.modal-back .ai-text { white-space: normal; font-size: 14px; }
/* the combined scorecard */
.cs-views { font-size: 13px; }
.cs-views .nav-link { padding: 4px 10px; cursor: pointer; }
.cs-meta { padding: 2px 8px 6px; color: #555; }
.cs-sec { font-weight: 700; font-size: 13px; padding: 8px 8px 3px; border-top: 1px solid #e3e7eb; margin-top: 4px; }
.cs-sec small { font-weight: 400; color: #777; }
.cs-table { font-size: 12px; margin-bottom: 4px; }
.cs-table td, .cs-table th { padding: 3px 5px !important; white-space: nowrap; }
.cs-table tr.out td { color: #777; }
.cs-table tr.pending td { background: #fff8e1; }
.cs-dot { color: #d9480f; font-size: 10px; margin-left: 2px; cursor: help; vertical-align: super; }
.cs-line { padding: 3px 8px; }
.cs-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px 8px; }
.cs-chip { background: #eef3f7; border-radius: 10px; padding: 1px 8px; font-size: 12px; }
.cs-chip.ok { background: #d1f0dc; } .cs-chip.bad { background: #fde8e8; }
.cs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 6px; padding: 6px 8px; }
.cs-grid > div { background: #f5f7f9; border-radius: 4px; padding: 5px 7px; }
.cs-grid small { color: #666; }
.cs-range { display: flex; align-items: center; gap: 6px; padding: 4px 8px; flex-wrap: wrap; }
.cs-range .input { width: 64px; padding: 2px 6px; }
.cs-scroll { overflow-x: auto; }
.cs-range input.input { width: 70px !important; min-width: 0 !important; flex: 0 0 70px; display: inline-block; }
.cs-range label { margin: 0; }
.cs-table { display: block; overflow-x: auto; max-width: 100%; }
/* possible punch bets on a market */
.mk-punch-flag { background: #fff3cd; color: #664d03; border-left: 3px solid #fd7e14; padding: 3px 8px; font-size: 12px; width: 100%; }
.mk-punch-flag a { color: #664d03; font-weight: 700; text-decoration: underline; cursor: pointer; }
/* own providers on the Score sources page */
.own-src { border: 1px solid #dde3e8; border-radius: 4px; padding: 8px 10px; margin-bottom: 8px; }
.cs-ok { color: #198754; font-size: 10px; margin-left: 2px; vertical-align: super; }
.cs-one { color: #999; font-size: 10px; margin-left: 1px; vertical-align: super; }
.cs-legend { padding: 2px 8px 6px; color: #555; }

/* "Can it settle by itself?" (checkModal.js) */
.chk-sum { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.chk-chip { padding: 2px 10px; border-radius: 12px; font-size: 13px; background: var(--bg-2, #eef1f4); }
.chk-chip.ok { background: #d9f2e1; color: #11632f; } .chk-chip.warn { background: #fff1cc; color: #7a5600; } .chk-chip.bad { background: #fde0e0; color: #9b1c1c; }
.chk-row { border: 1px solid var(--line, #dde2e7); border-left-width: 4px; border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; }
.chk-row.auto { border-left-color: #198754; } .chk-row.propose { border-left-color: #e0a800; } .chk-row.manual, .chk-row.unknown { border-left-color: #dc3545; }
.chk-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chk-why { margin: 6px 0 4px 18px; padding: 0; font-size: 13px; }
.chk-needs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.chk-need { padding: 1px 8px; border-radius: 10px; border: 1px solid currentColor; }
.chk-need.ok { color: #198754; } .chk-need.warn { color: #9a7400; } .chk-need.bad { color: #dc3545; }
.chk-fig { display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted, #5b6570); }
@media (max-width: 575px) { .chk-top .ms-auto { margin-left: 0 !important; width: 100%; } }
/* the casino's own review items (casino.js) */
.cs-items { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 8px; }
.cs-item { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 6px 10px; border-left: 4px solid #dc3545; background: #fff5f5; color: inherit; text-decoration: none; }
.cs-item small { color: #6c757d; }
/* a finished match: the scorecard at the top of the centre column (game.js) — the same tabs as in the sidebar */
.mk-done-head { width: 100%; padding: 6px 8px; font-size: 15px; background: var(--bg-table-row, #f1f1f1); }
.mk-done-score { margin-bottom: 8px; }
.mk-done-score .cs-views .nav-link, .mk-done-score .sc-tabs .nav-link { color: #000; background: #bbb; border-color: #fff; }
.mk-done-score .cs-views .nav-link.active, .mk-done-score .sc-tabs .nav-link.active { background: #8f8f8f; color: #fff; font-weight: 600; }