:root {
  /* SFONDI DHE STRUKTURA (Më e thellë, stil cyber-sports) */
  --bg:     #12151c;  /* Pak më i mbyllur që të ngrihen kartat sipër */
  --bg2:    #1e2330;  /* Kartat - hiri i pastër me nuancë të lehtë blu */
  --bg3:    #2b3245;  /* Butonat aktivë - kontrast i fortë */
  --border: #38425d;  /* Vijat e pajes - tani duken si filamente elegante */

  /* TEKSTET */
  --text:   #f8fafc;  /* Bardhësi e pastër akulli për emrat kryesorë */
  --text2:  #cbd5e1;  /* Shkrimi dytësor - shumë i qartë */
  --text3:  #64748b;  /* Shkrimi TBD - hiri i zbehur që tregon se s'ka ndeshje akoma */
  --text-disabled: #475569; /* E RE: Për shkronjat e zeza të NEP te kutitë e zbrazëta */

  /* NGJYRAT E STATUSEVE (Moderne, jo si semafor) */
  --gold:   #f59e0b;  /* E artë e ngrohtë, më pak "plastike" */
  --gold2:  #fbbf24;  /* E artë e ndritshme për kampionin 🏆 */
  --green2: #10b981;  /* E gjelbër smeraldi e pastër për fituesit */
  --red:    #ef4444;  /* E kuqe e matur koral për penalltitë */
  --blue2:  #0ea5e9;  /* E kaltër qielli elektrike për badget */
}

*{box-sizing:border-box;margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  font-size:13px;
}
.hdr{
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  padding:11px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:200;
  
}
.hdr-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:20px;
  font-weight:800;
  color:var(--gold2);
  letter-spacing:.04em;
  text-transform:uppercase;
  
}
.hdr-sub{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  color:var(--text3);
  margin-top:2px;
  
}
.hdr-btns{
  display:flex;
  gap:8px;
  
}
.btn{
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:4px;
  border:1px solid var(--border);
  cursor:pointer;
  background:var(--bg3);
  color:var(--text2);
  transition:all .15s;
  
}
.btn:hover{
  border-color:var(--gold);
  color:var(--gold);
  
}
.btn.save{
  background:var(--gold);
  color:#0a0c0f;
  border-color:var(--gold);
  
}
.btn.save:hover{
  background:var(--gold2);
  
}
.btn.rst{
  border-color:var(--red);
  color:var(--red);
  
}
.btn.rst:hover{
  background:var(--red);
  color:#fff;
  
}

/* LEGEND */
.legend{
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  padding:6px 20px;
  display:flex;
  gap:18px;
  align-items:center;
  font-size:12px;
  color:var(--text2);
  
}
.ldot{
  width:24px;
  height:17px;
  border-radius:3px;
  display:inline-block;
  margin-right:4px;
  vertical-align:middle;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  font-weight:600;
  text-align:center;
  line-height:17px;
  
}
.ldot.n{
  background:#1a1e2a;
  border:1px solid #3a4258;
  color:#d0d4de;
  
}
.ldot.e{
  background:#1e1a0a;
  border:1px solid #4a3a18;
  color:var(--gold);
  
}
.ldot.p{
  background:#1e0a0c;
  border:1px solid #4a1518;
  color:var(--red);
  
}

/* CANVAS */
.canvas{
  overflow-x:auto;
  padding:16px 12px 40px;
  
}

/* BRACKET OUTER */
.bracket-outer{
  display:flex;
  align-items:stretch;
  gap:0;
  min-width:max-content;
}
.bracket-outer {
  display: flex;
  align-items: stretch;
  justify-content: space-between; /* Kjo e shtyn anën e majtë dhe të djathtë fiks në skaje në mënyrë të barabartë */
  width: 100%;
  max-width: 1600px; /* Mund ta rritësh pak që të hapet në monitorë të gjerë */
  margin: 0 auto;    /* E centron të gjithë strukturën në mes të monitorit */
}

/* HALF */
.half{
  display:flex;
  align-items:stretch;
  gap:0;
  
}
.half.right{
  flex-direction:row-reverse;
  
}

/* CENTER */
.center-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  min-width:300px;
  padding:0 8px;
  
}

/* ROUND COLUMN */
.rcol{
  display:flex;
  flex-direction:column;
  min-width:185px;
  justify-content:flex-start;
}
.rcol.right{
  align-items:stretch;
}
.rcol > div:last-child {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.rhdr{
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text3);
  text-align:center;
  padding-bottom:8px;
  white-space:nowrap;
  
}
.rhdr span{
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  font-weight:400;
  color:var(--text3);
  margin-top:1px;
}

/* MATCH WRAPPER */
.mwrap{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* MATCH CARD */
.mcard{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:5px;
  overflow:hidden;
  margin:0 3px;
}
.mcard:hover{
  border-color:#2a3248;
}

/* ENGINE ROW */
.erow{
  display:flex;
  align-items:center;
  min-height:30px;
  border-bottom:1px solid var(--border);
}
.erow:last-child{
  border-bottom:none;
}
.erow.won{
  background:#0e1710;
}
.erow.lost{
  opacity:.75;
}

.eseed{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:var(--text3);
  width:22px;
  text-align:center;
  flex-shrink:0;
  
}
.ebadge{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  font-weight:600;
  padding:1px 4px;
  border-radius:2px;
  margin:0 2px;
  flex-shrink:0;
  line-height:14px;
  
}
.eb1{
  background:#0e1710;
  border:1px solid #2a5030;
  color:var(--green2);
  
}
.eb2{
  background:#0e1420;
  border:1px solid #1a3060;
  color:var(--blue2);
  
}
.eb3{
  background:#1e1a0a;
  border:1px solid #4a3a18;
  color:var(--gold);
  
}

.ename{
  flex:1;
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding:3px 2px 3px 0;
  
}
.ename.tbd{
  color:var(--text3);
  font-style:italic;
  font-size:11px;
  font-weight:400;
  
}
.ename.win{
  color:var(--gold2);
  
}

/* SCORE INPUTS */
.escores{
  display:flex;
  gap:2px;
  padding:2px 4px;
  flex-shrink:0;
  
}
.sinp{
  width:22px;
  height:19px;
  border-radius:3px;
  border:1px solid var(--border);
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  font-weight:600;
  text-align:center;
  outline:none;
  transition:border-color .12s,background .12s;
  -moz-appearance:textfield;
  
}
.sinp::-webkit-outer-spin-button,.sinp::-webkit-inner-spin-button{
  -webkit-appearance:none;
  
}
.sinp.n{
  background:#1a1e2a;
  border-color:#2a3040;
  color:#d0d4de;
  
}
.sinp.n:focus{
  border-color:#8b919e;
  
}
.sinp.e{
  background:#1e1a0a;
  border-color:#3a2c10;
  color:var(--gold);
  
}
.sinp.e:focus{
  border-color:var(--gold);
  
}
.sinp.p{
  background:#1e0a0c;
  border-color:#3a1015;
  color:var(--red);
  
}
.sinp.p:focus{
  border-color:var(--red);
  
}
.sinp:disabled{
  opacity:.2;
  cursor:not-allowed;
  
}

/* CONNECTOR */
.conn-col{
  width:20px;
  position:relative;
  flex-shrink:0;
}
/* Kolona e mesit (ku rri kupa, finalja dhe vendi i 3-të) */
.center-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 300px; /* E rritim nga sa ishte, në 220px ose 240px sipas qejfit */
  gap: 20px;
  flex-shrink: 0;
}

/* Kufizojmë që kartat e finales dhe vendit të 3-të të marrin të gjithë gjerësinë e re */
.center-col .mcard {
  width: 100%; /* Merr automatikisht gjerësinë e re të madhe të kolonës */
}
/* Detyrojmë kartat brenda kolonës qendrore të marrin gjerësi të madhe specifike */
.center-col .mcard {
  width: 220px !important;  /* Nga ~180px që janë të tjerat, këtë e bëjmë 260px ose sa të duash ti */
  min-width: 220px !important;
}

/* Sigurohemi që emrat e motorëve brenda tyre të kenë hapësirë të shtrihen */
.center-col .ename {
  font-size: 14px; /* Mund t'ia rritësh edhe çik shkrimin finalistëve se janë VIP-a */
  padding-right: 10px;
}
.conn-col svg{
  display:block;
  overflow:visible;
  
}
.conn-col svg line {
  stroke: var(--border);
  stroke-width: 1.5px;
}

/* CENTER: Final + 3rd */
.center-label{
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold);
  text-align:center;
  margin-bottom:4px;
  
}
.center-label.gold{
  color:var(--gold2);
  
}
.final-card{
  min-width:360px;
  
}
.trophy-area{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:8px 0;
  
}
.trophy-icon{
  font-size:28px;
  line-height:1;
  
}
.trophy-name{
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;
  font-weight:700;
  color:var(--gold2);
  text-align:center;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-top:4px;
  
}
.trophy-name.tbd{
  color:var(--text3);
  font-style:italic;
  font-weight:400;
  font-size:11px;
  
}

/* MATCH ID label */
.mid-lbl{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  color:var(--text3);
  text-align:center;
  padding:2px 0 1px;
  letter-spacing:.05em;
  
}

/* STATUS */
.statusbar{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:var(--bg2);
  border-top:1px solid var(--border);
  padding:6px 20px;
  display:flex;
  align-items:center;
  gap:12px;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  color:var(--text3);
  z-index:200;
  
}
.statusbar .ok{
  color:var(--green2);
  
}
.statusbar .chg{
  color:var(--gold);
  
}
.notif{
  position:fixed;
  top:60px;
  right:16px;
  background:var(--bg3);
  border:1px solid var(--green2);
  color:var(--green2);
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  padding:7px 12px;
  border-radius:4px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s;
  z-index:300;
  
}
.notif.show{
  opacity:1;
  
}
/* Sigurohet që kolonat e vijave të kenë ekzaktësisht lartësinë e lojtarëve */
.conn-col {
  display: flex;
  flex-direction: column;
  width: 15px;
  position: relative;
  flex-shrink: 0;
  margin-top: 30px; /* Sa lartësia e rhdr (titullit të raundit) */
}

/* Çdo çift vijash ndan hapësirën në mënyrë të barabartë */
.conn-pair-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.conn-pair-wrap svg {
  height: 50%; /* Merr saktësisht distancën mes dy qendrave të kartave */
}

/* Stili për kartat e klikueshme */
.mcard.clickable {
  cursor: pointer !important;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.mcard.clickable:hover {
  background: #1f242c !important; 
  border-color: #58a6ff !important; 
}


/* Kontenitori kryesor i elementeve brenda header-it */
.hdr-content {
  display: flex;
  justify-content: space-between; /* E shtyn titullin majtas dhe linkun djathtas */
  align-items: flex-start;        /* I rreshton në pjesën e sipërme (Top) */
  width: 100%;
}

/* Stilimi i linkut që të duket më profesional */
.hdr-link {
  text-decoration: none;
  color: #f07b15; /* Ndryshoje sipas ngjyrës së faqes tënde */
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.2s;
  white-space: nowrap; /* Parandalon thyerjen e linkut në dy rreshta */
}

/* Efekti kur kalon mausin mbi link */
.hdr-link:hover {
  background-color: rgba(0, 123, 255, 0.1);
}

// Shto CSS në fluturim që t'i bëjë fushat e inputit të paklikueshme (Read-Only Vizuale)
const style = document.createElement('style');
style.innerHTML = '.sinp { pointer-events: none !important; background: rgba(255,255,255,0.03) !important; color: #888 !important; border: none !important; } .mcard { box-shadow: none !important; }';
document.head.appendChild(style);