.friendly-date {
    display: grid;
    grid-template-columns: minmax(130px, 1.35fr) minmax(82px, .75fr) minmax(105px, 1fr);
    gap: .65rem;
}
.friendly-date label { display: grid; gap: .32rem; min-width: 0; }
.friendly-date label > span {
    color: var(--text-dim, #94a3b8);
    font-size: .68rem;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.calc-date-select {
    width: 100%;
    min-height: 48px;
    padding: .65rem 2rem .65rem .72rem;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 11px;
    background: #111827;
    color: #e2e8f0;
    font: inherit;
    font-size: .88rem;
    cursor: pointer;
}
.calc-date-select:hover { border-color: rgba(56, 189, 248, .45); }
.calc-date-select:focus {
    outline: none;
    border-color: rgba(56, 189, 248, .7);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, .14);
}
.friendly-date-title { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.friendly-date-today {
    border: 1px solid rgba(56, 189, 248, .28);
    border-radius: 999px;
    padding: .3rem .65rem;
    background: rgba(14, 165, 233, .1);
    color: #7dd3fc;
    font: inherit;
    font-size: .7rem;
    font-weight: 800;
    cursor: pointer;
}
.friendly-date-today:hover { background: rgba(14, 165, 233, .18); color: #e0f2fe; }
.friendly-date-today:focus-visible { outline: 3px solid rgba(56, 189, 248, .4); outline-offset: 2px; }
.friendly-date-hint { margin: .45rem 0 0; color: var(--text-dim, #94a3b8); font-size: .72rem; line-height: 1.4; }
@media (max-width: 560px) {
    .friendly-date { grid-template-columns: 1fr 1fr; }
    .friendly-date label:first-child { grid-column: 1 / -1; }
    .calc-date-select { min-height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
    .age-calc-app *, .age-calc-app *::before, .age-calc-app *::after { transition-duration: .01ms !important; }
}