.brand { align-items: center; display: flex; font-size: 1.125rem; gap: var(--space-sm); }
.brand > span:last-child { display: grid; line-height: 1; }
.brand small { color: #b8c5e0; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; margin-top: 0.3rem; text-transform: uppercase; }
.brand__mark, .user-avatar, .indicator-card__icon {
  align-items: center;
  background: var(--color-primary);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-weight: 750;
  justify-content: center;
}
.brand__mark { height: 2.75rem; width: 2.75rem; }
.sidebar__eyebrow { color: #8fa1c7; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; margin: 3rem 0 var(--space-sm); text-transform: uppercase; }
.sidebar nav { display: grid; gap: var(--space-xs); }
.sidebar-link { background: transparent; border: 0; border-radius: var(--radius-md); color: #dce4f4; padding: 0.75rem; text-align: left; width: 100%; }
.sidebar-link:hover, .sidebar-link[aria-current="page"] { background: rgb(255 255 255 / 0.1); color: #fff; }
.sidebar-link[aria-current="page"] { border-left: 3px solid #43bce1; }
.sidebar__footer { color: #bac6dc; font-size: 0.75rem; margin-top: auto; }
.status-dot { background: #4fc58c; border-radius: 50%; display: inline-block; height: 0.5rem; margin-right: var(--space-xs); width: 0.5rem; }
.user-menu, .report-actions { align-items: center; display: flex; gap: var(--space-sm); }
.user-avatar { height: 2rem; width: 2rem; }
.user-menu__identity { color: var(--color-muted); font-size: 0.8125rem; max-width: 15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.button { border: 1px solid transparent; border-radius: var(--radius-sm); font-weight: 650; min-height: 2.5rem; padding: 0.6rem 1rem; }
.button--primary { background: var(--color-primary); color: #fff; }
.button--primary:hover { background: #06689f; }
.button--secondary { background: var(--color-surface); border-color: var(--color-border); color: var(--color-primary-dark); }
.button--secondary:not(:disabled):hover { border-color: var(--color-primary); }
.button--quiet { background: transparent; border-color: transparent; color: var(--color-primary-dark); }
.button--full { width: 100%; }
.button:disabled { color: #8d98a7; opacity: 0.65; }
.icon-button { align-items: center; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-sm); height: 2.5rem; justify-content: center; width: 2.5rem; }
.field { display: grid; gap: var(--space-xs); }
.field label, .page-size { color: var(--color-primary-dark); font-size: 0.8125rem; font-weight: 650; }
input, select { background: #fff; border: 1px solid #bac6d4; border-radius: var(--radius-sm); color: var(--color-text); min-height: 2.625rem; padding: 0.55rem 0.7rem; }
input:hover, select:hover { border-color: #8392a6; }
.form-error { background: #fff2f3; border-left: 3px solid var(--color-danger); color: var(--color-danger); padding: var(--space-sm); }
.login-form-wrap h2 { font-size: 2rem; margin-top: var(--space-xs); }
.login-lead { color: var(--color-muted); margin: var(--space-sm) 0 var(--space-xl); }
.login-form-wrap form { display: grid; gap: var(--space-md); }
.login-help { color: var(--color-muted); font-size: 0.8125rem; margin-top: var(--space-lg); text-align: center; }
.login-intro__security { color: #bfcae1; font-size: 0.8125rem; }
.login-intro__security span { color: #52c992; }
.toast-region { bottom: var(--space-lg); display: grid; gap: var(--space-sm); position: fixed; right: var(--space-lg); z-index: 50; }
.toast { background: var(--color-primary-dark); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); color: #fff; max-width: 24rem; padding: var(--space-md); }
.toast--error { background: #7f1d2a; }
.loading-block { align-items: center; color: var(--color-muted); display: flex; gap: var(--space-sm); justify-content: center; min-height: 10rem; }
.spinner { animation: spin 800ms linear infinite; border: 3px solid var(--color-border); border-radius: 50%; border-top-color: var(--color-primary); height: 1.5rem; width: 1.5rem; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } .spinner { animation-duration: 1.8s; } }