* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; color: #333; line-height: 1.6; }
.container { max-width: 1200px; margin: 0 auto; padding: 20px; background: rgba(255, 255, 255, 0.95); border-radius: 15px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); margin-top: 20px; margin-bottom: 20px; }
h1 { text-align: center; color: #4a5568; margin-bottom: 30px; font-size: 2.5rem; font-weight: 700; }
h2 { color: #2d3748; margin-bottom: 20px; font-size: 1.8rem; border-bottom: 3px solid #667eea; padding-bottom: 10px; }
h3 { color: #4a5568; margin-bottom: 15px; font-size: 1.4rem; }
nav { margin-bottom: 20px; }
.back-link { display: inline-block; color: #667eea; text-decoration: none; font-weight: 600; padding: 10px 15px; border: 2px solid #667eea; border-radius: 25px; transition: all 0.3s ease; }
.back-link:hover { background-color: #667eea; color: white; transform: translateY(-2px); }
.team-grid, .match-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px; }
.match-card-container { display: flex; flex-direction: column; gap: 10px; }
.team-card, .match-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-decoration: none; padding: 30px; border-radius: 15px; text-align: center; transition: all 0.3s ease; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); }
.team-card:hover, .match-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); }
.team-card h3, .match-card h3 { font-size: 1.5rem; margin-bottom: 10px; color: white; }
.team-card p, .match-card p { font-size: 1rem; opacity: 0.9; }
.match-input-container { display: flex; align-items: center; justify-content: space-around; margin-bottom: 30px; flex-wrap: wrap; gap: 20px; }
.team-input { text-align: center; flex: 1; min-width: 200px; }
.vs-separator { font-size: 2rem; font-weight: bold; color: #667eea; margin: 0 20px; }
.input-group { margin-top: 15px; }
.input-group label { display: block; margin-bottom: 5px; font-weight: 600; color: #4a5568; }
.input-group input { width: 100%; max-width: 150px; padding: 10px; border: 2px solid #e2e8f0; border-radius: 8px; text-align: center; font-size: 1.2rem; }
.input-group input:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); }
.result-display { text-align: center; margin: 20px 0; padding: 20px; background: #f7fafc; border-radius: 10px; }
.result-text { font-size: 1.3rem; font-weight: bold; margin-top: 10px; }
.result-text.win { color: #38a169; }
.result-text.draw { color: #ed8936; }
.save-button { display: block; margin: 20px auto; padding: 15px 40px; font-size: 1.2rem; }
.announcement-section { margin-bottom: 30px; padding: 20px; background: #f7fafc; border-radius: 15px; border: 1px solid #e2e8f0; }
.announcement-input { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 15px; }
.announcement-input label { font-weight: 600; color: #4a5568; min-width: 150px; }
.announcement-input input { flex: 1; min-width: 300px; padding: 10px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 1rem; }
.announcement-input input:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); }
.announcement-input button { padding: 10px 20px; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; }
#save-announcement-btn { background: linear-gradient(135deg, #48bb78 0%, #38a169 100%); color: white; }
#save-announcement-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 15px rgba(72, 187, 120, 0.4); }
#clear-announcement-btn { background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%); color: white; }
#clear-announcement-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 15px rgba(229, 62, 62, 0.4); }
.announcement-display { min-height: 40px; }
.announcement-message { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 15px 20px; border-radius: 10px; font-size: 1.1rem; font-weight: 600; text-align: center; box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3); }
.match-announcement { min-height: 30px; }
.match-announcement-text { background: linear-gradient(135deg, #48bb78 0%, #38a169 100%); color: white; padding: 8px 12px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; text-align: center; box-shadow: 0 3px 10px rgba(72, 187, 120, 0.3); margin-bottom: 5px; }
.announcements-section { background: #f7fafc; padding: 30px; border-radius: 15px; margin-bottom: 30px; border: 1px solid #e2e8f0; }
.announcement-input-row { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; flex-wrap: wrap; }
.match-label { font-weight: 600; color: #4a5568; min-width: 150px; }
.input-with-preset { display: flex; gap: 10px; flex: 1; align-items: center; }
.individual-preset-select { padding: 8px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 0.9rem; background: white; min-width: 140px; }
.individual-preset-select:focus { outline: none; border-color: #48bb78; box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.1); }
.announcement-input { flex: 1; min-width: 250px; padding: 10px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 1rem; }
.announcement-input:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); }
.save-announcements-button { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 15px 30px; border-radius: 25px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3); margin-top: 20px; }
.save-announcements-button:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4); }
.presets-section { margin-bottom: 25px; }
.presets-section h3 { color: #4a5568; margin-bottom: 15px; font-size: 1.2rem; }
.preset-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.preset-button { background: linear-gradient(135deg, #48bb78 0%, #38a169 100%); color: white; border: none; padding: 10px 20px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 3px 10px rgba(72, 187, 120, 0.3); }
.preset-button:hover { transform: translateY(-1px); box-shadow: 0 5px 15px rgba(72, 187, 120, 0.4); }
.preset-button:active { transform: translateY(0); }
.admin-section { text-align: center; margin-top: 40px; }
.admin-link { display: inline-block; background: linear-gradient(135deg, #48bb78 0%, #38a169 100%); color: white; text-decoration: none; padding: 15px 30px; border-radius: 25px; font-weight: 600; font-size: 1.1rem; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(72, 187, 120, 0.3); }
.admin-link:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(72, 187, 120, 0.4); }
.form-section { background: #f7fafc; padding: 30px; border-radius: 15px; margin-bottom: 30px; border: 1px solid #e2e8f0; }
button { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 12px 25px; border-radius: 25px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3); }
button:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4); }
.history-section { background: #f7fafc; padding: 30px; border-radius: 15px; border: 1px solid #e2e8f0; }
table { width: 100%; border-collapse: collapse; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); }
th { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 15px; text-align: left; font-weight: 600; }
td { padding: 12px 15px; border-bottom: 1px solid #e2e8f0; }
tr:hover { background-color: #f7fafc; }
.win { color: #38a169; font-weight: 600; }
.loss { color: #e53e3e; font-weight: 600; }
.message { padding: 15px; border-radius: 8px; margin-top: 20px; font-weight: 600; text-align: center; }
.message.success { background-color: #c6f6d5; color: #22543d; border: 1px solid #9ae6b4; }
.message.error { background-color: #fed7d7; color: #742a2a; border: 1px solid #fc8181; }
.refresh-section { text-align: center; margin-bottom: 30px; }
#refresh-btn { background: linear-gradient(135deg, #48bb78 0%, #38a169 100%); box-shadow: 0 5px 15px rgba(72, 187, 120, 0.3); }
.reset-button { background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%); margin-left: 15px; }
.rankings-table { margin-top: 20px; }
.rank { font-weight: 700; font-size: 1.2rem; }
.rank-1 .rank { color: #d4af37; }
.rank-2 .rank { color: #c0c0c0; }
.rank-3 .rank { color: #cd7f32; }
.team-name { font-weight: 600; color: #4a5568; }
.wins { color: #38a169; font-weight: 600; }
.losses { color: #e53e3e; font-weight: 600; }
.total-points { font-weight: 600; color: #667eea; }
.ranking-rules { background: #edf2f7; padding: 20px; border-radius: 10px; margin-top: 30px; border-left: 5px solid #667eea; }
.ranking-rules ol { margin-left: 20px; }
.ranking-rules li { margin-bottom: 8px; color: #4a5568; }
.matches-table-container { overflow-x: auto; margin-bottom: 20px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); }
.matches-input-table { width: 100%; border-collapse: collapse; background: white; border-radius: 10px; overflow: hidden; }
.matches-input-table th { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 15px; text-align: center; font-weight: 600; font-size: 1.1rem; }
.matches-input-table td { padding: 15px; border-bottom: 1px solid #e2e8f0; text-align: center; vertical-align: middle; }
.opponent-name { font-weight: 600; color: #4a5568; font-size: 1.1rem; }
.points-input { width: 100px; padding: 10px; border: 2px solid #e2e8f0; border-radius: 8px; text-align: center; font-size: 1rem; }
.points-input:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); }
.result-select { width: 100px; padding: 10px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 1rem; background: white; }
.result-select:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); }
.save-match-btn { background: linear-gradient(135deg, #48bb78 0%, #38a169 100%); color: white; border: none; padding: 8px 16px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 3px 10px rgba(72, 187, 120, 0.3); }
.save-match-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 15px rgba(72, 187, 120, 0.4); }
.save-all-button { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 15px 30px; border-radius: 25px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3); display: block; margin: 20px auto 0; }
.save-all-button:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4); }
@media (max-width: 768px) { .container { margin: 10px; padding: 15px; } h1 { font-size: 2rem; } .team-grid { grid-template-columns: 1fr; } table { font-size: 0.9rem; } th, td { padding: 10px 8px; } }