/* Shared controls keep the original palette while giving every action a clear shape. */
:where(.publicShell, .appShell, .learningApp) .btn {
  min-height: 44px;
  min-width: 44px;
  padding: 10px 16px;
  border-radius: 11px;
  box-sizing: border-box;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  font-weight: 750;
  white-space: normal;
  transition: background-color .18s ease, border-color .18s ease,
    box-shadow .18s ease, transform .18s ease;
}
:where(.publicShell, .appShell, .learningApp) .btn:hover:not(.disabled) {
  transform: translateY(-2px);
  box-shadow: 0 9px 20px rgba(24, 49, 112, .15);
}
:where(.publicShell, .appShell, .learningApp) .btn:active:not(.disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(24, 49, 112, .12);
}
:where(.publicShell, .appShell, .learningApp) .btn.primary {
  background: linear-gradient(135deg, #315ee7, #254bc5);
  border-color: #315ee7;
  color: #fff;
}
:where(.publicShell, .appShell, .learningApp) .btn.soft {
  background: #edf2ff;
  border-color: #d7e1ff;
  color: #17376d;
}
:where(.publicShell, .appShell, .learningApp) .btn.soft:hover {
  background: #dfe9ff;
}
:where(.publicShell, .appShell, .learningApp) .btn.danger {
  background: #fff0f3;
  border-color: #f4c3ce;
  color: #9c2845;
}
:where(.publicShell, .appShell, .learningApp) .btn.danger:hover {
  background: #ffe2e9;
}
.sidebarFoot form { margin: 14px 0 0; }
.miniUser {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.miniUser .avatar {
  width: 38px;
  height: 38px;
  flex: none;
  color: #fff;
  font-size: 14px;
  line-height: 1;
}
.miniUserText { min-width: 0; text-align: left; }
.miniUserText strong {
  display: block;
  color: #fff;
  font-size: 13px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.miniUserText .role {
  display: block;
  margin-top: 3px;
  color: #cbd7ff;
  font-size: 11px;
  line-height: 1.3;
}
.sidebarLogout {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 11px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.sidebarLogout:hover {
  background: rgba(232, 79, 154, .25);
  border-color: rgba(255, 175, 215, .65);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(4, 14, 50, .2);
}
.sidebarLogout:active { transform: translateY(0); }
.sidebarLogout .logoutIcon {
  width: 16px;
  flex: 0 0 16px;
  text-align: center;
  font-size: 19px;
  line-height: 1;
}
.sideNav a {
  min-height: 44px;
  box-sizing: border-box;
  font-weight: 750;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.sideNav a:hover { transform: translateX(3px); }
.sideNav a.active { background: rgba(255, 255, 255, .16); }
.sideNav a.active .ico {
  background: linear-gradient(135deg, #567bfa, #ec6ca9);
  color: white;
}
.publicLinks a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.publicLinks a:hover { color: #315ee7; border-color: #e84f9a; }
.textBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid #d7e1ff;
  border-radius: 9px;
  background: #edf2ff;
  color: #244ca9;
  text-decoration: none;
  font-size: 13px;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}
.textBtn:hover { background: #dfe9ff; transform: translateY(-1px); }
.appShell .textBtn[href] { text-decoration: none; }
.learningApp .navBtn {
  min-height: 40px;
  box-sizing: border-box;
  display: block;
  border: 1px solid transparent;
  transition: background-color .18s ease, border-color .18s ease;
}
.learningApp .navBtn:hover {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .12);
}
.learningApp .navBtn.unavailable { cursor: default; }
.learningApp .subNavBtn { display: block; text-decoration: none; }
.learningApp .mainPanelButton {
  border-color: #d7e1ff;
  background: #edf2ff;
  color: #234a9c;
}
.pagination { flex-wrap: wrap; }
.pagination .btn { min-width: 104px; }
.hero h1 { color: #fff; }
.heroTrust { color: #e8edff; }
.heroCard .smallText { color: #566079; }
:where(.publicShell, .appShell, .learningApp) :where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid #f68bbd;
  outline-offset: 3px;
}
@media (max-width: 700px) {
  .heroActions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .heroActions .btn { width: 100%; }
  .navActions .btn { min-width: 0; }
  .appShell .actions .btn { flex: 1 1 160px; }
}
@media (prefers-reduced-motion: reduce) {
  :where(.publicShell, .appShell, .learningApp) :where(.btn, .textBtn, .sidebarLogout, .sideNav a, .publicLinks a) {
    transition: none;
  }
}