.limit-meters {
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f8fafc;
    text-align: left;
}
.limit-meters.limit-meters-blocked {
    border-color: #fecaca;
    background: #fef2f2;
}

.limit-meters .lm-title {
    margin: 0 0 12px;
    font-weight: 600;
    font-size: 14px;
    color: #334155;
}
.limit-meters.limit-meters-blocked .lm-title { color: #991b1b; }
.limit-meters .lm-title .fa { margin-right: 6px; }

.limit-meters .lm-item + .lm-item {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e5e7eb;
}

.limit-meters .lm-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.limit-meters .lm-label {
    font-weight: 600;
    font-size: 14px;
    color: #1f2937;
}
.limit-meters .lm-label small {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 10px;
    background: #e5e7eb;
    color: #4b5563;
    font-size: 11px;
    font-weight: 500;
    text-transform: lowercase;
}
.limit-meters .lm-count {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    color: #16549A;
}
.limit-meters .lm-near .lm-count { color: #d97706; }
.limit-meters .lm-full .lm-count,
.limit-meters .lm-over .lm-count { color: #dc2626; }

.limit-meters .lm-bar {
    position: relative;
    display: flex;
    height: 10px;
    border-radius: 6px;
    background: #e5e7eb;
    overflow: hidden;
}
.limit-meters .lm-seg { display: block; height: 100%; }
.limit-meters .lm-seg-past { background: #16549A; }
.limit-meters .lm-seg-cart { background: #7aa6d6; }
.limit-meters .lm-seg-over { background: #dc2626; }
.limit-meters .lm-near .lm-seg-past { background: #b45309; }
.limit-meters .lm-near .lm-seg-cart { background: #f0b95e; }
.limit-meters .lm-full .lm-seg-past,
.limit-meters .lm-over .lm-seg-past { background: #991b1b; }
.limit-meters .lm-full .lm-seg-cart,
.limit-meters .lm-over .lm-seg-cart { background: #ef8a8a; }

.limit-meters .lm-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
}

.limit-meters .lm-legend {
    margin-top: 6px;
    font-size: 12px;
    color: #64748b;
}
.limit-meters .lm-legend strong { color: #334155; }
.limit-meters .lm-key {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 4px;
    border-radius: 2px;
    vertical-align: baseline;
}
.limit-meters .lm-key-past { background: #16549A; }
.limit-meters .lm-key-cart { background: #7aa6d6; }
.limit-meters .lm-near .lm-key-past { background: #b45309; }
.limit-meters .lm-near .lm-key-cart { background: #f0b95e; }
.limit-meters .lm-full .lm-key-past,
.limit-meters .lm-over .lm-key-past { background: #991b1b; }
.limit-meters .lm-full .lm-key-cart,
.limit-meters .lm-over .lm-key-cart { background: #ef8a8a; }
.limit-meters .lm-sep { margin: 0 6px; color: #cbd5e1; }
.limit-meters .lm-over-text { color: #dc2626; font-weight: 600; }

.limit-meters .lm-action {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: #991b1b;
}

@media (max-width: 600px) {
    .limit-meters .lm-head { flex-direction: column; align-items: flex-start; gap: 2px; }
}