* { box-sizing: border-box; } body { margin: 0; font-family: Arial, sans-serif; background: #f4f7fb; color: #152033; } .page-shell { max-width: 1400px; margin: 0 auto; padding: 24px; } .hero { margin-bottom: 20px; display: flex; gap: 20px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; } .hero-slim { align-items: center; } .eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; font-weight: 700; color: #4b6cb7; margin: 0 0 8px; } .hero h1 { margin: 0 0 8px; font-size: 34px; line-height: 1.15; } .subtext { margin: 0; color: #52627a; max-width: 850px; line-height: 1.5; } .card { background: #ffffff; border-radius: 18px; padding: 18px; box-shadow: 0 10px 30px rgba(21, 32, 51, 0.08); margin-bottom: 18px; } .upload-row, .filter-row, .status-row { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .upload-form, .action-row, .summary-wrap, .top-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .file-label { font-weight: 700; } input[type="file"], input[type="text"], input[type="password"] { border: 1px solid #d2dbea; border-radius: 12px; padding: 10px 12px; background: #fff; } input[type="text"] { min-width: 260px; } button, .primary-link-btn, .secondary-link-btn { border: none; border-radius: 12px; padding: 10px 14px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } .primary-btn, .primary-link-btn { background: #1f6feb; color: white; } .secondary-btn, .secondary-link-btn { background: #e9eef8; color: #1c2b45; } .danger-btn { background: #ffe5e5; color: #a12626; } .status-message { font-weight: 700; } .status-message.success, .flash-message.success { color: #12723b; } .status-message.error, .flash-message.error { color: #b42318; } .status-message.pending { color: #8a5b00; } .meta-message { color: #5d6b82; font-size: 14px; } .search-wrap label, .login-form label { display: block; margin-bottom: 6px; font-weight: 700; } .summary-box { min-width: 110px; background: #f6f9ff; border: 1px solid #dce6f5; border-radius: 14px; padding: 12px 14px; } .summary-label { display: block; font-size: 12px; color: #607086; margin-bottom: 6px; } .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: collapse; min-width: 1000px; } thead th { position: sticky; top: 0; background: #f8fbff; font-size: 13px; letter-spacing: 0.02em; color: #41526b; cursor: pointer; user-select: none; } th, td { padding: 12px 10px; border-bottom: 1px solid #e8edf5; text-align: center; white-space: nowrap; } tbody tr:hover { background: #f8fbff; } .player-cell { text-align: left; font-weight: 700; } .team-row { background: #eef4ff; font-weight: bold; border-top: 2px solid #4b6cb7; } .empty-state { padding: 36px 12px; color: #65758b; text-align: center; } .left-align { text-align: left; } .flash-stack { margin-bottom: 14px; } .flash-message { background: #ffffff; border-radius: 12px; padding: 12px 14px; box-shadow: 0 6px 18px rgba(21, 32, 51, 0.06); margin-bottom: 10px; } .login-shell { min-height: 100vh; display: grid; place-items: center; padding: 20px; } .login-card { width: 100%; max-width: 480px; background: #ffffff; border-radius: 20px; padding: 28px; box-shadow: 0 10px 30px rgba(21, 32, 51, 0.08); } .login-form { display: grid; gap: 10px; margin-top: 18px; } .full-width { width: 100%; margin-top: 8px; } .games-layout { display: grid; grid-template-columns: 340px 1fr; gap: 18px; align-items: start; } .games-list, .games-header { display: grid; gap: 10px; } .section-title { margin: 0 0 4px; font-size: 22px; } .section-subtext { margin: 0; color: #607086; } .game-list-item { width: 100%; text-align: left; border: 1px solid #dde6f5; background: #fff; padding: 14px; border-radius: 14px; display: block; } .game-list-item.active { border-color: #1f6feb; box-shadow: 0 0 0 3px rgba(31,111,235,0.12); } .game-list-title { font-weight: 700; color: #152033; margin-bottom: 6px; } .game-list-meta { color: #607086; font-size: 13px; line-height: 1.4; } @media (max-width: 900px) { .games-layout { grid-template-columns: 1fr; } } @media (max-width: 768px) { .page-shell { padding: 14px; } .hero { gap: 12px; } .hero h1 { font-size: 26px; } .subtext { font-size: 14px; } .upload-row, .filter-row, .status-row, .upload-form, .action-row, .top-actions { flex-direction: column; align-items: stretch; } .summary-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; } .summary-box { min-width: 0; width: 100%; } input[type="text"], input[type="file"], input[type="password"], button, .primary-link-btn, .secondary-link-btn { width: 100%; } table { min-width: 900px; } th, td { padding: 10px 8px; font-size: 14px; } }