* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body {
  font-family: "Segoe UI", Arial, sans-serif;
  background: linear-gradient(180deg, #eceff5 0%, #f4f6fb 100%);
  color: #23293c;
  min-height: 100vh;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }

.layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  background: #f7f8fa;
  border-right: 1px solid #dde1ea;
  display: flex;
  flex-direction: column;
  padding: 14px 10px;
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
}
.brand {
  font-size: 1.36rem;
  font-weight: 800;
  letter-spacing: .02em;
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.brand-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #3c4c60;
  color: #fff;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px #55657a;
}

.side-nav { display: grid; gap: 6px; }
.side-nav a {
  padding: 11px 12px;
  border: 1px solid #e2e6ef;
  border-radius: 10px;
  background: #fff;
  font-size: .95rem;
  transition: .2s ease;
  min-height: 42px;
  display: flex;
  align-items: center;
}
.side-nav a:hover { background: #f3f5fb; border-color: #cfd6e8; transform: translateX(2px); }
.sidebar-lang {
  margin-top: auto;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e2e6ef;
}

.content {
  padding: 10px;
  width: min(1280px, 100%);
  margin: 0 auto;
}

.topbar {
  background: #f7f8fa;
  border: 1px solid #dde1ea;
  border-radius: 12px;
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 220px auto;
  gap: 10px;
  align-items: center;
  box-shadow: 0 6px 18px rgba(39, 53, 82, 0.06);
  position: sticky;
  top: 10px;
  z-index: 15;
}
.topbar input, .topbar select {
  width: 100%;
  border: 1px solid #d5dae6;
  border-radius: 8px;
  padding: 10px;
  font-size: .95rem;
  min-height: 42px;
}
.top-auth { display: flex; gap: 8px; }
.btn-light, .btn-main {
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
}
.btn-light { background: #fff; border: 1px solid #d5dae6; }
.btn-main { background: linear-gradient(135deg, #4a64ff, #6d52ff); color: #fff; }

.promo-box {
  margin-top: 10px;
  background: #f7f8fa;
  border: 1px solid #dde1ea;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 6px 18px rgba(39, 53, 82, 0.06);
}
.promo-call {
  text-align: center;
  padding: clamp(20px, 4vw, 36px) 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(79, 105, 255, .16), rgba(121, 90, 255, .14));
  border: 1px solid rgba(75, 100, 255, .27);
}
h1 { margin: 0 0 10px; font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.2; }
h2 { margin: 0 0 12px; font-size: clamp(1rem, 2vw, 1.3rem); line-height: 1.25; }

.panel {
  margin-top: 10px;
  background: #f7f8fa;
  border: 1px solid #dde1ea;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 6px 18px rgba(39, 53, 82, 0.05);
}

.slot-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #a8b3cb #e9edf6;
  -webkit-overflow-scrolling: touch;
}
.slot-row::-webkit-scrollbar { height: 8px; }
.slot-row::-webkit-scrollbar-thumb { background: #a8b3cb; border-radius: 999px; }
.slot-row::-webkit-scrollbar-track { background: #e9edf6; border-radius: 999px; }
.slot-row a {
  min-width: clamp(150px, 22vw, 190px);
  background: #fff;
  border-radius: 12px;
  padding: 8px;
  border: 1px solid #e3e6ee;
  scroll-snap-align: start;
  transition: .2s ease;
  flex: 0 0 auto;
}
.slot-row a:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(53, 74, 124, .16); }
.slot-row img { width: 100%; height: clamp(90px, 12vw, 114px); object-fit: cover; border-radius: 10px; display: block; }

.winners-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.winners-row article {
  background: #fff;
  border: 1px solid #e3e6ee;
  border-radius: 12px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 10px rgba(53, 74, 124, .08);
}
.winners-row b { color: #0d8a48; white-space: nowrap; }

.table-wrap { overflow-x: auto; background: #fff; border: 1px solid #e3e6ee; border-radius: 12px; }
table { width: 100%; border-collapse: collapse; min-width: 620px; }
th, td { padding: 10px; border-top: 1px solid #edf0f5; text-align: left; }
td a { color: #4a64ff; font-weight: 700; }

.footer {
  margin-top: 10px;
  background: #f7f8fa;
  border: 1px solid #dde1ea;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 6px 18px rgba(39, 53, 82, 0.05);
}
.footer-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.footer nav { display: grid; gap: 6px; }
.payments { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.payments img { width: 70px; height: 30px; object-fit: contain; }

.top-btn {
  position: fixed;
  right: 12px;
  bottom: 12px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #4a64ff;
  color: #fff;
  box-shadow: 0 8px 20px rgba(43, 71, 170, 0.35);
}

@media (max-width: 1180px) {
  .topbar { grid-template-columns: 1fr 190px auto; }
}

@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid #dde1ea;
  }
  .side-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content { width: 100%; }
  .topbar {
    grid-template-columns: 1fr;
    position: static;
  }
}

@media (max-width: 720px) {
  body { background-attachment: fixed; }
  .content { padding: 6px; }
  .topbar { padding: 8px; gap: 8px; }
  .topbar input, .topbar select { font-size: 16px; }
  .promo-box { padding: 10px; }
  .promo-call {
    padding: 12px;
    min-height: 0;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    text-align: left;
  }
  .promo-call h1 { margin: 0; font-size: 1.02rem; line-height: 1.25; color: #222a43; }
  .promo-call h2 { margin: 0; font-size: 0.88rem; line-height: 1.3; color: #404a66; }
  .promo-call .btn-main {
    width: 100%;
    margin-top: 2px;
  }
  .side-nav { grid-template-columns: 1fr; }
  .top-auth { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .top-auth a { width: 100%; }
  .winners-row { grid-template-columns: 1fr; }
  .slot-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 0;
    overflow: visible;
  }
  .slot-row a { min-width: 0; width: 100%; padding: 4px; border-radius: 10px; }
  .slot-row img { height: 72px; border-radius: 8px; }
  table, thead, tbody, tr, th, td { display: block; }
  thead { display: none; }
  table { min-width: 0; }
  td { border: 0; padding: 6px 10px; }
  tr { border-top: 1px solid #edf0f5; padding: 8px 0; }
  td::before { content: attr(data-label) ": "; font-weight: 700; }
  .footer-columns { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .brand { font-size: 1.18rem; }
  .brand-icon { width: 30px; height: 30px; border-radius: 8px; }
  h1 { font-size: 1.25rem; }
  h2 { font-size: 1rem; }
  .promo-call { padding: 10px; gap: 6px; }
  .promo-call h1 { font-size: 0.96rem; }
  .promo-call h2 { font-size: 0.82rem; }
  .top-auth { grid-template-columns: 1fr; }
  .slot-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slot-row img { height: 84px; }
  .panel, .promo-box, .footer { border-radius: 10px; }
}