:root { --bg:#07344f; --bg2:#093f56; --panel:#123f56; --panel2:#315d70; --line:rgba(255,255,255,.1); --text:#f4fbff; --muted:#b9ced8; --accent:#08e58e; --accent2:#16d7e6; --danger:#ff4768; --header:76px; --side:280px; }
* { box-sizing:border-box; }
html,body { height:100%; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:var(--body-size,14px)/1.45 var(--body-font, Arial, Calibri, sans-serif); color:var(--text); background:linear-gradient(180deg,#05324e 0%,#0b4152 100%); overflow:hidden; }
a { color:var(--accent); }
.site-shell { height:100vh; display:grid; grid-template-rows:var(--header) 1fr; }
.site-header { height:var(--header); display:flex; align-items:center; gap:26px; padding:0 34px; background:#06334f; box-shadow:0 2px 16px rgba(0,0,0,.18); }
.logo { display:flex; align-items:center; gap:10px; flex:0 1 calc(var(--side) - 42px); max-width:calc(var(--side) - 42px); min-width:0; color:#fff; text-decoration:none; font-weight:900; font-size:clamp(16px,1.55vw,22px); white-space:nowrap; letter-spacing:.01em; }
.logo span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.logo-mark { position:relative; flex:0 0 36px; width:36px; height:36px; border-radius:12px; background:linear-gradient(135deg,var(--accent),var(--accent2)); box-shadow:inset 0 -10px 18px rgba(5,45,61,.18); overflow:hidden; }
.logo-mark::before { content:""; position:absolute; width:20px; height:20px; left:7px; top:7px; border:4px solid #052b3e; border-right-color:transparent; border-radius:50%; transform:rotate(-22deg); }
.logo-mark::after { content:""; position:absolute; right:6px; bottom:7px; width:13px; height:4px; border-radius:999px; background:#052b3e; transform:rotate(-42deg); }
.site-logo-img { max-width:190px; max-height:44px; object-fit:contain; display:block; }
.menu { display:flex; flex-wrap:wrap; gap:8px 22px; }
.site-header .menu { flex:1; align-items:center; }
.menu a { color:#fff; text-decoration:none; font-weight:900; text-transform:uppercase; font-size:13px; letter-spacing:.02em; }
.menu a:hover,.menu a.active { color:var(--accent); }
.lang-switch { display:flex; align-items:center; gap:4px; border:1px solid rgba(8,229,142,.45); border-radius:999px; padding:3px; }
.lang-switch a { min-width:34px; padding:6px 8px; border-radius:999px; color:#fff; text-align:center; text-decoration:none; font-weight:900; font-size:12px; }
.lang-switch .active { background:var(--accent); color:#042d3d; }
.hamburger { display:none; border:1px solid rgba(8,229,142,.45); color:#fff; background:transparent; border-radius:999px; padding:8px 12px; font-weight:900; }
.site-body { min-height:0; display:grid; grid-template-columns:var(--side) 1fr; }
.sidebar { position:sticky; top:0; height:calc(100vh - var(--header)); min-height:0; overflow:auto; padding:24px 18px 28px 34px; background:linear-gradient(180deg,rgba(5,45,61,.88),rgba(7,67,75,.9)); border-right:2px solid rgba(255,255,255,.18); scrollbar-color:rgba(255,255,255,.55) transparent; }
.sidebar .menu { display:grid; gap:5px; }
.sidebar .menu a { padding:7px 10px; border-radius:7px; color:rgba(255,255,255,.78); text-transform:none; font-size:13px; letter-spacing:0; }
.sidebar .menu a:hover,.sidebar .menu a.active { color:#052d3f; background:var(--accent); }
.content-scroll { min-width:0; min-height:0; overflow:auto; display:flex; flex-direction:column; }
.content { width:100%; padding:28px 36px 34px; flex:1; }
h1,h2,h3 { margin:0 0 12px; color:#fff; line-height:1.1; letter-spacing:0; font-family:var(--heading-font, Arial, sans-serif); }
h1 { color:var(--accent); font-size:var(--h1-size,42px); font-weight:1000; text-transform:uppercase; margin-bottom:22px; }
h2 { font-size:23px; margin-top:24px; }
h3 { font-size:17px; }
.content-text { max-width:1080px; margin:0 0 16px; font-size:var(--body-size,14px); color:#f4fbff; }
.content-html { margin:0 0 16px; }
.image-block { margin:16px 0; }
.image-block img { display:block; max-width:100%; height:auto; border:1px solid rgba(255,255,255,.12); border-radius:8px; background:#052d3f; }
.image-block img[data-lightbox] { cursor:zoom-in; }
.image-block img[data-no-lightbox] { cursor:default; }
figcaption { color:var(--muted); font-size:12px; margin-top:4px; }
.gallery { max-width:100%; margin:14px 0; }
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px; }
.gallery-grid .image-block { margin:0; min-width:0; }
.gallery-grid .image-block img { width:100%; height:210px; object-fit:cover; }
.gallery-strip { flex-wrap:nowrap; overflow:auto; padding-bottom:6px; }
.gallery-strip .image-block { flex:0 0 min(560px,84vw); margin:0; }
.table-wrap { width:100%; overflow:auto; margin:14px 0; border:1px solid rgba(255,255,255,.1); border-radius:7px; background:#133f56; }
table { width:100%; border-collapse:collapse; min-width:760px; font-size:var(--table-size,12px); color:#f4fbff; }
th,td { padding:3px 5px; border-bottom:1px solid rgba(255,255,255,.09); text-align:left; vertical-align:top; }
th { background:#1d5068; color:#fff; font-weight:900; }
tr:nth-child(even) td { background:rgba(255,255,255,.025); }
footer { margin-top:auto; color:rgba(255,255,255,.65); background:rgba(2,25,37,.34); border-top:1px solid rgba(255,255,255,.08); }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 36px; flex-wrap:wrap; font-size:12px; }
footer .menu a { font-size:12px; }
footer p { margin:0; }
.lightbox { position:fixed; inset:0; z-index:20; background:rgba(0,12,18,.88); display:grid; place-items:center; padding:24px; }
.lightbox[hidden] { display:none; }
.lightbox img { max-width:96vw; max-height:92vh; border-radius:8px; background:#fff; }
.lightbox button { position:fixed; width:38px; height:38px; border:0; border-radius:50%; background:#fff; color:#052d3f; font-size:24px; cursor:pointer; }
.lightbox-close { top:18px; right:18px; }
.lightbox-prev,.lightbox-next { top:50%; transform:translateY(-50%); width:46px; height:46px; font-size:34px; }
.lightbox-prev { left:18px; }
.lightbox-next { right:18px; }
.maintenance,.gate { min-height:100vh; overflow:auto; background:#07100d; color:#fff; }
.maintenance .page { min-height:100vh; position:relative; overflow:hidden; background:linear-gradient(135deg,#07100d 0%,#062f20 45%,#07345c 100%); }
.field-lines { position:absolute; inset:0; opacity:.18; background:linear-gradient(90deg,transparent 49%,rgba(255,255,255,.55) 50%,transparent 51%), repeating-linear-gradient(0deg,transparent 0 52px,rgba(255,255,255,.24) 53px,transparent 54px); pointer-events:none; }
.maintenance header { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:28px 36px; }
.status,.eyebrow { color:#78ffc2; font-size:14px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.status { border:1px solid rgba(32,255,138,.3); padding:8px 16px; border-radius:999px; background:rgba(32,255,138,.08); }
.hero { position:relative; z-index:2; width:100%; margin:auto; padding:72px 46px; display:grid; grid-template-columns:1.25fr .75fr; gap:38px; align-items:center; }
.hero h1 { font-size:clamp(42px,6vw,86px); margin:12px 0 18px; color:#fff; text-transform:none; }
.lead { font-size:21px; color:rgba(255,255,255,.78); max-width:760px; }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.badge { padding:10px 14px; border-radius:14px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:#fff; font-weight:800; }
.visual { display:flex; justify-content:center; }
.score-card { width:min(360px,92%); padding:26px; border-radius:22px; background:rgba(2,8,7,.78); border:1px solid rgba(255,255,255,.14); box-shadow:0 18px 45px rgba(0,0,0,.36); }
.match { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; color:rgba(255,255,255,.72); font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.teams { display:grid; gap:14px; margin-bottom:22px; }
.team { display:flex; align-items:center; justify-content:space-between; font-size:18px; font-weight:900; }
.odds { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.odd { padding:13px 8px; text-align:center; border-radius:14px; background:rgba(32,255,138,.1); border:1px solid rgba(32,255,138,.22); color:#9dffd0; font-weight:900; }
.gate { display:grid; place-items:center; }
.gate main { width:min(360px,92%); }
.gate label { display:grid; gap:5px; margin:10px 0; color:rgba(255,255,255,.78); font-weight:700; }
.gate input { width:100%; padding:10px; border-radius:8px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:#fff; }
.gate button { width:100%; margin-top:8px; padding:11px; border:0; border-radius:10px; background:#20ff8a; color:#07100d; font-weight:900; }
.error { color:#ffd0cc; }
@media (max-width:900px) {
  body { overflow:hidden; }
  .site-shell { grid-template-rows:64px 1fr; }
  .site-header { height:64px; padding:0 14px; gap:12px; }
  .logo { font-size:17px; }
  .site-header .menu { display:none; }
  .hamburger { display:inline-flex; margin-left:auto; }
  .site-body { grid-template-columns:1fr; position:relative; }
  .sidebar { position:absolute; z-index:8; top:0; bottom:0; left:0; height:auto; width:min(310px,86vw); transform:translateX(-104%); transition:.18s ease; padding:18px; box-shadow:18px 0 35px rgba(0,0,0,.26); }
  .sidebar.open { transform:translateX(0); }
  .content { padding:20px 14px 24px; }
  h1 { font-size:30px; margin-bottom:16px; }
  h2 { font-size:20px; }
  .footer-inner { padding:14px; align-items:flex-start; flex-direction:column; }
  .hero { grid-template-columns:1fr; padding:44px 24px 34px; }
  .lead { font-size:18px; }
}