.smart-table{
  border:0;
  border-radius:14px;
  overflow:auto;
  background:#fff;
  box-shadow:var(--shadow-md);
  min-width:0;
}
.smart-table table{
  width:100%;
  margin:0;
  border:0;
  border-collapse:collapse;
  font-size:.92rem;
}
.smart-table th,.smart-table td{
  border:0;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
}
.smart-table thead{background:linear-gradient(135deg,var(--blue) 0%,var(--blue-deep) 100%)}
.smart-table thead th{
  position:static;
  padding:13px 16px;
  background:transparent;
  box-shadow:none;
  color:#fff;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.1em;
  line-height:1.35;
  text-transform:uppercase;
  white-space:normal;
}
.smart-table thead th:first-child{color:#fff}
.smart-table td{padding:13px 16px;font-size:.95rem;line-height:1.5}
.smart-table tbody tr:nth-child(even){background:#f6f9fc}
.smart-table tbody tr:hover{background:var(--mist)}
.smart-table tbody tr:last-child td{border-bottom:0}
.smart-table td b{color:var(--ink)}
.smart-table td .num{font-variant-numeric:tabular-nums;color:var(--blue-deep);font-weight:700}
.smart-table--compact thead{position:sticky;top:0;z-index:2}
.smart-table--compact .co-table tbody tr[aria-selected="true"]{background:#f4f8fe}


@media(max-width:820px){
  .smart-table.smart-table--compact{
    overflow:visible;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  .smart-table--compact .co-table tbody{gap:8px}
  .smart-table--compact .co-table tbody tr{
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff;
    box-shadow:var(--shadow-sm);
    overflow:hidden;
  }
  .smart-table--compact .co-table tbody tr:nth-child(even){background:#fff}
  .smart-table--compact .co-table tbody tr:hover,
  .smart-table--compact .co-table tbody tr:focus,
  .smart-table--compact .co-table tbody tr[aria-selected="true"]{background:#f4f8fe}
  .smart-table--compact .co-table tbody td{font-size:.78rem}
  .smart-table--compact .co-table .co-empty{border:0;box-shadow:none}
}

@media(max-width:640px){
  .smart-table:not(.smart-table--compact){
    overflow:visible;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  .smart-table:not(.smart-table--compact) table,
  .smart-table:not(.smart-table--compact) thead,
  .smart-table:not(.smart-table--compact) tbody,
  .smart-table:not(.smart-table--compact) tr,
  .smart-table:not(.smart-table--compact) th,
  .smart-table:not(.smart-table--compact) td{
    display:block;
    width:100%;
    min-width:0;
  }
  .smart-table:not(.smart-table--compact) thead{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
    white-space:nowrap;
  }
  .smart-table:not(.smart-table--compact) tbody tr{
    margin-bottom:14px;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff;
    box-shadow:var(--shadow-sm);
  }
  .smart-table:not(.smart-table--compact) tbody tr:nth-child(even),
  .smart-table:not(.smart-table--compact) tbody tr:hover{background:#fff}
  .smart-table:not(.smart-table--compact) tbody tr td{
    display:grid;
    grid-template-columns:minmax(110px,42%) minmax(0,1fr);
    gap:10px;
    align-items:baseline;
    padding:11px 16px;
    border-bottom:1px solid var(--mist);
    font-size:.95rem;
  }
  .smart-table:not(.smart-table--compact) tbody tr td:last-child{border-bottom:0}
  .smart-table:not(.smart-table--compact) tbody tr td::before{
    content:attr(data-label);
    color:var(--blue-deep);
    font-size:.8rem;
    font-weight:700;
  }
  .smart-table:not(.smart-table--compact) tbody tr td[colspan]{grid-template-columns:minmax(110px,42%) minmax(0,1fr)}
}