/* pariez.io client dashboard, on the Tabler UI kit.
   Dark: black, grey liquid glass, orange for profit. Light: paper white, white glass, burnt orange.
   Glass only on navigation and controls; the numbers sit on near-opaque surfaces. Orange means profit. */
:root, [data-bs-theme="light"] {
  --tblr-font-sans-serif: "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tblr-font-monospace: "Fira Code", ui-monospace, Menlo, monospace;
  --tblr-body-bg: #f2f2f3;
  --tblr-body-color: #141414;
  --tblr-secondary: #5f6168;
  --tblr-primary: #c2410c; --tblr-primary-rgb: 194, 65, 12;
  --accent: #c2410c;                        /* 5.2:1 on white */
  --accent-bg: rgba(194, 65, 12, .09);
  --accent-grad: linear-gradient(150deg, #ff9a4a, #f05a0a);
  --on-accent: #1a0800;
  --profit: #15803d;                        /* every percentage; 5:1 on white */
  --loss: #c81e1e;
  --live: #d6293e;
  --surface: rgba(255, 255, 255, .94);
  --surface-2: #f6f6f7;
  --line: rgba(20, 20, 20, .09);
  --glass: rgba(255, 255, 255, .55);
  --glass-strong: rgba(255, 255, 255, .78);
  --glass-rim: rgba(255, 255, 255, .95);
  --glass-shade: rgba(0, 0, 0, .07);
  --glass-shadow: 0 12px 30px -14px rgba(0, 0, 0, .22), 0 2px 6px -2px rgba(0, 0, 0, .06);
  --ember-1: #ffb37a; --ember-2: #d9d9de; --ember-3: #ffd0a8;
  --ember-alpha: .55;
}
[data-bs-theme="dark"] {
  --tblr-body-bg: #050505;
  --tblr-body-color: #ededee;
  --tblr-bg-surface: #111112;
  --tblr-bg-surface-secondary: #18181a;
  --tblr-border-color: rgba(255, 255, 255, .09);
  --tblr-border-color-translucent: rgba(255, 255, 255, .07);
  --tblr-secondary: #9a9aa1;
  --tblr-primary: #ff7a1a; --tblr-primary-rgb: 255, 122, 26;
  --accent: #ff8a2b;
  --accent-bg: rgba(255, 122, 26, .12);
  --accent-grad: linear-gradient(150deg, #ffad5c, #ff6a00);
  --on-accent: #1a0800;
  --profit: #3ddc84;
  --loss: #ff5d6c;
  --live: #ff5d6c;
  --surface: rgba(16, 16, 17, .9);
  --surface-2: rgba(26, 26, 28, .92);
  --line: rgba(255, 255, 255, .075);
  --glass: rgba(58, 58, 62, .32);
  --glass-strong: rgba(72, 72, 78, .5);
  --glass-rim: rgba(255, 255, 255, .12);
  --glass-shade: rgba(0, 0, 0, .45);
  --glass-shadow: 0 20px 44px -20px rgba(0, 0, 0, .95), 0 2px 8px -2px rgba(0, 0, 0, .6);
  --ember-1: #ff6a00; --ember-2: #3a3a40; --ember-3: #7a2e00;
  --ember-alpha: .22;
}
/* brand colours of the books (tags) */
:root {
  --b-superbet: #e4002b; --b-betano: #ff6b00; --b-fortuna: #f5c400; --b-casapariurilor: #3b82f6; --b-netbet: #e0457b;
  --b-stanleybet: #3aa0ff; --b-888sport: #ff7a1a; --b-winner: #2563eb; --b-topbet: #22c55e; --b-zinx: #a855f7; --b-bilion: #eab308;
  --b-mrbit: #06b6d4; --b-slotv: #f43f5e; --b-swiper: #0ea5e9; --b-don: #be123c; --b-winboss: #8b5cf6; --b-victorybet: #10b981;
  --b-maxbet: #f97316; --b-betone: #84cc16; --b-betfairsb: #facc15; --b-getsbet: #16a34a; --b-unibet: #14805e;
}

body { background: var(--tblr-body-bg); color: var(--tblr-body-color); font-size: .9375rem; -webkit-tap-highlight-color: transparent; }
.num { font-family: var(--tblr-font-monospace); font-variant-numeric: tabular-nums; }
.min-w-0 { min-width: 0; }
.text-accent { color: var(--accent) !important; }
.text-profit { color: var(--profit) !important; }
[hidden] { display: none !important; }

/* embers: warm light far behind the glass */
.embers { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.embers i { position: absolute; border-radius: 50%; filter: blur(110px); opacity: var(--ember-alpha); }
.embers i:nth-child(1) { width: 50vw; height: 50vw; right: -16vw; top: -22vw; background: var(--ember-1); }
.embers i:nth-child(2) { width: 44vw; height: 44vw; left: -14vw; top: 30vh; background: var(--ember-2); }
.embers i:nth-child(3) { width: 34vw; height: 34vw; right: 18vw; bottom: -20vw; background: var(--ember-3); }
.page { position: relative; }            /* no stacking context: the sheets must rise above the tab bar */

/* liquid glass */
.glass-nav, .glass-head, .glass-control, .chip, .pill {
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
}
.glass-nav { background: var(--glass) !important; border-color: var(--glass-rim) !important;
  box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 -1px 0 var(--glass-shade); }
aside.glass-nav { border-right: 1px solid var(--glass-rim) !important; }
.glass-head { background: color-mix(in srgb, var(--tblr-body-bg) 58%, transparent) !important;
  border-bottom: 1px solid var(--line); padding: .8rem 0 !important; z-index: 1020; }
.glass-control { background: var(--glass) !important; border: 1px solid var(--glass-rim) !important; border-radius: 14px;
  box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 -1px 0 var(--glass-shade), var(--glass-shadow); color: var(--tblr-body-color); }
a.glass-control:hover, button.glass-control:hover { background: var(--glass-strong) !important; color: var(--tblr-body-color); }
input.glass-control, select.glass-control { box-shadow: inset 0 1px 2px var(--glass-shade); min-height: 44px; font-size: 1rem; }
input.glass-control:focus, select.glass-control:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-bg) !important; }
.btn-accent { background: var(--accent-grad); color: var(--on-accent); border: 0; font-weight: 700; min-height: 48px; border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 24px -12px rgba(255, 106, 0, .8); }
.btn-accent:hover { color: var(--on-accent); filter: brightness(1.05); }
.btn-icon.glass-control { width: 44px; height: 44px; }

/* brand */
.brand { display: inline-flex; align-items: center; gap: .55rem; color: inherit; text-decoration: none; font-weight: 800;
  font-size: 1.2rem; letter-spacing: -.02em; }
.brand:hover { text-decoration: none; color: inherit; }
.brand .tld { color: var(--accent); }
.brand-mark { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--on-accent); font-size: 20px;
  background: var(--accent-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 8px 18px -8px rgba(255, 106, 0, .9); }

/* side nav */
.navbar-vertical { width: 15.5rem; }
.navbar-vertical .nav-link { border-radius: 12px; margin: 2px 12px; padding: .62rem .8rem; color: var(--tblr-secondary); font-weight: 500; }
.navbar-vertical .nav-link:hover { color: var(--tblr-body-color); }
.navbar-vertical .nav-link.active { color: var(--tblr-body-color); background: var(--glass-strong);
  box-shadow: inset 0 1px 0 var(--glass-rim), 0 6px 16px -8px rgba(0, 0, 0, .5); }
.navbar-vertical .nav-link.active .nav-link-icon { color: var(--accent); }
.count { font-family: var(--tblr-font-monospace); font-size: .75rem; color: var(--accent); }
.count:empty { display: none; }
.account { padding: 14px; border-radius: 16px; }
.acct-ic { background: var(--accent-bg); color: var(--accent); }
.progress-bar { background: var(--accent); }

/* page */
.page-wrapper { min-width: 0; }
.page-title { font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; }
.headline { font-size: .8125rem; color: var(--tblr-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.headline b { color: var(--profit); font-family: var(--tblr-font-monospace); font-weight: 600; }
.search { width: min(380px, 40vw); }
.page-body { margin-top: 1rem; padding-bottom: 2rem; }

/* KPIs */
.kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: flex; gap: 12px; align-items: center; }
.kpi-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 21px; background: var(--accent-bg); color: var(--accent); }
.kpi-label { font-size: .8125rem; color: var(--tblr-secondary); }
.kpi-val { font-family: var(--tblr-font-monospace); font-weight: 600; font-size: 1.375rem; letter-spacing: -.02em; line-height: 1.2; white-space: nowrap; }

/* filters */
.filterbar { padding: 14px 16px; border-radius: 18px; }
.filter-title { font-size: .9375rem; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--glass-rim); background: var(--glass); border-radius: 999px;
  padding: 6px 13px; font-size: .8125rem; font-weight: 600; color: var(--tblr-secondary); cursor: pointer; min-height: 36px;
  box-shadow: inset 0 1px 0 var(--glass-rim); transition: color .15s, background-color .15s, border-color .15s; }
.chip:hover { color: var(--tblr-body-color); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--tblr-secondary)); flex: none; }
.chip[aria-pressed="true"] { color: var(--tblr-body-color); border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: var(--accent-bg); }
.chip.off { text-decoration: line-through; opacity: .55; border-style: dashed; }
.chip.off .dot { background: var(--tblr-secondary); }
.chip.off i { color: var(--loss); text-decoration: none; }
.chip.all[aria-pressed="true"] { color: var(--on-accent); border-color: transparent; background: var(--accent-grad); }
.chip:focus-visible, .nav-link:focus-visible, tr.rx:focus-visible, .tabbar a:focus-visible, .pill:focus-visible, .th-sort:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; }

/* book tag: brand dot, name, price */
.bk-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border-radius: 8px; font-size: .8125rem; font-weight: 600;
  background: color-mix(in srgb, var(--c, #888) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c, #888) 32%, transparent); white-space: nowrap; }
.bk-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c, #888); }
.bk-tag b { font-family: var(--tblr-font-monospace); font-weight: 600; }
.bk-tags { display: flex; flex-wrap: wrap; gap: 4px; }

/* the table */
.data-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.data-card .card-footer { background: transparent; border-color: var(--line); }
.table { --tblr-table-bg: transparent; margin: 0; }
.table thead th { background: var(--surface-2); color: var(--tblr-secondary); font-size: .75rem; font-weight: 600; text-transform: none;
  letter-spacing: 0; border-color: var(--line); padding-top: 0; padding-bottom: 0; }
.th-sort { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: .7rem 0; color: inherit; border-radius: 6px; }
.th-sort:hover { color: var(--tblr-body-color); }
.th-sort.on { color: var(--accent); }
.th-sort i { font-size: 14px; }
.table td { border-color: var(--line); }
tr.rx { cursor: pointer; transition: background-color .12s; }
tr.rx:hover > * { background: rgba(var(--tblr-primary-rgb), .05); }
tr.rx.sel > * { background: rgba(var(--tblr-primary-rgb), .1); }
tr.rx.sel td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
td .sub { display: block; font-size: .75rem; color: var(--tblr-secondary); }
.pct { font-family: var(--tblr-font-monospace); font-weight: 700; color: var(--profit); font-size: 1rem; white-space: nowrap; }
.live-score { display: inline-flex; align-items: center; gap: 6px; font-family: var(--tblr-font-monospace); font-size: .8125rem; color: var(--live); font-weight: 600; }
.live-score::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live); animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.empty-row td { padding: 3.5rem 1rem !important; text-align: center; color: var(--tblr-secondary); }
.empty-row b { display: block; color: var(--tblr-body-color); margin-bottom: 4px; font-size: 1rem; }

/* the slip: the one loud thing */
.slip-wrap { position: sticky; top: 92px; }
.slip-surface { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--glass-shadow); }
.slip { padding: 18px; }
.slip-ev { font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.slip-meta { color: var(--tblr-secondary); font-size: .8125rem; margin-top: 2px; }
.slip-market { margin-top: 10px; font-weight: 600; }
.bet { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 12px 0; border-top: 1px dashed var(--line); }
.bet:first-of-type { border-top: 0; }
.bet .n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font-size: .75rem; font-weight: 700;
  background: var(--accent-bg); color: var(--accent); grid-row: span 2; }
.bet .who { font-weight: 700; min-width: 0; }
.bet .who a { color: inherit; text-decoration: none; }
.bet .who a:hover { text-decoration: underline; }
.bet .what { color: var(--tblr-secondary); font-size: .8125rem; grid-column: 2; }
.bet .odds { font-family: var(--tblr-font-monospace); font-weight: 600; text-align: right; }
.payout { margin-top: 12px; border-radius: 16px; padding: 16px; background: var(--accent-bg); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.payout .label { font-size: .8125rem; color: var(--tblr-secondary); }
.payout .big { font-family: var(--tblr-font-monospace); font-size: 2.25rem; font-weight: 700; color: var(--accent); letter-spacing: -.03em; line-height: 1.1; }
.payout .row-x { display: flex; justify-content: space-between; font-size: .8125rem; color: var(--tblr-secondary); margin-top: 6px; }
.payout .row-x b { color: var(--tblr-body-color); font-family: var(--tblr-font-monospace); font-weight: 600; }
.slip-empty { padding: 40px 22px; text-align: center; color: var(--tblr-secondary); }
.slip-empty i { font-size: 34px; color: var(--accent); }
.slip-empty b { display: block; color: var(--tblr-body-color); margin: 8px 0 4px; }
.fav-btn.on { color: var(--accent) !important; }
.stake-in { display: inline-flex; align-items: center; gap: 4px; justify-self: end; }
.stake-in input { width: 96px; text-align: right; font-family: var(--tblr-font-monospace); font-weight: 700; font-size: 1.0625rem;
  color: var(--tblr-body-color); background: var(--glass); border: 1px solid var(--glass-rim); border-radius: 10px; padding: 4px 8px;
  box-shadow: inset 0 1px 2px var(--glass-shade); min-height: 44px; -moz-appearance: textfield; }
.stake-in input::-webkit-outer-spin-button, .stake-in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stake-in input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.stake-in span { font-family: var(--tblr-font-monospace); font-weight: 600; color: var(--tblr-secondary); }
.edit-note { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: .8125rem; color: var(--tblr-secondary); }
.edit-note span { flex: 1 1 160px; }

/* ---------------------------------------------------------------- phones */
.tabbar { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 1030; display: flex;
  border-radius: 24px; padding: 6px; border: 1px solid var(--glass-rim); box-shadow: inset 0 1px 0 var(--glass-rim), var(--glass-shadow); }
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 2px; border-radius: 18px;
  color: var(--tblr-secondary); text-decoration: none; font-size: .6875rem; font-weight: 600; position: relative; min-height: 52px; }
.tabbar a i { font-size: 22px; }
.tabbar a.active { color: var(--tblr-body-color); background: var(--glass-strong); box-shadow: inset 0 1px 0 var(--glass-rim); }
.tabbar a.active i { color: var(--accent); }
.tabbar .count { position: absolute; top: 4px; left: calc(50% + 12px); font-size: .625rem; line-height: 1; }
.sheet-bar { display: flex; justify-content: center; align-items: center; position: relative; min-height: 44px; margin-bottom: 4px; }
.sheet-bar h3 { position: absolute; left: 0; font-size: 1.0625rem; font-weight: 700; }
.sheet-bar .grip { width: 40px; height: 5px; border-radius: 3px; background: var(--glass-rim); }
.sheet-bar .btn { position: absolute; right: 0; top: 0; }
.sheet-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 1035; opacity: 0; pointer-events: none; transition: opacity .2s; }
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }

.pills { display: flex; gap: 6px; overflow-x: auto; margin: 10px -12px 0; padding: 0 12px 2px; scrollbar-width: none; }
.pills::-webkit-scrollbar { display: none; }
.pill { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; font-size: .875rem;
  font-weight: 600; border: 1px solid var(--glass-rim); background: var(--glass); color: var(--tblr-body-color); box-shadow: inset 0 1px 0 var(--glass-rim); }
.pill i { color: var(--tblr-secondary); font-size: 17px; }
.pill b { color: var(--accent); font-weight: 700; }
.pill.on { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent-bg); }

.sortbar { display: flex; gap: 4px; padding: 4px; margin-bottom: 10px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.sortbar button { flex: 1; border: 0; background: none; color: var(--tblr-secondary); font-weight: 600; font-size: .8125rem; min-height: 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.sortbar button.on { background: var(--surface); color: var(--tblr-body-color); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.sortbar button.on i { color: var(--accent); }

@media (max-width: 991.98px) {
  body { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  .page-header { padding: .6rem 0 .7rem !important; }
  .page-title { font-size: 1.25rem; }
  .page-body { margin-top: .75rem; }

  /* sheets: filters and the slip rise from the bottom */
  .filterbar, .slip-wrap { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 1040; margin: 0 !important; max-height: 88vh; overflow-y: auto;
    padding: 6px 14px calc(16px + env(safe-area-inset-bottom)) !important; transform: translateY(105%); transition: transform .3s cubic-bezier(.2, .8, .2, 1);
    background: color-mix(in srgb, var(--tblr-body-bg) 72%, transparent) !important;
    -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%);
    border: 0 !important; border-top: 1px solid var(--glass-rim) !important; border-radius: 26px 26px 0 0 !important;
    box-shadow: 0 -24px 60px -20px rgba(0, 0, 0, .7) !important; overscroll-behavior: contain; }
  .filterbar.open, .slip-wrap.open { transform: none; }
  .slip-wrap .slip-surface { box-shadow: none; background: var(--surface); }
  .filterbar .chips { max-height: 40vh; overflow-y: auto; }
  .chip { min-height: 40px; padding: 6px 14px; font-size: .875rem; }

  /* the table becomes cards you tap */
  .data-card { background: none; border: 0; border-radius: 0; overflow: visible; }
  .data-card .card-footer { padding: 12px 4px; border: 0; }
  #table thead { display: none; }
  #table tbody { display: grid; gap: 8px; }
  #table tr.rx { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ev pct" "time pct" "mk mk" "bk bk";
    gap: 2px 12px; padding: 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
  #table tr.rx > * { background: none !important; }
  #table tr.rx td { display: block; padding: 0; border: 0; }
  #table tr.rx td.c-pct { grid-area: pct; align-self: start; text-align: right; }
  #table tr.rx td.c-pct .pct { font-size: 1.375rem; letter-spacing: -.02em; }
  #table tr.rx td.c-ev { grid-area: ev; font-size: 1rem; }
  #table tr.rx td.c-ev .sub { display: none; }
  #table tr.rx td.c-time { grid-area: time; color: var(--tblr-secondary); }
  #table tr.rx td.c-mk { grid-area: mk; margin-top: 8px; font-weight: 500; }
  #table tr.rx td.c-bk { grid-area: bk; margin-top: 8px; }
  #table tr.rx.sel { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
  #table tr.rx.sel td:first-child { box-shadow: none; }
  #table tr.rx:active { transform: scale(.99); }
  #table tr.empty-row { display: block; background: var(--surface); border-radius: 18px; }
  #table tr.empty-row td { display: block; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (prefers-reduced-transparency: reduce) {
  .glass-nav, .glass-head, .glass-control, .chip, .pill, .slip-wrap, .filterbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--tblr-bg-surface, #fff) !important; }
  .embers { display: none; }
}

/* favourite star on each row */
.row-fav { -webkit-appearance: none; appearance: none; border: 0; background: transparent !important; padding: 0; line-height: 1; color: var(--tblr-secondary); width: 40px; height: 40px; border-radius: 10px; font-size: 19px; cursor: pointer; }
.row-fav:hover { color: var(--accent); background: var(--accent-bg); }
.row-fav.on, .fav-btn.on { color: var(--accent) !important; }
.toast-msg { position: fixed; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); z-index: 2000;
  padding: 10px 16px; border-radius: 14px; font-weight: 600; font-size: .875rem; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  background: var(--glass-strong); border: 1px solid var(--glass-rim); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--glass-shadow); }
.toast-msg.show { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 992px) { .toast-msg { bottom: 28px; } }
@media (max-width: 991.98px) {
  #table tr.rx { grid-template-areas: "ev pct" "time pct" "mk fav" "bk fav"; }
  #table tr.rx td.c-fav { grid-area: fav; align-self: end; justify-self: end; }
}

/* value bets */
.fair-tag { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 8px; font-size: .75rem; color: var(--tblr-secondary);
  border: 1px dashed var(--line); font-family: var(--tblr-font-monospace); white-space: nowrap; }
.vgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.vgrid > div { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.vgrid small { display: block; color: var(--tblr-secondary); font-size: .75rem; }
.vgrid b { font-size: 1.125rem; }

.vall { margin-top: 14px; }
.vall-h { font-size: .8125rem; color: var(--tblr-secondary); margin-bottom: 6px; }
.vrow { display: grid; grid-template-columns: minmax(0, 1fr) auto 70px 20px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px;
  text-decoration: none; color: inherit; border: 1px solid transparent; }
.vrow + .vrow { margin-top: 2px; }
.vrow:hover { background: var(--surface-2); border-color: var(--line); color: inherit; text-decoration: none; }
.vrow.val { background: color-mix(in srgb, var(--profit) 7%, transparent); }
.vrow .vo { font-weight: 600; }
.vrow .vev { text-align: right; font-size: .8125rem; }
.vrow i { color: var(--tblr-secondary); }
.vrow .bk-tag { justify-self: start; }

/* live: sports, locks */
.sportbar { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; scrollbar-width: none; }
.sportbar::-webkit-scrollbar { display: none; }
.sportbar .chip { flex: none; gap: 6px; }
.sportbar .chip b { font-family: var(--tblr-font-monospace); color: var(--profit); font-weight: 600; }
.sportbar .chip.on { color: var(--tblr-body-color); border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: var(--accent-bg); }
.lock-btn { -webkit-appearance: none; appearance: none; border: 1px solid var(--glass-rim); background: var(--glass); color: var(--tblr-secondary);
  border-radius: 9px; width: 34px; height: 34px; margin-left: 6px; vertical-align: middle; cursor: pointer; font-size: 16px; }
.lock-btn:hover { color: var(--accent); border-color: var(--accent); }
.lock-on { display: inline-flex; gap: 4px; align-items: center; font-size: .75rem; font-weight: 700; color: var(--accent); margin-left: 6px; }
.bet.fixed { background: var(--accent-bg); border-radius: 12px; padding-left: 8px; padding-right: 8px; }
.payout.neg { background: rgba(240, 99, 99, .1); border-color: rgba(240, 99, 99, .35); }
.payout.neg .big { color: var(--tblr-danger); }
.pct.loss { color: var(--tblr-danger); }
tr.rx.locked > * { background: color-mix(in srgb, var(--accent) 6%, transparent); }
tr.sep-row td { font-size: .75rem; color: var(--tblr-secondary); padding: 10px 14px !important; background: var(--surface-2) !important; }
@media (max-width: 991.98px) { #table tr.sep-row { display: block; } #table tr.sep-row td { display: block; border-radius: 10px; } }

/* ---------------------------------------------------------------- fast betting: put on slip, typed prices, price age */
.bet .put { grid-column: 2 / 4; }
.put-btn { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 4px 12px;
  border-radius: 10px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-bg); color: var(--accent);
  font-size: .8125rem; font-weight: 700; cursor: pointer; }
.put-btn:hover { border-color: var(--accent); }
.put-btn.done { opacity: .6; }
.put-btn:focus-visible, .odds-in input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.first-tag { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 6px; font-size: .6875rem; font-weight: 700;
  color: var(--on-accent); background: var(--accent-grad); vertical-align: 1px; }
.odds-in { justify-self: end; }
.odds-in input { width: 72px; text-align: right; font-family: var(--tblr-font-monospace); font-weight: 600; color: var(--tblr-body-color);
  background: transparent; border: 1px dashed var(--glass-rim); border-radius: 8px; padding: 2px 6px; min-height: 32px; }
.odds-in input:focus { outline: none; border-style: solid; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.odds-in.typed input { border-style: solid; border-color: var(--accent); color: var(--accent); }
.age { align-self: center; font-family: var(--tblr-font-monospace); font-size: .75rem; color: var(--tblr-secondary); margin-left: 2px; }
.age.old { color: var(--tblr-danger); }
.bk-tag.up { animation: tagUp 1.6s ease-out; }
.bk-tag.down { animation: tagDown 1.6s ease-out; }
@keyframes tagUp { 0%, 30% { background: color-mix(in srgb, var(--profit) 30%, transparent); } }
@keyframes tagDown { 0%, 30% { background: rgba(240, 99, 99, .3); } }
@media (prefers-reduced-motion: reduce) { .bk-tag.up, .bk-tag.down { animation: none; } }
.helper-steps { padding-left: 1.2rem; margin-bottom: 16px; } .helper-steps li { margin-bottom: 6px; }

/* what the market counts, under its name */
.mk-info { font-size: .8125rem; color: var(--tblr-secondary); margin-top: 2px; }

/* ---------------------------------------------------------------- value bets: list flags and the statistics view */
.vs-off { display: none !important; }
.vswitch { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vswitch button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 12px; font-weight: 600;
  border: 1px solid var(--line); background: var(--glass); color: var(--tblr-body-color); backdrop-filter: blur(14px); }
.vswitch button[aria-pressed="true"] { background: var(--accent-grad); color: var(--on-accent); border-color: transparent; }
.vswitch > [data-vview="mytickets"] { margin-right: auto; }
.vswitch .vtop-chip i, .vflame { color: var(--accent); }
.vswitch .vtop-chip[aria-pressed="true"] i { color: inherit; }
.vflame { margin-left: 6px; font-size: 1rem; vertical-align: -2px; }
tr.vtop > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.vstate { display: inline-flex; align-items: center; gap: 5px; color: var(--tblr-secondary); font-size: .75rem; }
.vstate i { width: 7px; height: 7px; border-radius: 50%; background: var(--tblr-secondary); opacity: .6; }
.vstate.ok { color: var(--tblr-body-color); }
.vstate.ok i { background: var(--profit); opacity: 1; }
.vmove { font-size: .9rem; }
.vmove.up { color: var(--profit); }
.vmove.down { color: var(--loss); }
.vnote { margin-top: 10px; padding: 10px 12px; border-radius: 12px; font-size: .8125rem; background: var(--surface-2); border: 1px solid var(--line); }
.vnote i { margin-right: 6px; }
.vnote.ok i { color: var(--profit); }
.vnote.top { background: var(--accent-bg); border-color: transparent; }
.vnote.top i { color: var(--accent); }
.vref { margin-top: 14px; }
.vref .row-x { display: flex; justify-content: space-between; gap: 10px; font-size: .8125rem; padding: 3px 0; }
.vref .row-x span { color: var(--tblr-secondary); }
.text-loss { color: var(--loss) !important; }

.vstats { display: grid; gap: 16px; margin-bottom: 24px; }
.vs-controls { display: flex; flex-wrap: wrap; gap: 12px; }
.vs-controls label { display: grid; gap: 4px; min-width: 160px; flex: 1 1 160px; max-width: 260px; }
.vs-controls span { font-size: .8125rem; color: var(--tblr-secondary); }
.vs-intro { margin: 0; color: var(--tblr-secondary); max-width: 80ch; }
.vs-intro b { color: var(--tblr-body-color); }
.vs-empty { color: var(--tblr-secondary); text-align: center; padding: 24px 8px; margin: 0; }
.vs-card, .vs-top { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; min-width: 0; }
.vs-card > header, .vs-top > header { margin-bottom: 10px; }
.vs-card h3, .vs-top h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.vs-card header p, .vs-top header p { margin: 4px 0 0; color: var(--tblr-secondary); font-size: .8125rem; }
.vs-top { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: linear-gradient(var(--accent-bg), var(--accent-bg)), var(--surface); }
.vs-top h3 i { color: var(--accent); margin-right: 6px; }
.vs-top header p { color: var(--tblr-body-color); font-size: .9rem; line-height: 1.55; max-width: 90ch; }
.vs-top.off { border-color: var(--line); background: var(--surface); }
.vs-why { margin-top: 12px; }
.vs-why summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: .875rem; }
.vs-why p { color: var(--tblr-secondary); font-size: .8125rem; margin: 8px 0; max-width: 90ch; }
.vs-rank { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 8px; }
.vs-rank h4 { font-size: .8125rem; color: var(--tblr-secondary); margin: 0 0 6px; font-weight: 600; }
.vs-rank ol { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: .8125rem; }
.vs-rank li span { margin-right: 6px; }
.vs-rank li small { display: block; color: var(--tblr-secondary); }
.vs-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.vs-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: grid; gap: 2px; }
.vs-kpi span { font-size: .8125rem; color: var(--tblr-secondary); }
.vs-kpi b { font-size: 1.3rem; font-family: var(--tblr-font-monospace); white-space: nowrap; }
.vs-kpi small { color: var(--tblr-secondary); font-size: .75rem; }
.vs-secs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.vs-secs button { flex: none; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--glass); color: var(--tblr-body-color); font-weight: 600; }
.vs-secs button[aria-pressed="true"] { background: var(--accent-bg); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.vs-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.vs-table { margin: 0; font-size: .8125rem; }
.vs-table th { font-size: .75rem; color: var(--tblr-secondary); font-weight: 600; white-space: nowrap; text-align: right; }
.vs-table th:first-child, .vs-table td:first-child { text-align: left; }
.vs-table td { text-align: right; white-space: nowrap; }
.vs-table td small { display: block; color: var(--tblr-secondary); font-size: .7rem; }
.vs-table tr.thin td { opacity: .55; }
.vs-hist td, .vs-hist th { text-align: left; }
.vs-hist td.num, .vs-hist th:nth-child(n+5) { text-align: right; }
.vs-hist td:nth-child(2), .vs-hist td:nth-child(4) { white-space: normal; min-width: 180px; }
.vs-hbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vs-hbar .input-icon { flex: 1 1 220px; max-width: 340px; }
.vs-pager { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; }
.res { display: inline-block; padding: 2px 8px; border-radius: 8px; font-size: .75rem; background: var(--surface-2); color: var(--tblr-secondary); }
.res.won { color: var(--profit); background: color-mix(in srgb, var(--profit) 12%, transparent); }
.res.lost { color: var(--loss); background: color-mix(in srgb, var(--loss) 12%, transparent); }
.vs-cal { display: grid; grid-template-columns: 44px repeat(7, minmax(0, 1fr)); gap: 4px; font-size: .7rem; }
.vs-cal .wd, .vs-cal .wk { color: var(--tblr-secondary); text-align: center; align-self: center; }
.vs-cal .d { min-height: 46px; border-radius: 8px; border: 1px solid var(--line); padding: 4px; display: grid; align-content: space-between; }
.vs-cal .d.empty { border-style: dashed; opacity: .4; }
.vs-cal .d .n { color: var(--tblr-secondary); }
.vs-cal .d .p { font-family: var(--tblr-font-monospace); font-weight: 600; text-align: right; }
@media (max-width: 767.98px) {
  .vs-table .col-x { display: none; }
  .vs-two { grid-template-columns: minmax(0, 1fr); }
  .vs-kpi b { font-size: 1.25rem; }
}

/* combinate: which ticket pays for each way the matches end */
.outcomes { margin-top: 14px; }
.outcomes ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.outcomes li { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-size: .8125rem; }
.outcomes .oc-if { display: grid; gap: 2px; color: var(--tblr-secondary); }
.outcomes .oc-if b { color: var(--tblr-body-color); font-weight: 600; }
.outcomes .oc-then { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }

/* protected mode (Combinate) */
.protect { padding-top: 12px; border-top: 1px dashed var(--line); }
.protect .chip i { color: var(--profit); }

/* combinate: locked cards and the odds check */
tr.rx.locked > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.lock-ic { margin-left: 6px; color: var(--accent); }
[data-clock].on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.spin { display: inline-block; animation: spin 1s linear infinite; margin-right: 4px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
.bet .what .was { font-size: .75rem; margin-left: 4px; }
.vswitch .vscan { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--glass); font-weight: 600; }
.vs-seg td.seg { white-space: normal; min-width: 220px; }
.vs-seg td.seg span { display: block; }
.vs-seg td small { display: block; }
.vrule { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-size: .68rem; font-weight: 600;
  color: var(--profit); background: color-mix(in srgb, var(--profit) 12%, transparent); vertical-align: 1px; white-space: nowrap; }
.vswitch .vbell[aria-pressed="true"] i { color: inherit; }
.vplace { margin-top: 14px; padding: 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.vplace-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; }
.vplace-row label { display: grid; gap: 3px; min-width: 0; }
.vplace-row span { font-size: .75rem; color: var(--tblr-secondary); }
@media (max-width: 420px) { .vplace-row { grid-template-columns: 1fr 1fr; } .vplace-row label:first-child { grid-column: 1 / -1; } }
@media (max-width: 767.98px) { .vswitch > [data-vview="mytickets"] { margin-right: 0; } }
.st-list { margin: 6px 0 0; padding-left: 18px; color: var(--tblr-body-color); font-size: .875rem; line-height: 1.55; }
.st-block { margin-top: 12px; }
.st-block h4 { font-size: .8125rem; color: var(--tblr-secondary); margin: 0 0 2px; font-weight: 600; }
.st-rule { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; padding: 12px 0; border-top: 1px dashed var(--line); }
.st-rule:first-child { border-top: 0; padding-top: 0; }
.st-rule small { display: block; color: var(--tblr-secondary); }
.st-rule p { margin: 4px 0; font-size: .875rem; }
.st-actions { display: flex; gap: 6px; flex: none; }
.st-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .875rem; }
.st-go { cursor: pointer; }
.st-go:hover td { background: var(--surface-2); }
.badge-n { font-family: var(--tblr-font-monospace); color: var(--accent); margin-left: 4px; }
.vs-table td small { display: block; }
.tk { padding: 12px 0; border-top: 1px dashed var(--line); }
.tk:first-of-type { border-top: 0; }
.tk-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .875rem; }
.tk-legs { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: .8125rem; }
.tk-h { font-size: .8125rem; color: var(--tblr-secondary); margin: 10px 0 4px; font-weight: 600; }
.tk-place { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 10px; }
.tk-place label { display: grid; gap: 3px; width: 120px; }
.tk-place span { font-size: .75rem; color: var(--tblr-secondary); }
.tk-place .btn { min-height: 40px; }
@media (max-width: 420px) { .tk-place label { flex: 1 1 100px; width: auto; } .tk-place .btn { flex: 1 1 100%; } }
.tk-done { opacity: .7; }
.vmy-n:empty { display: none; }
.vmy-n { font-family: var(--tblr-font-monospace); }
.tk-place .tk-book { width: 150px; }
.bv-pick { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 16px; border-radius: 14px;
  background: var(--accent-bg); font-size: .875rem; line-height: 1.5; }
.bv-pick i { color: var(--accent); font-size: 1.1rem; margin-top: 2px; }
#vstrat .vswitch button b { font-family: var(--tblr-font-monospace); }

/* slips: the book's record under the head, the glitch marks on the legs, the "all slips" fold */
.tk-rec { margin-top: 4px; color: var(--tblr-secondary); }
.tk-legs .res { margin-left: 4px; font-size: .7rem; padding: 1px 6px; }
.vs-all > summary { list-style: none; cursor: pointer; }
.vs-all > summary::-webkit-details-marker { display: none; }
.vs-all > summary h3::after { content: "▾"; margin-left: 8px; color: var(--tblr-secondary); font-size: .9em; }
.vs-all[open] > summary h3::after { content: "▴"; }
.vs-all > summary { margin-bottom: 10px; }
.vs-all > summary p { margin: 4px 0 0; color: var(--tblr-secondary); font-size: .8125rem; }
.vs-all > summary h3 { display: inline; }

/* the books on the value slips: pressed off = left out */
.sf-books { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.sf-books .chip.off { opacity: .55; text-decoration: line-through; }
.sf-books .chip i { margin-right: 4px; }

/* a slip, simple: a green dot when recommended; the rest under "Detalii" */
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--profit); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--profit) 22%, transparent); }
.tk-det { margin-top: 6px; font-size: .8125rem; }
.tk-det > summary { cursor: pointer; color: var(--tblr-secondary); }
.tk-det .st-list { margin: 6px 0 0; }

/* what changed in the value slips */
.ch-list { list-style: none; margin: 0; padding: 0; }
.ch-list li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px dashed var(--line); font-size: .875rem; }
.ch-list li:first-child { border-top: 0; }
.ch-list li > i { color: var(--tblr-secondary); margin-top: 2px; }
.ch-list li.ch-new > i { color: var(--accent); }
.ch-list li.ch-new { font-weight: 600; }
.ch-list .btn { margin-left: 6px; padding: 1px 8px; }

/* simple mode: the slip of the moment, big; the others as lines that open */
.bv-hero { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.tk-hero { border-top: 0; padding-top: 4px; }
.tk-hero .tk-head { font-size: 1rem; }
.tk-hero .tk-legs li { font-size: .95rem; }
.tk-legs li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.tk-open { white-space: nowrap; }
.tk-later { color: var(--tblr-secondary); }
.tk-mini { border-top: 1px dashed var(--line); }
.tk-mini > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 0; cursor: pointer; list-style: none; font-size: .9rem; }
.tk-mini > summary::-webkit-details-marker { display: none; }
.tk-mini > summary::after { content: "▾"; margin-left: auto; color: var(--tblr-secondary); }
.tk-mini[open] > summary::after { content: "▴"; }
.tk-mini .tk { border-top: 0; padding-top: 0; }
.vs-card + .vs-card, .vs-card + details.vs-card, details.vs-card + .vs-card, details.vs-card + details.vs-card { margin-top: 16px; }
@media (max-width: 600px) {
  .tk-legs li { flex-direction: column; align-items: stretch; }
  .tk-open { width: 100%; justify-content: center; min-height: 40px; }
  .tk-hero .tk-place .btn-accent { min-height: 48px; font-size: 1rem; }
}

/* Statistici detaliate: sub-tabs, numbers, charts */
.sd-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; }
.sd-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--tblr-secondary); font-size: .875rem; font-weight: 600; }
.sd-tabs button[aria-selected="true"] { background: var(--surface-2); color: var(--tblr-body-color); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.sd-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sd-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.sd-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: grid; gap: 4px; min-width: 0; }
.sd-kpi span { font-size: .75rem; color: var(--tblr-secondary); }
.sd-kpi b { font-size: 1.4rem; line-height: 1.2; }
.sd-kpi small { color: var(--tblr-secondary); font-size: .75rem; }
.sd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.sd-grid > .vs-card { margin-top: 0 !important; }
.sd-chart { min-height: 300px; }
@media (max-width: 900px) { .sd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sd-grid { grid-template-columns: 1fr; } }

.sd-sizes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.sd-sizes .chip.on { background: var(--surface-2); color: var(--tblr-body-color); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }

.sd-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sd-half { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.sd-half:last-child { border-color: #f5c518; }
.sd-half h4 { font-size: .8125rem; margin: 0 0 6px; color: var(--tblr-secondary); }
.sd-half p { margin: 0 0 2px; }
.sd-half b { font-size: 1.15rem; }

/* Contul meu: the tab bar on phones has one more page */
@media (max-width: 991.98px) { .tabbar a span { font-size: .62rem; } }

/* the slips placed, as cards */
.mt-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.mt-filter .chip.on { background: var(--surface-2); color: var(--tblr-body-color); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.mt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.mt-card { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 16px; background: var(--surface-2);
  border: 1px solid var(--line); border-top: 3px solid var(--line); min-width: 0; }
.mt-card.won { border-top-color: var(--profit); }
.mt-card.lost { border-top-color: var(--loss); }
.mt-card.open { border-top-color: var(--accent); }
.mt-card header { display: flex; align-items: center; gap: 8px; }
.mt-del { margin-left: auto; color: var(--tblr-secondary); padding: 2px 6px; }
.mt-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mt-nums div { display: grid; gap: 2px; }
.mt-nums span { font-size: .7rem; color: var(--tblr-secondary); }
.mt-nums b { font-size: 1.05rem; }
.mt-legs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mt-leg { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: start; font-size: .8125rem; }
.mt-leg > i { margin-top: 2px; color: var(--tblr-secondary); }
.mt-leg.won > i { color: var(--profit); }
.mt-leg.lost > i { color: var(--loss); }
.mt-leg div { display: grid; min-width: 0; }
.mt-leg div b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-leg div span { color: var(--tblr-secondary); }
.mt-leg.lost div span, .mt-leg.lost .num { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--loss) 60%, transparent); }
.mt-card footer { margin-top: auto; font-size: .75rem; color: var(--tblr-secondary); }

.mt-acts { margin-left: auto; display: inline-flex; gap: 2px; }
.mt-acts .btn { color: var(--tblr-secondary); padding: 2px 6px; }
.mt-card .mt-del { margin-left: 0; }
.mt-edit { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; padding: 10px; border-radius: 12px; background: var(--surface); border: 1px dashed var(--line); }
.mt-edit label { display: grid; gap: 3px; width: 92px; }
.mt-edit span { font-size: .7rem; color: var(--tblr-secondary); }
.mt-leg div span + span { font-size: .75rem; }

/* the slips' statistics inside "Contul meu": its own tabs, a step smaller */
.sd-sub button { padding: 5px 12px; font-size: .8125rem; }

/* bets that were value earlier: quieter rows under the list */
tr.rx.gone td { opacity: .78; }
tr.rx.gone:hover td, tr.rx.gone.sel td { opacity: 1; }

.mt-filter .ms-auto { flex: 1; }
.sl-table td { vertical-align: middle; }
.sl-table th:nth-child(-n+3), .sl-table td:nth-child(-n+3) { text-align: left; }

/* the work list: the ones placed go quiet at the bottom */
tr.rx.wl.done td { opacity: .6; }
tr.rx.wl.done:hover td, tr.rx.wl.done.sel td { opacity: 1; }
tr.rx.wl .btn { white-space: nowrap; }

/* Magicroom: a group chat in a fixed frame; only the conversation scrolls */
body.mg-on { overflow: hidden; }
.mg-room { display: flex; flex-direction: column; min-height: 320px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); overflow: hidden; }
.mg-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.mg-head > div { flex: 1; min-width: 0; }
.mg-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px; scroll-behavior: auto; }
.mg-list { display: flex; flex-direction: column; gap: 14px; }
.mg-ctx { padding: 14px 16px; margin-bottom: 18px; border: 1px dashed var(--line); border-radius: 14px; background: var(--surface-2); }
.mg-msg { display: flex; gap: 10px; align-items: flex-end; max-width: min(820px, 88%); }
.mg-msg.admin { align-self: flex-end; flex-direction: row-reverse; }
.mg-ava { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 700; color: #fff; }
.mg-msg.claude .mg-ava { background: var(--accent); }
.mg-msg.grok .mg-ava { background: #5b7cfa; }
.mg-msg.admin .mg-ava { background: var(--profit); color: #0b1a10; }
.mg-msg.other .mg-ava { background: var(--surface-2); color: var(--tblr-body-color); }
.mg-bubble { min-width: 0; padding: 10px 14px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); }
.mg-msg.claude .mg-bubble { border-bottom-left-radius: 4px; }
.mg-msg.grok .mg-bubble { border-bottom-left-radius: 4px; background: color-mix(in srgb, #5b7cfa 10%, var(--surface-2)); }
.mg-msg.admin .mg-bubble { border-bottom-right-radius: 4px; background: color-mix(in srgb, var(--profit) 14%, var(--surface-2)); }
.mg-bubble header { display: flex; gap: 10px; align-items: baseline; margin-bottom: 4px; }
.mg-bubble header span { font-size: .72rem; color: var(--tblr-secondary); }
.mg-body { font-size: .9rem; line-height: 1.55; overflow-wrap: anywhere; }
.mg-body > :first-child { margin-top: 0; } .mg-body > :last-child { margin-bottom: 0; }
.mg-body h1, .mg-body h2 { font-size: 1.05rem; margin: 14px 0 6px; }
.mg-body h3, .mg-body h4 { font-size: .95rem; margin: 12px 0 4px; }
.mg-body p { margin: 0 0 8px; }
.mg-body table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: .8125rem; display: block; overflow-x: auto; }
.mg-body th, .mg-body td { border-bottom: 1px solid var(--line); padding: 4px 8px; text-align: left; }
.mg-body pre { background: var(--surface); padding: 10px; border-radius: 10px; overflow-x: auto; font-size: .78rem; }
.mg-body ul, .mg-body ol { padding-left: 20px; margin: 6px 0; }
.mg-write { display: flex; gap: 8px; align-items: flex-end; padding: 12px; border-top: 1px solid var(--line); background: var(--surface); }
.mg-write textarea { flex: 1; resize: none; max-height: 180px; min-height: 42px; }
.mg-write .btn { height: 42px; width: 46px; padding: 0; display: grid; place-items: center; font-size: 1.1rem; }
@media (max-width: 600px) { .mg-msg { max-width: 96%; } .mg-ava { width: 26px; height: 26px; font-size: .62rem; } }

.daily { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); margin-bottom: 16px; }
.daily-big { margin: 0 0 4px; } .daily-big b { font-size: 1.4rem; }

/* the admin's on/off switch for the tab's search (Prematch, Live, Combinate) */
.scansw { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; }

/* a placed slip: the singles put on its matches too */
.mt-single { align-self: flex-start; }
.mt-sform { border-top: 1px solid var(--tblr-border-color); padding-top: 8px; }
.mt-srow { display: grid; grid-template-columns: 1fr 72px 64px; gap: 6px; align-items: center; font-size: .8125rem; margin-bottom: 6px; }
.mt-srow > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* "De pariat simplu": P+B and the number of rules, as tags under the match */
.wl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.wl-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: .75rem; font-weight: 600; line-height: 1.2;
  color: var(--tblr-primary); background: color-mix(in srgb, var(--tblr-primary) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tblr-primary) 30%, transparent); }
.wl-tag .ti { font-size: .9rem; }
.wl-tag.pb { color: var(--profit); background: color-mix(in srgb, var(--profit) 14%, transparent); border-color: color-mix(in srgb, var(--profit) 35%, transparent); }

/* "Am pus și simplu": the window with every match's single */
.sg-dialog { border: 1px solid var(--tblr-border-color); border-radius: 16px; padding: 0; width: min(560px, calc(100vw - 32px));
  background: var(--tblr-bg-surface, var(--surface-2)); color: inherit; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.sg-dialog::backdrop { background: rgba(0,0,0,.45); }
.sg-form { padding: 20px; display: grid; gap: 12px; }
.sg-form h3 { margin: 0; font-size: 1.05rem; }
.sg-form p { margin: 0; }
.sg-row { display: grid; grid-template-columns: 1fr 84px 84px; gap: 8px; align-items: end; font-size: .8125rem; }
.sg-row > span { align-self: center; }
.sg-row label { display: grid; gap: 2px; }
.sg-row label span { font-size: .7rem; color: var(--tblr-secondary); }
.sg-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
@media (max-width: 480px) { .sg-row { grid-template-columns: 1fr 1fr; } .sg-row > span { grid-column: 1 / -1; } }

/* "Pariurile puse": one block per match day */
.mt-day { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--tblr-border-color); }
.mt-day:first-of-type { margin-top: 8px; }
.mt-day h4 { margin: 0; font-size: .95rem; font-weight: 700; text-transform: capitalize; }
.mt-day span { font-size: .8125rem; color: var(--tblr-secondary); }

/* Bilete value: the deck of recommended slips, one at a time */
.bv-deck { display: grid; gap: 14px; }
.deck-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-2); justify-self: start; }
.deck-tab { border: 0; background: transparent; color: var(--tblr-secondary); padding: 8px 14px; border-radius: 9px; font-weight: 600; font-size: .875rem;
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.deck-tab[aria-pressed="true"] { background: var(--tblr-bg-surface, #1b2130); color: var(--tblr-body-color); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset; }
.deck-tab b { font-weight: 700; opacity: .8; }
.deck-new { font-size: .72rem; font-weight: 700; color: var(--profit); background: color-mix(in srgb, var(--profit) 14%, transparent); padding: 2px 7px; border-radius: 999px; }
.deck-nav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.deck-nav .btn { min-height: 44px; }
.deck-pos { text-align: center; font-size: .95rem; color: var(--tblr-secondary); }
.deck-pos b { color: var(--tblr-body-color); font-size: 1.1rem; }
.deck-note { display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: .8125rem;
  background: color-mix(in srgb, var(--tblr-warning, #f59f00) 12%, transparent); border: 1px solid color-mix(in srgb, var(--tblr-warning, #f59f00) 35%, transparent); }
.deck-note > i { color: var(--tblr-warning, #f59f00); font-size: 1.1rem; margin-top: 1px; }
.deck-note div { display: grid; gap: 2px; }
.bv-deck .tk { margin: 0; }
.deck-steps { counter-reset: none; list-style: none; padding-left: 0; }
.deck-steps > li { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; }
.deck-step { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem;
  border: 2px solid var(--tblr-border-color); color: var(--tblr-secondary); }
.deck-steps > li.opened .deck-step { border-color: var(--profit); background: var(--profit); color: #fff; }
.deck-steps > li.opened > div { opacity: .75; }
.deck-help { margin: 0; font-size: .8125rem; color: var(--tblr-secondary); max-width: 70ch; }
@media (max-width: 560px) {
  .deck-steps > li { grid-template-columns: 30px 1fr; }
  .deck-steps > li .tk-open { grid-column: 2; justify-self: start; }
  .deck-nav .btn { padding-inline: 10px; }
}
@media (prefers-reduced-motion: no-preference) { .deck-step { transition: background .2s, border-color .2s; } }

/* Provocarea: Claude and Grok side by side */
.pv-intro { margin: 0 0 12px; max-width: 80ch; }
.pv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 16px; }
.pv-side header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.pv-side h3 { margin: 0; font-size: 1.15rem; }
.pv-goal { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; margin-bottom: 12px; }
.pv-goal > span { font-size: .8125rem; color: var(--tblr-secondary); }
.pv-goal > b { font-size: 1.35rem; grid-row: span 2; align-self: center; }
.pv-goal > small { color: var(--tblr-secondary); font-size: .75rem; }
.pv-bar { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.pv-bar span { display: block; height: 100%; background: var(--profit); border-radius: 99px; }
.pv-nums { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pv-nums div { display: grid; gap: 1px; }
.pv-nums span, .pv-nums small { font-size: .75rem; color: var(--tblr-secondary); }
.pv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pv-bet, .pv-notes li { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; font-size: .8125rem;
  padding-bottom: 8px; border-bottom: 1px solid var(--tblr-border-color); }
.pv-notes li { grid-template-columns: 64px 1fr; align-items: start; }
.pv-bet div, .pv-notes div { display: grid; gap: 2px; min-width: 0; }
.pv-bet div b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-bet div span { color: var(--tblr-secondary); }
.pv-who { font-weight: 700; font-size: .75rem; }
.pv-notes p { margin: 0; }
.pv-lesson { color: var(--profit); }
.pv-lesson .ti { margin-right: 4px; }
.pv-days td, .pv-days th { font-size: .8125rem; }

.pv-risk { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--tblr-border-color); }
.pv-risk > span { grid-column: 1 / -1; font-size: .75rem; color: var(--tblr-secondary); }
.pv-risk div { display: grid; gap: 1px; }
.pv-risk small { font-size: .7rem; color: var(--tblr-secondary); }
@media (max-width: 480px) { .pv-risk { grid-template-columns: repeat(2, 1fr); } }
.deck-books { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.deck-books > span { font-size: .8125rem; color: var(--tblr-secondary); margin-right: 2px; }

/* the current slip as a card; the rest of the deck as small cards to jump to */
.deck-card { border: 1px solid var(--tblr-border-color); border-radius: 16px; background: var(--surface-2); padding: 18px 20px; }
.deck-card .tk { padding: 0; border: 0; }
.deck-card .tk-head { font-size: 1.05rem; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--tblr-border-color); }
.deck-card .tk-head .num { font-size: 1.25rem; }
.deck-card .tk-legs { gap: 12px; margin-top: 12px; }
.deck-card .tk-legs > li { padding: 10px 12px; border-radius: 12px; background: var(--tblr-bg-surface, rgba(255,255,255,.02)); border: 1px solid var(--tblr-border-color); }
.deck-card .tk-place { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--tblr-border-color); }
.deck-card .tk-place .btn-accent { min-height: 46px; padding-inline: 18px; font-size: .95rem; }
.deck-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 8px; }
.deck-chip { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 2px 8px; align-items: center; text-align: left;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--tblr-border-color); background: transparent; color: inherit; }
.deck-chip > span { grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 700; background: var(--surface-2); }
.deck-chip div { display: flex; align-items: center; gap: 6px; min-width: 0; }
.deck-chip b { font-size: .95rem; }
.deck-chip small { grid-column: 2; font-size: .72rem; color: var(--tblr-secondary); }
.deck-chip .bk-tag { justify-self: start; }
.deck-chip.on { border-color: var(--tblr-primary); box-shadow: 0 0 0 1px var(--tblr-primary) inset; }
.deck-chip:focus-visible, .deck-tab:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: 2px; }

/* Contul meu → În joc acum */
.ip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; align-items: start; }
.ip-card { border: 1px solid var(--tblr-border-color); border-radius: 14px; padding: 14px 16px; background: var(--surface-2); display: grid; gap: 10px; align-content: start; }
.ip-card.dead { opacity: .6; }
.ip-card header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .8125rem; }
.ip-legs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ip-leg { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid var(--tblr-border-color); font-size: .8125rem; }
.ip-top { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ip-state { color: var(--tblr-secondary); white-space: nowrap; }
.ip-state.live { color: var(--profit); }
.ip-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--profit); margin-right: 5px; vertical-align: middle; }
@media (prefers-reduced-motion: no-preference) { .ip-dot { animation: ipPulse 1.6s ease-in-out infinite; } @keyframes ipPulse { 50% { opacity: .3; } } }
.ip-prog { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ip-bar { flex: 1 1 120px; height: 8px; border-radius: 99px; background: var(--tblr-bg-surface, rgba(255,255,255,.06)); overflow: hidden; }
.ip-bar span { display: block; height: 100%; border-radius: 99px; background: var(--tblr-primary); }
.ip-leg.won .ip-bar span { background: var(--profit); }
.ip-leg.lost .ip-bar span { background: var(--loss); }
.ip-leg.ok .ip-bar span { background: var(--profit); }

.deck-steps > li { grid-template-columns: 30px 1fr auto auto; }
.tk-legbet { white-space: nowrap; }
@media (max-width: 560px) { .deck-steps > li .tk-legbet { grid-column: 2; justify-self: start; } }

/* Conturi (the admin's tab) */
.accts .kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.acc-new { padding: 16px; border-radius: 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.acc-new > div { width: 180px; }
.acc-new > #acc-xwrap { width: 110px; }
.acc-new > .acc-note { flex: 1 1 260px; width: auto; }
.acc-new #acc-xwrap[hidden] { display: none; }
.acc-made { padding: 16px; border-radius: 18px; margin-bottom: 16px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.acc-text { white-space: pre-wrap; font-family: var(--tblr-font-monospace); font-size: .9375rem; background: var(--surface-2, rgba(255,255,255,.04));
  padding: 12px 14px; border-radius: 12px; margin: 0 0 12px; user-select: all; }
.acc-table td { vertical-align: middle; font-size: .875rem; }
.acc-table tr.need td { background: color-mix(in srgb, var(--tblr-danger) 7%, transparent); }
.acc-name { border: 0; background: none; color: inherit; padding: 0; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.acc-ext { margin-top: 4px; max-width: 150px; }
.acc-note-in { min-width: 160px; }
.acc-det td { background: var(--surface-2, rgba(255,255,255,.03)); }
.acc-det-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 6px 4px; }
.acc-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: .875rem; }
.acc-log td { font-size: .8125rem; padding: 3px 8px; }
.st { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .8125rem; white-space: nowrap; }
.st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.st-ok { color: var(--profit); } .st-wait { color: var(--tblr-secondary); } .st-bad { color: var(--tblr-danger); }
@media (max-width: 991.98px) {
  .acc-new > div, .acc-new > .btn { flex: 1 1 100%; }
  .acc-det-grid { grid-template-columns: 1fr; }
  .accts .kpis { grid-template-columns: 1fr 1fr; }
}

/* the visitor's blurred rows: the margin and the sport are real, the rest is filler under a blur */
.blur-row { cursor: pointer; }
.blur-x { filter: blur(6px); user-select: none; pointer-events: none; }
.blur-row:hover .pct { text-decoration: underline; }

/* the account card: its buttons wrap instead of spilling out of the card (a visitor's "Intră în cont" is longer) */
.account .d-flex.gap-2 { flex-wrap: wrap; }
.account .d-flex.gap-2 > .btn { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
.account .progress[hidden] { display: none; }

/* Conturi: the list and an account's editor */
.acc-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.acc-bar .acc-q { flex: 0 1 280px; }
.acc-bar .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.acc-row { cursor: pointer; }
.acc-row.open td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.acc-note-line { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-ed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 10px 4px 4px; cursor: default; }
.acc-ed section { display: grid; gap: 8px; align-content: start; }
.acc-ed h4 { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tblr-secondary); margin: 0 0 2px; }
.acc-ed .acc-wide { grid-column: 1 / -1; border-top: 1px solid var(--tblr-border-color); padding-top: 12px; }
.acc-f { display: grid; gap: 4px; margin: 0; }
.acc-f > span { font-size: .75rem; color: var(--tblr-secondary); }
.acc-in { display: flex; gap: 6px; }
.acc-in .form-control { min-width: 0; flex: 1 1 auto; }
.acc-quick { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 991.98px) { .acc-ed { grid-template-columns: 1fr; } .acc-bar .acc-q { flex: 1 1 100%; } }