:root{
  --bg: #070a0c;
  --panel: rgba(14,18,22,.72);
  --panel2: rgba(18,24,29,.62);
  --stroke: rgba(120,255,230,.22);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.55);
  --accent: rgba(110,231,216,1);
  --accent2: rgba(59,201,181,1);
  --shadow: 0 18px 60px rgba(0,0,0,.55);
}

body.spand-portal{
  background-image: url("/Media/fundo.png");
  color: var(--text);
  margin: 0;
  color-scheme: dark;
}

body.spand-portal select option{
  background: #070a0c;
  color: rgba(255,255,255,.92);
}
body.spand-portal select optgroup{
  background: #070a0c;
  color: rgba(255,255,255,.75);
}


.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  background: rgba(7,10,12,.78);
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}

.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); }
.brand-mark{
  width: 28px; height: 28px; border-radius: 10px;
  background: radial-gradient(circle at 30% 30%, var(--accent), rgba(59,201,181,.2));
  box-shadow: 0 0 22px rgba(110,231,216,.22);
  border: 1px solid rgba(255,255,255,.06);
}
.brand-text{ font-weight: 800; letter-spacing: .12em; font-size: 12px; opacity:.9; }

.topbar-left{ display:flex; align-items:center; gap: 16px; }
.topnav{ display:flex; gap: 10px; }
.topnav a{
  text-decoration:none;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 12px;
  transition: .18s;
}
.topnav a:hover{ color: var(--text); background: rgba(255,255,255,.05); }
.topnav a.active{ color: var(--text); border: 1px solid rgba(110,231,216,.25); background: rgba(110,231,216,.06); }

.topbar-right{ display:flex; align-items:center; gap: 10px; }
.search{ display:flex; gap: 8px; align-items:center; }
.search{ position: relative; }
.search input{
  width: 280px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text);
  outline: none;
}
.search input:focus{
  border-color: rgba(110,231,216,.35);
  box-shadow: 0 0 0 3px rgba(110,231,216,.10);
}

.portal{
  max-width: 1220px;
  margin: 18px auto 60px;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  gap: 16px;
}

.col{ display:flex; flex-direction:column; gap: 16px; }
.card{
  background: linear-gradient(180deg, rgba(18,24,29,.75), rgba(12,16,20,.62));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 14px 14px;
}

.card h3{ margin: 0 0 12px; font-size: 14px; letter-spacing:.04em; opacity: .95; }
.card-head{ display:flex; justify-content:space-between; align-items:center; gap: 10px; margin-bottom: 8px; }
.link{ color: rgba(110,231,216,.9); text-decoration:none; font-size: 12px; }
.link:hover{ text-decoration: underline; }

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

.form-row{ display:flex; flex-direction:column; gap:6px; margin-bottom: 10px; }
.form-row label{ font-size: 12px; color: var(--muted); }
select{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text);
}

.btn{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 14px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  gap: 8px;
  transition: .18s;
}
.btn:hover{ background: rgba(255,255,255,.08); }
.btn-primary{
  background: rgba(110,231,216,.14);
  border-color: rgba(110,231,216,.25);
  box-shadow: 0 0 26px rgba(110,231,216,.10);
}
.btn-secondary{
  background: rgba(255,255,255,.06);
}
.btn-ghost{ background: transparent; }
.w100{ width:100%; }

.hero{
  padding: 16px;
  border-color: rgba(110,231,216,.22);
  background: radial-gradient(900px 300px at 10% 0%, rgba(110,231,216,.14), transparent 60%),
              linear-gradient(180deg, rgba(18,24,29,.78), rgba(12,16,20,.62));
}
.hero h2{ margin: 8px 0 10px; font-size: 20px; }
.hero-subtitle{
  margin: 0 0 8px;
  font-size: 13px;
  color: rgba(255,255,255,.68);
  line-height: 1.4;
}
.hero-meta{ display:flex; align-items:center; gap: 10px; }
.hero-row{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.event-bracket{ width: 100%; }
.event-bracket img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.hero-actions{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-top: 12px; }

.grid-rows{ display:flex; flex-direction:column; gap: 10px; }
.row{
  display:flex; justify-content:space-between; align-items:center; gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
.row:hover{ border-color: rgba(110,231,216,.18); background: rgba(255,255,255,.04); }
.row strong{ font-size: 13px; }
.row .right{ color: var(--muted); font-size: 12px; }

.list{ display:flex; flex-direction:column; gap: 10px; }
.item{
  display:flex; justify-content:space-between; gap: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.82);
}
.item .meta{ color: var(--muted); }

.table{ display:flex; flex-direction:column; gap: 8px; }
.table .head, .table .r{
  display:grid; grid-template-columns: 1fr 120px 110px;
  gap: 10px; align-items:center;
}
.table .head{ color: var(--muted); font-size: 11px; padding: 0 4px; }
.table .r{
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
.table .r:hover{ border-color: rgba(110,231,216,.18); }

@media (max-width: 1080px){
  .portal{ grid-template-columns: 1fr; }
  .search input{ width: 180px; }
  .topnav{ display:none; } /* depois fazemos menu mobile */
}






/* =========================
   EVENTS PAGE (HLTV-like)
========================= */

.portal-events{
  grid-template-columns: 280px 1fr 320px;
}

.tabs{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tabs-small .tab{
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 12px;
}

.tab{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.78);
  padding: 10px 12px;
  border-radius: 14px;
  cursor: pointer;
  transition: .18s;
  font-family: inherit;
  font-weight: 700;
}
.tab:hover{ background: rgba(255,255,255,.06); }
.tab.active{
  border-color: rgba(110,231,216,.28);
  background: rgba(110,231,216,.10);
  color: rgba(255,255,255,.92);
}

.divider{
  height: 1px;
  background: rgba(255,255,255,.06);
  margin: 14px 0;
}

.events-list{
  display:flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.event-card{
  display:flex;
  gap: 12px;
  align-items: center;
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  transition: .18s;
  text-decoration: none;
  color: inherit;
}
.event-card:hover{
  border-color: rgba(110,231,216,.18);
  background: rgba(255,255,255,.04);
}

.event-logo{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: radial-gradient(circle at 30% 30%, rgba(110,231,216,.9), rgba(59,201,181,.2));
  box-shadow: 0 0 20px rgba(110,231,216,.12);
  flex: 0 0 auto;
}

.event-mid{
  flex: 1 1 auto;
  min-width: 0;
}

.event-name{
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: 6px;
}

.event-meta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  color: rgba(255,255,255,.60);
  font-size: 12px;
}

.event-tags{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.tag{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(110,231,216,.22);
  background: rgba(110,231,216,.08);
  font-size: 11px;
  font-weight: 800;
  color: rgba(255,255,255,.86);
}

.tag.dim{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.70);
}

.event-featured{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.event-featured .big{
  font-weight: 900;
  font-size: 14px;
}
.event-featured .muted{
  font-size: 12px;
}

.empty-state{
  padding: 18px;
  text-align: center;
}
.hidden{ display:none !important; }

@media (max-width: 1080px){
  .portal-events{ grid-template-columns: 1fr; }
}




/* =========================
   EVENT PAGE
========================= */

.portal-event{
  grid-template-columns: 1fr 320px;
}

.event-hero{
  border-color: rgba(110,231,216,.22);
  background:
    radial-gradient(1200px 360px at 10% 0%, rgba(110,231,216,.16), transparent 60%),
    linear-gradient(180deg, rgba(18,24,29,.78), rgba(12,16,20,.62));
}

.event-hero-top{
  display:flex;
  gap: 14px;
  align-items: center;
}

.event-logo.big{
  width: 62px;
  height: 62px;
  border-radius: 20px;
}

.event-hero-info{
  flex: 1 1 auto;
  min-width: 0;
}

.event-hero-kickers{
  display:flex;
  gap: 10px;
  align-items:center;
}

.event-hero h1{
  margin: 10px 0 10px;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: .01em;
}

.event-hero-meta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.meta-chip{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.78);
  font-size: 12px;
  font-weight: 700;
}

.event-hero-actions{
  width: 190px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.tab-panel{
  padding: 14px 14px;
}

.panel-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 12px;
}

.panel-box{
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}

.panel-title{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .04em;
  margin-bottom: 8px;
  color: rgba(255,255,255,.86);
}

.kv{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  font-size: 12px;
}
.kv .k{ color: rgba(255,255,255,.60); }
.kv .v{ font-weight: 800; color: rgba(255,255,255,.88); }

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

.team-card{
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

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

.team-badge{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: rgba(110,231,216,.10);
  border: 1px solid rgba(110,231,216,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
}

.team-name{
  font-weight: 900;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-meta{
  color: rgba(255,255,255,.55);
  font-size: 12px;
}

.bracket-grid{
  display:flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.bracket-round{
  min-width: 240px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.bracket-round-title{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.75);
  margin-bottom: 4px;
}

.bracket-match{
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}

.bracket-line{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  padding: 6px 0;
}

.bracket-line .name{
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bracket-line .score{
  color: rgba(255,255,255,.65);
  font-weight: 800;
}

.rules{
  white-space: pre-wrap;
  line-height: 1.55;
  color: rgba(255,255,255,.82);
  font-size: 13px;
}

@media (max-width: 1080px){
  .portal-event{ grid-template-columns: 1fr; }
  .event-hero-top{ flex-direction: column; align-items: stretch; }
  .event-hero-actions{ width: 100%; }
  .panel-grid{ grid-template-columns: 1fr; }
  .teams-grid{ grid-template-columns: 1fr; }
}




/* =========================
   STANDINGS (GROUPS / SWISS)
========================= */

.groups-wrap{
  display:flex;
  flex-direction: column;
  gap: 14px;
}

.group-card{
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}

.group-head{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.group-title{
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.86);
}

.group-meta{
  color: rgba(255,255,255,.55);
  font-size: 12px;
}

.table-standings{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  font-size: 12px;
}

.table-standings thead th{
  text-align: left;
  color: rgba(255,255,255,.55);
  font-weight: 800;
  font-size: 11px;
  padding: 0 10px 6px;
}

.table-standings tbody tr{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}

.table-standings tbody tr td{
  padding: 10px 10px;
}

.table-standings tbody tr td:first-child{
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}

.table-standings tbody tr td:last-child{
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}

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

.stand-badge{
  width: 30px;
  height: 30px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(110,231,216,.18);
  background: rgba(110,231,216,.10);
  font-weight: 900;
}

.stand-name{
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chip{
  display:inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.72);
  font-weight: 800;
  font-size: 11px;
}

.chip.good{
  border-color: rgba(110,231,216,.22);
  background: rgba(110,231,216,.10);
  color: rgba(255,255,255,.88);
}

.chip.bad{
  border-color: rgba(255,100,120,.18);
  background: rgba(255,100,120,.08);
  color: rgba(255,255,255,.82);
}

.swiss-wrap{
  display:flex;
  flex-direction: column;
  gap: 12px;
}

.swiss-summary{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}



/* =========================
   STANDINGS — HLTV / FACEIT-LEVEL
========================= */

.group-card {
  background: rgba(10, 12, 14, 0.55);
  border: 1px solid rgba(110, 231, 216, 0.18);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 22px 70px rgba(0,0,0,0.45);
  backdrop-filter: blur(12px);
}

.group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.group-title {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
}

.group-meta {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}

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

.table-standings thead th {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  text-align: left;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.table-standings tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.88);
  font-size: 13px;
}

.table-standings tbody tr {
  transition: transform 0.15s ease, background 0.15s ease;
}

.table-standings tbody tr:hover {
  background: rgba(110, 231, 216, 0.06);
}

.table-standings tbody tr:last-child td {
  border-bottom: none;
}

/* rank column subtle glow for top */
.table-standings tbody tr:nth-child(1) td:first-child {
  color: rgba(110, 231, 216, 0.95);
  font-weight: 800;
}

/* Team cell layout */
.stand-team {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
}

.stand-badge {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 12px;
  color: rgba(10,12,14,0.95);
  background: linear-gradient(135deg, rgba(110,231,216,0.95), rgba(59,201,181,0.95));
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
}

.stand-name {
  font-weight: 700;
  color: rgba(255,255,255,0.92);
}

/* Chips */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.72);
}

.chip.good {
  background: rgba(110,231,216,0.12);
  border-color: rgba(110,231,216,0.35);
  color: rgba(110,231,216,0.95);
}

.chip.bad {
  background: rgba(255, 77, 109, 0.10);
  border-color: rgba(255, 77, 109, 0.35);
  color: rgba(255, 77, 109, 0.95);
}

/* Swiss summary */
.swiss-summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 12px 0;
}

/* Responsive */
@media (max-width: 900px) {
  .stand-team { min-width: unset; }
  .table-standings thead th:nth-child(6),
  .table-standings tbody td:nth-child(6) { display: none; }
}



/* --- Qualification line (refined) --- */
.qualify-sep td{
  padding: 8px 14px !important;
  border-bottom: none !important;
}

.qualify-line{
  position: relative;
  height: 14px;
}

.qualify-line::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:50%;
  transform: translateY(-50%);
  border-top: 1px dashed rgba(255,255,255,0.14);
}

.qualify-line .label{
  position:absolute;
  right:0;
  top:50%;
  transform: translateY(-50%);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  background: rgba(10,14,16,0.75);
  border: 1px solid rgba(255,255,255,0.10);
}

tr.qualified td{
  background: rgba(110,231,216,0.06);
}

tr.qualified td:first-child{
  border-left: 2px solid rgba(110,231,216,0.45);
}

/* Swiss layout */
.swiss-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding: 14px 14px 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.swiss-title{
  font-weight: 900;
  letter-spacing: .02em;
}
.swiss-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.swiss-table-wrap{
  overflow:auto;
  border-radius: 14px;
}

/* Make the table feel tighter + premium */
.table-standings.swiss{
  min-width: 780px;
}
.table-standings.swiss thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(10,14,16,0.92);
  backdrop-filter: blur(10px);
}
.table-standings.swiss .c{
  text-align:center;
}

/* Round dots: cleaner */
.rd-dot{
  display:inline-flex;
  min-width: 34px;
  height: 26px;
  padding: 0 10px;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.78);
}
.rd-dot.win{
  border-color: rgba(110,231,216,0.30);
  background: rgba(110,231,216,0.12);
  color: rgba(110,231,216,0.98);
}
.rd-dot.loss{
  border-color: rgba(255, 77, 109, 0.30);
  background: rgba(255, 77, 109, 0.10);
  color: rgba(255, 77, 109, 0.98);
}
.rd-dot.empty{
  opacity:.55;
}

/* Record emphasis */
.table-standings.swiss td.rec{
  font-weight: 900;
}

/* Row status glow (subtle) */
.table-standings.swiss tr.advanced td{
  background: rgba(110,231,216,0.05);
}
.table-standings.swiss tr.eliminated td{
  background: rgba(255, 77, 109, 0.045);
}

.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.tab {
  background: #131313;
  border: 1px solid #1f3d36;
  color: #9fffe9;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

.tab.active {
  background: linear-gradient(135deg, #1de9b6, #00bfa5);
  color: #00110c;
  border-color: transparent;
}

/* Tabs "active" só no ADMIN (não mexe no event.html público) */
body.spand-admin .tab-panel { display: none; }
body.spand-admin .tab-panel.active { display: block; }

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #0f1f1c;
  border: 1px solid #1de9b6;
  color: #9fffe9;
  padding: 12px 18px;
  border-radius: 10px;
  opacity: 0;
  transform: translateY(10px);
  transition: all .25s ease;
  pointer-events: none;
  z-index: 999;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.error {
  border-color: #ff5252;
  color: #ffbaba;
}

.toast.warn {
  border-color: #ffb300;
  color: #ffe082;
}


:root{
  --bg: #070a0c;
  --panel: rgba(14,18,22,.72);
  --panel2: rgba(18,24,29,.62);
  --stroke: rgba(120,255,230,.22);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.55);
  --accent: rgba(110,231,216,1);
  --accent2: rgba(59,201,181,1);
  --shadow: 0 18px 60px rgba(0,0,0,.55);
}

body.spand-portal{
  background-image: url("../Media/fundo.png");
  color: var(--text);
  margin: 0;
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  background: rgba(7,10,12,.78);
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}

.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); }
.brand-mark{
  width: 28px; height: 28px; border-radius: 10px;
  background: radial-gradient(circle at 30% 30%, var(--accent), rgba(59,201,181,.2));
  box-shadow: 0 0 22px rgba(110,231,216,.22);
  border: 1px solid rgba(255,255,255,.06);
}
.brand-text{ font-weight: 800; letter-spacing: .12em; font-size: 12px; opacity:.9; }

.topbar-left{ display:flex; align-items:center; gap: 16px; }
.topnav{ display:flex; gap: 10px; }
.topnav a{
  text-decoration:none;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 12px;
  transition: .18s;
}
.topnav a:hover{ color: var(--text); background: rgba(255,255,255,.05); }
.topnav a.active{ color: var(--text); border: 1px solid rgba(110,231,216,.25); background: rgba(110,231,216,.06); }

.topbar-right{ display:flex; align-items:center; gap: 10px; }
.search{ display:flex; gap: 8px; align-items:center; }
.search input{
  width: 280px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text);
  outline: none;
}
.search input:focus{
  border-color: rgba(110,231,216,.35);
  box-shadow: 0 0 0 3px rgba(110,231,216,.10);
}

.portal{
  max-width: 1220px;
  margin: 18px auto 60px;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  gap: 16px;
}

.col{ display:flex; flex-direction:column; gap: 16px; }
.card{
  background: linear-gradient(180deg, rgba(18,24,29,.75), rgba(12,16,20,.62));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 14px 14px;
}

.card h3{ margin: 0 0 12px; font-size: 14px; letter-spacing:.04em; opacity: .95; }
.card-head{ display:flex; justify-content:space-between; align-items:center; gap: 10px; margin-bottom: 8px; }
.link{ color: rgba(110,231,216,.9); text-decoration:none; font-size: 12px; }
.link:hover{ text-decoration: underline; }

.muted{ color: var(--muted); font-size: 12px; }
.pill{
  display:inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(110,231,216,.26);
  background: rgba(110,231,216,.07);
  font-size: 11px;
  color: rgba(255,255,255,.86);
}

.form-row{ display:flex; flex-direction:column; gap:6px; margin-bottom: 10px; }
.form-row label{ font-size: 12px; color: var(--muted); }
select{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text);
}

.btn{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 14px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  gap: 8px;
  transition: .18s;
}
.btn:hover{ background: rgba(255,255,255,.08); }
.btn-primary{
  background: rgba(110,231,216,.14);
  border-color: rgba(110,231,216,.25);
  box-shadow: 0 0 26px rgba(110,231,216,.10);
}
.btn-secondary{
  background: rgba(255,255,255,.06);
}
.btn-ghost{ background: transparent; }
.w100{ width:100%; }

.hero{
  padding: 16px;
  border-color: rgba(110,231,216,.22);
  background: radial-gradient(900px 300px at 10% 0%, rgba(110,231,216,.14), transparent 60%),
              linear-gradient(180deg, rgba(18,24,29,.78), rgba(12,16,20,.62));
}
.hero h2{ margin: 8px 0 10px; font-size: 20px; }
.hero-meta{ display:flex; align-items:center; gap: 10px; }
.hero-row{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.hero-actions{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-top: 12px; }

.grid-rows{ display:flex; flex-direction:column; gap: 10px; }
.row{
  display:flex; justify-content:space-between; align-items:center; gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
.row:hover{ border-color: rgba(110,231,216,.18); background: rgba(255,255,255,.04); }
.row strong{ font-size: 13px; }
.row .right{ color: var(--muted); font-size: 12px; }

.list{ display:flex; flex-direction:column; gap: 10px; }
.item{
  display:flex; justify-content:space-between; gap: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.82);
}
.item .meta{ color: var(--muted); }

.table{ display:flex; flex-direction:column; gap: 8px; }
.table .head, .table .r{
  display:grid; grid-template-columns: 1fr 120px 110px;
  gap: 10px; align-items:center;
}
.table .head{ color: var(--muted); font-size: 11px; padding: 0 4px; }
.table .r{
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
.table .r:hover{ border-color: rgba(110,231,216,.18); }

@media (max-width: 1080px){
  .portal{ grid-template-columns: 1fr; }
  .search input{ width: 180px; }
  .topnav{ display:none; } /* depois fazemos menu mobile */
}






/* =========================
   EVENTS PAGE (HLTV-like)
========================= */

.portal-events{
  grid-template-columns: 280px 1fr 320px;
}

.tabs{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tabs-small .tab{
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 12px;
}

.tab{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.78);
  padding: 10px 12px;
  border-radius: 14px;
  cursor: pointer;
  transition: .18s;
  font-family: inherit;
  font-weight: 700;
}
.tab:hover{ background: rgba(255,255,255,.06); }
.tab.active{
  border-color: rgba(110,231,216,.28);
  background: rgba(110,231,216,.10);
  color: rgba(255,255,255,.92);
}

.divider{
  height: 1px;
  background: rgba(255,255,255,.06);
  margin: 14px 0;
}

.events-list{
  display:flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.event-card{
  display:flex;
  gap: 12px;
  align-items: center;
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  transition: .18s;
  text-decoration: none;
  color: inherit;
}
.event-card:hover{
  border-color: rgba(110,231,216,.18);
  background: rgba(255,255,255,.04);
}

.event-logo{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: radial-gradient(circle at 30% 30%, rgba(110,231,216,.9), rgba(59,201,181,.2));
  box-shadow: 0 0 20px rgba(110,231,216,.12);
  flex: 0 0 auto;
}

.event-mid{
  flex: 1 1 auto;
  min-width: 0;
}

.event-name{
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: 6px;
}

.event-meta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  color: rgba(255,255,255,.60);
  font-size: 12px;
}

.event-tags{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.tag{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(110,231,216,.22);
  background: rgba(110,231,216,.08);
  font-size: 11px;
  font-weight: 800;
  color: rgba(255,255,255,.86);
}

.tag.dim{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.70);
}

.event-featured{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.event-featured .big{
  font-weight: 900;
  font-size: 14px;
}
.event-featured .muted{
  font-size: 12px;
}

.empty-state{
  padding: 18px;
  text-align: center;
}
.hidden{ display:none !important; }

@media (max-width: 1080px){
  .portal-events{ grid-template-columns: 1fr; }
}




/* =========================
   EVENT PAGE
========================= */

.portal-event{
  grid-template-columns: 1fr 320px;
}

.event-hero{
  border-color: rgba(110,231,216,.22);
  background:
    radial-gradient(1200px 360px at 10% 0%, rgba(110,231,216,.16), transparent 60%),
    linear-gradient(180deg, rgba(18,24,29,.78), rgba(12,16,20,.62));
}

.event-hero-top{
  display:flex;
  gap: 14px;
  align-items: center;
}

.event-logo.big{
  width: 62px;
  height: 62px;
  border-radius: 20px;
}

.event-hero-info{
  flex: 1 1 auto;
  min-width: 0;
}

.event-hero-kickers{
  display:flex;
  gap: 10px;
  align-items:center;
}

.event-hero h1{
  margin: 10px 0 10px;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: .01em;
}

.event-hero-meta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.meta-chip{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.78);
  font-size: 12px;
  font-weight: 700;
}

.event-hero-actions{
  width: 190px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.tab-panel{
  padding: 14px 14px;
}

.panel-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 12px;
}

.panel-box{
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}

.panel-title{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .04em;
  margin-bottom: 8px;
  color: rgba(255,255,255,.86);
}

.kv{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  font-size: 12px;
}
.kv .k{ color: rgba(255,255,255,.60); }
.kv .v{ font-weight: 800; color: rgba(255,255,255,.88); }

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

.team-card{
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

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

.team-badge{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: rgba(110,231,216,.10);
  border: 1px solid rgba(110,231,216,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
}

.team-name{
  font-weight: 900;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-meta{
  color: rgba(255,255,255,.55);
  font-size: 12px;
}

.bracket-grid{
  display:flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.bracket-round{
  min-width: 240px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.bracket-round-title{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.75);
  margin-bottom: 4px;
}

.bracket-match{
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}

.bracket-line{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  padding: 6px 0;
}

.bracket-line .name{
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bracket-line .score{
  color: rgba(255,255,255,.65);
  font-weight: 800;
}

.rules{
  white-space: pre-wrap;
  line-height: 1.55;
  color: rgba(255,255,255,.82);
  font-size: 13px;
}

@media (max-width: 1080px){
  .portal-event{ grid-template-columns: 1fr; }
  .event-hero-top{ flex-direction: column; align-items: stretch; }
  .event-hero-actions{ width: 100%; }
  .panel-grid{ grid-template-columns: 1fr; }
  .teams-grid{ grid-template-columns: 1fr; }
}




/* =========================
   STANDINGS (GROUPS / SWISS)
========================= */

.groups-wrap{
  display:flex;
  flex-direction: column;
  gap: 14px;
}

.group-card{
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}

.group-head{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.group-title{
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.86);
}

.group-meta{
  color: rgba(255,255,255,.55);
  font-size: 12px;
}

.table-standings{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  font-size: 12px;
}

.table-standings thead th{
  text-align: left;
  color: rgba(255,255,255,.55);
  font-weight: 800;
  font-size: 11px;
  padding: 0 10px 6px;
}

.table-standings tbody tr{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}

.table-standings tbody tr td{
  padding: 10px 10px;
}

.table-standings tbody tr td:first-child{
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}

.table-standings tbody tr td:last-child{
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}

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

.stand-badge{
  width: 30px;
  height: 30px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(110,231,216,.18);
  background: rgba(110,231,216,.10);
  font-weight: 900;
}

.stand-name{
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chip{
  display:inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.72);
  font-weight: 800;
  font-size: 11px;
}

.chip.good{
  border-color: rgba(110,231,216,.22);
  background: rgba(110,231,216,.10);
  color: rgba(255,255,255,.88);
}

.chip.bad{
  border-color: rgba(255,100,120,.18);
  background: rgba(255,100,120,.08);
  color: rgba(255,255,255,.82);
}

.swiss-wrap{
  display:flex;
  flex-direction: column;
  gap: 12px;
}

.swiss-summary{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}



/* =========================
   STANDINGS — HLTV / FACEIT-LEVEL
========================= */

.group-card {
  background: rgba(10, 12, 14, 0.55);
  border: 1px solid rgba(110, 231, 216, 0.18);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 22px 70px rgba(0,0,0,0.45);
  backdrop-filter: blur(12px);
}

.group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.group-title {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
}

.group-meta {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}

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

.table-standings thead th {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  text-align: left;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.table-standings tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.88);
  font-size: 13px;
}

.table-standings tbody tr {
  transition: transform 0.15s ease, background 0.15s ease;
}

.table-standings tbody tr:hover {
  background: rgba(110, 231, 216, 0.06);
}

.table-standings tbody tr:last-child td {
  border-bottom: none;
}

/* rank column subtle glow for top */
.table-standings tbody tr:nth-child(1) td:first-child {
  color: rgba(110, 231, 216, 0.95);
  font-weight: 800;
}

/* Team cell layout */
.stand-team {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
}

.stand-badge {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 12px;
  color: rgba(10,12,14,0.95);
  background: linear-gradient(135deg, rgba(110,231,216,0.95), rgba(59,201,181,0.95));
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
}

.stand-name {
  font-weight: 700;
  color: rgba(255,255,255,0.92);
}

/* Chips */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.72);
}

.chip.good {
  background: rgba(110,231,216,0.12);
  border-color: rgba(110,231,216,0.35);
  color: rgba(110,231,216,0.95);
}

.chip.bad {
  background: rgba(255, 77, 109, 0.10);
  border-color: rgba(255, 77, 109, 0.35);
  color: rgba(255, 77, 109, 0.95);
}

/* Swiss summary */
.swiss-summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 12px 0;
}

/* Responsive */
@media (max-width: 900px) {
  .stand-team { min-width: unset; }
  .table-standings thead th:nth-child(6),
  .table-standings tbody td:nth-child(6) { display: none; }
}



/* --- Qualification line (refined) --- */
.qualify-sep td{
  padding: 8px 14px !important;
  border-bottom: none !important;
}

.qualify-line{
  position: relative;
  height: 14px;
}

.qualify-line::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:50%;
  transform: translateY(-50%);
  border-top: 1px dashed rgba(255,255,255,0.14);
}

.qualify-line .label{
  position:absolute;
  right:0;
  top:50%;
  transform: translateY(-50%);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  background: rgba(10,14,16,0.75);
  border: 1px solid rgba(255,255,255,0.10);
}

tr.qualified td{
  background: rgba(110,231,216,0.06);
}

tr.qualified td:first-child{
  border-left: 2px solid rgba(110,231,216,0.45);
}

/* Swiss layout */
.swiss-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding: 14px 14px 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.swiss-title{
  font-weight: 900;
  letter-spacing: .02em;
}
.swiss-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.swiss-table-wrap{
  overflow:auto;
  border-radius: 14px;
}

/* Make the table feel tighter + premium */
.table-standings.swiss{
  min-width: 780px;
}
.table-standings.swiss thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(10,14,16,0.92);
  backdrop-filter: blur(10px);
}
.table-standings.swiss .c{
  text-align:center;
}

/* Round dots: cleaner */
.rd-dot{
  display:inline-flex;
  min-width: 34px;
  height: 26px;
  padding: 0 10px;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.78);
}
.rd-dot.win{
  border-color: rgba(110,231,216,0.30);
  background: rgba(110,231,216,0.12);
  color: rgba(110,231,216,0.98);
}
.rd-dot.loss{
  border-color: rgba(255, 77, 109, 0.30);
  background: rgba(255, 77, 109, 0.10);
  color: rgba(255, 77, 109, 0.98);
}
.rd-dot.empty{
  opacity:.55;
}

/* Record emphasis */
.table-standings.swiss td.rec{
  font-weight: 900;
}

/* Row status glow (subtle) */
.table-standings.swiss tr.advanced td{
  background: rgba(110,231,216,0.05);
}
.table-standings.swiss tr.eliminated td{
  background: rgba(255, 77, 109, 0.045);
}

.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.tab {
  background: #131313;
  border: 1px solid #1f3d36;
  color: #9fffe9;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

.tab.active {
  background: linear-gradient(135deg, #1de9b6, #00bfa5);
  color: #00110c;
  border-color: transparent;
}

.tab-panel.active {
  display: block;
}

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #0f1f1c;
  border: 1px solid #1de9b6;
  color: #9fffe9;
  padding: 12px 18px;
  border-radius: 10px;
  opacity: 0;
  transform: translateY(10px);
  transition: all .25s ease;
  pointer-events: none;
  z-index: 999;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.error {
  border-color: #ff5252;
  color: #ffbaba;
}

.toast.warn {
  border-color: #ffb300;
  color: #ffe082;
}

/* =========================
   ADMIN UI PACK (Premium)
   - scoped to admin pages
========================= */

/* Dark-only inputs (kills white fields) */
body.spand-portal input,
body.spand-portal textarea,
body.spand-portal select {
  background: rgba(255,255,255,.04) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  outline: none !important;
}

body.spand-portal input::placeholder,
body.spand-portal textarea::placeholder {
  color: rgba(255,255,255,.35) !important;
}

body.spand-portal input:focus,
body.spand-portal textarea:focus,
body.spand-portal select:focus {
  border-color: rgba(110,231,216,.35) !important;
  box-shadow: 0 0 0 3px rgba(110,231,216,.10) !important;
  background: rgba(255,255,255,.06) !important;
}

/* Admin tabs (scoped) — prevents conflicts with Events tabs */
body.spand-portal .tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

body.spand-portal .tab {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.78);
  padding: 9px 12px;
  border-radius: 14px;
  cursor: pointer;
  transition: .18s;
  font-family: inherit;
  font-weight: 800;
}

body.spand-portal .tab:hover {
  background: rgba(255,255,255,.06);
}

body.spand-portal .tab.active {
  border-color: rgba(110,231,216,.28);
  background: rgba(110,231,216,.12);
  color: rgba(255,255,255,.92);
  box-shadow: 0 0 26px rgba(110,231,216,.10);
}

/* Tab panels for admin pages */
body.spand-portal .tab-panel {
  display: none;
  padding: 0; /* admin uses cards inside */
}

body.spand-portal .tab-panel.active {
  display: block;
}

/* Danger button (regen) */
.btn-danger{
  border: 1px solid rgba(255, 77, 109, 0.28);
  background: rgba(255, 77, 109, 0.10);
  color: rgba(255,255,255,.92);
}
.btn-danger:hover{
  background: rgba(255, 77, 109, 0.14);
  border-color: rgba(255, 77, 109, 0.40);
}

/* Toast polish (admin) */
.toast {
  position: fixed;
  bottom: 22px;
  right: 22px;
  background: rgba(10,14,16,0.88);
  border: 1px solid rgba(110,231,216,0.30);
  color: rgba(255,255,255,0.92);
  padding: 12px 16px;
  border-radius: 14px;
  opacity: 0;
  transform: translateY(10px);
  transition: all .22s ease;
  pointer-events: none;
  z-index: 999;
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.error {
  border-color: rgba(255, 77, 109, 0.45);
  color: rgba(255, 190, 200, 0.95);
}

.toast.warn {
  border-color: rgba(255, 179, 0, 0.45);
  color: rgba(255, 224, 130, 0.95);
}


/* =========================
   HOME — PREMIUM
========================= */

.portal-home{
  grid-template-columns: 1fr 360px;
}

@media (max-width: 1080px){
  .portal-home{ grid-template-columns: 1fr; }
}

.hero-home{
  padding: 18px;
  border-color: rgba(110,231,216,.22);
  background:
    radial-gradient(1100px 380px at 12% 0%, rgba(110,231,216,.18), transparent 60%),
    linear-gradient(180deg, rgba(18,24,29,.78), rgba(12,16,20,.62));
}

.hero-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.hero-title{
  margin: 12px 0 10px;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: .01em;
}

.hero-desc{
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,.68);
}

.hero-foot{
  margin-top: 14px;
  display:flex;
  justify-content:space-between;
  gap: 10px;
  flex-wrap:wrap;
}

.pill-live{
  position: relative;
  padding-left: 12px;
  align-items:center; 
  gap:10px;
  line-height:1; 
}

.pill-live::before,
.pill-live::after{
  content: none !important;
}

@keyframes livePulse{
  0%   { transform: scale(.6); opacity: .8; }
  70%  { transform: scale(1.8); opacity: 0; }
  100% { opacity: 0; }
}


/* the only dot */
.pill-live .live-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(110,231,216,1);
  position: relative;
  flex: 0 0 auto;
}

/* pulse ring (only around the dot) */
.pill-live .live-dot::after{
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  background: rgba(110,231,216,.25);
  animation: livePulseRing 1.4s ease-out infinite;
}

@keyframes livePulseRing{
  0%   { transform: scale(.6); opacity: .8; }
  70%  { transform: scale(1.8); opacity: 0; }
  100% { opacity: 0; }
}

.pill-live::before{
  content:"";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(110,231,216,1);
  box-shadow: 0 0 18px rgba(110,231,216,.55);
  display:inline-block;
  margin-right: 8px;
  transform: translateY(-1px);
  animation: livePulse 1.25s infinite ease-in-out;
}
@keyframes livePulse{
  0%{ opacity:.55; transform: translateY(-1px) scale(.9); }
  50%{ opacity:1; transform: translateY(-1px) scale(1.15); }
  100%{ opacity:.55; transform: translateY(-1px) scale(.9); }
}

/* News grid */
.news-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 780px){
  .news-grid{ grid-template-columns: 1fr; }
}
.news-card{
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  transition: .18s;
}
.news-card:hover{
  background: rgba(110,231,216,.06);
  border-color: rgba(110,231,216,.20);
  transform: translateY(-1px);
}
.news-title{
  font-weight: 900;
  font-size: 13px;
  margin-bottom: 6px;
}
.news-body{
  font-size: 12px;
  color: rgba(255,255,255,.70);
  line-height: 1.45;
}
.news-time{
  margin-top: 10px;
  font-size: 11px;
  color: rgba(255,255,255,.48);
}

/* Top players mini */
.players-mini{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.player-mini{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
.player-mini:hover{
  border-color: rgba(110,231,216,.18);
  background: rgba(255,255,255,.04);
}
.player-left{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}
.player-badge{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  background: rgba(110,231,216,.10);
  border: 1px solid rgba(110,231,216,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
}
.player-name{
  font-weight: 900;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.player-kd{
  font-weight: 900;
  font-size: 12px;
  color: rgba(110,231,216,.95);
}

/* Small card */
.card-mini{
  padding: 14px;
}
.mini-title{
  font-weight: 900;
  font-size: 14px;
  margin-bottom: 6px;
}

/* Empty state */
.empty{
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px dashed rgba(255,255,255,.10);
  color: rgba(255,255,255,.55);
  font-size: 12px;
  text-align:center;
}

/* Skeleton */
.skel{
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.06);
  overflow:hidden;
  position: relative;
}
.skel::after{
  content:"";
  position:absolute;
  top:0; left:-40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  animation: skelMove 1.1s infinite;
}
@keyframes skelMove{
  0%{ left:-40%; }
  100%{ left:120%; }
}

/* News with image */
.news-card{
  display:flex;
  gap: 12px;
  align-items: stretch;
}

.news-thumb{
  width: 92px;
  height: 68px;
  border-radius: 14px;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  overflow: hidden;
  position: relative;
}

.news-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  filter: saturate(1.05) contrast(1.02);
}

.news-content{
  flex: 1 1 auto;
  min-width: 0;
}

.news-title{
  margin-top: 2px;
}

/* Clamp de texto (multi-line ellipsis) */
.clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;            /* standard (future) */
  overflow: hidden;
}

.clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;            /* standard (future) */
  overflow: hidden;
}

/* --- NEWS GRID / CARDS --- */
.news-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.news-card{
  display:flex;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  overflow: hidden;          /* importante */
  min-width: 0;              /* importante */
}

.news-thumb{
  width: 74px;
  height: 74px;
  border-radius: 16px;
  overflow: hidden;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

.news-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.news-content{
  display:flex;
  flex-direction:column;
  gap: 6px;
  min-width: 0;             /* SUPER importante p/ clamp funcionar */
}

.news-title{
  font-weight: 900;
  font-size: 13px;
  color: rgba(255,255,255,.92);
  overflow-wrap: anywhere;  /* corta palavras gigantes */
  word-break: break-word;
}

.news-body{
  font-size: 12px;
  color: rgba(255,255,255,.70);
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.news-time{
  margin-top: auto;
  font-size: 11px;
  color: rgba(255,255,255,.50);
}

/* clamp (multi-line ellipsis) - com fallback */
.clamp-2, .clamp-3{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* standard (alguns browsers já aceitam) */
  box-orient: vertical;
}

.clamp-2{ -webkit-line-clamp: 2; line-clamp: 2; }
.clamp-3{ -webkit-line-clamp: 3; line-clamp: 3; }

@media (max-width: 900px){
  .news-grid{ grid-template-columns: 1fr; }
}



/* =========================
   MODAL (News)
========================= */
.modal{
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow-x: hidden;
}

.modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
}

.modal-card{
  position: relative;
  width: min(920px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  margin: 12px auto;
  border-radius: 22px;
  overflow: hidden;

  background: rgba(10,14,16,.92);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 80px rgba(0,0,0,.55);

  display: flex;
  flex-direction: column;
}

.modal-close{
  position: absolute;
  top: 14px;
  right: 14px;

  width: 44px;
  height: 44px;
  border-radius: 14px;

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

  cursor: pointer;
  line-height: 1;
  font-size: 20px;
  font-weight: 900;

  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.95);

  z-index: 3;
}
.modal-close:hover{
  background: rgba(110,231,216,.16);
  border-color: rgba(110,231,216,.30);
}

.modal-img{
  width: 100%;
  height: min(360px, 38vh);
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex: 0 0 auto;
}
.modal-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.modal-content{
  padding: 16px 16px 18px;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

.modal-meta{
  font-size: 12px;
  margin-bottom: 8px;
}

.modal-title{
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 900;
}

.modal-body{
  white-space: pre-wrap;
  line-height: 1.55;
  color: rgba(255,255,255,.82);
  font-size: 13px;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.55;
}

.modal-views-badge{
  position: absolute;
  right: 14px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(95,210,200,.25);
  background: rgba(8,12,16,.72);
  color: rgba(225,236,245,.92);
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
}

.modal-views-badge svg{
  width: 14px;
  height: 14px;
  opacity: .92;
}

.views-inline{
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.views-inline svg{
  width: 13px;
  height: 13px;
  opacity: .9;
}

.players-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.player-row{
  display: grid;
  grid-template-columns: 64px 1fr 110px;
  gap: 12px;
  align-items: center;

  padding: 12px;
  border-radius: 18px;
  cursor: pointer;

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

.player-row:hover{
  border-color: rgba(110,231,216,.20);
  background: rgba(110,231,216,.06);
}

.player-row:focus{
  outline: 2px solid rgba(110,231,216,.35);
}

.player-row.og-row{
  grid-template-columns: 1fr;
  padding-left: 18px;
}

.player-row.og-row .player-rank,
.player-row.og-row .player-kd{
  display: none;
}

.player-row.og-row .player-left{
  gap: 12px;
}

.player-rank{
  font-weight: 900;
  opacity: .9;
}

.player-left{
  display: flex;
  gap: 10px;
  align-items: center;
}

.player-badge{
  width: 40px;
  height: 40px;
  border-radius: 16px;

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

  font-weight: 900;
  background: rgba(110,231,216,.12);
  border: 1px solid rgba(110,231,216,.22);
}

.player-name .main{
  font-weight: 900;
}

.small{ font-size: 12px; }
.big{ font-size: 18px; font-weight: 900; }
.player-kd{ text-align: right; }
.hof-row{ cursor: pointer; }

.kd-normal{ color: rgba(255,255,255,.92); }
.kd-medal-gold{ color: #ffd166; text-shadow: 0 0 12px rgba(255,209,102,.18); }
.kd-medal-silver{ color: #cfd6df; text-shadow: 0 0 12px rgba(207,214,223,.16); }
.kd-medal-bronze{ color: #cd7f32; text-shadow: 0 0 12px rgba(205,127,50,.18); }

/* Players ranking typography tuning */
.players-list .player-name{
  font-weight: 700;
}

.players-list .player-name .main{
  font-weight: 800;
}

.players-list .player-name .muted{
  font-weight: 500;
}

.players-list .player-kd .big{
  font-weight: 800;
}



.teams-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.teams-list .team-card{
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  align-items: center;
}

.team-rank{
  font-weight: 900;
  opacity: .9;
}

.team-card{
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;

  padding: 12px;
  border-radius: 18px;

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer;
}

.team-card:hover{
  border-color: rgba(110,231,216,.25);
  background: rgba(110,231,216,.08);
}

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

.team-logo{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  overflow: hidden;

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

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

  flex: 0 0 auto;
}

.team-logo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.team-logo-fallback{
  font-weight: 900;
  background: rgba(110,231,216,.12);
  border-color: rgba(110,231,216,.22);
}

.team-info{
  min-width: 0;
}
.team-name{
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.teams-list .team-name{
  font-size: 16px;
  line-height: 1.2;
}

.team-right{
  display:flex;
  gap: 18px;
  align-items: center;
  flex: 0 0 auto;
}

.team-stat{
  text-align: right;
}

.teams-list .team-stat .big.kd-normal{
  color: rgba(255,255,255,.92);
}




.team-hero{
  display:flex;
  gap: 12px;
  align-items:center;
}

.team-hero-logo{
  width: 56px;
  height: 56px;
  border-radius: 18px;
  overflow: hidden;

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

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

  font-weight: 900;
  flex: 0 0 auto;
}

.team-hero-logo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.team-hero-logo.is-fallback{
  background: rgba(110,231,216,.12);
  border-color: rgba(110,231,216,.22);
}

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

.roster-item{
  display:flex;
  gap: 10px;
  align-items:center;

  padding: 12px;
  border-radius: 18px;

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  text-decoration: none;
  color: inherit;
}

.roster-item:hover{
  border-color: rgba(110,231,216,.25);
  background: rgba(110,231,216,.08);
}

.roster-badge{
  width: 40px;
  height: 40px;
  border-radius: 16px;

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

  font-weight: 900;
  background: rgba(110,231,216,.12);
  border: 1px solid rgba(110,231,216,.22);
  flex: 0 0 auto;
}


.mini-list{ display:flex; flex-direction:column; gap:10px; }

.mini-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  text-decoration:none; color:inherit;
}
.mini-row:hover{
  border-color: rgba(110,231,216,.25);
  background: rgba(110,231,216,.08);
}
.mini-left{ display:flex; gap:10px; align-items:center; min-width:0; }
.mini-badge{
  width:34px; height:34px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
  background: rgba(110,231,216,.12);
  border: 1px solid rgba(110,231,216,.22);
  flex:0 0 auto;
}
.mini-name{ font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-val{ font-weight:900; }


.matches-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.match-card{
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer;
}

.match-card:hover{
  border-color: rgba(110,231,216,.25);
  background: rgba(110,231,216,.08);
}

.match-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom: 10px;
}
.match-left{ display:flex; align-items:center; gap:10px; }

.match-mid{
  display:grid;
  grid-template-columns: 1fr 40px 1fr;
  align-items:center;
  gap:10px;
  padding: 10px 0;
}

.match-team{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.match-team.right{ justify-content:space-between; }

.match-team-name{
  font-weight: 900;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.match-score{
  font-weight: 900;
  font-size: 18px;
  padding: 6px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
}
.match-score.live{
  border-color: rgba(110,231,216,.30);
  background: rgba(110,231,216,.12);
}

.match-vs{ text-align:center; font-weight: 900; opacity:.7; }

.match-bot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top: 8px;
}




.match-hero{
  display:grid;
  grid-template-columns: 1fr 160px 1fr;
  gap: 14px;
  align-items:center;
  margin-top: 14px;
}

.match-team-big{
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  min-width: 0;
}
.match-team-big.right{ text-align:right; }

.match-team-name{
  font-weight: 900;
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.match-team-sub{ margin-top: 6px; }

.match-score-big{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
}
.match-score-big .score{
  font-size: 34px;
  font-weight: 900;
  padding: 8px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
}
.match-score-big .vs{ font-weight: 900; }

.btn-row{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.hidden{ display:none !important; }




.series-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.series-card{
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

.series-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}

.series-mid{
  display:grid;
  grid-template-columns: 1fr 90px 1fr;
  align-items:center;
  gap:10px;
  margin-bottom: 10px;
}

.series-team{
  font-weight: 900;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.series-team.right{ text-align:right; }

.series-score{
  text-align:center;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
}

.rounds{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.round{
  width: 22px;
  height: 22px;
  border-radius: 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 11px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  opacity: .9;
}

.round.ra{
  border-color: rgba(110,231,216,.35);
  background: rgba(110,231,216,.12);
}
.round.rb{
  border-color: rgba(255,120,120,.35);
  background: rgba(255,120,120,.10);
}
.round.rn{
  opacity: .5;
}

/* pequeno "badge" de imagem no meta do torneio (substitui pills EU / GROUPS) */
.event-meta-img{
  height: 28px;
  padding: 5px 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}
.event-meta-img img{
  height: 18px;
  width: auto;
  display: block;
  border-radius: 6px;
}

.search-results{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: min(420px, 100%);
  max-height: 320px;
  overflow: auto;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(10,14,16,.96);
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
  z-index: 1200;
}

.search-result-item{
  width: 100%;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: var(--text);
  border-radius: 12px;
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
  margin-bottom: 6px;
}

.search-result-item:hover{
  border-color: rgba(95,210,200,.28);
  background: rgba(95,210,200,.08);
}

.search-result-main{
  font-weight: 800;
  font-size: 13px;
}

.search-result-sub{
  margin-top: 3px;
  color: rgba(255,255,255,.6);
  font-size: 11px;
}

/* Floating Help */
.floating-help{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.floating-help-btn{
  width: 62px;
  height: 62px;
  border-radius: 999px;
  border: 1px solid rgba(95,210,200,.45);
  background:
    radial-gradient(circle at 30% 25%, rgba(145,255,245,.32), transparent 48%),
    linear-gradient(180deg, rgba(95,210,200,.92), rgba(65,170,162,.92));
  cursor: pointer;
  box-shadow:
    0 14px 36px rgba(0,0,0,.48),
    0 0 0 4px rgba(95,210,200,.18),
    inset 0 0 0 1px rgba(255,255,255,.15);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  animation: floatingHelpIdle 2.6s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floating-help-btn:hover{
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 14px 32px rgba(0,0,0,.48), 0 0 0 6px rgba(95,210,200,.25);
  filter: brightness(1.05);
}

.floating-help-icon{
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}

.floating-help-menu{
  width: 190px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(95,210,200,.25);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(95,210,200,.1), transparent 45%),
    rgba(10,14,16,.96);
  box-shadow: 0 18px 42px rgba(0,0,0,.56);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform-origin: 100% 100%;
  animation: floatingHelpMenuIn .16s ease-out;
}

.floating-help-btn.is-clicked{
  transform: scale(.92);
}

@keyframes floatingHelpIdle{
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes floatingHelpMenuIn{
  from { opacity: 0; transform: translateY(6px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Highlight row for Earnings in profile stats */
.row.row-earnings{
  border-color: rgba(95,210,200,.35);
  background:
    radial-gradient(140% 180% at 0% 0%, rgba(95,210,200,.12), transparent 48%),
    rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px rgba(95,210,200,.08);
}

.row.row-earnings strong{
  color: rgba(95,210,200,.95);
  letter-spacing: .02em;
}

.row.row-earnings .right{
  color: rgba(255,255,255,.96);
  font-weight: 900;
}

/* Player performance chart */
.performance-legend{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 8px;
}

.perf-item{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.82);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 700;
}

.perf-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(255,255,255,.25);
}

.performance-chart-wrap{
  height: 300px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background:
    radial-gradient(130% 140% at 0% 0%, rgba(95,210,200,.08), transparent 52%),
    rgba(255,255,255,.02);
  padding: 10px;
}

.performance-chart{
  width: 100%;
  height: 100%;
  display: block;
}

.perf-grid-line{
  stroke: rgba(255,255,255,.18);
  stroke-dasharray: 5 6;
}

.perf-axis-label{
  fill: rgba(255,255,255,.55);
  font-size: 11px;
  font-family: Sora, sans-serif;
}

.perf-x-label{
  fill: rgba(255,255,255,.55);
  font-size: 10px;
  font-family: Sora, sans-serif;
  dominant-baseline: alphabetic;
}

.perf-point-dot{
  stroke: rgba(9,13,18,.9);
  stroke-width: 2;
  filter: drop-shadow(0 0 6px rgba(47,123,255,.35));
}

.perf-point-dot-kd{
  filter: drop-shadow(0 0 6px rgba(47,123,255,.4));
}

.perf-point-dot-rating{
  filter: drop-shadow(0 0 6px rgba(57,255,90,.35));
}

.perf-point-label{
  fill: rgba(255,255,255,.9);
  font-size: 10px;
  font-weight: 800;
  font-family: Sora, sans-serif;
  paint-order: stroke fill;
  stroke: rgba(6,10,14,.88);
  stroke-width: 2px;
}

.perf-point-label-kd{
  fill: #8ec0ff;
}

.perf-point-label-rating{
  fill: #8bffac;
}

.perf-empty-label{
  fill: rgba(255,255,255,.62);
  font-size: 14px;
  font-weight: 700;
  font-family: Sora, sans-serif;
}

/* Rating color tiers (profile header + info table) */
.rating-pill{
  font-weight: 700;
  border-width: 1px;
}

.rating-tier-low{
  color: #ff8f9b !important;
  border-color: rgba(255, 95, 115, .46) !important;
  background: rgba(255, 72, 95, .14) !important;
}

.rating-tier-mid{
  color: #ffd98b !important;
  border-color: rgba(255, 199, 95, .44) !important;
  background: rgba(255, 199, 95, .14) !important;
}

.rating-tier-high{
  color: #78e8bf !important;
  border-color: rgba(80, 230, 170, .42) !important;
  background: rgba(80, 230, 170, .14) !important;
}

/* KD color tiers */
.kd-pill{
  font-weight: 700;
}

.kd-tier-low{
  color: #ff8f9b !important;
  border-color: rgba(255, 95, 115, .46) !important;
  background: rgba(255, 72, 95, .14) !important;
}

.kd-tier-mid{
  color: #ffd98b !important;
  border-color: rgba(255, 199, 95, .44) !important;
  background: rgba(255, 199, 95, .14) !important;
}

.kd-tier-high{
  color: #78e8bf !important;
  border-color: rgba(80, 230, 170, .42) !important;
  background: rgba(80, 230, 170, .14) !important;
}

/* Rating in Info table: text-only color (no cube background) */
.right.rating-value-low{
  color: #ff8f9b !important;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(255, 95, 115, .16);
}

.right.rating-value-mid{
  color: #ffd98b !important;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(255, 199, 95, .14);
}

.right.rating-value-high{
  color: #78e8bf !important;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(80, 230, 170, .14);
}

/* KD in Info table: text-only color (same threshold system) */
.right.kd-value-low{
  color: #ff8f9b !important;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(255, 95, 115, .16);
}

.right.kd-value-mid{
  color: #ffd98b !important;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(255, 199, 95, .14);
}

.right.kd-value-high{
  color: #78e8bf !important;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(80, 230, 170, .14);
}

/* Points style (team profile hero + info table) */
.points-pill{
  color: #8ecbff !important;
  border-color: rgba(80, 175, 255, .42) !important;
  background: rgba(80, 175, 255, .14) !important;
  box-shadow: 0 0 12px rgba(80, 175, 255, .12);
  font-weight: 800;
}

.right.points-value{
  color: #8ecbff !important;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(80, 175, 255, .18);
}

.wins-pill{
  color: #79efbc !important;
  border-color: rgba(80, 230, 170, .42) !important;
  background: rgba(80, 230, 170, .14) !important;
  box-shadow: 0 0 12px rgba(80, 230, 170, .12);
  font-weight: 800;
}

.losses-pill{
  color: #ff9ba8 !important;
  border-color: rgba(255, 95, 115, .46) !important;
  background: rgba(255, 72, 95, .14) !important;
  box-shadow: 0 0 12px rgba(255, 95, 115, .12);
  font-weight: 800;
}

.right.wins-value{
  color: #79efbc !important;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(80, 230, 170, .18);
}

.right.losses-value{
  color: #ff9ba8 !important;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(255, 95, 115, .18);
}

/* First-visit welcome + cookie modal */
body.welcome-open{
  overflow: hidden;
}

.welcome-gate{
  position: fixed;
  inset: 0;
  z-index: 1300;
}

.welcome-gate-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(8px);
}

.welcome-gate-card{
  position: relative;
  width: min(560px, calc(100vw - 24px));
  margin: min(12vh, 120px) auto 0;
  border-radius: 20px;
  border: 1px solid rgba(95,210,200,.28);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(95,210,200,.15), transparent 48%),
    rgba(9,13,18,.96);
  box-shadow: 0 24px 64px rgba(0,0,0,.58);
  padding: 18px;
}

.welcome-gate-close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  z-index: 2;
}

.welcome-gate-close:hover{
  border-color: rgba(95,210,200,.35);
  background: rgba(95,210,200,.12);
}

.welcome-gate-kicker{
  margin: 0 0 6px;
  color: rgba(95,210,200,.92);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
}

.welcome-gate-title{
  margin: 0 0 10px;
  font-size: 28px;
  line-height: 1.1;
}

.welcome-gate-text{
  margin: 0;
  color: rgba(255,255,255,.84);
  line-height: 1.5;
}

.welcome-gate-note{
  margin: 12px 0 0;
  color: rgba(255,255,255,.68);
  line-height: 1.45;
}

.welcome-gate-actions{
  margin-top: 16px;
  display: flex;
  justify-content: flex-start;
}

/* =========================
   Mobile polish (phone)
========================= */
@media (max-width: 900px){
  .topbar{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand right"
      "nav nav";
    align-items: center;
    gap: 8px 10px;
    padding: 10px 12px;
  }

  .topbar-left{
    display: contents;
  }

  .brand{
    grid-area: brand;
    min-width: 0;
    max-width: 100%;
  }

  .brand-logo{
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
  }

  .brand-text{
    font-size: 10px;
    letter-spacing: .09em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar-right{
    grid-area: right;
    margin-left: 0;
    justify-self: end;
    min-width: 0;
    max-width: 58vw;
  }

  .topbar-right .btn{
    white-space: nowrap;
    padding: 8px 11px;
    border-radius: 12px;
    font-size: 13px;
  }

  .topbar-right .search{
    width: auto;
    max-width: 58vw;
  }

  .topbar-right .search input{
    width: min(38vw, 190px);
    min-width: 112px;
  }

  .topnav{
    grid-area: nav;
    display: flex !important;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 2px 0 1px;
    scrollbar-width: none;
  }

  .topnav::-webkit-scrollbar{
    display: none;
  }

  .topnav a{
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 7px 10px;
    font-size: 14px;
  }

  /* Home hero: keep CTA readable on phones */
  .hero-top{
    align-items: flex-start;
  }

  .hero-meta{
    flex-wrap: wrap;
    gap: 8px;
  }

  .hero-actions .btn{
    white-space: nowrap;
    min-width: 136px;
  }

  /* Profile chart more balanced on small screens */
  .performance-chart-wrap{
    height: 235px;
    padding: 8px;
  }

  .perf-x-label{
    font-size: 9px;
  }

  /* On profile pages keep Share/Copy link at the end */
  main.portal-home > aside.col > .card-mini:first-child{
    order: 99;
  }
}