*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-sans,sans-serif)}

.hero{
  padding:2.5rem 0 2rem}
.hero-title{
  font-size:28px;
  font-weight:700;
  color:var(--color-text-primary);
  letter-spacing:-.02em;
  line-height:1.2}
.hero-sub{
  font-size:15px;
  color:var(--color-text-secondary);
  margin-top:.5rem;
  line-height:1.6}
.hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin-top:1.25rem}
.meta-chip{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  color:var(--color-text-secondary)}
.meta-chip i{
  font-size:16px}

.kpi-row{
  display:flex !important;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  justify-content: center !important;;
  margin-bottom:2.5rem;
  max-width: 1000px;
}
.kpi{
  background:var(--color-background-primary);
  border:0.5px solid var(--color-border-tertiary);
  border-radius:14px;
  width: 100%;
  padding:1.25rem 1.1rem;
}
.kpi-label{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--color-text-secondary);
  margin-bottom:.5rem;
}
.kpi-val{
  font-size:26px;
  font-weight:700;
  color:var(--color-text-primary);
  line-height:1;
}
.kpi-sub{
  font-size:12px;
  color:var(--color-text-secondary);
  margin-top:.35rem;
}
.kpi-badge{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  padding:2px 8px;
  border-radius:20px;
  margin-top:.4rem;
}
.g{
  color:#0F6E56;
  background:#E1F5EE;
}
.r{
  color:#993C1D;
  background:#FAECE7;
}
.b{
  color:#185FA5;
  background:#E6F1FB;
}
.a{
  color:#633806;
  background:#FAEEDA;
}

.section-label{
  width:100%;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--color-text-secondary);
  margin-bottom:1rem;
  padding-bottom:.5rem;
  border-bottom:0.5px solid var(--color-border-tertiary);
}

.board-wrap{
  overflow-x:auto;
  margin-bottom:2.5rem;
}
table.board{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
table.board th{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--color-text-secondary);
  padding:10px 12px;
  border-bottom:1.5px solid var(--color-border-secondary);
  text-align:right;
  white-space:nowrap;
}
table.board th:nth-child(1),table.board th:nth-child(2){
  text-align:left;
}
table.board td{
  padding:11px 12px;
  border-bottom:0.5px solid var(--color-border-tertiary);
  color:var(--color-text-primary);
  text-align:right;
  vertical-align:middle;
  font-size:14px}
table.board td:nth-child(1){
  font-size:13px;
  color:var(--color-text-secondary);
  text-align:left;
  font-weight:700;
  width:36px;
}
table.board td:nth-child(2){
  text-align:left;
  font-weight:700;
  max-width:0;
  white-space:nowrap}
table.board tr:hover td{
  background:var(--color-background-secondary)}
.top3 td{
  background:color-mix(in srgb,var(--color-background-secondary) 70%,transparent)}

.pill{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  padding:2px 9px;
  border-radius:20px;
  margin-left:6px;
  vertical-align:middle}
.pill-sf{
  background:#E6F1FB;
  color:#0C447C}
.pill-rc{
  background:#E1F5EE;
  color:#085041}
.pill-pc{
  background:#FAEEDA;
  color:#633806}
.pill-ax{
  background:#FBEAF0;
  color:#72243E}
.pill-ob{
  background:#EEEDFE;
  color:#3C3489}
.pill-ca{
  background:#FAECE7;
  color:#712B13}
.pill-be{
  background:#F1EFE8;
  color:#444441}
.pill-kd{
  background:#F1EFE8;
  color:#2C2C2A}
.pill-ru{
  background:#FCEBEB;
  color:#791F1F}
.pill-pn{
  background:#FAECE7;
  color:#712B13}

.elo-delta{
  font-weight:700}
.elo-pos{
  color:#0F6E56}
.elo-neg{
  color:#993C1D}
.elo-neu{
  color:var(--color-text-secondary)}

.bar-cell{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:flex-end}
.elo-bar-track{
  width:80px;
  height:6px;
  background:var(--color-background-secondary);
  border-radius:3px;
  overflow:hidden;
  flex-shrink:0}
.elo-bar-fill{
  height:100%;
  border-radius:3px}

.trend-up{
  color:#0F6E56;
  font-size:13px}
.trend-dn{
  color:#993C1D;
  font-size:13px}
.trend-fl{
  color:var(--color-text-secondary);
  font-size:13px}

.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:2.5rem}
.card{
  background:var(--color-background-primary);
  border:0.5px solid var(--color-border-tertiary);
  border-radius:14px;
  padding:1.4rem}
.card-title{
  font-size:15px;
  font-weight:700;
  color:var(--color-text-primary);
  margin-bottom:.35rem}
.card-body{
  font-size:13px;
  color:var(--color-text-secondary);
  line-height:1.75}
.card-body strong{
  color:var(--color-text-primary);
  font-weight:700}

.block-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  margin-top:.75rem}
.block-table th{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--color-text-secondary);
  padding:5px 6px;
  text-align:right;
  border-bottom:0.5px solid var(--color-border-tertiary)}
.block-table th:first-child{
  text-align:left}
.block-table td{
  padding:6px 6px;
  border-bottom:0.5px solid var(--color-border-tertiary);
  text-align:right;
  font-size:12px}
.block-table td:first-child{
  text-align:left;
  font-weight:700;
  color:var(--color-text-primary)}
.bp{
  color:#0F6E56;
  font-weight:700}
.bn{
  color:#993C1D;
  font-weight:700}

.chart-section{
  margin-bottom:2.5rem}
.chart-legend{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:12px}
.legend-item{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:var(--color-text-secondary)}
.legend-dot{
  width:10px;
  height:10px;
  border-radius:2px;
  flex-shrink:0}

.anomaly-box{
  border:1.5px solid #E6F1FB;
  background:#E6F1FB22;
  border-radius:14px;
  padding:1.4rem;
  margin-bottom:2.5rem}
.anomaly-title{
  font-size:15px;
  font-weight:700;
  color:#0C447C;
  margin-bottom:.5rem}
.anomaly-body{
  font-size:13px;
  color:var(--color-text-secondary);
  line-height:1.75}
.anomaly-body strong{
  color:var(--color-text-primary);
  font-weight:700}

.prediction-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin-bottom:2.5rem}
.pred-card{
  border-radius:12px;
  padding:1.1rem 1.2rem;
  border:0.5px solid var(--color-border-tertiary)}
.pred-engine{
  font-size:15px;
  font-weight:700;
  color:var(--color-text-primary);
  margin-bottom:.25rem}
.pred-verdict{
  font-size:12px;
  color:var(--color-text-secondary);
  line-height:1.6}
.pred-tag{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  padding:3px 10px;
  border-radius:20px;
  margin-bottom:.5rem}

.footer-note{
  font-size:12px;
  color:var(--color-text-secondary);
  padding:1.25rem 0 .5rem;
  border-top:0.5px solid var(--color-border-tertiary);
  line-height:1.7}
.footer-note strong{
  color:var(--color-text-primary);
  font-weight:700;
  width: 100%
}
/* --- 1. Kontrolli i Hapësirës Globale (Anti-Kinë) --- */
.two-col, 
.prediction-grid, 
.anomaly-box, 
.footer-note, 
.section-label {
  max-width: 1000px;      /* Kufiri që vendosëm bashkë */
  margin-left: auto;      /* Qendron bllokun në mes */
  margin-right: auto;     /* Qendron bllokun në mes */
  width: 100%;            /* Përshtatet në ekrane më të vogla */
  box-sizing: border-box;
}

/* --- 2. Rregullimi i Kartave kryesore (Key Findings) --- */
.two-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* I ndan në 2 kolona të barabarta */
  gap: 20px;                             /* Distancë e këndshme mes kartave */
  margin-bottom: 2.5rem;
}

/* --- 3. Rregullimi i Kartave të Parashikimit (Final Standings) --- */
.prediction-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Edhe këto në 2 kolona që të mos zgjaten */
  gap: 20px;
  margin-bottom: 2.5rem;
}

/* --- 4. Stilimi i brendshëm për t'i bërë super të lexueshme --- */
.card, .pred-card {
  background: var(--color-background-primary, #ffffff);
  border: 1px solid var(--color-border-tertiary, #e0e0e0);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02); /* Një hije e lehtë që të duken bukur */
}

.card-title, .pred-engine {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary, #111);
  margin-bottom: 0.75rem;
}

.card-body, .pred-verdict {
  font-size: 14.5px;
  line-height: 1.6; /* Hapësirë mes rreshtave të tekstit që të lexohet pa lodhur sytë */
  color: var(--color-text-secondary, #444);
}

/* --- 5. Anomaly Box & Section Labels --- */
.section-label {
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--color-text-primary, #111);
}

.anomaly-box {
  background: #fff9db; /* Një sfond i lehtë i verdhë për anomalitë */
  border: 1px solid #ffe066;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2.5rem;
}

.anomaly-title {
  font-weight: 700;
  color: #854000;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}

.anomaly-body {
  font-size: 14.5px;
  line-height: 1.6;
  color: #495057;
}

/* --- 6. Footer Note --- */
.footer-note {
  background: var(--color-background-secondary, #f8f9fa);
  padding: 1.5rem;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.6;
  border-left: 4px solid var(--color-border-primary, #228be6); /* Një vijë vizuale anash */
}

/* --- 7. Përshtatja për Telefon (Responsive) --- */
@media (max-width: 768px) {
  .two-col, .prediction-grid {
    grid-template-columns: 1fr; /* Në telefon bëhen 1 kolonë që mos të shtypen */
  }
}
/* --- 1. Mbledhja e Hero dhe KPI-row (Anti-Kinë për pjesën e sipërme) --- */
.hero, 
.kpi-row {
  max-width: 1000px;      /* E njëjta gjerësi që të rreshtohen në vijë të drejtë me të tjerat */
  margin-left: auto;      /* Qendrim në mes */
  margin-right: auto;     /* Qendrim në mes */
  width: 100%;
  box-sizing: border-box;
}

/* --- 2. Rregullimi i 4 Kartave KPI --- */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 karta në një rresht */
  gap: 16px;                             /* Distancë e pastër mes tyre */
  margin-bottom: 2.5rem;
}

/* --- 3. Stilimi i brendshëm i Hero Section --- */
.hero {
  padding: 2.5rem 0;                     /* Hapësirë sipër dhe poshtë */
  border-bottom: 1px solid var(--color-border-tertiary, #e0e0e0);
  margin-bottom: 2rem;
}

.hero-title {
  font-size: 32px;
  font-weight: 800;
  color: var(--color-text-primary, #111);
  margin-bottom: 0.5rem;
}

.hero-sub {
  font-size: 16px;
  color: var(--color-text-secondary, #555);
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

/* --- 4. Stilimi i Çipsave (Meta Chips) --- */
.hero-meta {
  display: flex;
  flex-wrap: wrap;                       /* Nëse ekrani zvogëlohet, kalojnë poshtë */
  gap: 10px;
}

.meta-chip {
  background: var(--color-background-secondary, #f1f3f5);
  color: var(--color-text-secondary, #495057);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.meta-chip i {
  margin-right: 6px;                     /* Hapësirë mes ikonës dhe tekstit */
}

/* --- 5. Përshtatja për Ekran të Vogël (Celular) --- */
@media (max-width: 900px) {
  .kpi-row {
    grid-template-columns: repeat(2, 1fr); /* Në tablet bëhen 2x2 */
  }
}

@media (max-width: 550px) {
  .kpi-row {
    grid-template-columns: 1fr;            /* In telefon bëhen 1 kolonë, njëra nën tjetrën */
  }
}
/* --- 1. Kontrolli i Gjerësisë për Tabelat dhe Grafikët --- */
.board-wrap,
.chart-section,
.block-table {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

/* --- 2. Rregullimi i Tabelës së Renditjes (Board) --- */
.board-wrap {
  overflow-x: auto; /* Nëse ekrani është i vogël, tabela mund të rrëshqasë me gisht majtas-djathtas pa prishur faqen */
  margin-bottom: 2.5rem;
  border: 1px solid var(--color-border-tertiary, #e0e0e0);
  border-radius: 12px;
}

.board {
  width: 100%;
  border-collapse: collapse; /* Heq hapësirat e kota mes qelizave */
  text-align: left;
  font-size: 14px;
}

.board th, .board td {
  padding: 12px 16px; /* I jep frymëmarrje rreshtave të tabelës */
  border-bottom: 1px solid var(--color-border-tertiary, #e0e0e0);
}

.board th {
  background: var(--color-background-secondary, #f8f9fa);
  font-weight: 700;
  color: var(--color-text-primary, #111);
}

/* --- 3. Rregullimi i Grafikëve (Chart Section) --- */
.chart-section {
  background: var(--color-background-primary, #ffffff);
  border: 1px solid var(--color-border-tertiary, #e0e0e0);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2.5rem;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 1rem;
  font-size: 13px;
}

/* --- 4. Tabela e Blloqeve (Block Table) --- */
.block-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.block-table th, .block-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border-tertiary, #e0e0e0);
}