.cd-effort-single-wrapper,
.cd-balance-single-wrapper,
.cd-barometer-single-wrapper,
.cd-energy-single-wrapper,
.cd-musical-single-wrapper {
margin: 1.1rem 0;
}
.cd-effort-block,
.cd-effort-block.cd-effort-indicator,
.cd-effort-block.cd-effort-auto,
.cd-balance-block,
.cd-barometer-block,
.cd-energy-block,
.cd-musical-block {
display: block;
padding: 0.85rem 1rem;
border-radius: 12px;
background: #f8fafc;
border: 1px solid #e2e8f0;
}
.cd-effort-block__header,
.cd-balance-block__header,
.cd-barometer-block__header,
.cd-energy-block__header,
.cd-musical-block__header {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.35rem 0.65rem;
}
.cd-effort-title,
.cd-balance-title,
.cd-barometer-title,
.cd-energy-title,
.cd-musical-title {
display: inline-block;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #64748b;
}
.cd-effort-label,
.cd-balance-label,
.cd-barometer-label,
.cd-energy-label,
.cd-musical-label {
font-size: 1rem;
font-weight: 700;
color: #0f172a;
}
.cd-effort-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
align-self: center;
}
.cd-effort-dot.cd-easy { background: #22c55e; }
.cd-effort-dot.cd-medium { background: #f97316; }
.cd-effort-dot.cd-hard { background: #ef4444; }
.cd-effort-desc,
.cd-balance-bullets {
margin: 0.45rem 0 0;
color: #475569;
font-size: 0.92rem;
line-height: 1.45;
}
.cd-balance-stars {
display: inline-flex;
gap: 0.08em;
letter-spacing: 0.06em;
color: #ca8a04;
font-size: 1.05rem;
line-height: 1;
}
.cd-barometer-status {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.35rem 0.5rem;
margin: 0.45rem 0 0;
font-size: 0.98rem;
line-height: 1.35;
}
.cd-barometer-trend {
color: #475569;
font-weight: 600;
}
.cd-barometer-trend::after {
content: ":";
margin-left: 0.12em;
}
.cd-barometer-gauge-wrap {
margin-top: 0.55rem;
}
.cd-barometer-gauge {
height: 6px;
border-radius: 999px;
background: #e2e8f0;
overflow: hidden;
}
.cd-barometer-gauge-fill {
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #6366f1, #7c3aed);
}
@media (max-width: 640px) {
.cd-effort-title,
.cd-balance-title {
flex: 1 0 100%;
}
}