:root {

  --casino-bg: #09093e;
  --casino-text: #eff0f2;
  --casino-muted: #eff0f2;


  --table-bg: var(--casino-bg);
  --col1-bg: var(--casino-bg);
  --text: var(--casino-text);
  --muted: var(--casino-muted);
  --line: rgba(0, 0, 0, .08);
  --line-soft: rgba(0, 0, 0, .06);
  --radius: 14px;
  --hover: var(--casino-bg);
}


@supports (color: color-mix(in oklch, white, black)) {
  :root {

    --table-bg: color-mix(in oklch, var(--casino-bg) 70%, white);


    --col1-bg: color-mix(in oklch, var(--table-bg) 95%, black);


    --muted: color-mix(in oklch, var(--casino-text) 70%, white);


    --hover: color-mix(in oklch, var(--table-bg) 92%, white);
  }
}


.i7gsdvxhb table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--table-bg);
  color: var(--text);
}

.i7gsdvxhb td {
  padding: 16px 18px 16px 20px;
  vertical-align: top;
  line-height: 1.45;
  word-break: break-word;
  border-bottom: 1px solid var(--line-soft);
  background: var(--table-bg);
}

.i7gsdvxhb tr:last-child td {
  border-bottom: none;
}


.i7gsdvxhb td:first-child {
  width: 34%;
  padding-left: 24px;
  font-weight: 600;
  color: var(--muted);
  background: var(--col1-bg);
}

/* вертикальная линия между колонками */
.i7gsdvxhb td:not(:first-child) {
  border-left: 1px solid var(--line-soft);
}

/* убрать внешние отступы у <p> */
.i7gsdvxhb td>p {
  margin: 0;
}

/* hover на ПК */
@media (hover:hover) {
  .i7gsdvxhb tr:hover td {
    background: var(--hover);
  }
}

/* ===== мобильные карточки ===== */
@media (max-width:640px) {
  .i7gsdvxhb table {
    border: 0;
    background: transparent;
  }

  .i7gsdvxhb tbody {
    display: grid;
    gap: 12px;
  }

  .i7gsdvxhb tr {
    display: block;
    background: var(--table-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
  }

  .i7gsdvxhb td {
    display: block;
    border: 0;
    background: transparent;
    padding: 14px 16px 14px 18px;
  }

  .i7gsdvxhb td:first-child {
    width: auto;
    padding-left: 20px;
    background: var(--col1-bg);
    color: var(--muted);
    font-size: 14px;
    border-bottom: 1px solid var(--line);
  }

  .i7gsdvxhb td:last-child {
    font-size: 16px;
  }
}