:root {
  --container: 1200px;
  --bg: #ffffff;
  --text: #111111;
  --muted: #6b7280;
  --line: #e6e6e6;
  --black: #111;
  --badge: #111;
  --radius: 10px;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
  --gap: 18px;
}

* {
  box-sizing: border-box;
}

html,body {
  height: 100%;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

.container {
  width: min(var(--container), calc(100% - 32px));
  margin-inline: auto;
}

.topbar {
  background: var(--black);
  color: #fff;
  font-size: 13px;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}

.topbar__left {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.topbar__auth {
  opacity: .9;
}

.topbar__auth:hover {
  opacity: 1;
  text-decoration: underline;
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar__social {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  font-size: 12px;
  opacity: .9;
}

.topbar__social:hover {
  opacity: 1;
}

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.header__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.logo__text {
  font-weight: 800;
  letter-spacing: .2px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
  justify-content: center;
}

.nav__link {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 10px 6px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .4px;
  color: #111;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav__link:hover {
  opacity: .75;
}

.nav__link.is-active {
  opacity: 1;
}

.nav__item {
  position: relative;
}

.chev {
  font-size: 12px;
  opacity: .7;
}

.dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 190px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow);
  display: none;
}

.dropdown.is-open {
  display: grid;
}

.dropdown__link {
  padding: 10px 10px;
  border-radius: 8px;
  font-size: 14px;
}

.dropdown__link:hover {
  background: #f5f5f5;
}

.nav__bottom {
  position: relative;
  margin-left: 8px;
}

.lang {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 10px 6px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .2px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
}

.dropdown--lang {
  left: auto;
  right: 0;
  min-width: 160px;
}

.searchbtn {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.searchbtn:hover {
  background: #f7f7f7;
}

.searchbtn__icon {
  font-size: 18px;
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  background: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  padding: 10px;
  position: relative;

  box-shadow: 0 10px 25px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.06);
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

/* тонкая "подложка-линия" чтобы кнопка не выглядела пустой */
.burger::before{
  content:"";
  position:absolute;
  inset: 7px;
  border-radius: 10px;
  border: 1px dashed rgba(0,0,0,.12);
  pointer-events:none;
}

/* стрелочка/chevron справа (намёк: открывается меню) */
.burger::after{
  content:"";
  position:absolute;
  right: 11px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  pointer-events: none;

  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;

  /* chevron down */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23111' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


.burger:hover{
  background: rgba(255,255,255,.98);
  border-color: rgba(0,0,0,.14);
  box-shadow: 0 14px 32px rgba(0,0,0,.10), 0 4px 10px rgba(0,0,0,.07);
  transform: translateY(-1px);
}
.burger:active{ transform: translateY(0) scale(.98); }

/* линии бургера */
.burger span{
  display:block;
  height:2px;
  border-radius:999px;
  background: rgba(17,17,17,.9);
  transition: transform .2s ease, opacity .2s ease;
}

/* сдвигаем линии чуть левее, чтобы стрелка справа не мешала */
.burger span{
  margin-right: 10px;
}

.burger span + span{ margin-top:6px; }

.featured {
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.featured__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
}

.featured__badge {
  background: var(--badge);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .6px;
  padding: 8px 12px;
  border-radius: 6px;
  text-transform: uppercase;
}

.featured__text {
  margin: 0;
  color: #222;
  font-size: 15px;
  line-height: 1.3;
}

.featured__arrows {
  display: flex;
  gap: 8px;
}

.iconbtn {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.iconbtn:hover {
  background: #f7f7f7;
}

.main {
  padding: 26px 0 30px;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--gap);
  align-items: stretch;
}

.hero__right {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--gap);
}

.hero__bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}

.card {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  background: #ddd;
  min-height: 220px;
}

.card--big {
  min-height: 520px;
}

.card--wide {
  min-height: 280px;
}

.card--small {
  min-height: 220px;
}

.card__link {
  display: block;
  height: 100%;
  position: relative;
}

.card__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.01);
}

.card__overlay {
  position: absolute;
  inset: 0;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.78) 85%);
}

.tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  background: rgba(0,0,0,.7);
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .6px;
  padding: 6px 10px;
  border-radius: 6px;
  text-transform: uppercase;
}

.card__title {
  margin: 0;
  color: #fff;
  font-weight: 900;
  line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

.card__title--md {
  font-size: 22px;
}

.card__title--sm {
  font-size: 15px;
}

.card--big .card__title {
  font-size: 30px;
}

.card__meta {
  color: rgba(255,255,255,.85);
  font-size: 12px;
  font-weight: 600;
}

.card__link:hover .card__media {
  transform: scale(1.06);
  transition: transform .35s ease;
}

.card__link:hover .card__overlay {
  background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.82) 85%);
}

.content {
  padding: 18px 0 10px;
}

.content__grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 30px;
  align-items: start;
}

.block__head,
.widget__head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.block__label,
.widget__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 14px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
  background: #111;
  color: #fff;
  border-radius: 2px;
}

.block__label--yellow {
  background: #f5c400;
  color: #111;
}

.block__line,
.widget__line {
  height: 2px;
  background: #111;
  opacity: .9;
}

.block__body {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 26px;
}

.post__img {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background: #ddd;
}

.post__img img {
  width: 100%;
  height: auto;
  display: block;
}

.post__tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: rgba(0,0,0,.75);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 3px;
  text-transform: capitalize;
}

.post__title {
  margin: 14px 0 8px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 900;
  color: #111;
}

.post__meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: #333;
}

.post__excerpt {
  margin: 12px 0 0;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.65;
}

.list {
  display: grid;
  gap: 18px;
}

.list__item {
  border-bottom: 1px solid #ededed;
  padding-bottom: 18px;
}

.list__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.list__link {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 14px;
  align-items: start;
}

.list__thumb {
  border-radius: 4px;
  overflow: hidden;
  background: #ddd;
}

.list__thumb img {
  width: 100%;
  height: 64px;
  object-fit: cover;
  display: block;
}

.list__title {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 800;
  color: #111;
}

.list__date {
  margin-top: 8px;
  font-size: 12px;
  color: #9aa0a6;
}

.sidebar {
  display: grid;
  gap: 22px;
}

.widget {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.socialbox {
  display: grid;
  gap: 12px;
}

.socialrow {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #eee;
  background: #fff;
}

.socialrow__icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #fff;
}

.socialrow--fb .socialrow__icon {
  background: #3b5998;
}

.socialrow--tw .socialrow__icon {
  background: #1da1f2;
}

.socialrow--yt .socialrow__icon {
  background: #ff0000;
}

.socialrow__count {
  font-size: 12px;
  color: #111;
}

.socialrow__count strong {
  font-size: 13px;
}

.socialrow__action {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .4px;
  color: #111;
  white-space: nowrap;
}

.miniGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.miniCard__img {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #ddd;
}

.miniCard__img img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

.miniCard__tag {
  position: absolute;
  left: 8px;
  bottom: 8px;
  background: rgba(0,0,0,.75);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: capitalize;
}

.miniCard__title {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 900;
  color: #111;
}

.post__link:hover .post__title,
.list__link:hover .list__title,
.miniCard__link:hover .miniCard__title {
  text-decoration: underline;
}

.section {
  padding: 18px 0 30px;
}

.section__grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 30px;
  align-items: start;
}

.secHead {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.secHead__label {
  height: 30px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
  border-radius: 2px;
  background: #111;
  color: #fff;
}

.secHead__label--green {
  background: #2e7d32;
  color: #fff;
}

.secHead__line {
  height: 2px;
  background: #111;
  opacity: .9;
}

.secHead__line--green {
  background: #2e7d32;
  opacity: 1;
}

.nba__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.newsCard__img {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #ddd;
}

.newsCard__img img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.newsCard__tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: rgba(0,0,0,.78);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 3px;
  text-transform: uppercase;
}

.newsCard__title {
  margin: 14px 0 8px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 900;
  color: #111;
}

.newsCard__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #333;
}

.newsCard__excerpt {
  margin: 12px 0 0;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.65;
}

.nba__list {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}

.miniRow {
  border-bottom: 1px solid #ededed;
  padding-bottom: 16px;
}

.miniRow__link {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  align-items: start;
}

.miniRow__thumb {
  border-radius: 6px;
  overflow: hidden;
  background: #ddd;
}

.miniRow__thumb img {
  width: 100%;
  height: 64px;
  object-fit: cover;
  display: block;
}

.miniRow__title {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 900;
  color: #111;
}

.miniRow__date {
  margin-top: 8px;
  font-size: 12px;
  color: #9aa0a6;
}

.nba__controls {
  margin-top: 16px;
  display: flex;
  gap: 8px;
}

.reviewCard__img {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #ddd;
}

.reviewCard__img img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

.reviewCard__tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: rgba(0,0,0,.78);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 3px;
  text-transform: capitalize;
}

.reviewCard__title {
  margin: 14px 0 8px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 900;
  color: #111;
}

.reviewCard__meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: #333;
}

.reviewCard__excerpt {
  margin: 12px 0 0;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.65;
}

.newsCard__link:hover .newsCard__title,
.miniRow__link:hover .miniRow__title,
.reviewCard__link:hover .reviewCard__title {
  text-decoration: underline;
}

.split {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 30px;
  align-items: start;
}

.split__main {
  display: grid;
  gap: 28px;
}

.split__side {
  position: relative;
}

.secHead__label--blue {
  background: #5b7686;
  color: #fff;
  text-transform: lowercase;
  letter-spacing: .2px;
  font-weight: 800;
}

.secHead__line--blue {
  background: #5b7686;
  opacity: 1;
}

.secHead__label--red {
  background: #e53935;
  color: #fff;
}

.secHead__line--red {
  background: #e53935;
  opacity: 1;
}

.cards3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.tile__img {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #ddd;
}

.tile__img img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}

.tile__tag {
  position: absolute;
  left: 8px;
  bottom: 8px;
  background: rgba(0,0,0,.78);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: capitalize;
}

.tile__title {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 900;
  color: #111;
}

.catRow__controls {
  margin-top: 14px;
  display: flex;
  gap: 8px;
}

.mma__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 24px;
  align-items: start;
}

.post--mma .post__title {
  font-size: 22px;
}

.post--mma .post__img img {
  height: 260px;
  object-fit: cover;
}

.sideList {
  margin-top: 16px;
  display: grid;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid #eee;
}

.sideItem__link {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  align-items: start;
}

.sideItem__thumb {
  border-radius: 6px;
  overflow: hidden;
  background: #ddd;
}

.sideItem__thumb img {
  width: 100%;
  height: 60px;
  object-fit: cover;
  display: block;
}

.sideItem__title {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 900;
  color: #111;
}

.sideItem__date {
  margin-top: 8px;
  font-size: 12px;
  color: #9aa0a6;
}

.tile__link:hover .tile__title,
.sideItem__link:hover .sideItem__title {
  text-decoration: underline;
}

.twoCols {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 30px;
  align-items: start;
}

.secHead__label--purple {
  background: #7e57c2;
  color: #fff;
}

.secHead__line--purple {
  background: #7e57c2;
  opacity: 1;
}

.tList {
  display: grid;
  gap: 18px;
}

.tItem {
  border-bottom: 1px solid #ededed;
  padding-bottom: 18px;
}

.tItem:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.tItem__link {
  display: grid;
  grid-template-columns: 230px 1fr auto;
  gap: 18px;
  align-items: start;
}

.tItem__img {
  border-radius: 6px;
  overflow: hidden;
  background: #ddd;
}

.tItem__img img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}

.tItem__title {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 900;
  color: #111;
}

.tItem__meta {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12px;
  color: #333;
}

.tItem__excerpt {
  margin: 10px 0 0;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.65;
}

.tItem__comments {
  width: 22px;
  height: 18px;
  border: 1px solid #111;
  color: #111;
  border-radius: 2px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
  margin-top: 6px;
}

.sideFeature__title {
  margin: 0 0 10px;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 900;
  color: #111;
}

.sideFeature__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12px;
  color: #333;
  margin-bottom: 12px;
}

.sideFeature__comments {
  margin-left: auto;
  width: 22px;
  height: 18px;
  border: 1px solid #111;
  border-radius: 2px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
}

.sideFeature__img {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #ddd;
}

.sideFeature__img img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.sideFeature__tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: rgba(0,0,0,.78);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: capitalize;
}

.sideFeature__excerpt {
  margin: 12px 0 0;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.65;
}

.sideFeature__controls {
  margin-top: 14px;
  display: flex;
  gap: 8px;
}

.tItem__link:hover .tItem__title,
.sideFeature__link:hover .sideFeature__title {
  text-decoration: underline;
}

.triple {
  display: grid;
  gap: 26px;
}

.triple__top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 26px;
  align-items: start;
}

.secHead__label--blue2 {
  background: #1976d2;
  color: #fff;
}

.secHead__line--blue2 {
  background: #1976d2;
  opacity: 1;
}

.colFeature__img {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #ddd;
}

.colFeature__img img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  display: block;
}

.colFeature__overlay {
  position: absolute;
  inset: 0;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.82) 85%);
}

.colFeature__title {
  margin: 0;
  color: #fff;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 900;
}

.colFeature__meta {
  color: rgba(255,255,255,.85);
  font-size: 12px;
  font-weight: 700;
}

.miniList {
  margin-top: 14px;
  display: grid;
  gap: 14px;
}

.miniLine__link {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: start;
}

.miniLine__thumb {
  border-radius: 6px;
  overflow: hidden;
  background: #ddd;
}

.miniLine__thumb img {
  width: 100%;
  height: 44px;
  object-fit: cover;
  display: block;
}

.miniLine__title {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 900;
  color: #111;
}

.miniLine__date {
  margin-top: 6px;
  font-size: 12px;
  color: #9aa0a6;
}

.textList {
  display: grid;
  gap: 18px;
  padding-top: 2px;
}

.textItem {
  border-top: 1px solid #eee;
  padding-top: 14px;
}

.textItem:first-child {
  border-top: 0;
  padding-top: 0;
}

.textItem__title {
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 900;
  color: #111;
}

.textItem__meta {
  margin-top: 10px;
  font-size: 12px;
  color: #9aa0a6;
}

.textItem__meta strong {
  color: #111;
}

.triple__bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
}

.banner {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #ddd;
  min-height: 210px;
}

.banner__link {
  display: block;
  height: 100%;
  position: relative;
}

.banner__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.01);
}

.banner__overlay {
  position: absolute;
  inset: 0;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  text-align: center;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.82) 85%);
}

.banner__tag {
  width: fit-content;
  margin: 0 auto;
  background: rgba(0,0,0,.75);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}

.banner__title {
  margin: 0;
  color: #fff;
  font-weight: 900;
  letter-spacing: .3px;
  line-height: 1.25;
  font-size: 16px;
  text-transform: uppercase;
}

.banner__meta {
  color: rgba(255,255,255,.85);
  font-size: 12px;
  font-weight: 700;
}

.banner__link:hover .banner__img {
  transform: scale(1.06);
  transition: transform .35s ease;
}

.miniLine__link:hover .miniLine__title,
.textItem__link:hover .textItem__title,
.colFeature__link:hover .colFeature__title {
  text-decoration: underline;
}

.la {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 30px;
  align-items: start;
}

.laGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 26px;
}

.laCard__img {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #ddd;
}

.laCard__img img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.laCard__tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: rgba(0,0,0,.78);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 3px;
  text-transform: capitalize;
}

.laCard__title {
  margin: 14px 0 8px;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 900;
  color: #111;
}

.laCard__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #333;
}

.laCard__comments {
  margin-left: auto;
  width: 22px;
  height: 18px;
  border: 1px solid #111;
  border-radius: 2px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
}

.popList {
  display: grid;
  gap: 14px;
}

.popItem {
  border-bottom: 1px solid #eee;
  padding-bottom: 14px;
}

.popItem:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.popItem__link {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 12px;
  align-items: start;
}

.popItem__thumb {
  border-radius: 6px;
  overflow: hidden;
  background: #ddd;
}

.popItem__thumb img {
  width: 100%;
  height: 54px;
  object-fit: cover;
  display: block;
}

.popItem__title {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 900;
  color: #111;
}

.popItem__date {
  margin-top: 8px;
  font-size: 12px;
  color: #9aa0a6;
}

.loadMore {
  margin-top: 14px;
  width: 100%;
  height: 38px;
  border-radius: 6px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
  font-weight: 700;
  color: #6b7280;
}

.loadMore:hover {
  background: #f7f7f7;
}

.emptyBox {
  padding: 16px 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #9aa0a6;
}

.emptyBox__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #d1d5db;
}

.emptyBox__text {
  margin: 0;
  font-size: 13px;
}

.laCard__link:hover .laCard__title,
.popItem__link:hover .popItem__title {
  text-decoration: underline;
}

.footer {
  position: relative;
  color: #fff;
  background: #0b0b0b;
  margin-top: 30px;
  overflow: hidden;
}

.footer__bg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(800px 400px at 20% 10%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(700px 380px at 80% 0%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.85)),
    url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=2000&auto=format&fit=crop");
  background-size: cover;
  background-position: center;
  filter: grayscale(100%);
  opacity: .65;
  transform: scale(1.02);
}

.footer__inner {
  position: relative;
  padding: 42px 0 26px;
}

.footerTop {
  display: grid;
  grid-template-columns: 1fr 1fr 360px;
  gap: 28px;
  align-items: start;
}

.fCol__title {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
  opacity: .95;
}

.fPosts {
  display: grid;
  gap: 14px;
}

.fPost__link {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  align-items: start;
}

.fPost__thumb {
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
}

.fPost__thumb img {
  width: 100%;
  height: 44px;
  object-fit: cover;
  display: block;
}

.fPost__headline {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 800;
  color: rgba(255,255,255,.95);
}

.fPost__date {
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255,255,255,.65);
}

.fPost__link:hover .fPost__headline {
  text-decoration: underline;
}

.fCats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.fCats__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255,255,255,.9);
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.fCats__count {
  color: rgba(255,255,255,.75);
  font-size: 12px;
  font-weight: 800;
}

.fCats__link:hover {
  opacity: .9;
}

.footerDivider {
  height: 1px;
  background: rgba(255,255,255,.14);
  margin: 26px 0;
}

.footerMid {
  display: grid;
  grid-template-columns: 260px 1fr 360px;
  gap: 28px;
  align-items: start;
}

.fMidTitle {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
  opacity: .95;
}

.fLogo__box {
  width: 190px;
  height: 190px;
  border-radius: 8px;
  background: rgba(255,255,255,.92);
  display: grid;
  place-items: center;
}

.fLogo__brand {
  font-weight: 900;
  line-height: 1;
  text-align: left;
  color: #111;
}

.fLogo__sport {
  display: block;
  font-size: 26px;
  letter-spacing: .8px;
}

.fLogo__of {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #777;
  margin-top: 4px;
}

.fLogo__day {
  display: block;
  font-size: 32px;
  color: #e53935;
  letter-spacing: .8px;
  margin-top: 6px;
}

.fAbout__text {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255,255,255,.82);
}

.fAbout__mail {
  color: #7dd3fc;
  text-decoration: none;
}

.fAbout__mail:hover {
  text-decoration: underline;
}

.fSocial {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.fSocial__btn {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.9);
  background: rgba(0,0,0,.18);
}

.fSocial__btn:hover {
  background: rgba(255,255,255,.08);
}

.fGamble {
  margin-top: 10px;
  text-align: left;
}

.fGamble__age {
  width: 82px;
  height: 82px;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.85);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 26px;
  margin-bottom: 12px;
}

.fGamble__title {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: .2px;
}

.fGamble__accent {
  color: #ff9800;
}

.fGamble__text {
  margin-top: 10px;
  color: rgba(255,255,255,.8);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
}

.footerPartners {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

.partner {
  min-width: 130px;
  height: 54px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 900;
  letter-spacing: .6px;
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.22);
}

.partner--blue {
  background: rgba(33,150,243,.28);
  border-color: rgba(33,150,243,.35);
}

.partner--badge {
  background: rgba(255,255,255,.9);
  color: #111;
  border-color: rgba(255,255,255,.2);
}

.footerBottom {
  position: relative;
  border-top: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.55);
}

.footerBottom__inner {
  padding: 14px 0;
  font-size: 12px;
  color: rgba(255,255,255,.7);
}

.pageHead {
  padding: 18px 0 10px;
}

.breadcrumbs {
  font-size: 12px;
  color: #9aa0a6;
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumbs__link {
  color: #9aa0a6;
}

.breadcrumbs__link:hover {
  text-decoration: underline;
}

.breadcrumbs__sep {
  opacity: .6;
}

.breadcrumbs__current {
  color: #9aa0a6;
}

.pageTitle {
  margin: 10px 0 0;
  font-size: 44px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: .4px;
}

.catHero {
  padding: 14px 0 10px;
}

.catHero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 10px;
  align-items: stretch;
}

.catHero__right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.catHeroCard {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  background: #ddd;
  min-height: 220px;
}

.catHeroCard--big {
  min-height: 470px;
}

.catHeroCard__link {
  display: block;
  height: 100%;
  position: relative;
}

.catHeroCard__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.01);
}

.catHeroCard__overlay {
  position: absolute;
  inset: 0;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.82) 86%);
}

.catHeroCard__tag {
  width: fit-content;
  background: rgba(0,0,0,.75);
  color: #fff;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .6px;
  padding: 6px 10px;
  border-radius: 4px;
  text-transform: uppercase;
}

.catHeroCard__title {
  margin: 0;
  color: #fff;
  font-weight: 900;
  line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

.catHeroCard--big .catHeroCard__title {
  font-size: 30px;
}

.catHeroCard__title--sm {
  font-size: 16px;
}

.catHeroCard__meta {
  color: rgba(255,255,255,.85);
  font-size: 12px;
  font-weight: 700;
}

.catHeroCard__link:hover .catHeroCard__media {
  transform: scale(1.06);
  transition: transform .35s ease;
}

.catLayout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 30px;
  align-items: start;
}

.catPosts__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 26px;
}

.pCard__img {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  background: #ddd;
}

.pCard__img img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
}

.pCard__tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: rgba(0,0,0,.78);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 3px;
  text-transform: capitalize;
}

.pCard__title {
  margin: 14px 0 8px;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 900;
  color: #111;
}

.pCard__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #333;
}

.pCard__comments {
  margin-left: auto;
  width: 22px;
  height: 18px;
  border: 1px solid #111;
  border-radius: 2px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
}

.mrList {
  display: grid;
  gap: 14px;
}

.mrItem {
  border-bottom: 1px solid #eee;
  padding-bottom: 14px;
}

.mrItem:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.mrItem__link {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 12px;
  align-items: start;
}

.mrItem__thumb {
  border-radius: 6px;
  overflow: hidden;
  background: #ddd;
}

.mrItem__thumb img {
  width: 100%;
  height: 54px;
  object-fit: cover;
  display: block;
}

.mrItem__title {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 900;
  color: #111;
}

.mrItem__date {
  margin-top: 8px;
  font-size: 12px;
  color: #9aa0a6;
}

.pCard__link:hover .pCard__title,
.mrItem__link:hover .mrItem__title {
  text-decoration: underline;
}

.catHero--basket .catHeroCard__tag {
  letter-spacing: .5px;
}

.policy {
  max-width: 900px;
  padding: 60px 0;
  line-height: 1.8;
}

.policy__title {
  font-size: 42px;
  margin-bottom: 30px;
  font-weight: 900;
}

.policy h2 {
  margin-top: 35px;
  font-size: 22px;
  font-weight: 800;
}

.policy p {
  margin: 15px 0;
  color: #444;
}

.policy ul {
  margin: 15px 0 15px 20px;
}

.policy li {
  margin-bottom: 10px;
}

.policy__updated {
  margin-top: 40px;
  font-weight: 600;
  color: #777;
}

.partnerLink {
  width: 160px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.partnerLink:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.18);
}

.partnerLogo {
  max-height: 22px;
  max-width: 130px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  opacity: .95;
}

@media (max-width: 1024px) {
  :root {
    --container: 980px;
  }
  
  .hero__grid {
    grid-template-columns: 1fr;
  }
  
  .card--big {
    min-height: 420px;
  }
  
  .card--wide {
    min-height: 260px;
  }
}

@media (max-width: 820px) {
  .topbar__inner {
    gap: 8px;
  }
  
  .topbar__date {
    display: none;
  }
  
  .header__inner {
    grid-template-columns: 1fr auto auto;
  }
  
  .burger {
    display: inline-grid;
    place-items: center;
  }
  
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(420px, 92vw);
    background: #fff;
    border-left: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 16px;
    transform: translateX(110%);
    transition: transform .25s ease;
    display: grid;
    grid-auto-rows: max-content;
    gap: 14px;
    z-index: 60;
    overflow: auto;
  }
  
  .nav.is-open {
    transform: translateX(0);
  }
  
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
  }
  
  .nav__link {
    width: 100%;
    justify-content: space-between;
    padding: 12px 10px;
    border-radius: 10px;
    background: #fafafa;
    border: 1px solid var(--line);
  }
  
  .dropdown {
    position: static;
    border-radius: 10px;
    box-shadow: none;
    display: none;
    margin-top: 8px;
  }
  
  .dropdown.is-open {
    display: grid;
  }
  
  .nav__bottom {
    margin-left: 0;
  }
  
  .lang {
    width: 100%;
    justify-content: space-between;
    padding: 12px 10px;
    border-radius: 10px;
    background: #fafafa;
    border: 1px solid var(--line);
  }
  
  .featured__inner {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .featured__arrows {
    justify-content: flex-end;
  }
  
  .hero__bottom {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .card--big .card__title {
    font-size: 24px;
  }
  
  .card__overlay {
    padding: 14px;
  }
  
  .searchbtn {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 1024px) {
  .content__grid {
    grid-template-columns: 1fr;
  }
  
  .sidebar {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 820px) {
  .block__body {
    grid-template-columns: 1fr;
  }
  
  .sidebar {
    grid-template-columns: 1fr;
  }
  
  .miniGrid {
    grid-template-columns: 1fr;
  }
  
  .miniCard__img img {
    height: 160px;
  }
}

@media (max-width: 480px) {
  .post__title {
    font-size: 20px;
  }
  
  .list__link {
    grid-template-columns: 76px 1fr;
  }
  
  .list__thumb img {
    height: 58px;
  }
}

@media (max-width: 1024px) {
  .section__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .nba__top {
    grid-template-columns: 1fr;
  }
  
  .nba__list {
    grid-template-columns: 1fr;
  }
  
  .newsCard__img img {
    height: 240px;
  }
  
  .reviewCard__img img {
    height: 260px;
  }
}

@media (max-width: 480px) {
  .newsCard__title,
    .reviewCard__title {
    font-size: 20px;
  }
  
  .miniRow__link {
    grid-template-columns: 76px 1fr;
  }
  
  .miniRow__thumb img {
    height: 58px;
  }
}

@media (max-width: 1024px) {
  .split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .cards3 {
    grid-template-columns: 1fr;
  }
  
  .tile__img img {
    height: 200px;
  }
  
  .mma__grid {
    grid-template-columns: 1fr;
  }
  
  .post--mma .post__img img {
    height: 280px;
  }
}

@media (max-width: 1024px) {
  .twoCols {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .tItem__link {
    grid-template-columns: 1fr;
  }
  
  .tItem__img img {
    height: 220px;
  }
  
  .tItem__comments {
    justify-self: start;
  }
}

@media (max-width: 1024px) {
  .triple__top {
    grid-template-columns: 1fr;
  }
  
  .triple__bottom {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .colFeature__img img {
    height: 260px;
  }
  
  .banner {
    min-height: 240px;
  }
}

@media (max-width: 1024px) {
  .la {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .laGrid {
    grid-template-columns: 1fr;
  }
  
  .laCard__img img {
    height: 260px;
  }
  
  .laCard__comments {
    margin-left: 0;
  }
}

@media (max-width: 1024px) {
  .footerTop {
    grid-template-columns: 1fr 1fr;
  }
  
  .footerMid {
    grid-template-columns: 1fr;
  }
  
  .fLogo__box {
    width: 170px;
    height: 170px;
  }
  
  .footerPartners {
    justify-content: flex-start;
  }
}

@media (max-width: 820px) {
  .footerTop {
    grid-template-columns: 1fr;
  }
  
  .fPost__link {
    grid-template-columns: 64px 1fr;
  }
  
  .fPost__thumb img {
    height: 52px;
  }
}

@media (max-width: 480px) {
  .footer__inner {
    padding: 34px 0 22px;
  }
  
  .partner {
    width: 100%;
  }
}

@media (max-width: 1024px) {
  .pageTitle {
    font-size: 38px;
  }
  
  .catHero__grid {
    grid-template-columns: 1fr;
  }
  
  .catHeroCard--big {
    min-height: 420px;
  }
}

@media (max-width: 820px) {
  .pageTitle {
    font-size: 34px;
  }
  
  .catHero__right {
    grid-template-columns: 1fr;
  }
  
  .catHeroCard {
    min-height: 240px;
  }
}

@media (max-width: 480px) {
  .pageTitle {
    font-size: 30px;
  }
  
  .catHeroCard__overlay {
    padding: 14px;
  }
  
  .catHeroCard--big .catHeroCard__title {
    font-size: 24px;
  }
}

@media (max-width: 1024px) {
  .catLayout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .catPosts__grid {
    grid-template-columns: 1fr;
  }
  
  .pCard__img img {
    height: 260px;
  }
  
  .pCard__comments {
    margin-left: 0;
  }
}

  :root{
    --cb-bg:#0f172a;
    --cb-card:#111827;
    --cb-text:#e5e7eb;
    --cb-muted:#cbd5e1;
    --cb-border:rgba(255,255,255,.12);
    --cb-primary:#22c55e;
    --cb-primary-text:#052e16;
    --cb-shadow:0 18px 60px rgba(0,0,0,.35);
    --cb-radius:14px;
    --cb-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  }
  .cb{
    position:fixed;
    inset:auto 0 0 0;
    z-index:9999;
    padding:16px;
    font-family:var(--cb-font);
  }
  .cb.hidden{ display:none; }

  .cb__box{
    max-width:980px;
    margin:0 auto;
    background:linear-gradient(180deg, var(--cb-bg), var(--cb-card));
    color:var(--cb-text);
    border:1px solid var(--cb-border);
    border-radius:var(--cb-radius);
    box-shadow:var(--cb-shadow);
    padding:16px 16px 12px;
  }
  .cb__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:8px;
  }
  .cb__title{
    font-size:18px;
    margin:0;
    letter-spacing:.2px;
  }
  .cb__x{
    width:34px;height:34px;
    border-radius:10px;
    border:1px solid var(--cb-border);
    background:transparent;
    color:var(--cb-text);
    cursor:pointer;
    font-size:20px;
    line-height:1;
  }
  .cb__x:hover{ background:rgba(255,255,255,.06); }

  .cb__text{
    margin:0 0 12px;
    color:var(--cb-muted);
    font-size:14px;
    line-height:1.45;
  }

  .cb__actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:10px;
  }
  .cb__actions--panel{ margin-top:10px; margin-bottom:0; }

  .cb__btn{
    border:1px solid var(--cb-border);
    background:rgba(255,255,255,.04);
    color:var(--cb-text);
    padding:10px 12px;
    border-radius:12px;
    cursor:pointer;
    font-size:14px;
    font-weight:600;
  }
  .cb__btn:hover{ background:rgba(255,255,255,.07); }
  .cb__btn--primary{
    background:var(--cb-primary);
    border-color:rgba(0,0,0,.15);
    color:var(--cb-primary-text);
  }
  .cb__btn--primary:hover{ filter:brightness(.95); }
  .cb__btn--ghost{
    background:transparent;
  }

  .cb__panel{
    border-top:1px solid var(--cb-border);
    margin-top:10px;
    padding-top:12px;
  }
  .cb__row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    padding:10px 0;
  }
  .cb__label{ font-weight:700; font-size:14px; margin-bottom:4px; }
  .cb__desc{ font-size:13px; color:var(--cb-muted); line-height:1.4; max-width:680px; }

  .cb__fineprint{
    margin:10px 0 0;
    font-size:12px;
    color:var(--cb-muted);
  }
  .cb__fineprint a{ color:#93c5fd; text-decoration:underline; }

  /* Switch */
  .cb__switch{ position:relative; display:inline-block; width:44px; height:26px; flex:0 0 auto; margin-top:2px; }
  .cb__switch input{ opacity:0; width:0; height:0; }
  .cb__slider{
    position:absolute; cursor:pointer;
    inset:0;
    background:rgba(255,255,255,.12);
    border:1px solid var(--cb-border);
    transition:.2s;
    border-radius:999px;
  }
  .cb__slider:before{
    position:absolute; content:"";
    height:20px; width:20px;
    left:3px; top:2px;
    background:white;
    transition:.2s;
    border-radius:999px;
  }
  .cb__switch input:checked + .cb__slider{ background:rgba(34,197,94,.35); }
  .cb__switch input:checked + .cb__slider:before{ transform:translateX(18px); }
  .cb__switch input:disabled + .cb__slider{ opacity:.7; cursor:not-allowed; }

   :root{
    --ag-bg: rgba(2,6,23,.72);
    --ag-card: #0f172a;
    --ag-border: rgba(255,255,255,.14);
    --ag-text: #e5e7eb;
    --ag-muted: #cbd5e1;
    --ag-yes: #22c55e;
    --ag-yes-text:#052e16;
    --ag-no: rgba(255,255,255,.06);
    --ag-shadow: 0 24px 80px rgba(0,0,0,.45);
    --ag-radius: 16px;
    --ag-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  }

  .ag.hidden{ display:none; }

  /* центрирование */
  .ag{
    position:fixed;
    inset:0;
    z-index:10000;
    font-family:var(--ag-font);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px; /* чтобы не прилипало к краям на мобилках */
  }

  .ag__backdrop{
    position:absolute;
    inset:0;
    background:var(--ag-bg);
    backdrop-filter: blur(4px);
  }

  .ag__card{
    position:relative;
    width:min(520px, 100%);
    background:linear-gradient(180deg, #111827, var(--ag-card));
    border:1px solid var(--ag-border);
    border-radius:var(--ag-radius);
    box-shadow:var(--ag-shadow);
    padding:18px 18px 14px;
    color:var(--ag-text);
  }

  .ag__title{
    margin:0 0 10px;
    font-size:20px;
    letter-spacing:.2px;
  }

  .ag__text{
    margin:0 0 14px;
    color:var(--ag-muted);
    font-size:14px;
    line-height:1.5;
  }

  .ag__actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:10px;
  }

  .ag__btn{
    border:1px solid var(--ag-border);
    border-radius:12px;
    padding:10px 12px;
    cursor:pointer;
    font-weight:700;
    font-size:14px;
    color:var(--ag-text);
    background:var(--ag-no);
  }
  .ag__btn:hover{ background:rgba(255,255,255,.09); }

  .ag__btn--yes{
    background:var(--ag-yes);
    color:var(--ag-yes-text);
    border-color:rgba(0,0,0,.15);
  }
  .ag__btn--yes:hover{ filter:brightness(.95); }

  .ag__fineprint{
    margin:0;
    font-size:12px;
    color:var(--ag-muted);
    line-height:1.4;
  }