:root {
  --bg:     #161a2a;
  --panel:  #1e2338;
  --panel2: #242840;
  --border: #2a3050;
  --accent: #ffac2c;
  --text:   #e8eaf0;
  --muted:  #8a90aa;
  --live:   #e84040;
  --green:  #2ecc71;
  --hdr1:   80px;
  --hdr2:   40px;
  --hdr:    120px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', system-ui, sans-serif; font-size: 13px; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.header { background: var(--panel); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 200; overflow: visible; }

.header-top { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: var(--hdr1); border-bottom: 1px solid var(--border); overflow: visible; position: relative; z-index: 201; }
.logo { flex-shrink: 0; display: flex; align-items: center; position: relative; z-index: 202; }
.logo img { height: 120px; width: auto; object-fit: contain; display: block; }
.header-top-spacer { flex: 1; }
.app-btns { display: flex; gap: 6px; }
.app-btn {
  display: flex; align-items: center; gap: 5px; padding: 5px 10px;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 4px;
  color: var(--muted); font-size: 14px; white-space: nowrap; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.app-btn:hover { border-color: var(--accent); color: var(--accent); }
.app-btn svg { flex-shrink: 0; }
.header-actions { display: flex; gap: 8px; }
.btn { padding: 7px 16px; border-radius: 4px; border: none; cursor: pointer; font-size: 16px; font-weight: 600; transition: filter .15s; display: inline-flex; align-items: center; white-space: nowrap; }
.btn:hover { filter: brightness(1.1); }
.btn-login { background: var(--panel2); color: var(--text); }
.btn-reg   { background: var(--accent); color: #000; }

.header-nav-row { display: flex; align-items: stretch; height: var(--hdr2); padding: 0 4px; }
.nav-scroll-btn { flex-shrink: 0; background: none; border: none; color: var(--muted); cursor: pointer; padding: 0 5px; font-size: 17px; display: flex; align-items: center; transition: color .15s; }
.nav-scroll-btn:hover { color: var(--text); }
.header-nav { display: flex; align-items: stretch; flex: 1; overflow-x: auto; scrollbar-width: none; }
.header-nav::-webkit-scrollbar { display: none; }
.header-nav a { display: flex; align-items: center; padding: 0 12px; color: var(--muted); white-space: nowrap; font-size: 13px; transition: color .15s; border-bottom: 2px solid transparent; }
.header-nav a:hover { color: var(--text); }
.header-nav a.active { color: var(--accent); border-color: var(--accent); }

.app { display: flex; align-items: flex-start; min-height: calc(100vh - var(--hdr)); }

.sidebar {
  width: 185px; flex-shrink: 0;
  background: var(--bg); border-right: 1px solid var(--border);
  position: sticky; top: var(--hdr);
  max-height: calc(100vh - var(--hdr));
  overflow-y: auto;
  align-self: flex-start;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sidebar::-webkit-scrollbar { width: 0; height: 0; }

.sidebar-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--panel); border-bottom: 1px solid var(--border); cursor: pointer; color: var(--muted); font-size: 12px; }
.widget { border-bottom: 1px solid var(--border); }
.widget-hdr { padding: 9px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); background: var(--bg); }
.sport-item { display: flex; align-items: center; gap: 7px; padding: 7px 12px; cursor: pointer; transition: background .12s; font-size: 12px; }
.sport-item:hover { background: var(--panel); color: var(--accent); }
.sport-item .ico { font-size: 14px; flex-shrink: 0; }
.sport-item .name { flex: 1; }
.sport-item .cnt { font-size: 11px; color: var(--muted); background: var(--panel2); padding: 1px 6px; border-radius: 10px; }
.link-item { display: flex; align-items: center; gap: 8px; padding: 7px 12px; cursor: pointer; color: var(--muted); font-size: 12px; transition: color .12s, background .12s; }
.link-item:hover { color: var(--text); background: var(--panel); }
.link-item.live-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--live); flex-shrink: 0; animation: pulse 1.2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

.content { flex: 1; min-width: 0; }

.sports-bar { background: var(--panel); border-bottom: 1px solid var(--border); display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: none; padding: 0 6px; }
.sports-bar::-webkit-scrollbar { display: none; }
.sport-tab { display: flex; align-items: center; gap: 6px; padding: 0 13px; height: 40px; cursor: pointer; white-space: nowrap; color: var(--muted); font-size: 12px; border-bottom: 2px solid transparent; transition: color .12s; flex-shrink: 0; }
.sport-tab:hover { color: var(--text); }
.sport-tab.active { color: var(--accent); border-color: var(--accent); }
.sport-tab .tab-cnt { font-size: 10px; background: var(--live); color: #fff; padding: 1px 5px; border-radius: 8px; font-weight: 700; }

.banner { position: relative; background: #000; overflow: hidden; }
.banner-inner { display: flex; transition: transform .5s ease; }
.banner-slide { flex-shrink: 0; width: 100%; position: relative; }
.banner-slide img { width: 100%; display: block; max-height: 260px; object-fit: cover; }
.banner-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,.72) 0%, rgba(0,0,0,.3) 60%, transparent 100%); display: flex; flex-direction: column; justify-content: center; padding: 0 36px; pointer-events: none; }
.banner-overlay .bo-title { font-size: 28px; font-weight: 900; color: var(--accent); text-shadow: 0 2px 8px rgba(0,0,0,.6); margin-bottom: 6px; line-height: 1.2; }
.banner-overlay .bo-sub { font-size: 14px; color: rgba(255,255,255,.85); text-shadow: 0 1px 4px rgba(0,0,0,.5); margin-bottom: 16px; max-width: 360px; }
.banner-overlay .bo-btn { pointer-events: all; display: inline-block; padding: 9px 22px; background: var(--accent); color: #000; border-radius: 4px; font-weight: 700; font-size: 13px; align-self: flex-start; transition: filter .15s; }
.banner-overlay .bo-btn:hover { filter: brightness(1.1); }
.banner-ctrl { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.45); border: none; color: #fff; width: 32px; height: 48px; cursor: pointer; z-index: 5; border-radius: 3px; font-size: 22px; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.banner-ctrl:hover { background: rgba(255,172,44,.65); }
.banner-ctrl.prev { left: 8px; }
.banner-ctrl.next { right: 8px; }
.banner-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 5; }
.banner-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.3); cursor: pointer; transition: all .2s; }
.banner-dot.active { background: var(--accent); width: 18px; border-radius: 4px; }

.content-block { padding: 28px 24px; background: var(--panel); border-top: 2px solid var(--accent); font-size: 14px; line-height: 1.8; color: var(--text); }
.content-block .h1 { font-size: 26px; font-weight: 800; color: var(--accent); margin: 0 0 18px; line-height: 1.25; letter-spacing: -.3px; display: block; }
.content-block .h2 { font-size: 20px; font-weight: 700; color: var(--accent); margin: 30px 0 12px; line-height: 1.3; display: block; }
.content-block .h3 { font-size: 16px; font-weight: 700; color: #c9d0e8; margin: 22px 0 10px; display: block; }
.content-block .h4 { font-size: 13px; font-weight: 700; color: var(--muted); margin: 16px 0 8px; text-transform: uppercase; letter-spacing: .5px; display: block; }

/* ── Native HTML tag styles (for pasted content) ── */
.content-block h1,
.content-block h1 strong { font-size: 26px; font-weight: 800; color: var(--accent); margin: 0 0 18px; line-height: 1.25; letter-spacing: -.3px; display: block; }
.content-block h2,
.content-block h2 strong { font-size: 20px; font-weight: 700; color: var(--accent); margin: 30px 0 12px; line-height: 1.3; display: block; }
.content-block h3,
.content-block h3 strong { font-size: 16px; font-weight: 700; color: #c9d0e8; margin: 22px 0 10px; display: block; }
.content-block h4,
.content-block h4 strong { font-size: 13px; font-weight: 700; color: var(--muted); margin: 16px 0 8px; text-transform: uppercase; letter-spacing: .5px; display: block; }

.content-block p { margin: 0 0 14px; }
.content-block p:last-child { margin-bottom: 0; }
.content-block p span { color: inherit; }
.content-block strong { font-weight: 700; color: var(--text); }
.content-block a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.content-block a:hover { color: #fff; }

/* Unordered list — native ul */
.content-block ul { list-style: none; margin: 0 0 18px; padding: 0; }
.content-block ul li { padding: 5px 0 5px 22px; position: relative; color: var(--text); }
.content-block ul li::before { content: ''; position: absolute; left: 0; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* Ordered list — native ol */
.content-block ol { list-style: none; counter-reset: cnt; margin: 0 0 18px; padding: 0; }
.content-block ol li { padding: 5px 0 5px 30px; position: relative; counter-increment: cnt; color: var(--text); }
.content-block ol li::before { content: counter(cnt); position: absolute; left: 0; top: 5px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #000; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* Legacy class-based lists */
.content-block ul.cb-list li::before { top: 14px; }
.content-block ol.cb-list li::before { top: 5px; }

/* Table — native (no wrapper needed) */
.content-block table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 0 0 18px; overflow-x: auto; display: block; }
.content-block table thead tr:first-child td,
.content-block th { background: var(--bg); color: var(--accent); font-weight: 700; padding: 9px 12px; text-align: left; border: 1px solid var(--border); font-size: 12px; }
.content-block td { padding: 8px 12px; border: 1px solid var(--border); color: var(--text); vertical-align: top; }
.content-block td p { margin: 0; }
.content-block tr:nth-child(even) td { background: rgba(255,255,255,.03); }
.content-block tr:hover td { background: rgba(255,172,44,.05); }

/* Image — native img */
.content-block img { width: 100%; height: auto; display: block; border-radius: 4px; margin: 12px 0 18px; }

/* Legacy class helpers */
.content-block .tbl-wrap { overflow-x: auto; margin: 0 0 18px; }
.content-block .tbl-wrap table { display: table; margin: 0; }
.content-block .cb-img { width: 100%; height: auto; display: block; border-radius: 4px; margin: 8px 0 6px; }
.content-block .cb-img-caption { text-align: center; font-size: 11px; color: var(--muted); margin-bottom: 18px; }
.content-block hr { border: none; border-top: 1px solid var(--border); margin: 22px 0; }

.footer { background: var(--panel); border-top: 1px solid var(--border); padding: 24px 24px 0; }
.footer-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.footer-col .col-title { color: var(--text); font-size: 12px; font-weight: 700; margin-bottom: 12px; text-transform: uppercase; letter-spacing: .5px; display: block; }
.footer-col a { display: block; padding: 3px 0; color: var(--muted); font-size: 12px; transition: color .12s; }
.footer-col a:hover { color: var(--accent); }
.footer-col-logo { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
.footer-col-logo img { height: 50px; width: auto; object-fit: contain; display: block; }
.footer-badges { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 0; border-bottom: 1px solid var(--border); }
.footer-badge-logo img { height: 40px; width: auto; object-fit: contain; display: block; opacity: .9; transition: opacity .15s; }
.footer-badge-logo img:hover { opacity: 1; }
.badge-18 { width: 36px; height: 36px; border-radius: 50%; background: var(--live); color: #fff; font-size: 13px; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 2px solid rgba(255,255,255,.2); }
.footer-badges img.license-img { height: 36px; width: auto; object-fit: contain; opacity: .85; transition: opacity .15s; }
.footer-badges img.license-img:hover { opacity: 1; }
.footer-badges-text { font-size: 11px; color: var(--muted); line-height: 1.5; }
.responsible { padding: 14px 24px; background: rgba(255,172,44,.04); border-top: 1px solid rgba(255,172,44,.12); display: flex; align-items: flex-start; gap: 12px; font-size: 12px; color: var(--muted); line-height: 1.6; margin: 0 -24px; }
.responsible-icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.responsible strong { color: var(--accent); }
.copyright { padding: 12px 0; text-align: center; font-size: 11px; color: var(--muted); line-height: 1.7; }

.betslip { width: 280px; flex-shrink: 0; background: var(--bg); border-left: 1px solid var(--border); position: sticky; top: var(--hdr); height: calc(100vh - var(--hdr)); overflow-y: auto; align-self: flex-start; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.betslip::-webkit-scrollbar { width: 3px; }
.betslip::-webkit-scrollbar-thumb { background: var(--border); }
.betslip-hdr { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--panel); border-bottom: 1px solid var(--border); font-weight: 700; font-size: 13px; }
.betslip-tabs { display: flex; border-bottom: 1px solid var(--border); }
.betslip-tab { flex: 1; padding: 8px; text-align: center; font-size: 12px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; transition: color .15s; }
.betslip-tab.active { color: var(--accent); border-color: var(--accent); }
.betslip-empty { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 13px; }
.betslip-empty .icon { font-size: 40px; margin-bottom: 10px; opacity: .3; }
.betslip-item { padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--panel); }
.betslip-item-teams { font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.betslip-item-odd { color: var(--accent); font-size: 14px; font-weight: 700; }
.betslip-item-remove { float: right; cursor: pointer; color: var(--muted); font-size: 16px; }
.betslip-item-remove:hover { color: var(--live); }
.betslip-footer { padding: 14px; }
.stake-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 12px; }
.stake-input { width: 100px; background: var(--panel2); border: 1px solid var(--border); color: var(--text); padding: 6px 10px; border-radius: 3px; font-size: 13px; outline: none; text-align: right; }
.stake-input:focus { border-color: var(--accent); }
.potential-row { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--border); font-size: 12px; margin-bottom: 10px; }
.potential-amount { color: var(--green); font-weight: 700; font-size: 14px; }
.btn-place { width: 100%; padding: 11px; background: var(--accent); color: #000; border: none; border-radius: 4px; font-weight: 700; font-size: 14px; cursor: pointer; transition: filter .15s; text-align: center; display: block; }
.btn-place:hover { filter: brightness(1.1); }

.mobile-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 300; background: var(--panel); border-top: 1px solid var(--border); height: 56px; }
.mnav-items { display: flex; height: 100%; }
.mnav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; color: var(--muted); font-size: 10px; padding: 6px 4px; transition: color .15s; }
.mnav-item.active { color: var(--accent); }

@media (max-width: 1200px) { .betslip { display: none; } }
@media (max-width: 900px) {
  .sidebar { display: none; }
  :root { --hdr1: 80px; --hdr2: 36px; --hdr: 116px; }
}
@media (max-width: 600px) {
  :root { --hdr1: 60px; --hdr2: 0px; --hdr: 60px; }
  .header-nav-row { display: none; }
  .header-top { padding: 0 10px; gap: 8px; }
  .logo img { height: 90px; }
  .app-btns { display: none; }
  .btn { padding: 6px 12px; font-size: 14px; }
  .sports-bar { display: none; }
  .banner-overlay .bo-title { font-size: 18px; }
  .banner-overlay .bo-sub { display: none; }
  .content-block { padding: 18px 14px; font-size: 13px; }
  .content-block .h1 { font-size: 20px; }
  .content-block .h2 { font-size: 17px; }
  .footer-grid { grid-template-columns: repeat(2,1fr); gap: 16px; }
  .footer { padding: 18px 14px 0; }
  .mobile-bottom-nav { display: block; }
  body { padding-bottom: 56px; }
}
@media (max-width: 380px) {
  .header-actions .btn-login { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}