* {
  box-sizing: border-box;
}

:root {
  --navy: #071c3c;
  --navy-2: #0b2c5d;
  --blue: #1264e5;
  --blue-light: #eaf3ff;
  --bg: #f3f6fa;
  --white: #ffffff;
  --text: #14233b;
  --muted: #738096;
  --line: #e5eaf1;
  --green: #16a36a;
  --danger: #d84242;
  --shadow:
    0 8px 28px rgba(15, 35, 70, .08);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

a {
  color: inherit;
}

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


/* ============================
   TOP BAR
============================ */

.topbar {
  background: var(--navy);
  color: white;
  min-height: 72px;
  box-shadow:
    0 4px 20px rgba(3, 18, 44, .22);
}

.nav-wrap {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  text-decoration: none;
  font-weight: 900;
  white-space: nowrap;
}

.logo-ball {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: white;
  font-size: 21px;
}

.topnav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  overflow-x: auto;
}

.topnav a {
  text-decoration: none;
  color: #b9c7da;
  padding: 26px 12px 23px;
  border-bottom: 3px solid transparent;
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
}

.topnav a:hover,
.topnav a.active {
  color: white;
  border-bottom-color: #4ea2ff;
}

.nav-user {
  display: flex;
  gap: 14px;
  align-items: center;
  white-space: nowrap;
}

.user-info {
  display: flex;
  flex-direction: column;
  text-align: right;
  line-height: 1.2;
}

.user-info small {
  color: #9fb0c9;
  margin-top: 3px;
}

.btn-logout {
  cursor: pointer;
  color: white;
  border: 1px solid #446087;
  background: #102d58;
  border-radius: 9px;
  padding: 9px 14px;
}


/* ============================
   DASHBOARD
============================ */

.main-content {
  padding-top: 32px;
  padding-bottom: 50px;
}

.welcome-card {
  min-height: 205px;
  padding: 38px 42px;
  border-radius: 22px;
  background:
    linear-gradient(
      125deg,
      #092859,
      #0e5cc9
    );
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.welcome-card h1 {
  margin: 7px 0 10px;
  font-size: clamp(
    28px,
    4vw,
    43px
  );
}

.welcome-card p {
  margin: 0;
  max-width: 670px;
  color: #d9e8fb;
  font-size: 17px;
}

.eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  color: #5687ca;
}

.welcome-card .eyebrow {
  color: #78b9ff;
}

.hero-ball {
  font-size: 100px;
  opacity: .9;
  transform: rotate(-10deg);
}

.stats-grid {
  display: grid;
  grid-template-columns:
    repeat(4, 1fr);
  gap: 18px;
  margin: 22px 0;
}

.stat-card {
  min-height: 135px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: var(--shadow);
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--blue-light);
  font-size: 23px;
}

.stat-card span,
.stat-card small {
  display: block;
  color: var(--muted);
}

.stat-card strong {
  display: block;
  font-size: 30px;
  line-height: 1.05;
  margin: 5px 0;
}

.dashboard-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 2fr)
    minmax(280px, .8fr);
  gap: 22px;
}

.panel {
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 25px;
  box-shadow: var(--shadow);
}

.panel-header {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.panel h2 {
  margin:
    4px 0
    0;
  font-size: 20px;
}

.btn-primary {
  appearance: none;
  cursor: pointer;
  border: 0;
  border-radius: 9px;
  color: white;
  background: var(--blue);
  padding: 11px 17px;
  font-weight: 750;
}

.empty-state {
  min-height: 210px;
  border: 1px dashed #d7dee9;
  background: #fafcff;
  border-radius: 14px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  padding: 30px;
}

.empty-icon {
  font-size: 36px;
}

.empty-state h3 {
  margin: 10px 0 4px;
}

.empty-state p {
  margin: 0;
  color: var(--muted);
}

.quick-links {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.quick-links a {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 15px;
  background: #f6f9fd;
  border: 1px solid #e7edf5;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 650;
}

.quick-links a:hover {
  border-color: #b8d2f5;
  background: #edf5ff;
}

.table-wrap {
  overflow: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 14px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}

.badge {
  display: inline-block;
  border-radius: 99px;
  padding: 5px 9px;
  background: #e8edf3;
  color: #637186;
  font-size: 12px;
  font-weight: 800;
}

.badge-success {
  background: #e5f8ef;
  color: var(--green);
}


/* ============================
   LOGIN
============================ */

.login-body {
  min-height: 100vh;
  background: white;
}

.login-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns:
    1.15fr
    .85fr;
}

.login-brand {
  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(47, 134, 255, .35),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #061936,
      #0b428d
    );
  color: white;
  padding: clamp(
    45px,
    8vw,
    110px
  );
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.brand-badge {
  width: 64px;
  height: 64px;
  background: white;
  color: var(--navy);
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 34px;
}

.login-brand h1 {
  font-size: clamp(
    40px,
    5vw,
    70px
  );
  margin: 25px 0 10px;
}

.login-brand > p {
  max-width: 570px;
  color: #cadcf5;
  font-size: 19px;
  line-height: 1.6;
}

.login-features {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  max-width: 600px;
  margin-top: 25px;
}

.login-features span {
  padding: 9px 12px;
  border-radius: 99px;
  border: 1px solid #416da6;
  background: rgba(255,255,255,.06);
}

.login-card {
  display: grid;
  place-items: center;
  padding: 40px;
}

.login-card-inner {
  width: min(
    100%,
    420px
  );
}

.login-card h2 {
  font-size: 35px;
  margin: 0;
}

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

.mobile-logo {
  display: none;
}

label {
  display: block;
  font-weight: 700;
  margin:
    20px 0
    7px;
}

input {
  width: 100%;
  height: 48px;
  border: 1px solid #d6deea;
  border-radius: 9px;
  background: white;
  padding: 0 14px;
  outline: 0;
  font: inherit;
}

input:focus {
  border-color: #4f94ed;
  box-shadow:
    0 0 0 3px
    rgba(18,100,229,.10);
}

.btn-full {
  width: 100%;
  margin-top: 24px;
  height: 50px;
  font-size: 15px;
}

.alert {
  padding: 12px 14px;
  margin-top: 18px;
  border-radius: 9px;
}

.alert-danger {
  background: #fff0f0;
  border: 1px solid #ffd1d1;
  color: var(--danger);
}

.login-footer {
  text-align: center;
  font-size: 12px;
  color: #9aa5b5;
  margin-top: 25px;
}


/* ============================
   RESPONSIVO
============================ */

@media (
  max-width: 1150px
) {

  .nav-user .user-info {
    display: none;
  }

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

}


@media (
  max-width: 850px
) {

  .container {
    width:
      min(
        100% - 26px,
        1440px
      );
  }

  .nav-wrap {
    flex-wrap: wrap;
    padding: 12px 0;
    gap: 8px;
  }

  .topnav {
    order: 3;
    flex-basis: 100%;
  }

  .topnav a {
    padding:
      11px 10px
      12px;
  }

  .nav-user {
    margin-left: auto;
  }

  .hero-ball {
    display: none;
  }

  .welcome-card {
    padding: 28px;
  }

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

  .login-layout {
    display: block;
  }

  .login-brand {
    display: none;
  }

  .login-card {
    min-height: 100vh;
    padding: 28px;
  }

  .mobile-logo {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    background: var(--navy);
    border-radius: 16px;
    font-size: 30px;
    margin-bottom: 24px;
  }

}


@media (
  max-width: 580px
) {

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

  .panel-header {
    align-items: flex-start;
    flex-direction: column;
  }

}


/* ==========================================================
   LOGIN FUTSAL - BACKGROUND
   Mantém a estrutura original do login
========================================================== */

.login-body {
  min-height: 100vh;

  background:
    linear-gradient(
      90deg,
      rgba(3, 17, 40, .86) 0%,
      rgba(5, 29, 64, .72) 48%,
      rgba(3, 15, 35, .68) 100%
    ),
    url('/img/login-futsal.png')
    center center / cover
    no-repeat fixed;
}


/* Painel institucional da esquerda */
.login-brand {
  background:
    linear-gradient(
      135deg,
      rgba(4, 22, 51, .78),
      rgba(7, 55, 116, .48)
    );

  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);

  border-right:
    1px solid rgba(255,255,255,.12);
}


/* Área onde fica o formulário */
.login-card {
  background:
    linear-gradient(
      135deg,
      rgba(3, 18, 43, .22),
      rgba(3, 18, 43, .52)
    );
}


/* Card do formulário */
.login-card-inner {
  padding: 38px;

  border-radius: 22px;

  background:
    rgba(255, 255, 255, .94);

  border:
    1px solid rgba(255,255,255,.60);

  box-shadow:
    0 25px 70px
    rgba(0, 10, 30, .35);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}


/* Campos */
.login-card input {
  background:
    rgba(255,255,255,.92);
}


/* Botão com mais destaque */
.login-card .btn-primary {
  box-shadow:
    0 8px 24px
    rgba(18, 100, 229, .28);

  transition:
    transform .15s ease,
    box-shadow .15s ease;
}

.login-card .btn-primary:hover {
  transform:
    translateY(-1px);

  box-shadow:
    0 11px 28px
    rgba(18, 100, 229, .38);
}


/* Marca da esquerda */
.login-brand h1 {
  text-shadow:
    0 3px 20px
    rgba(0,0,0,.35);
}

.login-brand > p {
  text-shadow:
    0 2px 10px
    rgba(0,0,0,.30);
}


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

@media (max-width: 850px) {

  .login-body {
    background:
      linear-gradient(
        rgba(3, 18, 43, .72),
        rgba(3, 18, 43, .78)
      ),
      url('/img/login-futsal.png')
      center center / cover
      no-repeat;
  }

  .login-card {
    background:
      transparent;
  }

  .login-card-inner {
    padding: 30px 25px;

    background:
      rgba(255,255,255,.95);
  }

}


/* ==========================================================
   LOGO FUTSAL ESCOLAR
========================================================== */

.login-brand-logo {
  width: min(580px, 90%);
  margin-bottom: 24px;
}

.login-brand-logo img {
  display: block;
  width: 100%;
  height: auto;

  object-fit: contain;

  filter:
    drop-shadow(
      0 15px 30px
      rgba(0,0,0,.35)
    );
}


.mobile-brand-logo {
  display: none;
}

.mobile-brand-logo img {
  width: 100%;
  max-width: 290px;
  height: auto;
}


/* ==========================================================
   SPLASH SCREEN
========================================================== */

.splash-screen {
  position: fixed;

  inset: 0;

  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background:
    radial-gradient(
      circle at center,
      #0d4d9d 0%,
      #071f45 36%,
      #030c1c 100%
    );

  opacity: 1;

  visibility: visible;

  transition:
    opacity .65s ease,
    visibility .65s ease;
}


.splash-screen::before {
  content: "";

  position: absolute;

  inset: -30%;

  background:
    conic-gradient(
      from 0deg,
      transparent,
      rgba(0,132,255,.12),
      transparent,
      rgba(0,199,255,.10),
      transparent
    );

  animation:
    splashRotate 7s
    linear infinite;
}


.splash-glow {
  position: absolute;

  width: 500px;
  height: 500px;

  border-radius: 50%;

  background:
    rgba(0,127,255,.20);

  filter:
    blur(100px);

  animation:
    splashGlow 2s
    ease-in-out infinite alternate;
}


.splash-content {
  position: relative;

  z-index: 2;

  display: flex;
  flex-direction: column;

  align-items: center;

  text-align: center;

  width:
    min(
      90vw,
      720px
    );

  animation:
    splashEntrance
    .85s
    cubic-bezier(
      .19,
      1,
      .22,
      1
    )
    both;
}


.splash-logo {
  width:
    min(
      620px,
      90vw
    );

  height: auto;

  object-fit: contain;

  filter:
    drop-shadow(
      0 20px 45px
      rgba(0,0,0,.5)
    );

  animation:
    logoFloat
    2s
    ease-in-out
    infinite alternate;
}


.splash-content p {
  margin-top: 8px;

  color:
    rgba(
      255,
      255,
      255,
      .65
    );

  font-size: 13px;

  text-transform: uppercase;

  letter-spacing: .24em;
}


.splash-loading {
  display: flex;

  gap: 7px;

  margin-top: 18px;
}


.splash-loading span {
  display: block;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #2b9cff;

  box-shadow:
    0 0 12px
    rgba(43,156,255,.8);

  animation:
    splashDot
    1s
    infinite ease-in-out;
}


.splash-loading span:nth-child(2) {
  animation-delay: .15s;
}


.splash-loading span:nth-child(3) {
  animation-delay: .30s;
}


.splash-hide {
  opacity: 0;

  visibility: hidden;

  pointer-events: none;
}


@keyframes splashEntrance {

  from {
    opacity: 0;

    transform:
      translateY(25px)
      scale(.92);

    filter:
      blur(8px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);

    filter:
      blur(0);
  }

}


@keyframes logoFloat {

  from {
    transform:
      translateY(0)
      scale(1);
  }

  to {
    transform:
      translateY(-6px)
      scale(1.015);
  }

}


@keyframes splashGlow {

  from {
    transform:
      scale(.85);

    opacity: .45;
  }

  to {
    transform:
      scale(1.18);

    opacity: .85;
  }

}


@keyframes splashRotate {

  from {
    transform:
      rotate(0deg);
  }

  to {
    transform:
      rotate(360deg);
  }

}


@keyframes splashDot {

  0%,
  80%,
  100% {

    transform:
      scale(.65);

    opacity:
      .35;
  }

  40% {

    transform:
      scale(1.25);

    opacity:
      1;
  }

}


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

@media (max-width: 850px) {

  .mobile-brand-logo {
    display: block;

    margin-bottom: 25px;

    text-align: center;
  }


  .mobile-brand-logo img {
    max-width: 270px;
  }


  .splash-logo {
    width:
      min(
        92vw,
        500px
      );
  }


  .splash-content p {
    font-size: 10px;

    letter-spacing: .16em;
  }

}

/* ========= LOGO ========= */

.login-brand-logo{
 width:min(580px,90%);
 margin-bottom:24px;
}

.login-brand-logo img{
 width:100%;
 filter:drop-shadow(0 15px 30px rgba(0,0,0,.35));
}

.mobile-brand-logo{
 display:none;
 text-align:center;
 margin-bottom:24px;
}

.mobile-brand-logo img{
 width:100%;
 max-width:280px;
}

/* ========= SPLASH ========= */

.splash-screen{
 position:fixed;
 inset:0;
 z-index:99999;
 display:flex;
 justify-content:center;
 align-items:center;
 background:radial-gradient(circle,#0d4d9d,#030c1c);
 transition:.7s;
}

.splash-hide{
 opacity:0;
 visibility:hidden;
}

.splash-content{
 text-align:center;
 animation:splashIn .8s ease;
}

.splash-logo{
 width:min(620px,90vw);
 filter:drop-shadow(0 20px 40px rgba(0,0,0,.45));
 animation:float 2s ease-in-out infinite alternate;
}

.splash-loading{
 display:flex;
 justify-content:center;
 gap:8px;
 margin-top:20px;
}

.splash-loading span{
 width:8px;
 height:8px;
 border-radius:50%;
 background:#2b9cff;
 animation:dot 1s infinite;
}

.splash-loading span:nth-child(2){animation-delay:.15s;}
.splash-loading span:nth-child(3){animation-delay:.3s;}

@keyframes splashIn{
 from{opacity:0;transform:translateY(25px) scale(.9);}
 to{opacity:1;transform:none;}
}

@keyframes float{
 from{transform:translateY(0);}
 to{transform:translateY(-6px);}
}

@keyframes dot{
 0%,80%,100%{transform:scale(.6);opacity:.4;}
 40%{transform:scale(1.2);opacity:1;}
}

@media(max-width:850px){
 .mobile-brand-logo{display:block;}
 .login-brand-logo{display:none;}
}

/* ==========================================================
   FUTSAL ESCOLAR - LOGIN PREMIUM GLASS
   Sem cores sólidas
========================================================== */

.login-body {
  min-height: 100vh;

  background:
    linear-gradient(
      110deg,
      rgba(2, 10, 27, .88) 0%,
      rgba(5, 26, 59, .62) 45%,
      rgba(2, 15, 37, .72) 100%
    ),
    url('/img/login-futsal.png')
    center center / cover
    no-repeat fixed;
}


/* ==========================================================
   PAINEL ESQUERDO
========================================================== */

.login-brand {
  position: relative;

  background:
    linear-gradient(
      135deg,
      rgba(3, 18, 43, .50),
      rgba(4, 54, 110, .20)
    );

  border-right:
    1px solid rgba(255,255,255,.12);

  box-shadow:
    inset -1px 0
    rgba(255,255,255,.05);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);
}


/* efeito de luz */
.login-brand::after {
  content: "";

  position: absolute;

  width: 420px;
  height: 420px;

  left: -140px;
  bottom: -160px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(33, 150, 243, .20),
      rgba(33, 150, 243, 0) 70%
    );

  pointer-events: none;
}


/* ==========================================================
   LOGO
========================================================== */

.login-brand-logo {
  width: min(560px, 92%);

  margin-bottom: 18px;
}

.login-brand-logo img {
  width: 100%;
  height: auto;

  filter:
    drop-shadow(
      0 18px 35px
      rgba(0,0,0,.45)
    );

  transition:
    transform .35s ease,
    filter .35s ease;
}

.login-brand-logo img:hover {
  transform:
    scale(1.015);

  filter:
    drop-shadow(
      0 20px 45px
      rgba(29, 140, 255, .30)
    );
}


/* ==========================================================
   ÁREA DO FORMULÁRIO
========================================================== */

.login-card {
  background:
    linear-gradient(
      135deg,
      rgba(2, 12, 30, .16),
      rgba(2, 12, 30, .36)
    );

  backdrop-filter:
    blur(3px);

  -webkit-backdrop-filter:
    blur(3px);
}


/* ==========================================================
   CARD GLASS
========================================================== */

.login-card-inner {
  position: relative;

  overflow: hidden;

  padding: 38px;

  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.93),
      rgba(238,246,255,.82)
    );

  border:
    1px solid
    rgba(255,255,255,.62);

  box-shadow:
    0 28px 80px
    rgba(0, 7, 24, .38),
    inset 0 1px 0
    rgba(255,255,255,.65);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}


/* brilho superior */
.login-card-inner::before {
  content: "";

  position: absolute;

  top: -80px;
  right: -80px;

  width: 190px;
  height: 190px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(40, 160, 255, .18),
      transparent 70%
    );

  pointer-events: none;
}


/* ==========================================================
   TÍTULOS
========================================================== */

.login-card-inner h1,
.login-card-inner h2 {
  color: #071a36;

  letter-spacing: -.02em;
}

.login-card-inner .muted {
  color:
    rgba(29, 49, 75, .65);
}


/* ==========================================================
   CAMPOS
========================================================== */

.login-card input {
  border:
    1px solid
    rgba(18, 75, 135, .15);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.82),
      rgba(239,247,255,.68)
    );

  box-shadow:
    inset 0 1px 3px
    rgba(0,0,0,.035);

  transition:
    border-color .20s ease,
    box-shadow .20s ease,
    transform .20s ease;
}

.login-card input:focus {
  outline: none;

  border-color:
    rgba(28, 134, 255, .55);

  box-shadow:
    0 0 0 4px
    rgba(28, 134, 255, .10),
    0 7px 20px
    rgba(10, 70, 140, .08);

  transform:
    translateY(-1px);
}


/* ==========================================================
   BOTÃO - SEM COR SÓLIDA
========================================================== */

.login-card .btn-primary {
  position: relative;

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.35);

  background:
    linear-gradient(
      110deg,
      rgba(6, 67, 147, .94),
      rgba(18, 122, 226, .88),
      rgba(23, 181, 214, .80)
    );

  box-shadow:
    0 12px 28px
    rgba(5, 77, 160, .25),
    inset 0 1px 0
    rgba(255,255,255,.25);

  color: #fff;

  transition:
    transform .20s ease,
    box-shadow .20s ease,
    filter .20s ease;
}


/* reflexo no botão */
.login-card .btn-primary::before {
  content: "";

  position: absolute;

  top: 0;
  left: -80%;

  width: 55%;
  height: 100%;

  background:
    linear-gradient(
      100deg,
      transparent,
      rgba(255,255,255,.25),
      transparent
    );

  transform:
    skewX(-18deg);

  transition:
    left .55s ease;
}

.login-card .btn-primary:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 16px 34px
    rgba(5, 77, 160, .34),
    inset 0 1px 0
    rgba(255,255,255,.30);

  filter:
    brightness(1.06);
}

.login-card .btn-primary:hover::before {
  left: 130%;
}

.login-card .btn-primary:active {
  transform:
    translateY(0);
}


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

@media (max-width: 850px) {

  .login-body {
    background:
      linear-gradient(
        rgba(2, 12, 29, .67),
        rgba(2, 12, 29, .80)
      ),
      url('/img/login-futsal.png')
      center / cover
      no-repeat;
  }

  .login-card {
    background:
      transparent;
  }

  .login-card-inner {
    padding:
      30px 24px;

    border-radius:
      22px;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.94),
        rgba(239,247,255,.88)
      );
  }

}



/* ==========================================================
   FUTSAL ESCOLAR
   LOGIN CINEMATIC GLASS
========================================================== */

.login-cinematic {
  margin: 0;

  min-height: 100vh;

  overflow-x: hidden;

  position: relative;

  color: #fff;

  background:
    linear-gradient(
      100deg,
      rgba(1, 9, 24, .91) 0%,
      rgba(2, 20, 46, .70) 43%,
      rgba(2, 18, 42, .67) 100%
    ),
    url('/img/login-futsal.png')
    center center / cover
    no-repeat fixed;
}


/* camada cinematográfica */

.login-cinematic::before {
  content: "";

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 0;

  background:
    radial-gradient(
      circle at 26% 42%,
      rgba(21, 129, 255, .19),
      transparent 30%
    ),
    radial-gradient(
      circle at 78% 20%,
      rgba(38, 176, 255, .12),
      transparent 25%
    ),
    linear-gradient(
      to bottom,
      rgba(0,0,0,.05),
      rgba(0,8,25,.34)
    );
}


/* ==========================================================
   RELÓGIO
========================================================== */

.login-clock {
  position: fixed;

  top: 26px;
  right: 42px;

  z-index: 20;

  text-align: right;

  color:
    rgba(255,255,255,.84);

  text-shadow:
    0 3px 14px
    rgba(0,0,0,.45);
}

.login-clock div {
  font-size: 13px;

  letter-spacing:
    .04em;

  text-transform:
    capitalize;
}

.login-clock strong {
  display: block;

  margin-top: 3px;

  font-size: 25px;

  font-weight: 500;

  letter-spacing:
    -.02em;
}


/* ==========================================================
   LUZES AMBIENTE
========================================================== */

.login-ambient {
  position: fixed;

  border-radius: 50%;

  filter:
    blur(100px);

  pointer-events: none;

  z-index: 0;
}

.ambient-one {
  width: 430px;
  height: 430px;

  left: 8%;
  top: 20%;

  background:
    rgba(0, 114, 255, .16);

  animation:
    ambientPulse 5s
    ease-in-out
    infinite alternate;
}

.ambient-two {
  width: 380px;
  height: 380px;

  right: 3%;
  bottom: 3%;

  background:
    rgba(10, 161, 255, .10);

  animation:
    ambientPulse 7s
    ease-in-out
    infinite alternate-reverse;
}


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

.cinematic-login-layout {
  position: relative;

  z-index: 5;

  min-height: 100vh;

  width:
    min(
      1400px,
      94%
    );

  margin: auto;

  display: grid;

  grid-template-columns:
    1.08fr .92fr;

  gap:
    clamp(
      35px,
      6vw,
      100px
    );

  align-items: center;

  padding:
    70px 0 40px;
}


/* ==========================================================
   IDENTIDADE ESQUERDA
========================================================== */

.cinematic-brand {
  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  position: relative;

  min-height: 650px;
}


.brand-energy {
  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;
}


.brand-logo-wrap {
  position: relative;

  z-index: 4;

  width:
    min(
      650px,
      95%
    );

  animation:
    logoFloatPremium
    3.2s
    ease-in-out
    infinite alternate;
}


.cinematic-logo {
  display: block;

  width: 100%;

  height: auto;

  filter:
    drop-shadow(
      0 22px 42px
      rgba(0,0,0,.55)
    )
    drop-shadow(
      0 0 20px
      rgba(22, 135, 255, .24)
    );

  animation:
    logoGlow
    2.8s
    ease-in-out
    infinite alternate;
}


/* círculos energéticos */

.energy-ring {
  position: absolute;

  left: 50%;
  top: 50%;

  border-radius: 50%;

  pointer-events: none;

  transform:
    translate(-50%, -50%);
}


.ring-one {
  width: 470px;
  height: 470px;

  border:
    1px solid
    rgba(71, 173, 255, .17);

  box-shadow:
    0 0 50px
    rgba(20, 119, 255, .07);

  animation:
    ringRotate
    15s
    linear
    infinite;
}


.ring-two {
  width: 370px;
  height: 370px;

  border:
    1px dashed
    rgba(80, 191, 255, .14);

  animation:
    ringRotateReverse
    19s
    linear
    infinite;
}


/* identidade */

.brand-copy {
  margin-top: 12px;

  position: relative;

  z-index: 5;
}


.brand-line {
  width: 350px;

  max-width:
    76vw;

  height: 2px;

  margin:
    0 auto 13px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(43, 149, 255, .88),
      transparent
    );

  box-shadow:
    0 0 12px
    rgba(36, 142, 255, .35);
}


.brand-copy p {
  margin: 0;

  color:
    rgba(255,255,255,.69);

  font-size: 12px;

  letter-spacing:
    .32em;
}


.brand-copy blockquote {
  margin:
    40px 0 0;

  color:
    rgba(255,255,255,.72);

  font-size:
    clamp(
      17px,
      1.5vw,
      23px
    );

  font-style: italic;

  font-weight: 500;

  line-height: 1.4;

  text-shadow:
    0 4px 15px
    rgba(0,0,0,.40);
}


/* ==========================================================
   LOGIN DIREITA
========================================================== */

.cinematic-login-area {
  display: flex;

  justify-content: center;

  align-items: center;
}


.cinematic-card {
  position: relative;

  overflow: hidden;

  width:
    min(
      500px,
      100%
    );

  padding:
    55px 45px 38px;

  border-radius:
    30px;

  border:
    1px solid
    rgba(255,255,255,.28);

  background:
    linear-gradient(
      145deg,
      rgba(152, 201, 240, .19),
      rgba(22, 61, 104, .28),
      rgba(6, 31, 67, .38)
    );

  box-shadow:
    0 30px 90px
    rgba(0, 6, 25, .50),
    inset 0 1px 0
    rgba(255,255,255,.22);

  backdrop-filter:
    blur(26px)
    saturate(125%);

  -webkit-backdrop-filter:
    blur(26px)
    saturate(125%);

  animation:
    cardEntrance
    .8s
    cubic-bezier(.2,.8,.2,1)
    both;
}


.card-glow {
  position: absolute;

  width: 250px;
  height: 250px;

  top: -120px;
  right: -80px;

  border-radius: 50%;

  background:
    rgba(128, 215, 255, .15);

  filter:
    blur(45px);

  pointer-events: none;
}


/* ==========================================================
   CABEÇALHO
========================================================== */

.login-heading {
  text-align: center;

  margin-bottom: 36px;
}


.login-heading h1 {
  margin:
    0 0 7px;

  font-size:
    clamp(
      30px,
      3vw,
      42px
    );

  font-weight: 700;

  letter-spacing:
    -.035em;

  color: #fff;

  text-shadow:
    0 5px 20px
    rgba(0,0,0,.30);
}


.login-heading p {
  margin: 0;

  color:
    rgba(232,244,255,.72);

  font-size: 16px;
}


/* ==========================================================
   CAMPOS
========================================================== */

.cinematic-form {
  display: flex;

  flex-direction: column;

  gap: 18px;
}


.cinematic-field {
  position: relative;

  display: flex;

  align-items: center;

  min-height: 64px;

  border:
    1px solid
    rgba(210, 235, 255, .25);

  border-radius: 20px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.11),
      rgba(255,255,255,.055)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.06);

  transition:
    .25s ease;
}


.cinematic-field:focus-within {
  border-color:
    rgba(87, 191, 255, .65);

  background:
    linear-gradient(
      135deg,
      rgba(31, 138, 230, .15),
      rgba(255,255,255,.07)
    );

  box-shadow:
    0 0 0 4px
    rgba(31, 139, 255, .07),
    0 8px 28px
    rgba(0, 84, 180, .12);

  transform:
    translateY(-1px);
}


.field-icon {
  width: 60px;

  flex:
    0 0 60px;

  text-align: center;

  color:
    rgba(219,239,255,.73);

  font-size: 20px;
}


.cinematic-field input {
  flex: 1;

  width: 100%;

  height: 62px;

  padding:
    0 48px 0 0;

  border: 0 !important;

  outline: 0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  color: #fff;

  font-size: 16px;

  transform:
    none !important;
}


.cinematic-field input::placeholder {
  color:
    rgba(224,239,255,.63);
}


.password-toggle {
  position: absolute;

  right: 18px;

  width: 34px;
  height: 34px;

  border: 0;

  border-radius: 50%;

  cursor: pointer;

  color:
    rgba(226,242,255,.67);

  background:
    transparent;

  transition: .2s;
}


.password-toggle:hover,
.password-toggle.active {
  color: #fff;

  background:
    rgba(255,255,255,.08);
}


/* ==========================================================
   BOTÃO
========================================================== */

.cinematic-enter {
  position: relative;

  overflow: hidden;

  height: 67px;

  margin-top: 12px;

  border-radius: 21px;

  border:
    1px solid
    rgba(193,238,255,.55);

  cursor: pointer;

  color: #fff;

  background:
    linear-gradient(
      110deg,
      rgba(13, 89, 226, .94),
      rgba(0, 151, 255, .90),
      rgba(57, 218, 243, .80)
    );

  box-shadow:
    0 11px 34px
    rgba(0, 129, 255, .35),
    0 0 24px
    rgba(39, 181, 255, .18),
    inset 0 1px 0
    rgba(255,255,255,.38);

  font-size: 17px;

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    filter .22s ease;
}


.cinematic-enter strong {
  position: relative;

  z-index: 2;
}


.button-arrow {
  position: relative;

  z-index: 2;

  display: inline-block;

  margin-right: 12px;

  font-size: 26px;

  vertical-align: -2px;

  transition:
    transform .22s ease;
}


.cinematic-enter:hover {
  transform:
    translateY(-2px)
    scale(1.006);

  filter:
    brightness(1.08);

  box-shadow:
    0 16px 42px
    rgba(0, 129, 255, .44),
    0 0 38px
    rgba(56, 204, 255, .21),
    inset 0 1px 0
    rgba(255,255,255,.42);
}


.cinematic-enter:hover
.button-arrow {
  transform:
    translateX(5px);
}


.button-shine {
  position: absolute;

  top: 0;
  left: -70%;

  width: 45%;
  height: 100%;

  background:
    linear-gradient(
      100deg,
      transparent,
      rgba(255,255,255,.34),
      transparent
    );

  transform:
    skewX(-20deg);

  animation:
    buttonSweep
    3.4s
    ease-in-out
    infinite;
}


/* ==========================================================
   RODAPÉ
========================================================== */

.login-separator {
  height: 1px;

  margin:
    37px 0 26px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.25),
      transparent
    );
}


.cinematic-footer {
  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 4px;

  color:
    rgba(230,243,255,.64);

  font-size: 13px;

  text-align: center;
}


.cinematic-footer strong {
  color:
    rgba(255,255,255,.84);

  font-weight: 600;
}

.login-support {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(224,239,255,.72);
  font-size: .78rem;
}

.login-support div {
  display: flex;
  gap: 10px;
}

.login-support a {
  color: #8ed8ff;
  font-weight: 700;
  text-decoration: none;
}

.login-support a:hover,
.login-support a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 560px) {
  .login-support {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* ==========================================================
   ERRO
========================================================== */

.login-error {
  margin-bottom: 20px;

  padding:
    13px 15px;

  border-radius: 14px;

  border:
    1px solid
    rgba(255,122,122,.25);

  background:
    linear-gradient(
      135deg,
      rgba(174, 30, 46, .22),
      rgba(109, 19, 35, .17)
    );

  color: #ffdede;

  font-size: 14px;

  text-align: center;
}


/* ==========================================================
   ANIMAÇÕES
========================================================== */

@keyframes logoFloatPremium {

  from {
    transform:
      translateY(0)
      scale(1);
  }

  to {
    transform:
      translateY(-10px)
      scale(1.012);
  }

}


@keyframes logoGlow {

  from {
    filter:
      drop-shadow(
        0 22px 42px
        rgba(0,0,0,.55)
      )
      drop-shadow(
        0 0 12px
        rgba(22, 135, 255, .16)
      );
  }

  to {
    filter:
      drop-shadow(
        0 22px 42px
        rgba(0,0,0,.55)
      )
      drop-shadow(
        0 0 34px
        rgba(45, 171, 255, .42)
      );
  }

}


@keyframes ringRotate {

  from {
    transform:
      translate(-50%,-50%)
      rotate(0deg);
  }

  to {
    transform:
      translate(-50%,-50%)
      rotate(360deg);
  }

}


@keyframes ringRotateReverse {

  from {
    transform:
      translate(-50%,-50%)
      rotate(360deg);
  }

  to {
    transform:
      translate(-50%,-50%)
      rotate(0deg);
  }

}


@keyframes cardEntrance {

  from {
    opacity: 0;

    transform:
      translateY(22px)
      scale(.97);

    filter:
      blur(6px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);

    filter:
      blur(0);
  }

}


@keyframes buttonSweep {

  0%,
  58% {
    left: -70%;
  }

  82%,
  100% {
    left: 140%;
  }

}


@keyframes ambientPulse {

  from {
    opacity: .55;

    transform:
      scale(.90);
  }

  to {
    opacity: 1;

    transform:
      scale(1.12);
  }

}


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

@media (
  max-width: 900px
) {

  .login-clock {
    top: 15px;
    right: 18px;
  }


  .login-clock div {
    display: none;
  }


  .login-clock strong {
    font-size: 18px;
  }


  .cinematic-login-layout {
    grid-template-columns: 1fr;

    width: 92%;

    padding:
      75px 0 35px;

    gap: 25px;
  }


  .cinematic-brand {
    min-height: auto;
  }


  .brand-logo-wrap {
    width:
      min(
        440px,
        92vw
      );
  }


  .energy-ring {
    display: none;
  }


  .brand-copy p {
    font-size: 9px;
  }


  .brand-copy blockquote {
    display: none;
  }


  .cinematic-card {
    width: 100%;

    max-width: 500px;

    padding:
      35px 23px 28px;
  }


  .cinematic-login-area {
    width: 100%;
  }

}


@media (
  max-width: 520px
) {

  .brand-copy {
    margin-top: -5px;
  }


  .brand-line {
    width: 250px;
  }


  .cinematic-card {
    border-radius: 24px;
  }


  .cinematic-field {
    min-height: 58px;

    border-radius: 17px;
  }


  .cinematic-field input {
    height: 58px;
  }


  .cinematic-enter {
    height: 61px;

    border-radius: 18px;
  }

}


/* Respeita usuários que desativam animações */

@media (
  prefers-reduced-motion: reduce
) {

  .cinematic-logo,
  .brand-logo-wrap,
  .energy-ring,
  .button-shine,
  .login-ambient {
    animation: none !important;
  }

}



/* ==========================================================
   FUTSAL ESCOLAR
   TOPBAR PREMIUM GLASS
========================================================== */

.premium-topbar {
  position: sticky;

  top: 0;

  z-index: 1000;

  background:
    linear-gradient(
      105deg,
      rgba(3, 15, 34, .86),
      rgba(8, 37, 77, .70),
      rgba(4, 18, 41, .84)
    );

  border-bottom:
    1px solid
    rgba(255,255,255,.10);

  box-shadow:
    0 12px 35px
    rgba(0, 9, 25, .22);

  backdrop-filter:
    blur(22px)
    saturate(130%);

  -webkit-backdrop-filter:
    blur(22px)
    saturate(130%);
}


.premium-nav-wrap {
  min-height: 78px;

  display: flex;

  align-items: center;

  gap: 18px;
}


/* ==========================================================
   LOGO
========================================================== */

.premium-logo {
  flex:
    0 0 auto;

  width: 170px;

  min-width: 170px;

  padding: 0;

  background: none !important;

  border: 0 !important;

  box-shadow: none !important;
}


.premium-logo img {
  display: block;

  width: 100%;

  height: 58px;

  object-fit: contain;

  object-position: left center;

  filter:
    drop-shadow(
      0 8px 18px
      rgba(0,0,0,.28)
    );

  transition:
    transform .22s ease,
    filter .22s ease;
}


.premium-logo:hover img {
  transform:
    translateY(-1px)
    scale(1.015);

  filter:
    drop-shadow(
      0 10px 24px
      rgba(29, 151, 255, .30)
    );
}


/* ==========================================================
   MENU
========================================================== */

.premium-topnav {
  flex: 1;

  min-width: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 4px;
}


.premium-topnav a {
  position: relative;

  display: inline-flex;

  align-items: center;

  gap: 7px;

  min-height: 44px;

  padding:
    0 12px;

  border-radius: 14px;

  color:
    rgba(230, 242, 255, .73);

  text-decoration: none;

  font-size: 13px;

  font-weight: 600;

  white-space: nowrap;

  border:
    1px solid
    transparent;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0),
      rgba(255,255,255,0)
    );

  transition:
    color .20s ease,
    border-color .20s ease,
    background .20s ease,
    transform .20s ease,
    box-shadow .20s ease;
}


.premium-topnav a:hover {
  color: #fff;

  transform:
    translateY(-1px);

  border-color:
    rgba(255,255,255,.10);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.09),
      rgba(43, 151, 255, .08)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.05);
}


/* item ativo */

.premium-topnav a.active {
  color: #fff;

  border:
    1px solid
    rgba(122, 202, 255, .24);

  background:
    linear-gradient(
      120deg,
      rgba(27, 112, 225, .26),
      rgba(33, 186, 222, .13),
      rgba(255,255,255,.06)
    );

  box-shadow:
    0 8px 22px
    rgba(0, 108, 210, .12),
    inset 0 1px 0
    rgba(255,255,255,.11);
}


.premium-topnav a.active::after {
  content: "";

  position: absolute;

  left: 20%;
  right: 20%;
  bottom: -1px;

  height: 2px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(71, 184, 255, .95),
      transparent
    );

  box-shadow:
    0 0 10px
    rgba(57, 170, 255, .55);
}


.nav-icon {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 18px;

  color:
    rgba(152, 213, 255, .85);

  font-size: 14px;
}


/* ==========================================================
   USUÁRIO
========================================================== */

.premium-nav-user {
  flex:
    0 0 auto;

  display: flex;

  align-items: center;

  gap: 10px;

  padding:
    7px 8px 7px 10px;

  border-radius: 18px;

  border:
    1px solid
    rgba(255,255,255,.10);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.075),
      rgba(20, 101, 181, .055)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.05);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}


.user-avatar {
  width: 38px;
  height: 38px;

  flex:
    0 0 38px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  color: #fff;

  font-size: 12px;

  font-weight: 700;

  letter-spacing:
    .04em;

  border:
    1px solid
    rgba(145, 214, 255, .30);

  background:
    linear-gradient(
      135deg,
      rgba(21, 101, 220, .72),
      rgba(28, 179, 218, .52)
    );

  box-shadow:
    0 5px 14px
    rgba(0, 84, 170, .22),
    inset 0 1px 0
    rgba(255,255,255,.20);
}


.premium-nav-user .user-info {
  min-width: 90px;

  max-width: 140px;
}


.premium-nav-user .user-info strong {
  display: block;

  overflow: hidden;

  color:
    rgba(255,255,255,.94);

  font-size: 12px;

  font-weight: 650;

  white-space: nowrap;

  text-overflow: ellipsis;
}


.premium-nav-user .user-info small {
  display: block;

  margin-top: 2px;

  color:
    rgba(185, 213, 241, .55);

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing:
    .07em;
}


/* ==========================================================
   SAIR
========================================================== */

.premium-logout {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  min-height: 36px;

  padding:
    0 11px;

  border-radius: 12px;

  cursor: pointer;

  color:
    rgba(255,255,255,.77);

  border:
    1px solid
    rgba(255,255,255,.09);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.018)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.04);

  transition:
    .20s ease;
}


.premium-logout:hover {
  color: #fff;

  border-color:
    rgba(255, 145, 145, .22);

  background:
    linear-gradient(
      135deg,
      rgba(194, 43, 74, .16),
      rgba(255,255,255,.04)
    );

  transform:
    translateY(-1px);
}


.logout-text {
  font-size: 11px;

  font-weight: 600;
}


/* ==========================================================
   MENU MOBILE
========================================================== */

.mobile-menu-toggle {
  display: none;

  width: 44px;
  height: 44px;

  flex:
    0 0 44px;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  gap: 5px;

  border-radius: 13px;

  cursor: pointer;

  border:
    1px solid
    rgba(255,255,255,.10);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.025)
    );
}


.mobile-menu-toggle span {
  width: 20px;
  height: 2px;

  border-radius: 5px;

  background:
    rgba(255,255,255,.80);

  transition:
    .22s ease;
}


.mobile-menu-toggle.active
span:nth-child(1) {
  transform:
    translateY(7px)
    rotate(45deg);
}


.mobile-menu-toggle.active
span:nth-child(2) {
  opacity: 0;
}


.mobile-menu-toggle.active
span:nth-child(3) {
  transform:
    translateY(-7px)
    rotate(-45deg);
}


/* ==========================================================
   RESPONSIVO
========================================================== */

@media (max-width: 1180px) {

  .premium-topnav a {
    padding:
      0 9px;

    font-size: 12px;
  }


  .premium-topnav
  .nav-icon {
    display: none;
  }


  .premium-logo {
    width: 145px;

    min-width: 145px;
  }

}


@media (max-width: 980px) {

  .premium-nav-wrap {
    position: relative;

    min-height: 70px;
  }


  .premium-logo {
    width: 145px;

    min-width: 145px;
  }


  .mobile-menu-toggle {
    display: flex;

    margin-left: auto;
  }


  .premium-topnav {
    position: absolute;

    top: calc(100% + 8px);
    left: 0;
    right: 0;

    display: none;

    flex-direction: column;

    align-items: stretch;

    gap: 5px;

    padding: 12px;

    border-radius: 20px;

    border:
      1px solid
      rgba(255,255,255,.10);

    background:
      linear-gradient(
        145deg,
        rgba(3, 17, 39, .96),
        rgba(7, 40, 82, .93)
      );

    box-shadow:
      0 20px 55px
      rgba(0, 7, 24, .42);

    backdrop-filter:
      blur(24px);

    -webkit-backdrop-filter:
      blur(24px);
  }


  .premium-topnav.menu-open {
    display: flex;
  }


  .premium-topnav a {
    width: 100%;

    justify-content: flex-start;

    min-height: 46px;

    padding:
      0 14px;

    font-size: 13px;
  }


  .premium-topnav
  .nav-icon {
    display: inline-flex;
  }


  .premium-nav-user {
    margin-left: 2px;
  }


  .premium-nav-user
  .user-info {
    display: none;
  }


  .logout-text {
    display: none;
  }

}


@media (max-width: 560px) {

  .premium-nav-wrap {
    gap: 8px;
  }


  .premium-logo {
    width: 125px;

    min-width: 125px;
  }


  .premium-logo img {
    height: 50px;
  }


  .user-avatar {
    display: none;
  }


  .premium-nav-user {
    padding: 5px;
  }


  .premium-logout {
    width: 38px;

    padding: 0;
  }

}



/* ==========================================================
   FUTSAL ESCOLAR
   DASHBOARD ARENA PREMIUM
========================================================== */

.arena-dashboard {
  margin: 0;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;

  color: #eef8ff;

  background:
    linear-gradient(
      rgba(2,12,30,.59),
      rgba(2,13,31,.70)
    ),
    url('/img/login-futsal.png')
    center center / cover
    fixed no-repeat;

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


.arena-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 50% 18%,
      rgba(0,127,255,.11),
      transparent 38%
    ),
    linear-gradient(
      90deg,
      rgba(0,7,21,.32),
      transparent 18%,
      transparent 82%,
      rgba(0,7,21,.32)
    );
}


.arena-light {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(95px);
}


.arena-light-one {
  width: 420px;
  height: 420px;
  left: 5%;
  top: 10%;
  background: rgba(0,119,255,.13);
}


.arena-light-two {
  width: 500px;
  height: 500px;
  right: 2%;
  top: 18%;
  background: rgba(0,178,255,.09);
}


.arena-light-three {
  width: 500px;
  height: 250px;
  left: 36%;
  bottom: -10%;
  background: rgba(0,105,235,.12);
}


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

.arena-header {
  position: sticky;
  top: 16px;
  z-index: 1000;

  width: min(1450px, calc(100% - 44px));

  margin: 16px auto 0;

  border:
    1px solid
    rgba(116,202,255,.25);

  border-radius: 18px;

  background:
    linear-gradient(
      105deg,
      rgba(3,17,39,.88),
      rgba(8,43,83,.76),
      rgba(4,19,43,.87)
    );

  box-shadow:
    0 18px 45px rgba(0,5,20,.36),
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 28px rgba(0,117,255,.07);

  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}


.arena-header-inner {
  min-height: 82px;

  display: flex;
  align-items: center;

  gap: 17px;

  padding: 7px 15px;
}


.arena-logo {
  width: 205px;
  flex: 0 0 205px;

  display: flex;
  align-items: center;

  text-decoration: none;
}


.arena-logo img {
  width: 100%;
  height: 66px;

  object-fit: contain;

  filter:
    drop-shadow(
      0 8px 18px
      rgba(0,0,0,.36)
    );
}


/* ==========================================================
   MENU
========================================================== */

.arena-nav {
  flex: 1;

  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 3px;
}


.arena-nav a {
  position: relative;

  min-width: 76px;
  min-height: 62px;

  padding: 7px 9px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  gap: 4px;

  border-radius: 13px;

  text-decoration: none;

  color: rgba(220,238,255,.74);

  font-size: 11px;
  font-weight: 500;

  border:
    1px solid
    transparent;

  transition:
    .2s ease;
}


.arena-nav a:hover {
  color: #fff;

  border-color:
    rgba(112,204,255,.13);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.075),
      rgba(0,137,255,.075)
    );
}


.arena-nav a.active {
  color: #fff;

  border-color:
    rgba(71,194,255,.70);

  background:
    linear-gradient(
      145deg,
      rgba(0,125,255,.34),
      rgba(0,207,255,.10)
    );

  box-shadow:
    0 0 20px
    rgba(0,162,255,.28),
    inset 0 1px 0
    rgba(255,255,255,.16);
}

.arena-nav a.arena-nav-support {
  color: #8ce9ff;
}

.arena-nav a.arena-nav-support .arena-nav-icon {
  border: 1px solid currentColor;
  border-radius: 50%;
  width: 21px;
  height: 21px;
  font-weight: 800;
  font-size: 14px;
}

.arena-nav a.arena-nav-support:hover {
  color: #fff;
}


.arena-nav-icon {
  width: 25px;
  height: 25px;

  display: flex;
  align-items: center;
  justify-content: center;
}


.arena-nav-icon svg {
  width: 100%;
  height: 100%;

  fill: none;

  stroke:
    rgba(166,216,255,.89);

  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;

  filter:
    drop-shadow(
      0 0 5px
      rgba(59,176,255,.24)
    );
}


.arena-nav a.active svg {
  stroke: #4be1ff;

  filter:
    drop-shadow(
      0 0 7px
      rgba(0,202,255,.66)
    );
}


/* ==========================================================
   USUÁRIO
========================================================== */

.arena-user {
  flex: 0 0 auto;

  display: flex;
  align-items: center;

  gap: 10px;
}


.arena-avatar {
  width: 47px;
  height: 47px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  color: #fff;

  font-size: 14px;
  font-weight: 700;

  border:
    1px solid
    rgba(69,202,255,.85);

  background:
    linear-gradient(
      145deg,
      rgba(8,73,160,.82),
      rgba(1,137,229,.52)
    );

  box-shadow:
    0 0 16px
    rgba(0,157,255,.45),
    inset 0 1px 0
    rgba(255,255,255,.24);
}


.arena-user-info {
  width: 115px;
}


.arena-user-info strong {
  display: block;

  overflow: hidden;

  color: #fff;

  font-size: 12px;

  white-space: nowrap;
  text-overflow: ellipsis;
}


.arena-user-info small {
  color:
    rgba(196,220,243,.63);

  font-size: 10px;
}


.arena-logout {
  height: 45px;

  padding: 0 17px;

  display: flex;
  align-items: center;

  gap: 8px;

  border-radius: 12px;

  cursor: pointer;

  color:
    rgba(255,225,225,.90);

  border:
    1px solid
    rgba(255,111,122,.55);

  background:
    linear-gradient(
      135deg,
      rgba(171,48,64,.20),
      rgba(255,93,105,.08)
    );

  box-shadow:
    0 0 18px
    rgba(255,73,87,.13),
    inset 0 1px 0
    rgba(255,255,255,.07);
}


.arena-logout svg {
  width: 19px;
  height: 19px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.arena-logout:hover {
  background:
    linear-gradient(
      135deg,
      rgba(201,48,67,.29),
      rgba(255,99,111,.12)
    );

  box-shadow:
    0 0 23px
    rgba(255,73,87,.23);
}


/* ==========================================================
   FRASES LATERAIS
========================================================== */

.arena-left-message {
  position: fixed;

  left: 35px;
  top: 185px;

  z-index: 3;

  display: flex;
  flex-direction: column;

  color:
    rgba(201,224,247,.31);

  font-size: 21px;
  font-weight: 700;
  font-style: italic;

  line-height: 1.25;
}


.arena-values {
  position: fixed;

  right: 32px;
  top: 190px;

  z-index: 3;

  display: flex;
  flex-direction: column;

  gap: 10px;

  color:
    rgba(198,222,246,.46);

  font-size: 14px;
  font-weight: 500;
}


.arena-values i {
  width: 65px;
  height: 3px;

  margin-top: 8px;

  background:
    linear-gradient(
      90deg,
      #21e3ff,
      rgba(33,227,255,.07)
    );

  box-shadow:
    0 0 10px
    rgba(33,227,255,.50);
}


/* ==========================================================
   CONTEÚDO
========================================================== */

.arena-main {
  position: relative;
  z-index: 5;

  width:
    min(
      1300px,
      calc(100% - 180px)
    );

  margin:
    40px auto 0;
}


/* ==========================================================
   HERO
========================================================== */

.arena-hero {
  position: relative;

  min-height: 220px;

  overflow: hidden;

  display: flex;
  align-items: center;

  padding:
    35px 50px;

  border:
    1px solid
    rgba(127,211,255,.45);

  border-radius: 20px;

  background:
    linear-gradient(
      105deg,
      rgba(5,47,88,.70),
      rgba(6,50,94,.52),
      rgba(4,32,72,.45)
    );

  box-shadow:
    0 20px 52px
    rgba(0,7,23,.27),
    inset 0 1px 0
    rgba(255,255,255,.12),
    0 0 24px
    rgba(0,143,255,.05);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}


.arena-hero-content {
  position: relative;
  z-index: 3;

  width: 64%;
}


.arena-eyebrow {
  display: flex;
  align-items: center;

  gap: 12px;

  margin-bottom: 15px;

  color: #36d8fa;

  font-size: 11px;
  font-weight: 600;

  letter-spacing: .16em;
}


.arena-eyebrow i {
  width: 48px;
  height: 3px;

  background:
    linear-gradient(
      90deg,
      #25e0ff,
      rgba(37,224,255,.25)
    );

  box-shadow:
    0 0 10px
    rgba(37,224,255,.40);
}


.arena-hero h1 {
  margin: 0;

  color: #fff;

  font-size:
    clamp(
      29px,
      3vw,
      43px
    );

  line-height: 1.08;

  letter-spacing: -.035em;

  text-shadow:
    0 5px 18px
    rgba(0,0,0,.26);
}


.arena-hero p {
  max-width: 620px;

  margin:
    16px 0 0;

  color:
    rgba(224,240,255,.77);

  font-size: 16px;

  line-height: 1.55;
}


/* ==========================================================
   BOLA HERO
========================================================== */

.arena-ball-scene {
  position: absolute;

  right: 20px;
  top: 0;

  width: 42%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
}


.hero-soccer-ball {
  position: relative;
  z-index: 5;

  font-size:
    clamp(
      95px,
      11vw,
      165px
    );

  filter:
    drop-shadow(
      0 0 16px
      rgba(18,163,255,.65)
    )
    drop-shadow(
      0 0 35px
      rgba(0,102,255,.42)
    );

  animation:
    arenaBallFloat
    3.4s
    ease-in-out
    infinite alternate;
}


.ball-trail {
  position: absolute;

  height: 4px;

  right: 38%;

  transform-origin:
    right center;

  border-radius: 50%;
}


.trail-one {
  width: 300px;

  top: 42%;

  transform:
    rotate(-17deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(0,91,255,.18),
      #34dcff
    );

  box-shadow:
    0 0 14px
    rgba(52,220,255,.60);
}


.trail-two {
  width: 245px;

  top: 52%;

  transform:
    rotate(-7deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(0,107,255,.13),
      rgba(52,220,255,.67)
    );
}


.trail-three {
  width: 210px;

  top: 60%;

  transform:
    rotate(7deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(0,107,255,.10),
      rgba(52,220,255,.45)
    );
}


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

.arena-stats {
  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  gap: 18px;

  margin-top: 22px;
}


.arena-stat-card {
  position: relative;

  min-height: 140px;

  padding: 22px;

  display: flex;
  align-items: center;

  gap: 18px;

  overflow: hidden;

  border-radius: 18px;

  border:
    1px solid
    rgba(138,215,255,.42);

  background:
    linear-gradient(
      145deg,
      rgba(18,72,118,.61),
      rgba(7,45,88,.47)
    );

  box-shadow:
    0 15px 35px
    rgba(0,7,24,.24),
    inset 0 1px 0
    rgba(255,255,255,.10);

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}


.arena-stat-card:hover {
  transform:
    translateY(-4px);

  box-shadow:
    0 20px 42px
    rgba(0,7,24,.31),
    0 0 24px
    rgba(0,153,255,.09);
}


.arena-stat-icon {
  width: 55px;
  height: 55px;

  flex:
    0 0 55px;

  display: flex;
  align-items: center;
  justify-content: center;
}


.arena-stat-icon svg {
  width: 100%;
  height: 100%;

  fill: none;

  stroke: #39cfff;

  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;

  filter:
    drop-shadow(
      0 0 8px
      rgba(38,192,255,.60)
    );
}


.icon-category svg {
  stroke: #ffc84c;

  filter:
    drop-shadow(
      0 0 8px
      rgba(255,185,43,.50)
    );
}


.icon-player svg {
  stroke: #39c7ff;
}


.icon-users svg {
  stroke: #44a9ff;
}


.arena-stat-info {
  min-width: 0;
}


.arena-stat-info span {
  display: block;

  color:
    rgba(219,237,255,.80);

  font-size: 14px;
}


.arena-stat-info strong {
  display: block;

  margin-top: 3px;

  color: #fff;

  font-size: 34px;
  line-height: 1;

  letter-spacing: -.04em;
}


.arena-stat-info small {
  display: block;

  margin-top: 8px;

  color:
    rgba(210,231,249,.65);

  font-size: 11px;
}


.arena-stat-decoration {
  position: absolute;

  right: 17px;
  top: 22px;

  width: 29px;
  height: 29px;

  opacity: .42;
}


.arena-stat-decoration svg {
  width: 100%;
  height: 100%;

  fill: none;

  stroke:
    #a6d7ff;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.arena-stat-decoration.bars {
  display: flex;

  align-items: flex-end;

  gap: 3px;
}


.arena-stat-decoration.bars span {
  display: block;

  width: 5px;

  background:
    rgba(168,215,255,.72);
}


.arena-stat-decoration.bars
span:nth-child(1) {
  height: 12px;
}


.arena-stat-decoration.bars
span:nth-child(2) {
  height: 24px;
}


.arena-stat-decoration.bars
span:nth-child(3) {
  height: 18px;
}


/* ==========================================================
   LOWER
========================================================== */

.arena-lower-grid {
  display: grid;

  grid-template-columns:
    1.45fr 1fr;

  gap: 18px;

  margin-top: 20px;
}


.arena-panel {
  border-radius: 19px;

  border:
    1px solid
    rgba(136,214,255,.42);

  background:
    linear-gradient(
      145deg,
      rgba(10,55,101,.68),
      rgba(5,35,75,.58)
    );

  box-shadow:
    0 18px 45px
    rgba(0,7,24,.27),
    inset 0 1px 0
    rgba(255,255,255,.10);

  backdrop-filter:
    blur(22px);

  -webkit-backdrop-filter:
    blur(22px);
}


/* ==========================================================
   PAINEL COLÉGIOS
========================================================== */

.arena-schools-panel {
  padding: 18px;
}


.arena-panel-header {
  display: flex;

  justify-content:
    space-between;

  align-items: center;

  gap: 20px;

  margin-bottom: 15px;
}


.arena-section-title {
  display: flex;

  align-items: center;

  gap: 12px;
}


.arena-small-icon {
  width: 38px;
  height: 38px;
}


.arena-small-icon svg {
  width: 100%;
  height: 100%;

  fill: none;

  stroke: #31dcf7;

  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;

  filter:
    drop-shadow(
      0 0 6px
      rgba(49,220,247,.55)
    );
}


.arena-section-title small,
.arena-admin-heading small {
  color: #39daf4;

  font-size: 10px;

  letter-spacing:
    .14em;
}


.arena-section-title h2,
.arena-admin-heading h2 {
  margin: 3px 0 0;

  color: #fff;

  font-size: 20px;
}


.arena-new-school {
  height: 47px;

  padding:
    0 20px;

  display: inline-flex;

  align-items: center;

  gap: 10px;

  border-radius: 12px;

  cursor: pointer;

  color: #fff;

  border:
    1px solid
    rgba(51,224,255,.76);

  background:
    linear-gradient(
      110deg,
      rgba(0,104,255,.72),
      rgba(0,213,255,.55)
    );

  box-shadow:
    0 0 21px
    rgba(0,170,255,.27),
    inset 0 1px 0
    rgba(255,255,255,.22);

  font-weight: 600;
}


.arena-new-school span {
  color: #65efff;

  font-size: 23px;
}


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

.arena-table-wrap {
  overflow-x: auto;

  border:
    1px solid
    rgba(133,204,255,.17);

  border-radius: 13px;
}


.arena-table {
  width: 100%;

  border-collapse: collapse;

  font-size: 12px;
}


.arena-table th {
  padding:
    12px 14px;

  text-align: left;

  color:
    rgba(211,232,251,.72);

  font-weight: 500;

  background:
    rgba(255,255,255,.035);
}


.arena-table td {
  padding:
    11px 14px;

  color:
    rgba(224,238,252,.78);

  border-top:
    1px solid
    rgba(255,255,255,.055);
}


.arena-table tr:hover td {
  background:
    rgba(43,140,224,.045);
}


.school-cell {
  display: flex;

  align-items: center;

  gap: 11px;
}


.school-avatar {
  width: 30px;
  height: 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 8px;

  background:
    rgba(255,255,255,.05);

  border:
    1px solid
    rgba(255,255,255,.08);
}


.school-cell strong {
  color: #fff;
}


.arena-status {
  display: inline-flex;

  padding:
    5px 12px;

  border-radius: 8px;

  font-size: 11px;
}


.arena-status.active {
  color: #94ffc0;

  border:
    1px solid
    rgba(34,223,122,.43);

  background:
    linear-gradient(
      135deg,
      rgba(17,160,89,.22),
      rgba(28,215,121,.07)
    );

  box-shadow:
    0 0 12px
    rgba(30,210,113,.10);
}


.arena-status.inactive {
  color: #ffb7bb;

  border:
    1px solid
    rgba(255,91,99,.42);

  background:
    linear-gradient(
      135deg,
      rgba(186,47,59,.25),
      rgba(255,81,94,.08)
    );
}


.table-more {
  text-align: right;

  letter-spacing: 2px;

  color:
    rgba(172,211,242,.60)
    !important;
}


.arena-empty {
  padding: 45px 20px;

  text-align: center;

  color:
    rgba(220,236,251,.63);
}


.arena-empty-icon {
  font-size: 38px;
}


.arena-empty h3 {
  margin:
    12px 0 4px;

  color: #fff;
}


.arena-empty p {
  margin: 0;
}


/* ==========================================================
   ADMINISTRAÇÃO
========================================================== */

.arena-admin-panel {
  padding: 21px;
}


.arena-admin-heading {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 17px;
}


.arena-rocket {
  width: 40px;
  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #25dcf4;

  font-size: 27px;

  text-shadow:
    0 0 12px
    rgba(37,220,244,.60);
}


.arena-quick-grid {
  display: grid;

  grid-template-columns:
    repeat(2,1fr);

  gap: 12px;
}


.arena-quick-grid a {
  min-height: 92px;

  padding: 14px;

  display: grid;

  grid-template-columns:
    39px 1fr auto;

  align-items: center;

  gap: 11px;

  text-decoration: none;

  border-radius: 13px;

  color:
    rgba(225,241,255,.82);

  border:
    1px solid
    rgba(135,215,255,.34);

  background:
    linear-gradient(
      145deg,
      rgba(28,88,139,.43),
      rgba(13,55,100,.33)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.06);

  transition:
    .2s ease;
}


.arena-quick-grid a:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(77,213,255,.55);

  background:
    linear-gradient(
      145deg,
      rgba(28,109,170,.48),
      rgba(10,65,119,.39)
    );

  box-shadow:
    0 9px 22px
    rgba(0,7,24,.15),
    0 0 17px
    rgba(0,173,255,.08);
}


.quick-icon {
  width: 36px;
  height: 36px;
}


.quick-icon svg {
  width: 100%;
  height: 100%;

  fill: none;

  stroke:
    #38cbff;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;

  filter:
    drop-shadow(
      0 0 6px
      rgba(56,203,255,.55)
    );
}


.whatsapp-icon svg {
  stroke: #1de9d1;
}


.arena-quick-grid strong {
  display: block;

  color: #fff;

  font-size: 12px;
}


.arena-quick-grid small {
  display: block;

  margin-top: 3px;

  color:
    rgba(202,224,244,.58);

  font-size: 9px;
}


.quick-arrow {
  font-size: 25px;

  color:
    rgba(177,220,255,.64);
}


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

.arena-footer {
  min-height: 88px;

  display: flex;

  justify-content:
    space-between;

  align-items: center;

  gap: 20px;
}


.arena-footer-brand {
  display: flex;

  flex-direction: column;

  gap: 3px;
}


.arena-footer-brand strong {
  color: #5eddf7;

  font-size: 14px;

  font-style: italic;

  letter-spacing: .03em;
}


.arena-footer-brand small {
  color:
    rgba(192,219,242,.51);

  font-size: 8px;

  letter-spacing:
    .22em;
}


.arena-footer-message {
  display: flex;

  align-items: center;

  gap: 17px;

  color:
    rgba(213,233,250,.63);

  font-size: 11px;
}


.arena-footer-message i {
  width: 50px;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      #38dbf7,
      transparent
    );

  box-shadow:
    0 0 8px
    rgba(56,219,247,.45);
}


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

.arena-mobile-toggle {
  display: none;

  width: 44px;
  height: 44px;

  flex: 0 0 44px;

  border-radius: 12px;

  border:
    1px solid
    rgba(104,202,255,.24);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.08),
      rgba(0,139,255,.05)
    );

  align-items: center;

  justify-content: center;

  flex-direction: column;

  gap: 5px;
}


.arena-mobile-toggle span {
  width: 20px;
  height: 2px;

  border-radius: 99px;

  background:
    rgba(255,255,255,.79);
}


/* ==========================================================
   ANIMAÇÃO
========================================================== */

@keyframes arenaBallFloat {

  from {
    transform:
      translateY(5px)
      rotate(-4deg);
  }

  to {
    transform:
      translateY(-8px)
      rotate(4deg);
  }

}


/* ==========================================================
   RESPONSIVO
========================================================== */

@media (max-width: 1250px) {

  .arena-main {
    width:
      min(
        1180px,
        calc(100% - 50px)
      );
  }


  .arena-left-message,
  .arena-values {
    display: none;
  }


  .arena-logo {
    width: 170px;
    flex-basis: 170px;
  }


  .arena-nav a {
    min-width: 65px;

    padding:
      6px 5px;

    font-size: 10px;
  }


  .arena-user-info {
    display: none;
  }

}


@media (max-width: 980px) {

  .arena-header {
    top: 8px;

    width:
      calc(100% - 20px);

    margin-top: 8px;
  }


  .arena-header-inner {
    position: relative;
  }


  .arena-logo {
    width: 155px;

    flex-basis: 155px;
  }


  .arena-mobile-toggle {
    display: flex;

    margin-left: auto;
  }


  .arena-nav {
    position: absolute;

    top:
      calc(100% + 9px);

    left: 0;
    right: 0;

    display: none;

    padding: 12px;

    grid-template-columns:
      repeat(2,1fr);

    border-radius: 17px;

    border:
      1px solid
      rgba(109,206,255,.23);

    background:
      linear-gradient(
        145deg,
        rgba(3,18,41,.97),
        rgba(7,49,91,.94)
      );

    box-shadow:
      0 22px 50px
      rgba(0,6,22,.43);

    backdrop-filter:
      blur(25px);
  }


  .arena-nav.open {
    display: grid;
  }


  .arena-nav a {
    min-height: 52px;

    flex-direction: row;

    justify-content: flex-start;

    gap: 11px;

    padding:
      0 14px;

    font-size: 12px;
  }


  .arena-nav-icon {
    width: 22px;
    height: 22px;
  }


  .arena-main {
    width:
      calc(100% - 24px);

    margin-top: 28px;
  }


  .arena-hero {
    padding:
      30px;

    min-height: 210px;
  }


  .arena-hero-content {
    width: 75%;
  }


  .arena-ball-scene {
    opacity: .63;
  }


  .arena-stats {
    grid-template-columns:
      repeat(2,1fr);
  }


  .arena-lower-grid {
    grid-template-columns:
      1fr;
  }

}


@media (max-width: 620px) {

  .arena-header-inner {
    min-height: 67px;
  }


  .arena-logo {
    width: 135px;

    flex-basis: 135px;
  }


  .arena-logo img {
    height: 52px;
  }


  .arena-avatar {
    display: none;
  }


  .arena-logout {
    width: 40px;

    padding: 0;

    justify-content: center;
  }


  .arena-logout span {
    display: none;
  }


  .arena-main {
    margin-top: 22px;
  }


  .arena-hero {
    min-height: 260px;

    padding:
      28px 22px;
  }


  .arena-hero-content {
    width: 100%;
  }


  .arena-hero h1 {
    font-size: 28px;
  }


  .arena-hero p {
    font-size: 14px;
  }


  .arena-ball-scene {
    right: -45px;
    top: 75px;

    opacity: .22;
  }


  .arena-stats {
    grid-template-columns:
      1fr;
  }


  .arena-stat-card {
    min-height: 120px;
  }


  .arena-panel-header {
    align-items: flex-start;

    flex-direction: column;
  }


  .arena-new-school {
    width: 100%;

    justify-content: center;
  }


  .arena-quick-grid {
    grid-template-columns:
      1fr;
  }


  .arena-footer {
    align-items: flex-start;

    flex-direction: column;

    padding:
      25px 5px;
  }

}


/* ==========================================================
   HERO BALL IMAGE
========================================================== */

.hero-soccer-ball {
  width: min(540px, 100%);
  display: flex;
  align-items: center;
  justify-content: center;

  animation:
    arenaBallFloat
    3.4s
    ease-in-out
    infinite alternate;
}

.hero-soccer-ball img {
  display: block;

  width: 100%;
  height: auto;

  object-fit: contain;

  filter:
    drop-shadow(
      0 0 14px
      rgba(29, 180, 255, .50)
    )
    drop-shadow(
      0 0 32px
      rgba(0, 107, 255, .30)
    );

  pointer-events: none;
}

@media (max-width: 980px) {

  .hero-soccer-ball {
    width: min(430px, 100%);
  }

}

@media (max-width: 620px) {

  .hero-soccer-ball {
    width: 330px;
  }

}



/* ==========================================================
   MÓDULO COLÉGIOS
========================================================== */

.schools-topbar {
  position: sticky;
  top: 16px;
  z-index: 1000;

  width: min(1450px, calc(100% - 44px));

  margin: 16px auto 0;

  border:
    1px solid
    rgba(116,202,255,.25);

  border-radius: 18px;

  background:
    linear-gradient(
      105deg,
      rgba(3,17,39,.88),
      rgba(8,43,83,.76),
      rgba(4,19,43,.87)
    );

  box-shadow:
    0 18px 45px rgba(0,5,20,.36),
    inset 0 1px 0 rgba(255,255,255,.10);

  backdrop-filter: blur(24px);
}


.schools-topbar-inner {
  min-height: 76px;

  display: flex;
  align-items: center;

  gap: 22px;

  padding: 6px 15px;
}


.schools-brand {
  width: 185px;
  flex: 0 0 185px;
}


.schools-brand img {
  display: block;

  width: 100%;
  height: 60px;

  object-fit: contain;
}


.schools-nav {
  flex: 1;

  display: flex;
  justify-content: center;

  gap: 4px;
}


.schools-nav a {
  padding: 11px 12px;

  border-radius: 12px;

  text-decoration: none;

  color:
    rgba(220,238,255,.70);

  font-size: 12px;

  border:
    1px solid transparent;
}


.schools-nav a:hover {
  color: #fff;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.08),
      rgba(0,147,255,.06)
    );
}


.schools-nav a.active {
  color: #fff;

  border-color:
    rgba(69,200,255,.35);

  background:
    linear-gradient(
      120deg,
      rgba(16,118,225,.27),
      rgba(26,213,239,.10)
    );

  box-shadow:
    0 0 18px
    rgba(0,165,255,.13);
}


.schools-user {
  display: flex;
  align-items: center;

  gap: 9px;
}


/* página */

.schools-page {
  position: relative;
  z-index: 5;

  width:
    min(
      1300px,
      calc(100% - 60px)
    );

  margin:
    40px auto 70px;
}


.schools-hero {
  min-height: 160px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 30px;

  padding: 32px 38px;

  border-radius: 20px;

  border:
    1px solid
    rgba(126,211,255,.36);

  background:
    linear-gradient(
      120deg,
      rgba(8,58,107,.69),
      rgba(5,37,79,.52)
    );

  box-shadow:
    0 18px 48px
    rgba(0,7,24,.28),
    inset 0 1px 0
    rgba(255,255,255,.09);

  backdrop-filter: blur(20px);
}


.schools-hero h1 {
  margin: 0;

  color: #fff;

  font-size: 38px;

  letter-spacing: -.035em;
}


.schools-hero p {
  margin:
    10px 0 0;

  color:
    rgba(218,237,253,.71);
}


.schools-primary-action,
.schools-empty a {
  min-height: 50px;

  padding:
    0 22px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  border-radius: 13px;

  color: #fff;

  text-decoration: none;

  font-weight: 600;

  border:
    1px solid
    rgba(56,218,255,.65);

  background:
    linear-gradient(
      110deg,
      rgba(0,100,232,.73),
      rgba(0,205,239,.51)
    );

  box-shadow:
    0 0 22px
    rgba(0,167,255,.20),
    inset 0 1px 0
    rgba(255,255,255,.18);
}


.schools-primary-action span {
  font-size: 23px;
}


/* alertas */

.schools-alert {
  margin-top: 18px;

  padding:
    14px 18px;

  border-radius: 13px;

  backdrop-filter: blur(15px);
}


.schools-alert.success {
  color: #a5ffd0;

  border:
    1px solid
    rgba(53,224,135,.32);

  background:
    linear-gradient(
      120deg,
      rgba(18,142,84,.20),
      rgba(31,221,127,.07)
    );
}


.schools-alert.error {
  color: #ffd0d4;

  border:
    1px solid
    rgba(255,103,117,.34);

  background:
    linear-gradient(
      120deg,
      rgba(175,39,58,.22),
      rgba(255,91,108,.07)
    );
}


/* lista */

.schools-list-panel {
  margin-top: 20px;

  padding: 22px;

  border-radius: 20px;

  border:
    1px solid
    rgba(126,211,255,.35);

  background:
    linear-gradient(
      145deg,
      rgba(8,55,101,.68),
      rgba(5,35,75,.56)
    );

  box-shadow:
    0 18px 48px
    rgba(0,7,24,.27),
    inset 0 1px 0
    rgba(255,255,255,.09);

  backdrop-filter: blur(21px);
}


.schools-list-heading {
  display: flex;

  justify-content:
    space-between;

  align-items: center;

  margin-bottom: 18px;
}


.schools-list-heading small {
  color: #39daf4;

  font-size: 10px;

  letter-spacing:
    .16em;
}


.schools-list-heading h2 {
  margin:
    4px 0 0;

  color: #fff;
}


.schools-count {
  color:
    rgba(207,230,249,.60);

  font-size: 11px;
}


.schools-count strong {
  margin-right: 4px;

  color: #fff;

  font-size: 18px;
}


.school-list-avatar {
  width: 38px;
  height: 38px;

  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  border:
    1px solid
    rgba(121,207,255,.18);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.08),
      rgba(0,134,255,.06)
    );
}


.school-list-avatar img {
  width: 100%;
  height: 100%;

  object-fit: contain;
}


.school-cell small,
.school-contact small {
  display: block;

  margin-top: 3px;

  color:
    rgba(191,219,243,.52);

  font-size: 10px;
}


.school-contact {
  display: flex;
  flex-direction: column;
}


.school-slug {
  color: #79dcff;

  background:
    rgba(0,160,255,.07);

  padding:
    4px 8px;

  border-radius: 7px;
}


.schools-empty {
  padding:
    65px 20px;

  text-align: center;

  color:
    rgba(214,234,251,.62);
}


.schools-empty-icon {
  font-size: 46px;
}


.schools-empty h3 {
  margin:
    14px 0 7px;

  color: #fff;
}


.schools-empty p {
  margin:
    0 auto 25px;

  max-width: 420px;
}


/* ==========================================================
   FORMULÁRIO
========================================================== */

.school-form-page {
  position: relative;
  z-index: 5;

  width:
    min(
      900px,
      calc(100% - 32px)
    );

  margin:
    45px auto 80px;
}


.school-back {
  display: inline-flex;

  margin-bottom: 17px;

  color:
    rgba(196,226,249,.77);

  text-decoration: none;

  font-size: 13px;
}


.school-back:hover {
  color: #fff;
}


.school-form-card {
  padding:
    35px;

  border-radius: 23px;

  border:
    1px solid
    rgba(129,214,255,.42);

  background:
    linear-gradient(
      145deg,
      rgba(9,57,105,.73),
      rgba(5,33,72,.67)
    );

  box-shadow:
    0 25px 65px
    rgba(0,7,24,.38),
    inset 0 1px 0
    rgba(255,255,255,.10);

  backdrop-filter:
    blur(24px);
}


.school-form-heading h1 {
  margin:
    0;

  color: #fff;

  font-size:
    36px;

  letter-spacing:
    -.035em;
}


.school-form-heading p {
  margin:
    10px 0 28px;

  color:
    rgba(215,235,252,.67);
}


.school-form-grid {
  display: grid;

  grid-template-columns:
    repeat(2,1fr);

  gap: 18px;
}


.school-field {
  display: flex;

  flex-direction: column;

  gap: 7px;
}


.school-field.full {
  grid-column:
    1 / -1;
}


.school-field > span {
  color:
    rgba(225,241,255,.82);

  font-size: 12px;

  font-weight: 600;
}


.school-field input {
  width: 100%;

  min-height: 53px;

  box-sizing: border-box;

  padding:
    0 15px;

  border-radius: 13px;

  border:
    1px solid
    rgba(134,211,255,.23);

  outline: none;

  color: #fff;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.08),
      rgba(4,39,80,.13)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.04);

  transition: .2s ease;
}


.school-field input::placeholder {
  color:
    rgba(190,217,239,.43);
}


.school-field input:focus {
  border-color:
    rgba(58,211,255,.59);

  box-shadow:
    0 0 0 4px
    rgba(0,177,255,.07),
    0 0 18px
    rgba(0,156,255,.08);
}


.school-field small {
  color:
    rgba(184,214,239,.48);

  font-size: 10px;
}


/* toggle */

.school-toggle {
  grid-column:
    1 / -1;

  display: flex;

  align-items: center;

  gap: 13px;

  margin-top: 6px;

  cursor: pointer;
}


.school-toggle input {
  position: absolute;

  opacity: 0;
}


.school-switch {
  position: relative;

  width: 47px;
  height: 25px;

  flex:
    0 0 47px;

  border-radius: 99px;

  border:
    1px solid
    rgba(137,208,255,.26);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.09),
      rgba(255,255,255,.03)
    );

  transition: .2s ease;
}


.school-switch::after {
  content: "";

  position: absolute;

  width: 19px;
  height: 19px;

  left: 2px;
  top: 2px;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #dcefff,
      #92b9dc
    );

  transition: .2s ease;
}


.school-toggle
input:checked +
.school-switch {
  border-color:
    rgba(54,220,255,.50);

  background:
    linear-gradient(
      110deg,
      rgba(0,106,236,.72),
      rgba(0,212,225,.44)
    );

  box-shadow:
    0 0 14px
    rgba(0,188,255,.18);
}


.school-toggle
input:checked +
.school-switch::after {
  transform:
    translateX(22px);

  background:
    linear-gradient(
      145deg,
      #fff,
      #bff8ff
    );
}


.school-toggle strong {
  display: block;

  color: #fff;

  font-size: 12px;
}


.school-toggle small {
  display: block;

  margin-top: 2px;

  color:
    rgba(195,222,243,.55);

  font-size: 10px;
}


/* ações */

.school-form-actions {
  display: flex;

  justify-content: flex-end;

  gap: 12px;

  margin-top: 32px;

  padding-top: 22px;

  border-top:
    1px solid
    rgba(255,255,255,.07);
}


.school-cancel,
.school-save {
  min-height: 49px;

  padding:
    0 20px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 8px;

  border-radius: 13px;

  text-decoration: none;

  font-weight: 600;

  font-size: 13px;
}


.school-cancel {
  color:
    rgba(224,239,252,.72);

  border:
    1px solid
    rgba(255,255,255,.12);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.07),
      rgba(255,255,255,.025)
    );
}


.school-save {
  cursor: pointer;

  color: #fff;

  border:
    1px solid
    rgba(61,221,255,.65);

  background:
    linear-gradient(
      110deg,
      rgba(0,101,231,.77),
      rgba(0,207,238,.51)
    );

  box-shadow:
    0 0 21px
    rgba(0,170,255,.21);
}


/* mobile */

@media (max-width: 980px) {

  .schools-nav {
    display: none;
  }

  .schools-topbar-inner {
    justify-content:
      space-between;
  }

}


@media (max-width: 650px) {

  .schools-page {
    width:
      calc(100% - 20px);

    margin-top: 24px;
  }


  .schools-hero {
    align-items: flex-start;

    flex-direction: column;

    padding: 25px;
  }


  .schools-primary-action {
    width: 100%;

    box-sizing: border-box;
  }


  .school-form-card {
    padding:
      26px 20px;
  }


  .school-form-grid {
    grid-template-columns:
      1fr;
  }


  .school-field.full,
  .school-toggle {
    grid-column: auto;
  }


  .school-form-actions {
    flex-direction: column-reverse;
  }


  .school-cancel,
  .school-save {
    width: 100%;

    box-sizing: border-box;
  }

}



/* ==========================================================
   AÇÕES DOS COLÉGIOS
========================================================== */

.school-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.school-actions form {
  margin: 0;
}

.school-action-edit,
.school-action-toggle {
  min-height: 34px;

  padding: 0 11px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 9px;

  font-size: 11px;
  font-weight: 600;

  text-decoration: none;

  cursor: pointer;

  color: #fff;

  border:
    1px solid
    rgba(105,207,255,.30);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.07),
      rgba(0,142,255,.10)
    );

  transition:
    transform .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}

.school-action-edit:hover,
.school-action-toggle:hover {
  transform: translateY(-1px);

  border-color:
    rgba(82,218,255,.55);

  box-shadow:
    0 0 14px
    rgba(0,170,255,.11);
}

.school-action-toggle.danger {
  border-color:
    rgba(255,102,122,.28);

  background:
    linear-gradient(
      135deg,
      rgba(176,39,63,.18),
      rgba(255,84,111,.06)
    );
}

.school-action-toggle.success {
  border-color:
    rgba(75,224,151,.30);

  background:
    linear-gradient(
      135deg,
      rgba(26,161,102,.20),
      rgba(67,222,146,.06)
    );
}



/* ==========================================================
   UPLOAD DA LOGO DO COLÉGIO
========================================================== */

.school-logo-upload {
  margin-top: 2px;

  display: flex;
  align-items: center;

  gap: 20px;

  padding: 18px;

  border-radius: 16px;

  border:
    1px solid
    rgba(122,211,255,.20);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.055),
      rgba(0,132,255,.035)
    );
}


.school-logo-preview {
  width: 112px;
  height: 112px;

  flex: 0 0 112px;

  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  border-radius: 18px;

  border:
    1px solid
    rgba(93,213,255,.30);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.10),
      rgba(0,89,174,.08)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.07),
    0 0 22px
    rgba(0,165,255,.08);
}


.school-logo-preview img {
  width: 100%;
  height: 100%;

  padding: 8px;

  box-sizing: border-box;

  object-fit: contain;
}


.school-logo-preview img.is-empty {
  display: none;
}


.school-logo-placeholder {
  font-size: 42px;

  opacity: .75;
}


.school-logo-placeholder.hidden {
  display: none;
}


.school-logo-controls {
  display: flex;
  flex-direction: column;

  align-items: flex-start;

  gap: 9px;
}


.school-logo-controls input[type="file"] {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;

  pointer-events: none;
}


.school-logo-button {
  min-height: 43px;

  padding:
    0 17px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  border-radius: 11px;

  cursor: pointer;

  color: #fff;

  font-size: 12px;
  font-weight: 600;

  border:
    1px solid
    rgba(64,215,255,.47);

  background:
    linear-gradient(
      115deg,
      rgba(0,101,225,.47),
      rgba(0,199,238,.22)
    );

  box-shadow:
    0 0 17px
    rgba(0,170,255,.10);
}


.school-logo-button:hover {
  border-color:
    rgba(90,225,255,.70);

  box-shadow:
    0 0 20px
    rgba(0,180,255,.16);
}


.school-current-logo {
  color:
    rgba(83,221,255,.68)
    !important;
}


@media (max-width: 600px) {

  .school-logo-upload {
    flex-direction: column;

    align-items: flex-start;
  }

}



/* ==========================================================
   MÓDULO USUÁRIOS
========================================================== */

.users-shell {
  min-height: 100vh;
  padding: 24px 28px 50px;
}


.module-topbar {
  max-width: 1500px;
  margin: 0 auto 30px;

  min-height: 78px;

  padding: 12px 18px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  border:
    1px solid
    rgba(125,211,252,.16);

  border-radius: 20px;

  background:
    linear-gradient(
      135deg,
      rgba(6,22,46,.74),
      rgba(8,34,64,.52)
    );

  backdrop-filter:
    blur(22px);

  box-shadow:
    0 20px 60px
    rgba(0,0,0,.22);
}


.module-brand {
  display: flex;
  align-items: center;

  gap: 12px;

  color: #fff;
  text-decoration: none;
}


.module-brand img {
  width: 48px;
  height: 48px;

  object-fit: contain;
}


.module-brand div {
  display: flex;
  flex-direction: column;
}


.module-brand strong {
  font-size: 15px;
}


.module-brand small {
  margin-top: 2px;

  color:
    rgba(205,231,255,.58);

  font-size: 11px;
}


.module-top-actions {
  display: flex;
  align-items: center;

  gap: 10px;
}


.module-back,
.module-primary-button,
.module-secondary-button {
  min-height: 42px;

  padding:
    0 17px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 11px;

  text-decoration: none;

  font-family: inherit;
  font-size: 12px;
  font-weight: 700;

  cursor: pointer;

  transition:
    .2s ease;
}


.module-back,
.module-secondary-button {
  color:
    rgba(230,244,255,.82);

  border:
    1px solid
    rgba(139,211,255,.20);

  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,.07),
      rgba(76,166,255,.04)
    );
}


.module-primary-button {
  color: #fff;

  border:
    1px solid
    rgba(64,220,255,.46);

  background:
    linear-gradient(
      115deg,
      rgba(0,104,235,.62),
      rgba(0,201,239,.30)
    );

  box-shadow:
    0 0 20px
    rgba(0,170,255,.10);
}


button.module-primary-button {
  border-style: solid;
}


.module-primary-button:hover {
  transform:
    translateY(-1px);

  box-shadow:
    0 0 26px
    rgba(0,182,255,.18);
}


.users-page,
.user-form-page {
  max-width: 1500px;
  margin: 0 auto;
}


.module-heading {
  margin-bottom: 24px;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 28px;
}


.module-heading h1,
.user-form-heading h1 {
  margin:
    5px 0 8px;

  color: #fff;

  font-size:
    clamp(
      27px,
      3vw,
      42px
    );

  line-height: 1.05;
}


.module-heading p,
.user-form-heading p {
  margin: 0;

  color:
    rgba(205,230,248,.67);

  font-size: 13px;
}


.module-eyebrow {
  color: #64dffb;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .18em;
}


.module-total-card {
  min-width: 180px;

  padding:
    15px 20px;

  display: flex;
  flex-direction: column;

  border-radius: 16px;

  border:
    1px solid
    rgba(95,212,255,.18);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.07),
      rgba(0,125,225,.08)
    );

  backdrop-filter:
    blur(18px);
}


.module-total-card span,
.module-total-card small {
  color:
    rgba(205,231,249,.58);

  font-size: 10px;
}


.module-total-card strong {
  margin:
    2px 0;

  color: #fff;

  font-size: 27px;
}


.module-alert {
  margin-bottom: 18px;

  padding:
    13px 16px;

  border-radius: 12px;

  font-size: 12px;
  font-weight: 600;

  backdrop-filter:
    blur(14px);
}


.module-alert.success {
  color: #b8ffe0;

  border:
    1px solid
    rgba(73,255,174,.24);

  background:
    linear-gradient(
      120deg,
      rgba(0,166,98,.17),
      rgba(0,91,73,.09)
    );
}


.module-alert.error {
  color: #ffd0d8;

  border:
    1px solid
    rgba(255,100,125,.25);

  background:
    linear-gradient(
      120deg,
      rgba(187,37,69,.20),
      rgba(96,13,42,.11)
    );
}


.users-card,
.user-form-card {
  border-radius: 22px;

  border:
    1px solid
    rgba(122,210,255,.15);

  background:
    linear-gradient(
      135deg,
      rgba(6,22,47,.80),
      rgba(7,31,58,.62)
    );

  backdrop-filter:
    blur(24px);

  box-shadow:
    0 24px 70px
    rgba(0,0,0,.22);

  overflow: hidden;
}


.users-table-wrap {
  overflow-x: auto;
}


.users-table {
  width: 100%;

  border-collapse:
    collapse;

  min-width: 950px;
}


.users-table th {
  padding:
    15px 18px;

  text-align: left;

  color:
    rgba(182,217,240,.56);

  font-size: 10px;
  font-weight: 700;

  letter-spacing: .08em;

  text-transform:
    uppercase;

  border-bottom:
    1px solid
    rgba(121,204,255,.10);
}


.users-table td {
  padding:
    17px 18px;

  color:
    rgba(228,242,252,.82);

  font-size: 12px;

  border-bottom:
    1px solid
    rgba(121,204,255,.075);
}


.users-table tbody tr {
  transition:
    background .2s ease;
}


.users-table tbody tr:hover {
  background:
    linear-gradient(
      90deg,
      rgba(30,148,255,.055),
      rgba(0,210,255,.025)
    );
}


.user-cell {
  min-width: 220px;

  display: flex;
  align-items: center;

  gap: 12px;
}


.user-avatar-mini {
  width: 40px;
  height: 40px;

  flex:
    0 0 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  color: #fff;

  font-size: 11px;
  font-weight: 800;

  border:
    1px solid
    rgba(75,220,255,.40);

  background:
    linear-gradient(
      145deg,
      rgba(0,115,230,.54),
      rgba(0,207,236,.22)
    );

  box-shadow:
    0 0 18px
    rgba(0,179,255,.09);
}


.user-cell > div:last-child {
  display: flex;
  flex-direction: column;

  gap: 3px;
}


.user-cell strong {
  color: #fff;
}


.user-cell small {
  color:
    rgba(192,219,238,.58);
}


.school-name-cell {
  color:
    rgba(231,245,255,.80);

  font-size: 11px;
}


.user-role-badge {
  display: inline-flex;

  padding:
    6px 9px;

  border-radius: 999px;

  font-size: 10px;
  font-weight: 700;

  border:
    1px solid
    rgba(96,216,255,.20);

  background:
    linear-gradient(
      110deg,
      rgba(51,137,255,.14),
      rgba(0,208,230,.06)
    );
}


.user-role-badge.school_admin {
  color: #84dcff;
}


.user-role-badge.teacher {
  color: #c4adff;

  border-color:
    rgba(176,138,255,.23);

  background:
    linear-gradient(
      110deg,
      rgba(118,69,220,.16),
      rgba(76,50,165,.06)
    );
}


.user-role-badge.financial {
  color: #7ff3c4;

  border-color:
    rgba(90,236,181,.22);

  background:
    linear-gradient(
      110deg,
      rgba(20,167,113,.15),
      rgba(9,89,75,.06)
    );
}


.user-status {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  font-size: 10px;
  font-weight: 700;
}


.user-status span {
  width: 7px;
  height: 7px;

  border-radius: 50%;
}


.user-status.active {
  color: #7ff3bd;
}


.user-status.active span {
  background: #55efae;

  box-shadow:
    0 0 10px
    rgba(85,239,174,.55);
}


.user-status.inactive {
  color:
    rgba(255,169,181,.78);
}


.user-status.inactive span {
  background: #ff7087;
}


.user-last-login {
  color:
    rgba(196,221,238,.60)
    !important;

  font-size:
    10px
    !important;
}


.user-actions {
  display: flex;
  align-items: center;

  gap: 7px;
}


.user-actions form {
  margin: 0;
}


.user-action-edit,
.user-action-toggle {
  min-height: 34px;

  padding:
    0 11px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 9px;

  cursor: pointer;

  text-decoration: none;

  font-family: inherit;
  font-size: 10px;
  font-weight: 700;

  color: #fff;
}


.user-action-edit {
  border:
    1px solid
    rgba(70,205,255,.29);

  background:
    linear-gradient(
      115deg,
      rgba(0,111,226,.27),
      rgba(0,205,239,.10)
    );
}


.user-action-toggle {
  border-style: solid;
}


.user-action-toggle.danger {
  border-color:
    rgba(255,95,119,.27);

  background:
    linear-gradient(
      115deg,
      rgba(180,38,65,.24),
      rgba(95,13,41,.10)
    );
}


.user-action-toggle.success {
  border-color:
    rgba(69,231,166,.27);

  background:
    linear-gradient(
      115deg,
      rgba(24,164,110,.23),
      rgba(10,88,71,.10)
    );
}


.module-empty {
  min-height: 380px;

  padding: 40px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
}


.module-empty-icon {
  margin-bottom: 12px;

  font-size: 48px;
}


.module-empty h2 {
  margin:
    0 0 7px;

  color: #fff;
}


.module-empty p {
  margin:
    0 0 20px;

  color:
    rgba(204,229,247,.62);

  font-size: 12px;
}


.user-form-page {
  max-width: 1050px;
}


.user-form-card {
  padding:
    clamp(
      22px,
      4vw,
      44px
    );
}


.user-form-heading {
  margin-bottom: 28px;
}


.user-form-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:
    19px 20px;
}


.user-form-grid .full {
  grid-column:
    1 / -1;
}


.school-field select {
  width: 100%;
  min-height: 48px;

  padding:
    0 13px;

  border-radius: 11px;

  outline: none;

  color:
    rgba(235,247,255,.91);

  border:
    1px solid
    rgba(117,201,255,.19);

  background:
    rgba(7,27,50,.78);

  font-family: inherit;
}


.school-field select option {
  background: #0a2038;
  color: #fff;
}


.module-switch-row {
  margin-top: 3px;

  padding:
    14px 16px;

  display: flex;
  align-items: center;

  gap: 12px;

  cursor: pointer;

  border:
    1px solid
    rgba(110,203,255,.15);

  border-radius: 13px;

  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,.045),
      rgba(0,151,228,.035)
    );
}


.module-switch-row input {
  display: none;
}


.module-switch {
  width: 42px;
  height: 23px;

  flex:
    0 0 42px;

  position: relative;

  border-radius: 999px;

  background:
    rgba(132,157,175,.20);

  border:
    1px solid
    rgba(174,212,236,.17);

  transition:
    .2s ease;
}


.module-switch::after {
  content: "";

  position: absolute;

  width: 17px;
  height: 17px;

  left: 2px;
  top: 2px;

  border-radius: 50%;

  background:
    rgba(226,240,249,.75);

  transition:
    .2s ease;
}


.module-switch-row input:checked
+ .module-switch {
  background:
    linear-gradient(
      120deg,
      rgba(0,119,227,.69),
      rgba(0,219,216,.38)
    );

  box-shadow:
    0 0 15px
    rgba(0,188,255,.15);
}


.module-switch-row input:checked
+ .module-switch::after {
  transform:
    translateX(18px);

  background: #fff;
}


.module-switch-row div {
  display: flex;
  flex-direction: column;

  gap: 2px;
}


.module-switch-row strong {
  color: #fff;

  font-size: 11px;
}


.module-switch-row small {
  color:
    rgba(190,218,236,.55);

  font-size: 10px;
}


.user-form-actions {
  margin-top: 28px;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 10px;
}


@media (max-width: 760px) {

  .users-shell {
    padding:
      14px 12px 35px;
  }


  .module-topbar,
  .module-heading {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .module-top-actions {
    width: 100%;
  }


  .module-total-card {
    width: 100%;
  }


  .user-form-grid {
    grid-template-columns: 1fr;
  }


  .user-form-grid .full {
    grid-column: auto;
  }


  .user-form-actions {
    flex-direction: column-reverse;
  }


  .user-form-actions a,
  .user-form-actions button {
    width: 100%;
  }

}





/* =========================================================
   CATEGORIES MODULE
========================================================= */

.categories-page,
.category-form-page {
  position: relative;
  z-index: 5;
  width: calc(100% - 48px);
  max-width: 1600px;
  margin: 0 auto;
  padding: 42px 0 70px;
}


.categories-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  margin-bottom: 30px;
}


.categories-heading h1,
.category-form-heading h1 {
  margin: 8px 0 7px;
  color: #f4fbff;
  font-size: clamp(2rem, 3vw, 3.1rem);
  line-height: 1;
}


.categories-heading p,
.category-form-heading p {
  margin: 0;
  color: rgba(214,233,248,.72);
  font-size: .96rem;
}


.categories-new {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 19px;
  border: 1px solid rgba(75,211,255,.30);
  border-radius: 14px;
  color: #effcff;
  text-decoration: none;
  font-weight: 700;
  background:
    linear-gradient(
      135deg,
      rgba(16,139,220,.24),
      rgba(27,208,255,.10)
    );
  box-shadow:
    inset 0 1px rgba(255,255,255,.09),
    0 12px 34px rgba(0,0,0,.20);
  backdrop-filter: blur(16px);
  transition: .2s ease;
}


.categories-new:hover {
  transform: translateY(-2px);
  border-color: rgba(75,211,255,.62);
  box-shadow:
    0 0 25px rgba(42,195,255,.15),
    0 14px 38px rgba(0,0,0,.24);
}


.categories-new > span {
  font-size: 1.5rem;
  color: #63e3ff;
}


.categories-alert {
  margin-bottom: 20px;
  padding: 13px 16px;
  border-radius: 13px;
  backdrop-filter: blur(14px);
}


.categories-alert.success {
  color: #caffeb;
  border: 1px solid rgba(69,255,180,.25);
  background:
    linear-gradient(
      135deg,
      rgba(30,180,118,.15),
      rgba(18,80,74,.14)
    );
}


.categories-alert.error {
  color: #ffd8df;
  border: 1px solid rgba(255,91,122,.28);
  background:
    linear-gradient(
      135deg,
      rgba(213,40,85,.16),
      rgba(92,19,50,.13)
    );
}


.categories-panel,
.category-form-card {
  border: 1px solid rgba(136,202,244,.17);
  border-radius: 24px;
  background:
    linear-gradient(
      145deg,
      rgba(8,32,60,.75),
      rgba(4,21,42,.56)
    );
  box-shadow:
    inset 0 1px rgba(255,255,255,.055),
    0 25px 70px rgba(0,0,0,.25);
  backdrop-filter: blur(22px);
  overflow: hidden;
}


.categories-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  padding: 0 22px;
  border-bottom:
    1px solid rgba(134,202,242,.12);
}


.categories-panel-head > div {
  display: flex;
  gap: 12px;
  align-items: center;
}


.categories-panel-head span {
  color: rgba(188,218,239,.72);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
}


.categories-panel-head strong {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  border-radius: 10px;
  color: #bff5ff;
  border:
    1px solid rgba(94,218,255,.25);
  background:
    linear-gradient(
      135deg,
      rgba(35,178,230,.18),
      rgba(15,84,153,.16)
    );
}


.categories-table-wrap {
  overflow-x: auto;
}


.categories-table {
  width: 100%;
  border-collapse: collapse;
}


.categories-table th {
  padding: 15px 18px;
  text-align: left;
  color: rgba(177,207,228,.59);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}


.categories-table td {
  padding: 17px 18px;
  border-top:
    1px solid rgba(134,202,242,.09);
  color: rgba(233,245,253,.88);
  font-size: .87rem;
  vertical-align: middle;
}


.categories-table tbody tr {
  transition: background .2s ease;
}


.categories-table tbody tr:hover {
  background:
    linear-gradient(
      90deg,
      rgba(30,142,210,.075),
      rgba(31,197,237,.035)
    );
}


.category-name-cell {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 150px;
}


.category-symbol {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  border-radius: 12px;
  border:
    1px solid rgba(80,210,255,.22);
  background:
    linear-gradient(
      135deg,
      rgba(24,136,207,.16),
      rgba(29,207,242,.07)
    );
}


.category-name-cell strong {
  display: block;
  color: #f2fbff;
}


.category-name-cell small {
  display: block;
  margin-top: 3px;
  color: rgba(167,201,225,.47);
  font-size: .69rem;
}


.category-gender,
.category-code {
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  padding: 0 9px;
  border-radius: 9px;
  border:
    1px solid rgba(118,197,241,.15);
  background:
    rgba(13,53,87,.30);
  color: rgba(221,242,253,.83);
}


.category-code {
  color: #7eeaff;
  letter-spacing: .035em;
}


.category-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}


.category-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}


.category-status.active {
  color: #9dffd4;
}


.category-status.active i {
  background: #4cf2aa;
  box-shadow: 0 0 10px #4cf2aa;
}


.category-status.inactive {
  color: #ffb5c2;
}


.category-status.inactive i {
  background: #ff6d89;
  box-shadow: 0 0 10px rgba(255,109,137,.55);
}


.category-actions {
  display: flex;
  gap: 7px;
  align-items: center;
}


.category-actions form {
  margin: 0;
}


.category-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 11px;
  border-radius: 9px;
  border:
    1px solid rgba(90,203,248,.20);
  color: #dff8ff;
  font: inherit;
  font-size: .76rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  background:
    linear-gradient(
      135deg,
      rgba(26,125,196,.16),
      rgba(24,198,238,.06)
    );
}


.category-action.danger {
  border-color:
    rgba(255,100,128,.20);
  background:
    linear-gradient(
      135deg,
      rgba(196,48,78,.15),
      rgba(103,24,52,.07)
    );
}


.category-action.success {
  border-color:
    rgba(77,239,172,.20);
  background:
    linear-gradient(
      135deg,
      rgba(30,173,113,.15),
      rgba(22,94,78,.07)
    );
}


.categories-empty {
  padding: 70px 20px;
  text-align: center;
}


.categories-empty-icon {
  font-size: 2.6rem;
  margin-bottom: 15px;
}


.categories-empty h2 {
  color: #f1fbff;
  margin: 0 0 6px;
}


.categories-empty p {
  color: rgba(190,216,233,.64);
}


.categories-empty a {
  display: inline-flex;
  margin-top: 13px;
  padding: 11px 16px;
  border:
    1px solid rgba(78,214,255,.26);
  border-radius: 11px;
  color: #c9f8ff;
  text-decoration: none;
  background:
    linear-gradient(
      135deg,
      rgba(24,134,207,.18),
      rgba(24,205,241,.07)
    );
}


/* CATEGORY FORM */

.category-form-page {
  max-width: 1120px;
}


.category-back {
  display: inline-flex;
  margin-bottom: 18px;
  color: rgba(194,228,246,.75);
  text-decoration: none;
  font-size: .86rem;
}


.category-form-card {
  padding: 30px;
}


.category-form-heading {
  margin-bottom: 30px;
}


.category-form {
  display: grid;
  gap: 20px;
}


.category-form-section {
  padding: 22px;
  border-radius: 18px;
  border:
    1px solid rgba(124,199,240,.12);
  background:
    linear-gradient(
      145deg,
      rgba(7,36,67,.40),
      rgba(3,24,48,.25)
    );
}


.category-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}


.category-section-title > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border:
    1px solid rgba(75,216,255,.22);
  color: #71e7ff;
  background:
    linear-gradient(
      135deg,
      rgba(33,161,224,.15),
      rgba(19,105,175,.08)
    );
  font-size: .72rem;
  font-weight: 900;
}


.category-section-title strong,
.category-section-title small {
  display: block;
}


.category-section-title strong {
  color: #f0fbff;
}


.category-section-title small {
  color: rgba(177,208,229,.57);
  margin-top: 2px;
}


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


.category-span-2 {
  grid-column: 1 / -1;
}


.category-field {
  display: grid;
  gap: 8px;
}


.category-field > span {
  color: rgba(213,234,247,.77);
  font-size: .78rem;
  font-weight: 700;
}


.category-field input,
.category-field select,
.category-field textarea {
  width: 100%;
  box-sizing: border-box;
  border:
    1px solid rgba(126,201,242,.17);
  border-radius: 12px;
  outline: none;
  color: #eaf9ff;
  background:
    linear-gradient(
      135deg,
      rgba(6,32,59,.77),
      rgba(7,43,73,.57)
    );
  padding: 0 13px;
  font: inherit;
}


.category-field input,
.category-field select {
  height: 46px;
}


.category-field textarea {
  padding-top: 12px;
  resize: vertical;
}


.category-field input:focus,
.category-field select:focus,
.category-field textarea:focus {
  border-color:
    rgba(75,214,255,.57);
  box-shadow:
    0 0 0 3px
    rgba(31,187,238,.07);
}


.category-field select option {
  background: #08233e;
  color: white;
}


.category-date-help {
  margin-top: 12px;
  color: rgba(173,204,225,.52);
  font-size: .76rem;
}


.category-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  cursor: pointer;
}


.category-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}


.category-switch-control {
  position: relative;
  width: 46px;
  height: 25px;
  flex: 0 0 auto;
  border-radius: 100px;
  border:
    1px solid rgba(138,199,233,.23);
  background:
    linear-gradient(
      135deg,
      rgba(59,82,103,.42),
      rgba(25,48,69,.40)
    );
}


.category-switch-control i {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background:
    linear-gradient(
      135deg,
      #bdd9e9,
      #7798aa
    );
  transition: .2s ease;
}


.category-switch input:checked +
.category-switch-control {
  border-color:
    rgba(70,226,255,.43);
  background:
    linear-gradient(
      135deg,
      rgba(24,160,222,.42),
      rgba(26,217,220,.25)
    );
}


.category-switch input:checked +
.category-switch-control i {
  transform: translateX(21px);
  background:
    linear-gradient(
      135deg,
      #dcfcff,
      #60e4ff
    );
  box-shadow:
    0 0 12px rgba(72,222,255,.60);
}


.category-switch > span:last-child strong,
.category-switch > span:last-child small {
  display: block;
}


.category-switch > span:last-child strong {
  color: #e9f9ff;
  font-size: .86rem;
}


.category-switch > span:last-child small {
  color: rgba(177,208,228,.55);
  font-size: .73rem;
  margin-top: 2px;
}


.category-code-panel {
  display: grid;
  gap: 5px;
  padding: 18px;
  border:
    1px solid rgba(70,217,255,.19);
  border-radius: 16px;
  background:
    linear-gradient(
      135deg,
      rgba(19,124,190,.11),
      rgba(20,208,226,.05)
    );
}


.category-code-panel > span {
  color: rgba(169,207,230,.59);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .12em;
}


.category-code-panel strong {
  color: #70e9ff;
  font-size: 1.15rem;
  letter-spacing: .06em;
}


.category-code-panel small {
  color: rgba(180,212,230,.60);
}


.category-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 11px;
  padding-top: 4px;
}


.category-form-actions a,
.category-form-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 12px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}


.category-form-actions a {
  color: rgba(212,233,245,.72);
  border:
    1px solid rgba(130,190,225,.15);
  background:
    linear-gradient(
      135deg,
      rgba(55,83,104,.14),
      rgba(25,48,70,.10)
    );
}


.category-form-actions button {
  color: #effdff;
  border:
    1px solid rgba(71,219,255,.34);
  background:
    linear-gradient(
      135deg,
      rgba(16,134,215,.44),
      rgba(25,211,232,.24)
    );
  box-shadow:
    0 10px 28px rgba(0,0,0,.18);
}


@media (max-width: 900px) {

  .categories-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .category-form-grid {
    grid-template-columns: 1fr;
  }

  .category-span-2 {
    grid-column: auto;
  }

}


@media (max-width: 620px) {

  .categories-page,
  .category-form-page {
    width: calc(100% - 24px);
    padding-top: 26px;
  }

  .category-form-card {
    padding: 17px;
  }

  .category-form-section {
    padding: 16px;
  }

  .category-form-actions {
    flex-direction: column-reverse;
  }

  .category-form-actions a,
  .category-form-actions button {
    width: 100%;
    box-sizing: border-box;
  }

}



/* Categoria - colégio automático do professor */

.category-school-fixed {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 60px;
  padding: 10px 14px;
  box-sizing: border-box;
  border-radius: 13px;
  border:
    1px solid rgba(86,209,249,.18);
  background:
    linear-gradient(
      135deg,
      rgba(10,64,105,.34),
      rgba(11,111,142,.14)
    );
  box-shadow:
    inset 0 1px rgba(255,255,255,.04);
}


.category-school-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 11px;
  border:
    1px solid rgba(92,218,255,.20);
  background:
    linear-gradient(
      135deg,
      rgba(28,142,207,.18),
      rgba(25,213,235,.07)
    );
}


.category-school-fixed strong,
.category-school-fixed small {
  display: block;
}


.category-school-fixed strong {
  color: #edfaff;
  font-size: .88rem;
}


.category-school-fixed small {
  margin-top: 3px;
  color: rgba(175,210,231,.57);
  font-size: .72rem;
}



/* =========================================================
   ERROR 403 - ACESSO RESTRITO
========================================================= */

.error403-page {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 22px;
}


.error403-card {
  position: relative;
  width: 100%;
  max-width: 570px;
  box-sizing: border-box;
  padding: 44px 38px;
  text-align: center;
  overflow: hidden;

  border:
    1px solid rgba(105, 207, 255, .20);

  border-radius: 28px;

  background:
    linear-gradient(
      145deg,
      rgba(7, 31, 58, .82),
      rgba(3, 18, 37, .66)
    );

  box-shadow:
    inset 0 1px rgba(255,255,255,.06),
    0 30px 90px rgba(0,0,0,.36),
    0 0 45px rgba(20,150,225,.06);

  backdrop-filter: blur(24px);
}


.error403-card::before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  left: 50%;
  top: -210px;
  transform: translateX(-50%);
  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(43, 205, 255, .18),
      rgba(43, 205, 255, 0) 70%
    );

  pointer-events: none;
}


.error403-lock {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;

  border:
    1px solid rgba(89, 217, 255, .28);

  border-radius: 22px;

  background:
    linear-gradient(
      135deg,
      rgba(24, 142, 213, .24),
      rgba(21, 215, 241, .08)
    );

  box-shadow:
    0 0 30px rgba(42, 197, 255, .10);
}


.error403-lock svg {
  width: 35px;
  height: 35px;
  fill: none;
  stroke: #75e6ff;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.error403-code {
  position: relative;
  z-index: 1;

  margin-bottom: 12px;

  font-size: clamp(4rem, 12vw, 6.5rem);
  line-height: .95;
  font-weight: 900;
  letter-spacing: .04em;

  color: transparent;

  background:
    linear-gradient(
      135deg,
      #dffaff,
      #60dcff,
      #2aa8ff
    );

  -webkit-background-clip: text;
  background-clip: text;

  text-shadow:
    0 0 35px rgba(54, 207, 255, .12);
}


.error403-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  margin-bottom: 11px;

  color: rgba(162, 219, 243, .72);

  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .16em;
}


.error403-eyebrow i {
  display: block;
  width: 25px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #56dcff
    );
}


.error403-card h1 {
  margin: 0 0 14px;

  color: #f4fbff;

  font-size: clamp(1.65rem, 4vw, 2.25rem);
  line-height: 1.15;
}


.error403-card > p {
  max-width: 440px;
  margin: 0 auto 26px;

  color: rgba(194, 222, 238, .72);

  font-size: .94rem;
  line-height: 1.7;
}


.error403-user {
  display: grid;
  gap: 3px;

  margin: 0 auto 26px;
  padding: 14px 16px;

  max-width: 360px;

  border:
    1px solid rgba(100, 203, 245, .14);

  border-radius: 15px;

  background:
    linear-gradient(
      135deg,
      rgba(14, 69, 107, .25),
      rgba(15, 114, 144, .08)
    );
}


.error403-user span {
  color: rgba(153, 206, 232, .54);

  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .13em;
}


.error403-user strong {
  color: #eefbff;

  font-size: .91rem;
}


.error403-user small {
  color: rgba(172, 209, 230, .58);

  font-size: .74rem;
}


.error403-actions {
  display: flex;
  justify-content: center;
  gap: 11px;
  flex-wrap: wrap;
}


.error403-primary,
.error403-secondary {
  min-height: 46px;
  box-sizing: border-box;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 20px;

  border-radius: 13px;

  font: inherit;
  font-size: .84rem;
  font-weight: 800;

  cursor: pointer;

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}


.error403-primary {
  text-decoration: none;

  color: #effdff;

  border:
    1px solid rgba(70, 218, 255, .34);

  background:
    linear-gradient(
      135deg,
      rgba(15, 136, 218, .42),
      rgba(25, 211, 232, .22)
    );

  box-shadow:
    0 12px 30px rgba(0,0,0,.19);
}


.error403-secondary {
  color: rgba(224, 242, 251, .80);

  border:
    1px solid rgba(143, 196, 226, .16);

  background:
    linear-gradient(
      135deg,
      rgba(57, 82, 103, .17),
      rgba(25, 48, 70, .11)
    );
}


.error403-primary:hover,
.error403-secondary:hover {
  transform: translateY(-2px);
}


.error403-primary:hover {
  border-color:
    rgba(79, 224, 255, .60);

  box-shadow:
    0 0 28px rgba(41, 194, 246, .12),
    0 15px 35px rgba(0,0,0,.22);
}


@media (max-width: 620px) {

  .error403-page {
    padding: 22px 12px;
  }


  .error403-card {
    padding: 34px 19px;
    border-radius: 22px;
  }


  .error403-actions {
    flex-direction: column;
  }


  .error403-primary,
  .error403-secondary {
    width: 100%;
  }

}



/* =========================================================
   TEMPORADAS
========================================================= */

.season-page,
.season-form-page {
  position: relative;
  z-index: 5;
  width: min(1380px, calc(100% - 40px));
  margin: 0 auto;
  padding: 34px 0 70px;
}


.season-heading,
.season-form-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}


.season-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: rgba(104, 220, 255, .76);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .16em;
}


.season-heading h1,
.season-form-heading h1 {
  margin: 0;
  color: #f3fbff;
  font-size: clamp(2rem, 4vw, 3rem);
}


.season-heading p,
.season-form-heading p {
  max-width: 650px;
  margin: 8px 0 0;
  color: rgba(190, 220, 237, .67);
  line-height: 1.65;
}


.season-new-button,
.season-save {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border: 1px solid rgba(70, 218, 255, .30);
  border-radius: 13px;
  background:
    linear-gradient(
      135deg,
      rgba(13, 132, 221, .42),
      rgba(23, 215, 237, .20)
    );
  color: #effcff;
  text-decoration: none;
  font-weight: 800;
  cursor: pointer;
  box-shadow:
    0 14px 34px rgba(0,0,0,.18);
}


.season-table-card,
.season-form-card {
  overflow: hidden;
  border: 1px solid rgba(95, 197, 242, .16);
  border-radius: 24px;
  background:
    linear-gradient(
      145deg,
      rgba(7, 31, 58, .78),
      rgba(3, 18, 37, .60)
    );
  backdrop-filter: blur(22px);
  box-shadow:
    0 25px 70px rgba(0,0,0,.28);
}


.season-table-wrap {
  overflow-x: auto;
}


.season-table {
  width: 100%;
  border-collapse: collapse;
}


.season-table th {
  padding: 16px 20px;
  text-align: left;
  color: rgba(158, 209, 235, .65);
  font-size: .69rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  border-bottom:
    1px solid rgba(118, 190, 226, .11);
}


.season-table td {
  padding: 18px 20px;
  color: rgba(223, 239, 248, .82);
  border-bottom:
    1px solid rgba(118, 190, 226, .08);
}


.season-name {
  display: grid;
  gap: 4px;
}


.season-name strong {
  color: #f1fbff;
}


.season-name span {
  color: rgba(166, 204, 225, .49);
  font-size: .72rem;
}


.season-status {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid;
  font-size: .72rem;
  font-weight: 800;
}


.season-status.active {
  color: #86f7d0;
  border-color: rgba(64, 227, 176, .22);
  background:
    linear-gradient(
      135deg,
      rgba(16, 143, 112, .22),
      rgba(15, 88, 77, .07)
    );
}


.season-status.inactive {
  color: rgba(210, 221, 229, .58);
  border-color: rgba(194, 210, 220, .13);
  background:
    linear-gradient(
      135deg,
      rgba(113, 129, 140, .13),
      rgba(70, 82, 92, .05)
    );
}


.season-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}


.season-actions form {
  margin: 0;
}


.season-edit,
.season-toggle,
.season-cancel {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 12px;
  border-radius: 10px;
  text-decoration: none;
  font: inherit;
  font-size: .74rem;
  font-weight: 800;
  cursor: pointer;
}


.season-edit {
  color: #8de5ff;
  border: 1px solid rgba(83, 211, 255, .20);
  background:
    linear-gradient(
      135deg,
      rgba(15, 122, 191, .19),
      rgba(18, 166, 202, .07)
    );
}


.season-toggle {
  border: 1px solid;
}


.season-toggle.danger {
  color: #ffacb9;
  border-color: rgba(255, 112, 140, .20);
  background:
    linear-gradient(
      135deg,
      rgba(177, 41, 70, .20),
      rgba(114, 22, 44, .06)
    );
}


.season-toggle.success {
  color: #86f7d0;
  border-color: rgba(64, 227, 176, .20);
  background:
    linear-gradient(
      135deg,
      rgba(16, 143, 112, .20),
      rgba(15, 88, 77, .06)
    );
}


.season-empty {
  padding: 70px 25px;
  text-align: center;
}


.season-empty strong {
  display: block;
  color: #effaff;
  font-size: 1.1rem;
}


.season-empty p {
  color: rgba(180, 214, 232, .60);
}


.season-empty a {
  color: #73ddff;
}


.season-success,
.season-error {
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 13px;
  font-size: .84rem;
}


.season-success {
  color: #93f7d7;
  border: 1px solid rgba(62, 224, 171, .20);
  background:
    linear-gradient(
      135deg,
      rgba(13, 128, 98, .22),
      rgba(10, 77, 65, .07)
    );
}


.season-error {
  color: #ffc0ca;
  border: 1px solid rgba(255, 116, 141, .20);
  background:
    linear-gradient(
      135deg,
      rgba(156, 33, 61, .22),
      rgba(91, 20, 39, .07)
    );
}


.season-form-card {
  max-width: 820px;
  padding: 28px;
}


.season-form-card form {
  display: grid;
  gap: 20px;
}


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


.season-field {
  display: grid;
  gap: 8px;
}


.season-field label {
  color: rgba(197, 225, 239, .78);
  font-size: .78rem;
  font-weight: 750;
}


.season-field input,
.season-field select {
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  padding: 0 14px;
  outline: none;
  border: 1px solid rgba(109, 192, 230, .16);
  border-radius: 12px;
  background:
    linear-gradient(
      135deg,
      rgba(10, 38, 64, .72),
      rgba(5, 25, 46, .58)
    );
  color: #edf9ff;
}


.season-field input:focus,
.season-field select:focus {
  border-color: rgba(75, 213, 255, .45);
  box-shadow:
    0 0 0 3px rgba(50, 190, 240, .06);
}


.season-school-fixed {
  display: grid;
  gap: 3px;
  padding: 13px 15px;
  border: 1px solid rgba(89, 208, 252, .15);
  border-radius: 13px;
  background:
    linear-gradient(
      135deg,
      rgba(14, 95, 143, .18),
      rgba(12, 58, 89, .07)
    );
}


.season-school-fixed span {
  color: rgba(155, 203, 226, .50);
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .09em;
}


.season-school-fixed strong {
  color: #eefaff;
}


.season-checkbox {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(214, 235, 246, .80);
  font-size: .82rem;
}


.season-checkbox input {
  accent-color: #48d5ff;
}


.season-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}


.season-cancel {
  color: rgba(214, 233, 242, .70);
  border: 1px solid rgba(160, 196, 216, .13);
  background:
    linear-gradient(
      135deg,
      rgba(61, 80, 96, .14),
      rgba(32, 47, 61, .06)
    );
}


@media (max-width: 760px) {

  .season-page,
  .season-form-page {
    width: min(
      100% - 22px,
      1380px
    );
    padding-top: 22px;
  }


  .season-heading {
    align-items: stretch;
    flex-direction: column;
  }


  .season-new-button {
    align-self: flex-start;
  }


  .season-form-grid {
    grid-template-columns: 1fr;
  }


  .season-form-card {
    padding: 20px 15px;
  }


  .season-form-actions {
    flex-direction: column-reverse;
  }


  .season-save,
  .season-cancel {
    width: 100%;
  }

}



/* =========================================================
   INSCRIÇÃO PÚBLICA
========================================================= */

.public-reg-body {
  min-height: 100vh;
  margin: 0;
  color: #edf9ff;

  background:
    linear-gradient(
      rgba(2, 12, 30, .68),
      rgba(2, 13, 31, .82)
    ),
    url('/img/login-futsal.png')
    center / cover fixed no-repeat;
}


.public-reg-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 20% 10%,
      rgba(29, 183, 245, .16),
      transparent 32%
    ),
    radial-gradient(
      circle at 85% 80%,
      rgba(34, 109, 255, .12),
      transparent 35%
    );
}


.public-reg-page {
  position: relative;
  z-index: 2;
  width: min(880px, calc(100% - 28px));
  margin: 0 auto;
  padding: 40px 0 70px;
}


.public-reg-brand {
  text-align: center;
  margin-bottom: 25px;
}


.public-reg-brand img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  margin-bottom: 10px;
}


.public-reg-brand > span,
.public-reg-category > span {
  display: block;
  color: rgba(101, 220, 255, .72);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .16em;
}


.public-reg-brand h1 {
  margin: 7px 0 0;
  color: #f3fbff;
  font-size: 1.45rem;
}


.public-reg-card {
  padding: 30px;
  border: 1px solid rgba(89, 203, 248, .17);
  border-radius: 26px;

  background:
    linear-gradient(
      145deg,
      rgba(7, 31, 58, .82),
      rgba(3, 18, 37, .67)
    );

  backdrop-filter: blur(23px);

  box-shadow:
    0 30px 90px rgba(0,0,0,.32);
}


.public-reg-category {
  text-align: center;
}


.public-reg-category h2 {
  margin: 7px 0 3px;
  font-size: 2rem;
}


.public-reg-category small {
  color: rgba(181, 216, 233, .62);
}


.public-reg-description {
  text-align: center;
  color: rgba(190, 219, 235, .66);
  line-height: 1.6;
}


.public-reg-form {
  display: grid;
  gap: 20px;
  margin-top: 28px;
}


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


.public-reg-field {
  display: grid;
  gap: 7px;
}


.public-reg-field.full {
  grid-column: 1 / -1;
}


.public-reg-field label {
  color: rgba(204, 229, 241, .76);
  font-size: .77rem;
  font-weight: 750;
}


.public-reg-field input,
.public-reg-field select {
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  padding: 0 14px;

  border:
    1px solid rgba(106, 191, 228, .16);

  border-radius: 12px;
  outline: none;

  background:
    linear-gradient(
      135deg,
      rgba(8, 39, 66, .82),
      rgba(5, 24, 45, .70)
    );

  color: #f0faff;
}


.public-reg-field input:focus,
.public-reg-field select:focus {
  border-color:
    rgba(72, 215, 255, .46);

  box-shadow:
    0 0 0 3px
    rgba(53, 196, 244, .06);
}


.public-reg-section-title {
  display: grid;
  gap: 3px;
}


.public-reg-section-title strong {
  font-size: 1rem;
}


.public-reg-section-title span {
  color: rgba(161, 203, 224, .52);
  font-size: .72rem;
}


.public-reg-divider {
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(92, 199, 240, .20),
      transparent
    );
}


.public-reg-error {
  padding: 13px 15px;
  border-radius: 12px;

  color: #ffc1cd;

  border:
    1px solid rgba(255, 110, 141, .20);

  background:
    linear-gradient(
      135deg,
      rgba(155, 27, 60, .22),
      rgba(85, 17, 39, .07)
    );
}


.public-reg-notice {
  padding: 14px 16px;
  border-radius: 13px;

  border:
    1px solid rgba(77, 204, 249, .14);

  background:
    linear-gradient(
      135deg,
      rgba(14, 104, 159, .17),
      rgba(12, 64, 96, .06)
    );
}


.public-reg-notice strong {
  font-size: .81rem;
}


.public-reg-notice p {
  margin: 4px 0 0;
  color: rgba(186, 219, 235, .64);
  font-size: .76rem;
  line-height: 1.5;
}


.public-reg-submit {
  min-height: 50px;
  border: 1px solid rgba(62, 217, 255, .34);
  border-radius: 13px;

  background:
    linear-gradient(
      135deg,
      rgba(15, 140, 222, .46),
      rgba(26, 215, 233, .22)
    );

  color: #effcff;
  font-size: .9rem;
  font-weight: 900;
  cursor: pointer;
}


.public-reg-honeypot {
  position: absolute !important;
  left: -99999px !important;
}


.public-reg-success-page {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 25px;
  box-sizing: border-box;
}


.public-reg-success-card {
  width: min(520px,100%);
  padding: 40px 30px;
  text-align: center;
  box-sizing: border-box;

  border: 1px solid rgba(81, 218, 255, .18);
  border-radius: 26px;

  background:
    linear-gradient(
      145deg,
      rgba(7,31,58,.84),
      rgba(3,18,37,.68)
    );

  backdrop-filter: blur(24px);
}


.public-reg-success-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;

  border-radius: 50%;

  color: #82f8d0;
  font-size: 2rem;

  border:
    1px solid rgba(61, 229, 177, .28);

  background:
    linear-gradient(
      135deg,
      rgba(20, 147, 109, .25),
      rgba(18, 91, 78, .08)
    );
}


.public-reg-success-card > span {
  color: #70ddff;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .15em;
}


.public-reg-success-card h1 {
  margin: 9px 0 14px;
}


.public-reg-success-card p {
  color: rgba(196, 224, 238, .72);
  line-height: 1.65;
}


.public-reg-success-card small {
  color: rgba(139, 197, 224, .56);
}


/* =========================================================
   GESTÃO DE INSCRIÇÕES DA CATEGORIA
========================================================= */

.category-reg-page {
  position: relative;
  z-index: 5;
  width: min(1380px, calc(100% - 40px));
  margin: 0 auto;
  padding: 34px 0 70px;
}


.category-reg-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 24px;
}


.category-reg-heading > div > span,
.category-reg-share-info > span,
.category-reg-list-title span {
  color: rgba(96, 218, 255, .72);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .15em;
}


.category-reg-heading h1 {
  margin: 6px 0 3px;
  color: #f4fbff;
  font-size: 2.35rem;
}


.category-reg-heading p {
  margin: 0;
  color: rgba(178, 215, 234, .62);
}


.category-reg-back {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;

  border-radius: 11px;

  border:
    1px solid rgba(127, 192, 222, .15);

  background:
    linear-gradient(
      135deg,
      rgba(56, 82, 101, .14),
      rgba(30, 51, 68, .06)
    );

  color: rgba(218, 239, 249, .77);
  text-decoration: none;
}


.category-reg-share {
  display: grid;
  grid-template-columns:
    minmax(0,1fr) 230px;
  gap: 24px;
  padding: 25px;
  margin-bottom: 24px;

  border:
    1px solid rgba(92, 201, 243, .16);

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      rgba(7,31,58,.78),
      rgba(3,18,37,.60)
    );

  backdrop-filter: blur(22px);
}


.category-reg-share-info h2 {
  margin: 6px 0 5px;
}


.category-reg-share-info p {
  color: rgba(181, 215, 233, .62);
}


.category-reg-link {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}


.category-reg-link input {
  flex: 1;
  min-width: 0;
  height: 45px;
  box-sizing: border-box;
  padding: 0 13px;

  border:
    1px solid rgba(93, 194, 236, .15);

  border-radius: 11px;

  background:
    linear-gradient(
      135deg,
      rgba(8, 38, 64, .77),
      rgba(5, 24, 44, .61)
    );

  color: rgba(214, 240, 250, .79);
}


.category-reg-link button {
  border: 1px solid rgba(65, 216, 255, .27);
  border-radius: 11px;
  padding: 0 17px;

  background:
    linear-gradient(
      135deg,
      rgba(13, 134, 214, .40),
      rgba(23, 207, 231, .17)
    );

  color: #ecfbff;
  font-weight: 800;
  cursor: pointer;
}


.category-reg-qr {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
}


.category-reg-qr img {
  width: 180px;
  height: 180px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 15px;
  background: rgba(255,255,255,.94);
}


.category-reg-qr small {
  color: rgba(170, 207, 225, .54);
}


.category-reg-list-card {
  overflow: hidden;
  border:
    1px solid rgba(92, 201, 243, .15);

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      rgba(7,31,58,.78),
      rgba(3,18,37,.60)
    );

  backdrop-filter: blur(22px);
}


.category-reg-list-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 21px 22px;

  border-bottom:
    1px solid rgba(107, 189, 226, .10);
}


.category-reg-list-title h2 {
  margin: 5px 0 0;
  font-size: 1.2rem;
}


.category-reg-list-title > strong {
  min-width: 45px;
  height: 36px;
  display: grid;
  place-items: center;

  border-radius: 12px;

  color: #7fe4ff;

  border:
    1px solid rgba(81, 210, 251, .17);

  background:
    linear-gradient(
      135deg,
      rgba(16, 127, 190, .18),
      rgba(15, 74, 110, .07)
    );
}


.category-reg-table-wrap {
  overflow-x: auto;
}


.category-reg-table {
  width: 100%;
  border-collapse: collapse;
}


.category-reg-table th {
  text-align: left;
  padding: 14px 17px;

  color: rgba(158, 207, 233, .61);

  font-size: .66rem;
  letter-spacing: .09em;

  border-bottom:
    1px solid rgba(107, 189, 226, .09);
}


.category-reg-table td {
  padding: 16px 17px;
  color: rgba(220, 239, 248, .80);

  border-bottom:
    1px solid rgba(107, 189, 226, .07);
}


.category-reg-player {
  display: grid;
  gap: 3px;
}


.category-reg-player strong {
  color: #effaff;
}


.category-reg-player span,
.category-reg-relation {
  display: block;
  color: rgba(162, 203, 224, .49);
  font-size: .7rem;
}


.category-reg-status {
  display: inline-flex;
  padding: 6px 9px;
  border: 1px solid;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 850;
}


.category-reg-status.pending {
  color: #ffd88a;
  border-color: rgba(255, 196, 72, .22);
  background:
    linear-gradient(
      135deg,
      rgba(151, 107, 18, .20),
      rgba(88, 60, 9, .06)
    );
}


.category-reg-status.active {
  color: #84f5ce;
  border-color: rgba(64, 226, 173, .21);
  background:
    linear-gradient(
      135deg,
      rgba(15, 138, 105, .20),
      rgba(11, 78, 65, .06)
    );
}


.category-reg-status.inactive {
  color: rgba(208, 221, 229, .58);
  border-color: rgba(173, 195, 207, .14);
  background:
    linear-gradient(
      135deg,
      rgba(93, 111, 123, .14),
      rgba(52, 66, 75, .05)
    );
}


.category-reg-actions {
  display: flex;
  gap: 7px;
}


.category-reg-actions form {
  margin: 0;
}


.category-reg-approve,
.category-reg-inactivate {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid;
  border-radius: 9px;
  font-size: .7rem;
  font-weight: 800;
  cursor: pointer;
}


.category-reg-approve {
  color: #87f5d0;
  border-color: rgba(61, 227, 174, .21);
  background:
    linear-gradient(
      135deg,
      rgba(13, 140, 105, .22),
      rgba(12, 76, 64, .07)
    );
}


.category-reg-inactivate {
  color: #ffb0be;
  border-color: rgba(255, 111, 140, .19);
  background:
    linear-gradient(
      135deg,
      rgba(165, 38, 68, .20),
      rgba(92, 19, 40, .06)
    );
}


.category-reg-success {
  margin-bottom: 18px;
  padding: 13px 15px;

  border-radius: 12px;

  color: #91f6d7;

  border:
    1px solid rgba(63, 224, 174, .19);

  background:
    linear-gradient(
      135deg,
      rgba(13, 127, 97, .21),
      rgba(10, 75, 63, .06)
    );
}


.category-reg-empty {
  padding: 55px 20px;
  text-align: center;
  color: rgba(178, 214, 232, .59);
}


@media (max-width: 760px) {

  .public-reg-card {
    padding: 22px 15px;
  }

  .public-reg-grid {
    grid-template-columns: 1fr;
  }

  .public-reg-field.full {
    grid-column: auto;
  }

  .category-reg-page {
    width: calc(100% - 22px);
  }

  .category-reg-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .category-reg-share {
    grid-template-columns: 1fr;
  }

  .category-reg-link {
    flex-direction: column;
  }

  .category-reg-link button {
    min-height: 44px;
  }

}


.category-action-registrations {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;

  border-radius: 10px;

  color: #8de7ff;

  border:
    1px solid rgba(78, 213, 255, .21);

  background:
    linear-gradient(
      135deg,
      rgba(12, 125, 196, .20),
      rgba(14, 174, 206, .07)
    );

  text-decoration: none;
  font-size: .73rem;
  font-weight: 800;
}



/* =========================================================
   PORTAL DA FAMÍLIA V1
========================================================= */

.category-reg-family {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;

  border-radius: 9px;

  border:
    1px solid rgba(77,213,255,.20);

  background:
    linear-gradient(
      135deg,
      rgba(19,119,185,.20),
      rgba(12,82,125,.06)
    );

  color: #93e9ff;
  text-decoration: none;
  font-size: .70rem;
  font-weight: 800;
}


.family-invite-page {
  position: relative;
  z-index: 5;

  width: min(
    760px,
    calc(100% - 30px)
  );

  margin: 0 auto;
  padding: 55px 0;
}


.family-invite-card {
  padding: 30px;

  border:
    1px solid rgba(89,203,248,.17);

  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(7,31,58,.84),
      rgba(3,18,37,.69)
    );

  backdrop-filter: blur(23px);

  box-shadow:
    0 30px 90px
    rgba(0,0,0,.28);
}


.family-eyebrow {
  color: rgba(101,220,255,.72);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .16em;
}


.family-invite-card h1 {
  margin: 8px 0 22px;
}


.family-invite-person {
  display: grid;
  gap: 4px;
  padding: 16px;
  margin-bottom: 18px;

  border-radius: 14px;

  border:
    1px solid rgba(86,192,236,.13);

  background:
    linear-gradient(
      135deg,
      rgba(12,76,113,.17),
      rgba(6,43,67,.05)
    );
}


.family-invite-person span,
.family-invite-person small,
.family-help {
  color: rgba(185,217,233,.66);
}


.family-alert {
  padding: 13px 15px;
  margin: 16px 0;
  border-radius: 12px;
}


.family-alert.success {
  color: #91f6d7;

  border:
    1px solid rgba(63,224,174,.19);

  background:
    linear-gradient(
      135deg,
      rgba(13,127,97,.21),
      rgba(10,75,63,.06)
    );
}


.family-alert.error {
  color: #ffc0cc;

  border:
    1px solid rgba(255,107,139,.20);

  background:
    linear-gradient(
      135deg,
      rgba(158,28,61,.22),
      rgba(85,17,39,.07)
    );
}


.family-link-label {
  display: block;
  margin-bottom: 7px;
  color: rgba(205,229,240,.72);
  font-size: .76rem;
}


.family-copy-row {
  display: flex;
  gap: 9px;
}


.family-copy-row input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 0 13px;

  border-radius: 11px;

  border:
    1px solid rgba(90,194,235,.16);

  background:
    linear-gradient(
      135deg,
      rgba(8,38,64,.78),
      rgba(5,24,44,.62)
    );

  color: #e7f8ff;
}


.family-copy-row button,
.family-back,
.family-user button,
.family-activate-form button {
  min-height: 42px;
  padding: 0 16px;

  border-radius: 11px;

  border:
    1px solid rgba(67,214,255,.25);

  background:
    linear-gradient(
      135deg,
      rgba(14,135,212,.38),
      rgba(24,205,229,.16)
    );

  color: #effcff;
  font-weight: 800;
  cursor: pointer;
}


.family-back {
  display: inline-flex;
  align-items: center;
  margin-top: 15px;
  text-decoration: none;
}


.family-public-body,
.family-dashboard-body {
  min-height: 100vh;
  margin: 0;

  color: #edf9ff;

  background:
    linear-gradient(
      rgba(2,12,30,.66),
      rgba(2,13,31,.82)
    ),
    url('/img/login-futsal.png')
    center / cover fixed no-repeat;
}


.family-public-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 18% 10%,
      rgba(29,183,245,.15),
      transparent 32%
    ),
    radial-gradient(
      circle at 85% 82%,
      rgba(34,109,255,.11),
      transparent 35%
    );
}


.family-activate-page {
  position: relative;
  z-index: 2;

  min-height: 100vh;
  display: grid;
  place-items: center;

  padding: 25px;
  box-sizing: border-box;
}


.family-activate-card {
  width: min(500px,100%);
  padding: 35px 30px;
  box-sizing: border-box;

  text-align: center;

  border:
    1px solid rgba(89,203,248,.17);

  border-radius: 25px;

  background:
    linear-gradient(
      145deg,
      rgba(7,31,58,.86),
      rgba(3,18,37,.72)
    );

  backdrop-filter: blur(24px);
}


.family-activate-logo {
  width: 85px;
  height: 85px;
  object-fit: contain;
  margin-bottom: 15px;
}


.family-activate-card h1 {
  margin: 8px 0 10px;
}


.family-activate-card > p {
  color: rgba(189,219,234,.68);
  line-height: 1.55;
}


.family-school-name {
  margin: 15px 0;
  color: #83e4ff;
  font-weight: 800;
}


.family-activate-form {
  display: grid;
  gap: 15px;
  margin-top: 23px;
  text-align: left;
}


.family-activate-form label {
  display: grid;
  gap: 6px;
}


.family-activate-form label span {
  color: rgba(202,228,240,.73);
  font-size: .76rem;
  font-weight: 750;
}


.family-activate-form input {
  min-height: 48px;
  box-sizing: border-box;
  padding: 0 13px;

  border-radius: 11px;

  border:
    1px solid rgba(94,193,235,.16);

  outline: none;

  background:
    linear-gradient(
      135deg,
      rgba(8,38,64,.78),
      rgba(5,24,44,.64)
    );

  color: #effbff;
}


.family-topbar {
  position: relative;
  z-index: 5;

  width: min(
    1380px,
    calc(100% - 36px)
  );

  min-height: 74px;

  margin: 18px auto 0;

  padding: 0 18px;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-radius: 20px;

  border:
    1px solid rgba(88,196,239,.15);

  background:
    linear-gradient(
      135deg,
      rgba(8,31,54,.74),
      rgba(4,20,39,.55)
    );

  backdrop-filter: blur(23px);
}


.family-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: white;
  text-decoration: none;
}


.family-brand img {
  width: 45px;
  height: 45px;
  object-fit: contain;
}


.family-brand div,
.family-user > div {
  display: grid;
  gap: 2px;
}


.family-brand small,
.family-user small {
  color: rgba(167,208,228,.55);
}


.family-user {
  display: flex;
  align-items: center;
  gap: 15px;
  text-align: right;
}


.family-user form {
  margin: 0;
}


.family-dashboard-page {
  position: relative;
  z-index: 3;

  width: min(
    1380px,
    calc(100% - 36px)
  );

  margin: 0 auto;
  padding: 42px 0 70px;
}


.family-welcome h1 {
  margin: 8px 0 4px;
  font-size: clamp(
    1.9rem,
    4vw,
    3.2rem
  );
}


.family-welcome p {
  margin: 0;
  color: rgba(180,214,231,.61);
}


.family-summary-grid {
  display: grid;
  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap: 15px;
  margin: 30px 0;
}


.family-summary-grid article {
  padding: 20px;

  border-radius: 18px;

  border:
    1px solid rgba(89,197,239,.14);

  background:
    linear-gradient(
      145deg,
      rgba(8,35,62,.71),
      rgba(4,21,40,.55)
    );

  backdrop-filter: blur(20px);
}


.family-summary-grid article span,
.family-summary-grid article small {
  display: block;
  color: rgba(171,209,228,.56);
}


.family-summary-grid article strong {
  display: block;
  margin: 7px 0 3px;
  font-size: 2rem;
  color: #eefbff;
}


.family-athletes-card {
  border-radius: 22px;

  border:
    1px solid rgba(89,197,239,.14);

  background:
    linear-gradient(
      145deg,
      rgba(8,35,62,.72),
      rgba(4,21,40,.56)
    );

  backdrop-filter: blur(21px);

  overflow: hidden;
}


.family-card-heading {
  padding: 21px;

  border-bottom:
    1px solid rgba(98,188,226,.09);
}


.family-card-heading h2 {
  margin: 5px 0 0;
}


.family-athlete-grid {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap: 14px;
  padding: 20px;
}


.family-athlete {
  display: flex;
  align-items: center;
  gap: 16px;

  padding: 17px;

  border-radius: 16px;

  border:
    1px solid rgba(86,191,233,.12);

  background:
    linear-gradient(
      135deg,
      rgba(11,60,91,.17),
      rgba(5,31,50,.05)
    );
}


.family-athlete-avatar {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;

  display: grid;
  place-items: center;

  overflow: hidden;

  border-radius: 50%;

  border:
    1px solid rgba(78,214,255,.25);

  background:
    linear-gradient(
      135deg,
      rgba(15,134,205,.28),
      rgba(20,206,226,.10)
    );

  color: #b9f1ff;
  font-weight: 900;
}


.family-athlete-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.family-athlete-info {
  min-width: 0;
}


.family-athlete-info > strong {
  display: block;
  color: #f0fbff;
  font-size: 1rem;
}


.family-athlete-info > small,
.family-athlete-info p {
  color: rgba(170,209,228,.55);
}


.family-athlete-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}


.family-athlete-tags span {
  padding: 5px 8px;

  border-radius: 999px;

  color: #8ee8ff;
  font-size: .67rem;

  border:
    1px solid rgba(75,211,252,.15);

  background:
    linear-gradient(
      135deg,
      rgba(15,119,181,.17),
      rgba(10,74,111,.05)
    );
}


.family-empty {
  padding: 50px 20px;
  text-align: center;
  color: rgba(179,214,232,.59);
}


@media (max-width: 850px) {

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

  .family-athlete-grid {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 560px) {

  .family-topbar {
    align-items: flex-start;
    gap: 15px;
    padding: 14px;
  }

  .family-user {
    align-items: flex-end;
    flex-direction: column;
    gap: 7px;
  }

  .family-user > div {
    display: none;
  }

  .family-summary-grid {
    grid-template-columns: 1fr 1fr;
  }

  .family-copy-row {
    flex-direction: column;
  }

  .family-copy-row button {
    min-height: 45px;
  }

  .family-activate-card {
    padding: 28px 18px;
  }

}



/* =========================================================
   FAMILY DASHBOARD V2
========================================================= */

.family-v2-body {
  min-height: 100vh;
  margin: 0;
  color: #eefaff;

  background:
    linear-gradient(
      rgba(2,12,30,.61),
      rgba(2,13,31,.78)
    ),
    url('/img/login-futsal.png')
    center center / cover
    fixed no-repeat;
}


.family-v2-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 12% 5%,
      rgba(32,199,255,.14),
      transparent 32%
    ),
    radial-gradient(
      circle at 88% 18%,
      rgba(51,108,255,.12),
      transparent 34%
    );
}


.family-v2-glow {
  position: fixed;
  z-index: 0;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .14;
  pointer-events: none;
}


.family-v2-glow-one {
  top: 10%;
  left: -190px;
  background: #18caff;
}


.family-v2-glow-two {
  right: -190px;
  bottom: 0;
  background: #3268ff;
}


/* TOPBAR */

.family-v2-topbar {
  position: sticky;
  top: 14px;
  z-index: 50;

  width: min(
    1480px,
    calc(100% - 30px)
  );

  min-height: 76px;
  margin: 14px auto 0;
  padding: 0 18px;
  box-sizing: border-box;

  display: grid;
  grid-template-columns:
    minmax(220px,auto)
    1fr
    auto;

  gap: 20px;
  align-items: center;

  border:
    1px solid rgba(106,210,255,.15);

  border-radius: 21px;

  background:
    linear-gradient(
      135deg,
      rgba(8,31,55,.82),
      rgba(4,19,38,.64)
    );

  backdrop-filter:
    blur(24px)
    saturate(145%);

  box-shadow:
    0 18px 60px rgba(0,0,0,.20),
    inset 0 1px rgba(255,255,255,.035);
}


.family-v2-brand {
  display: flex;
  gap: 11px;
  align-items: center;
  min-width: 0;

  color: white;
  text-decoration: none;
}


.family-v2-brand-logo {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;

  display: grid;
  place-items: center;

  border-radius: 14px;

  border:
    1px solid rgba(87,212,255,.18);

  background:
    linear-gradient(
      145deg,
      rgba(23,126,190,.19),
      rgba(7,68,105,.05)
    );
}


.family-v2-brand-logo img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}


.family-v2-brand-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}


.family-v2-brand-copy strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .91rem;
}


.family-v2-brand-copy span {
  color: rgba(159,206,228,.54);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}


.family-v2-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
}


.family-v2-nav a {
  position: relative;

  min-height: 46px;
  padding: 0 10px;

  display: inline-flex;
  gap: 6px;
  align-items: center;

  border:
    1px solid transparent;

  border-radius: 12px;

  color: rgba(190,220,235,.66);
  text-decoration: none;
  font-size: .70rem;
  font-weight: 750;

  transition:
    .2s ease;
}


.family-v2-nav a svg {
  width: 17px;
  height: 17px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.family-v2-nav a:hover,
.family-v2-nav a.active {
  color: #9aeaff;

  border-color:
    rgba(61,211,255,.13);

  background:
    linear-gradient(
      135deg,
      rgba(17,134,205,.17),
      rgba(8,83,132,.05)
    );

  box-shadow:
    inset 0 1px
    rgba(255,255,255,.025);
}


.family-v2-profile {
  display: flex;
  gap: 10px;
  align-items: center;
}


.family-v2-profile-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  border:
    1px solid rgba(77,219,255,.24);

  background:
    linear-gradient(
      135deg,
      rgba(19,139,213,.31),
      rgba(27,205,228,.10)
    );

  color: #b7f2ff;
  font-size: .71rem;
  font-weight: 900;
}


.family-v2-profile-text {
  display: grid;
  gap: 1px;
  max-width: 135px;
}


.family-v2-profile-text strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .75rem;
}


.family-v2-profile-text span {
  color: rgba(174,211,229,.53);
  font-size: .63rem;
}


.family-v2-profile form {
  margin: 0;
}


.family-v2-logout {
  width: 37px;
  height: 37px;
  padding: 0;

  display: grid;
  place-items: center;

  border-radius: 11px;

  border:
    1px solid rgba(113,206,241,.13);

  background:
    linear-gradient(
      135deg,
      rgba(27,91,128,.16),
      rgba(8,50,80,.04)
    );

  color: rgba(184,222,239,.67);
  cursor: pointer;
}


.family-v2-logout svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.family-v2-menu-toggle {
  display: none;
}


/* MAIN */

.family-v2-main {
  position: relative;
  z-index: 3;

  width: min(
    1420px,
    calc(100% - 36px)
  );

  margin: 0 auto;
  padding: 48px 0 60px;
}


.family-v2-heading {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: flex-end;
  margin-bottom: 25px;
}


.family-v2-eyebrow {
  color: rgba(82,217,255,.68);
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .17em;
}


.family-v2-heading h1 {
  max-width: 790px;
  margin: 7px 0 8px;

  color: #f1fbff;

  font-size:
    clamp(2rem,4vw,3.45rem);

  line-height: 1.01;
  letter-spacing: -.04em;
}


.family-v2-heading h1 span {
  color: #8be9ff;
}


.family-v2-heading p {
  max-width: 690px;
  margin: 0;

  color: rgba(180,216,233,.60);
  line-height: 1.55;
}


.family-v2-player-switch {
  min-width: 255px;
  display: grid;
  gap: 7px;
}


.family-v2-player-switch > span {
  color: rgba(175,213,230,.56);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .09em;
}


.family-v2-player-switch select {
  min-height: 45px;
  padding: 0 12px;

  border-radius: 12px;

  border:
    1px solid rgba(82,202,244,.16);

  outline: none;

  background:
    linear-gradient(
      135deg,
      rgba(8,37,64,.90),
      rgba(5,25,46,.84)
    );

  color: #e9faff;
}


/* ATHLETE HERO */

.family-v2-athlete-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;

  padding: 24px;

  border-radius: 23px;

  border:
    1px solid rgba(93,205,247,.16);

  background:
    linear-gradient(
      120deg,
      rgba(9,48,81,.79),
      rgba(5,25,46,.62)
    );

  backdrop-filter: blur(22px);

  box-shadow:
    0 24px 75px rgba(0,0,0,.19),
    inset 0 1px rgba(255,255,255,.03);
}


.family-v2-athlete-profile {
  display: flex;
  align-items: center;
  gap: 19px;
}


.family-v2-athlete-photo {
  position: relative;

  width: 88px;
  height: 88px;
  flex: 0 0 88px;

  display: grid;
  place-items: center;

  overflow: visible;

  border-radius: 50%;

  border:
    1px solid rgba(80,217,255,.31);

  background:
    linear-gradient(
      135deg,
      rgba(20,134,207,.35),
      rgba(22,200,229,.11)
    );

  box-shadow:
    0 0 35px
    rgba(37,191,238,.11);

  color: #c2f5ff;
  font-size: 1.3rem;
  font-weight: 900;
}


.family-v2-athlete-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}


.family-v2-online-dot {
  position: absolute;
  right: 4px;
  bottom: 6px;

  width: 12px;
  height: 12px;

  border-radius: 50%;

  border:
    2px solid #082039;

  background:
    #51e9bc;

  box-shadow:
    0 0 12px
    rgba(81,233,188,.55);
}


.family-v2-athlete-copy h2 {
  margin: 5px 0 2px;
  font-size: 1.55rem;
}


.family-v2-nickname {
  margin: 0 0 8px;
  color: rgba(175,214,231,.58);
}


.family-v2-athlete-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}


.family-v2-athlete-tags span {
  padding: 6px 9px;

  border-radius: 999px;

  border:
    1px solid rgba(73,208,251,.14);

  background:
    linear-gradient(
      135deg,
      rgba(13,120,187,.17),
      rgba(8,73,110,.05)
    );

  color: #98eaff;
  font-size: .68rem;
}


.family-v2-athlete-status {
  min-width: 220px;

  display: grid;
  justify-items: end;
  gap: 4px;

  text-align: right;
}


.family-v2-athlete-status > span {
  color: rgba(165,204,224,.50);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .14em;
}


.family-v2-athlete-status strong {
  font-size: 1.15rem;
}


.family-v2-athlete-status strong.is-active {
  color: #7bf0c8;
}


.family-v2-athlete-status small {
  color: rgba(171,211,229,.53);
}


/* FEATURE CARDS */

.family-v2-highlight-grid {
  display: grid;
  grid-template-columns:
    1.45fr 1fr 1fr;

  gap: 14px;
  margin-top: 15px;
}


.family-v2-feature-card,
.family-v2-large-card,
.family-v2-bottom-card {
  position: relative;
  overflow: hidden;

  border-radius: 20px;

  border:
    1px solid rgba(91,198,240,.13);

  background:
    linear-gradient(
      145deg,
      rgba(7,35,62,.76),
      rgba(4,21,40,.57)
    );

  backdrop-filter: blur(20px);

  box-shadow:
    0 18px 55px rgba(0,0,0,.14),
    inset 0 1px rgba(255,255,255,.025);
}


.family-v2-feature-card {
  min-height: 190px;
  padding: 20px;
  box-sizing: border-box;
}


.family-v2-feature-card::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -70px;
  bottom: -80px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(40,196,244,.10),
      transparent 68%
    );
}


.family-v2-card-top {
  position: relative;
  z-index: 2;

  display: flex;
  gap: 9px;
  align-items: center;
}


.family-v2-card-icon,
.family-v2-card-heading-icon {
  display: grid;
  place-items: center;

  border:
    1px solid rgba(73,211,255,.15);

  background:
    linear-gradient(
      135deg,
      rgba(20,141,212,.20),
      rgba(9,89,135,.05)
    );

  color: #83e6ff;
}


.family-v2-card-icon {
  width: 35px;
  height: 35px;
  border-radius: 10px;
}


.family-v2-card-icon svg,
.family-v2-card-heading-icon svg {
  width: 18px;
  height: 18px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.family-v2-card-label {
  color: rgba(104,219,250,.66);
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .14em;
}


.family-v2-no-data {
  position: relative;
  z-index: 2;

  min-height: 120px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  gap: 7px;
}


.family-v2-no-data strong {
  font-size: 1.08rem;
}


.family-v2-no-data span {
  max-width: 350px;
  color: rgba(170,211,229,.55);
  font-size: .78rem;
  line-height: 1.45;
}


.family-v2-ranking-placeholder {
  position: relative;
  z-index: 2;

  min-height: 118px;

  display: flex;
  gap: 17px;
  align-items: center;
}


.family-v2-rank-number {
  min-width: 65px;

  color: #84e8ff;
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
}


.family-v2-ranking-placeholder div {
  display: grid;
  gap: 5px;
}


.family-v2-ranking-placeholder small {
  color: rgba(170,210,228,.55);
  line-height: 1.4;
}


/* STATISTICS */

.family-v2-section {
  margin-top: 26px;
}


.family-v2-section-heading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-end;
  margin-bottom: 13px;
}


.family-v2-section-heading h2 {
  margin: 5px 0 0;
}


.family-v2-coming {
  color: rgba(164,206,225,.48);
  font-size: .70rem;
}


.family-v2-stats-grid {
  display: grid;
  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap: 13px;
}


.family-v2-stats-grid article {
  padding: 18px;

  display: flex;
  gap: 13px;
  align-items: center;

  border-radius: 17px;

  border:
    1px solid rgba(92,199,240,.12);

  background:
    linear-gradient(
      145deg,
      rgba(7,34,60,.73),
      rgba(4,21,40,.55)
    );

  backdrop-filter: blur(19px);
}


.family-v2-stat-icon {
  width: 43px;
  height: 43px;
  flex: 0 0 43px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  border:
    1px solid rgba(74,210,251,.14);

  background:
    linear-gradient(
      135deg,
      rgba(18,131,201,.19),
      rgba(8,79,119,.05)
    );
}


.family-v2-stats-grid article > div:last-child {
  display: grid;
  gap: 2px;
}


.family-v2-stats-grid span {
  color: rgba(166,207,225,.53);
  font-size: .70rem;
}


.family-v2-stats-grid strong {
  font-size: 1.45rem;
}


/* CONTENT */

.family-v2-content-grid,
.family-v2-bottom-grid {
  display: grid;
  grid-template-columns:
    1.25fr 1fr;

  gap: 14px;
  margin-top: 24px;
}


.family-v2-large-card,
.family-v2-bottom-card {
  min-height: 310px;
}


.family-v2-card-heading {
  padding: 19px 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom:
    1px solid rgba(97,192,230,.08);
}


.family-v2-card-heading h2 {
  margin: 4px 0 0;
}


.family-v2-card-heading-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
}


.family-v2-empty-state {
  min-height: 220px;

  padding: 25px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
}


.family-v2-empty-state.small {
  min-height: 180px;
}


.family-v2-empty-symbol {
  width: 50px;
  height: 50px;
  margin-bottom: 12px;

  display: grid;
  place-items: center;

  border-radius: 15px;

  border:
    1px solid rgba(78,211,252,.14);

  background:
    linear-gradient(
      135deg,
      rgba(17,130,199,.18),
      rgba(7,77,118,.04)
    );
}


.family-v2-empty-state p {
  max-width: 330px;
  margin: 7px 0 0;

  color: rgba(168,210,228,.53);
  line-height: 1.45;
}


.family-v2-info-list {
  display: grid;
  padding: 8px 20px 20px;
}


.family-v2-info-row {
  min-height: 59px;

  display: flex;
  gap: 12px;
  align-items: center;

  border-bottom:
    1px solid rgba(93,188,226,.07);
}


.family-v2-info-row:last-child {
  border-bottom: 0;
}


.family-v2-info-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;

  border-radius: 50%;

  background: #62ddff;

  box-shadow:
    0 0 12px rgba(98,221,255,.43);
}


.family-v2-info-row > div:last-child {
  display: grid;
  gap: 2px;
}


.family-v2-info-row strong {
  font-size: .78rem;
}


.family-v2-info-row span {
  color: rgba(168,209,227,.54);
  font-size: .72rem;
}


/* FINANCIAL */

.family-v2-financial-placeholder {
  min-height: 195px;
  padding: 24px;

  display: flex;
  gap: 16px;
  align-items: center;
}


.family-v2-financial-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;

  display: grid;
  place-items: center;

  border-radius: 15px;

  border:
    1px solid rgba(79,210,251,.15);

  background:
    linear-gradient(
      135deg,
      rgba(18,130,201,.19),
      rgba(8,79,119,.05)
    );

  color: #85e8ff;
}


.family-v2-financial-icon svg {
  width: 25px;
  height: 25px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.family-v2-financial-placeholder > div:last-child {
  display: grid;
  gap: 7px;
}


.family-v2-financial-placeholder span {
  max-width: 390px;
  color: rgba(169,210,228,.54);
  font-size: .75rem;
  line-height: 1.5;
}


/* EMPTY */

.family-v2-empty-main {
  min-height: 420px;

  display: grid;
  place-items: center;
  align-content: center;

  text-align: center;

  border-radius: 22px;

  border:
    1px solid rgba(88,197,239,.14);

  background:
    linear-gradient(
      145deg,
      rgba(7,34,60,.72),
      rgba(4,21,40,.54)
    );
}


.family-v2-empty-icon {
  width: 60px;
  height: 60px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  border:
    1px solid rgba(79,211,252,.16);

  color: #8ce9ff;
  font-size: 1.5rem;
}


/* FOOTER */

.family-v2-footer {
  position: relative;
  z-index: 3;

  width: min(
    1420px,
    calc(100% - 36px)
  );

  margin: 0 auto;
  padding: 0 0 35px;

  display: flex;
  justify-content: space-between;

  color: rgba(161,202,220,.38);
  font-size: .67rem;
}


/* RESPONSIVE */

@media (max-width: 1240px) {

  .family-v2-topbar {
    grid-template-columns:
      minmax(190px,auto)
      1fr
      auto;
  }

  .family-v2-nav a {
    padding: 0 7px;
  }

  .family-v2-nav a span {
    display: none;
  }

}


@media (max-width: 920px) {

  .family-v2-topbar {
    grid-template-columns:
      1fr auto auto;
  }

  .family-v2-menu-toggle {
    width: 39px;
    height: 39px;
    padding: 9px;

    display: grid;
    align-content: center;
    gap: 4px;

    border-radius: 11px;

    border:
      1px solid rgba(79,207,248,.14);

    background:
      linear-gradient(
        135deg,
        rgba(18,108,166,.17),
        rgba(8,66,103,.05)
      );
  }

  .family-v2-menu-toggle span {
    width: 100%;
    height: 2px;
    border-radius: 10px;
    background: rgba(182,230,247,.72);
  }

  .family-v2-nav {
    position: absolute;
    top: calc(100% + 9px);
    left: 0;
    right: 0;

    padding: 10px;

    display: none;
    flex-direction: column;
    align-items: stretch;

    border-radius: 17px;

    border:
      1px solid rgba(88,199,241,.14);

    background:
      linear-gradient(
        145deg,
        rgba(6,29,52,.97),
        rgba(4,19,37,.96)
      );

    backdrop-filter: blur(22px);
  }

  .family-v2-nav.is-open {
    display: flex;
  }

  .family-v2-nav a {
    justify-content: flex-start;
  }

  .family-v2-nav a span {
    display: inline;
  }

  .family-v2-highlight-grid {
    grid-template-columns:
      1fr 1fr;
  }

  .family-v2-next-match {
    grid-column: 1 / -1;
  }

  .family-v2-content-grid,
  .family-v2-bottom-grid {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 700px) {

  .family-v2-main {
    width:
      calc(100% - 24px);

    padding-top: 32px;
  }

  .family-v2-topbar {
    width:
      calc(100% - 20px);

    padding: 0 12px;
  }

  .family-v2-brand-copy {
    display: none;
  }

  .family-v2-profile-text {
    display: none;
  }

  .family-v2-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .family-v2-player-switch {
    min-width: 0;
  }

  .family-v2-athlete-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .family-v2-athlete-status {
    min-width: 0;
    justify-items: start;
    text-align: left;
  }

  .family-v2-highlight-grid {
    grid-template-columns: 1fr;
  }

  .family-v2-next-match {
    grid-column: auto;
  }

  .family-v2-stats-grid {
    grid-template-columns:
      1fr 1fr;
  }

}


@media (max-width: 470px) {

  .family-v2-athlete-profile {
    align-items: flex-start;
  }

  .family-v2-athlete-photo {
    width: 70px;
    height: 70px;
    flex-basis: 70px;
  }

  .family-v2-athlete-copy h2 {
    font-size: 1.22rem;
  }

  .family-v2-stats-grid {
    grid-template-columns: 1fr;
  }

  .family-v2-footer {
    width:
      calc(100% - 24px);

    flex-direction: column;
    gap: 4px;
  }

}



/* =========================================================
   HERO BALL - PORTAL DA FAMÍLIA
========================================================= */

.family-v2-heading {
  position: relative;
  min-height: 205px;
}


.family-v2-heading-copy {
  position: relative;
  z-index: 4;
  max-width: 790px;
}


.family-v2-hero-ball {
  position: absolute;
  z-index: 2;

  right: 285px;
  top: -25px;

  width: 210px;
  height: 210px;

  display: grid;
  place-items: center;

  pointer-events: none;
}


.family-v2-hero-ball img {
  position: relative;
  z-index: 4;

  width: 175px;
  height: 175px;

  object-fit: contain;

  filter:
    drop-shadow(
      0 15px 22px
      rgba(0,0,0,.42)
    )
    drop-shadow(
      0 0 20px
      rgba(47,202,255,.30)
    );

  animation:
    familyBallFloat
    4.8s ease-in-out
    infinite;
}


.family-v2-ball-ring {
  position: absolute;
  z-index: 1;

  border-radius: 50%;

  border:
    1px solid
    rgba(77,216,255,.15);

  box-shadow:
    0 0 25px
    rgba(46,190,241,.08);
}


.family-v2-ball-ring.ring-one {
  width: 175px;
  height: 175px;

  animation:
    familyRingPulse
    4s ease-in-out
    infinite;
}


.family-v2-ball-ring.ring-two {
  width: 205px;
  height: 205px;

  opacity: .45;

  animation:
    familyRingPulse
    4s ease-in-out
    1s infinite;
}


.family-v2-ball-shadow {
  position: absolute;
  z-index: 0;

  bottom: 8px;

  width: 105px;
  height: 18px;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,
      rgba(0,0,0,.42),
      transparent 70%
    );

  filter: blur(5px);

  animation:
    familyBallShadow
    4.8s ease-in-out
    infinite;
}


@keyframes familyBallFloat {

  0%,
  100% {
    transform:
      translateY(0)
      rotate(-2deg);
  }

  50% {
    transform:
      translateY(-13px)
      rotate(2deg);
  }

}


@keyframes familyBallShadow {

  0%,
  100% {
    transform: scale(1);
    opacity: .65;
  }

  50% {
    transform: scale(.82);
    opacity: .35;
  }

}


@keyframes familyRingPulse {

  0%,
  100% {
    transform: scale(.96);
    opacity: .28;
  }

  50% {
    transform: scale(1.06);
    opacity: .62;
  }

}


@media (max-width: 1100px) {

  .family-v2-hero-ball {
    right: 20px;
    opacity: .72;
  }

  .family-v2-heading-copy {
    max-width: 70%;
  }

}


@media (max-width: 700px) {

  .family-v2-heading {
    min-height: auto;
  }

  .family-v2-heading-copy {
    max-width: 100%;
  }

  .family-v2-hero-ball {
    position: relative;

    top: auto;
    right: auto;

    width: 150px;
    height: 150px;

    margin:
      -10px auto
      -5px;
  }

  .family-v2-hero-ball img {
    width: 125px;
    height: 125px;
  }

  .family-v2-ball-ring.ring-one {
    width: 130px;
    height: 130px;
  }

  .family-v2-ball-ring.ring-two {
    width: 150px;
    height: 150px;
  }

}



/* =========================================================
   MURAL DE AVISOS V1
========================================================= */

.notice-admin-body {
  min-height: 100vh;

  background:
    linear-gradient(
      rgba(2,12,30,.65),
      rgba(2,13,31,.78)
    ),
    url('/img/login-futsal.png')
    center / cover fixed no-repeat;
}


.notice-admin-main,
.notice-form-main {
  position: relative;
  z-index: 2;

  width: min(
    1380px,
    calc(100% - 36px)
  );

  margin: 0 auto;
  padding: 48px 0 70px;
}


.notice-admin-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 25px;

  margin-bottom: 24px;
}


.notice-admin-heading h1,
.notice-form-heading h1 {
  margin: 5px 0 5px;
  color: #f1fbff;
}


.notice-admin-heading p,
.notice-form-heading p {
  margin: 0;

  color:
    rgba(180,216,233,.57);
}


.notice-admin-eyebrow {
  color:
    rgba(74,216,255,.72);

  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .16em;
}


.notice-admin-primary,
.notice-form-actions button {
  min-height: 44px;
  padding: 0 17px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  border:
    1px solid
    rgba(79,218,255,.22);

  background:
    linear-gradient(
      135deg,
      rgba(24,148,218,.28),
      rgba(15,90,153,.10)
    );

  color: #bff4ff;
  text-decoration: none;

  cursor: pointer;
}


.notice-admin-list {
  display: grid;
  gap: 13px;
}


.notice-admin-card {
  padding: 20px;

  border-radius: 19px;

  border:
    1px solid
    rgba(91,201,243,.13);

  background:
    linear-gradient(
      145deg,
      rgba(7,35,62,.78),
      rgba(4,21,40,.60)
    );

  backdrop-filter: blur(20px);
}


.notice-admin-card.priority-important {
  border-color:
    rgba(255,196,89,.22);
}


.notice-admin-card.priority-urgent {
  border-color:
    rgba(255,102,123,.25);
}


.notice-admin-card.is-disabled {
  opacity: .52;
}


.notice-admin-card-top {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}


.notice-admin-card h2 {
  margin: 8px 0 0;
}


.notice-admin-priority,
.family-notice-priority {
  font-size: .61rem;
  font-weight: 900;
  letter-spacing: .13em;
}


.notice-admin-priority.priority-normal,
.family-notice-priority.priority-normal {
  color: #72ddff;
}


.notice-admin-priority.priority-important,
.family-notice-priority.priority-important {
  color: #ffd178;
}


.notice-admin-priority.priority-urgent,
.family-notice-priority.priority-urgent {
  color: #ff8ea0;
}


.notice-admin-status {
  height: fit-content;

  padding: 5px 9px;

  border-radius: 999px;

  font-size: .65rem;
}


.notice-admin-status.active {
  color: #80f0c7;

  border:
    1px solid
    rgba(82,232,187,.18);
}


.notice-admin-status.inactive {
  color:
    rgba(193,211,222,.56);

  border:
    1px solid
    rgba(193,211,222,.12);
}


.notice-admin-message {
  max-width: 950px;

  color:
    rgba(188,218,232,.65);

  line-height: 1.55;
}


.notice-admin-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  margin-top: 16px;
}


.notice-admin-meta span {
  padding: 6px 9px;

  border-radius: 999px;

  border:
    1px solid
    rgba(80,201,242,.11);

  color:
    rgba(173,215,232,.59);

  font-size: .67rem;
}


.notice-admin-actions {
  display: flex;
  gap: 8px;

  margin-top: 17px;
}


.notice-admin-actions a,
.notice-admin-actions button,
.notice-form-actions a {
  min-height: 38px;
  padding: 0 12px;

  display: inline-flex;
  align-items: center;

  border-radius: 10px;

  border:
    1px solid
    rgba(81,204,244,.13);

  background:
    linear-gradient(
      135deg,
      rgba(18,113,174,.15),
      rgba(7,67,104,.04)
    );

  color: #9feaff;
  text-decoration: none;
  cursor: pointer;
}


.notice-admin-actions form {
  margin: 0;
}


.notice-admin-empty {
  min-height: 360px;

  display: grid;
  place-items: center;
  align-content: center;

  text-align: center;

  border-radius: 20px;

  border:
    1px solid
    rgba(89,201,242,.13);

  background:
    linear-gradient(
      145deg,
      rgba(7,34,60,.72),
      rgba(4,21,40,.55)
    );
}


.notice-admin-empty > div {
  font-size: 2rem;
}


.notice-admin-empty h2 {
  margin-bottom: 4px;
}


.notice-admin-empty p {
  margin: 0;

  color:
    rgba(176,213,230,.52);
}


/* FORM */

.notice-form-heading {
  margin-bottom: 22px;
}


.notice-form-card {
  max-width: 920px;

  padding: 23px;

  display: grid;
  gap: 18px;

  border-radius: 21px;

  border:
    1px solid
    rgba(92,203,244,.14);

  background:
    linear-gradient(
      145deg,
      rgba(7,35,62,.79),
      rgba(4,21,40,.61)
    );

  backdrop-filter: blur(22px);
}


.notice-form-card label {
  display: grid;
  gap: 7px;
}


.notice-form-card label > span {
  font-size: .72rem;
  font-weight: 800;
  color:
    rgba(194,226,239,.74);
}


.notice-form-card input,
.notice-form-card select,
.notice-form-card textarea {
  width: 100%;
  box-sizing: border-box;

  border:
    1px solid
    rgba(81,199,241,.14);

  border-radius: 11px;

  outline: none;

  background:
    linear-gradient(
      135deg,
      rgba(7,37,64,.88),
      rgba(5,25,45,.81)
    );

  color: #edfaff;
}


.notice-form-card input,
.notice-form-card select {
  min-height: 44px;
  padding: 0 12px;
}


.notice-form-card textarea {
  padding: 12px;
  resize: vertical;
}


.notice-form-card small {
  color:
    rgba(167,208,226,.46);
}


.notice-form-grid {
  display: grid;
  grid-template-columns:
    1fr 1fr;
  gap: 14px;
}


.notice-form-preview {
  padding: 14px;

  display: flex;
  gap: 12px;

  border-radius: 13px;

  border:
    1px solid
    rgba(80,202,242,.10);

  background:
    linear-gradient(
      135deg,
      rgba(13,106,163,.12),
      rgba(6,64,101,.03)
    );
}


.notice-form-preview > div:last-child {
  display: grid;
  gap: 3px;
}


.notice-form-preview span {
  color:
    rgba(170,211,228,.52);

  font-size: .72rem;
}


.notice-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}


/* FAMILY DASHBOARD NOTICE */

.family-v2-notices {
  display: grid;
  gap: 8px;
  padding: 15px;
}


.family-v2-notice-item {
  padding: 13px;

  display: grid;
  grid-template-columns:
    auto 1fr;

  gap: 12px;

  border-radius: 13px;

  border:
    1px solid
    rgba(74,203,244,.11);

  background:
    linear-gradient(
      135deg,
      rgba(13,96,151,.11),
      rgba(5,60,96,.03)
    );

  color: inherit;
  text-decoration: none;

  transition:
    transform .18s ease,
    border-color .18s ease;
}


.family-v2-notice-item:hover {
  transform: translateY(-2px);

  border-color:
    rgba(72,213,255,.25);
}


.family-v2-notice-item.priority-important {
  border-color:
    rgba(255,195,87,.17);
}


.family-v2-notice-item.priority-urgent {
  border-color:
    rgba(255,104,125,.21);
}


.family-v2-notice-priority {
  min-width: 72px;

  color: #6ee2ff;

  font-size: .57rem;
  font-weight: 900;
  letter-spacing: .09em;
}


.family-v2-notice-item.priority-important
.family-v2-notice-priority {
  color: #ffd075;
}


.family-v2-notice-item.priority-urgent
.family-v2-notice-priority {
  color: #ff8c9f;
}


.family-v2-notice-copy {
  display: grid;
  gap: 4px;
}


.family-v2-notice-copy span {
  color:
    rgba(180,215,231,.58);

  font-size: .72rem;
  line-height: 1.4;
}


.family-v2-notice-copy small {
  color:
    rgba(86,214,249,.56);

  font-size: .63rem;
}


/* FAMILY FULL NOTICE */

.family-notice-main {
  position: relative;
  z-index: 4;

  width: min(
    900px,
    calc(100% - 28px)
  );

  margin: 0 auto;
  padding: 55px 0;
}


.family-notice-back {
  display: inline-flex;
  margin-bottom: 18px;

  color: #91e9ff;
  text-decoration: none;
}


.family-notice-card {
  overflow: hidden;

  border-radius: 23px;

  border:
    1px solid
    rgba(82,205,245,.16);

  background:
    linear-gradient(
      145deg,
      rgba(7,37,65,.84),
      rgba(4,21,40,.69)
    );

  backdrop-filter: blur(24px);
}


.family-notice-card.priority-important {
  border-color:
    rgba(255,195,87,.21);
}


.family-notice-card.priority-urgent {
  border-color:
    rgba(255,101,123,.25);
}


.family-notice-card header {
  padding: 26px;

  border-bottom:
    1px solid
    rgba(89,192,231,.08);
}


.family-notice-card h1 {
  margin: 9px 0 12px;

  font-size:
    clamp(1.8rem,4vw,2.7rem);
}


.family-notice-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}


.family-notice-meta span {
  padding: 6px 9px;

  border-radius: 999px;

  border:
    1px solid
    rgba(87,203,243,.11);

  color:
    rgba(176,215,232,.56);

  font-size: .67rem;
}


.family-notice-message {
  padding: 28px;

  white-space: pre-wrap;

  color:
    rgba(222,240,248,.82);

  font-size: .98rem;
  line-height: 1.75;
}


@media (max-width: 680px) {

  .notice-admin-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .notice-admin-primary {
    width: fit-content;
  }

  .notice-form-grid {
    grid-template-columns: 1fr;
  }

  .family-v2-notice-item {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   MURAL FAMILIA - MENSAGEM COMPLETA
========================================================= */

.family-v2-notice-copy span {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;

  display: block;

  max-height: none;
  overflow: visible;

  line-height: 1.55;
}

.family-v2-notice-item {
  align-items: flex-start;
}



/* =========================================================
   PORTAL FAMILIA - ABRIR COMUNICADO
========================================================= */

.family-v2-notice-category {
  display: block;

  margin-top: 5px;

  color:
    rgba(166,210,229,.52);

  font-size: .64rem;
}


.family-v2-notice-open {
  width: fit-content;

  margin-top: 9px;
  padding: 7px 11px;

  display: inline-flex;
  align-items: center;
  gap: 7px;

  border-radius: 9px;

  border:
    1px solid
    rgba(72,215,255,.20);

  background:
    linear-gradient(
      135deg,
      rgba(20,149,215,.17),
      rgba(10,79,130,.05)
    );

  color: #8deaff;

  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .02em;

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}


.family-v2-notice-item:hover
.family-v2-notice-open {

  transform: translateX(2px);

  border-color:
    rgba(74,219,255,.39);

  box-shadow:
    0 0 18px
    rgba(26,183,238,.10);
}


.family-v2-notice-open > span {
  font-size: .9rem;
}



/* =========================================================
   PORTAL DA FAMILIA - MURAL DEFINITIVO
========================================================= */

.family-v2-notices {
  display: grid;
  gap: 12px;

  padding: 15px;
}


.family-mural-item {
  position: relative;

  padding: 17px;

  overflow: hidden;

  border-radius: 16px;

  border:
    1px solid
    rgba(77,205,246,.14);

  background:
    linear-gradient(
      145deg,
      rgba(10,65,103,.24),
      rgba(5,35,62,.10)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.025);
}


.family-mural-item.priority-important {
  border-color:
    rgba(255,196,86,.22);
}


.family-mural-item.priority-urgent {
  border-color:
    rgba(255,91,116,.27);
}


.family-mural-item::before {
  content: "";

  position: absolute;

  left: 0;
  top: 15px;
  bottom: 15px;

  width: 2px;

  border-radius: 5px;

  background:
    linear-gradient(
      #45ddff,
      rgba(69,221,255,.10)
    );
}


.family-mural-item.priority-important::before {
  background:
    linear-gradient(
      #ffd166,
      rgba(255,209,102,.10)
    );
}


.family-mural-item.priority-urgent::before {
  background:
    linear-gradient(
      #ff6f88,
      rgba(255,111,136,.10)
    );
}


.family-mural-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;

  gap: 8px;

  margin-bottom: 10px;
}


.family-mural-badge {
  color: #72e4ff;

  font-size: .58rem;
  font-weight: 900;

  letter-spacing: .12em;
}


.family-mural-badge.priority-important {
  color: #ffd477;
}


.family-mural-badge.priority-urgent {
  color: #ff91a3;
}


.family-mural-category {
  padding: 4px 8px;

  border-radius: 999px;

  border:
    1px solid
    rgba(90,202,242,.11);

  color:
    rgba(170,214,231,.58);

  font-size: .60rem;
}


.family-mural-title {
  margin:
    0 0 9px;

  color: #edfaff;

  font-size: .95rem;
  line-height: 1.3;
}


.family-mural-message {
  white-space: pre-wrap;
  overflow-wrap: anywhere;

  color:
    rgba(194,223,235,.68);

  font-size: .76rem;

  line-height: 1.6;
}


.family-mural-footer {
  margin-top: 15px;
  padding-top: 12px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  border-top:
    1px solid
    rgba(80,194,235,.07);
}


.family-mural-date {
  color:
    rgba(154,202,222,.42);

  font-size: .62rem;
}


.family-mural-open {
  padding:
    7px 11px;

  display: inline-flex;
  align-items: center;

  gap: 8px;

  border-radius: 9px;

  border:
    1px solid
    rgba(66,215,255,.21);

  background:
    linear-gradient(
      135deg,
      rgba(19,148,214,.18),
      rgba(7,78,126,.05)
    );

  color: #91ebff;

  font-size: .67rem;
  font-weight: 800;

  text-decoration: none;

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}


.family-mural-open:hover {
  transform:
    translateX(2px);

  border-color:
    rgba(69,220,255,.42);

  box-shadow:
    0 0 18px
    rgba(29,190,240,.10);
}


.family-mural-open span {
  font-size: .9rem;
}


@media (
  max-width: 600px
) {

  .family-mural-footer {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

}



/* =========================================================
   JOGOS V1
========================================================= */

.match-admin-body {
  min-height: 100vh;

  background:
    linear-gradient(
      rgba(2,12,30,.64),
      rgba(2,13,31,.77)
    ),
    url('/img/login-futsal.png')
    center / cover fixed no-repeat;
}


.match-admin-main,
.match-form-main {
  position: relative;
  z-index: 2;

  width:
    min(
      1380px,
      calc(100% - 36px)
    );

  margin: 0 auto;

  padding:
    48px 0 70px;
}


.match-admin-heading {
  display: flex;

  justify-content:
    space-between;

  align-items:
    flex-end;

  gap: 20px;

  margin-bottom: 24px;
}


.match-eyebrow {
  color:
    rgba(75,218,255,.72);

  font-size: .64rem;
  font-weight: 900;

  letter-spacing: .15em;
}


.match-admin-heading h1,
.match-form-heading h1 {
  margin: 6px 0;
  color: #f2fbff;
}


.match-admin-heading p,
.match-form-heading p {
  margin: 0;

  color:
    rgba(180,216,232,.55);
}


.match-primary-action,
.match-form-actions button {
  min-height: 43px;

  padding: 0 16px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  border-radius: 11px;

  border:
    1px solid
    rgba(73,217,255,.22);

  background:
    linear-gradient(
      135deg,
      rgba(26,153,220,.25),
      rgba(8,75,125,.06)
    );

  color: #a8efff;

  text-decoration: none;

  cursor: pointer;
}


.match-list {
  display: grid;
  gap: 12px;
}


.match-card {
  padding: 18px;

  display: grid;

  grid-template-columns:
    100px 1fr auto;

  align-items: center;

  gap: 18px;

  border-radius: 18px;

  border:
    1px solid
    rgba(84,202,243,.13);

  background:
    linear-gradient(
      145deg,
      rgba(7,35,62,.78),
      rgba(4,21,40,.58)
    );

  backdrop-filter:
    blur(20px);
}


.match-card.status-cancelled {
  opacity: .52;
}


.match-date-box {
  min-height: 82px;

  display: grid;
  place-items: center;
  align-content: center;

  border-radius: 14px;

  border:
    1px solid
    rgba(74,210,249,.14);

  background:
    linear-gradient(
      145deg,
      rgba(10,102,159,.18),
      rgba(4,53,91,.05)
    );
}


.match-date-box strong {
  color: #b8f3ff;
}


.match-date-box span {
  margin-top: 4px;

  color:
    rgba(177,218,234,.55);

  font-size: .72rem;
}


.match-tags,
.match-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}


.match-tags span,
.match-meta span {
  padding: 5px 8px;

  border-radius: 999px;

  border:
    1px solid
    rgba(83,200,241,.10);

  color:
    rgba(175,216,233,.57);

  font-size: .63rem;
}


.match-main-info h2 {
  margin:
    11px 0;

  display: flex;

  align-items: center;
  flex-wrap: wrap;

  gap: 8px;

  font-size: 1rem;
}


.match-main-info h2 small {
  color:
    rgba(88,220,255,.50);
}


.match-school-name {
  color:
    rgba(203,232,243,.70);
}


.match-cancelled-label {
  color: #ff92a4 !important;
}


.match-actions {
  display: flex;
  gap: 7px;
}


.match-actions form {
  margin: 0;
}


.match-actions a,
.match-actions button,
.match-form-actions a {
  min-height: 36px;

  padding: 0 11px;

  display: inline-flex;

  align-items: center;

  border-radius: 9px;

  border:
    1px solid
    rgba(74,203,244,.13);

  background:
    linear-gradient(
      135deg,
      rgba(14,109,168,.13),
      rgba(5,58,95,.03)
    );

  color: #9cecff;

  text-decoration: none;

  cursor: pointer;
}


.match-empty {
  min-height: 350px;

  display: grid;

  place-items: center;
  align-content: center;

  text-align: center;

  border:
    1px solid
    rgba(83,201,242,.12);

  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      rgba(7,34,60,.72),
      rgba(4,21,40,.54)
    );
}


.match-empty-icon {
  font-size: 2rem;
}


.match-empty h2 {
  margin-bottom: 4px;
}


.match-empty p {
  margin: 0;

  color:
    rgba(179,216,231,.50);
}


/* FORM */

.match-form-heading {
  margin-bottom: 22px;
}


.match-form-card {
  max-width: 920px;

  padding: 23px;

  display: grid;
  gap: 18px;

  border-radius: 20px;

  border:
    1px solid
    rgba(83,203,244,.14);

  background:
    linear-gradient(
      145deg,
      rgba(7,35,62,.79),
      rgba(4,21,40,.61)
    );

  backdrop-filter:
    blur(22px);
}


.match-form-card label {
  display: grid;
  gap: 7px;
}


.match-form-card label > span {
  color:
    rgba(195,226,239,.73);

  font-size: .72rem;
  font-weight: 800;
}


.match-form-card input,
.match-form-card select,
.match-form-card textarea {
  width: 100%;

  box-sizing: border-box;

  border:
    1px solid
    rgba(81,199,241,.14);

  border-radius: 11px;

  outline: none;

  background:
    linear-gradient(
      135deg,
      rgba(7,37,64,.88),
      rgba(5,25,45,.81)
    );

  color: #edfaff;
}


.match-form-card input,
.match-form-card select {
  min-height: 44px;
  padding: 0 12px;
}


.match-form-card textarea {
  padding: 12px;
  resize: vertical;
}


.match-form-grid {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 14px;
}


.match-form-info {
  padding: 14px;

  display: flex;
  gap: 12px;

  border-radius: 13px;

  border:
    1px solid
    rgba(76,203,244,.10);

  background:
    linear-gradient(
      135deg,
      rgba(11,104,162,.11),
      rgba(5,61,98,.03)
    );
}


.match-form-info > div:last-child {
  display: grid;
  gap: 3px;
}


.match-form-info span {
  color:
    rgba(172,211,228,.52);

  font-size: .72rem;
}


.match-form-actions {
  display: flex;

  justify-content:
    flex-end;

  gap: 8px;
}


@media (max-width: 760px) {

  .match-admin-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .match-card {
    grid-template-columns: 1fr;
  }

  .match-date-box {
    width: 100px;
  }

  .match-actions {
    justify-content:
      flex-start;
  }

  .match-form-grid {
    grid-template-columns: 1fr;
  }

}



/* =========================================================
   PORTAL DA FAMILIA - PROXIMO JOGO REAL
========================================================= */

.family-next-match-real {
  padding: 16px;

  display: grid;

  grid-template-columns:
    86px 1fr;

  gap: 16px;

  align-items: stretch;
}


.family-next-match-date {
  min-height: 96px;

  display: grid;

  place-items: center;
  align-content: center;

  border-radius: 16px;

  border:
    1px solid
    rgba(73,218,255,.18);

  background:
    linear-gradient(
      145deg,
      rgba(19,127,190,.20),
      rgba(6,69,112,.05)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.025),
    0 0 22px
    rgba(22,179,228,.06);
}


.family-next-match-date strong {
  color: #b9f3ff;

  text-transform: uppercase;

  font-size: .88rem;
}


.family-next-match-date span {
  margin-top: 5px;

  color:
    rgba(181,221,237,.60);

  font-size: .72rem;
}


.family-next-match-main {
  min-width: 0;
}


.family-next-match-category {
  display: inline-block;

  margin-bottom: 11px;

  color:
    rgba(84,221,255,.66);

  font-size: .62rem;
  font-weight: 900;

  letter-spacing: .10em;

  text-transform: uppercase;
}


.family-next-match-versus {
  display: flex;

  align-items: center;

  gap: 14px;
}


.family-next-team {
  display: flex;

  align-items: center;

  gap: 9px;

  min-width: 0;
}


.family-next-team strong {
  color: #edfaff;

  font-size: .94rem;

  overflow-wrap: anywhere;
}


.family-next-team.opponent strong {
  color: #a8efff;
}


.family-next-team-ball {
  width: 34px;
  height: 34px;

  flex:
    0 0 34px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  border:
    1px solid
    rgba(74,215,255,.17);

  background:
    linear-gradient(
      145deg,
      rgba(18,130,192,.18),
      rgba(7,68,108,.04)
    );

  font-size: .82rem;
}


.family-next-x {
  color:
    rgba(110,224,250,.43);

  font-size: .82rem;
  font-weight: 900;
}


.family-next-match-info {
  margin-top: 13px;

  display: flex;

  flex-wrap: wrap;

  gap: 7px;
}


.family-next-match-info span {
  padding: 6px 9px;

  border-radius: 999px;

  border:
    1px solid
    rgba(75,202,242,.10);

  background:
    linear-gradient(
      135deg,
      rgba(12,90,142,.10),
      rgba(4,51,86,.02)
    );

  color:
    rgba(178,218,234,.58);

  font-size: .63rem;
}


@media (
  max-width: 620px
) {

  .family-next-match-real {
    grid-template-columns: 1fr;
  }


  .family-next-match-date {
    width: 92px;
    min-height: 82px;
  }


  .family-next-match-versus {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap: 8px;
  }


  .family-next-x {
    margin-left: 12px;
  }

}



/* =========================================================
   CONVOCACOES V1
========================================================= */

.convocation-main {
  position: relative;
  z-index: 2;

  width:
    min(
      1200px,
      calc(100% - 36px)
    );

  margin: 0 auto;

  padding:
    48px 0 80px;
}


.convocation-heading {
  display: flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap: 20px;

  margin-bottom:
    22px;
}


.convocation-heading h1 {
  margin:
    5px 0;

  color:
    #edfaff;
}


.convocation-heading p {
  margin: 0;

  color:
    rgba(
      181,
      216,
      231,
      .55
    );
}


.convocation-back {
  padding:
    9px 12px;

  border-radius:
    10px;

  border:
    1px solid
    rgba(
      74,
      211,
      250,
      .14
    );

  background:
    linear-gradient(
      135deg,
      rgba(
        17,
        119,
        181,
        .12
      ),
      rgba(
        5,
        57,
        94,
        .03
      )
    );

  color:
    #99eaff;

  text-decoration:
    none;
}


.convocation-match-card {
  padding:
    17px;

  display: flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap: 18px;

  margin-bottom:
    14px;

  border-radius:
    17px;

  border:
    1px solid
    rgba(
      79,
      210,
      247,
      .14
    );

  background:
    linear-gradient(
      145deg,
      rgba(
        8,
        48,
        80,
        .73
      ),
      rgba(
        4,
        25,
        45,
        .56
      )
    );
}


.convocation-match-card > div:first-child {
  display: grid;
  gap: 5px;
}


.convocation-match-card
> div:first-child
> span {
  color:
    rgba(
      82,
      219,
      255,
      .65
    );

  font-size:
    .60rem;

  font-weight:
    900;

  letter-spacing:
    .12em;
}


.convocation-match-card strong {
  color:
    #edfaff;
}


.convocation-match-meta {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;
}


.convocation-match-meta span {
  padding:
    6px 9px;

  border-radius:
    999px;

  border:
    1px solid
    rgba(
      80,
      202,
      242,
      .10
    );

  color:
    rgba(
      183,
      220,
      235,
      .58
    );

  font-size:
    .65rem;
}


.convocation-form {
  border-radius:
    19px;

  border:
    1px solid
    rgba(
      77,
      206,
      246,
      .13
    );

  background:
    linear-gradient(
      145deg,
      rgba(
        7,
        37,
        65,
        .79
      ),
      rgba(
        4,
        22,
        41,
        .60
      )
    );

  overflow:
    hidden;

  backdrop-filter:
    blur(20px);
}


.convocation-toolbar {
  padding:
    16px 18px;

  display: flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap: 14px;

  border-bottom:
    1px solid
    rgba(
      79,
      201,
      241,
      .08
    );
}


.convocation-toolbar > div:first-child {
  display: grid;
  gap: 3px;
}


.convocation-toolbar strong {
  color:
    #eafaff;
}


.convocation-toolbar span {
  color:
    rgba(
      172,
      211,
      228,
      .50
    );

  font-size:
    .68rem;
}


.convocation-toolbar-actions {
  display: flex;
  gap: 7px;
}


.convocation-toolbar-actions button {
  padding:
    7px 10px;

  border-radius:
    9px;

  border:
    1px solid
    rgba(
      71,
      209,
      249,
      .13
    );

  background:
    linear-gradient(
      135deg,
      rgba(
        14,
        111,
        170,
        .13
      ),
      rgba(
        5,
        57,
        94,
        .03
      )
    );

  color:
    #93e9ff;

  cursor:
    pointer;
}


.convocation-player-list {
  padding:
    13px;

  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap: 9px;
}


.convocation-player {
  position:
    relative;

  padding:
    12px;

  display: grid;

  grid-template-columns:
    25px
    43px
    1fr
    auto;

  align-items:
    center;

  gap: 10px;

  border-radius:
    14px;

  border:
    1px solid
    rgba(
      78,
      198,
      239,
      .09
    );

  background:
    linear-gradient(
      145deg,
      rgba(
        10,
        61,
        98,
        .20
      ),
      rgba(
        5,
        37,
        63,
        .06
      )
    );

  cursor:
    pointer;

  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease;
}


.convocation-player:hover {
  transform:
    translateY(-1px);

  border-color:
    rgba(
      71,
      216,
      255,
      .20
    );
}


.convocation-player.selected {
  border-color:
    rgba(
      72,
      224,
      255,
      .30
    );

  background:
    linear-gradient(
      145deg,
      rgba(
        10,
        127,
        184,
        .23
      ),
      rgba(
        5,
        59,
        98,
        .07
      )
    );
}


.convocation-player input {
  position:
    absolute;

  opacity: 0;

  pointer-events:
    none;
}


.convocation-checkbox {
  width:
    22px;

  height:
    22px;

  display: grid;

  place-items:
    center;

  border-radius:
    7px;

  border:
    1px solid
    rgba(
      93,
      207,
      244,
      .20
    );

  color:
    transparent;

  font-size:
    .70rem;
}


.convocation-player.selected
.convocation-checkbox {
  color:
    #9af1ff;

  border-color:
    rgba(
      79,
      225,
      255,
      .42
    );

  background:
    linear-gradient(
      135deg,
      rgba(
        25,
        169,
        220,
        .32
      ),
      rgba(
        6,
        92,
        139,
        .08
      )
    );
}


.convocation-player-avatar {
  width:
    41px;

  height:
    41px;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

  border-radius:
    50%;

  border:
    1px solid
    rgba(
      79,
      213,
      250,
      .18
    );

  background:
    linear-gradient(
      145deg,
      rgba(
        15,
        124,
        184,
        .20
      ),
      rgba(
        5,
        65,
        104,
        .05
      )
    );

  color:
    #b5f3ff;

  font-size:
    .68rem;

  font-weight:
    900;
}


.convocation-player-avatar img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}


.convocation-player-info {
  min-width: 0;

  display:
    grid;

  gap: 3px;
}


.convocation-player-info strong {
  color:
    #edfaff;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.convocation-player-info span {
  color:
    rgba(
      171,
      211,
      229,
      .47
    );

  font-size:
    .64rem;
}


.convocation-player-status {
  padding:
    5px 7px;

  border-radius:
    999px;

  border:
    1px solid
    rgba(
      80,
      201,
      242,
      .10
    );

  color:
    rgba(
      169,
      211,
      229,
      .50
    );

  font-size:
    .60rem;
}


.convocation-player.selected
.convocation-player-status {
  color:
    #86eaff;

  border-color:
    rgba(
      77,
      222,
      255,
      .22
    );
}


.convocation-footer {
  padding:
    15px 18px;

  display: flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap: 15px;

  border-top:
    1px solid
    rgba(
      79,
      201,
      241,
      .08
    );
}


.convocation-footer > div {
  display:
    flex;

  align-items:
    center;

  gap: 10px;
}


.convocation-footer span {
  color:
    rgba(
      172,
      212,
      228,
      .48
    );

  font-size:
    .64rem;

  font-weight:
    900;

  letter-spacing:
    .10em;
}


.convocation-footer strong {
  color:
    #8deaff;

  font-size:
    1.2rem;
}


.convocation-save {
  min-height:
    40px;

  padding:
    0 15px;

  border-radius:
    10px;

  border:
    1px solid
    rgba(
      72,
      221,
      255,
      .24
    );

  background:
    linear-gradient(
      135deg,
      rgba(
        22,
        158,
        216,
        .26
      ),
      rgba(
        6,
        79,
        126,
        .06
      )
    );

  color:
    #a4efff;

  font-weight:
    800;

  cursor:
    pointer;
}


.convocation-empty {
  padding:
    50px 20px;

  display:
    grid;

  place-items:
    center;

  gap:
    5px;
}


@media (
  max-width: 760px
) {

  .convocation-heading,
  .convocation-match-card,
  .convocation-toolbar,
  .convocation-footer {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .convocation-player-list {
    grid-template-columns:
      1fr;
  }


  .convocation-player {
    grid-template-columns:
      25px
      40px
      1fr;
  }


  .convocation-player-status {
    grid-column:
      3;
  }

}



/* =========================================================
   PORTAL DA FAMILIA - CONVOCACAO
========================================================= */

.family-convocation-status {
  display: flex;

  align-items: center;

  margin-bottom: 14px;
}


.family-callup-badge {
  display: inline-flex;

  align-items: center;

  min-height: 28px;

  padding: 0 11px;

  border-radius: 999px;

  font-size: .61rem;

  font-weight: 900;

  letter-spacing: .08em;

  backdrop-filter: blur(12px);

  border:
    1px solid
    rgba(103, 211, 244, .16);

  background:
    linear-gradient(
      135deg,
      rgba(25, 138, 189, .14),
      rgba(5, 55, 89, .04)
    );

  color:
    rgba(190, 229, 241, .72);
}


.family-callup-badge.is-called {
  color: #9cf1ff;

  border-color:
    rgba(70, 222, 255, .30);

  background:
    linear-gradient(
      135deg,
      rgba(15, 157, 214, .28),
      rgba(5, 73, 117, .07)
    );

  box-shadow:
    0 0 22px
    rgba(41, 201, 245, .08);
}


.family-callup-badge.is-confirmed {
  color: #a6fbd5;

  border-color:
    rgba(107, 255, 194, .28);

  background:
    linear-gradient(
      135deg,
      rgba(38, 179, 126, .20),
      rgba(10, 90, 66, .05)
    );
}


.family-callup-badge.is-declined,
.family-callup-badge.is-absent {
  color: #ffb6c2;

  border-color:
    rgba(255, 118, 143, .24);

  background:
    linear-gradient(
      135deg,
      rgba(185, 57, 82, .18),
      rgba(88, 22, 40, .05)
    );
}


.family-callup-badge.is-waiting {
  color:
    rgba(190, 218, 230, .55);

  border-color:
    rgba(123, 190, 218, .12);

  background:
    linear-gradient(
      135deg,
      rgba(91, 155, 181, .09),
      rgba(20, 56, 73, .03)
    );
}



/* =========================================================
   FIX VISUAL - STATUS DA CONVOCACAO
========================================================= */

.family-v2-next-match {
  position: relative !important;
}

.family-next-match-real {
  position: relative !important;
  overflow: visible !important;
}

.family-convocation-status {
  position: absolute !important;

  top: 18px !important;
  right: 18px !important;

  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;

  width: auto !important;
  height: auto !important;

  margin: 0 !important;

  z-index: 999 !important;

  pointer-events: none;
}

.family-callup-badge {
  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  visibility: visible !important;
  opacity: 1 !important;

  min-width: 115px !important;
  min-height: 34px !important;

  padding: 0 14px !important;

  border-radius: 999px !important;

  font-size: .68rem !important;
  font-weight: 900 !important;

  letter-spacing: .08em !important;

  white-space: nowrap !important;

  position: relative !important;

  z-index: 1000 !important;
}

.family-callup-badge.is-called {
  color: #d6faff !important;

  border:
    1px solid
    rgba(69, 222, 255, .72) !important;

  background:
    linear-gradient(
      135deg,
      rgba(11, 160, 221, .82),
      rgba(3, 74, 126, .72)
    ) !important;

  box-shadow:
    0 0 14px rgba(24, 204, 255, .38),
    inset 0 0 12px rgba(93, 228, 255, .10) !important;

  text-shadow:
    0 0 8px rgba(157, 241, 255, .45) !important;
}



/* =========================================================
   PORTAL DA FAMILIA - RESPOSTA DA CONVOCACAO
========================================================= */

.family-convocation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 12px 0 16px;
}

.family-convocation-actions form {
  margin: 0;
}

.family-response-btn {
  min-height: 36px;

  padding:
    0 14px;

  border-radius:
    999px;

  border:
    1px solid
    rgba(94, 211, 247, .22);

  background:
    linear-gradient(
      135deg,
      rgba(19, 126, 175, .20),
      rgba(6, 53, 83, .08)
    );

  color:
    rgba(223, 247, 255, .90);

  font-size:
    .72rem;

  font-weight:
    800;

  letter-spacing:
    .02em;

  cursor:
    pointer;

  backdrop-filter:
    blur(12px);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.family-response-btn:hover {
  transform:
    translateY(-1px);

  border-color:
    rgba(88, 221, 255, .48);

  box-shadow:
    0 0 20px
    rgba(25, 191, 237, .12);
}

.family-response-btn.is-confirm {
  border-color:
    rgba(91, 255, 193, .32);

  background:
    linear-gradient(
      135deg,
      rgba(31, 166, 117, .26),
      rgba(7, 77, 56, .08)
    );

  color:
    #b9ffe0;
}

.family-response-btn.is-decline {
  border-color:
    rgba(255, 121, 147, .26);

  background:
    linear-gradient(
      135deg,
      rgba(178, 53, 81, .20),
      rgba(85, 20, 39, .06)
    );

  color:
    #ffc1cd;
}

.family-response-btn.is-change {
  color:
    rgba(211, 239, 248, .76);

  border-color:
    rgba(120, 195, 224, .16);

  background:
    linear-gradient(
      135deg,
      rgba(66, 133, 160, .12),
      rgba(22, 61, 80, .04)
    );
}

@media (max-width: 640px) {

  .family-convocation-actions {
    flex-direction:
      column;
  }

  .family-convocation-actions form {
    width:
      100%;
  }

  .family-response-btn {
    width:
      100%;
  }

}



/* =========================================================
   AJUSTE VISUAL - CONVOCACAO NO PROXIMO JOGO
========================================================= */

.family-v2-next-match {
  position: relative !important;
}

.family-next-match-real {
  position: relative !important;
  overflow: visible !important;
}


/* SELO CONVOCADO */

.family-convocation-status {
  position: static !important;

  display: flex !important;
  align-items: center !important;

  width: 100% !important;

  margin:
    0 0 14px 0 !important;

  visibility: visible !important;
  opacity: 1 !important;

  z-index: auto !important;
}

.family-callup-badge {
  position: static !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 0 !important;
  min-height: 34px !important;

  padding:
    0 14px !important;

  border-radius:
    999px !important;

  white-space:
    nowrap !important;

  z-index:
    auto !important;
}


/* BOTOES DE RESPOSTA */

.family-convocation-actions {
  position: static !important;

  display: flex !important;
  flex-wrap: wrap !important;

  align-items: center !important;

  gap:
    12px !important;

  width:
    100% !important;

  margin:
    0 0 18px 0 !important;
}

.family-convocation-actions form {
  margin:
    0 !important;

  padding:
    0 !important;

  flex:
    0 0 auto !important;
}

.family-response-btn {
  position:
    static !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  min-height:
    40px !important;

  width:
    auto !important;

  min-width:
    190px !important;

  padding:
    0 18px !important;

  white-space:
    nowrap !important;

  border-radius:
    999px !important;

  margin:
    0 !important;
}


/* BOTAO CONFIRMAR */

.family-response-btn.is-confirm {
  border:
    1px solid
    rgba(74, 255, 194, .45) !important;

  background:
    linear-gradient(
      135deg,
      rgba(16, 168, 116, .34),
      rgba(8, 81, 61, .12)
    ) !important;

  color:
    #baffdf !important;
}


/* BOTAO RECUSAR */

.family-response-btn.is-decline {
  border:
    1px solid
    rgba(255, 105, 139, .40) !important;

  background:
    linear-gradient(
      135deg,
      rgba(184, 50, 79, .30),
      rgba(87, 21, 40, .10)
    ) !important;

  color:
    #ffc3ce !important;
}


/* ALTERAR RESPOSTA */

.family-response-btn.is-change {
  min-width:
    230px !important;
}


/* MOBILE */

@media (max-width: 640px) {

  .family-convocation-status {
    margin-bottom:
      12px !important;
  }

  .family-convocation-actions {
    flex-direction:
      column !important;

    align-items:
      stretch !important;

    gap:
      10px !important;
  }

  .family-convocation-actions form {
    width:
      100% !important;
  }

  .family-response-btn {
    width:
      100% !important;

    min-width:
      0 !important;
  }

}


/* =========================================================
   CONVOCADO FIXO + RESPOSTA DO RESPONSAVEL
========================================================= */

.family-callup-status-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

.family-callup-response {
  display: inline-flex;
  align-items: center;

  min-height: 27px;

  padding:
    0 11px;

  border-radius:
    999px;

  font-size:
    .64rem;

  font-weight:
    800;

  letter-spacing:
    .03em;

  backdrop-filter:
    blur(10px);
}

.family-callup-response.is-confirmed {
  color:
    #baffdf;

  border:
    1px solid
    rgba(91, 255, 193, .28);

  background:
    linear-gradient(
      135deg,
      rgba(31, 166, 117, .18),
      rgba(7, 77, 56, .05)
    );
}

.family-callup-response.is-declined,
.family-callup-response.is-absent {
  color:
    #ffc3ce;

  border:
    1px solid
    rgba(255, 121, 147, .25);

  background:
    linear-gradient(
      135deg,
      rgba(178, 53, 81, .16),
      rgba(85, 20, 39, .04)
    );
}


/* STATUS FIXO DA CONVOCACAO */

.family-callup-status-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

.family-callup-response {
  display: inline-flex;
  align-items: center;

  min-height: 27px;

  padding: 0 11px;

  border-radius: 999px;

  font-size: .64rem;
  font-weight: 800;

  white-space: nowrap;
}

.family-callup-response.is-confirmed {
  color: #baffdf;

  border:
    1px solid
    rgba(91, 255, 193, .28);

  background:
    linear-gradient(
      135deg,
      rgba(31, 166, 117, .18),
      rgba(7, 77, 56, .05)
    );
}

.family-callup-response.is-declined {
  color: #ffc3ce;

  border:
    1px solid
    rgba(255, 121, 147, .25);

  background:
    linear-gradient(
      135deg,
      rgba(178, 53, 81, .16),
      rgba(85, 20, 39, .04)
    );
}



/* =========================================================
   PORTAL DA FAMILIA - HERO BALL MAIOR
========================================================= */

.family-v2-hero-ball,
.family-hero-ball {
  width: 230px !important;
  height: 230px !important;

  max-width: none !important;

  object-fit: contain !important;

  filter:
    drop-shadow(
      0 0 28px
      rgba(43, 204, 255, .30)
    );

  transform:
    scale(1.08);

  transform-origin:
    center center;
}


/* TABLET */

@media (max-width: 900px) {

  .family-v2-hero-ball,
  .family-hero-ball {
    width: 190px !important;
    height: 190px !important;

    transform:
      scale(1.04);
  }

}


/* CELULAR */

@media (max-width: 640px) {

  .family-v2-hero-ball,
  .family-hero-ball {
    width: 145px !important;
    height: 145px !important;

    transform:
      none;
  }

}



/* =========================================================
   PORTAL DA FAMILIA - HERO BALL GRANDE V2
========================================================= */

.family-v2-hero-ball {
  width: 320px !important;
  height: 320px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  overflow: visible !important;
}


/* BOLA */

.family-v2-hero-ball img {
  position: relative !important;

  width: 255px !important;
  height: 255px !important;

  max-width: none !important;

  object-fit: contain !important;

  z-index: 4 !important;

  filter:
    drop-shadow(
      0 18px 24px
      rgba(0,0,0,.34)
    )
    drop-shadow(
      0 0 30px
      rgba(40,206,255,.32)
    ) !important;
}


/* ANEL INTERNO */

.family-v2-ball-ring.ring-one {
  width: 270px !important;
  height: 270px !important;

  position: absolute !important;

  top: 50% !important;
  left: 50% !important;

  transform:
    translate(-50%, -50%) !important;

  z-index: 2 !important;
}


/* ANEL EXTERNO */

.family-v2-ball-ring.ring-two {
  width: 315px !important;
  height: 315px !important;

  position: absolute !important;

  top: 50% !important;
  left: 50% !important;

  transform:
    translate(-50%, -50%) !important;

  z-index: 1 !important;
}


/* SOMBRA */

.family-v2-ball-shadow {
  width: 190px !important;
  height: 30px !important;

  position: absolute !important;

  left: 50% !important;
  bottom: 18px !important;

  transform:
    translateX(-50%) !important;
}


/* TABLET */

@media (max-width: 900px) {

  .family-v2-hero-ball {
    width: 250px !important;
    height: 250px !important;
  }

  .family-v2-hero-ball img {
    width: 205px !important;
    height: 205px !important;
  }

  .family-v2-ball-ring.ring-one {
    width: 215px !important;
    height: 215px !important;
  }

  .family-v2-ball-ring.ring-two {
    width: 245px !important;
    height: 245px !important;
  }

}


/* CELULAR */

@media (max-width: 700px) {

  .family-v2-hero-ball {
    width: 190px !important;
    height: 190px !important;

    margin:
      0 auto 5px !important;
  }

  .family-v2-hero-ball img {
    width: 155px !important;
    height: 155px !important;
  }

  .family-v2-ball-ring.ring-one {
    width: 165px !important;
    height: 165px !important;
  }

  .family-v2-ball-ring.ring-two {
    width: 188px !important;
    height: 188px !important;
  }

  .family-v2-ball-shadow {
    width: 125px !important;
  }

}



/* ==========================================================
   FAMILY ATHLETE STATISTICS V1
   ========================================================== */

.family-athlete-stats-card {
  margin-top: 22px;
  padding: 22px;
  border-radius: 24px;

  border:
    1px solid
    rgba(86, 216, 255, .15);

  background:
    linear-gradient(
      145deg,
      rgba(8, 31, 55, .77),
      rgba(3, 17, 34, .61)
    );

  box-shadow:
    0 22px 60px
    rgba(0, 0, 0, .19);

  backdrop-filter:
    blur(18px);
}


.family-athlete-stats-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}


.family-athlete-stats-kicker {
  display: inline-block;

  margin-bottom: 7px;

  color:
    rgba(108, 232, 255, .88);

  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .10em;
}


.family-athlete-stats-head h2 {
  margin: 0;

  color: #f0fbff;

  font-size: 1.18rem;
}


.family-athlete-stats-head p {
  margin: 5px 0 0;

  color:
    rgba(207, 236, 246, .53);

  font-size: .75rem;
}


.family-athlete-ranking {
  min-width: 108px;

  padding: 11px 15px;

  text-align: center;

  border-radius: 18px;

  border:
    1px solid
    rgba(80, 225, 255, .19);

  background:
    linear-gradient(
      145deg,
      rgba(23, 156, 204, .16),
      rgba(8, 55, 100, .05)
    );
}


.family-athlete-ranking small,
.family-athlete-ranking span {
  display: block;

  color:
    rgba(208, 238, 247, .53);

  font-size: .60rem;
}


.family-athlete-ranking strong {
  display: block;

  margin: 3px 0;

  color: #aaf7ff;

  font-size: 1.55rem;
}


.family-athlete-stats-grid {
  display: grid;

  grid-template-columns:
    repeat(6, 1fr);

  gap: 10px;
}


.family-athlete-stat {
  padding: 15px 10px;

  text-align: center;

  border-radius: 17px;

  border:
    1px solid
    rgba(94, 215, 251, .10);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .045),
      rgba(255, 255, 255, .012)
    );
}


.family-athlete-stat.is-highlight {
  border-color:
    rgba(84, 229, 255, .22);

  box-shadow:
    inset 0 0 24px
    rgba(34, 208, 255, .035);
}


.family-athlete-stat span {
  display: block;

  color:
    rgba(202, 233, 243, .54);

  font-size: .61rem;
  font-weight: 800;
}


.family-athlete-stat strong {
  display: block;

  margin-top: 7px;

  color: #f0fbff;

  font-size: 1.45rem;
}


.family-athlete-stat.is-highlight strong {
  color: #a9f7ff;
}


@media (max-width: 900px) {

  .family-athlete-stats-grid {
    grid-template-columns:
      repeat(3, 1fr);
  }

}


@media (max-width: 520px) {

  .family-athlete-stats-head {
    align-items: flex-start;
  }


  .family-athlete-stats-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .family-athlete-ranking {
    min-width: 92px;
  }

}


/* COMPETITIONS - BOTAO INSCRICOES VISIVEL V1 */
.competition-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
}

.competition-actions a[href$="/players"] {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-width: 190px;
  position: relative;
  z-index: 5;
  border-color: rgba(76, 226, 255, .42) !important;
  background:
    linear-gradient(
      135deg,
      rgba(44, 211, 246, .25),
      rgba(25, 94, 160, .12)
    ) !important;
  box-shadow:
    0 0 24px rgba(47, 210, 244, .10),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* ============================================================
   FAMILY COMPETITIONS V1
============================================================ */

.family-competitions-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

.family-competition-item {
  padding: 17px;
  border: 1px solid rgba(82, 216, 255, .12);
  border-radius: 17px;
  background:
    linear-gradient(
      145deg,
      rgba(33, 177, 218, .07),
      rgba(255,255,255,.018)
    );
}

.family-competition-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.family-competition-organizer {
  color: rgba(91, 228, 255, .64);
  font-size: .57rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.family-competition-item h3 {
  margin: 5px 0 5px;
  color: #eefcff;
  font-size: 1rem;
}

.family-competition-context {
  color: rgba(201, 234, 244, .52);
  font-size: .68rem;
}

.family-competition-badge {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: .57rem;
  font-weight: 900;
  letter-spacing: .04em;
}

.family-competition-badge.is-pending {
  color: #ffe1a4;
  border: 1px solid rgba(255, 196, 87, .22);
  background:
    linear-gradient(
      135deg,
      rgba(255, 180, 59, .13),
      rgba(97, 61, 7, .05)
    );
}

.family-competition-badge.is-confirmed {
  color: #baffdf;
  border: 1px solid rgba(72, 231, 168, .22);
  background:
    linear-gradient(
      135deg,
      rgba(40, 194, 137, .13),
      rgba(10, 75, 60, .05)
    );
}

.family-competition-info-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 15px;
}

.family-competition-info-grid > div,
.family-competition-details > div {
  padding: 10px 11px;
  border: 1px solid rgba(79, 211, 250, .07);
  border-radius: 11px;
  background: rgba(255,255,255,.02);
}

.family-competition-info-grid span,
.family-competition-details span {
  display: block;
  color: rgba(190, 226, 239, .42);
  font-size: .53rem;
  font-weight: 900;
  letter-spacing: .05em;
}

.family-competition-info-grid strong,
.family-competition-details strong {
  display: block;
  margin-top: 4px;
  color: rgba(235, 250, 255, .90);
  font-size: .68rem;
}

.family-competition-details {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.family-competition-notice {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 11px;
  padding: 11px 12px;
  border-radius: 12px;
}

.family-competition-notice strong {
  font-size: .68rem;
}

.family-competition-notice span {
  font-size: .61rem;
  opacity: .65;
}

.family-competition-notice.is-pending {
  color: #ffe4af;
  border: 1px solid rgba(255, 193, 77, .16);
  background:
    linear-gradient(
      135deg,
      rgba(255, 181, 60, .09),
      rgba(90, 58, 10, .03)
    );
}

.family-competition-notice.is-confirmed {
  color: #baffdf;
  border: 1px solid rgba(68, 229, 164, .17);
  background:
    linear-gradient(
      135deg,
      rgba(36, 192, 135, .10),
      rgba(9, 67, 53, .03)
    );
}

@media (max-width: 650px) {

  .family-competition-top {
    flex-direction: column;
  }

  .family-competition-info-grid {
    grid-template-columns: 1fr;
  }

  .family-competition-details {
    grid-template-columns: 1fr;
  }

}

/* FAMILY COMPETITIONS CARD V2 */

.family-competitions-list {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.family-competition-item {
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(80, 220, 255, .14);
  background:
    linear-gradient(
      145deg,
      rgba(30, 170, 220, .08),
      rgba(255,255,255,.02)
    );
}

.family-competition-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.family-competition-label {
  color: rgba(87, 226, 255, .65);
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.family-competition-item h3 {
  margin: 5px 0 3px;
  color: #effcff;
  font-size: 1rem;
}

.family-competition-item p {
  margin: 0;
  color: rgba(211, 239, 247, .55);
  font-size: .7rem;
}

.family-competition-status {
  flex-shrink: 0;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: .56rem;
  font-weight: 900;
}

.family-competition-status.pending {
  color: #ffe1a0;
  border: 1px solid rgba(255, 195, 80, .24);
  background:
    linear-gradient(
      135deg,
      rgba(255, 185, 60, .12),
      rgba(255,255,255,.02)
    );
}

.family-competition-status.confirmed {
  color: #b7ffdd;
  border: 1px solid rgba(67, 229, 164, .24);
  background:
    linear-gradient(
      135deg,
      rgba(39, 196, 138, .12),
      rgba(255,255,255,.02)
    );
}

.family-competition-status.cancelled {
  color: #ffbdc4;
  border: 1px solid rgba(255, 93, 111, .22);
}

.family-competition-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.family-competition-grid > div {
  padding: 10px;
  border-radius: 11px;
  border: 1px solid rgba(75, 211, 250, .08);
  background: rgba(255,255,255,.02);
}

.family-competition-grid span {
  display: block;
  color: rgba(196, 229, 239, .42);
  font-size: .53rem;
  font-weight: 800;
  text-transform: uppercase;
}

.family-competition-grid strong {
  display: block;
  margin-top: 4px;
  color: rgba(238, 251, 255, .92);
  font-size: .69rem;
}

.family-competition-message {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 11px;
  padding: 10px 12px;
  border-radius: 11px;
}

.family-competition-message strong {
  font-size: .67rem;
}

.family-competition-message span {
  font-size: .61rem;
  opacity: .7;
}

.family-competition-message.pending {
  color: #ffe3a9;
  border: 1px solid rgba(255, 192, 76, .15);
  background:
    linear-gradient(
      135deg,
      rgba(255, 179, 48, .08),
      rgba(255,255,255,.01)
    );
}

.family-competition-message.confirmed {
  color: #b7ffdd;
  border: 1px solid rgba(60, 224, 158, .16);
  background:
    linear-gradient(
      135deg,
      rgba(38, 190, 135, .09),
      rgba(255,255,255,.01)
    );
}

@media (max-width: 600px) {

  .family-competition-top {
    flex-direction: column;
  }

  .family-competition-grid {
    grid-template-columns: 1fr;
  }

}

/* COMPETITION PAYMENT BUTTON V1 */

.cp-payment-btn {
  appearance: none;
  border: 1px solid rgba(71, 224, 180, .28);
  border-radius: 10px;

  padding: 9px 12px;

  background:
    linear-gradient(
      135deg,
      rgba(36, 205, 157, .11),
      rgba(41, 180, 230, .05)
    );

  color: #b8ffe4;

  font: inherit;
  font-size: .69rem;
  font-weight: 800;

  cursor: pointer;

  white-space: nowrap;

  transition:
    transform .15s ease,
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease;
}

.cp-payment-btn:hover {
  transform: translateY(-1px);

  border-color:
    rgba(71, 224, 180, .5);

  background:
    linear-gradient(
      135deg,
      rgba(36, 205, 157, .18),
      rgba(41, 180, 230, .09)
    );

  box-shadow:
    0 8px 22px
    rgba(31, 191, 148, .08);
}

.cp-payment-ok {
  display: inline-flex;
  align-items: center;

  padding: 7px 10px;

  border-radius: 999px;

  border:
    1px solid rgba(62, 224, 160, .22);

  background:
    linear-gradient(
      135deg,
      rgba(39, 195, 140, .10),
      rgba(255,255,255,.02)
    );

  color: #b9ffe0;

  font-size: .66rem;
  font-weight: 900;
}

.cp-payment-disabled {
  opacity: .35;
}



/* ==========================================================
   TEACHER CATEGORY RANKING V1
========================================================== */

.teacher-ranking-panel {
  margin-top: 22px;
  padding: 22px;
  overflow: hidden;
}

.teacher-ranking-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.teacher-ranking-head small {
  display: block;
  margin-bottom: 7px;
  color: rgba(110, 228, 255, .72);
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.teacher-ranking-head h2 {
  margin: 0;
  font-size: 1.25rem;
}

.teacher-ranking-head p {
  margin: 7px 0 0;
  color: rgba(213, 237, 246, .58);
  font-size: .78rem;
}

.teacher-ranking-filter {
  min-width: 210px;
}

.teacher-ranking-filter label {
  display: block;
  margin-bottom: 6px;
  color: rgba(211, 237, 246, .55);
  font-size: .66rem;
  font-weight: 800;
}

.teacher-ranking-filter select {
  width: 100%;
  padding: 11px 13px;
  color: #eafaff;
  border:
    1px solid
    rgba(85, 218, 255, .22);
  border-radius: 13px;
  outline: none;
  background:
    linear-gradient(
      145deg,
      rgba(10, 37, 65, .92),
      rgba(4, 20, 38, .88)
    );
}

.teacher-ranking-season {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 11px 13px;
  border:
    1px solid
    rgba(89, 211, 248, .11);
  border-radius: 13px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,.012)
    );
}

.teacher-ranking-season span {
  color: rgba(205, 234, 245, .52);
  font-size: .7rem;
}

.teacher-ranking-season strong {
  font-size: .76rem;
}

.teacher-ranking-season i {
  width: 1px;
  height: 17px;
  margin: 0 5px;
  background:
    rgba(106, 220, 252, .17);
}

.teacher-ranking-table-wrap {
  margin-top: 17px;
  overflow-x: auto;
}

.teacher-ranking-table {
  width: 100%;
  min-width: 650px;
  border-collapse: collapse;
}

.teacher-ranking-table th {
  padding: 11px 12px;
  color: rgba(194, 229, 242, .52);
  font-size: .63rem;
  font-weight: 900;
  text-align: center;
  letter-spacing: .06em;
  border-bottom:
    1px solid
    rgba(91, 208, 245, .10);
}

.teacher-ranking-table th:nth-child(2) {
  text-align: left;
}

.teacher-ranking-table td {
  padding: 13px 12px;
  text-align: center;
  font-size: .79rem;
  border-bottom:
    1px solid
    rgba(92, 207, 245, .065);
}

.teacher-ranking-table td:nth-child(2) {
  text-align: left;
}

.teacher-ranking-position {
  font-weight: 900;
}

.teacher-ranking-player strong {
  display: block;
}

.teacher-ranking-player span {
  display: block;
  margin-top: 3px;
  color: rgba(208, 236, 246, .45);
  font-size: .67rem;
}

.teacher-ranking-points {
  color: #a9f8ff;
  font-weight: 900;
}

.teacher-ranking-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 16px;
}

.teacher-ranking-footer small {
  color: rgba(202, 232, 243, .48);
  font-size: .66rem;
}

.teacher-ranking-footer a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  color: #eaffff;
  text-decoration: none;
  font-size: .74rem;
  font-weight: 800;
  border:
    1px solid
    rgba(73, 220, 255, .25);
  border-radius: 12px;
  background:
    linear-gradient(
      135deg,
      rgba(26, 147, 189, .15),
      rgba(17, 80, 135, .10)
    );
}

.teacher-ranking-empty {
  margin-top: 18px;
  padding: 32px 20px;
  text-align: center;
  border:
    1px dashed
    rgba(91, 210, 247, .15);
  border-radius: 17px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.01)
    );
}

.teacher-ranking-empty > span {
  display: block;
  margin-bottom: 8px;
  font-size: 2rem;
}

.teacher-ranking-empty strong {
  display: block;
}

.teacher-ranking-empty p {
  max-width: 470px;
  margin: 7px auto 0;
  color: rgba(205, 233, 243, .52);
  font-size: .75rem;
  line-height: 1.55;
}

@media (max-width: 760px) {

  .teacher-ranking-head {
    flex-direction: column;
  }

  .teacher-ranking-filter {
    width: 100%;
    min-width: 0;
  }

  .teacher-ranking-footer {
    align-items: flex-start;
    flex-direction: column;
  }

}


/* ==========================================================
   TOP NAV ICON NORMALIZATION V1
========================================================== */

.arena-nav .arena-nav-icon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  flex: 0 0 20px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;
}

.arena-nav .arena-nav-icon svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;

  display: block !important;

  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;

  overflow: visible;
}

.arena-nav > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

@media (max-width: 900px) {

  .arena-nav .arena-nav-icon {
    width: 20px !important;
    height: 20px !important;
    flex-basis: 20px !important;
  }

  .arena-nav .arena-nav-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

}


/* ==========================================================
   UNIFIED ARENA UI — FAMILY V1
   Identidade visual compartilhada com dashboard principal
========================================================== */


/* ----------------------------------------------------------
   FUNDO
---------------------------------------------------------- */

body.family-v2-body.unified-arena-ui {
  min-height: 100vh;

  color: #eaf8ff;

  background:
    linear-gradient(
      180deg,
      rgba(2, 12, 25, .54),
      rgba(1, 8, 18, .91)
    ),
    url("/img/login-futsal.png")
      center center / cover fixed
      no-repeat;

  overflow-x: hidden;
}


/* camada atmosférica */

.unified-arena-ui .family-v2-overlay {
  position: fixed;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(31, 188, 235, .10),
      transparent 39%
    ),
    linear-gradient(
      180deg,
      rgba(2, 12, 25, .13),
      rgba(1, 7, 15, .68)
    );

  z-index: 0;
}


/* ----------------------------------------------------------
   HEADER
---------------------------------------------------------- */

.unified-arena-ui .family-v2-topbar {
  position: relative;
  z-index: 100;

  min-height: 76px;

  padding:
    10px
    clamp(18px, 3vw, 48px);

  display: flex;
  align-items: center;

  border-bottom:
    1px solid
    rgba(107, 221, 255, .12);

  background:
    linear-gradient(
      180deg,
      rgba(4, 20, 37, .90),
      rgba(3, 15, 29, .76)
    );

  box-shadow:
    0 14px 40px
    rgba(0, 0, 0, .23);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}


/* ----------------------------------------------------------
   MARCA
---------------------------------------------------------- */

.unified-arena-ui .family-v2-brand {
  text-decoration: none;
}

.unified-arena-ui .family-v2-brand-logo {
  width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 4px;

  border:
    1px solid
    rgba(89, 219, 255, .18);

  border-radius: 15px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .08),
      rgba(255, 255, 255, .018)
    );

  box-shadow:
    inset 0 0 20px
    rgba(62, 205, 246, .035);
}

.unified-arena-ui .family-v2-brand-logo img {
  width: 100%;
  height: 100%;

  object-fit: contain;
}

.unified-arena-ui .family-v2-brand-copy strong {
  color: #f1fbff;
  font-weight: 800;
}

.unified-arena-ui .family-v2-brand-copy span {
  color:
    rgba(188, 225, 239, .52);

  letter-spacing: .08em;
}


/* ----------------------------------------------------------
   MENU
---------------------------------------------------------- */

.unified-arena-ui .family-v2-nav {
  display: flex;
  align-items: center;
  gap: 3px;
}

.unified-arena-ui .family-v2-nav a {
  min-height: 38px;

  padding:
    8px
    10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  color:
    rgba(213, 239, 248, .65);

  border:
    1px solid
    transparent;

  border-radius: 12px;

  text-decoration: none;

  font-size: .73rem;
  font-weight: 700;

  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .18s ease;
}

.unified-arena-ui .family-v2-nav a:hover {
  color: #f3fcff;

  border-color:
    rgba(76, 215, 255, .15);

  background:
    linear-gradient(
      135deg,
      rgba(47, 189, 229, .10),
      rgba(31, 99, 160, .06)
    );

  transform:
    translateY(-1px);
}

.unified-arena-ui .family-v2-nav a.active {
  color: #eaffff;

  border-color:
    rgba(76, 219, 255, .25);

  background:
    linear-gradient(
      135deg,
      rgba(27, 168, 210, .17),
      rgba(25, 94, 155, .10)
    );

  box-shadow:
    inset 0 0 20px
    rgba(56, 208, 247, .035);
}


/* todos os ícones iguais */

.unified-arena-ui .family-v2-nav a svg {
  width: 18px !important;
  height: 18px !important;

  min-width: 18px;
  max-width: 18px;

  display: block;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;

  flex: 0 0 18px;
}


/* ----------------------------------------------------------
   PERFIL
---------------------------------------------------------- */

.unified-arena-ui .family-v2-profile {
  padding-left: 13px;

  border-left:
    1px solid
    rgba(107, 220, 253, .10);
}

.unified-arena-ui .family-v2-profile-avatar {
  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  border:
    1px solid
    rgba(83, 222, 255, .25);

  border-radius: 50%;

  color: #eaffff;

  background:
    linear-gradient(
      145deg,
      rgba(31, 177, 220, .20),
      rgba(17, 73, 124, .18)
    );

  box-shadow:
    0 0 22px
    rgba(37, 188, 232, .08);
}

.unified-arena-ui .family-v2-profile-text strong {
  color: #f2fbff;
}

.unified-arena-ui .family-v2-profile-text span {
  color:
    rgba(192, 225, 238, .48);
}


/* ----------------------------------------------------------
   LOGOUT
---------------------------------------------------------- */

.unified-arena-ui .family-v2-logout {
  width: 38px;
  height: 38px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border:
    1px solid
    rgba(255, 255, 255, .10);

  border-radius: 11px;

  color:
    rgba(222, 240, 248, .65);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.012)
    );

  cursor: pointer;
}

.unified-arena-ui .family-v2-logout:hover {
  color: #fff;

  border-color:
    rgba(255, 116, 137, .25);

  background:
    linear-gradient(
      145deg,
      rgba(221, 67, 94, .12),
      rgba(125, 29, 53, .07)
    );
}

.unified-arena-ui .family-v2-logout svg {
  width: 18px;
  height: 18px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ----------------------------------------------------------
   CONTEÚDO
---------------------------------------------------------- */

.unified-arena-ui .family-v2-main {
  position: relative;
  z-index: 2;

  width:
    min(
      1440px,
      calc(100% - 48px)
    );

  margin:
    0
    auto;

  padding-top: 34px;
}


/* ----------------------------------------------------------
   HERO
---------------------------------------------------------- */

.unified-arena-ui .family-v2-heading {
  min-height: 240px;

  padding:
    clamp(28px, 4vw, 52px);

  border:
    1px solid
    rgba(88, 217, 255, .13);

  border-radius: 25px;

  background:
    linear-gradient(
      125deg,
      rgba(8, 34, 59, .72),
      rgba(4, 21, 40, .48)
    );

  box-shadow:
    0 24px 70px
    rgba(0, 0, 0, .19),
    inset 0 1px
    rgba(255, 255, 255, .035);

  backdrop-filter:
    blur(13px);

  -webkit-backdrop-filter:
    blur(13px);
}

.unified-arena-ui .family-v2-heading h1 {
  max-width: 690px;

  color: #f2fbff;

  letter-spacing: -.035em;
}

.unified-arena-ui .family-v2-heading h1 span {
  color: #8beeff;
}

.unified-arena-ui .family-v2-heading p {
  color:
    rgba(211, 235, 244, .60);
}


/* ----------------------------------------------------------
   CARDS — MESMA LINGUAGEM DO DASHBOARD
---------------------------------------------------------- */

.unified-arena-ui .family-v2-athlete-hero,
.unified-arena-ui .family-v2-feature-card,
.unified-arena-ui .family-v2-large-card,
.unified-arena-ui .family-v2-bottom-card,
.unified-arena-ui .family-v2-stats-grid article {

  border:
    1px solid
    rgba(83, 213, 250, .12);

  background:
    linear-gradient(
      145deg,
      rgba(8, 31, 54, .73),
      rgba(4, 19, 36, .57)
    );

  box-shadow:
    0 18px 50px
    rgba(0, 0, 0, .17),
    inset 0 1px
    rgba(255, 255, 255, .025);

  backdrop-filter:
    blur(13px);

  -webkit-backdrop-filter:
    blur(13px);
}


/* hover suave */

.unified-arena-ui .family-v2-feature-card,
.unified-arena-ui .family-v2-stats-grid article {
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.unified-arena-ui .family-v2-feature-card:hover,
.unified-arena-ui .family-v2-stats-grid article:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(86, 221, 255, .20);

  box-shadow:
    0 22px 55px
    rgba(0, 0, 0, .20);
}


/* ----------------------------------------------------------
   ÍCONES DOS CARDS
---------------------------------------------------------- */

.unified-arena-ui .family-v2-card-icon,
.unified-arena-ui .family-v2-card-heading-icon,
.unified-arena-ui .family-v2-stat-icon {

  border:
    1px solid
    rgba(80, 218, 255, .18);

  background:
    linear-gradient(
      145deg,
      rgba(36, 176, 217, .14),
      rgba(18, 74, 128, .08)
    );

  box-shadow:
    inset 0 0 20px
    rgba(70, 220, 255, .025);
}


/* ----------------------------------------------------------
   SELECT DO ATLETA
---------------------------------------------------------- */

.unified-arena-ui .family-v2-player-switch select {
  color: #eafaff;

  border:
    1px solid
    rgba(84, 217, 255, .20);

  background:
    linear-gradient(
      145deg,
      rgba(8, 35, 59, .96),
      rgba(4, 20, 38, .96)
    );

  border-radius: 12px;
}


/* ----------------------------------------------------------
   RESPONSIVO
---------------------------------------------------------- */

@media (max-width: 1050px) {

  .unified-arena-ui .family-v2-main {
    width:
      min(
        100% - 30px,
        1200px
      );
  }

}


@media (max-width: 760px) {

  body.family-v2-body.unified-arena-ui {
    background-attachment: scroll;
  }

  .unified-arena-ui .family-v2-topbar {
    min-height: 68px;

    padding:
      9px
      14px;
  }

  .unified-arena-ui .family-v2-main {
    width:
      calc(100% - 22px);

    padding-top: 18px;
  }

  .unified-arena-ui .family-v2-heading {
    min-height: 0;

    padding:
      25px
      20px;

    border-radius: 20px;
  }

  .unified-arena-ui .family-v2-nav {
    background:
      linear-gradient(
        180deg,
        rgba(4, 22, 40, .98),
        rgba(2, 13, 26, .98)
      );

    backdrop-filter:
      blur(20px);

    -webkit-backdrop-filter:
      blur(20px);
  }

  .unified-arena-ui .family-v2-nav a {
    justify-content:
      flex-start;

    width: 100%;
  }

}


/* ==========================================================
   FAMILY MOBILE MENU FIX V1
========================================================== */

@media (max-width: 760px) {

  .unified-arena-ui .family-v2-topbar {
    position: relative;
    z-index: 200;
  }

  .unified-arena-ui .family-v2-menu-toggle {
    position: relative;
    z-index: 230;
  }

  .unified-arena-ui .family-v2-nav {
    position: absolute !important;

    top: calc(100% + 8px) !important;
    left: 12px !important;
    right: 12px !important;

    width: auto !important;
    max-height: 0;

    padding: 0 10px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    gap: 4px !important;

    overflow: hidden;

    opacity: 0;
    visibility: hidden;

    border:
      1px solid
      rgba(86, 218, 255, .16);

    border-radius: 16px;

    background:
      linear-gradient(
        180deg,
        rgba(4, 22, 40, .98),
        rgba(2, 13, 26, .99)
      );

    box-shadow:
      0 20px 60px
      rgba(0, 0, 0, .38);

    backdrop-filter:
      blur(20px);

    -webkit-backdrop-filter:
      blur(20px);

    transition:
      max-height .22s ease,
      opacity .18s ease,
      visibility .18s ease,
      padding .22s ease;
  }

  .unified-arena-ui .family-v2-nav.is-open {
    max-height: 520px;

    padding:
      10px !important;

    opacity: 1;
    visibility: visible;
  }

  .unified-arena-ui .family-v2-nav a {
    width: 100% !important;

    min-height: 44px;

    justify-content: flex-start !important;

    padding:
      10px
      12px !important;

    border-radius: 11px;
  }

  .unified-arena-ui .family-v2-nav a svg {
    width: 18px !important;
    height: 18px !important;

    flex:
      0 0
      18px;
  }

  .unified-arena-ui .family-v2-main {
    position: relative;
    z-index: 1;
  }

}


/* ==========================================================
   DASHBOARD CARDS — DESKTOP STANDARD V1
========================================================== */

@media (min-width: 1024px) {

  /* Área principal do dashboard */
  .arena-dashboard,
  .arena-main,
  .dashboard-main {
    width: min(1440px, calc(100% - 48px));
    margin-left: auto;
    margin-right: auto;
  }


  /* ========================================================
     CARDS DE ESTATÍSTICAS
  ======================================================== */

  .arena-stats-grid {
    display: grid !important;

    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;

    gap: 18px !important;

    align-items: stretch !important;
  }


  .arena-stat-card {
    width: 100% !important;

    min-width: 0 !important;

    min-height: 150px !important;
    height: 100% !important;

    padding: 20px 22px !important;

    display: flex !important;
    flex-direction: column !important;

    justify-content:
      space-between !important;

    align-items:
      stretch !important;

    border-radius:
      18px !important;

    box-sizing:
      border-box !important;
  }


  .arena-stat-card > * {
    min-width: 0;
  }


  .arena-stat-card strong {
    font-size:
      clamp(28px, 2.2vw, 38px) !important;

    line-height:
      1 !important;

    margin-top:
      14px !important;
  }


  .arena-stat-card span {
    line-height:
      1.25 !important;
  }


  /* ========================================================
     CARDS GRANDES / BLOCOS DO DASHBOARD
  ======================================================== */

  .arena-dashboard-grid,
  .arena-content-grid,
  .arena-panels-grid {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap:
      20px !important;

    align-items:
      stretch !important;
  }


  .arena-card,
  .arena-panel,
  .arena-dashboard-card {
    width:
      100% !important;

    min-width:
      0 !important;

    height:
      100% !important;

    box-sizing:
      border-box !important;
  }


  /* ========================================================
     ACESSO RÁPIDO
  ======================================================== */

  .arena-quick-grid {
    display: grid !important;

    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

    gap:
      14px !important;

    align-items:
      stretch !important;
  }


  .arena-quick-card,
  .arena-quick-link {
    width:
      100% !important;

    min-height:
      112px !important;

    height:
      100% !important;

    box-sizing:
      border-box !important;

    display:
      flex !important;

    flex-direction:
      column !important;

    justify-content:
      center !important;
  }


  /* ========================================================
     TEXTOS
  ======================================================== */

  .arena-card h2,
  .arena-card h3,
  .arena-panel h2,
  .arena-panel h3,
  .arena-dashboard-card h2,
  .arena-dashboard-card h3 {
    margin-top:
      0 !important;

    line-height:
      1.2 !important;
  }

}


/* ==========================================================
   NOTEBOOK / TELAS ENTRE 1024 E 1250
========================================================== */

@media
  (min-width: 1024px)
  and
  (max-width: 1250px) {

  .arena-stats-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .arena-quick-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

}

/* ==========================================================
   FAMILY DESKTOP LAYOUT V2
   Organização dos cards sem alterar mobile
========================================================== */

@media (min-width: 1024px) {

  /* --------------------------------------------------------
     CONTAINER
  -------------------------------------------------------- */

  .unified-arena-ui .family-v2-main {
    width: min(1380px, calc(100% - 56px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }


  /* --------------------------------------------------------
     ESPAÇAMENTO VERTICAL PADRÃO
  -------------------------------------------------------- */

  .unified-arena-ui .family-v2-heading,
  .unified-arena-ui .family-v2-athlete-hero,
  .unified-arena-ui .family-v2-highlight-grid,
  .unified-arena-ui .family-v2-content-grid,
  .unified-arena-ui .family-v2-bottom-grid {
    margin-bottom: 22px !important;
  }


  /* --------------------------------------------------------
     PRÓXIMO JOGO
     Ocupa toda a largura
  -------------------------------------------------------- */

  .unified-arena-ui .family-v2-highlight-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
  }

  .unified-arena-ui .family-v2-next-match {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }


  /* --------------------------------------------------------
     CONTEÚDO PRINCIPAL

     Estrutura:
     desempenho | visão rápida
     mural      | mural
  -------------------------------------------------------- */

  .unified-arena-ui .family-v2-content-grid {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1.35fr)
      minmax(320px, .65fr) !important;

    gap: 22px !important;

    align-items: start !important;
  }


  /* Desempenho */
  .unified-arena-ui
  .family-v2-content-grid
  .family-athlete-stats-card {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }


  /* Mural */
  .unified-arena-ui
  .family-v2-content-grid
  #mural {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;

    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }


  /* Visão rápida */
  .unified-arena-ui
  .family-v2-content-grid
  > .family-v2-large-card:not(#mural) {
    grid-column: 2 !important;
    grid-row: 1 !important;

    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }


  /* --------------------------------------------------------
     COMPETIÇÕES + FINANCEIRO
  -------------------------------------------------------- */

  .unified-arena-ui .family-v2-bottom-grid {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1.35fr)
      minmax(340px, .65fr) !important;

    gap: 22px !important;

    align-items: start !important;
  }


  .unified-arena-ui
  .family-v2-bottom-card {
    width: 100% !important;
    min-width: 0 !important;

    height: auto !important;

    align-self: start !important;
  }


  /* --------------------------------------------------------
     CARDS
     Não força mesma altura
  -------------------------------------------------------- */

  .unified-arena-ui .family-v2-feature-card,
  .unified-arena-ui .family-v2-large-card,
  .unified-arena-ui .family-v2-bottom-card,
  .unified-arena-ui .family-athlete-stats-card {
    box-sizing: border-box !important;
  }


  /* --------------------------------------------------------
     ESTATÍSTICAS INTERNAS
  -------------------------------------------------------- */

  .unified-arena-ui
  .family-athlete-stats-grid {
    display: grid !important;

    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

    gap: 12px !important;
  }


  /* --------------------------------------------------------
     MURAL
  -------------------------------------------------------- */

  .unified-arena-ui .family-v2-notices {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 14px !important;
  }


  /* --------------------------------------------------------
     ÂNCORAS DO MENU
  -------------------------------------------------------- */

  .unified-arena-ui #meu-atleta,
  .unified-arena-ui #proximo-jogo,
  .unified-arena-ui #estatisticas,
  .unified-arena-ui #mural,
  .unified-arena-ui #competicoes,
  .unified-arena-ui #financeiro {
    scroll-margin-top: 100px;
  }

}


/* ==========================================================
   NOTEBOOK
========================================================== */

@media
  (min-width: 1024px)
  and
  (max-width: 1180px) {

  .unified-arena-ui .family-v2-content-grid {
    grid-template-columns:
      minmax(0, 1.15fr)
      minmax(300px, .85fr) !important;
  }

  .unified-arena-ui .family-v2-bottom-grid {
    grid-template-columns:
      minmax(0, 1.15fr)
      minmax(300px, .85fr) !important;
  }

}


/* ==========================================================
   FAMILY → ARENA UI UNIFICATION V1
   Mantém funcionalidades e conteúdo da família,
   mas aproxima layout e componentes do padrão geral.
========================================================== */


/* ==========================================================
   FUNDO / BASE
========================================================== */

.unified-arena-ui.family-v2-body {
  min-height: 100vh;

  background:
    linear-gradient(
      180deg,
      rgba(1, 10, 20, .28),
      rgba(1, 10, 20, .76)
    ),
    var(--arena-bg, transparent);

  color: var(--txt, #eaf7ff);
}


/* ==========================================================
   CONTAINER PRINCIPAL
========================================================== */

.unified-arena-ui .family-v2-main {
  width: min(1440px, calc(100% - 40px)) !important;

  margin-left: auto !important;
  margin-right: auto !important;

  padding-top: 24px !important;
  padding-bottom: 48px !important;

  box-sizing: border-box !important;
}


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

.unified-arena-ui .family-v2-topbar {
  width: min(1500px, calc(100% - 28px));

  margin: 14px auto 0;

  min-height: 68px;

  padding: 10px 14px;

  border:
    1px solid rgba(86, 218, 255, .14);

  border-radius: 18px;

  background:
    linear-gradient(
      180deg,
      rgba(7, 24, 42, .88),
      rgba(4, 17, 31, .82)
    );

  box-shadow:
    0 18px 50px rgba(0, 0, 0, .22),
    inset 0 1px rgba(255, 255, 255, .04);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-sizing: border-box;
}


/* ==========================================================
   LOGO / MARCA
========================================================== */

.unified-arena-ui .family-v2-brand {
  min-width: 0;
}

.unified-arena-ui .family-v2-brand img {
  max-height: 46px;
  width: auto;
  object-fit: contain;
}


/* ==========================================================
   MENU
========================================================== */

.unified-arena-ui .family-v2-nav {
  gap: 4px;
}

.unified-arena-ui .family-v2-nav a {
  min-height: 42px;

  padding: 9px 12px;

  border:
    1px solid transparent;

  border-radius: 12px;

  color:
    rgba(232, 246, 255, .72);

  text-decoration: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .18s ease;
}

.unified-arena-ui .family-v2-nav a:hover {
  color: #fff;

  border-color:
    rgba(74, 216, 255, .18);

  background:
    linear-gradient(
      180deg,
      rgba(37, 170, 230, .12),
      rgba(16, 91, 146, .08)
    );
}

.unified-arena-ui .family-v2-nav a.active {
  color: #fff;

  border-color:
    rgba(65, 220, 255, .30);

  background:
    linear-gradient(
      135deg,
      rgba(18, 174, 230, .17),
      rgba(52, 92, 220, .12)
    );

  box-shadow:
    inset 0 0 18px rgba(41, 200, 255, .05);
}

.unified-arena-ui .family-v2-nav svg {
  width: 18px !important;
  height: 18px !important;

  min-width: 18px !important;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==========================================================
   PERFIL DO RESPONSÁVEL
========================================================== */

.unified-arena-ui .family-v2-profile {
  padding-left: 12px;

  border-left:
    1px solid rgba(255, 255, 255, .08);
}

.unified-arena-ui .family-v2-profile-avatar {
  width: 40px;
  height: 40px;

  border:
    1px solid rgba(84, 218, 255, .25);

  background:
    linear-gradient(
      145deg,
      rgba(34, 196, 238, .16),
      rgba(59, 92, 224, .10)
    );

  box-shadow:
    0 0 20px rgba(35, 198, 255, .08);
}


/* ==========================================================
   HERO PRINCIPAL
========================================================== */

.unified-arena-ui .family-v2-heading {
  margin-bottom: 20px !important;

  padding: 28px 30px !important;

  border:
    1px solid rgba(84, 218, 255, .15) !important;

  border-radius: 20px !important;

  background:
    linear-gradient(
      135deg,
      rgba(8, 30, 50, .74),
      rgba(3, 17, 32, .82)
    ) !important;

  box-shadow:
    0 22px 50px rgba(0, 0, 0, .18),
    inset 0 1px rgba(255, 255, 255, .04) !important;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-sizing: border-box;
}

.unified-arena-ui .family-v2-heading h1 {
  margin-top: 7px;

  font-size:
    clamp(28px, 3.2vw, 48px);

  line-height: 1.05;
}

.unified-arena-ui .family-v2-heading p {
  max-width: 620px;

  line-height: 1.6;

  color:
    rgba(223, 242, 255, .66);
}


/* ==========================================================
   PADRÃO GERAL DOS CARDS
========================================================== */

.unified-arena-ui .family-v2-athlete-hero,
.unified-arena-ui .family-v2-feature-card,
.unified-arena-ui .family-v2-large-card,
.unified-arena-ui .family-v2-bottom-card,
.unified-arena-ui .family-athlete-stats-card {
  border:
    1px solid rgba(84, 218, 255, .13) !important;

  border-radius: 18px !important;

  background:
    linear-gradient(
      145deg,
      rgba(7, 26, 44, .79),
      rgba(3, 16, 29, .86)
    ) !important;

  box-shadow:
    0 18px 42px rgba(0, 0, 0, .18),
    inset 0 1px rgba(255, 255, 255, .035) !important;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-sizing: border-box !important;
}


/* ==========================================================
   HERO DO ATLETA
========================================================== */

.unified-arena-ui .family-v2-athlete-hero {
  margin-bottom: 20px !important;

  padding: 22px 24px !important;
}


/* ==========================================================
   PADRÃO DE TÍTULOS DOS CARDS
========================================================== */

.unified-arena-ui .family-v2-card-heading,
.unified-arena-ui .family-athlete-stats-head {
  margin-bottom: 18px !important;
}

.unified-arena-ui .family-v2-card-heading h2,
.unified-arena-ui .family-athlete-stats-head h2 {
  margin:
    4px 0 0 !important;

  font-size:
    clamp(20px, 1.6vw, 26px);

  line-height: 1.15;
}

.unified-arena-ui .family-v2-eyebrow,
.unified-arena-ui .family-athlete-stats-kicker,
.unified-arena-ui .family-v2-card-label {
  font-size: 11px;

  font-weight: 700;

  letter-spacing: .14em;

  color:
    rgba(85, 222, 255, .74);
}


/* ==========================================================
   ÍCONES
========================================================== */

.unified-arena-ui .family-v2-card-icon,
.unified-arena-ui .family-v2-card-heading-icon {
  width: 38px !important;
  height: 38px !important;

  border:
    1px solid rgba(80, 220, 255, .18);

  border-radius: 11px;

  background:
    linear-gradient(
      145deg,
      rgba(31, 177, 228, .12),
      rgba(56, 84, 203, .09)
    );

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.unified-arena-ui .family-v2-card-icon svg,
.unified-arena-ui .family-v2-card-heading-icon svg {
  width: 19px !important;
  height: 19px !important;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==========================================================
   ESPAÇAMENTO DOS BLOCOS
========================================================== */

.unified-arena-ui .family-v2-highlight-grid,
.unified-arena-ui .family-v2-content-grid,
.unified-arena-ui .family-v2-bottom-grid {
  margin-bottom: 20px !important;
}


/* ==========================================================
   DESKTOP
========================================================== */

@media (min-width: 1024px) {

  /*
     Próximo jogo
  */

  .unified-arena-ui .family-v2-highlight-grid {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    gap: 20px !important;
  }


  /*
     Desempenho + visão rápida
     Mural em largura completa
  */

  .unified-arena-ui .family-v2-content-grid {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1.45fr)
      minmax(320px, .55fr) !important;

    gap: 20px !important;

    align-items: start !important;
  }


  .unified-arena-ui
  .family-v2-content-grid
  .family-athlete-stats-card {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: 100% !important;
    height: auto !important;
  }


  .unified-arena-ui
  .family-v2-content-grid
  > .family-v2-large-card:not(#mural) {
    grid-column: 2 !important;
    grid-row: 1 !important;

    width: 100% !important;
    height: auto !important;
  }


  .unified-arena-ui
  .family-v2-content-grid
  #mural {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;

    width: 100% !important;
    height: auto !important;
  }


  /*
     Competição + financeiro
  */

  .unified-arena-ui .family-v2-bottom-grid {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1.4fr)
      minmax(320px, .6fr) !important;

    gap: 20px !important;

    align-items: start !important;
  }


  .unified-arena-ui .family-v2-bottom-card {
    width: 100% !important;

    height: auto !important;

    align-self: start !important;
  }


  /*
     Estatísticas internas
  */

  .unified-arena-ui .family-athlete-stats-grid {
    display: grid !important;

    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

    gap: 12px !important;
  }


  /*
     Mural
  */

  .unified-arena-ui .family-v2-notices {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 14px !important;
  }

}


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

@media (max-width: 1023px) {

  .unified-arena-ui .family-v2-main {
    width:
      min(100% - 24px, 760px) !important;

    padding-top: 14px !important;
  }


  .unified-arena-ui .family-v2-heading {
    padding:
      22px 18px !important;
  }


  .unified-arena-ui .family-v2-highlight-grid,
  .unified-arena-ui .family-v2-content-grid,
  .unified-arena-ui .family-v2-bottom-grid {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    gap: 14px !important;
  }


  .unified-arena-ui .family-v2-notices {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

}


/* ==========================================================
   CELULAR
========================================================== */

@media (max-width: 760px) {

  .unified-arena-ui .family-v2-topbar {
    width:
      calc(100% - 20px);

    margin-top: 10px;

    border-radius: 16px;
  }


  .unified-arena-ui .family-v2-main {
    width:
      calc(100% - 20px) !important;

    padding-bottom:
      32px !important;
  }


  .unified-arena-ui .family-v2-heading {
    margin-bottom:
      14px !important;

    border-radius:
      16px !important;
  }


  .unified-arena-ui .family-v2-athlete-hero,
  .unified-arena-ui .family-v2-feature-card,
  .unified-arena-ui .family-v2-large-card,
  .unified-arena-ui .family-v2-bottom-card,
  .unified-arena-ui .family-athlete-stats-card {
    border-radius:
      16px !important;
  }


  .unified-arena-ui .family-athlete-stats-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

}


/* ==========================================================
   ÂNCORAS
========================================================== */

.unified-arena-ui #meu-atleta,
.unified-arena-ui #proximo-jogo,
.unified-arena-ui #estatisticas,
.unified-arena-ui #mural,
.unified-arena-ui #competicoes,
.unified-arena-ui #financeiro {
  scroll-margin-top: 100px;
}



/* ============================================================
   SCHOOL USERS / PROFESSORES + ATLETAS V2
   ============================================================ */

.school-users-page {
  position: relative;
  z-index: 2;
  width: min(1500px, calc(100% - 48px));
  margin: 0 auto;
  padding: 42px 0 72px;
}

.school-users-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 28px;
}

.school-users-hero h1 {
  margin: 10px 0 8px;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1;
  letter-spacing: -0.04em;
}

.school-users-hero p {
  max-width: 720px;
  margin: 0;
  opacity: .72;
  line-height: 1.6;
}

.school-users-hero-actions,
.school-users-panel-heading-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.school-users-main-action,
.school-users-secondary-action,
.school-users-small-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(125, 232, 255, .25);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  background:
    linear-gradient(
      135deg,
      rgba(44, 202, 255, .14),
      rgba(60, 92, 255, .06)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 32px rgba(0,0,0,.16);
  backdrop-filter: blur(12px);
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.school-users-main-action:hover,
.school-users-secondary-action:hover,
.school-users-small-action:hover {
  transform: translateY(-2px);
  border-color: rgba(125, 232, 255, .52);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 14px 38px rgba(0,0,0,.23);
}

.school-users-secondary-action {
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.07),
      rgba(255,255,255,.025)
    );
}

.school-users-stats {
  margin-bottom: 28px;
}

.school-users-panel {
  margin-top: 24px;
  border: 1px solid rgba(159, 224, 255, .13);
  border-radius: 24px;
  overflow: hidden;
  background:
    linear-gradient(
      145deg,
      rgba(6, 27, 50, .80),
      rgba(5, 18, 36, .58)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 22px 60px rgba(0,0,0,.22);
  backdrop-filter: blur(18px);
}

.school-users-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 28px;
  border-bottom: 1px solid rgba(159, 224, 255, .10);
}

.school-users-panel-heading small {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  letter-spacing: .16em;
  opacity: .58;
}

.school-users-panel-heading h2 {
  margin: 0;
  font-size: 24px;
}

.school-users-panel-heading p {
  margin: 6px 0 0;
  opacity: .62;
  font-size: 14px;
}

.school-users-count {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 9px 13px;
  border: 1px solid rgba(125,232,255,.16);
  border-radius: 12px;
  background:
    linear-gradient(
      135deg,
      rgba(125,232,255,.075),
      rgba(255,255,255,.02)
    );
  font-size: 12px;
  opacity: .82;
}

.school-users-count strong {
  font-size: 18px;
}

.school-users-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.school-users-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.school-users-table th,
.school-users-table td {
  padding: 17px 22px;
  text-align: left;
  border-bottom:
    1px solid rgba(159,224,255,.075);
}

.school-users-table th {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .55;
}

.school-users-table tbody tr {
  transition:
    background .18s ease;
}

.school-users-table tbody tr:hover {
  background:
    linear-gradient(
      90deg,
      rgba(44,202,255,.05),
      rgba(255,255,255,.018)
    );
}

.school-user-person {
  display: flex;
  align-items: center;
  gap: 12px;
}

.school-user-person strong,
.school-user-person small {
  display: block;
}

.school-user-person small {
  margin-top: 3px;
  opacity: .52;
  font-size: 12px;
}

.school-user-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(107,225,255,.22);
  background:
    linear-gradient(
      145deg,
      rgba(58,205,255,.17),
      rgba(60,87,255,.08)
    );
  font-weight: 800;
}

.school-users-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .04em;
}

.school-users-status.active {
  border-color: rgba(87,245,183,.28);
  background:
    linear-gradient(
      135deg,
      rgba(87,245,183,.11),
      rgba(87,245,183,.035)
    );
}

.school-users-status.inactive {
  border-color: rgba(255,123,143,.25);
  background:
    linear-gradient(
      135deg,
      rgba(255,123,143,.09),
      rgba(255,123,143,.025)
    );
}

.school-users-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.school-users-actions form {
  margin: 0;
}

.school-users-actions a,
.school-users-actions button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(125,232,255,.18);
  border-radius: 10px;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  background:
    linear-gradient(
      135deg,
      rgba(125,232,255,.075),
      rgba(255,255,255,.02)
    );
}

.school-users-empty {
  padding: 44px 28px;
  text-align: center;
}

.school-users-empty strong {
  display: block;
  font-size: 18px;
}

.school-users-empty p {
  margin: 8px auto 0;
  max-width: 520px;
  opacity: .57;
}


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

.school-users-athlete-grid {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  gap: 16px;
  padding: 20px;
}

.school-athlete-card {
  padding: 20px;
  border: 1px solid rgba(124,226,255,.13);
  border-radius: 20px;
  background:
    linear-gradient(
      145deg,
      rgba(11,39,68,.64),
      rgba(5,22,43,.42)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 15px 40px rgba(0,0,0,.13);
}

.school-athlete-card.is-inactive {
  opacity: .62;
}

.school-athlete-card-top {
  display: flex;
  align-items: center;
  gap: 13px;
}

.school-athlete-avatar {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid rgba(125,232,255,.24);
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      rgba(55,206,255,.17),
      rgba(70,80,255,.07)
    );
  font-size: 20px;
  font-weight: 800;
}

.school-athlete-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.school-athlete-main {
  flex: 1;
  min-width: 0;
}

.school-athlete-main small {
  display: block;
  font-size: 9px;
  letter-spacing: .15em;
  opacity: .46;
}

.school-athlete-main h3 {
  margin: 4px 0 3px;
  font-size: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.school-athlete-main p {
  margin: 0;
  font-size: 12px;
  opacity: .57;
}

.school-athlete-memberships {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  gap: 10px;
  margin-top: 18px;
}

.school-athlete-category {
  min-height: 72px;
  padding: 12px 13px;
  border: 1px solid rgba(125,232,255,.11);
  border-radius: 14px;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.035),
      rgba(125,232,255,.025)
    );
}

.school-athlete-category span,
.school-athlete-category strong,
.school-athlete-category small {
  display: block;
}

.school-athlete-category span {
  margin-bottom: 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .5;
}

.school-athlete-category strong {
  font-size: 14px;
}

.school-athlete-category strong.additional {
  opacity: .88;
}

.school-athlete-category small {
  opacity: .48;
}

.school-athlete-contact {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  gap: 8px;
  margin-top: 14px;
  font-size: 12px;
  opacity: .68;
}

.school-athlete-contact span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.school-athlete-contact strong {
  display: block;
  margin-bottom: 2px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .65;
}

.school-athlete-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(125,232,255,.08);
}

.school-athlete-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(125,232,255,.18);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  background:
    linear-gradient(
      135deg,
      rgba(125,232,255,.075),
      rgba(255,255,255,.02)
    );
}

.school-athlete-next-action {
  font-size: 11px;
  opacity: .42;
}


/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (
  max-width: 1000px
) {

  .school-users-athlete-grid {
    grid-template-columns: 1fr;
  }

}

@media (
  max-width: 760px
) {

  .school-users-page {
    width:
      min(
        100% - 24px,
        1500px
      );
    padding-top: 26px;
  }

  .school-users-hero,
  .school-users-panel-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .school-users-hero-actions {
    width: 100%;
  }

  .school-users-main-action,
  .school-users-secondary-action {
    flex: 1;
  }

  .school-users-athlete-grid {
    padding: 12px;
  }

  .school-athlete-card {
    padding: 16px;
  }

  .school-athlete-card-top {
    align-items: flex-start;
  }

  .school-athlete-memberships,
  .school-athlete-contact {
    grid-template-columns: 1fr;
  }

  .school-athlete-actions {
    align-items: flex-start;
    flex-direction: column;
  }

}




/* ============================================================
   PLAYER MANAGER V1
   ============================================================ */

.player-manager-page {
  position: relative;
  z-index: 2;
  width:
    min(
      1380px,
      calc(100% - 48px)
    );
  margin: 0 auto;
  padding: 34px 0 70px;
}

.player-manager-back {
  display: inline-flex;
  margin-bottom: 22px;
  color: inherit;
  text-decoration: none;
  font-size: 13px;
  opacity: .65;
}

.player-manager-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.player-manager-identity {
  display: flex;
  align-items: center;
  gap: 18px;
}

.player-manager-avatar {
  width: 78px;
  height: 78px;
  flex: 0 0 78px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid rgba(115,226,255,.28);
  border-radius: 24px;
  background:
    linear-gradient(
      145deg,
      rgba(59,207,255,.18),
      rgba(67,83,255,.07)
    );
  font-size: 30px;
  font-weight: 850;
}

.player-manager-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.player-manager-hero h1 {
  margin: 8px 0 6px;
  font-size:
    clamp(
      30px,
      4vw,
      50px
    );
  line-height: 1;
}

.player-manager-hero p {
  margin: 0;
  opacity: .62;
}

.player-manager-status {
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
}

.player-manager-status.active {
  border-color: rgba(76,240,177,.3);
  background:
    linear-gradient(
      135deg,
      rgba(76,240,177,.10),
      rgba(76,240,177,.025)
    );
}

.player-manager-status.inactive {
  border-color: rgba(255,113,134,.3);
  background:
    linear-gradient(
      135deg,
      rgba(255,113,134,.10),
      rgba(255,113,134,.025)
    );
}

.player-manager-readonly {
  margin-bottom: 20px;
  padding: 13px 16px;
  border: 1px solid rgba(255,205,83,.20);
  border-radius: 14px;
  background:
    linear-gradient(
      135deg,
      rgba(255,205,83,.08),
      rgba(255,255,255,.02)
    );
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
}

.player-manager-readonly small {
  display: block;
  margin-top: 4px;
  font-weight: 400;
  letter-spacing: 0;
  opacity: .6;
}

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

.player-manager-panel {
  margin-top: 20px;
  border: 1px solid rgba(137,224,255,.13);
  border-radius: 22px;
  overflow: hidden;
  background:
    linear-gradient(
      145deg,
      rgba(8,32,57,.78),
      rgba(5,19,37,.54)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 20px 55px rgba(0,0,0,.18);
  backdrop-filter: blur(18px);
}

.player-manager-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 21px 22px;
  border-bottom:
    1px solid rgba(137,224,255,.09);
}

.player-manager-panel-heading small {
  display: block;
  margin-bottom: 4px;
  font-size: 9px;
  letter-spacing: .15em;
  opacity: .5;
}

.player-manager-panel-heading h2 {
  margin: 0;
  font-size: 21px;
}

.player-manager-number {
  min-width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(112,227,255,.17);
  border-radius: 12px;
  background:
    linear-gradient(
      145deg,
      rgba(112,227,255,.08),
      rgba(255,255,255,.02)
    );
  font-weight: 800;
}

.player-primary-category {
  padding: 25px 22px 10px;
}

.player-primary-category span,
.player-primary-category strong,
.player-primary-category small {
  display: block;
}

.player-primary-category span {
  margin-bottom: 5px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .48;
}

.player-primary-category strong {
  font-size: 28px;
}

.player-primary-category small {
  margin-top: 6px;
  opacity: .5;
}

.player-manager-form {
  padding: 18px 22px 22px;
}

.player-manager-form label,
.player-manager-form label span {
  display: block;
}

.player-manager-form label span {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  opacity: .65;
}

.player-manager-form select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(127,226,255,.18);
  border-radius: 12px;
  color: inherit;
  background: rgba(5,19,36,.88);
  outline: none;
}

.player-manager-form button {
  width: 100%;
  min-height: 44px;
  margin-top: 11px;
  border: 1px solid rgba(127,226,255,.25);
  border-radius: 12px;
  color: inherit;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  background:
    linear-gradient(
      135deg,
      rgba(45,201,255,.14),
      rgba(72,79,255,.06)
    );
}

.player-additional-list {
  padding: 13px 20px 0;
}

.player-additional-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 14px;
  margin-bottom: 9px;
  border: 1px solid rgba(127,226,255,.10);
  border-radius: 13px;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.035),
      rgba(127,226,255,.02)
    );
}

.player-additional-item span,
.player-additional-item strong {
  display: block;
}

.player-additional-item span {
  margin-bottom: 3px;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .45;
}

.player-remove-category {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(255,118,139,.20);
  border-radius: 10px;
  color: inherit;
  background:
    linear-gradient(
      135deg,
      rgba(255,118,139,.08),
      rgba(255,255,255,.02)
    );
  cursor: pointer;
}

.player-manager-empty {
  padding: 27px 22px;
  opacity: .5;
}

.player-manager-data-grid {
  display: grid;
  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );
  gap: 1px;
  background:
    rgba(137,224,255,.07);
}

.player-manager-data-grid > div {
  padding: 18px;
  background:
    linear-gradient(
      145deg,
      rgba(8,31,55,.96),
      rgba(6,22,41,.96)
    );
}

.player-manager-data-grid span,
.player-manager-data-grid strong {
  display: block;
}

.player-manager-data-grid span {
  margin-bottom: 5px;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .43;
}

.player-manager-data-grid strong {
  font-size: 13px;
}

.player-history-list {
  padding: 8px 20px 20px;
}

.player-history-item {
  display: grid;
  grid-template-columns:
    minmax(180px,1fr)
    auto
    auto;
  align-items: center;
  gap: 20px;
  padding: 14px 4px;
  border-bottom:
    1px solid rgba(137,224,255,.07);
}

.player-history-main strong,
.player-history-main span {
  display: block;
}

.player-history-main span {
  margin-top: 3px;
  font-size: 11px;
  opacity: .5;
}

.player-history-period {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  opacity: .58;
}

.player-history-period b {
  font-weight: 400;
  opacity: .45;
}

.player-history-status {
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.player-history-status.active {
  border-color: rgba(78,241,179,.22);
}

.player-history-status.transferred {
  border-color: rgba(255,203,86,.20);
}

.player-history-status.inactive {
  opacity: .55;
}

.school-athlete-manage-action {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(125,232,255,.22);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  font-size: 12px;
  font-weight: 750;
  background:
    linear-gradient(
      135deg,
      rgba(42,205,255,.11),
      rgba(76,81,255,.04)
    );
}


@media (
  max-width: 900px
) {

  .player-manager-grid {
    grid-template-columns: 1fr;
  }

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

}


@media (
  max-width: 620px
) {

  .player-manager-page {
    width:
      calc(100% - 24px);
    padding-top: 25px;
  }

  .player-manager-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .player-manager-avatar {
    width: 62px;
    height: 62px;
    flex-basis: 62px;
    border-radius: 18px;
  }

  .player-manager-data-grid {
    grid-template-columns: 1fr;
  }

  .player-history-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }

}




/* ============================================================
   SCHOOL ADMIN PRIORITY CARDS V1
   ============================================================ */

.admin-priority-card {
  position: relative;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.admin-priority-card:hover {
  transform: translateY(-3px);
  border-color: rgba(119,225,255,.28);
}

.admin-pending-card {
  border-color: rgba(255,194,77,.24);
  background:
    linear-gradient(
      145deg,
      rgba(255,190,74,.08),
      rgba(7,30,54,.72)
    );
}

.admin-pending-card .arena-stat-info strong {
  font-size: clamp(30px,4vw,44px);
}



/* ============================================================
   SCHOOL ADMIN ESSENTIAL CARDS V2
   ============================================================ */

.admin-home-card {
  position:relative;
  text-decoration:none !important;
  color:inherit !important;
  min-height:170px;
  overflow:hidden;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.admin-home-card:hover {
  transform:translateY(-3px);
  border-color:rgba(91,215,255,.35);
}

.admin-home-attention {
  border-color:rgba(255,190,70,.32);
  background:
    linear-gradient(
      145deg,
      rgba(255,181,52,.10),
      rgba(7,28,52,.76)
    );
}

.admin-home-attention
.arena-stat-info strong {
  font-size:clamp(34px,4vw,48px);
}

.admin-home-open {
  position:absolute;
  right:18px;
  bottom:14px;
  font-size:12px;
  font-weight:700;
  opacity:.72;
}

.admin-home-extra {
  display:block;
  margin-top:8px;
  font-size:11px;
  font-style:normal;
  font-weight:700;
  opacity:.78;
}

@media (max-width:700px) {
  .admin-home-card {
    min-height:150px;
  }
}




/* ============================================================
   COMPETITION PAYMENT PENDING CARD V1
   ============================================================ */

.admin-payment-attention {
  border-color:
    rgba(77, 218, 255, .30);

  background:
    linear-gradient(
      145deg,
      rgba(32, 192, 255, .10),
      rgba(7, 28, 52, .76)
    );
}

.admin-payment-attention
.arena-stat-info strong {
  font-size:
    clamp(34px, 4vw, 48px);
}


/* =========================================================
   INTERNAL ARENA BACKGROUND UNIFIED V2
   Somente o fundo é padronizado.
   Não altera posição, largura ou estrutura das páginas.
========================================================= */

body.arena-dashboard,
body.notice-admin-body,
body.match-admin-body,
body.competitions-body,
body.stats-body {
  background:
    linear-gradient(
      rgba(2,12,30,.59),
      rgba(2,13,31,.70)
    ),
    url('/img/login-futsal.png')
    center center / cover
    fixed no-repeat;
}



/* ============================================================
   PROFESSOR CARDS V1
   ============================================================ */

.school-teacher-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 18px;

  padding: 22px;
}


.school-teacher-card {
  position: relative;

  min-width: 0;

  padding: 22px;

  overflow: hidden;

  border:
    1px solid
    rgba(117, 226, 255, .15);

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      rgba(10, 39, 68, .72),
      rgba(4, 20, 40, .50)
    );

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.04),
    0 18px 45px
      rgba(0,0,0,.16);

  backdrop-filter:
    blur(16px);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}


.school-teacher-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 22px;
  right: 22px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(111,225,255,.48),
      transparent
    );
}


.school-teacher-card:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(105, 224, 255, .27);

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.05),
    0 22px 55px
      rgba(0,0,0,.20);
}


.school-teacher-card.is-inactive {
  opacity: .64;
}


.school-teacher-card-head {
  display: flex;

  align-items: center;

  gap: 15px;
}


.school-teacher-avatar {
  width: 58px;
  height: 58px;

  flex:
    0 0 58px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(101, 227, 255, .25);

  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(48, 203, 255, .22),
      rgba(40, 88, 255, .10)
    );

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.08);

  color:
    #dffaff;

  font-size:
    20px;

  font-weight:
    900;
}


.school-teacher-identity {
  min-width: 0;

  flex: 1;
}


.school-teacher-role {
  display: block;

  margin-bottom: 5px;

  color:
    #78e8ff;

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    .12em;
}


.school-teacher-identity h3 {
  margin:
    0 0 9px;

  overflow: hidden;

  color:
    #f0fbff;

  font-size:
    17px;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.school-teacher-divider {
  height: 1px;

  margin:
    19px 0;

  background:
    linear-gradient(
      90deg,
      rgba(111,222,255,.15),
      rgba(255,255,255,.045),
      transparent
    );
}


.school-teacher-info {
  min-height: 58px;
}


.school-teacher-info-item {
  min-width: 0;
}


.school-teacher-info-item span {
  display: block;

  margin-bottom: 6px;

  color:
    rgba(184, 225, 243, .54);

  font-size:
    10px;

  font-weight:
    850;

  letter-spacing:
    .10em;
}


.school-teacher-info-item strong {
  display: block;

  overflow: hidden;

  color:
    rgba(235, 249, 255, .90);

  font-size:
    13px;

  font-weight:
    650;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.school-teacher-actions {
  display: flex;

  gap: 9px;

  margin-top: 19px;

  padding-top: 17px;

  border-top:
    1px solid
    rgba(255,255,255,.055);
}


.school-teacher-actions form {
  flex: 1;

  margin: 0;
}


.school-teacher-btn {
  appearance: none;

  width: 100%;
  min-height: 39px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding:
    0 14px;

  border:
    1px solid
    rgba(104, 224, 255, .20);

  border-radius:
    12px;

  background:
    linear-gradient(
      135deg,
      rgba(65, 204, 255, .13),
      rgba(37, 92, 167, .06)
    );

  color:
    #eafaff;

  font:
    inherit;

  font-size:
    12px;

  font-weight:
    800;

  text-decoration:
    none;

  cursor:
    pointer;

  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease;
}


.school-teacher-btn:hover {
  transform:
    translateY(-1px);

  border-color:
    rgba(105, 226, 255, .38);
}


.school-teacher-btn.is-danger {
  border-color:
    rgba(255, 117, 139, .19);

  background:
    linear-gradient(
      135deg,
      rgba(255, 87, 112, .10),
      rgba(120, 31, 53, .04)
    );
}


.school-teacher-btn.is-success {
  border-color:
    rgba(74, 238, 174, .22);

  background:
    linear-gradient(
      135deg,
      rgba(74, 238, 174, .11),
      rgba(17, 103, 75, .04)
    );
}


/* bolinha de status */

.school-teacher-card
.school-users-status i {
  width: 6px;
  height: 6px;

  display: inline-block;

  border-radius:
    50%;

  background:
    currentColor;
}


/* ============================================================
   PROFESSOR CARDS RESPONSIVO
   ============================================================ */

@media (max-width: 1100px) {

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

}


@media (max-width: 700px) {

  .school-teacher-grid {
    grid-template-columns:
      1fr;

    gap:
      13px;

    padding:
      13px;
  }


  .school-teacher-card {
    padding:
      18px;
  }


  .school-teacher-actions {
    flex-direction:
      column;
  }

}



/* ============================================================
   TEACHER HOME CARDS V2
   ============================================================ */

.teacher-home-section {
  width: 100%;
}


.teacher-home-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  margin-bottom: 18px;
}


.teacher-home-heading small {
  display: block;

  margin-bottom: 5px;

  color: #70e5ff;

  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
}


.teacher-home-heading h2 {
  margin: 0;

  color: #f1fbff;

  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.15;
}


.teacher-home-heading p {
  margin: 7px 0 0;

  color: rgba(210,236,248,.58);

  font-size: 13px;
}


.teacher-home-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 16px;
}


.teacher-home-card {
  position: relative;

  min-width: 0;
  min-height: 210px;

  display: flex;
  flex-direction: column;

  padding: 21px;

  overflow: hidden;

  border:
    1px solid
    rgba(105,224,255,.14);

  border-radius: 22px;

  color: inherit;

  text-decoration: none;

  background:
    linear-gradient(
      145deg,
      rgba(9,38,68,.72),
      rgba(3,20,40,.46)
    );

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.045),
    0 16px 42px
      rgba(0,0,0,.15);

  backdrop-filter: blur(15px);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}


.teacher-home-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 20px;
  right: 20px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(90,221,255,.48),
      transparent
    );
}


.teacher-home-card::after {
  content: "";

  position: absolute;

  width: 110px;
  height: 110px;

  top: -55px;
  right: -45px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(47,202,255,.09),
      transparent 70%
    );

  pointer-events: none;
}


.teacher-home-card:hover {
  transform: translateY(-4px);

  border-color:
    rgba(95,226,255,.31);

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.055),
    0 22px 52px
      rgba(0,0,0,.20);
}


.teacher-home-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;
}


.teacher-home-icon {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  flex: 0 0 48px;

  border:
    1px solid
    rgba(92,221,255,.22);

  border-radius: 15px;

  background:
    linear-gradient(
      145deg,
      rgba(46,200,255,.18),
      rgba(39,85,255,.07)
    );

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.055);
}


.teacher-home-icon svg {
  width: 24px;
  height: 24px;

  fill: none;

  stroke: #8eeaff;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.teacher-home-tag {
  padding: 6px 9px;

  border:
    1px solid
    rgba(110,225,255,.12);

  border-radius: 999px;

  color:
    rgba(150,233,255,.72);

  background:
    rgba(60,188,255,.045);

  font-size: 9px;
  font-weight: 900;
  letter-spacing: .10em;
}


.teacher-home-card-body {
  flex: 1;

  padding-top: 20px;
}


.teacher-home-card-body h3 {
  margin: 0 0 8px;

  color: #f2fbff;

  font-size: 18px;
  line-height: 1.2;
}


.teacher-home-card-body p {
  max-width: 260px;

  margin: 0;

  color:
    rgba(203,232,246,.58);

  font-size: 12px;
  line-height: 1.55;
}


.teacher-home-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin-top: 19px;

  padding-top: 14px;

  border-top:
    1px solid
    rgba(255,255,255,.055);
}


.teacher-home-card-footer span {
  color:
    rgba(179,236,250,.78);

  font-size: 11px;
  font-weight: 750;
}


.teacher-home-card-footer strong {
  color: #72e6ff;

  font-size: 23px;
  font-weight: 400;

  transition:
    transform .18s ease;
}


.teacher-home-card:hover
.teacher-home-card-footer strong {
  transform:
    translateX(4px);
}


/* destaque discreto jogos */

.teacher-home-card-game {
  background:
    linear-gradient(
      145deg,
      rgba(8,48,78,.80),
      rgba(3,22,43,.50)
    );
}


/* destaque discreto ranking */

.teacher-home-card-ranking {
  background:
    linear-gradient(
      145deg,
      rgba(16,42,76,.76),
      rgba(12,20,48,.48)
    );
}


/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width: 1050px) {

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

}


@media (max-width: 680px) {

  .teacher-home-heading {
    align-items: flex-start;
    flex-direction: column;
  }


  .teacher-home-grid {
    grid-template-columns: 1fr;

    gap: 12px;
  }


  .teacher-home-card {
    min-height: 190px;

    padding: 18px;
  }

}



/* ============================================================
   PLAYER PORTAL V1
   ============================================================ */

.player-portal-body {
  min-height: 100vh;
  margin: 0;

  color: #eefaff;

  background:
    linear-gradient(
      rgba(2,12,30,.59),
      rgba(2,13,31,.70)
    ),
    url('/img/login-futsal.png')
    center center / cover fixed no-repeat;
}


.player-intro-running {
  overflow: hidden;
}


.player-intro {
  position: fixed;
  inset: 0;

  z-index: 99999;

  display: grid;
  place-items: center;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(18,111,157,.24),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #020b16 0%,
      #03182b 52%,
      #020914 100%
    );

  opacity: 1;

  transition:
    opacity .55s ease,
    visibility .55s ease;
}


.player-intro-exit {
  opacity: 0;
  visibility: hidden;
}


.player-intro-lights::before,
.player-intro-lights::after {
  content: "";

  position: absolute;

  top: -20%;
  bottom: -20%;

  width: 30%;

  filter: blur(25px);

  opacity: .22;

  transform: rotate(18deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(72,218,255,.8),
      transparent
    );

  animation:
    playerLightMove 2s ease-in-out infinite alternate;
}


.player-intro-lights::before {
  left: -5%;
}


.player-intro-lights::after {
  right: -5%;

  animation-delay: .25s;
}


.player-intro-content {
  position: relative;

  z-index: 3;

  width: min(92%, 620px);

  text-align: center;

  animation:
    playerIntroContent .8s ease both;
}


.player-intro-brand {
  min-height: 60px;

  display: grid;
  place-items: center;

  margin-bottom: 14px;
}


.player-intro-brand img {
  max-width: 120px;
  max-height: 70px;

  object-fit: contain;
}


.player-intro-school-icon {
  font-size: 44px;
}


.player-intro-ball {
  margin: 12px 0 20px;

  font-size: 58px;

  filter:
    drop-shadow(
      0 12px 15px rgba(0,0,0,.35)
    );

  animation:
    playerBallEntrance
    1.35s
    cubic-bezier(.18,.75,.26,1)
    both;
}


.player-intro-content > small {
  color: rgba(131,231,255,.76);

  font-size: 10px;
  font-weight: 900;
  letter-spacing: .24em;
}


.player-intro-line {
  width: 0;
  height: 1px;

  margin: 12px auto 17px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #58dcff,
      transparent
    );

  animation:
    playerIntroLine .8s .45s ease forwards;
}


.player-intro-content p {
  margin: 0 0 8px;

  color: rgba(207,239,249,.68);

  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
}


.player-intro-content h1 {
  margin: 0;

  color: #fff;

  font-size:
    clamp(30px, 7vw, 57px);

  line-height: 1;

  text-transform: uppercase;

  text-shadow:
    0 5px 30px rgba(57,216,255,.17);
}


.player-intro-content > strong {
  display: inline-block;

  margin-top: 14px;

  padding: 7px 13px;

  border:
    1px solid rgba(93,224,255,.24);

  border-radius: 999px;

  color: #82e9ff;

  background:
    rgba(57,200,255,.08);

  font-size: 11px;
  letter-spacing: .08em;
}


.player-portal-shell {
  width: min(1180px, calc(100% - 32px));

  margin: 0 auto;

  padding:
    24px 0 42px;

  opacity: 0;

  transform: translateY(12px);

  transition:
    opacity .55s ease,
    transform .55s ease;
}


.player-portal-visible {
  opacity: 1;
  transform: none;
}


.player-portal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 34px;

  padding: 12px 4px;
}


.player-portal-brand {
  display: flex;
  align-items: center;

  gap: 12px;
}


.player-portal-brand img,
.player-school-placeholder {
  width: 46px;
  height: 46px;

  border-radius: 14px;

  object-fit: contain;
}


.player-school-placeholder {
  display: grid;
  place-items: center;

  border:
    1px solid rgba(93,224,255,.17);

  background:
    rgba(14,60,92,.54);
}


.player-portal-brand small {
  display: block;

  margin-bottom: 3px;

  color: #68dfff;

  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
}


.player-portal-brand strong {
  display: block;

  color: #f4fbff;

  font-size: 14px;
}


.player-logout {
  padding: 9px 15px;

  border:
    1px solid rgba(111,222,255,.17);

  border-radius: 12px;

  color: rgba(225,245,252,.82);

  background:
    linear-gradient(
      145deg,
      rgba(21,73,105,.55),
      rgba(5,30,52,.45)
    );

  cursor: pointer;
}


.player-welcome-card {
  position: relative;

  display: flex;
  align-items: center;

  gap: 25px;

  margin-bottom: 18px;

  padding: 30px;

  overflow: hidden;

  border:
    1px solid rgba(87,221,255,.18);

  border-radius: 27px;

  background:
    linear-gradient(
      135deg,
      rgba(10,54,88,.82),
      rgba(5,25,47,.56)
    );

  box-shadow:
    0 24px 55px rgba(0,0,0,.20);

  backdrop-filter: blur(18px);
}


.player-welcome-card::after {
  content: "";

  position: absolute;

  width: 250px;
  height: 250px;

  right: -100px;
  top: -130px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(54,211,255,.12),
      transparent 70%
    );
}


.player-avatar {
  position: relative;

  z-index: 2;

  width: 88px;
  height: 88px;

  flex: 0 0 88px;

  display: grid;
  place-items: center;

  overflow: hidden;

  border:
    2px solid rgba(105,230,255,.34);

  border-radius: 24px;

  color: #9cecff;

  background:
    linear-gradient(
      145deg,
      rgba(46,192,244,.18),
      rgba(21,55,101,.34)
    );

  font-size: 35px;
  font-weight: 900;
}


.player-avatar img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


.player-welcome-info {
  position: relative;

  z-index: 2;
}


.player-welcome-info small {
  color: #6be1ff;

  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
}


.player-welcome-info h1 {
  margin: 5px 0 7px;

  font-size:
    clamp(25px, 4vw, 38px);

  color: #fff;
}


.player-welcome-info p {
  margin: 0;

  color: rgba(208,235,246,.66);

  font-size: 13px;
}


.player-badges {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;

  margin-top: 15px;
}


.player-badges span {
  padding: 6px 10px;

  border:
    1px solid rgba(100,222,255,.13);

  border-radius: 999px;

  color: rgba(213,242,250,.78);

  background:
    rgba(46,172,218,.07);

  font-size: 10px;
  font-weight: 700;
}


.player-dashboard-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 14px;
}


.player-dashboard-card {
  min-height: 185px;

  padding: 20px;

  border:
    1px solid rgba(104,222,255,.13);

  border-radius: 21px;

  background:
    linear-gradient(
      145deg,
      rgba(8,39,67,.72),
      rgba(4,22,42,.51)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 14px 35px rgba(0,0,0,.13);

  backdrop-filter: blur(14px);
}


.player-dashboard-icon {
  margin-bottom: 19px;

  font-size: 25px;
}


.player-dashboard-card small {
  color: #65defc;

  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
}


.player-dashboard-card h2 {
  margin: 7px 0;

  color: #f4fbff;

  font-size: 18px;
}


.player-dashboard-card p {
  margin: 0;

  color: rgba(203,232,244,.55);

  font-size: 11px;
  line-height: 1.55;
}


.player-categories-panel {
  margin-top: 16px;

  padding: 22px;

  border:
    1px solid rgba(104,222,255,.13);

  border-radius: 21px;

  background:
    rgba(4,25,46,.57);

  backdrop-filter: blur(14px);
}


.player-categories-panel > small {
  color: #66dffd;

  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
}


.player-categories-panel h2 {
  margin: 6px 0 15px;

  color: #fff;

  font-size: 19px;
}


.player-category-list {
  display: flex;
  flex-wrap: wrap;

  gap: 9px;
}


.player-category-item {
  display: flex;
  align-items: center;

  gap: 9px;

  padding: 9px 12px;

  border:
    1px solid rgba(100,220,255,.12);

  border-radius: 12px;

  background:
    rgba(45,164,207,.06);
}


.player-category-item span {
  font-size: 12px;
}


.player-category-item strong {
  color: #78e5ff;

  font-size: 9px;
  text-transform: uppercase;
}


.player-portal-footer {
  display: flex;
  align-items: center;
  justify-content: center;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 35px;

  color: rgba(194,224,236,.37);

  font-size: 10px;
}


.player-portal-footer i {
  width: 3px;
  height: 3px;

  border-radius: 50%;

  background: #4bdcff;
}

.portal-support-links {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-left: 14px;
  font-size: .82rem;
}

.portal-support-links a {
  color: #8ed8ff;
  text-decoration: none;
  font-weight: 700;
}

.portal-support-links a:hover,
.portal-support-links a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 700px) {
  .portal-support-links {
    display: flex;
    margin: 10px 0 0;
  }
}


@keyframes playerBallEntrance {

  0% {
    opacity: 0;
    transform:
      translateY(-90px)
      rotate(-180deg)
      scale(.55);
  }

  65% {
    opacity: 1;
    transform:
      translateY(8px)
      rotate(18deg)
      scale(1.05);
  }

  100% {
    opacity: 1;
    transform:
      translateY(0)
      rotate(0)
      scale(1);
  }

}


@keyframes playerIntroContent {

  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: none;
  }

}


@keyframes playerIntroLine {

  to {
    width: 170px;
  }

}


@keyframes playerLightMove {

  from {
    transform:
      translateX(-10px)
      rotate(18deg);
  }

  to {
    transform:
      translateX(35px)
      rotate(18deg);
  }

}


@media (max-width: 900px) {

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

}


@media (max-width: 600px) {

  .player-portal-shell {
    width:
      min(100% - 22px, 1180px);

    padding-top: 12px;
  }


  .player-portal-header {
    margin-bottom: 20px;
  }


  .player-portal-brand strong {
    max-width: 190px;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
  }


  .player-welcome-card {
    align-items: flex-start;

    padding: 20px;

    border-radius: 22px;
  }


  .player-avatar {
    width: 67px;
    height: 67px;

    flex-basis: 67px;

    border-radius: 19px;

    font-size: 27px;
  }


  .player-dashboard-grid {
    grid-template-columns: 1fr;

    gap: 10px;
  }


  .player-dashboard-card {
    min-height: 145px;
  }


  .player-intro-ball {
    font-size: 49px;
  }

}


@media (
  prefers-reduced-motion: reduce
) {

  .player-intro *,
  .player-portal-shell {
    animation: none !important;
    transition: none !important;
  }

}



/* ============================================================
   PLAYER ACCESS CARD V1
   ============================================================ */

.player-access-panel {
  margin: 18px 0;

  padding: 24px;

  border:
    1px solid rgba(91,220,255,.16);

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      rgba(7,42,72,.77),
      rgba(4,24,45,.58)
    );

  box-shadow:
    0 18px 44px rgba(0,0,0,.14);

  backdrop-filter: blur(16px);
}


.player-access-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;

  margin-bottom: 22px;
}


.player-access-heading small {
  color: #63dfff;

  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
}


.player-access-heading h2 {
  margin: 5px 0 5px;

  color: #f5fbff;

  font-size: 21px;
}


.player-access-heading p {
  margin: 0;

  color: rgba(203,232,244,.56);

  font-size: 12px;
}


.player-access-status {
  display: flex;
  align-items: center;

  gap: 7px;

  padding: 7px 11px;

  border-radius: 999px;

  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}


.player-access-status span {
  width: 7px;
  height: 7px;

  border-radius: 50%;
}


.player-access-status.active {
  color: #89f7bf;

  border:
    1px solid rgba(76,224,145,.20);

  background:
    rgba(52,211,153,.08);
}


.player-access-status.active span {
  background: #4ee39a;

  box-shadow:
    0 0 10px rgba(78,227,154,.65);
}


.player-access-status.inactive {
  color: #ff9caa;

  border:
    1px solid rgba(255,105,125,.20);

  background:
    rgba(255,83,105,.08);
}


.player-access-status.inactive span {
  background: #ff7186;
}


.player-access-status.pending {
  color: #b9d6e2;

  border:
    1px solid rgba(180,220,235,.13);

  background:
    rgba(120,180,210,.06);
}


.player-access-status.pending span {
  background: #8ba9b6;
}


.player-access-empty {
  display: flex;
  align-items: center;

  gap: 18px;

  padding: 18px;

  border:
    1px solid rgba(102,222,255,.10);

  border-radius: 17px;

  background:
    rgba(17,68,99,.13);
}


.player-access-icon {
  width: 52px;
  height: 52px;

  flex: 0 0 52px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(99,224,255,.15);

  border-radius: 16px;

  background:
    rgba(45,184,230,.08);

  font-size: 24px;
}


.player-access-empty strong {
  color: #ecfaff;

  font-size: 14px;
}


.player-access-empty p {
  margin: 5px 0 0;

  color: rgba(197,229,240,.55);

  font-size: 11px;
}


.player-access-email-preview {
  margin-top: 12px;
}


.player-access-email-preview span {
  display: block;

  color: rgba(184,220,233,.42);

  font-size: 9px;
  text-transform: uppercase;
}


.player-access-email-preview strong {
  display: block;

  margin-top: 3px;

  color: #78e6ff;

  font-size: 12px;
}


.player-access-form,
.player-access-password {
  display: flex;
  align-items: flex-end;

  gap: 10px;

  margin-top: 17px;
}


.player-access-form label,
.player-access-password label {
  flex: 1;
}


.player-access-form label span,
.player-access-password label span {
  display: block;

  margin-bottom: 6px;

  color: rgba(205,235,245,.67);

  font-size: 10px;
  font-weight: 700;
}


.player-access-form input,
.player-access-password input {
  width: 100%;

  box-sizing: border-box;

  padding: 11px 12px;

  border:
    1px solid rgba(102,220,255,.15);

  border-radius: 12px;

  outline: none;

  color: #eefaff;

  background:
    rgba(2,18,35,.58);
}


.player-access-form input:focus,
.player-access-password input:focus {
  border-color:
    rgba(91,221,255,.45);

  box-shadow:
    0 0 0 3px rgba(70,207,255,.07);
}


.player-access-form button,
.player-access-password button,
.player-access-toggle {
  padding: 11px 15px;

  border:
    1px solid rgba(98,224,255,.18);

  border-radius: 12px;

  color: #eafbff;

  background:
    linear-gradient(
      145deg,
      rgba(32,158,207,.62),
      rgba(16,89,130,.72)
    );

  font-weight: 800;
  cursor: pointer;
}


.player-access-account {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0,1fr));

  gap: 12px;
}


.player-access-account > div {
  padding: 14px;

  border:
    1px solid rgba(101,221,255,.10);

  border-radius: 14px;

  background:
    rgba(20,67,97,.13);
}


.player-access-account span {
  display: block;

  margin-bottom: 4px;

  color: rgba(190,225,237,.45);

  font-size: 9px;
  text-transform: uppercase;
}


.player-access-account strong {
  color: #e8f8fd;

  font-size: 12px;
}


.player-access-actions {
  display: flex;
  align-items: flex-end;

  gap: 10px;

  margin-top: 16px;
}


.player-access-actions
.player-access-password {
  flex: 1;

  margin-top: 0;
}


.player-access-toggle.danger {
  border-color:
    rgba(255,103,123,.18);

  background:
    linear-gradient(
      145deg,
      rgba(145,40,60,.62),
      rgba(91,22,39,.72)
    );
}


.player-access-toggle.success {
  border-color:
    rgba(78,226,151,.18);

  background:
    linear-gradient(
      145deg,
      rgba(27,139,93,.65),
      rgba(18,87,63,.72)
    );
}


.player-access-warning,
.player-access-note {
  margin-top: 15px;

  padding: 11px 13px;

  border-radius: 12px;

  font-size: 11px;
}


.player-access-warning {
  color: #ffd7a3;

  border:
    1px solid rgba(255,194,107,.15);

  background:
    rgba(178,114,32,.08);
}


.player-access-note {
  color: rgba(205,233,243,.58);

  border:
    1px solid rgba(111,215,245,.09);

  background:
    rgba(57,136,171,.06);
}


@media (max-width: 700px) {

  .player-access-heading {
    flex-direction: column;
  }


  .player-access-form,
  .player-access-password,
  .player-access-actions {
    align-items: stretch;
    flex-direction: column;
  }


  .player-access-account {
    grid-template-columns: 1fr;
  }


  .player-access-form button,
  .player-access-password button,
  .player-access-toggle {
    width: 100%;
  }

}



/* ==========================================================
   PLAYER NEXT MATCH V1
========================================================== */

.player-next-match-card {
  position: relative;
  overflow: hidden;
}

.player-next-match-card::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -70px;
  bottom: -70px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(34,211,238,.15),
      transparent 70%
    );
  pointer-events: none;
}

.player-match-category {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 8px;
  padding: 5px 10px;
  border: 1px solid rgba(34,211,238,.22);
  border-radius: 999px;
  background: rgba(34,211,238,.08);
  color: #9beaf5;
  font-size: 12px;
  font-weight: 700;
}

.player-match-info {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.player-match-info > div {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(235,247,255,.82);
  font-size: 13px;
}

.player-match-info span {
  width: 20px;
  text-align: center;
}

.player-match-info strong {
  font-weight: 600;
}

.player-convocation-box {
  margin-top: 17px;
}

.player-convocation-status {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
}

.player-convocation-status.is-confirmed {
  border: 1px solid rgba(52,211,153,.32);
  background: rgba(52,211,153,.12);
  color: #86efac;
}

.player-convocation-status.is-called {
  border: 1px solid rgba(34,211,238,.32);
  background: rgba(34,211,238,.12);
  color: #a5f3fc;
}

.player-convocation-status.is-declined,
.player-convocation-status.is-absent {
  border: 1px solid rgba(251,113,133,.30);
  background: rgba(251,113,133,.10);
  color: #fda4af;
}

.player-convocation-status.is-waiting {
  border: 1px solid rgba(148,163,184,.25);
  background: rgba(148,163,184,.09);
  color: #cbd5e1;
}


/* ==========================================================
   DELETE ACTION V1
========================================================== */

.school-users-delete-action {
  appearance: none;
  border: 1px solid rgba(255, 90, 110, .55);
  background:
    linear-gradient(
      135deg,
      rgba(150, 22, 45, .48),
      rgba(90, 10, 32, .38)
    );
  color: #ffdce2;
  border-radius: 10px;
  padding: 8px 12px;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}

.school-users-delete-action:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 110, 130, .9);
  box-shadow:
    0 8px 22px rgba(100, 0, 25, .25);
}

.school-delete-form {
  display: inline-flex;
  margin: 0;
}


/* ==========================================================
   GUARDIAN MANAGEMENT V1
========================================================== */

.guardian-admin-page {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 42px 0 70px;
}

.guardian-admin-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.guardian-admin-hero h1 {
  margin: 10px 0 8px;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
}

.guardian-admin-hero p {
  margin: 0;
  color: rgba(225, 239, 250, .7);
  max-width: 650px;
}

.guardian-admin-card,
.guardian-danger-card {
  border: 1px solid rgba(95, 202, 255, .15);
  background:
    linear-gradient(
      145deg,
      rgba(7, 27, 51, .86),
      rgba(5, 18, 39, .72)
    );
  backdrop-filter: blur(18px);
  border-radius: 22px;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, .28);
}

.guardian-admin-card {
  padding: 28px;
}

.guardian-admin-section-heading small,
.guardian-danger-card small {
  color: #53d9ff;
  font-size: .72rem;
  letter-spacing: .16em;
  font-weight: 800;
}

.guardian-admin-section-heading h2,
.guardian-danger-card h2 {
  margin: 5px 0 0;
}

.guardian-admin-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.guardian-admin-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.guardian-admin-field-wide {
  grid-column: 1 / -1;
}

.guardian-admin-field > span {
  color: rgba(235, 247, 255, .88);
  font-size: .86rem;
  font-weight: 700;
}

.guardian-admin-field input,
.guardian-admin-field select {
  width: 100%;
  border: 1px solid rgba(90, 195, 250, .18);
  background: rgba(2, 15, 31, .67);
  color: #edf9ff;
  border-radius: 12px;
  padding: 13px 14px;
  outline: none;
}

.guardian-admin-field input:focus,
.guardian-admin-field select:focus {
  border-color: rgba(61, 212, 255, .75);
  box-shadow:
    0 0 0 3px rgba(34, 211, 238, .08);
}

.guardian-admin-field small {
  color: rgba(205, 226, 241, .55);
}

.guardian-admin-divider {
  height: 1px;
  background: rgba(100, 200, 255, .10);
  margin: 30px 0;
}

.guardian-admin-status {
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid rgba(94, 202, 255, .14);
  background: rgba(5, 24, 46, .58);
  border-radius: 14px;
  padding: 16px;
}

.guardian-admin-status input {
  width: 20px;
  height: 20px;
}

.guardian-admin-status div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.guardian-admin-status span {
  color: rgba(220, 237, 248, .6);
  font-size: .82rem;
}

.guardian-admin-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 28px;
}

.guardian-save-button {
  border: 0;
  cursor: pointer;
  font: inherit;
}

.guardian-danger-card {
  margin-top: 22px;
  padding: 24px 28px;
  border-color: rgba(255, 82, 110, .22);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.guardian-danger-card p {
  color: rgba(235, 230, 235, .66);
  max-width: 720px;
  margin-bottom: 0;
}

@media (max-width: 760px) {

  .guardian-admin-hero,
  .guardian-danger-card {
    align-items: stretch;
    flex-direction: column;
  }

  .guardian-admin-grid {
    grid-template-columns: 1fr;
  }

  .guardian-admin-field-wide {
    grid-column: auto;
  }

  .guardian-admin-actions {
    flex-direction: column;
  }

}


/* ==========================================================
   PLAYER MANAGEMENT V1
========================================================== */

.player-admin-page {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 42px 0 70px;
}

.player-admin-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 24px;
}

.player-admin-hero h1 {
  margin: 10px 0 8px;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
}

.player-admin-hero p,
.player-admin-actions-heading p {
  color: rgba(220, 238, 250, .68);
}

.player-admin-card,
.player-admin-actions-panel,
.player-permanent-delete-card {
  border: 1px solid rgba(80, 200, 255, .16);
  background:
    linear-gradient(
      145deg,
      rgba(7, 27, 51, .88),
      rgba(5, 18, 39, .74)
    );
  backdrop-filter: blur(18px);
  border-radius: 22px;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, .28);
}

.player-admin-card {
  padding: 28px;
}

.player-admin-section small,
.player-admin-actions-heading small,
.player-permanent-delete-card small {
  color: #52d9ff;
  letter-spacing: .16em;
  font-size: .72rem;
  font-weight: 800;
}

.player-admin-section h2,
.player-admin-actions-heading h2,
.player-permanent-delete-card h2 {
  margin: 5px 0 0;
}

.player-admin-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.player-admin-wide {
  grid-column: 1 / -1;
}

.player-admin-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.player-admin-field > span {
  color: rgba(235, 247, 255, .9);
  font-size: .86rem;
  font-weight: 700;
}

.player-admin-field input,
.player-admin-field select,
.player-admin-field textarea {
  width: 100%;
  border: 1px solid rgba(90, 195, 250, .18);
  background: rgba(2, 15, 31, .68);
  color: #edf9ff;
  border-radius: 12px;
  padding: 13px 14px;
  outline: none;
  font: inherit;
}

.player-admin-field textarea {
  resize: vertical;
}

.player-admin-field input:focus,
.player-admin-field select:focus,
.player-admin-field textarea:focus {
  border-color: rgba(61, 212, 255, .75);
  box-shadow:
    0 0 0 3px rgba(34, 211, 238, .08);
}

.player-admin-field small {
  color: rgba(205, 226, 241, .56);
}

.player-admin-divider {
  height: 1px;
  margin: 30px 0;
  background: rgba(100, 200, 255, .10);
}

.player-admin-status-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.player-admin-status {
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid rgba(94, 202, 255, .14);
  background: rgba(5, 24, 46, .58);
  border-radius: 14px;
  padding: 16px;
}

.player-admin-status input {
  width: 20px;
  height: 20px;
}

.player-admin-status div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.player-admin-status span {
  font-size: .82rem;
  color: rgba(220, 237, 248, .60);
}

.player-admin-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 28px;
}

.player-save-button,
.player-action-button {
  font: inherit;
  cursor: pointer;
}

.player-admin-actions-panel,
.player-permanent-delete-card {
  margin-top: 22px;
  padding: 24px 28px;
}

.player-admin-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.player-admin-action-buttons form {
  margin: 0;
}

.player-action-button {
  height: 100%;
}

.player-permanent-delete-card {
  border-color: rgba(255, 80, 110, .24);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.player-permanent-delete-card p {
  max-width: 720px;
  margin-bottom: 0;
  color: rgba(235, 230, 235, .66);
}

@media (max-width: 760px) {

  .player-admin-hero,
  .player-permanent-delete-card {
    flex-direction: column;
    align-items: stretch;
  }

  .player-admin-grid,
  .player-admin-status-grid {
    grid-template-columns: 1fr;
  }

  .player-admin-wide {
    grid-column: auto;
  }

  .player-admin-actions,
  .player-admin-action-buttons {
    flex-direction: column;
  }

}


/* ==========================================================
   ADMIN USERS CARDS FIX V1
========================================================== */

.school-users-stats {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.school-users-stats .arena-stat-card {
  min-height: 132px;
  height: 100%;
}

.school-users-summary-card {
  position: relative;
  overflow: hidden;
}

.school-users-summary-card::after {
  content: "";
  position: absolute;
  width: 110px;
  height: 110px;
  right: -45px;
  top: -45px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(51, 211, 255, .15),
      transparent 70%
    );
  pointer-events: none;
}

.school-users-guardian-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.school-users-page .school-users-panel {
  width: 100%;
}

@media (max-width: 900px) {

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

}

@media (max-width: 620px) {

  .school-users-stats {
    grid-template-columns: 1fr;
  }

}



/* ==========================================================
   PUBLIC SCHOOL SIGNUP V1
   ========================================================== */

.public-signup-login {
  margin-top: 18px;
  display: grid;
  gap: 10px;
  text-align: center;
}

.public-signup-login > span {
  font-size: .78rem;
  color: rgba(220,235,255,.68);
}

.public-signup-login-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 18px;
  border: 1px solid rgba(63,211,255,.34);
  border-radius: 14px;
  background:
    linear-gradient(
      135deg,
      rgba(0,174,255,.13),
      rgba(14,75,160,.08)
    );
  box-shadow:
    inset 0 0 24px rgba(0,180,255,.04);
  color: #dff7ff;
  text-decoration: none;
  font-weight: 800;
  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.public-signup-login-button:hover {
  transform: translateY(-2px);
  border-color: rgba(69,221,255,.72);
  box-shadow:
    0 12px 30px rgba(0,137,255,.12),
    inset 0 0 26px rgba(0,180,255,.07);
}


.public-school-signup {
  width: min(1180px, calc(100% - 36px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 52px 0;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  align-items: center;
  gap: 54px;
}

.signup-brand {
  color: #fff;
}

.signup-back {
  display: inline-flex;
  margin-bottom: 34px;
  color: rgba(220,238,255,.72);
  text-decoration: none;
  font-weight: 700;
}

.signup-logo {
  width: 112px;
  display: block;
  margin-bottom: 22px;
  filter:
    drop-shadow(
      0 0 24px rgba(0,191,255,.32)
    );
}

.signup-kicker {
  display: block;
  margin-bottom: 8px;
  color: #52dcff;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .22em;
}

.signup-brand h1 {
  margin: 0;
  max-width: 520px;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  line-height: .96;
}

.signup-brand > p {
  max-width: 520px;
  margin: 22px 0 0;
  color: rgba(220,235,255,.72);
  line-height: 1.7;
}

.signup-plan-card {
  max-width: 360px;
  margin-top: 32px;
  padding: 20px 22px;
  border: 1px solid rgba(64,214,255,.26);
  border-radius: 20px;
  background:
    linear-gradient(
      135deg,
      rgba(5,36,72,.68),
      rgba(2,16,39,.55)
    );
  backdrop-filter: blur(14px);
}

.signup-plan-card > span {
  color: #5ce3ff;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .16em;
}

.signup-plan-card > strong {
  display: block;
  margin-top: 8px;
  font-size: 2rem;
}

.signup-plan-card small {
  font-size: .9rem;
  color: rgba(220,235,255,.6);
}

.signup-plan-card p {
  margin: 8px 0 0;
  color: rgba(220,235,255,.62);
  font-size: .84rem;
}


.signup-form-card {
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(102,209,255,.19);
  border-radius: 28px;
  background:
    linear-gradient(
      145deg,
      rgba(5,24,50,.91),
      rgba(3,15,35,.83)
    );
  box-shadow:
    0 30px 90px rgba(0,0,0,.38),
    inset 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(20px);
  color: #fff;
}

.signup-form-card header > span {
  color: #4adfff;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .18em;
}

.signup-form-card header h2 {
  margin: 8px 0 6px;
  font-size: 1.8rem;
}

.signup-form-card header p {
  margin: 0;
  color: rgba(220,235,255,.62);
  line-height: 1.5;
}

.signup-section-title {
  margin: 28px 0 14px;
  padding-bottom: 9px;
  border-bottom:
    1px solid rgba(100,200,255,.12);
  color: #8feaff;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.signup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.signup-field {
  display: grid;
  gap: 7px;
}

.signup-field-wide {
  grid-column: 1 / -1;
}

.signup-field span {
  color: rgba(224,239,255,.76);
  font-size: .8rem;
  font-weight: 700;
}

.signup-field input {
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  padding: 0 14px;
  border:
    1px solid rgba(116,203,255,.18);
  border-radius: 13px;
  outline: none;
  background: rgba(1,13,30,.54);
  color: #fff;
}

.signup-field input:focus {
  border-color: rgba(65,218,255,.7);
  box-shadow:
    0 0 0 3px rgba(0,190,255,.08);
}

.signup-consent {
  margin-top: 22px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(220,235,255,.68);
  font-size: .78rem;
  line-height: 1.5;
}

.signup-consent input {
  margin-top: 3px;
}

.signup-submit {
  width: 100%;
  min-height: 54px;
  margin-top: 20px;
  padding: 0 20px;
  border:
    1px solid rgba(68,222,255,.5);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background:
    linear-gradient(
      135deg,
      rgba(0,176,255,.84),
      rgba(23,89,210,.78)
    );
  box-shadow:
    0 15px 34px rgba(0,117,255,.18);
  color: #fff;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}


.signup-result-page {
  width: min(760px, calc(100% - 34px));
  min-height: 100vh;
  margin: 0 auto;
  display: grid;
  place-items: center;
  padding: 40px 0;
}

.signup-result-card {
  width: 100%;
  box-sizing: border-box;
  padding: clamp(28px, 5vw, 48px);
  border:
    1px solid rgba(86,217,255,.22);
  border-radius: 28px;
  background:
    linear-gradient(
      145deg,
      rgba(5,26,54,.92),
      rgba(2,15,34,.88)
    );
  box-shadow:
    0 30px 100px rgba(0,0,0,.4);
  color: #fff;
  text-align: center;
}

.signup-result-logo {
  width: 94px;
  margin-bottom: 18px;
}

.signup-result-status {
  display: block;
  color: #55e0ff;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .18em;
}

.signup-result-card h1 {
  margin: 10px 0;
}

.signup-result-card > p {
  color: rgba(220,235,255,.68);
}

.signup-result-info {
  margin: 28px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.signup-result-info div {
  padding: 16px;
  border:
    1px solid rgba(100,205,255,.12);
  border-radius: 15px;
  background: rgba(2,15,34,.48);
}

.signup-result-info span {
  display: block;
  color: rgba(220,235,255,.52);
  font-size: .72rem;
}

.signup-result-info strong {
  display: block;
  margin-top: 5px;
}

.signup-payment-placeholder {
  padding: 22px;
  border:
    1px dashed rgba(72,218,255,.32);
  border-radius: 18px;
  background: rgba(0,174,255,.045);
}

.signup-payment-placeholder > span {
  color: #54dfff;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .14em;
}

.signup-payment-placeholder h2 {
  margin: 7px 0;
}

.signup-payment-placeholder p {
  margin: 0;
  color: rgba(220,235,255,.64);
}

.signup-login-link {
  display: inline-flex;
  margin-top: 24px;
  color: #8ceaff;
  text-decoration: none;
  font-weight: 800;
}


@media (max-width: 850px) {

  .public-school-signup {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 30px 0;
  }

  .signup-brand h1 {
    font-size: 2.8rem;
  }

}

@media (max-width: 560px) {

  .signup-grid,
  .signup-result-info {
    grid-template-columns: 1fr;
  }

  .signup-field-wide {
    grid-column: auto;
  }

}


/* ==========================================================
   SAAS PIX / BOLETO V1
   ========================================================== */

.subscription-payment-methods {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.subscription-payment-method {
  min-height: 100px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  border:
    1px solid rgba(72,218,255,.25);
  border-radius: 18px;
  background:
    linear-gradient(
      135deg,
      rgba(0,174,255,.09),
      rgba(5,29,61,.42)
    );
  color: #fff;
  text-align: left;
}

.subscription-payment-method:disabled {
  opacity: .72;
}

.subscription-payment-icon {
  font-size: 1.8rem;
}

.subscription-payment-method strong {
  display: block;
  margin-bottom: 5px;
}

.subscription-payment-method small {
  color: rgba(220,235,255,.58);
}

.subscription-payment-dev-note {
  margin-top: 18px;
  color: rgba(220,235,255,.48);
  font-size: .76rem;
}


@media (max-width: 560px) {

  .subscription-payment-methods {
    grid-template-columns: 1fr;
  }

}


/* ==========================================================
   SAAS PIX ACTIVE V1
   ========================================================== */

.subscription-payment-methods form {
  margin: 0;
}

.subscription-payment-method:not(:disabled) {
  cursor: pointer;
}

.subscription-payment-method:not(:disabled):hover {
  transform: translateY(-2px);
  border-color: rgba(72,218,255,.62);
}

.saas-pix-result {
  margin-top: 28px;
  padding: 22px;
  border:
    1px solid rgba(72,218,255,.23);
  border-radius: 20px;
  background:
    rgba(0,174,255,.05);
}

.saas-pix-result h2 {
  margin: 8px 0 20px;
}

.saas-pix-qrcode {
  width: min(280px, 90%);
  margin: 0 auto 20px;
  display: block;
  padding: 10px;
  border-radius: 18px;
  background: #fff;
}

.saas-pix-copy {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  text-align: left;
}

.saas-pix-copy span {
  color: rgba(220,235,255,.68);
  font-size: .76rem;
  font-weight: 800;
}

.saas-pix-copy textarea {
  width: 100%;
  min-height: 108px;
  box-sizing: border-box;
  padding: 12px;
  resize: vertical;
  border:
    1px solid rgba(72,218,255,.18);
  border-radius: 13px;
  background: rgba(1,13,30,.6);
  color: #fff;
  font: inherit;
  font-size: .75rem;
}


/* ==========================================================
   SAAS ACCESS CONTROL V1
   ========================================================== */

.saas-blocked-box,
.saas-grace-box,
.saas-access-ok {
  margin: 24px 0;
  padding: 20px;
  border-radius: 18px;
  text-align: left;
}

.saas-blocked-box {
  border:
    1px solid rgba(255,91,91,.30);
  background:
    rgba(255,60,60,.08);
}

.saas-blocked-box span {
  display: block;
  margin-bottom: 6px;
  color: #ff8b8b;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .09em;
}

.saas-blocked-box h2 {
  margin:
    0 0 8px;
}

.saas-blocked-box p,
.saas-grace-box p,
.saas-access-ok p {
  margin: 0;
  color:
    rgba(220,235,255,.65);
  line-height: 1.5;
}

.saas-grace-box {
  border:
    1px solid rgba(255,194,72,.30);
  background:
    rgba(255,176,32,.08);
}

.saas-grace-box strong {
  display: block;
  margin-bottom: 7px;
  color: #ffd073;
}

.saas-access-ok {
  border:
    1px solid rgba(57,218,143,.28);
  background:
    rgba(57,218,143,.07);
}

.saas-access-ok strong {
  display: block;
  margin-bottom: 7px;
  color: #69e6aa;
}

.saas-pay-link {
  margin-top: 24px;
  text-decoration: none;
}

.saas-last-payment {
  margin-top: 18px;
  padding: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border:
    1px solid rgba(72,218,255,.12);
  border-radius: 14px;
  background:
    rgba(0,174,255,.035);
}

.saas-last-payment span {
  color:
    rgba(220,235,255,.55);
  font-size: .76rem;
}

.saas-status-actions {
  margin-top: 22px;
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}


/* ============================================================
   SAAS SUBSCRIPTION UI V2
   ============================================================ */

.saas-subscription-notice {
  margin: 18px 0;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  text-align: left;
}

.saas-subscription-notice strong {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 800;
}

.saas-subscription-notice p {
  margin: 0;
  line-height: 1.5;
  opacity: .88;
}

.saas-subscription-notice-info {
  border-color: rgba(59,130,246,.38);
  background: rgba(59,130,246,.10);
}

.saas-subscription-notice-warning {
  border-color: rgba(245,158,11,.42);
  background: rgba(245,158,11,.10);
}

.saas-subscription-notice-danger {
  border-color: rgba(239,68,68,.42);
  background: rgba(239,68,68,.11);
}




/* ============================================================
   SAAS TOP NAV BADGE V1
   ============================================================ */

.saas-nav-subscription-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.saas-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 18px;
  padding: 2px 7px;

  border-radius: 999px;

  font-size: 10px;
  font-weight: 800;
  line-height: 1;

  border: 1px solid rgba(255,255,255,.12);
}

.saas-nav-badge-info {
  background: rgba(59,130,246,.16);
  border-color: rgba(59,130,246,.32);
}

.saas-nav-badge-warning {
  background: rgba(245,158,11,.16);
  border-color: rgba(245,158,11,.34);
}

.saas-nav-badge-danger {
  background: rgba(239,68,68,.18);
  border-color: rgba(239,68,68,.38);
}




/* ============================================================
   SAAS DASHBOARD ALERT V1
   ============================================================ */

.saas-dashboard-alert {
  width: min(1180px, calc(100% - 32px));
  margin: 18px auto 0;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  padding: 16px 18px;

  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);

  backdrop-filter: blur(10px);
}

.saas-dashboard-alert-content {
  display: flex;
  align-items: center;
  gap: 14px;
}

.saas-dashboard-alert-icon {
  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  font-size: 18px;
  font-weight: 900;

  background: rgba(255,255,255,.08);
}

.saas-dashboard-alert strong {
  display: block;

  margin-bottom: 4px;

  font-size: 14px;
  font-weight: 900;
}

.saas-dashboard-alert p {
  margin: 0;

  font-size: 13px;
  line-height: 1.45;

  opacity: .82;
}

.saas-dashboard-alert-info {
  background: rgba(59,130,246,.10);
  border-color: rgba(59,130,246,.30);
}

.saas-dashboard-alert-warning {
  background: rgba(245,158,11,.10);
  border-color: rgba(245,158,11,.34);
}

.saas-dashboard-alert-danger {
  background: rgba(239,68,68,.11);
  border-color: rgba(239,68,68,.36);
}

.saas-dashboard-alert-button {
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 40px;

  padding: 0 16px;

  border-radius: 12px;

  text-decoration: none;

  font-size: 12px;
  font-weight: 900;

  border: 1px solid rgba(255,255,255,.14);

  background: rgba(255,255,255,.08);
}

.player-history-panel {
  margin-top: 28px;
  padding: 24px;
  border: 1px solid rgba(147, 181, 222, .2);
  border-radius: 20px;
  background: rgba(6, 25, 52, .78);
}

.player-history-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 18px;
}

.player-history-heading h2 { margin: 5px 0; color: #fff; }
.player-history-heading p { margin: 0; color: #aebfd7; }
.player-history-summary { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; }
.player-history-summary span { padding: 9px 11px; border-radius: 10px; background: rgba(29, 75, 125, .45); color: #bdd5f2; font-size: .82rem; }
.player-history-summary strong { color: #78ddff; font-size: 1.15rem; }
.player-history-list { display: grid; gap: 10px; }
.player-history-item { display: grid; grid-template-columns: 105px minmax(0, 1fr) 85px minmax(150px, auto); align-items: center; gap: 15px; padding: 14px 16px; border-left: 4px solid #6884a7; border-radius: 12px; background: rgba(14, 42, 77, .72); color: #dce9f8; }
.player-history-win { border-left-color: #4ade80; }
.player-history-loss { border-left-color: #fb7185; }
.player-history-draw { border-left-color: #fbbf24; }
.player-history-date, .player-history-main, .player-history-score { display: grid; gap: 3px; }
.player-history-date strong, .player-history-score strong { color: #fff; }
.player-history-date small, .player-history-main span, .player-history-main small, .player-history-score small { color: #9fb5d2; font-size: .8rem; }
.player-history-score { text-align: center; }
.player-history-events { display: flex; gap: 9px; justify-content: flex-end; color: #b9d5ef; font-size: .84rem; }
.player-history-empty { padding: 25px; border-radius: 12px; background: rgba(15, 45, 83, .5); color: #b8c9df; text-align: center; }
.family-sport-history-card { grid-column: 1 / -1; }
.family-sport-history-list { display: grid; gap: 9px; margin-top: 14px; }
.family-sport-history-item { display: grid; grid-template-columns: 120px minmax(0, 1fr) 100px minmax(170px, auto); gap: 14px; align-items: center; padding: 13px 15px; border-radius: 12px; background: rgba(14, 42, 77, .68); color: #dce9f8; }
.family-sport-history-item > div { display: grid; gap: 3px; }
.family-sport-history-item strong { color: #fff; }
.family-sport-history-item span, .family-sport-history-item small { color: #9fb5d2; font-size: .8rem; }
@media (max-width: 760px) { .family-sport-history-item { grid-template-columns: 1fr 1fr; } }

@media (max-width: 760px) {
  .player-history-heading { display: block; }
  .player-history-summary { justify-content: flex-start; margin-top: 15px; }
  .player-history-item { grid-template-columns: 1fr auto; }
  .player-history-date, .player-history-main { grid-column: 1; }
  .player-history-score { grid-column: 2; grid-row: 1 / span 2; }
  .player-history-events { grid-column: 1 / -1; justify-content: flex-start; }
}

.saas-dashboard-alert-button:hover {
  transform: translateY(-1px);
}

@media (max-width: 720px) {

  .saas-dashboard-alert {
    align-items: stretch;
    flex-direction: column;
  }

  .saas-dashboard-alert-button {
    width: 100%;
  }

}