:root {
  --public-primary: #0d4fb8;
  --public-text: #102033;
  --public-muted: #64748b;
  --public-border: #dfe7f1;
  --public-surface: #ffffff;
  --public-bg: #f4f7fb;
  --public-radius-control: 6px;
  --public-radius-card: 8px;
}

html,
body {
  font-family: Lato, Arial, sans-serif !important;
}

.search-card,
.result-frame-wrap,
.how-card,
.tip-box,
.ap-stat,
.ap-course,
.ap-card,
.ap-eval,
.ap-material-card,
.ap-cert-card {
  border-radius: var(--public-radius-card) !important;
  box-shadow: 0 1px 2px rgba(15, 43, 82, 0.08) !important;
}

button,
input,
select,
textarea,
.search-input,
.search-btn,
.result-back,
.ap-btn,
.ap-nav-link,
.ap-sidebar-link {
  border-radius: var(--public-radius-control) !important;
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid rgba(13, 79, 184, 0.3) !important;
  outline-offset: 2px !important;
}

.ap-header {
  border-bottom: 1px solid var(--public-border) !important;
  background: rgba(255, 255, 255, 0.98) !important;
}

.ap-brand img {
  filter: none !important;
}

.ap-layout,
.ap-content-area {
  min-width: 0;
}

.ap-sidebar {
  background: #fff;
}

.ap-sidebar-avatar,
.ap-course-num {
  box-shadow: none !important;
}

.ap-welcome-name,
.ap-section-title,
.ap-course-name {
  color: var(--public-text) !important;
  font-weight: 700 !important;
}

.ap-sidebar-link.active {
  color: #fff !important;
  background: var(--public-primary) !important;
  box-shadow: none !important;
}

.ap-sidebar-link.active i {
  color: #fff !important;
}

.ap-logout {
  color: #a22f2f !important;
}

@media (max-width: 48rem) {
  .search-inner {
    flex-direction: column;
  }

  .search-btn {
    width: 100%;
  }
}