@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@600;700&display=swap');
:root {
  --xbet-blue: #fff;
  --xbet-dark: #1a3150;
  --xbet-light: #234661;
  --xbet-green: #28a745;
  --xbet-card: #234661;
  --xbet-border: #22345a;
  --xbet-text: #eaf4ff;
}
body {
  font-family: 'Cairo', Tahoma, Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: var(--xbet-light);
  color: var(--xbet-text);
}
header {
  background: linear-gradient(90deg, var(--xbet-dark) 60%, var(--xbet-blue) 100%);
  color: var(--xbet-text);
  padding: 22px 0 16px 0;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
header .logo {
  font-size: 2.1em;
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--xbet-text);
  margin-bottom: 6px;
  display: inline-block;
}
header .subtitle {
  font-size: 1.1em;
  color: #b3d4ff;
  margin-top: 4px;
}
.container {
  max-width: 600px;
  margin: 40px auto;
  background: var(--xbet-card);
  color: #fff;
  padding: 32px 24px 28px 24px;
  border-radius: 18px;
  box-shadow: 0 6px 32px rgba(0,0,0,0.18);
  text-align: center;
  border: 2px solid var(--xbet-border);
}
h1 {
  color: var(--xbet-blue);
  font-size: 2.1em;
  margin-bottom: 18px;
  text-shadow: 0 2px 8px #1a3150;
}
.general-table-wrapper {overflow-x:auto;margin:18px 0;}
.general-table {width:100%;border-collapse:collapse;background:#22345a;color:#fff;}
.general-table td {padding:10px 8px;border:1px solid #234661;}
.general-table th {background:#234661;color:#fff;}
.general-image {max-width:100%;border-radius:10px;box-shadow:0 2px 8px #0003;margin:12px 0;}
.button-block {text-align:center;margin:18px 0;}
.button-block button {background:linear-gradient(90deg,#fff 0%,#28a745 100%);color:#234661;font-weight:bold;padding:14px 32px;border-radius:10px;border:none;font-size:1.1em;cursor:pointer;transition:background 0.2s;}
.button-block button:hover {background:linear-gradient(90deg,#28a745 0%,#fff 100%);}
.general-ul, .general-ol {text-align:right;margin:18px 0 18px 18px;}
.general-ul li, .general-ol li {margin-bottom:8px;line-height:1.7;font-weight:500;}
h2 {color:#fff;margin-top:32px;}
.scrollTop {position:fixed;bottom:32px;left:32px;width:48px;height:48px;background:#28a745;color:#fff;display:flex;align-items:center;justify-content:center;border-radius:50%;box-shadow:0 2px 8px #0003;cursor:pointer;opacity:0;transition:opacity 0.3s;z-index:999;font-size:2em;}
footer {
  background: var(--xbet-dark);
  color: #b3d4ff;
  text-align: center;
  padding: 18px 0 10px 0;
  font-size: 1em;
  margin-top: 40px;
  border-radius: 18px 18px 0 0;
}
footer a {
  color: #b3d4ff;
  text-decoration: underline;
  margin: 0 8px;
  font-weight: bold;
  transition: color 0.2s;
}
footer a:hover {
  color: #28a745;
}
.table_link {
  color: #fff !important;
  font-weight: bold;
  font-size: 1.08em;
  text-decoration: underline;
  transition: color 0.2s;
}
.table_link:hover {
  color: #28a745 !important;
}
.toggle {
  background: #22345a !important;
  color: #fff !important;
  margin: 16px 0;
  padding: 14px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.2s;
}
.toggle.open {
  background: #234661 !important;
}
.toggle-content {
  font-weight: normal;
  margin-top: 8px;
  display: none;
  color: #b3d4ff !important;
  background: transparent;
}
@media (max-width: 700px) {
  .container { padding: 18px 6px 18px 6px; }
  h1 { font-size: 1.3em; }
  header .logo { font-size: 1.3em; }
}