.container {
    max-width: 960px;
    margin: 24px auto;
    padding: 16px
}

.border {
    display: grid;
    gap: 16px;
    grid-template-columns:1fr
}



.card {
    background: #9BBEC7;
    border: 1px solid #1f2937;
    border-radius: 12px;
    padding: 16px
}

.card h2 {
    margin: 0 0 8px;
    font-size: 20px
}

.muted {
    opacity: .8;
    font-size: 14px
}

.row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 8px 0
}

.row label {
    min-width: 130px
}

.num {
    width: 110px;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #374151;
    background: #9BBEC7;
    color: #67738a
}

.select {
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #374151;
    background: #9BBEC7;
    color: #67738a
}

.btn {
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #374151;
    background: #9BBEC7;
    color: #67738a;
    cursor: pointer
}

.btn:disabled {
    opacity: .5;
    cursor: not-allowed
}

.scoreRing {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 6px solid #374151;
    margin: auto
}

.badge {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #374151;
    margin-right: 6px
}

.ok {
    color: #10b981
}

.warn {
    color: #f59e0b
}

.bad {
    color: #ef4444
}

.list {
    margin: 0;
    padding-left: 20px
}

.list li {
    margin: 4px 0
}

.streaks {
    height: 1px;
    background: #1f2937;
    margin: 12px 0
}

.tag {
    font-size: 12px;
    opacity: .8
}


@media (min-width: 900px) {
    .hs-grid {
        grid-template-columns:1fr 1fr
    }
}