/* =========================================================
   PRONOSCOUT — GLOBAL CSS
   Thème sombre néon / casino moderne
   Responsive complet
   Toutes les pages et composants générés
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

:root{
  --bg:#05070b;
  --bg-soft:#0b0f17;
  --bg-card:#111827;
  --bg-card-2:#0f1724;
  --bg-input:#0b1220;
  --bg-glass:rgba(255,255,255,0.04);

  --text:#f8fafc;
  --muted:#9aa4b2;
  --muted-2:#7f8b9c;

  --line:rgba(255,255,255,0.08);
  --line-strong:rgba(255,255,255,0.14);

  --green:#00ff9c;
  --green-2:#00d87f;
  --cyan:#00e6ff;
  --cyan-2:#0ea5e9;
  --gold:#ffd84d;
  --gold-2:#ffb800;
  --red:#ff4d6d;

  --shadow-lg:0 24px 60px rgba(0,0,0,0.35);
  --shadow-md:0 12px 32px rgba(0,0,0,0.26);
  --shadow-sm:0 8px 22px rgba(0,0,0,0.18);

  --radius-xl:24px;
  --radius-lg:18px;
  --radius-md:14px;
  --radius-sm:10px;

  --container:1200px;
}

/* =========================================================
   RESET
========================================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Poppins',sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(0,255,156,0.07), transparent 28%),
    radial-gradient(circle at top right, rgba(0,230,255,0.06), transparent 26%),
    linear-gradient(180deg, #05070b 0%, #070b12 100%);
  line-height:1.6;
  min-height:100vh;
}

img{
  max-width:100%;
  display:block;
}

button,
input,
select,
textarea{
  font:inherit;
}

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

textarea{
  resize:vertical;
  min-height:130px;
}

/* =========================================================
   LAYOUT
========================================================= */

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

.pageWrap{
  padding-top:18px;
  padding-bottom:48px;
}

.section{
  margin-bottom:28px;
}

.sectionCard,
.heroCard,
.card,
.matchCard,
.fileCard,
.couponCard,
.winCard,
.internalLink,
.seoCard,
.couponHero,
.adminBox{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.sectionCard,
.heroCard,
.couponHero,
.adminBox,
.seoCard{
  padding:22px;
}

.pageWrap > .section:last-child{
  margin-bottom:0;
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

.h1,
.heroTitle{
  font-size:clamp(28px, 4vw, 44px);
  line-height:1.12;
  font-weight:800;
  letter-spacing:-0.03em;
}

.h2{
  font-size:clamp(20px, 2.4vw, 28px);
  line-height:1.2;
  font-weight:700;
}

.heroTitle span,
.logoText{
  background:linear-gradient(90deg, var(--gold), var(--green));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.heroText,
.muted{
  color:var(--muted);
}

.mini{
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

/* =========================================================
   HEADER
========================================================= */

.siteHeader{
  position:sticky;
  top:0;
  z-index:1100;
  background:rgba(5,7,11,0.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}

.headerInner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:74px;
}

.logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:-0.02em;
  flex-shrink:0;
}

.logoText{
  font-size:24px;
}

.mainNav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
  flex-wrap:wrap;
}

.mainNav a{
  position:relative;
  color:#eef2f8;
  font-size:14px;
  font-weight:600;
  transition:0.25s ease;
}

.mainNav a:hover{
  color:var(--green);
}

.mainNav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:2px;
  background:linear-gradient(90deg, var(--green), var(--cyan));
  transition:width 0.25s ease;
}

.mainNav a:hover::after{
  width:100%;
}

/* =========================================================
   MARQUEE
========================================================= */

.topMarquee{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,0.06);
  background:
    linear-gradient(90deg, rgba(255,216,77,0.16), rgba(0,255,156,0.14), rgba(0,230,255,0.14));
}

.topMarqueeTrack{
  display:inline-block;
  white-space:nowrap;
  padding:10px 0;
  min-width:100%;
  animation:marqueeMove 28s linear infinite;
  font-size:13px;
  font-weight:700;
  color:#fff8dc;
  text-shadow:0 0 12px rgba(255,216,77,0.18);
}

@keyframes marqueeMove{
  from{ transform:translateX(100%); }
  to{ transform:translateX(-100%); }
}

/* =========================================================
   COMMON UI
========================================================= */

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:32px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.01em;
}

.pillGreen{
  background:rgba(0,255,156,0.12);
  border-color:rgba(0,255,156,0.28);
  color:#c9ffe9;
}

.pillGold{
  background:rgba(255,216,77,0.12);
  border-color:rgba(255,216,77,0.28);
  color:#fff0b8;
}

.pillCyan{
  background:rgba(0,230,255,0.12);
  border-color:rgba(0,230,255,0.28);
  color:#c9fbff;
}

.melbetOnly{
  background:linear-gradient(90deg, rgba(255,216,77,0.16), rgba(0,255,156,0.12));
  border-color:rgba(255,216,77,0.28);
  color:#fff;
}

.sectionTitle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.sectionTitle > div{
  min-width:0;
}

.sectionHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.bar,
.buttonRow,
.ctaBar,
.ctaRow,
.pillRow{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}

.heroActionsGrid{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) auto;
  gap:14px;
  align-items:start;
  margin-top:16px;
}

.heroQuickActions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.searchForm,
.search{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  width:100%;
}

.grid2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.fieldCardFull{
  grid-column:1 / -1;
}

.fieldCardButton{
  display:flex;
  align-items:end;
}

.internalGrid,
.proofGrid,
.ticketMeta,
.statTable,
.couponGrid{
  display:grid;
  gap:16px;
}

.internalGrid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.proofGrid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.ticketMeta{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.matchesGrid,
.winsGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.couponGrid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

/* =========================================================
   BUTTONS
========================================================= */

.btn,
.btnGhost,
.btnGold,
.paginationBtn,
.paginationJumpButton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  padding:11px 18px;
  border-radius:12px;
  border:1px solid transparent;
  cursor:pointer;
  font-size:14px;
  font-weight:700;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

.btn:hover,
.btnGhost:hover,
.btnGold:hover,
.paginationBtn:hover,
.paginationJumpButton:hover{
  transform:translateY(-1px);
}

.btn{
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.12);
  color:#fff;
}

.btn:hover{
  background:rgba(255,255,255,0.09);
}

.btnCta{
  background:linear-gradient(90deg, var(--green), var(--cyan));
  color:#04110c;
  border-color:transparent;
  box-shadow:0 0 0 1px rgba(255,255,255,0.06), 0 10px 24px rgba(0,255,156,0.18);
}

.btnGold,
.paginationJumpButton{
  background:linear-gradient(90deg, var(--gold), var(--gold-2));
  color:#181200;
  border-color:transparent;
  box-shadow:0 10px 24px rgba(255,184,0,0.16);
}

.btnTelegram{
  background:linear-gradient(90deg, #2AABEE, #229ED9);
  color:#fff;
  box-shadow:0 10px 22px rgba(34,158,217,0.22);
}

.btnGhost,
.backLink,
.pageBtn,
.pageNum,
.paginationNumber{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.12);
  color:#fff;
}

.btnGhost:hover,
.backLink:hover,
.pageBtn:hover,
.pageNum:hover,
.paginationNumber:hover{
  border-color:rgba(0,255,156,0.3);
  color:var(--green);
}

.btnSmall{
  min-height:38px;
  padding:8px 14px;
  font-size:12px;
}

/* =========================================================
   FORMS
========================================================= */

label{
  display:block;
  margin-bottom:8px;
  color:#eaf0f6;
  font-size:14px;
  font-weight:600;
}

.input,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="date"],
input[type="number"],
select,
textarea{
  width:100%;
  min-height:48px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.1);
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  color:#fff;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.input::placeholder,
input::placeholder,
textarea::placeholder{
  color:#7f8b9c;
}

.input:focus,
input:focus,
select:focus,
textarea:focus{
  border-color:rgba(0,255,156,0.35);
  box-shadow:0 0 0 4px rgba(0,255,156,0.08);
}

/* =========================================================
   CARDS
========================================================= */

.fileCard,
.internalLink,
.proofCard,
.fieldCard{
  padding:16px;
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.018));
  border:1px solid rgba(255,255,255,0.07);
  border-radius:16px;
}

.proofCard{
  color:#eef3f9;
  font-weight:600;
  min-height:92px;
  display:flex;
  align-items:center;
}

.internalLink h3,
.fileCard strong,
.proofCard strong{
  display:block;
  margin-bottom:6px;
}

/* =========================================================
   HERO / MAIN BLOCKS
========================================================= */

.heroCard{
  position:relative;
  overflow:hidden;
}

.heroCard::before,
.sectionCard::before,
.couponHero::before,
.seoCard::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(135deg, rgba(0,255,156,0.16), transparent 24%, transparent 74%, rgba(0,230,255,0.12));
  opacity:.6;
  z-index:0;
}

.heroCard > *,
.sectionCard > *,
.couponHero > *,
.seoCard > *{
  position:relative;
  z-index:1;
}

.heroText{
  max-width:860px;
  margin-top:10px;
}

.promoInline{
  margin-top:18px;
  padding:16px;
  border-radius:16px;
  border:1px solid rgba(255,216,77,0.16);
  background:linear-gradient(180deg, rgba(255,216,77,0.08), rgba(255,255,255,0.02));
}

.promoInlineLabel{
  font-weight:800;
  font-size:14px;
  color:#fff2bd;
  margin-bottom:10px;
}

.promoInlineRow{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:8px;
}

.promoInlineCode,
.promoBig,
.promoCode,
.couponHero__code,
.couponRowCode,
.couponCodeValue{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  padding:12px 18px;
  border-radius:16px;
  border:1px solid rgba(255,216,77,0.28);
  background:linear-gradient(180deg, rgba(255,216,77,0.10), rgba(255,255,255,0.03));
  color:#ffe58f;
  font-weight:900;
  letter-spacing:0.08em;
  box-shadow:0 0 0 1px rgba(255,255,255,0.04), 0 0 26px rgba(255,216,77,0.1);
}

.promoBig{
  font-size:32px;
  width:100%;
  margin-top:14px;
}

.promoCode{
  width:100%;
  font-size:28px;
}

/* =========================================================
   HOME COUPON BLOCK
========================================================= */

.couponHero__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.couponHero__title{
  font-size:24px;
  font-weight:800;
}

.couponMetaLine{
  color:#e8eef6;
  margin-bottom:10px;
}

.couponHero__code{
  font-size:34px;
  width:100%;
  margin-bottom:10px;
}

.couponHero__code.isEmpty{
  color:#9aa4b2;
}

.couponHero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:14px;
}

.couponFooterMeta{
  margin-top:12px;
}

.couponSeoText{
  color:#b8c2cf;
  margin-top:10px;
  font-size:14px;
}

/* =========================================================
   MATCH CARD / PREDICTION CARD
========================================================= */

.matchCard,
.card{
  padding:18px;
}

.matchCard .pill{
  margin-bottom:12px;
}

.teams,
.matchTeams{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.team{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1;
}

.teamRight{
  justify-content:flex-end;
  text-align:right;
}

.team img{
  width:34px;
  height:34px;
  object-fit:contain;
  border-radius:50%;
  flex-shrink:0;
  background:rgba(255,255,255,0.06);
  padding:3px;
}

.team span{
  font-size:14px;
  font-weight:700;
  color:#f8fafc;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.vs,
.vsBig,
.vsBadge{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:46px;
  height:46px;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  color:#ffe58f;
  font-weight:800;
  font-size:13px;
}

.matchMeta,
.meta,
.winMeta,
.couponMeta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:12px;
  color:var(--muted);
  font-size:13px;
}

.pick,
.pickBox{
  margin-top:12px;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(0,255,156,0.14);
  background:linear-gradient(180deg, rgba(0,255,156,0.06), rgba(255,255,255,0.02));
}

.pickBig{
  font-size:26px;
  font-weight:800;
  color:#d8ffee;
  margin-bottom:6px;
}

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:58px;
  height:34px;
  padding:0 12px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(0,255,156,0.18), rgba(0,230,255,0.18));
  color:#d8fff1;
  font-size:13px;
  font-weight:800;
  border:1px solid rgba(0,255,156,0.18);
}

/* =========================================================
   TABLE / STATS
========================================================= */

.statTable{
  gap:10px;
}

.statRow{
  display:grid;
  grid-template-columns:1.4fr .8fr .8fr;
  gap:10px;
  align-items:center;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
}

.statHead{
  background:rgba(255,255,255,0.06);
  font-weight:700;
}

.statName{
  color:#eef3f9;
}

.statVal{
  color:#c9ffe9;
  font-weight:700;
  text-align:center;
}

/* =========================================================
   WINS GALLERY
========================================================= */

.winCard{
  overflow:hidden;
}

.winCard img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  background:#0a0d14;
}

.winCard h3,
.couponCard h3{
  padding:14px 16px 0;
  font-size:17px;
  font-weight:700;
}

.winCard .muted,
.winCard .ticketMeta,
.winCard .winMeta,
.winCard .buttonRow{
  padding-left:16px;
  padding-right:16px;
}

.winCard .muted{
  padding-top:8px;
}

.winCard .ticketMeta{
  margin-top:12px;
  margin-bottom:10px;
}

.winCard .winMeta{
  margin-bottom:10px;
}

.winCard .buttonRow{
  padding-bottom:16px;
}

/* =========================================================
   ADS
========================================================= */

.melbetAds{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.adCard{
  position:relative;
  min-height:220px;
  overflow:hidden;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.08);
  background:#0d1118;
  box-shadow:var(--shadow-sm);
}

.adCard img{
  width:100%;
  height:100%;
  min-height:220px;
  object-fit:cover;
  transition:transform .35s ease;
}

.adCard:hover img{
  transform:scale(1.04);
}

.adOverlay{
  position:absolute;
  inset:auto 0 0 0;
  padding:18px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,0.85));
}

.adTitle{
  font-size:22px;
  font-weight:800;
  margin-bottom:4px;
}

.adSub{
  font-size:14px;
  color:#eaf0f7;
}

/* =========================================================
   COUPON CARD
========================================================= */

.couponCard{
  overflow:hidden;
}

.couponHeader img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  background:#0b0e13;
}

.couponBody{
  padding:16px;
}

.couponTitle{
  font-size:18px;
  font-weight:700;
  margin-bottom:8px;
}

.couponDescription{
  color:var(--muted);
  font-size:14px;
  margin-bottom:14px;
}

.couponStats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}

.couponStat{
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
}

.couponStat strong{
  display:block;
  margin-bottom:4px;
}

.couponCodeBox{
  margin-bottom:12px;
}

.couponCodeLabel{
  display:block;
  margin-bottom:6px;
  color:var(--muted);
  font-size:13px;
}

.couponDate{
  color:var(--muted);
  font-size:13px;
}

.couponFooter{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  padding:0 16px 16px;
}

/* =========================================================
   FILTERS
========================================================= */

.filtersGrid,
.responsiveFiltersForm{
  display:grid;
  gap:16px;
}

.filtersGrid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.filtersToggle{
  min-height:40px;
}

/* =========================================================
   PAGINATION
========================================================= */

.paginationWrap{
  display:grid;
  gap:14px;
  margin-top:18px;
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
}

.paginationMeta{
  color:var(--muted);
  font-size:14px;
}

.paginationBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.paginationBtnDisabled,
.dim{
  opacity:.45;
  pointer-events:none;
}

.paginationNumbers,
.pager{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.paginationNumber,
.pageNum{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  min-width:42px;
  height:42px;
  border-radius:12px;
  font-weight:700;
}

.paginationNumber.is-active,
.pageNum.active{
  background:linear-gradient(90deg, var(--green), var(--cyan));
  color:#04110c;
  border-color:transparent;
  box-shadow:0 10px 24px rgba(0,255,156,0.16);
}

.paginationDots,
.dots{
  color:var(--muted);
}

.paginationJump,
.goto{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.paginationJumpLabel{
  margin-bottom:0;
}

.paginationJumpInput,
.goto select{
  width:92px;
  min-height:42px;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.04);
  color:#fff;
}

/* =========================================================
   MATCH PAGE / DETAIL PAGE
========================================================= */

.matchHeroTop,
.matchHero,
.matchGrid{
  display:grid;
  gap:18px;
}

.matchHeroTop{
  grid-template-columns:minmax(0,1.7fr) minmax(320px,.9fr);
}

.matchTeams{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:16px;
  align-items:center;
}

.teamBig{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:10px;
  padding:20px;
  border-radius:18px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
}

.teamBig.right{
  text-align:center;
}

.teamBig img{
  width:72px;
  height:72px;
  object-fit:contain;
  background:rgba(255,255,255,0.06);
  border-radius:50%;
  padding:8px;
}

.teamName{
  font-size:22px;
  font-weight:800;
}

.teamTag{
  color:var(--muted);
  font-size:13px;
}

.vsMeta{
  display:grid;
  gap:8px;
  margin-top:10px;
  text-align:center;
}

.matchHeroSide{
  display:grid;
  gap:16px;
}

.sideCard{
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
}

.sideTitle{
  font-size:14px;
  font-weight:700;
  color:#fff;
  margin-bottom:8px;
}

.formRow{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.formTeam{
  padding:14px;
  border-radius:14px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
}

.formDots{
  margin-top:8px;
  font-weight:700;
  color:#d6fff0;
}

.whyBox{
  margin-top:14px;
  padding:14px;
  border-radius:14px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
}

.whyTitle{
  font-weight:700;
  margin-bottom:6px;
}

.tips{
  display:grid;
  gap:10px;
  padding-left:18px;
  color:#e7edf5;
}

.tipsFooter{
  margin-top:14px;
}

.promoMini{
  margin-top:8px;
}

/* =========================================================
   ADMIN
========================================================= */

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

.alert,
.successBox,
.errorBox{
  padding:14px 16px;
  border-radius:14px;
  margin-bottom:16px;
  font-size:14px;
}

.alert{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
}

.alertOk,
.successBox{
  background:rgba(0,255,156,0.08);
  border:1px solid rgba(0,255,156,0.2);
  color:#d7fff0;
}

.alertErr,
.errorBox{
  background:rgba(255,77,109,0.08);
  border:1px solid rgba(255,77,109,0.2);
  color:#ffd6df;
}

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

.couponRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
}

/* =========================================================
   TELEGRAM FLOAT
========================================================= */

.telegramWidget{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:1200;
}

.telegramButton{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:12px 18px;
  border-radius:999px;
  background:linear-gradient(90deg, #2AABEE, #229ED9);
  color:#fff;
  font-weight:700;
  box-shadow:0 18px 35px rgba(34,158,217,0.28);
}

.telegramTooltip{
  position:absolute;
  right:0;
  bottom:64px;
  min-width:max-content;
  padding:10px 12px;
  border-radius:12px;
  background:#0b1220;
  border:1px solid rgba(255,255,255,0.08);
  color:#fff;
  font-size:12px;
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition:all .2s ease;
}

.telegramWidget:hover .telegramTooltip{
  opacity:1;
  transform:translateY(0);
}

.telegramIcon{
  width:20px;
  height:20px;
  flex-shrink:0;
}

/* =========================================================
   TOAST
========================================================= */

.toast{
  position:fixed;
  right:18px;
  bottom:88px;
  z-index:1300;
  min-width:220px;
  max-width:min(90vw, 360px);
  padding:14px 16px;
  border-radius:14px;
  background:#0d1523;
  border:1px solid rgba(255,255,255,0.08);
  color:#fff;
  box-shadow:var(--shadow-lg);
  opacity:0;
  transform:translateY(12px);
  transition:all .22s ease;
}

.toast.is-visible,
.toast.show{
  opacity:1;
  transform:translateY(0);
}

/* =========================================================
   FOOTER
========================================================= */

.siteFooter{
  margin-top:40px;
  border-top:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.02);
}

.footerInner{
  padding:28px 0 34px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
}

.footerCol h3{
  font-size:16px;
  margin-bottom:10px;
}

.footerCol a{
  display:block;
  color:var(--muted);
  margin-bottom:8px;
  transition:.2s ease;
}

.footerCol a:hover{
  color:var(--green);
}

.footerBottom{
  padding:12px 0 24px;
  color:var(--muted);
  font-size:13px;
}

/* =========================================================
   MOBILE / TABLET
========================================================= */

@media (max-width: 1100px){
  .matchesGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .winsGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .proofGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .internalGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .matchHeroTop{
    grid-template-columns:1fr;
  }

  .footerInner{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 860px){
  .headerInner{
    min-height:auto;
    padding:14px 0;
    flex-direction:column;
    align-items:flex-start;
  }

  .mainNav{
    width:100%;
    justify-content:flex-start;
    gap:14px;
  }

  .heroActionsGrid{
    grid-template-columns:1fr;
  }

  .filtersGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .melbetAds{
    grid-template-columns:1fr;
  }

  .couponGrid{
    grid-template-columns:1fr;
  }

  .grid2,
  .formRow,
  .ticketMeta{
    grid-template-columns:1fr;
  }

  .matchesGrid,
  .winsGrid,
  .internalGrid,
  .proofGrid{
    grid-template-columns:1fr;
  }

  .matchTeams{
    grid-template-columns:1fr;
  }

  .vsBig{
    margin:0 auto;
  }
}

@media (max-width: 640px){
  .container{
    width:min(calc(100% - 20px), var(--container));
  }

  .pageWrap{
    padding-top:14px;
    padding-bottom:34px;
  }

  .heroCard,
  .sectionCard,
  .couponHero,
  .adminBox,
  .seoCard{
    padding:16px;
    border-radius:16px;
  }

  .matchCard,
  .card{
    padding:14px;
  }

  .searchForm,
  .search{
    grid-template-columns:1fr;
  }

  .couponHero__top,
  .sectionTitle,
  .sectionHead,
  .paginationBar,
  .couponRow{
    flex-direction:column;
    align-items:flex-start;
  }

  .couponHero__code,
  .promoBig,
  .promoCode{
    font-size:26px;
    min-height:50px;
  }

  .team img{
    width:30px;
    height:30px;
  }

  .teamBig{
    padding:16px;
  }

  .teamBig img{
    width:62px;
    height:62px;
  }

  .teamName{
    font-size:20px;
  }

  .filtersGrid{
    grid-template-columns:1fr;
  }

  .paginationJump,
  .goto{
    width:100%;
  }

  .paginationJumpInput,
  .goto select{
    width:100%;
  }

  .telegramWidget{
    right:12px;
    bottom:12px;
  }

  .telegramButton{
    min-height:48px;
    padding:10px 15px;
  }

  .toast{
    right:12px;
    left:12px;
    bottom:76px;
    min-width:unset;
    max-width:none;
  }

  .footerInner{
    grid-template-columns:1fr;
  }

  .logoText{
    font-size:22px;
  }

  .mainNav{
    gap:10px 14px;
  }

  .mainNav a{
    font-size:13px;
  }
}

/* =========================================================
   SMALL FIXES
========================================================= */

hr{
  border:none;
  border-top:1px solid rgba(255,255,255,0.08);
}

.hidden{
  display:none !important;
}

.is-collapsed{
  display:none !important;
}/* =========================================================
   PRONOSCOUT — GLOBAL CSS
   Thème sombre néon / casino moderne
   Responsive complet
   Toutes les pages et composants générés
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

:root{
  --bg:#05070b;
  --bg-soft:#0b0f17;
  --bg-card:#111827;
  --bg-card-2:#0f1724;
  --bg-input:#0b1220;
  --bg-glass:rgba(255,255,255,0.04);

  --text:#f8fafc;
  --muted:#9aa4b2;
  --muted-2:#7f8b9c;

  --line:rgba(255,255,255,0.08);
  --line-strong:rgba(255,255,255,0.14);

  --green:#00ff9c;
  --green-2:#00d87f;
  --cyan:#00e6ff;
  --cyan-2:#0ea5e9;
  --gold:#ffd84d;
  --gold-2:#ffb800;
  --red:#ff4d6d;

  --shadow-lg:0 24px 60px rgba(0,0,0,0.35);
  --shadow-md:0 12px 32px rgba(0,0,0,0.26);
  --shadow-sm:0 8px 22px rgba(0,0,0,0.18);

  --radius-xl:24px;
  --radius-lg:18px;
  --radius-md:14px;
  --radius-sm:10px;

  --container:1200px;
}

/* =========================================================
   RESET
========================================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Poppins',sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(0,255,156,0.07), transparent 28%),
    radial-gradient(circle at top right, rgba(0,230,255,0.06), transparent 26%),
    linear-gradient(180deg, #05070b 0%, #070b12 100%);
  line-height:1.6;
  min-height:100vh;
}

img{
  max-width:100%;
  display:block;
}

button,
input,
select,
textarea{
  font:inherit;
}

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

textarea{
  resize:vertical;
  min-height:130px;
}

/* =========================================================
   LAYOUT
========================================================= */

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

.pageWrap{
  padding-top:18px;
  padding-bottom:48px;
}

.section{
  margin-bottom:28px;
}

.sectionCard,
.heroCard,
.card,
.matchCard,
.fileCard,
.couponCard,
.winCard,
.internalLink,
.seoCard,
.couponHero,
.adminBox{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.sectionCard,
.heroCard,
.couponHero,
.adminBox,
.seoCard{
  padding:22px;
}

.pageWrap > .section:last-child{
  margin-bottom:0;
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

.h1,
.heroTitle{
  font-size:clamp(28px, 4vw, 44px);
  line-height:1.12;
  font-weight:800;
  letter-spacing:-0.03em;
}

.h2{
  font-size:clamp(20px, 2.4vw, 28px);
  line-height:1.2;
  font-weight:700;
}

.heroTitle span,
.logoText{
  background:linear-gradient(90deg, var(--gold), var(--green));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.heroText,
.muted{
  color:var(--muted);
}

.mini{
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

/* =========================================================
   HEADER
========================================================= */

.siteHeader{
  position:sticky;
  top:0;
  z-index:1100;
  background:rgba(5,7,11,0.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}

.headerInner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:74px;
}

.logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:-0.02em;
  flex-shrink:0;
}

.logoText{
  font-size:24px;
}

.mainNav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
  flex-wrap:wrap;
}

.mainNav a{
  position:relative;
  color:#eef2f8;
  font-size:14px;
  font-weight:600;
  transition:0.25s ease;
}

.mainNav a:hover{
  color:var(--green);
}

.mainNav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:2px;
  background:linear-gradient(90deg, var(--green), var(--cyan));
  transition:width 0.25s ease;
}

.mainNav a:hover::after{
  width:100%;
}

/* =========================================================
   MARQUEE
========================================================= */

.topMarquee{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,0.06);
  background:
    linear-gradient(90deg, rgba(255,216,77,0.16), rgba(0,255,156,0.14), rgba(0,230,255,0.14));
}

.topMarqueeTrack{
  display:inline-block;
  white-space:nowrap;
  padding:10px 0;
  min-width:100%;
  animation:marqueeMove 28s linear infinite;
  font-size:13px;
  font-weight:700;
  color:#fff8dc;
  text-shadow:0 0 12px rgba(255,216,77,0.18);
}

@keyframes marqueeMove{
  from{ transform:translateX(100%); }
  to{ transform:translateX(-100%); }
}

/* =========================================================
   COMMON UI
========================================================= */

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:32px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.01em;
}

.pillGreen{
  background:rgba(0,255,156,0.12);
  border-color:rgba(0,255,156,0.28);
  color:#c9ffe9;
}

.pillGold{
  background:rgba(255,216,77,0.12);
  border-color:rgba(255,216,77,0.28);
  color:#fff0b8;
}

.pillCyan{
  background:rgba(0,230,255,0.12);
  border-color:rgba(0,230,255,0.28);
  color:#c9fbff;
}

.melbetOnly{
  background:linear-gradient(90deg, rgba(255,216,77,0.16), rgba(0,255,156,0.12));
  border-color:rgba(255,216,77,0.28);
  color:#fff;
}

.sectionTitle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.sectionTitle > div{
  min-width:0;
}

.sectionHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.bar,
.buttonRow,
.ctaBar,
.ctaRow,
.pillRow{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}

.heroActionsGrid{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) auto;
  gap:14px;
  align-items:start;
  margin-top:16px;
}

.heroQuickActions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.searchForm,
.search{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  width:100%;
}

.grid2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.fieldCardFull{
  grid-column:1 / -1;
}

.fieldCardButton{
  display:flex;
  align-items:end;
}

.internalGrid,
.proofGrid,
.ticketMeta,
.statTable,
.couponGrid{
  display:grid;
  gap:16px;
}

.internalGrid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.proofGrid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.ticketMeta{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.matchesGrid,
.winsGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.couponGrid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

/* =========================================================
   BUTTONS
========================================================= */

.btn,
.btnGhost,
.btnGold,
.paginationBtn,
.paginationJumpButton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  padding:11px 18px;
  border-radius:12px;
  border:1px solid transparent;
  cursor:pointer;
  font-size:14px;
  font-weight:700;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

.btn:hover,
.btnGhost:hover,
.btnGold:hover,
.paginationBtn:hover,
.paginationJumpButton:hover{
  transform:translateY(-1px);
}

.btn{
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.12);
  color:#fff;
}

.btn:hover{
  background:rgba(255,255,255,0.09);
}

.btnCta{
  background:linear-gradient(90deg, var(--green), var(--cyan));
  color:#04110c;
  border-color:transparent;
  box-shadow:0 0 0 1px rgba(255,255,255,0.06), 0 10px 24px rgba(0,255,156,0.18);
}

.btnGold,
.paginationJumpButton{
  background:linear-gradient(90deg, var(--gold), var(--gold-2));
  color:#181200;
  border-color:transparent;
  box-shadow:0 10px 24px rgba(255,184,0,0.16);
}

.btnTelegram{
  background:linear-gradient(90deg, #2AABEE, #229ED9);
  color:#fff;
  box-shadow:0 10px 22px rgba(34,158,217,0.22);
}

.btnGhost,
.backLink,
.pageBtn,
.pageNum,
.paginationNumber{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.12);
  color:#fff;
}

.btnGhost:hover,
.backLink:hover,
.pageBtn:hover,
.pageNum:hover,
.paginationNumber:hover{
  border-color:rgba(0,255,156,0.3);
  color:var(--green);
}

.btnSmall{
  min-height:38px;
  padding:8px 14px;
  font-size:12px;
}

/* =========================================================
   FORMS
========================================================= */

label{
  display:block;
  margin-bottom:8px;
  color:#eaf0f6;
  font-size:14px;
  font-weight:600;
}

.input,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="date"],
input[type="number"],
select,
textarea{
  width:100%;
  min-height:48px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.1);
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  color:#fff;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.input::placeholder,
input::placeholder,
textarea::placeholder{
  color:#7f8b9c;
}

.input:focus,
input:focus,
select:focus,
textarea:focus{
  border-color:rgba(0,255,156,0.35);
  box-shadow:0 0 0 4px rgba(0,255,156,0.08);
}

/* =========================================================
   CARDS
========================================================= */

.fileCard,
.internalLink,
.proofCard,
.fieldCard{
  padding:16px;
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.018));
  border:1px solid rgba(255,255,255,0.07);
  border-radius:16px;
}

.proofCard{
  color:#eef3f9;
  font-weight:600;
  min-height:92px;
  display:flex;
  align-items:center;
}

.internalLink h3,
.fileCard strong,
.proofCard strong{
  display:block;
  margin-bottom:6px;
}

/* =========================================================
   HERO / MAIN BLOCKS
========================================================= */

.heroCard{
  position:relative;
  overflow:hidden;
}

.heroCard::before,
.sectionCard::before,
.couponHero::before,
.seoCard::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(135deg, rgba(0,255,156,0.16), transparent 24%, transparent 74%, rgba(0,230,255,0.12));
  opacity:.6;
  z-index:0;
}

.heroCard > *,
.sectionCard > *,
.couponHero > *,
.seoCard > *{
  position:relative;
  z-index:1;
}

.heroText{
  max-width:860px;
  margin-top:10px;
}

.promoInline{
  margin-top:18px;
  padding:16px;
  border-radius:16px;
  border:1px solid rgba(255,216,77,0.16);
  background:linear-gradient(180deg, rgba(255,216,77,0.08), rgba(255,255,255,0.02));
}

.promoInlineLabel{
  font-weight:800;
  font-size:14px;
  color:#fff2bd;
  margin-bottom:10px;
}

.promoInlineRow{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:8px;
}

.promoInlineCode,
.promoBig,
.promoCode,
.couponHero__code,
.couponRowCode,
.couponCodeValue{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  padding:12px 18px;
  border-radius:16px;
  border:1px solid rgba(255,216,77,0.28);
  background:linear-gradient(180deg, rgba(255,216,77,0.10), rgba(255,255,255,0.03));
  color:#ffe58f;
  font-weight:900;
  letter-spacing:0.08em;
  box-shadow:0 0 0 1px rgba(255,255,255,0.04), 0 0 26px rgba(255,216,77,0.1);
}

.promoBig{
  font-size:32px;
  width:100%;
  margin-top:14px;
}

.promoCode{
  width:100%;
  font-size:28px;
}

/* =========================================================
   HOME COUPON BLOCK
========================================================= */

.couponHero__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.couponHero__title{
  font-size:24px;
  font-weight:800;
}

.couponMetaLine{
  color:#e8eef6;
  margin-bottom:10px;
}

.couponHero__code{
  font-size:34px;
  width:100%;
  margin-bottom:10px;
}

.couponHero__code.isEmpty{
  color:#9aa4b2;
}

.couponHero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:14px;
}

.couponFooterMeta{
  margin-top:12px;
}

.couponSeoText{
  color:#b8c2cf;
  margin-top:10px;
  font-size:14px;
}

/* =========================================================
   MATCH CARD / PREDICTION CARD
========================================================= */

.matchCard,
.card{
  padding:18px;
}

.matchCard .pill{
  margin-bottom:12px;
}

.teams,
.matchTeams{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.team{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1;
}

.teamRight{
  justify-content:flex-end;
  text-align:right;
}

.team img{
  width:34px;
  height:34px;
  object-fit:contain;
  border-radius:50%;
  flex-shrink:0;
  background:rgba(255,255,255,0.06);
  padding:3px;
}

.team span{
  font-size:14px;
  font-weight:700;
  color:#f8fafc;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.vs,
.vsBig,
.vsBadge{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:46px;
  height:46px;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  color:#ffe58f;
  font-weight:800;
  font-size:13px;
}

.matchMeta,
.meta,
.winMeta,
.couponMeta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:12px;
  color:var(--muted);
  font-size:13px;
}

.pick,
.pickBox{
  margin-top:12px;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(0,255,156,0.14);
  background:linear-gradient(180deg, rgba(0,255,156,0.06), rgba(255,255,255,0.02));
}

.pickBig{
  font-size:26px;
  font-weight:800;
  color:#d8ffee;
  margin-bottom:6px;
}

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:58px;
  height:34px;
  padding:0 12px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(0,255,156,0.18), rgba(0,230,255,0.18));
  color:#d8fff1;
  font-size:13px;
  font-weight:800;
  border:1px solid rgba(0,255,156,0.18);
}

/* =========================================================
   TABLE / STATS
========================================================= */

.statTable{
  gap:10px;
}

.statRow{
  display:grid;
  grid-template-columns:1.4fr .8fr .8fr;
  gap:10px;
  align-items:center;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
}

.statHead{
  background:rgba(255,255,255,0.06);
  font-weight:700;
}

.statName{
  color:#eef3f9;
}

.statVal{
  color:#c9ffe9;
  font-weight:700;
  text-align:center;
}

/* =========================================================
   WINS GALLERY
========================================================= */

.winCard{
  overflow:hidden;
}

.winCard img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  background:#0a0d14;
}

.winCard h3,
.couponCard h3{
  padding:14px 16px 0;
  font-size:17px;
  font-weight:700;
}

.winCard .muted,
.winCard .ticketMeta,
.winCard .winMeta,
.winCard .buttonRow{
  padding-left:16px;
  padding-right:16px;
}

.winCard .muted{
  padding-top:8px;
}

.winCard .ticketMeta{
  margin-top:12px;
  margin-bottom:10px;
}

.winCard .winMeta{
  margin-bottom:10px;
}

.winCard .buttonRow{
  padding-bottom:16px;
}

/* =========================================================
   ADS
========================================================= */

.melbetAds{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.adCard{
  position:relative;
  min-height:220px;
  overflow:hidden;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.08);
  background:#0d1118;
  box-shadow:var(--shadow-sm);
}

.adCard img{
  width:100%;
  height:100%;
  min-height:220px;
  object-fit:cover;
  transition:transform .35s ease;
}

.adCard:hover img{
  transform:scale(1.04);
}

.adOverlay{
  position:absolute;
  inset:auto 0 0 0;
  padding:18px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,0.85));
}

.adTitle{
  font-size:22px;
  font-weight:800;
  margin-bottom:4px;
}

.adSub{
  font-size:14px;
  color:#eaf0f7;
}

/* =========================================================
   COUPON CARD
========================================================= */

.couponCard{
  overflow:hidden;
}

.couponHeader img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  background:#0b0e13;
}

.couponBody{
  padding:16px;
}

.couponTitle{
  font-size:18px;
  font-weight:700;
  margin-bottom:8px;
}

.couponDescription{
  color:var(--muted);
  font-size:14px;
  margin-bottom:14px;
}

.couponStats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}

.couponStat{
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
}

.couponStat strong{
  display:block;
  margin-bottom:4px;
}

.couponCodeBox{
  margin-bottom:12px;
}

.couponCodeLabel{
  display:block;
  margin-bottom:6px;
  color:var(--muted);
  font-size:13px;
}

.couponDate{
  color:var(--muted);
  font-size:13px;
}

.couponFooter{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  padding:0 16px 16px;
}

/* =========================================================
   FILTERS
========================================================= */

.filtersGrid,
.responsiveFiltersForm{
  display:grid;
  gap:16px;
}

.filtersGrid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.filtersToggle{
  min-height:40px;
}

/* =========================================================
   PAGINATION
========================================================= */

.paginationWrap{
  display:grid;
  gap:14px;
  margin-top:18px;
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
}

.paginationMeta{
  color:var(--muted);
  font-size:14px;
}

.paginationBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.paginationBtnDisabled,
.dim{
  opacity:.45;
  pointer-events:none;
}

.paginationNumbers,
.pager{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.paginationNumber,
.pageNum{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  min-width:42px;
  height:42px;
  border-radius:12px;
  font-weight:700;
}

.paginationNumber.is-active,
.pageNum.active{
  background:linear-gradient(90deg, var(--green), var(--cyan));
  color:#04110c;
  border-color:transparent;
  box-shadow:0 10px 24px rgba(0,255,156,0.16);
}

.paginationDots,
.dots{
  color:var(--muted);
}

.paginationJump,
.goto{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.paginationJumpLabel{
  margin-bottom:0;
}

.paginationJumpInput,
.goto select{
  width:92px;
  min-height:42px;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.04);
  color:#fff;
}

/* =========================================================
   MATCH PAGE / DETAIL PAGE
========================================================= */

.matchHeroTop,
.matchHero,
.matchGrid{
  display:grid;
  gap:18px;
}

.matchHeroTop{
  grid-template-columns:minmax(0,1.7fr) minmax(320px,.9fr);
}

.matchTeams{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:16px;
  align-items:center;
}

.teamBig{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:10px;
  padding:20px;
  border-radius:18px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
}

.teamBig.right{
  text-align:center;
}

.teamBig img{
  width:72px;
  height:72px;
  object-fit:contain;
  background:rgba(255,255,255,0.06);
  border-radius:50%;
  padding:8px;
}

.teamName{
  font-size:22px;
  font-weight:800;
}

.teamTag{
  color:var(--muted);
  font-size:13px;
}

.vsMeta{
  display:grid;
  gap:8px;
  margin-top:10px;
  text-align:center;
}

.matchHeroSide{
  display:grid;
  gap:16px;
}

.sideCard{
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
}

.sideTitle{
  font-size:14px;
  font-weight:700;
  color:#fff;
  margin-bottom:8px;
}

.formRow{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.formTeam{
  padding:14px;
  border-radius:14px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
}

.formDots{
  margin-top:8px;
  font-weight:700;
  color:#d6fff0;
}

.whyBox{
  margin-top:14px;
  padding:14px;
  border-radius:14px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
}

.whyTitle{
  font-weight:700;
  margin-bottom:6px;
}

.tips{
  display:grid;
  gap:10px;
  padding-left:18px;
  color:#e7edf5;
}

.tipsFooter{
  margin-top:14px;
}

.promoMini{
  margin-top:8px;
}

/* =========================================================
   ADMIN
========================================================= */

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

.alert,
.successBox,
.errorBox{
  padding:14px 16px;
  border-radius:14px;
  margin-bottom:16px;
  font-size:14px;
}

.alert{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
}

.alertOk,
.successBox{
  background:rgba(0,255,156,0.08);
  border:1px solid rgba(0,255,156,0.2);
  color:#d7fff0;
}

.alertErr,
.errorBox{
  background:rgba(255,77,109,0.08);
  border:1px solid rgba(255,77,109,0.2);
  color:#ffd6df;
}

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

.couponRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
}

/* =========================================================
   TELEGRAM FLOAT
========================================================= */

.telegramWidget{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:1200;
}

.telegramButton{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:12px 18px;
  border-radius:999px;
  background:linear-gradient(90deg, #2AABEE, #229ED9);
  color:#fff;
  font-weight:700;
  box-shadow:0 18px 35px rgba(34,158,217,0.28);
}

.telegramTooltip{
  position:absolute;
  right:0;
  bottom:64px;
  min-width:max-content;
  padding:10px 12px;
  border-radius:12px;
  background:#0b1220;
  border:1px solid rgba(255,255,255,0.08);
  color:#fff;
  font-size:12px;
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition:all .2s ease;
}

.telegramWidget:hover .telegramTooltip{
  opacity:1;
  transform:translateY(0);
}

.telegramIcon{
  width:20px;
  height:20px;
  flex-shrink:0;
}

/* =========================================================
   TOAST
========================================================= */

.toast{
  position:fixed;
  right:18px;
  bottom:88px;
  z-index:1300;
  min-width:220px;
  max-width:min(90vw, 360px);
  padding:14px 16px;
  border-radius:14px;
  background:#0d1523;
  border:1px solid rgba(255,255,255,0.08);
  color:#fff;
  box-shadow:var(--shadow-lg);
  opacity:0;
  transform:translateY(12px);
  transition:all .22s ease;
}

.toast.is-visible,
.toast.show{
  opacity:1;
  transform:translateY(0);
}

/* =========================================================
   FOOTER
========================================================= */

.siteFooter{
  margin-top:40px;
  border-top:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.02);
}

.footerInner{
  padding:28px 0 34px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
}

.footerCol h3{
  font-size:16px;
  margin-bottom:10px;
}

.footerCol a{
  display:block;
  color:var(--muted);
  margin-bottom:8px;
  transition:.2s ease;
}

.footerCol a:hover{
  color:var(--green);
}

.footerBottom{
  padding:12px 0 24px;
  color:var(--muted);
  font-size:13px;
}

/* =========================================================
   MOBILE / TABLET
========================================================= */

@media (max-width: 1100px){
  .matchesGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .winsGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .proofGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .internalGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .matchHeroTop{
    grid-template-columns:1fr;
  }

  .footerInner{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 860px){
  .headerInner{
    min-height:auto;
    padding:14px 0;
    flex-direction:column;
    align-items:flex-start;
  }

  .mainNav{
    width:100%;
    justify-content:flex-start;
    gap:14px;
  }

  .heroActionsGrid{
    grid-template-columns:1fr;
  }

  .filtersGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .melbetAds{
    grid-template-columns:1fr;
  }

  .couponGrid{
    grid-template-columns:1fr;
  }

  .grid2,
  .formRow,
  .ticketMeta{
    grid-template-columns:1fr;
  }

  .matchesGrid,
  .winsGrid,
  .internalGrid,
  .proofGrid{
    grid-template-columns:1fr;
  }

  .matchTeams{
    grid-template-columns:1fr;
  }

  .vsBig{
    margin:0 auto;
  }
}

@media (max-width: 640px){
  .container{
    width:min(calc(100% - 20px), var(--container));
  }

  .pageWrap{
    padding-top:14px;
    padding-bottom:34px;
  }

  .heroCard,
  .sectionCard,
  .couponHero,
  .adminBox,
  .seoCard{
    padding:16px;
    border-radius:16px;
  }

  .matchCard,
  .card{
    padding:14px;
  }

  .searchForm,
  .search{
    grid-template-columns:1fr;
  }

  .couponHero__top,
  .sectionTitle,
  .sectionHead,
  .paginationBar,
  .couponRow{
    flex-direction:column;
    align-items:flex-start;
  }

  .couponHero__code,
  .promoBig,
  .promoCode{
    font-size:26px;
    min-height:50px;
  }

  .team img{
    width:30px;
    height:30px;
  }

  .teamBig{
    padding:16px;
  }

  .teamBig img{
    width:62px;
    height:62px;
  }

  .teamName{
    font-size:20px;
  }

  .filtersGrid{
    grid-template-columns:1fr;
  }

  .paginationJump,
  .goto{
    width:100%;
  }

  .paginationJumpInput,
  .goto select{
    width:100%;
  }

  .telegramWidget{
    right:12px;
    bottom:12px;
  }

  .telegramButton{
    min-height:48px;
    padding:10px 15px;
  }

  .toast{
    right:12px;
    left:12px;
    bottom:76px;
    min-width:unset;
    max-width:none;
  }

  .footerInner{
    grid-template-columns:1fr;
  }

  .logoText{
    font-size:22px;
  }

  .mainNav{
    gap:10px 14px;
  }

  .mainNav a{
    font-size:13px;
  }
}

/* =========================================================
   SMALL FIXES
========================================================= */

hr{
  border:none;
  border-top:1px solid rgba(255,255,255,0.08);
}

.hidden{
  display:none !important;
}

.is-collapsed{
  display:none !important;
}

header,
.siteHeader,
.header,
.headerWrap,
.headerInner,
.topbar,
.navbar,
.mainHeader {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: auto !important;
}

body {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

html {
    scroll-padding-top: 0 !important;
}

.telegramFloatWrap{
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:9999;
}

.telegramFloatBtn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 18px;
    border-radius:999px;
    text-decoration:none;
    color:#fff;
    background:linear-gradient(135deg,#2aabee,#229ed9);
    box-shadow:0 10px 30px rgba(34,158,217,.35);
    font-weight:700;
    border:1px solid rgba(255,255,255,.18);
    transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.telegramFloatBtn:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 34px rgba(34,158,217,.42);
}

.telegramFloatIcon{
    width:20px;
    height:20px;
    flex:0 0 20px;
}

@media (max-width:768px){
    .telegramFloatWrap{
        right:14px;
        bottom:14px;
    }

    .telegramFloatBtn{
        padding:12px 16px;
        font-size:14px;
    }

    .telegramFloatIcon{
        width:18px;
        height:18px;
  
  .floating-social{
position:fixed;
bottom:25px;
right:25px;
display:flex;
flex-direction:column;
gap:12px;
z-index:9999;
}

.telegram-float,
.whatsapp-float{
display:flex;
align-items:center;
gap:8px;
padding:12px 16px;
border-radius:40px;
font-weight:600;
color:white;
text-decoration:none;
font-size:14px;
transition:0.3s;
animation:pulseGlow 2s infinite;
}

.telegram-float{
background:linear-gradient(135deg,#229ED9,#34B7F1);
box-shadow:0 0 18px rgba(34,158,217,0.7);
}

.whatsapp-float{
background:linear-gradient(135deg,#25D366,#1ebe5d);
box-shadow:0 0 18px rgba(37,211,102,0.7);
}

.telegram-float:hover,
.whatsapp-float:hover{
transform:scale(1.05);
}

.telegram-float i,
.whatsapp-float i{
font-size:18px;
}

@keyframes pulseGlow{
0%{
box-shadow:0 0 10px rgba(255,255,255,0.2);
}
50%{
box-shadow:0 0 25px rgba(255,255,255,0.6);
}
100%{
box-shadow:0 0 10px rgba(255,255,255,0.2);
}
}  }
}