:root{
--bg:#0f1115;
--panel:#171a21;
--panel-2:#1d2129;
--panel-3:#11141a;
--line:#2d3440;
--line-soft:#232934;
--text:#eef2f7;
--muted:#a7b0be;
--red:#ff2b2b;
--white:#ffffff;
--shadow:0 14px 34px rgba(0,0,0,.28);
--radius:16px;
}

*{ box-sizing:border-box; }

html, body{
margin:0;
padding:0;
background:linear-gradient(180deg, #0c0f13 0%, #10141a 100%);
color:var(--text);
font-family:Arial, Helvetica, sans-serif;
}

body{
min-height:100vh;
}

.app{
width:100%;
max-width:100%;
padding:10px;
}

.shell{
background:var(--panel);
border:1px solid var(--line);
border-radius:20px;
overflow:hidden;
box-shadow:var(--shadow);
margin-top: 56px;
}

.peloto-topbar{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;

height: 56px;
background: rgba(26,26,29,.92);
backdrop-filter: blur(8px);
border-bottom: 1px solid rgba(255,255,255,.06);
}

.peloto-topbar-inner{
height: 100%;
width: min(1100px, calc(100% - 20px));
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}

.peloto-brand{
display:flex;
align-items:center;
min-width:0;
}

.peloto-logo{
height:34px;
width:auto;
display:block;
object-fit:contain;
}

.peloto-actions{
display:flex;
align-items:center;
gap:12px;
flex-shrink:0;
}

.peloto-action-link{
display:inline-flex;
align-items:center;
gap:8px;
color:#ff1f1f;
text-decoration:none;
font-size:13px;
font-weight:800;
letter-spacing:.04em;
white-space:nowrap;
}

.peloto-action-link:hover{
opacity:.9;
}

.peloto-gift{
font-size:16px;
line-height:1;
}

.peloto-flag-btn{
width:34px;
height:34px;
border:none;
border-radius:999px;
background:transparent;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
padding:0;
}

.peloto-flag{
font-size:22px;
line-height:1;
}

@media (max-width: 480px){
.peloto-topbar{
padding:0 10px;
height:54px;
}

.peloto-logo{
height:30px;
}

.peloto-action-link{
font-size:12px;
gap:6px;
}

.peloto-gift{
font-size:14px;
}

.peloto-flag{
font-size:20px;
}
}

.header{
padding:18px 16px 14px;
border-bottom:1px solid var(--line);
background:
radial-gradient(circle at top right, rgba(255,43,43,.12), transparent 26%),
linear-gradient(180deg, #1a1f27 0%, #141820 100%);
}

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

.header-main{
min-width:0;
}

.header-copa-badge{
flex-shrink:0;
opacity:.75;
transition:.2s;
}

.header-copa-badge img{
height:38px;
width:auto;
object-fit:contain;
filter: grayscale(1) brightness(1.2);
}

.header-copa-badge:hover{
opacity:1;
transform:scale(1.03);
}

.header h1{
margin:0;
font-size:22px;
color:var(--white);
font-weight:800;
letter-spacing:.02em;
}

.header p{
margin:6px 0 0;
color:var(--muted);
font-size:13px;
line-height:1.4;
}

.route-bar{
padding:14px 12px;
border-bottom:1px solid var(--line);
background:#141922;
}

.route-title{
font-size:11px;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--muted);
font-weight:700;
margin-bottom:10px;
}

.route-buttons{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}

.route-btn{
height:44px;
border-radius:12px;
border:1px solid var(--line);
background:#1b2028;
color:var(--muted);
font-weight:800;
cursor:pointer;
transition:.2s;
font-size:14px;
}

.route-btn.active{
color:var(--white);
border-color:var(--red);
box-shadow:inset 0 0 0 1px var(--red);
background:linear-gradient(180deg, rgba(255,43,43,.12), rgba(255,43,43,.04));
}

.summary-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
padding:12px 12px;
}

.summary-card{
background:var(--panel-2);
border:1px solid var(--line);
border-radius:14px;
padding:12px;
min-height:82px;
display:flex;
flex-direction:column;
justify-content:center;
}

.summary-label{
font-size:11px;
text-transform:uppercase;
letter-spacing:.06em;
color:var(--muted);
margin-bottom:6px;
}

.summary-value{
font-size:20px;
font-weight:800;
color:var(--white);
line-height:1.1;
}

.tabs{
display:grid;
grid-template-columns:1fr 1fr;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
background:var(--panel-3);
position:sticky;
top:0;
z-index:5;
}

.tab-btn{
height:50px;
border:none;
background:transparent;
color:var(--muted);
font-weight:800;
font-size:14px;
cursor:pointer;
border-bottom:3px solid transparent;
}

.tab-btn.active{
color:var(--white);
border-bottom-color:var(--red);
background:rgba(255,255,255,.02);
}

.tab-panel{
display:none;
padding:14px 12px 18px;
}

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

.filters{
display:grid;
gap:10px;
margin-bottom:14px;
}

.field{
display:flex;
flex-direction:column;
gap:6px;
}

.field label{
font-size:11px;
color:var(--muted);
text-transform:uppercase;
letter-spacing:.05em;
font-weight:700;
}

input, select{
width:100%;
height:44px;
border-radius:12px;
border:1px solid var(--line);
background:#11161d;
color:var(--white);
padding:0 12px;
outline:none;
font-size:14px;
}

input::placeholder{
color:#738095;
}

.input-clear-wrapper {
position: relative;
}

.input-clear-wrapper input {
width: 100%;
padding-right: 36px; /* espaço pro X */
}

.clear-btn {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
font-size: 14px;
color: #94a3b8;
opacity: 0;
transition: 0.2s;
}

.input-clear-wrapper:hover .clear-btn {
opacity: 1;
}

.input-clear-wrapper input:not(:placeholder-shown) + .clear-btn {
opacity: 1;
}

.clear-btn:hover {
color: #ef4444;
}
.section-pills{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:12px;
}

.pill{
padding:8px 10px;
border-radius:999px;
border:1px solid var(--line);
background:#11161d;
color:var(--muted);
font-size:12px;
}

.pill strong{
color:var(--white);
}

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

.rank-card{
background:linear-gradient(180deg, #171d26 0%, #131922 100%);
border:1px solid var(--line);
border-radius:18px;
overflow:hidden;
position: relative;
}

.rank-card-top{
display:flex;
gap:12px;
justify-content: space-between;
padding:14px;
position: relative;
}

.rank-toogle{
    align-content: center;
}

.rank-badge{
flex:0 0 auto;
width:42px;
height:42px;
border-radius:999px;
border:1px solid var(--line);
background:#1b212a;
display:flex;
align-items:center;
justify-content:center;
font-weight:800;
color:var(--white);
font-size:15px;
}

.rank-main{
flex:1;
min-width:0;
min-height:42px;
align-content:center;
}

.rank-name{
font-size:16px;
font-weight:800;
color:var(--white);
line-height:1.2;
word-break:break-word;
}

.rank-sub{
margin-top:4px;
color:var(--muted);
font-size:13px;
line-height:1.35;
word-break:break-word;
}

.score-box{
flex:0 0 auto;
text-align:right;
min-width:86px;
}

.score-value{
font-size:22px;
line-height:1;
font-weight:900;
color:var(--red);
}

.score-label{
margin-top:5px;
font-size:11px;
color:var(--muted);
text-transform:uppercase;
letter-spacing:.05em;
}

.meta-grid{
display: none;
grid-template-columns:1fr 1fr 1fr;
gap:8px;
padding:0 14px 14px;
}

.corner-toggle {
top: 6px;
right: 0;
width: 34px;
height: 34px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.10);
background: rgba(255,255,255,0.04);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.corner-toggle-icon {
width: 18px;
height: 18px;
color: #fff;
}

.corner-toggle-icon {
  transition: transform 0.25s ease;
}

.corner-toggle.active .corner-toggle-icon {
  transform: rotate(180deg);
}

.corner-toggle-icon path {
stroke: currentColor;
fill: #fff;
}

.meta-grid-team{
display:none;
grid-template-columns:1fr 1fr;
gap:8px;
padding:0 14px 14px;
}

.meta-item{
background:#11161d;
border:1px solid var(--line);
border-radius:12px;
padding:10px;
min-height:62px;
}

.meta-item-big{
grid-column:span 3;
}

.meta-item-big-team{
grid-column:span 2;
}

.meta-label{
font-size:10px;
text-transform:uppercase;
letter-spacing:.06em;
color:var(--muted);
margin-bottom:6px;
}

.meta-value{
font-size:14px;
color:var(--white);
font-weight:700;
line-height:1.25;
word-break:break-word;
}

details.accordion{
border-top:1px solid var(--line);
background:#121821;
display: none;
}

details.accordion summary{
list-style:none;
cursor:pointer;
padding:12px 14px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}

details.accordion summary::-webkit-details-marker{
display:none;
}

.accordion-title{
display:flex;
flex-direction:column;
gap:3px;
min-width:0;
}

.accordion-title strong{
color:var(--white);
font-size:14px;
line-height:1.2;
}

.accordion-sub{
font-size:12px;
color:var(--muted);
line-height:1.3;
}

.accordion-icon{
color:var(--muted);
font-size:18px;
line-height:1;
transition:.2s;
flex:0 0 auto;
}

details[open] .accordion-icon{
transform:rotate(180deg);
}

.accordion-content{
padding:0 12px 12px;
display:flex;
flex-direction:column;
gap:8px;
}

.detail-item{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:10px;
padding:10px;
border-radius:12px;
border:1px solid var(--line);
background:#141b24;
}

.detail-left{
display:flex;
flex-direction:column;
gap:3px;
min-width:0;
flex:1;
}

.detail-name{
font-weight:700;
color:var(--white);
font-size:14px;
line-height:1.3;
word-break:break-word;
}

.detail-sub{
font-size:12px;
color:var(--muted);
line-height:1.35;
word-break:break-word;
}

.detail-points{
font-weight:800;
color:var(--red);
white-space:nowrap;
text-align:right;
font-size:14px;
flex:0 0 auto;
}

.hint{
padding:12px 14px;
color:var(--muted);
font-size:12px;
line-height:1.4;
border-top:1px solid var(--line);
background:#121821;
}

.empty{
padding:24px 16px;
border:1px dashed var(--line);
border-radius:16px;
background:#11161d;
color:var(--muted);
text-align:center;
font-size:14px;
line-height:1.4;
}

@media (min-width: 768px){
.app{
max-width:1100px;
margin:0 auto;
padding:18px;
}

.header{
padding:22px 22px 18px;
}

.header h1{
font-size:28px;
}

.route-bar{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:16px 20px;
}

.route-title{
margin-bottom:0;
}

.route-buttons{
display:flex;
flex-wrap:wrap;
width:auto;
}

.route-btn{
min-width:140px;
padding:0 18px;
}

.summary-grid{
grid-template-columns:repeat(3, 1fr);
padding: 12px 12px;
align-items: center;
}

.tab-panel{
padding:18px 20px 22px;
}

.filters.individual{
grid-template-columns:1.2fr 1fr 1fr 1fr;
}

.filters.team{
grid-template-columns:1fr 320px;
}

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

.rank-card-top{
padding:16px;
}
}

@media (min-width: 1024px){
.summary-grid{
grid-template-columns:repeat(6, 1fr);
}
}