.main { margin-top: 5rem; }

.border-top-primary { border-top: 5px solid #4582ec; }

.container-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-weight: bold;
    font-family: monospace;
    font-size: 1.1rem;
}

/* Base-type colors */
.base-lite-ice-cream { --base-color: #5dade2; }
.base-ice-cream      { --base-color: #f4d03f; }
.base-sorbet         { --base-color: #ec7063; }
.base-gelato         { --base-color: #a04000; }
.base-smoothie-bowl  { --base-color: #52be80; }
.base-milkshake      { --base-color: #af7ac5; }

.card.base-tinted {
    border-left: 6px solid var(--base-color, #ccc);
}

.base-badge {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: .25rem;
    background: var(--base-color, #ccc);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    text-shadow: 0 0 2px rgba(0, 0, 0, .35);
}

/* Freeze progress bar — slim, lives at top of card body */
.freeze-progress {
    height: 6px;
    border-radius: 3px;
    background: #e9ecef;
    overflow: hidden;
    margin-bottom: .5rem;
}
.freeze-progress > .bar {
    height: 100%;
    background: #17a2b8;
    transition: width .3s;
}
.freeze-progress.ready > .bar { background: #28a745; }

/* Big primary action button on the card */
.action-primary {
    font-size: 1.1rem;
    font-weight: 600;
    padding: .65rem;
}