/* RefGame Premium UI v4 — official tournament operations
   RefGo-inspired split-login rhythm, with a distinct RefGame visual language. */
:root{
  --rg4-navy:#07182b;
  --rg4-navy-2:#0d2b4a;
  --rg4-navy-3:#153f6b;
  --rg4-red:#e31c2d;
  --rg4-red-dark:#c91525;
  --rg4-ink:#152231;
  --rg4-text:#344253;
  --rg4-muted:#7d8996;
  --rg4-line:#e5eaf0;
  --rg4-bg:#f3f6f8;
  --rg4-card:#fff;
  --rg4-shadow:0 12px 32px rgba(9,28,49,.055);
}
html,body{background:var(--rg4-bg)!important}
body{letter-spacing:0}

/* ---------- LOGIN: RefGo-inspired structure, distinct RefGame styling ---------- */
.login{
  grid-template-columns:minmax(500px,1.05fr) minmax(430px,.95fr)!important;
  background:#0a1522!important;
}
.splash{
  padding:52px clamp(46px,6vw,94px)!important;
  background:
    linear-gradient(110deg,rgba(255,255,255,.026) 1px,transparent 1px) 0 0/86px 100%,
    radial-gradient(circle at 12% 12%,rgba(227,28,45,.18),transparent 30%),
    radial-gradient(circle at 89% 83%,rgba(46,99,151,.15),transparent 29%),
    linear-gradient(145deg,#07131f 0%,#0a2036 58%,#071827 100%)!important;
  border-right:1px solid rgba(255,255,255,.07)!important;
}
.splash:before{
  background:
    linear-gradient(90deg,transparent 0 49.8%,rgba(255,255,255,.025) 50%,transparent 50.2%),
    linear-gradient(0deg,transparent 0 49.8%,rgba(255,255,255,.02) 50%,transparent 50.2%)!important;
  background-size:170px 170px!important;
  opacity:.65!important;
}
.splash:after{
  right:-180px!important;bottom:-220px!important;width:600px!important;height:600px!important;
  border:1px solid rgba(255,255,255,.07)!important;
  box-shadow:0 0 0 74px rgba(255,255,255,.015),0 0 0 148px rgba(255,255,255,.009)!important;
}
.splash-badge{
  border:0!important;
  border-left:3px solid var(--rg4-red)!important;
  border-radius:0!important;
  background:transparent!important;
  padding:5px 0 5px 12px!important;
  color:#95a7b9!important;
  font-size:9px!important;
  letter-spacing:.18em!important;
  backdrop-filter:none!important;
}
.splash-badge:before{display:none!important}
.splash-copy{max-width:680px!important}
.splash .eyebrow{color:#ff7180!important;font-size:9px!important;letter-spacing:.19em!important}
.splash h1{
  max-width:700px!important;
  font-size:clamp(46px,5vw,70px)!important;
  font-weight:860!important;
  letter-spacing:-.055em!important;
  line-height:1.04!important;
  margin:13px 0 18px!important;
}
.splash p{max-width:590px!important;font-size:13px!important;line-height:1.95!important;color:#a7b7c7!important}
.login-points{gap:9px!important;margin-top:30px!important}
.login-point{
  position:relative!important;
  padding:14px 14px 14px 16px!important;
  border:1px solid rgba(255,255,255,.075)!important;
  border-radius:9px!important;
  background:rgba(255,255,255,.025)!important;
}
.login-point:before{content:"";position:absolute;left:0;top:13px;bottom:13px;width:2px;background:rgba(227,28,45,.75)}
.login-point b{font-size:10px!important;letter-spacing:.02em!important}.login-point span{font-size:8px!important;color:#8195a8!important}
.splash small{color:#61778d!important;font-size:8px!important}

.login-main{
  position:relative!important;
  padding:50px clamp(40px,5vw,80px)!important;
  background:
    radial-gradient(circle at 100% 0%,rgba(227,28,45,.04),transparent 28%),
    linear-gradient(180deg,#f9fafb 0%,#f3f5f7 100%)!important;
}
.login-main:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,var(--rg4-red),#b71220);
}
.auth{width:min(455px,100%)!important}
.auth-brand{
  margin:0 0 28px!important;
  padding:0 0 22px!important;
  border-bottom:1px solid #e2e7ec!important;
}
.auth-brand img{width:min(365px,92%)!important;max-height:92px!important;object-fit:contain!important;object-position:left center!important}
.login-mark{margin-bottom:11px!important;color:#a22b36!important;font-size:8px!important}
.login-mark:before{width:20px!important;background:var(--rg4-red)!important}
.auth>h2{font-size:30px!important;font-weight:830!important;color:#152231!important;letter-spacing:-.04em!important}
.auth>p{margin:7px 0 22px!important;color:#788592!important;font-size:11px!important}
.auth-card{
  padding:25px!important;
  border:1px solid #dfe5eb!important;
  border-radius:13px!important;
  box-shadow:0 18px 48px rgba(14,31,49,.06)!important;
  background:#fff!important;
}
.auth-card .field{margin-bottom:15px!important}
.auth-card .field label{font-size:10px!important;color:#566372!important;margin-bottom:6px!important}
.auth-card .field input{
  min-height:48px!important;
  border-radius:8px!important;
  background:#fbfcfd!important;
  border-color:#dce2e7!important;
  font-size:13px!important;
}
.auth-card .field input:focus{border-color:#7d93a8!important;box-shadow:0 0 0 4px rgba(13,43,74,.06)!important}
.auth-card .btn{
  min-height:48px!important;
  margin-top:4px!important;
  border-radius:8px!important;
  background:linear-gradient(135deg,#07182b,#0e3154)!important;
  box-shadow:0 9px 20px rgba(7,24,43,.14)!important;
  font-size:12px!important;
}
.auth-card .btn:hover{background:linear-gradient(135deg,#05111f,#092742)!important}
.auth-footnote{
  margin-top:15px!important;
  padding-left:10px!important;
  border-left:2px solid #dfe4e9!important;
  color:#929ca6!important;
  font-size:9px!important;
}

/* ---------- APP CHROME ---------- */
.shell{grid-template-columns:254px minmax(0,1fr)!important}
aside.side{
  width:auto!important;
  padding:21px 13px 17px!important;
  background:#f9fafb!important;
  border-right:1px solid #dfe5eb!important;
  box-shadow:4px 0 18px rgba(12,29,47,.025)!important;
}
.side .brand{
  width:100%!important;
  margin:0 0 18px!important;
  padding:3px 9px 18px!important;
  border-bottom:1px solid #e6ebef!important;
}
.side .brand img{
  width:100%!important;
  max-width:214px!important;
  max-height:70px!important;
  object-fit:contain!important;
  object-position:left center!important;
  margin:0!important;
}
.side .label{
  margin:17px 12px 6px!important;
  color:#a4adb7!important;
  font-size:8px!important;
  font-weight:900!important;
  letter-spacing:.17em!important;
}
.side nav a{
  min-height:40px!important;
  gap:9px!important;
  margin:2px 0!important;
  padding:9px 11px!important;
  border-radius:8px!important;
  color:#556473!important;
  font-size:11px!important;
  font-weight:680!important;
}
.side nav a:hover:not(.active){background:#eef2f5!important;color:#1d2d3e!important}
.side nav a.active{
  background:#0b2947!important;
  color:#fff!important;
  box-shadow:0 6px 16px rgba(7,32,55,.12)!important;
}
.side nav a.active:before{top:8px!important;bottom:8px!important;width:3px!important;background:var(--rg4-red)!important}
.nav-icon{
  width:7px!important;height:7px!important;min-width:7px!important;
  padding:0!important;border-radius:50%!important;
  background:#c7d0d8!important;color:transparent!important;
  font-size:0!important;
}
.side nav a.active .nav-icon{background:#ff5262!important;box-shadow:0 0 0 4px rgba(255,82,98,.11)!important}
.side .foot{
  padding:17px 10px 2px!important;
  border-top:1px solid #e5eaee!important;
  color:#9aa5af!important;
  font-size:8px!important;
}
.content{background:var(--rg4-bg)!important}
.top{
  min-height:64px!important;
  padding:12px clamp(20px,3vw,40px)!important;
  background:rgba(255,255,255,.96)!important;
  border-bottom:1px solid #e2e7ec!important;
  box-shadow:0 4px 18px rgba(12,29,47,.024)!important;
}
.top small{font-size:8px!important;color:#9ba5af!important;letter-spacing:.07em!important;text-transform:uppercase!important}
.top strong{font-size:11px!important;color:#273646!important}
.top .btn.alt{min-height:34px!important;padding:6px 10px!important;border-radius:7px!important;font-size:9px!important}
.main{max-width:1500px!important;padding:27px clamp(20px,3vw,42px) 80px!important}
.header{margin-bottom:20px!important}
.header h1{font-size:28px!important;font-weight:830!important;color:#162434!important}
.header p{font-size:10px!important;color:#7c8894!important}
.header .eyebrow{color:#9d2c38!important;font-size:8px!important}

/* ---------- CARDS & DATA DENSITY ---------- */
.panel{
  border-radius:11px!important;
  border-color:#e2e7ec!important;
  box-shadow:0 7px 22px rgba(11,30,49,.035)!important;
}
.panel-head{padding:15px 18px!important}
.panel-head h2{font-size:13px!important}.panel-head small{font-size:8px!important}
.panel-body{padding:18px!important}
.dashboard-kpis{gap:10px!important}
.kpi{
  padding:16px!important;
  border-radius:10px!important;
  box-shadow:none!important;
}
.kpi:after{width:72px!important;height:72px!important;right:-26px!important;top:-26px!important;background:#f6f8fa!important}
.kpi .kpi-label{font-size:8px!important}.kpi strong{font-size:23px!important}.kpi small{font-size:8px!important}
.module-grid{gap:11px!important}
.module-card{
  min-height:142px!important;
  padding:16px!important;
  border-radius:11px!important;
  box-shadow:none!important;
}
.module-card:hover{box-shadow:0 10px 28px rgba(13,34,55,.055)!important;transform:translateY(-1px)!important}
.module-card .icon{width:34px!important;height:34px!important;border-radius:9px!important}
.module-card h3{font-size:12px!important}.module-card p{font-size:9px!important}.module-card .go{font-size:9px!important}
.btn{
  min-height:38px!important;
  border-radius:7px!important;
  padding:7px 13px!important;
  background:#0b2947!important;
  font-size:10px!important;
}
.btn:hover{background:#071c31!important}
.btn.alt{background:#fff!important;color:#425160!important;border-color:#d8e0e6!important}
table{min-width:720px!important}
th{font-size:8px!important;background:#f7f9fb!important;color:#7c8996!important}
th,td{padding:11px 14px!important}
td{font-size:10px!important;color:#465464!important}
.field label{font-size:9px!important}
.field input,.field select,.field textarea{border-radius:7px!important;font-size:11px!important}
.status,.review-chip{font-size:8px!important}
.warning,.hint,.flash{font-size:10px!important}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1050px){
  .login{grid-template-columns:1fr!important}
  .splash{min-height:340px!important;padding:34px 30px!important}
  .splash h1{font-size:40px!important}
  .login-main{min-height:auto!important;padding:42px 24px 58px!important}
}
@media(max-width:760px){
  .splash{min-height:300px!important;padding:25px 20px!important}
  .splash h1{font-size:32px!important}.splash p{font-size:11px!important}
  .login-points{grid-template-columns:1fr!important;margin-top:17px!important}
  .login-main{padding:30px 15px 48px!important}
  .auth-brand img{width:min(320px,92%)!important}
  aside.side{padding:10px 11px!important;background:#fff!important}
  .side .brand{max-width:205px!important;margin-bottom:8px!important;padding-bottom:10px!important}
  .side nav{gap:5px!important}.side nav a{min-height:36px!important;padding:7px 9px!important;font-size:9px!important}
  .nav-icon{width:6px!important;height:6px!important;min-width:6px!important}
  .main{padding:18px 12px 58px!important}.top{padding:11px 12px!important}.header h1{font-size:24px!important}
}