:root { --bg: #f6f7fb; --card: #fff; --accent: #2b6cb0; --muted: #666; --pad: 14px; --top-offset: 80px; font-family: Inter, Roboto, Arial, sans-serif; }
* { box-sizing: border-box }
html, body { margin: 0; padding: 0; height: 100% }
body { background: var(--bg); color: #111; display: flex; flex-direction: column; font-size: 0.95rem }
/* Sticky Navigation */
.sticky-nav { position: fixed; top: 0; left: 0; right: 0; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .1); z-index: 1000 }
.topbar { display: flex; gap: 10px; padding: 10px 20px; flex-wrap: wrap; max-width: 1400px; margin: 0 auto; width: 100% }
.topbar button { background: #ddd; color: #333; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-size: 1rem }
.topbar button.active { background: var(--accent); color: #fff }
.topbar button:hover { opacity: .8 }
/* Auth controls aligned to right */
#authControls { margin-left: auto; display: flex; align-items: center; gap: 8px }
#currentUserDisplay { margin-right: 8px; font-weight: 600; color: #1f2937 }

/* Topbar ads placeholder */
#adsRow { display:none; gap:10px; align-items:center; height:100px; padding:10px; width:100%; position:relative }
.sponsor { flex:1; background:linear-gradient(180deg,#f3f4f6,#e5e7eb); border-radius:6px; display:flex; align-items:center; justify-content:center; color:#374151; font-weight:700 }
.ads-close { position:absolute; top:4px; right:6px; background:rgba(0,0,0,0.08); border:none; border-radius:50%; width:24px; height:24px; font-size:16px; font-weight:700; color:#374151; cursor:pointer; display:flex; align-items:center; justify-content:center }
.ads-close:hover { background:rgba(0,0,0,0.15) }

/* Login modal styles */
#loginModal { display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); align-items:center; justify-content:center; z-index:2000 }
#loginModal .modal-content { background:white; padding:20px; border-radius:8px; margin:80px auto; position:relative; min-width:360px }
#loginModal input { padding:10px; font-size:16px; height:40px; width:100%; box-sizing:border-box }
/* Main Container */
.main-container { flex: 1; display: flex; flex-direction: column; margin-top: var(--top-offset) }
/* Header */
.page-header { background: var(--accent); color: #fff; padding: 20px; display: flex; align-items: center; justify-content: center; text-align: center }
.page-header h1 { margin: 0; font-size: 1.5rem }
.header-btn { background: #fff; color: var(--accent); border: none; padding: 8px 14px; border-radius: 6px; font-weight: 700; cursor: pointer }
.header-btn:hover { opacity: .9 }
/* Content Wrapper */
.content-wrapper { flex: 1; padding: 20px; max-width: 2400px; margin: 0 auto; width: 100% }
.home-dashboard { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start }
.home-left, .home-right { display: flex; flex-direction: column; gap: 22px }
.dashboard-card { background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%); padding: 18px; border-radius: 18px; box-shadow: 0 12px 38px rgba(10, 30, 70, .12); border: 1px solid #e3e8ef }
.section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px }
.section-header .section-title { margin: 0; letter-spacing: .5px }
.section-meta { color: #5b6470; font-size: .95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px }

@media (min-width: 1600px) {
    .home-dashboard { grid-template-columns: minmax(820px, 1.35fr) minmax(520px, 1fr); gap: 26px }
    .content-wrapper { padding: 26px }
}

@media (min-width: 2000px) {
    .home-dashboard { grid-template-columns: minmax(900px, 1.6fr) minmax(560px, 1fr); gap: 32px }
    .content-wrapper { padding: 32px }
}
/* Sections */
section { display: none }
section.active { display: block }
.site-header { background: var(--accent); color: #fff; padding: 20px }
.site-header h1 { margin: 0; font-size: 1.25rem }
.muted { opacity: .9; color: rgba(255, 255, 255, .9) }
.container { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 1200px; margin: 20px auto; padding: 0 12px }
.panel { background: var(--card); padding: var(--pad); border-radius: 8px; box-shadow: 0 1px 4px rgba(2, 6, 23, .06) }
label { display: block; margin-bottom: 8px; font-size: .95rem }
input[type="text"], input[type="datetime-local"], select, input[type="number"] { width: 100%; padding: 8px; border: 1px solid #d9d9d9; border-radius: 6px; margin-bottom: 8px }
.form-actions { display: flex; gap: 8px; margin-top: 8px }
button { background: var(--accent); color: #fff; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer }
button#clearBtn { background: #6b7280 }
.list { list-style: none; padding: 0; margin: 0 }
.list li { padding: 10px; border-bottom: 1px solid #eef2f6; display: flex; justify-content: space-between; align-items: center }
.table { width: 100%; border-collapse: collapse }
.table th, .table td { padding: 8px; border-bottom: 1px solid #eef2f6; text-align: left }
.site-footer { max-width: 100%; margin-top: auto; color: var(--muted); padding: 20px; text-align: center; background: #f0f0f0; border-top: 1px solid #ddd }
.ai-footer-note { margin: 6px 0 0 0; font-size: .85rem; color: #7b8794 }
/* Live match */
.live-game { padding: 18px 18px 12px 18px; background: radial-gradient(circle at 10% 20%, rgba(43,108,176,.12), transparent 35%), radial-gradient(circle at 90% 20%, rgba(255,193,7,.16), transparent 35%), #eef5ff; border-radius: 18px; border: 1px solid #d6e6ff; box-shadow: inset 0 1px 0 #fff, 0 14px 38px rgba(43, 108, 176, .12) }
.live-game h2 { text-align: center; margin: 0 0 14px 0; color: var(--accent) }
.live-analog-clock { display: flex; justify-content: center; align-items: center; margin: 5px 0 15px 0 }
.clock-face { width: 190px; height: 105px; border-radius: 52px; background: #fff; border: 3px solid #d6dee8; position: relative; box-shadow: inset 0 0 8px rgba(0, 0, 0, .08) }
.clock-tick { position: absolute; background: var(--accent); opacity: .7 }
.tick-12 { width: 3px; height: 12px; top: 5px; left: 50%; transform: translateX(-50%) }
.tick-6 { width: 3px; height: 12px; bottom: 5px; left: 50%; transform: translateX(-50%) }
.tick-3 { width: 12px; height: 3px; right: 7px; top: 50%; transform: translateY(-50%) }
.tick-9 { width: 12px; height: 3px; left: 7px; top: 50%; transform: translateY(-50%) }
.clock-hand { position: absolute; bottom: 50%; left: 50%; transform-origin: bottom center; border-radius: 4px }
.hour-hand { width: 6px; height: 28px; background: #1a3a52 }
.minute-hand { width: 4px; height: 38px; background: #2b6cb0 }
.second-hand { width: 2px; height: 42px; background: #e74c3c }
.clock-center { position: absolute; width: 8px; height: 8px; background: #1a3a52; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%) }
.game-info { justify-content: center; align-items: stretch; gap: 16px; padding: 14px; background: radial-gradient(circle at 40% 0%, rgba(255,255,255,.08), rgba(17,24,39,.35)), linear-gradient(135deg, #0b1224 0%, #111827 100%); border-radius: 16px; border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 40px rgba(0,0,0,.28); color: #e5e7eb; width: 100%; grid-column: 1 / -1 }
.team { text-align: center; flex: 1; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(180deg, rgba(15,23,42,.9) 0%, rgba(11,18,36,.92) 100%); border-radius: 14px; padding: 16px 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 28px rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.08) }
.team-name { font-size: 2.5rem; font-weight: 900; margin: 6px 0 12px 0; min-height: 3.4rem; display: flex; align-items: center; justify-content: center; line-height: 1.2; color: #f8fafc; letter-spacing: .4px; text-shadow: 0 2px 6px rgba(0,0,0,.45) }
.score { font-size: 8.4rem; font-weight: 900; color: #facc15; line-height: .9; text-shadow: 0 8px 26px rgba(0, 0, 0, .48); letter-spacing: 3px }
.vs { font-size: 1.4rem; font-weight: 800; padding: 0 16px; color: #cbd5e1; letter-spacing: 1px }
.live-match-grid {
    display: grid;
    grid-template-rows: auto minmax(200px, 1fr);
    gap: 16px;
    min-height: 320px;
}
.live-top { display: grid; grid-template-rows: auto auto; gap: 12px }
.live-names-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.live-score-row { display: flex; gap: 12px; align-items: stretch; justify-content: space-between }
.live-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.live-team { display: contents }
.live-goals-team { padding: 12px 12px; background: linear-gradient(180deg, rgba(17,24,39,.82) 0%, rgba(11,18,36,.9) 100%); border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); display: flex; flex-direction: column; align-items: stretch; border-radius: 12px; gap: 8px }
.live-goals-team.home-scorers { margin: 0 }
.live-goals-team.away-scorers { margin: 0 }
.team-info { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; background: #fff; position: relative; border-top: 2px solid #e5e7eb; border-bottom: 2px solid #e5e7eb; height: 100% }
.team-name-bar { background: linear-gradient(180deg, rgba(15,23,42,.9) 0%, rgba(11,18,36,.92) 100%); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 10px 14px; font-size: 1.5rem; font-weight: 800; color: #f8fafc; text-align: center; letter-spacing: .4px; text-shadow: 0 2px 6px rgba(0,0,0,.35) }

.score-box { background: linear-gradient(180deg, rgba(15,23,42,.9) 0%, rgba(11,18,36,.92) 100%); border-radius: 14px; border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 28px rgba(0,0,0,.28); display: flex; align-items: center; justify-content: center; padding: 10px; height: 100%; flex: 1 1 0 }
.score-box.home-score { justify-content: center; text-align: center; max-width: 200px; margin-left: auto; }
.score-box.away-score { justify-content: center; text-align: center; max-width: 200px; margin-right: auto;}
.team-info::after { content: ''; position: absolute; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, transparent, #d1d5db 20%, #d1d5db 80%, transparent) }
.live-team.home-team .team-info::after { right: -1px }
.live-team.away-team .team-info::after { left: -1px }
.live-center { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 12px; padding: 18px; background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(15,23,42,.35) 100%); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); grid-area: timer; height: 100%; min-width: 160px; flex: 0 0 190px }
.live-clock-label { font-size: .85rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 1px }
.live-timer { text-align: center; font-size: 3.4rem; font-weight: 900; color: #e2e8f0; font-family: 'JetBrains Mono', monospace; letter-spacing: 2px; background: rgba(15,23,42,.7); padding: 10px 20px; border-radius: 10px; border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.08) }
.live-goals-list { display: flex; flex-direction: column; gap: 6px }
.live-goal-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.12) }
.live-goal-player { font-size: .9rem; font-weight: 700; color: #e5e7eb; line-height: 1.3 }
.live-goal-times { display: flex; gap: 4px; justify-content: flex-start; padding-left: 0 }
.live-goal-time { font-weight: 800; color: #facc15; font-size: .8rem; font-family: 'JetBrains Mono', monospace; padding: 2px 6px; background: rgba(250,204,21,.12); border-radius: 6px }
.live-goals-empty { color: #cbd5e1; font-style: italic; font-size: .9rem; padding: 14px 0; text-align: center }
.players { text-align: left; margin-top: 10px; font-size: .9rem }
.player { margin: 5px 0 }
/* Matches */
.matches-container { overflow-x: auto; background: #ffffff; padding: 15px; border-radius: 12px; box-shadow: 0 4px 10px rgba(2, 6, 23, .12); border: 1px solid #f0e0c8 }
.matches-container-dashboard { max-height: 720px; overflow: auto; padding: 0; border: none; box-shadow: none }
.matches-container-dashboard .matches-main-table { border-radius: 12px; overflow: hidden; box-shadow: 0 10px 28px rgba(0,0,0,.08); border: 1px solid #e5e7eb }
.matches-main-table-compact th, .matches-main-table-compact td { padding: 8px 10px; font-size: .96rem }
.matches-main-table-compact thead th { position: sticky; top: 0; z-index: 2; background: linear-gradient(180deg, #f8f9fb 0%, #f1f5f9 100%); box-shadow: inset 0 -1px 0 #d7dee8 }
.matches-main-table-compact tbody tr:hover { background: #f8fbff }
.matches-main-table-compact th.col-km, .matches-main-table-compact td.col-km { width: 48px }
.matches-main-table-compact th.col-group, .matches-main-table-compact td.col-group { width: 62px }
table { width: 100%; border-collapse: collapse }
thead { background: #f0f0f0 }
th, td { padding: 10px; border-bottom: 1px solid #ddd; text-align: left }
.matches-main-table .cell-center { text-align: center }
.matches-main-table .cell-bold { font-weight: bold }
.matches-main-table .teams-cell { white-space: nowrap }
.matches-main-table thead th { text-align: center }
.matches-main-table th,
.matches-main-table td {
    padding: 6px 8px;
    line-height: 1.1;
}
.matches-main-table th.col-km, .matches-main-table td.col-km { width: 30px }
.matches-main-table th.col-group, .matches-main-table td.col-group { width: 50px }
.matches-main-table th.col-teams, .matches-main-table td.col-teams { width: auto }
.matches-table-compact th:nth-child(1), .matches-table-compact td:nth-child(1) { width: 30px; text-align: center }
.matches-table-compact th:nth-child(2), .matches-table-compact td:nth-child(2) { width: 50px; text-align: center }
.matches-table-compact th,
.matches-table-compact td {
    padding: 6px 8px;
    line-height: 1.1;
}
.matches-table-compact thead { background: #f0f0f0 }
.matches-table-compact th { text-align: center; font-weight: 700 }
.matches-table-compact td { border-bottom: 1px solid #ddd; font-size: .9rem }
.matches-table-compact td:nth-child(4) { text-align: center; white-space: nowrap }
.status-indicator { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; position: relative }
.status-upcoming { border: 2px solid #94a3b8; background: #f8fafc; box-shadow: inset 0 0 0 2px rgba(148, 163, 184, .15) }
.status-finished { background: #16a34a; box-shadow: 0 0 0 2px rgba(22, 163, 74, .18) }
.status-check { width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); margin-top: -1px }
.status-live { background: #fee2e2; box-shadow: 0 0 0 2px rgba(239, 68, 68, .25) }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, .7); display: inline-block; animation: status-blink 1s infinite }
@keyframes status-blink { 0%, 100% { opacity: 1 } 50% { opacity: .2 } }
tbody tr.match-row-men { background: rgba(43, 108, 176, .12) }
tbody tr.match-row-women { background: #fff5f5 }
tbody tr.match-row-men.match-group-A { background: rgba(26, 58, 82, .12) }
tbody tr.match-row-men.match-group-B { background: rgba(43, 108, 176, .12) }
tbody tr.match-row-men.match-group-C { background: rgba(90, 154, 214, .12) }
tbody tr.match-row-women.match-group-A { background: rgba(139, 46, 46, .12) }
tbody tr.match-row-women.match-group-B { background: rgba(231, 76, 60, .12) }
tbody tr.match-row-women.match-group-C { background: rgba(245, 165, 165, .25) }
tbody tr.live { background: #fff3cd }
tbody tr.past { opacity: .7 }
tbody tr:hover { background: #f9f9f9 }
tbody tr.draggable-row { cursor: grab }
tbody tr.draggable-row.dragging { opacity: .6; cursor: grabbing }
tbody tr.draggable-row.drag-over-top { border-top: 3px solid #3b82f6 }
tbody tr.draggable-row.drag-over-bottom { border-bottom: 3px solid #3b82f6 }
.match-tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; color: #fff; vertical-align: middle }
.matches-main-table tbody tr.stage-group-row td {
    background: #f7f2e8;
    color: #5b4a2f;
    font-weight: 700;
    text-align: center;
    border-top: 2px solid #d3c3a3;
    border-bottom: 2px solid #d3c3a3;
}

@media (max-width: 720px) {
    .matches-container { padding: 10px; -webkit-overflow-scrolling: touch }
    .matches-main-table { min-width: 620px }
    .matches-main-table th, .matches-main-table td { padding: 6px 8px; font-size: .85rem }
}
.matches-main-table tbody tr.stage-group-row:hover td { background: #f7f2e8 }
.matches-main-table tbody tr.stage-group-start td { border-top: 2px solid #d3c3a3 }
.matches-main-table tbody tr.stage-group-end td { border-bottom: 2px solid #d3c3a3 }
.matches-main-table tbody tr.opening-break-row td {
    background: #eef3ff;
    color: #1f3b7a;
    font-weight: 700;
    text-align: center;
    border-top: 2px dashed #93a6d8;
    border-bottom: 2px dashed #93a6d8;
}
.matches-main-table tbody tr.opening-break-row:hover td { background: #eef3ff }
/* Add team form */
.add-team-form { background: var(--card); padding: 15px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 1px 4px rgba(2, 6, 23, .06) }
.add-team-form h3 { margin: 0 0 15px 0; color: var(--accent) }
.add-team-form input, .add-team-form select { margin: 0 }
/* Add match form */
.add-match-form { background: var(--card); padding: 15px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 1px 4px rgba(2, 6, 23, .06) }
.add-match-form h3 { margin: 0 0 15px 0; color: var(--accent) }
.add-match-form input, .add-match-form select { margin: 0 }
.matches-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 10px 0 20px 0 }
.matches-column { display: flex; flex-direction: column; gap: 16px }
.matches-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 10px 0 16px 0 }
.matches-action-btn { background: #ffffff; border: 1px solid #d1d5db; border-radius: 10px; padding: 12px 14px; font-weight: 700; cursor: pointer; color: #1f2937; transition: all .15s ease; box-shadow: 0 1px 2px rgba(2, 6, 23, .06) }
.matches-action-btn:hover { border-color: #93c5fd; color: #1d4ed8; box-shadow: 0 4px 10px rgba(2, 6, 23, .1) }
.matches-action-btn.active { background: #e8f2ff; border-color: #60a5fa; color: #1d4ed8; box-shadow: 0 4px 12px rgba(29, 78, 216, .2) }
.match-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center }
.match-action-btn { background: #ffffff; border: 1px solid #d1d5db; border-radius: 8px; height: 30px; width: 30px; padding: 0; font-weight: 800; cursor: pointer; color: #1f2937; transition: all .15s ease; box-shadow: 0 1px 2px rgba(2, 6, 23, .06) }
.match-action-btn:hover { box-shadow: 0 3px 8px rgba(2, 6, 23, .12) }
.match-action-icon { display: inline-flex; align-items: center; justify-content: center; position: relative }
.match-action-icon .action-icon { font-size: .85rem; letter-spacing: .4px }
.match-action-icon::after {
    content: attr(data-label);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translate(-50%, 2px);
    background: #111827;
    color: #fff;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: .75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease, transform .12s ease;
    z-index: 30;
}
.match-action-icon:hover::after,
.match-action-icon:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}
.match-action-start { background: #facc15; color: #111; border-color: #f59e0b }
.match-action-resume { background: #38bdf8; color: #0f172a; border-color: #0ea5e9 }
.match-action-tag { background: #111827; color: #fff; border-color: #111827 }
.match-action-delete { background: #ef4444; color: #fff; border-color: #dc2626 }
.match-action-finish { background: #22c55e; color: #0f172a; border-color: #16a34a }
.match-action-edit { background: #3b82f6; color: #fff; border-color: #2563eb }
.matches-table-compact td { vertical-align: middle }
.matches-table-compact .match-actions { gap: 4px; align-items: center }
.matches-table-compact .match-action-btn {
    height: 24px;
    width: 24px;
    border-radius: 6px;
    font-size: .75rem;
    line-height: 1;
}
.matches-table-compact .match-action-icon .action-icon { font-size: .7rem; letter-spacing: 0 }
.matches-panels { margin-bottom: 10px }
.matches-panel { display: none }
.matches-panel.active { display: block }
.match-card { background: var(--card); padding: 15px; border-radius: 10px; box-shadow: 0 2px 6px rgba(2, 6, 23, .08); border: 1px solid #e5e7eb }
.match-card p { margin: 6px 0 0 0; color: #555; font-size: .9rem }
.match-card-add { border-left: 4px solid #28a745 }
.match-card-info { background: #e8f4f8; border-left: 4px solid #17a2b8 }
.match-card-schedule { background: #f0f8ff; border-left: 4px solid #007bff }
.match-card-danger { background: #fff3cd; border-left: 4px solid #ffc107 }
.match-form-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) auto; gap: 10px; align-items: end }
.match-form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) auto }
.match-form-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) auto }
.match-form-grid-schedule { grid-template-columns: repeat(4, minmax(0, 1fr)) auto auto; gap: 10px; align-items: end }
.match-form-grid-add { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; align-items: end }
.match-form-grid-compact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end }
.form-field { display: flex; flex-direction: column; gap: 6px }
.form-field label { font-size: .85rem; font-weight: 700; color: #333 }
.add-match-form .form-buttons { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap }
.add-match-form .form-buttons .btn-sm { padding: 8px 14px; height: 34px; line-height: 1 }
.match-card .btn-danger.btn-sm { padding: 8px 14px; height: 34px }
.btn-primary { background: #007bff; color: #fff; border: none; border-radius: 6px; padding: 10px 15px; font-weight: 700; cursor: pointer; height: 35px }
.btn-secondary { background: #6c757d; color: #fff; border: none; border-radius: 6px; padding: 10px 15px; font-weight: 700; cursor: pointer; height: 35px }
.btn-info { background: #17a2b8; color: #fff; border: none; border-radius: 6px; padding: 10px 15px; font-weight: 700; cursor: pointer; height: 35px }
.settings-panel { background: var(--card); padding: 15px; border-radius: 8px; box-shadow: 0 1px 4px rgba(2,6,23,.06) }
.settings-table { width: 100%; border-collapse: collapse; margin-bottom: 12px }
.settings-table th, .settings-table td { padding: 10px; border-bottom: 1px solid #e5e7eb; text-align: left }
.settings-table th:last-child, .settings-table td:last-child { text-align: center; width: 70px }
.settings-table input { width: 100%; padding: 8px; border: 1px solid #d9d9d9; border-radius: 6px }
.settings-actions { display: flex; gap: 10px; justify-content: flex-end }
.settings-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; color: #333; margin-right: auto }
.settings-status { margin-top: 10px; font-size: .9rem }
.settings-status.success { color: #1f7a3f }
.settings-status.error { color: #b42318 }
.players-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 15px }
.players-column { display: flex; flex-direction: column }
.players-list { background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 6px; padding: 6px; overflow-y: visible }
.player-item { display: flex; align-items: center; gap: 6px; padding: 4px 8px; margin: 0; background: #fff; border: 1px solid #e0e0e0; border-radius: 3px; cursor: pointer; transition: all .2s; border-bottom: none }
.player-item:last-child { border-bottom: 1px solid #e0e0e0 }
.player-item:hover { background: #e3f2fd; border-color: var(--accent); transform: translateX(2px) }
.player-item.player-item-disabled { opacity: .6; cursor: not-allowed }
.player-item.player-item-disabled:hover { background: #fff; border-color: #e0e0e0; transform: none }
.player-number { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; background: var(--accent); color: #fff; font-weight: 700; border-radius: 4px; font-size: .85rem }
.player-name { font-size: .85rem; color: #333; font-weight: 500; flex: 1 }
.player-suspension-label { display: none; margin-left: 6px; font-size: .75rem; font-weight: 700; color: #b42318; text-transform: uppercase; letter-spacing: .2px }
.player-suspension-label.is-active { display: inline-flex; animation: penalty-blink 1s steps(2, start) infinite }
.player-penalties { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px }
.player-goals { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; background: #28a745; color: #fff; font-weight: 700; border-radius: 50%; font-size: .8rem }
.player-goals:empty::after { content: '0' }
.player-penalty-btn { background: #1e3a8a; color: #fff; border: none; border-radius: 6px; padding: 4px 6px; font-size: .75rem; cursor: pointer }
.player-penalty-btn:hover { filter: brightness(.95) }
.player-penalty-btn.player-penalty-btn-disabled { opacity: .5; cursor: not-allowed }
.player-penalty-btn.player-penalty-btn-disabled:hover { filter: none }
@keyframes penalty-blink { 0%, 100% { opacity: 1 } 50% { opacity: .2 } }
.no-players, .error-msg { color: #666; font-style: italic; padding: 10px; text-align: center }
.btn-danger { background: #dc3545; color: #fff; border: none; border-radius: 6px; padding: 10px 15px; font-weight: 700; cursor: pointer }
@media (max-width: 1100px) { .matches-controls { grid-template-columns: 1fr } .matches-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) } .match-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } .match-form-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) } .match-form-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) } .match-form-grid-schedule { grid-template-columns: repeat(2, minmax(0, 1fr)) } .match-form-grid-add { grid-template-columns: 1fr } .match-form-grid-compact { grid-template-columns: 1fr } }
@media (max-width: 900px) {
    .content-wrapper { padding: 12px }
    .topbar { padding: 8px 12px }
    .topbar button { padding: 8px 12px; font-size: .9rem }
    .page-header { padding: 14px }
    .page-header h1 { font-size: 1.2rem }
    .matches-container { padding: 10px }
    .groups-container { grid-template-columns: 1fr }
    .groups-row { grid-template-columns: 1fr }
}
/* Teams grid */
#teamsContainer { display: block; width: 100% }
.teams-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 15px; margin: 15px 0 }
.teams-category { margin-bottom: 30px; width: 100%; display: block }
.teams-category h3 { margin: 15px 0 15px 0; font-size: 1.3rem; color: var(--accent); padding-bottom: 10px; border-bottom: 2px solid var(--accent) }
.team-group-section { margin-bottom: 20px }
.team-group-title { margin: 10px 0; padding: 8px 12px; font-size: 1.1rem; border-radius: 6px; font-weight: bold; color: #fff; background: var(--accent) }
.team-group-section.women .team-group-title { background: #c0392b }
/* Group specific title colors for men */
.team-group-section.men.group-A .team-group-title { background: #1a3a52 }
.team-group-section.men.group-B .team-group-title { background: #2b6cb0 }
.team-group-section.men.group-C .team-group-title { background: #5a9ad6 }
/* Group specific title colors for women */
.team-group-section.women.group-A .team-group-title { background: #8b2e2e }
.team-group-section.women.group-B .team-group-title { background: #e74c3c }
.team-group-section.women.group-C .team-group-title { background: #f5a5a5; color: #333 }
.teams-row { display: flex; flex-wrap: wrap; gap: 15px; margin: 15px 0; width: 100% }
.team-card { background: var(--card); padding: 15px; border-radius: 8px; box-shadow: 0 1px 4px rgba(2, 6, 23, .06); border-left: 4px solid transparent; flex: 0 0 calc(25% - 12px); min-width: 280px }
.team-card-men { border-left-color: var(--accent) }
.team-card-women { background: #fff5f5; border-left-color: #e74c3c }
/* Group colors for men teams */
.team-card-men.team-group-A { border-left-color: #1a3a52 }
.team-card-men.team-group-B { border-left-color: #2b6cb0 }
.team-card-men.team-group-C { border-left-color: #5a9ad6 }
/* Group colors for women teams */
.team-card-women.team-group-A { border-left-color: #8b2e2e; background: #fff5f5 }
.team-card-women.team-group-B { border-left-color: #e74c3c; background: #fff5f5 }
.team-card-women.team-group-C { border-left-color: #f5a5a5; background: #fff5f5 }
.team-card h3 { margin: 0 0 10px 0; color: var(--accent) }
.team-card-women h3 { color: #c0392b }
.team-card p { margin: 5px 0; font-size: .95rem }
.team-actions { display: flex; gap: 10px; margin-top: 10px }
.team-actions button { flex: 1; padding: 8px; font-size: .9rem }
/* Admin panel */
.admin-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 15px 0 }
.admin-section { background: var(--card); padding: 15px; border-radius: 8px; box-shadow: 0 1px 4px rgba(2, 6, 23, .06) }
.admin-section h3 { margin: 0 0 15px 0; color: var(--accent) }
.admin-section input, .admin-section select { width: 100%; margin-bottom: 10px; padding: 8px; border: 1px solid #d9d9d9; border-radius: 6px }
.admin-section button { width: 100%; padding: 10px }
/* Matches list */
.matches-list { margin: 15px 0 }
.match-item { background: var(--card); padding: 15px; border-radius: 8px; margin-bottom: 10px; box-shadow: 0 1px 4px rgba(2, 6, 23, .06) }
.match-item.live { border-left: 5px solid #ffc107 }
.match-item.finished { opacity: .7 }
/* Section title */
.section-title { color: var(--accent); margin: 20px 0 15px 0 }
/* Team Detail */
.team-detail-header { margin-bottom: 20px }
.team-name-edit { margin-bottom: 15px }
.team-name-edit label { display: block; font-weight: bold; margin-bottom: 8px; color: var(--accent) }
.team-name-edit input { font-size: 1.3rem; padding: 10px; border: 2px solid #ddd; border-radius: 6px; font-weight: bold }
.team-name-edit input:focus { outline: none; border-color: var(--accent) }
.btn-back { background: #6b7280; color: #fff; border: none; padding: 12px 30px; border-radius: 6px; cursor: pointer; font-size: 1rem; transition: all 0.3s ease }
.btn-back:hover { background: #5a6268 }
.btn-save { background: #28a745; color: #fff; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; margin-right: 10px }
.btn-save:hover { opacity: .9 }
.team-detail-info { background: var(--card); padding: 15px; border-radius: 8px; margin: 15px 0; box-shadow: 0 1px 4px rgba(2, 6, 23, .06) }
.team-detail-info p { margin: 5px 0 }
.players-table { width: 100%; border-collapse: collapse; background: var(--card); margin: 15px 0 }
.players-table th { background: var(--accent); color: #fff; padding: 10px; text-align: left }
.players-table td { padding: 8px; border-bottom: 1px solid #eee }
.players-table input { padding: 4px; border: 1px solid #ddd; border-radius: 4px }
.add-player-form { background: var(--card); padding: 15px; border-radius: 8px; margin: 15px 0; box-shadow: 0 1px 4px rgba(2, 6, 23, .06) }
.add-player-form h4 { margin-top: 0 }
.add-player-form input { margin: 0 }
.team-actions { display: flex; gap: 10px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #ddd }
.groups-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)); gap: 20px; margin: 15px 0 }
.groups-container-dashboard { grid-template-columns: 1fr; gap: 18px; max-height: none; overflow: auto; padding-right: 6px }
.groups-container-dashboard .group-section { border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.08) }
.groups-category { margin-bottom: 30px }
.groups-category h3 { margin: 15px 0 15px 0; font-size: 1.3rem; color: var(--accent); padding-bottom: 10px; border-bottom: 2px solid var(--accent) }
.groups-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 20px }

.group-section { background: var(--card); padding: 15px; border-radius: 8px; box-shadow: 0 1px 4px rgba(2, 6, 23, .06); border-top: 4px solid transparent }
.group-men { border-top-color: var(--accent) }
.group-women { background: #fff5f5; border-top-color: #e74c3c }
/* Group specific colors for men */
.group-men.group-A { border-top-color: #1a3a52 }
.group-men.group-B { border-top-color: #2b6cb0 }
.group-men.group-C { border-top-color: #5a9ad6 }
/* Group specific colors for women */
.group-women.group-A { border-top-color: #8b2e2e }
.group-women.group-B { border-top-color: #e74c3c }
.group-women.group-C { border-top-color: #f5a5a5 }
.group-title { background: var(--accent); color: #fff; padding: 10px; border-radius: 6px; margin-bottom: 15px; font-weight: bold; text-align: center }
.group-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 15px }
.group-title-row .group-title { margin-bottom: 0; flex: 1 }
.group-recalc-btn { background: #17a2b8; color: #fff; border: none; border-radius: 6px; padding: 8px 12px; font-weight: 700; cursor: pointer }
.group-recalc-btn:hover { opacity: .9 }
.team-standings-row { position: relative }
.team-name-cell { position: relative; cursor: pointer }
.team-matches-tooltip { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); min-width: 400px; max-width: 700px; background: #fff; color: #111; border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px; box-shadow: 0 8px 20px rgba(0,0,0,.12); opacity: 0; pointer-events: none; transition: opacity .15s ease; z-index: 20 }
.team-standings-row:hover .team-matches-tooltip { opacity: 1; pointer-events: auto }
.team-standings-row.tooltip-active .team-matches-tooltip { opacity: 1; pointer-events: auto }
.team-matches-title { font-weight: 700; margin-bottom: 6px; color: var(--accent) }
.team-match-row { display: grid; gap: 4px; padding: 4px 0; border-top: 1px dashed #e5e7eb; font-size: .85rem }
.team-match-row:first-of-type { border-top: none }
.team-match-time { color: #666; font-size: .8rem }
.team-match-teams { color: #222 }
.team-matches-empty { font-size: .85rem; color: #666 }
.group-women .group-title { background: #c0392b }
/* Group title colors for men */
.group-men.group-A .group-title { background: #1a3a52 }
.group-men.group-B .group-title { background: #2b6cb0 }
.group-men.group-C .group-title { background: #5a9ad6 }
/* Group title colors for women */
.group-women.group-A .group-title { background: #8b2e2e }
.group-women.group-B .group-title { background: #e74c3c }
.group-women.group-C .group-title { background: #f5a5a5; color: #333 }
.standings-table { width: 100%; border-collapse: collapse }
.standings-table th, .standings-table td { padding: 8px; border-bottom: 1px solid #eee; text-align: center }
.standings-table th { background: #f5f5f5; font-weight: bold }
.group-women .standings-table th { background: #ffe0e0 }
.standings-table td:nth-child(2) { text-align: left }
.team-row-men { background: #fafbfc }
.team-row-women { background: #fff0f0 }
.standings-table tbody tr:hover { background: #f0f0f0 }
.standings-legend { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-top: 6px; padding: 10px 12px; background: #f7f9fc; border: 1px solid #e5e7eb; border-radius: 6px; font-size: .9rem; color: #333; grid-column: 1 / -1; width: 100%; justify-self: stretch }
.standings-legend strong { color: var(--accent) }
@media(min-width:900px) { .container { grid-template-columns: 1fr 320px } #schedule { grid-column: 1 / -1 } }
/* Match Edit Page Styles */
.match-edit-header { background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
.match-info-bar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 30px; align-items: center; color: white; }
.team-score { text-align: center; }
.team-score h3 { font-size: 1.5rem; margin-bottom: 15px; font-weight: 700; }
.team-score .score { color: #ffc107; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); }
.match-timer-display { text-align: center; }
.timer-text { font-size: 3rem; font-weight: 900; color: #fff; margin-bottom: 15px; font-family: 'JetBrains Mono', monospace; letter-spacing: 2px; }
.timer-controls { display: flex; gap: 10px; justify-content: center; }
.btn-timer { padding: 10px 20px; font-size: 1rem; font-weight: bold; border: none; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; }
.btn-timer:disabled { opacity: 0.5; cursor: not-allowed; }
#timerStartBtn { background: #28a745; color: white; }
#timerStartBtn:hover:not(:disabled) { background: #218838; }
#timerStopBtn { background: #dc3545; color: white; }
#timerStopBtn:hover:not(:disabled) { background: #c82333; }
.match-controls { display: grid; gap: 25px; margin-bottom: 30px; }
.control-group { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
.control-group h4 { margin: 0 0 15px 0; color: #333; font-size: 1.2rem; }
.button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.btn-action { padding: 15px 20px; font-size: 1rem; font-weight: 600; border: none; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; background: #007bff; color: white; }
.btn-action:hover:not(:disabled) { background: #0056b3; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
.btn-action:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.match-edit-actions { display: flex; justify-content: center; margin-top: 30px; }
.match-goals-panel { background: var(--card); padding: 15px; border-radius: 8px; margin: 15px 0; box-shadow: 0 1px 4px rgba(2, 6, 23, .06) }
.match-goals-panel h4 { margin: 0 0 10px 0; color: var(--accent) }
.match-goals-list { display: grid; gap: 8px }
.match-goal-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; padding: 6px 10px; border-radius: 6px; background: #f7f9fc }
.match-goal-row .goal-home { text-align: right }
.match-goal-row .goal-away { text-align: left }
.match-goal-row .goal-center { display: flex; flex-direction: column; align-items: center; gap: 6px }
.match-goal-row .goal-time { font-weight: 700; color: var(--accent) }
.match-goal-row .goal-score { font-size: .85rem; color: #333; font-weight: 600 }
.match-goal-row .goal-actions { display: flex; gap: 6px; justify-content: center }
.match-goal-row .goal-edit { background: #2563eb; color: #fff; border: none; border-radius: 6px; padding: 4px 8px; font-size: .8rem; cursor: pointer }
.match-goal-row .goal-edit:hover { filter: brightness(.95) }
.match-penalty-row { background: #f8fafc }
.penalty-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 700; color: #111 }
.penalty-text { font-weight: 700 }
.penalty-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; font-size: .75rem; font-weight: 800; color: #fff }
.penalty-warning { background: #f59e0b; color: #111 }
.penalty-yellow { background: #facc15; color: #111 }
.penalty-2min { background: #0ea5e9 }
.penalty-red { background: #ef4444 }
.match-goal-row .goal-player { font-weight: 600; color: #222 }
.match-goal-row .goal-team { font-size: .85rem; color: #666 }
.match-goal-row .goal-delete { background: #dc3545; color: #fff; border: none; border-radius: 6px; padding: 4px 8px; font-size: .8rem; cursor: pointer }
.match-goal-row .goal-delete:hover { filter: brightness(.95) }
/* Group standings already styled above */
/* Responsive: Stack scorers below team cards on narrow screens */

/* Loading Spinner Overlay */
.loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.loading-overlay.active {
    display: flex;
}

.spinner {
    width: 60px;
    height: 60px;
    border: 6px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Inline styles converted to classes */
.text-center {
    text-align: center;
}

.form-grid-add-team {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 10px;
    align-items: end;
}

.form-grid-add-player {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
    gap: 10px;
    align-items: end;
}

.btn-height-40 {
    height: 40px;
}

.hidden {
    display: none;
}

#teamDetailNameInput {
    font-size: 1.5rem;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    width: 100%;
    max-width: 400px;
}

#teamDetailGroupSelect {
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

.control-group-margin-top {
    margin-top: 12px;
}