/* URLETE.XYZ — unified visual system v3 */
:root{
  --u-bg:#08090b;
  --u-surface:#101216;
  --u-surface-2:#15181d;
  --u-surface-3:#1b1f25;
  --u-line:rgba(255,255,255,.085);
  --u-line-strong:rgba(255,255,255,.16);
  --u-text:#f5f6f7;
  --u-muted:#858b94;
  --u-orange:#ff5a1f;
  --u-orange-2:#ff8a3d;
  --u-green:#51dc8b;
  --u-red:#ff5b6e;
  --u-yellow:#f4c85c;
  --u-blue:#63a7ff;
  --u-shadow:0 24px 70px rgba(0,0,0,.42);
  --u-display:"Space Grotesk",Inter,system-ui,sans-serif;
}

body.page-home,
body.page-player,
body.page-admin,
body.page-login{
  color:var(--u-text);
  background:
    radial-gradient(circle at 86% -8%,rgba(255,90,31,.12),transparent 28%),
    radial-gradient(circle at 8% 20%,rgba(255,255,255,.04),transparent 25%),
    var(--u-bg);
}

body.page-home::before,
body.page-player::before,
body.page-admin::before,
body.page-login::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,#000,transparent 72%);
}

/* HOME */
.page-home .page{max-width:1580px;padding:0 28px 50px}
.page-home .topbar{
  min-height:76px!important;
  grid-template-columns:230px minmax(520px,1fr) 330px;
  gap:18px;
  margin:0 0 18px;
  padding:10px 14px!important;
  border:1px solid var(--u-line)!important;
  border-top:0!important;
  border-radius:0 0 13px 13px!important;
  background:linear-gradient(180deg,rgba(24,27,32,.98),rgba(12,14,17,.98))!important;
  box-shadow:0 16px 42px rgba(0,0,0,.34)!important;
  backdrop-filter:blur(18px);
}
.page-home .topbar::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,var(--u-orange),rgba(255,90,31,.12) 22%,transparent 65%);
  pointer-events:none;
}
.page-home .site-brand{
  min-width:0!important;
  display:flex;
  align-items:center;
  gap:11px;
  color:#fff;
  text-decoration:none;
}
.page-home .site-brand-mark{
  width:46px;
  height:46px;
  flex:0 0 46px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,90,31,.28);
  border-radius:10px;
  background:linear-gradient(145deg,rgba(255,90,31,.12),rgba(255,255,255,.025));
  box-shadow:inset 0 0 18px rgba(255,90,31,.06);
}
.page-home .site-brand-mark img{
  width:34px!important;
  height:34px!important;
  max-width:34px!important;
  max-height:34px!important;
  object-fit:contain!important;
  transform:none!important;
  filter:none!important;
}
.page-home .site-brand-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.page-home .site-brand-copy strong{
  color:#fff;
  font:900 21px/1 var(--u-display);
  letter-spacing:-.055em;
}
.page-home .site-brand-copy small{
  color:#777e88;
  font-size:8px;
  font-weight:900;
  letter-spacing:.18em;
}
.page-home .nav{
  gap:3px;
  padding:4px;
  border:1px solid var(--u-line);
  border-radius:10px;
  background:rgba(255,255,255,.025);
}
.page-home .nav button{
  min-height:38px;
  padding:0 14px;
  border-radius:7px;
  color:#8b919a;
  letter-spacing:.01em;
}
.page-home .nav button i{color:#69717c}
.page-home .nav button.active{
  color:#fff;
  border-color:rgba(255,90,31,.22);
  background:rgba(255,90,31,.10);
  box-shadow:inset 0 -2px 0 var(--u-orange);
}
.page-home .nav button.active i{color:var(--u-orange-2)}
.page-home .right{gap:8px;white-space:nowrap}
.page-home .live-count{
  height:36px;
  padding:0 11px;
  border:0;
  background:transparent;
  color:#9da4ad;
}
.page-home .live-count .dot{width:7px;height:7px;background:var(--u-green)}
.page-home .admin-pill,.page-home .refresh-pill{
  height:36px;
  border-radius:8px;
  border:1px solid var(--u-line);
  background:rgba(255,255,255,.035);
}
.page-home .refresh-pill{
  color:#0a0a0b!important;
  border-color:var(--u-orange)!important;
  background:var(--u-orange)!important;
}

.login-kicker{
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--u-orange-2);
  font-size:10px;
  font-weight:900;
  letter-spacing:.17em;
}
.page-home .statsbar{gap:1px;margin:0 0 18px;border:1px solid var(--u-line);border-radius:14px;overflow:hidden;background:var(--u-line)}
.page-home .stat{
  min-height:88px;
  padding:17px;
  border:0;
  border-radius:0;
  background:#111317;
  box-shadow:none;
}
.page-home .stat::after{display:none}
.page-home .stat:hover{transform:none;background:#16191e}
.page-home .stat small{margin-bottom:10px;color:#737a83;letter-spacing:.13em}
.page-home .stat b{font:800 26px/1 var(--u-display)}
.page-home .panel{
  margin-bottom:18px;
  border-color:var(--u-line);
  border-radius:14px;
  background:#101216;
  box-shadow:0 20px 50px rgba(0,0,0,.28);
}
.page-home .panel-head{
  min-height:64px;
  padding:15px 20px;
  background:#13161a;
  border-color:var(--u-line);
}
.page-home .panel-head h2{font:750 18px var(--u-display)}
.page-home .panel-body{padding:18px}
.page-home .search,.page-home select{
  border-radius:8px;
  border-color:var(--u-line);
  background:#0a0c0f;
}
.page-home .sorts button,.page-home .collapse-btn{
  border-radius:7px;
  border-color:var(--u-line);
  background:#191c21;
}
.page-home .player-card{
  border:1px solid var(--u-line);
  border-top:3px solid var(--u-orange);
  border-radius:12px;
  background:#14171b;
  box-shadow:0 16px 38px rgba(0,0,0,.26);
}
.page-home .player-card::before{opacity:.35}
.page-home .player-card:hover{border-color:rgba(255,90,31,.3);transform:translateY(-3px)}
.page-home .players{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.page-home .squad-card{
  --elo-color:var(--u-orange);
  --result-color:#66707d;
  min-height:0!important;
  display:grid!important;
  gap:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid var(--u-line)!important;
  border-top:0!important;
  border-left:0!important;
  border-radius:12px!important;
  background:#121419!important;
  box-shadow:0 16px 38px rgba(0,0,0,.24)!important;
}
.page-home .squad-card::before{
  content:""!important;
  position:absolute!important;
  inset:0 auto auto 0!important;
  width:100%!important;
  height:3px!important;
  transform:none!important;
  opacity:1!important;
  background:linear-gradient(90deg,var(--result-color),transparent 78%)!important;
}
.page-home .squad-card.win{--result-color:#32d583}
.page-home .squad-card.loss{--result-color:#ff4d61}
.page-home .squad-card:hover{transform:translateY(-3px)!important;border-color:rgba(255,255,255,.15)!important}
.squad-card-head{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 48px;
  align-items:center;
  gap:11px;
  padding:18px 18px 14px;
}
.squad-avatar{width:48px;height:48px;display:block}
.squad-avatar .avatar,.squad-avatar img{width:48px!important;height:48px!important;border-radius:9px!important;object-fit:cover}
.squad-identity{min-width:0}
.squad-name{display:flex;align-items:center;gap:7px;min-width:0}
.squad-name a{overflow:hidden;color:#fff;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;font:750 17px var(--u-display);letter-spacing:-.03em}
.squad-name a:hover{color:var(--u-orange-2)}
.squad-identity>span{display:block;margin-top:4px;color:#6e7580;font-size:9px;font-weight:900;letter-spacing:.11em}
.squad-identity>.squad-country{display:flex;align-items:center;gap:5px}
.squad-country .flag{width:16px;height:11px}
.squad-result{
  width:46px;height:30px;display:grid;place-items:center;border-radius:7px;
  font-size:9px;font-weight:950;letter-spacing:.04em;
}
.squad-result.win{color:#bdf7d3;border:1px solid rgba(81,220,139,.24);background:rgba(81,220,139,.09)}
.squad-result.loss{color:#ffb6bf;border:1px solid rgba(255,91,110,.24);background:rgba(255,91,110,.09)}
.squad-rank-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 118px;
  align-items:end;
  gap:14px;
  min-height:92px;
  padding:14px 18px 18px;
  border-top:1px solid rgba(255,255,255,.055);
}
.squad-elo small,.squad-last-match small,.squad-metrics small{display:block;color:#656d78;font-size:8px;font-weight:950;letter-spacing:.13em}
.squad-elo>div{display:flex;align-items:center;gap:10px;margin-top:8px}
.squad-elo strong{font:800 42px/.84 var(--u-display);letter-spacing:-.065em;text-shadow:none!important}
.squad-elo .elo-change{height:24px;min-width:38px;border-radius:6px}
.squad-last-match{padding-left:13px;border-left:1px solid var(--u-line)}
.squad-last-match b{display:block;margin-top:7px;color:#fff;font:700 13px var(--u-display)}
.squad-last-match>span{display:block;margin-top:4px;color:#808792;font-size:10px;font-weight:800}
.squad-last-match>.squad-score{display:flex;align-items:center;gap:5px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;font-weight:900}
.squad-score .score-value{color:#9aa9c1}
.squad-score .score-separator{color:#5278ad}
.squad-metrics{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin:0 12px;
  overflow:hidden;
  border:1px solid var(--u-line);
  border-radius:8px;
  background:#0d0f12;
}
.squad-metrics>div{min-height:61px;padding:11px 10px;border-right:1px solid var(--u-line)}
.squad-metrics>div:last-child{border-right:0}
.squad-metrics b{display:block;margin-top:7px;color:#fff;font:750 15px var(--u-display)}
.squad-card-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:58px;
  padding:12px 14px;
}
.squad-form{display:flex;align-items:center;gap:6px;min-width:0}
.squad-form .form-state{min-width:54px;height:24px;border-radius:6px;font-size:8px}
.squad-form .streak-text{display:none}
.squad-form .wl{gap:3px}
.squad-form .m{width:20px;height:21px;border-radius:5px;font-size:8px}
.squad-profile-link{display:flex;align-items:center;gap:7px;color:#7e858f;text-decoration:none;font-size:8px;font-weight:950;letter-spacing:.12em;white-space:nowrap}
.squad-profile-link:hover{color:var(--u-orange-2)}
.squad-card>.ban-box{margin:0 12px 12px;border-radius:8px}
.page-home .site-footer{
  border-top:1px solid var(--u-line);
  border-radius:0;
  background:transparent;
}

/* PLAYER */
.page-player .page-shell{width:min(100% - 44px,1500px);padding-top:0}
.page-player .topbar{
  margin:0 0 24px;
  padding:13px 2px;
  border:0;
  border-bottom:1px solid var(--u-line);
  border-radius:0;
  background:rgba(8,9,11,.86);
  box-shadow:none;
}
.page-player .brand-mark{
  width:42px;height:42px;border-radius:10px;
  color:#fff;background:var(--u-orange);
  box-shadow:none;
}
.page-player .brand-copy b{font-family:var(--u-display)}
.page-player .ghost-btn,.page-player .primary-btn{height:40px;border-radius:8px}
.page-player .primary-btn{background:var(--u-orange);border-color:var(--u-orange);box-shadow:none}
.page-player .hero-card{
  border-radius:18px;
  border-color:var(--u-line-strong);
  background:linear-gradient(135deg,#171a20,#0e1013 65%,#17100e);
}
.page-player .hero-card::before{border-radius:17px}
.page-player .avatar-ring{border-radius:18px;background:linear-gradient(135deg,var(--u-orange),#3e4249)}
.page-player .avatar-img,.page-player .avatar-fallback{border-radius:14px}
.page-player .level-dot{border-radius:10px}
.page-player .rank-panel,
.page-player .hero-stat,
.page-player .last-match,
.page-player .status-chip,
.page-player .streak-chip{border-radius:12px}
.page-player .profile-tabs{
  top:8px;
  border-radius:12px;
  background:rgba(10,11,13,.92);
}
.page-player .tab-btn,.page-player .rangebar{border-radius:8px}
.page-player .tab-btn.active{background:var(--u-orange);color:#fff;border-color:var(--u-orange)}
.page-player .panel,
.page-player .kpi,
.page-player .perf-card,
.page-player .compare-card,
.page-player .form-card,
.page-player .map-card,
.page-player .extra-card,
.page-player .match-card,
.page-player .chart,
.page-player .history-table-wrap{border-radius:14px}
.page-player .panel{background:#111317;border-color:var(--u-line)}
.page-player .perf-card::before{background:var(--u-orange)}
.page-player .trend-tab{border-radius:7px}
.page-player .trend-tab.active{background:var(--u-orange);border-color:var(--u-orange);color:#fff}

/* ADMIN */
body.page-admin{padding:0 28px 48px!important}
.page-admin .shell{max-width:1540px!important;gap:22px!important}
.page-admin .topbar{
  margin:0!important;
  min-height:78px!important;
  padding:12px 2px!important;
  border:0!important;
  border-bottom:1px solid var(--u-line)!important;
  border-radius:0!important;
  background:rgba(8,9,11,.88)!important;
  box-shadow:none!important;
}
.page-admin .brand-logo{
  width:44px!important;height:44px!important;border-radius:10px!important;
  overflow:hidden!important;border:1px solid rgba(255,90,31,.26)!important;
  background:#15171b!important;box-shadow:none!important;
}
.page-admin .brand-logo img{width:100%;height:100%;object-fit:cover}
.page-admin h1{font:800 23px/1 var(--u-display)!important;letter-spacing:-.04em!important}
.page-admin .brand span{color:#747b84!important;letter-spacing:.15em!important}
.page-admin .session-pill{
  height:36px!important;border-radius:8px!important;
  color:#b8efcd!important;background:rgba(81,220,139,.06)!important;
  border-color:rgba(81,220,139,.2)!important;
}
.page-admin .session-dot{background:var(--u-green)!important;box-shadow:0 0 14px rgba(81,220,139,.7)!important}
.page-admin .layout{grid-template-columns:230px minmax(0,1fr)!important;gap:22px!important}
.page-admin .sidebar{
  top:18px!important;
  padding:10px!important;
  border-radius:12px!important;
  border-color:var(--u-line)!important;
  background:#0e1013!important;
}
.page-admin .nav-btn{
  height:44px!important;border-radius:8px!important;color:#8b929c!important;
  text-transform:none!important;font-size:12px!important;letter-spacing:0!important;
}
.page-admin .nav-btn i{color:#666e78!important}
.page-admin .nav-btn:hover,.page-admin .nav-btn.active{
  color:#fff!important;
  background:rgba(255,90,31,.09)!important;
  border-color:rgba(255,90,31,.22)!important;
  box-shadow:inset 3px 0 0 var(--u-orange)!important;
}
.page-admin .nav-btn.active i{color:var(--u-orange-2)!important}
.page-admin .kpis{gap:1px!important;border:1px solid var(--u-line)!important;border-radius:12px!important;overflow:hidden;background:var(--u-line)!important}
.page-admin .kpi{
  min-height:90px!important;padding:15px 17px!important;border:0!important;border-radius:0!important;
  background:#111317!important;
}
.page-admin .kpi small{color:#737a83!important}
.page-admin .kpi b{font:800 24px var(--u-display)!important}
.page-admin .kpi span{margin-top:4px!important}
.page-admin .grid2{gap:14px!important}
.page-admin .card{
  padding:18px!important;border-radius:12px!important;
  border-color:var(--u-line)!important;background:#111317!important;
  box-shadow:0 18px 45px rgba(0,0,0,.26)!important;
}
.page-admin .card-head{padding-bottom:14px;border-bottom:1px solid var(--u-line)}
.page-admin .icon{
  width:38px!important;height:38px!important;border-radius:9px!important;
  color:var(--u-orange-2)!important;background:rgba(255,90,31,.08)!important;
  border-color:rgba(255,90,31,.2)!important;box-shadow:none!important;
}
.page-admin .icon.green{color:var(--u-green)!important;background:rgba(81,220,139,.07)!important;border-color:rgba(81,220,139,.18)!important}
.page-admin .icon.red{color:var(--u-red)!important;background:rgba(255,91,110,.07)!important;border-color:rgba(255,91,110,.18)!important}
.page-admin .tag{border-radius:6px!important;color:#a7adb5!important;background:#181b20!important}
.page-admin input,.page-admin select,.page-admin textarea{
  border-radius:8px!important;border-color:var(--u-line)!important;background:#0a0c0f!important;
}
.page-admin input:focus,.page-admin select:focus,.page-admin textarea:focus{
  border-color:rgba(255,90,31,.55)!important;box-shadow:0 0 0 3px rgba(255,90,31,.08)!important;
}
.page-admin button,.page-admin a.btn{border-radius:8px!important;box-shadow:none!important}
.page-admin button.primary{
  color:#fff!important;background:var(--u-orange)!important;border-color:var(--u-orange)!important;
}
.page-admin button.green{background:var(--u-green)!important}
.page-admin .console{border-radius:8px!important;background:#090b0e!important;border-color:var(--u-line)!important}
.page-admin .player{border-radius:9px!important;background:#15181d!important}
.page-admin .player img{border-radius:7px!important}
.page-admin #adminLogs{gap:7px!important}
.page-admin #adminLogs .log-row{
  min-height:54px!important;padding:10px 13px!important;border-radius:8px!important;
  background:#0d0f12!important;border-color:var(--u-line)!important;
}
.page-admin #adminLogs .log-type{color:var(--u-orange-2)!important;font-size:9px!important;letter-spacing:.08em}
.page-admin #adminLogs .log-message{font-size:12px!important;font-weight:700!important}
.page-admin #adminLogs .log-time{font-size:10px!important}

/* LOGIN */
body.page-login{display:grid!important;place-items:center!important;padding:28px!important}
.login-shell{
  width:min(1040px,100%);
  min-height:620px;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  overflow:hidden;
  border:1px solid var(--u-line-strong);
  border-radius:18px;
  background:#0f1114;
  box-shadow:0 40px 120px rgba(0,0,0,.58);
}
.login-story{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:38px 42px;
  overflow:hidden;
  background:
    linear-gradient(145deg,rgba(255,255,255,.055),transparent 50%),
    linear-gradient(145deg,#171a1f,#0d0f12 68%,#25140e);
}
.login-story::after{
  content:"UX";
  position:absolute;
  right:-34px;
  bottom:-50px;
  color:rgba(255,90,31,.07);
  font:900 260px/.8 var(--u-display);
  letter-spacing:-.1em;
}
.login-brand{position:relative;z-index:1;display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none;font:800 13px var(--u-display);letter-spacing:.14em}
.login-brand img{width:38px;height:38px;border-radius:9px;object-fit:cover}
.login-story>div{position:relative;z-index:1}
.login-story h1{
  margin:16px 0 18px!important;
  color:#fff;
  font:900 clamp(48px,6vw,78px)/.86 var(--u-display)!important;
  letter-spacing:-.07em!important;
}
.login-story h1 em{color:var(--u-orange);font-style:normal}
.login-story p{max-width:440px;color:#8a919b;font-size:14px;line-height:1.7;font-weight:650}
.login-story>small{position:relative;z-index:1;color:#606771;font-size:9px;font-weight:900;letter-spacing:.18em}
.page-login .box{
  width:auto!important;
  padding:48px 42px!important;
  border:0!important;
  border-left:1px solid var(--u-line)!important;
  border-radius:0!important;
  background:#101216!important;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.login-form-head{margin-bottom:24px}
.login-form-head>span{color:var(--u-orange-2);font-size:9px;font-weight:900;letter-spacing:.17em}
.login-form-head h2{margin:8px 0 6px;font:800 30px var(--u-display);letter-spacing:-.04em}
.login-form-head p{color:#747b85;font-size:12px;font-weight:650}
.page-login .box label{margin:14px 0 7px;color:#757c86;font-size:9px;font-weight:900;letter-spacing:.14em}
.page-login .box input{
  height:48px!important;margin:0!important;padding:0 14px!important;
  border-radius:8px!important;border-color:var(--u-line)!important;background:#090b0e!important;
  font-weight:700!important;
}
.page-login .box input:focus{outline:0;border-color:rgba(255,90,31,.6)!important;box-shadow:0 0 0 3px rgba(255,90,31,.08)}
.page-login .box button{
  height:50px!important;margin-top:20px!important;border-radius:8px!important;
  display:flex;align-items:center;justify-content:space-between;
  color:#fff!important;background:var(--u-orange)!important;border-color:var(--u-orange)!important;
  text-transform:uppercase;letter-spacing:.08em;
}
.page-login .box button span{font-size:20px}
.page-login .err{margin-top:12px!important;color:var(--u-red)!important}

@media(max-width:1180px){
  .page-home .topbar{grid-template-columns:210px 1fr}.page-home .right{grid-column:1/-1;justify-self:stretch;justify-content:flex-end}
  .page-home .statsbar{grid-template-columns:repeat(4,1fr)}
  .page-home .players{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-admin .layout{grid-template-columns:1fr!important}
  .page-admin .sidebar{position:relative!important;top:0!important;grid-template-columns:repeat(6,1fr)!important}
}
@media(max-width:760px){
  .page-home .page{padding:0 10px 30px}
  .page-home .topbar{display:flex;flex-wrap:wrap;padding:10px!important}.page-home .site-brand{flex:1}.page-home .nav{order:3;width:100%;overflow-x:auto;justify-content:flex-start}.page-home .nav button{flex:0 0 auto}.page-home .right{display:none}
  .page-home .statsbar{grid-template-columns:repeat(2,1fr)}
  .page-home .players{grid-template-columns:1fr}.page-home .player-card{min-height:auto}
  .page-player .page-shell{width:min(100% - 18px,1500px)}
  body.page-admin{padding:0 10px 30px!important}.page-admin .sidebar{display:flex!important;overflow-x:auto!important}.page-admin .nav-btn{flex:0 0 140px!important}.page-admin .kpis{grid-template-columns:repeat(2,1fr)!important}.page-admin .kpi{min-height:86px!important}
  body.page-login{padding:10px!important}.login-shell{grid-template-columns:1fr;min-height:auto}.login-story{min-height:330px;padding:26px}.login-story h1{font-size:52px!important}.page-login .box{padding:34px 26px!important;border-left:0!important;border-top:1px solid var(--u-line)!important}
}
