a, button, .btn, .period-option span {
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
:where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}
button:disabled { opacity: .6; cursor: not-allowed; }
@media (hover: hover) {
    :where(button, .btn):not(:disabled):hover { background-color: #c40000; color: #fff; }
    :where(button, .btn).secondary:hover { background-color: #253244; }
    :where(button, .btn).danger:hover { background-color: #870000; }
    :where(a):hover { color: var(--brand-dark); background-color: #ffeaea; }
    .icon-button:hover, .password-toggle:hover { background-color: #ffeaea; border-color: #e7b0b0; }
    .logout-button:hover { background-color: #ffeaea; color: var(--brand-dark); }
    .sidebar-link:hover, .sidebar-link.is-active:hover { background-color: #ffe3e3; }
    .sidebar-backdrop:hover { background-color: rgb(0 0 0 / 32%); }
    .period-option:hover span { background-color: #ffeaea; border-color: #dfaaaa; }
    .landing-page .btn.secondary:hover { background-color: #ffeaea; color: var(--brand-dark); border-color: #dfaaaa; }
}
.public-header { min-height: 76px; padding: 14px 28px; background: #fff; border-bottom: 1px solid var(--line); color: var(--ink); }
.public-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 17px; font-weight: 900; line-height: 1.25; border-radius: 6px; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 6px; background: var(--brand); color: #fff; font-weight: 900; font-size: 22px; }
.public-brand small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; margin-top: 3px; }
.public-navigation { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.public-navigation a { color: #454b54; text-decoration: none; font-size: 14px; font-weight: 700; padding: 8px 10px; border-radius: 6px; }
.public-navigation a[aria-current="page"] { color: var(--brand-dark); background: #fff1f1; }
@media (max-width: 540px) {
    .public-header { padding: 12px 16px; gap: 10px; align-items: center; }
    .public-navigation { width: 100%; gap: 6px; }
    .public-navigation a { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    a, button, .btn, .period-option span { transition: none; }
    html { scroll-behavior: auto !important; }
}