:root { --pico-primary: #4a90e2; }

body {
    max-width: 960px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
}

nav { margin-bottom: 2rem; }

.flash {
    background: #1a2e1a;
    border: 1px solid #2ecc71;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    color: #b0c8b0;
}

.flash-error {
    background: #2e1a1a;
    border-color: #e74c3c;
    color: #c8b0b0;
}

.score-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.score-row label {
    min-width: 200px;
    margin-bottom: 0;
    font-size: 0.9rem;
}

.score-row select { margin-bottom: 0; }

.team-card {
    border: 1px solid #2a2e3f;
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.team-card .name { font-weight: bold; }
.team-card .scores { color: #6c7589; margin-left: 0.5rem; font-size: 0.85rem; }

.team-card .actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.team-card .actions a,
.team-card .actions button {
    font-size: 0.85rem;
}

.dim-group {
    border: 1px solid #2a2e3f;
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}

.dim-group h4 { margin-bottom: 0.5rem; }

.act-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.act-row label {
    min-width: 180px;
    margin-bottom: 0;
    font-size: 0.85rem;
    color: #6c7589;
}

.act-row input { margin-bottom: 0; }

.inline-btn {
    margin: 0 !important;
    padding: 0.2rem 0.6rem !important;
    font-size: 0.8rem !important;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 3rem;
}

.grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1rem;
}

.auth-card { max-width: 420px; margin: 2rem auto; }

.error { color: #e74c3c; }

.actions-bar {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 1rem;
}

.spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 0.5em;
}

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