* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Arial, sans-serif; background: #f5f9ff; color: #333; line-height: 1.6; }

header { text-align: center; padding: 20px; background: #1a73e8; color: white; position: relative; }
#authPanel { position: absolute; top: 10px; right: 10px; font-size: 0.9em; }
#authPanel button { margin-left: 8px; padding: 4px 10px; font-size: 0.9em; }

#loginForm { padding: 20px; text-align: center; background: #fff; border-radius: 10px; max-width: 400px; margin: 20px auto; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
#loginForm input { width: 100%; padding: 10px; margin: 8px 0; border: 1px solid #ccc; border-radius: 4px; }
#loginForm button { padding: 10px 20px; background: #1a73e8; color: white; border: none; border-radius: 4px; cursor: pointer; }
.auth-toggle { margin-top: 15px; font-size: 0.9em; color: #1a73e8; cursor: pointer; text-decoration: underline; }

nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 12px; background: #e3f2fd; border-bottom: 1px solid #ccc; }
nav button { padding: 10px 16px; background: #fff; border: 1px solid #1a73e8; border-radius: 6px; cursor: pointer; font-weight: bold; color: #1a73e8; }
nav button.active { background: #1a73e8; color: white; }

.section { display: none; padding: 20px; max-width: 950px; margin: 20px auto; background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.section.active { display: block; }
h2 { margin-bottom: 15px; color: #1a73e8; }

/* Tombol */
.btn-primary { background: #1a73e8; color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; margin: 5px; }
.btn-success { background: #388e3c; color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; margin: 5px; }
.btn-danger { background: #d32f2f; color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; margin: 5px; }
.btn-secondary { background: #388e3c; color: white; border: none; padding: 8px 14px; border-radius: 6px; cursor: pointer; margin: 5px; font-size: 14px; }
.btn-small { padding: 4px 8px; font-size: 12px; border: 1px solid #ccc; background: #fff; border-radius: 4px; cursor: pointer; margin: 0 3px; }

/* Match */
.match { background: white; padding: 15px; margin: 15px 0; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.match-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: end; }
.match-row input { width: 80px; padding: 6px; text-align: center; border: 1px solid #ccc; border-radius: 4px; }
.match-controls { text-align: center; margin: 10px 0; }
.parlay-input { text-align: center; background: #fff8e1; padding: 15px; margin: 15px 0; border-radius: 8px; }
.parlay-input input { width: 120px; padding: 8px; text-align: center; }
.hint { font-size: 0.9em; color: #555; }
.action-buttons { text-align: center; margin: 15px 0; }

/* Tabel */
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
th, td { border: 1px solid #ddd; padding: 8px; text-align: center; }
th { background-color: #f0f8ff; }
.odds-bandar { background-color: #ffebee; }
.odds-adil { background-color: #e8f5e8; }
.margin-col { background-color: #fff3e0; }
.fair-odds-table { background: white; padding: 15px; margin: 15px 0; border-radius: 8px; }

/* Label & Rekomendasi */
.label { display: inline-block; padding: 4px 10px; background: #e0f7fa; border-radius: 4px; font-weight: bold; color: #006064; }
.recommendation { display: inline-block; padding: 6px 12px; border-radius: 6px; font-weight: bold; background: #f3e5f5; color: #4a148c; font-size: 16px; }
.rec-container { text-align: center; margin-top: 10px; }

/* Risiko & EV */
.risk-high { color: #c62828; }
.risk-medium { color: #f57c00; }
.risk-low { color: #2e7d32; }
.ev-positive { color: #2e7d32; font-weight: bold; }
.ev-negative { color: #c62828; font-weight: bold; }
.parlay-result { background: #e8f0fe; padding: 20px; margin-top: 20px; border-radius: 10px; text-align: center; }

/* Tim Favorit */
.tim-list { list-style: none; }
.tim-item { display: flex; align-items: center; padding: 8px; border-bottom: 1px solid #eee; }
.tim-name { flex: 1; }
.tim-actions { display: flex; gap: 5px; }
.input-group { display: flex; gap: 10px; margin: 15px 0; }
.input-group input { flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 4px; }

/* Sketsa Bil */
.sketsa-bil-section { margin-bottom: 20px; padding: 15px; background: #f9f9f9; border-radius: 8px; }
#notes { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
#notes input { padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
.input-row { display: flex; gap: 10px; margin-bottom: 10px; }
.input-row input { flex: 1; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
.table-container { margin-bottom: 15px; background: white; padding: 10px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.table-label { font-size: 0.9em; color: #666; margin-bottom: 5px; font-style: italic; }
#hasil-ev { margin-top: 15px; padding: 15px; background: #e8f5e9; border-radius: 6px; }

/* Rekom Box */
.rekom-box { background: #e8f5e9; padding: 15px; border-radius: 8px; margin-bottom: 15px; border-left: 4px solid #388e3c; }
.rekom-box ul { margin-left: 20px; margin-top: 10px; }

/* Tools Grid (Fitur 5) */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-top: 20px; }
.tool-card { background: #f5f5f5; padding: 20px; border-radius: 8px; text-align: center; }
.tool-card h3 { margin-bottom: 10px; }
/* === FITUR 6: KLASEMEN MANUAL === */
#klasemenTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
}
#klasemenTable th {
  background-color: #1a73e8;
  color: white;
  padding: 10px;
  text-align: center;
  position: sticky;
  top: 0;
}
#klasemenTable td {
  padding: 6px 8px;
  text-align: center;
  border-bottom: 1px solid #eee;
}
.stat-input {
  width: 50px;
  padding: 4px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 0.9em;
}
.stat-input:focus {
  border-color: #1a73e8;
  outline: none;
}
.points-input {
  font-weight: bold;
  background-color: #fff8e1;
}
.gd-cell {
  font-weight: bold;
  color: #555;
}

/* Zona Highlighting */
.zone-ucl { background-color: #e3f2fd; }         /* Biru muda - Liga Champions */
.zone-uel { background-color: #fff3e0; }         /* Oranye muda - Europa League */
.zone-conference { background-color: #f3e5f5; }  /* Ungu muda - Conference League */
.zone-relegation { background-color: #ffebee; }  /* Merah muda - Degradasi */

#klasemenTable tbody tr:hover {
  background-color: #f5f5f5 !important;
}