:root{--primary:#5151c2;--primary-rgb:81,81,194;--secondary:#080808;--brand-secondary:#080808;--dark:#080808;--secondary-rgb:8,8,8;--secondary-text:#ffffff;--ui-focus:0 0 0 4px rgba(81,81,194,.14)}
.topbar{--primary:#5151c2;--secondary:#080808}
.brand,.brand-with-logo{color:#5151c2!important}
/* White-label secondary color integration.  Primary stays the main action color;
   Secondary now controls headers, secondary actions, accents and mobile drawer controls. */
.btn-dark,
.btn-secondary,
a.btn-dark,
a.btn-secondary,
button.btn-dark,
button.btn-secondary{
  background:var(--secondary)!important;
  border-color:var(--secondary)!important;
  color:var(--secondary-text)!important;
}
.btn-light,
button.btn-light,
a.btn-light,
.notification-button,
.mobile-menu-btn{
  color:var(--secondary)!important;
  border-color:rgba(var(--secondary-rgb),.18)!important;
}
.btn-outline:not(.btn-danger){
  color:var(--primary)!important;
  border-color:rgba(var(--primary-rgb),.55)!important;
}
.topbar .user-label,
.brand small,
.sidebar .side-section > .side-title,
.side-link:not(.active),
.builder-nav a:not(.active),
.page-head .muted,
.card .muted{
  color:rgba(var(--secondary-rgb),.82)!important;
}
.sidebar .side-section > .side-title:hover,
.sidebar .side-section.open > .side-title{
  background:linear-gradient(135deg,rgba(var(--primary-rgb),.09),rgba(var(--secondary-rgb),.08))!important;
  color:var(--secondary)!important;
}
.side-link:hover,
.side-link.active,
.sidebar .side-section-content .side-link:hover,
.sidebar .side-section-content .side-link.active,
.builder-nav a:hover,
.builder-nav a.active,
.tabs a.active{
  background:linear-gradient(135deg,rgba(var(--primary-rgb),.12),rgba(var(--secondary-rgb),.10))!important;
  color:var(--secondary)!important;
  border-color:rgba(var(--secondary-rgb),.22)!important;
}
.stat::before,
.mini-stat::before,
.metric-card::before{
  background:linear-gradient(90deg,var(--primary),var(--secondary))!important;
}
.badge:not(.red):not(.green):not(.orange),
.badge.gray,
.side-badge,
.sidebar .side-section-badge{
  border-color:rgba(var(--secondary-rgb),.16)!important;
}
.badge.gray{
  background:rgba(var(--secondary-rgb),.08)!important;
  color:var(--secondary)!important;
}
.hero{
  background:
    radial-gradient(circle at 18% 8%,rgba(var(--primary-rgb),.10),transparent 32%),
    radial-gradient(circle at 85% 0%,rgba(var(--secondary-rgb),.10),transparent 28%),
    linear-gradient(135deg,#fff 0%,#f8fcfb 100%)!important;
}
.hero-box,
.public-course-access-card,
.branded-login-panel{
  border-color:rgba(var(--secondary-rgb),.18)!important;
}
.course-cover,
.public-course-access-card,
.branded-login-panel{
  background:linear-gradient(135deg,rgba(var(--primary-rgb),.10),rgba(var(--secondary-rgb),.08),#fff)!important;
}
.public-course-page,
.branded-login-page{
  background:
    radial-gradient(circle at 12% 0%,rgba(var(--primary-rgb),.08),transparent 30%),
    radial-gradient(circle at 92% 10%,rgba(var(--secondary-rgb),.09),transparent 28%),
    linear-gradient(180deg,#fff 0%,#f8fafc 100%)!important;
}
.outline-number,
.qb-bank-editor summary,
.material-icon,
.activity-row .type{
  color:var(--secondary)!important;
}
.material-icon,
.activity-row .type{
  background:rgba(var(--secondary-rgb),.10)!important;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--primary)!important;
  box-shadow:var(--ui-focus)!important;
}
.table th,
.qb-status-check,
.activity-modal-header,
.section-settings-modal-header{
  background:linear-gradient(135deg,#fff,rgba(var(--secondary-rgb),.045))!important;
}
@media(max-width:900px){
  .topbar{border-bottom-color:rgba(var(--secondary-rgb),.18)!important;}
  .mobile-menu-btn{background:rgba(var(--secondary-rgb),.08)!important;}
}

/* Strong visible secondary color application across the academy web UI. */
:root{
  --secondary-soft:rgba(var(--secondary-rgb),.085);
  --secondary-soft-2:rgba(var(--secondary-rgb),.13);
  --secondary-line:rgba(var(--secondary-rgb),.22);
}
.topbar{
  border-bottom-color:var(--secondary-line)!important;
}
.topbar .btn-light,
.top-actions .btn-light,
.notification-button{
  background:var(--secondary-soft)!important;
  color:var(--secondary)!important;
}
.mobile-menu-btn{
  background:var(--secondary-soft)!important;
  color:var(--secondary)!important;
  border:1px solid var(--secondary-line)!important;
}
.sidebar{
  border-right-color:var(--secondary-line)!important;
}
.side-link.active,
.side-link:hover{
  border-left-color:var(--secondary)!important;
}
html[dir=rtl] .side-link.active,
html[dir=rtl] .side-link:hover{
  border-right-color:var(--secondary)!important;
  border-left-color:transparent!important;
}
.page-head h1,
.card h2,
.card h3,
.dashboard-card-title,
.stat h2,
.mini-stat h3{
  color:var(--secondary)!important;
}
.card,
.table,
.builder-shell,
.modal-card{
  border-color:rgba(var(--secondary-rgb),.12)!important;
}
.table th,
.notification-head,
.notification-foot,
.calendar-grid-head div,
.modal-close{
  background:linear-gradient(135deg,#fff,var(--secondary-soft))!important;
  color:var(--secondary)!important;
}
.tabs a.active,
.builder-nav a.active,
.builder-nav a:hover{
  box-shadow:inset 0 0 0 1px var(--secondary-line)!important;
}
.course-card:hover,
.card:hover{
  border-color:var(--secondary-line)!important;
}
.public-footer .legal-links a,
.public-nav a:hover,
.public-nav a.active,
.login-custom-html a{
  color:var(--secondary)!important;
}
.branding-tabs a.active,
.public-page-subtabs a.active{
  background:linear-gradient(135deg,rgba(var(--primary-rgb),.10),var(--secondary-soft))!important;
  color:var(--secondary)!important;
  border-color:var(--secondary-line)!important;
}