* { box-sizing: border-box; }
/* Mtindo wa zamani: ukurasa wa maziwa, safu ya bluu katikati, maandishi makubwa */
body {
  background: #efece2;              /* rangi ya maziwa nyuma */
  margin: 0; padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}
.ukurasa { max-width: 760px; margin: 0 auto; background: #efece2; }
.juu { background: #0a2a66; color: #f0a020; padding: 10px 12px; }
.juu .jina { font-size: 26px; font-weight: bold; }
.juu .kauli { color: #ffffff; font-size: 17px; margin-top: 3px; }
.banner { display: block; width: 100%; border: 0; }
.banner-nafasi {
  background: #123a8a; color: #ffd400; text-align: center;
  padding: 26px 10px; font-size: 16px; border-bottom: 3px solid #ffd400;
}
.mwili { background: #0b2a6b; border: 3px solid #123a8a; margin: 14px 8px; padding: 14px 10px; }
.kichwa2 {
  color: #ffd400; font-size: 26px; font-weight: bold; text-align: center;
  margin: 6px 0 14px 0;
}
.karibu { color: #ffd400; font-size: 20px; line-height: 1.6; text-align: center; white-space: pre-line; }
.tarehe { color: #ffd400; font-size: 22px; font-weight: bold; text-align: center; margin-top: 18px; }
.tip { color: #ffd400; font-size: 21px; font-weight: bold; text-align: center; line-height: 1.35; }
.score { color: #17d20a; font-size: 20px; font-weight: bold; text-align: center; margin-top: 4px; }
.lose { color: #ff5555; font-size: 20px; font-weight: bold; text-align: center; margin-top: 4px; }
.maandishi { color: #ffffff; font-size: 18px; line-height: 1.6; text-align: center; }
.ndogo { color: #cfe0ff; font-size: 14px; line-height: 1.5; text-align: center; }
.paket { color: #ffffff; font-size: 20px; text-align: center; line-height: 1.7; margin: 14px 0; }
.paket b { color: #ffd400; }
.paket .lipa { color: #17d20a; font-size: 22px; font-weight: bold; }
.mkeka { width: 100%; border: 2px solid #ffd400; margin-top: 8px; }
.makala-kipengele { margin: 14px 0; }
.makala-jina { color: #ffd400; font-size: 20px; font-weight: bold; text-align: center; }
.makala-maana { color: #ffffff; font-size: 17px; line-height: 1.55; text-align: center; }
.mstari { height: 6px; background: #efece2; }

/* --------- admin --------- */
.admin { background: #ffffff; color: #111; max-width: 900px; margin: 0 auto; padding: 12px; }
.admin h2 { background: #0a2a66; color: #ffd400; padding: 8px; font-size: 20px; margin: 22px 0 10px; }
.admin label { display: block; margin: 8px 0 3px; font-weight: bold; font-size: 15px; }
.admin input[type=text], .admin input[type=number], .admin textarea, .admin input[type=password] {
  width: 100%; padding: 7px; font-size: 15px; border: 1px solid #888; box-sizing: border-box;
}
.admin textarea { height: 90px; }
.admin button {
  background: #0a2a66; color: #ffd400; border: 0; padding: 10px 18px;
  font-size: 16px; font-weight: bold; margin-top: 10px; cursor: pointer;
}
.admin .futa { background: #a11; color: #fff; padding: 6px 12px; font-size: 14px; }
.admin table { width: 100%; border-collapse: collapse; }
.admin td { border-bottom: 1px solid #ddd; padding: 5px; vertical-align: top; }
.admin img { max-width: 160px; border: 1px solid #444; }
.taarifa { background: #ffd400; color: #06215a; padding: 9px; font-weight: bold; margin: 8px 0; }
.kiungo { color: #0a2a66; font-weight: bold; }

/* mikeka: background nyeupe, margin ya dhahabu nje */
.mwili.nyeupe { background: #ffffff; border: 4px solid #d4af37; }
.mwili.nyeupe .kichwa2 { color: #0a2a66; }
.mwili.nyeupe .tip { color: #0a2a66; }
.mwili.nyeupe .maandishi { color: #222222; }
.mwili.nyeupe .mkeka { border: 3px solid #d4af37; }

/* VIP: jedwali la malipo */
.jedwali-vip { border-collapse: collapse; width: 100%; max-width: 520px; margin: 14px auto; }
.jedwali-vip th {
  background: #ffd400; color: #06215a; font-size: 19px; font-weight: bold;
  padding: 9px 6px; border: 2px solid #ffffff; text-align: center;
}
.jedwali-vip td {
  background: #123a8a; color: #ffffff; font-size: 17px;
  padding: 9px 6px; border: 2px solid #ffffff;
}
.jedwali-vip td.thamani { color: #ffd400; font-weight: bold; text-align: right; }
.jedwali-vip td.lipa { color: #17d20a; font-weight: bold; font-size: 19px; text-align: right; }

/* ----------- mpangilio wa jumla: katikati na portable ----------- */
.ukurasa { max-width: 760px; margin: 0 auto; box-shadow: 0 0 10px rgba(0,0,0,.15); }
.mwili { margin: 14px 10px; }
.mwili.nyeupe { padding: 12px 10px 4px; text-align: center; }
.mkeka { display: block; margin: 8px auto 14px; max-width: 100%; height: auto; }
img { max-width: 100%; height: auto; }
table { max-width: 100%; }

/* ----------- simu ndogo ----------- */
@media (max-width: 560px) {
  .juu .jina { font-size: 21px; }
  .juu .kauli { font-size: 14px; }
  .kichwa2 { font-size: 20px; }
  .karibu { font-size: 16px; }
  .tarehe { font-size: 18px; }
  .tip { font-size: 17px; }
  .score, .lose { font-size: 16px; }
  .maandishi { font-size: 15px; }
  .mwili { margin: 10px 6px; padding: 10px 6px; }
  .jedwali-matokeo th { font-size: 11px; padding: 5px 2px; }
  .jedwali-matokeo td { font-size: 12px; padding: 5px 2px; line-height: 1.25; }
  .jedwali-matokeo .tiki, .jedwali-matokeo .nukta { font-size: 16px; }
  .jedwali-vip th { font-size: 16px; }
  .jedwali-vip td { font-size: 14px; padding: 7px 4px; }
}

/* ---------- mpangilio wa katikati, unaobadilika kwa simu na kompyuta ---------- */
.ukurasa { max-width: 820px; width: 100%; box-shadow: 0 0 12px rgba(0,0,0,.25); }
.juu { text-align: center; }
.mwili { margin: 14px auto; }
img { max-width: 100%; height: auto; }

/* jedwali la free tips, kila ligi lina lake */
.ligi-jina {
  background: #ffd400; color: #06215a; font-size: 16px; font-weight: bold;
  text-align: center; padding: 7px 6px; margin: 18px 0 0 0; border-radius: 2px;
}
.jedwali-tips { border-collapse: collapse; width: 100%; margin: 0 0 6px 0; table-layout: fixed; }
.jedwali-tips th {
  background: #123a8a; color: #ffd400; font-size: 13px; font-weight: bold;
  padding: 6px 4px; border: 1px solid #ffffff;
}
.jedwali-tips td {
  background: #0e327c; color: #ffffff; font-size: 14px;
  padding: 7px 4px; border: 1px solid #ffffff; text-align: center;
  word-wrap: break-word; overflow-wrap: anywhere;
}
.jedwali-tips td.kushoto { text-align: left; }
.jedwali-tips td.soko { color: #ffd400; font-weight: bold; }
.jedwali-tips td.muda { white-space: nowrap; }
.jedwali-tips th:nth-child(1), .jedwali-tips td:nth-child(1) { width: 16%; }
.jedwali-tips th:nth-child(2), .jedwali-tips td:nth-child(2) { width: 48%; }
.jedwali-tips th:nth-child(3), .jedwali-tips td:nth-child(3) { width: 22%; }
.jedwali-tips th:nth-child(4), .jedwali-tips td:nth-child(4) { width: 14%; }

@media (max-width: 480px) {
  .juu .jina { font-size: 22px; }
  .kichwa2 { font-size: 21px; }
  .karibu { font-size: 17px; }
  .maandishi { font-size: 16px; }
  .mwili { margin: 10px 6px; padding: 10px 7px; }
  .jedwali-tips td, .jedwali-matokeo td { font-size: 13px; padding: 6px 3px; }
  .jedwali-vip td, .jedwali-vip th { font-size: 15px; }
}
@media (min-width: 900px) {
  body { padding: 18px 0; }
  .ukurasa { border: 1px solid #d8d3c4; }
}

/* ligi zisizo na bei: safu tatu pekee */
.jedwali-tips.bila-odds th:nth-child(1), .jedwali-tips.bila-odds td:nth-child(1) { width: 18%; }
.jedwali-tips.bila-odds th:nth-child(2), .jedwali-tips.bila-odds td:nth-child(2) { width: 56%; }
.jedwali-tips.bila-odds th:nth-child(3), .jedwali-tips.bila-odds td:nth-child(3) { width: 26%; }

/* ---------- mikeka: background ya njano ---------- */
.mwili.njano { background: #ffd400; border: 4px solid #d4af37; }
.mwili.njano .kichwa2 { color: #06215a; text-decoration: none; }
.mwili.njano .tip { color: #06215a; }
.mwili.njano .maandishi { color: #06215a; }
.mwili.njano .mkeka { border: 3px solid #06215a; background: #ffffff; }

/* ---------- banner yenye kivuli ---------- */
.banner, .banner-nafasi {
  box-shadow: 0 6px 14px rgba(0,0,0,.45);
  position: relative; z-index: 2;
}
.banner { margin-bottom: 6px; }

/* ---------- footer ---------- */
.footer {
  background: #061c4d; color: #dfe8ff; margin-top: 18px;
  padding: 22px 14px 16px; border-top: 4px solid #ffd400;
}
.footer-jina { color: #ffd400; font-size: 24px; font-weight: bold; text-align: center; }
.footer-maelezo {
  font-size: 15px; line-height: 1.6; text-align: center;
  max-width: 620px; margin: 8px auto 18px; color: #cfdcff;
}
.footer-safu { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; }
.footer-kipande { flex: 1 1 220px; min-width: 200px; }
.footer-kichwa {
  color: #ffd400; font-size: 15px; font-weight: bold; letter-spacing: .5px;
  border-bottom: 2px solid #123a8a; padding-bottom: 6px; margin-bottom: 8px;
}
.footer-mstari { font-size: 14px; line-height: 1.6; margin-bottom: 8px; }
.footer-kiungo { color: #7fd0ff; text-decoration: none; font-size: 14px; display: inline-block; margin-bottom: 8px; }
.footer-kiungo.wa { color: #25d366; font-weight: bold; }
.kitufe {
  display: block; max-width: 320px; margin: 20px auto 6px; text-align: center;
  background: #25d366; color: #06215a; font-size: 18px; font-weight: bold;
  padding: 13px 10px; text-decoration: none; border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0,0,0,.4);
}
.footer-chini {
  border-top: 1px solid #123a8a; margin-top: 16px; padding-top: 12px;
  font-size: 13px; line-height: 1.6; text-align: center; color: #9fb4e6;
}
@media (max-width: 480px) {
  .footer-safu { gap: 4px; }
  .footer-kipande { flex: 1 1 100%; }
}

/* ---------- jedwali la matokeo: safu tano ---------- */
.jedwali-matokeo th:nth-child(1), .jedwali-matokeo td:nth-child(1) { width: 14%; }
.jedwali-matokeo th:nth-child(2), .jedwali-matokeo td:nth-child(2) { width: 42%; }
.jedwali-matokeo th:nth-child(3), .jedwali-matokeo td:nth-child(3) { width: 20%; }
.jedwali-matokeo th:nth-child(4), .jedwali-matokeo td:nth-child(4) { width: 13%; }
.jedwali-matokeo th:nth-child(5), .jedwali-matokeo td:nth-child(5) { width: 11%; }
.ligi-hesabu { color: #06215a; font-size: 13px; font-weight: bold; opacity: .75; }

/* tiki pana ya bapa: imechorwa kwa mistari miwili minene, bila mkunjo */
.tiki {
  display: inline-block; width: 20px; height: 20px; position: relative; vertical-align: middle;
}
.tiki::before, .tiki::after {
  content: ""; position: absolute; background: #17d20a; border-radius: 1px;
}
.tiki::before { width: 6px; height: 12px; left: 2px; top: 5px; transform: rotate(-45deg); }
.tiki::after  { width: 6px; height: 20px; right: 3px; top: 0; transform: rotate(40deg); }

/* nukta nyekundu ya bapa */
.nukta {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  background: #ff3b3b; vertical-align: middle;
}

/* matokeo yenye safu ya ODDS (safu 6) */
.jedwali-matokeo.na-odds th:nth-child(1), .jedwali-matokeo.na-odds td:nth-child(1) { width: 12%; }
.jedwali-matokeo.na-odds th:nth-child(2), .jedwali-matokeo.na-odds td:nth-child(2) { width: 34%; }
.jedwali-matokeo.na-odds th:nth-child(3), .jedwali-matokeo.na-odds td:nth-child(3) { width: 18%; }
.jedwali-matokeo.na-odds th:nth-child(4), .jedwali-matokeo.na-odds td:nth-child(4) { width: 12%; }
.jedwali-matokeo.na-odds th:nth-child(5), .jedwali-matokeo.na-odds td:nth-child(5) { width: 13%; }
.jedwali-matokeo.na-odds th:nth-child(6), .jedwali-matokeo.na-odds td:nth-child(6) { width: 11%; }

/* ---------- kila kitu kikae ndani ya jedwali lake ---------- */
.ukurasa { overflow-x: hidden; }
.jedwali-kifuniko { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.jedwali-tips { width: 100%; max-width: 100%; table-layout: fixed; border-collapse: collapse; }
.jedwali-tips th, .jedwali-tips td {
  overflow: hidden; overflow-wrap: anywhere; word-break: break-word;
  vertical-align: middle; line-height: 1.35;
}
.jedwali-tips th { font-size: 12px; padding: 6px 3px; letter-spacing: 0; }
.jedwali-tips td { padding: 7px 3px; }
.jedwali-tips td.muda { white-space: nowrap; font-size: 13px; }

/* safu nne: MUDA, MECHI, TIP, ODDS */
.jedwali-tips th:nth-child(1), .jedwali-tips td:nth-child(1) { width: 15%; }
.jedwali-tips th:nth-child(2), .jedwali-tips td:nth-child(2) { width: 45%; }
.jedwali-tips th:nth-child(3), .jedwali-tips td:nth-child(3) { width: 24%; }
.jedwali-tips th:nth-child(4), .jedwali-tips td:nth-child(4) { width: 16%; }

/* safu sita: MUDA, MECHI, TIP, ODDS, SCORE, HALI */
.jedwali-matokeo th:nth-child(1), .jedwali-matokeo td:nth-child(1) { width: 13%; }
.jedwali-matokeo th:nth-child(2), .jedwali-matokeo td:nth-child(2) { width: 32%; }
.jedwali-matokeo th:nth-child(3), .jedwali-matokeo td:nth-child(3) { width: 19%; }
.jedwali-matokeo th:nth-child(4), .jedwali-matokeo td:nth-child(4) { width: 13%; }
.jedwali-matokeo th:nth-child(5), .jedwali-matokeo td:nth-child(5) { width: 13%; }
.jedwali-matokeo th:nth-child(6), .jedwali-matokeo td:nth-child(6) { width: 10%; }

@media (max-width: 480px) {
  .mwili { margin: 10px 4px; padding: 10px 5px; }
  .jedwali-tips th { font-size: 11px; padding: 5px 2px; }
  .jedwali-tips td { font-size: 12.5px; padding: 6px 2px; }
  .jedwali-tips td.muda { font-size: 12px; }
  .jedwali-tips td.soko { font-size: 12.5px; }
  .tiki { width: 17px; height: 17px; }
  .tiki::before { width: 5px; height: 10px; left: 2px; top: 5px; }
  .tiki::after { width: 5px; height: 17px; right: 3px; top: 0; }
  .nukta { width: 12px; height: 12px; }
}

/* ---------- vichwa vya madaraja ---------- */
.daraja-kichwa {
  margin: 26px 0 4px 0; padding: 10px 8px; text-align: center;
  font-size: 18px; font-weight: bold; letter-spacing: .5px; color: #ffffff;
  border-left: 6px solid #ffd400; border-right: 6px solid #ffd400;
  box-shadow: 0 3px 8px rgba(0,0,0,.35);
}
.daraja-kichwa span { font-size: 14px; opacity: .85; }
.daraja-A { background: #0f7a2f; }
.daraja-B { background: #1f6fd1; }
.daraja-C { background: #8a5a00; }
.daraja-D { background: #6b1f1f; }
@media (max-width: 480px) { .daraja-kichwa { font-size: 15px; } }

/* safu nne za free tips: MUDA, MECHI, TIP, ODDS */
.jedwali-tips:not(.jedwali-matokeo) th:nth-child(1),
.jedwali-tips:not(.jedwali-matokeo) td:nth-child(1) { width: 15%; }
.jedwali-tips:not(.jedwali-matokeo) th:nth-child(2),
.jedwali-tips:not(.jedwali-matokeo) td:nth-child(2) { width: 45%; }
.jedwali-tips:not(.jedwali-matokeo) th:nth-child(3),
.jedwali-tips:not(.jedwali-matokeo) td:nth-child(3) { width: 24%; }
.jedwali-tips:not(.jedwali-matokeo) th:nth-child(4),
.jedwali-tips:not(.jedwali-matokeo) td:nth-child(4) { width: 16%; }