.client-period { margin: 14px 0; padding: 16px; border: 1px solid var(--line, #64748b44); border-radius: 16px; background: var(--card, #ffffff09); }
.client-period-fields { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.client-period-fields label { display: grid; gap: 6px; min-width: 150px; flex: 1 1 150px; font-size: 12px; color: var(--muted); }
.client-period-fields label:first-child { flex-basis: 220px; }
.client-period-fields input, .client-period-fields select { min-width: 0; width: 100%; }
.client-period-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.client-period-presets button { min-height: 30px; padding: 5px 10px; font-size: 12px; }
.client-period-note { margin: 8px 0 0; font-size: 12px; }
@media (max-width: 600px) { .client-period-fields label { flex-basis: 40%; } .client-period-fields label:first-child { flex-basis: 100%; } .client-period-fields > button, .client-period-fields > a { flex: 1 1 40%; text-align: center; } }