:root {
  --polish-pink:        #E5117F;
  --polish-pink-light:  rgba(229, 17, 127, 0.10);
  --polish-blue:        #1A56DB;
  --polish-focus-ring:  0 0 0 3px rgba(26, 86, 219, 0.22);
  --polish-focus-ring-pink: 0 0 0 3px rgba(229, 17, 127, 0.20);
  --polish-lift-sm:     0 6px 20px rgba(15, 23, 42, 0.09), 0 2px 6px rgba(15, 23, 42, 0.05);
  --polish-lift-md:     0 12px 32px rgba(15, 23, 42, 0.12), 0 4px 10px rgba(15, 23, 42, 0.06);
  --polish-lift-blue:   0 10px 28px rgba(26, 86, 219, 0.20);
  --polish-transition:  0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.16);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(26, 86, 219, 0.45);
  background-clip: padding-box;
}
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, 0.16) transparent;
}

:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--polish-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

.btn:focus-visible,
button:focus-visible {
  outline: none;
  box-shadow: var(--polish-focus-ring);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.form-control:focus-visible,
.search-box input:focus-visible,
.filter-select:focus-visible,
.sort-select:focus-visible,
.notes-textarea:focus-visible,
.qa-input:focus-visible {
  outline: none;
  border-color: var(--polish-blue) !important;
  box-shadow: var(--polish-focus-ring) !important;
}

.nav-link:focus-visible,
.nav-item:focus-visible,
a:focus-visible {
  outline: 2px solid var(--polish-blue);
  outline-offset: 2px;
}

.btn {
  transition:
    background    var(--polish-transition),
    border-color  var(--polish-transition),
    box-shadow    var(--polish-transition),
    transform     0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
    color         var(--polish-transition),
    opacity       var(--polish-transition);
  will-change: transform, box-shadow;
}

.btn:active:not(:disabled) {
  transform: translateY(0) scale(0.97);
  transition-duration: 0.08s;
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.enroll-btn {
  transition:
    background    var(--polish-transition),
    box-shadow    var(--polish-transition),
    transform     0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.enroll-btn:active {
  transform: scale(0.96);
}

.topbar-btn,
.sidebar-logout,
.edit-profile-btn,
.tab-btn {
  transition:
    background    var(--polish-transition),
    color         var(--polish-transition),
    border-color  var(--polish-transition),
    box-shadow    var(--polish-transition),
    transform     0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.topbar-btn:active,
.sidebar-logout:active,
.edit-profile-btn:active,
.tab-btn:active {
  transform: scale(0.96);
}

.stat-card {
  transition:
    box-shadow  var(--polish-transition),
    transform   var(--polish-transition),
    border-color var(--polish-transition),
    background  var(--polish-transition);
}
.stat-card:hover {
  box-shadow: var(--polish-lift-md) !important;
}

.panel-card,
.section-card {
  transition:
    box-shadow   var(--polish-transition),
    border-color var(--polish-transition),
    transform    var(--polish-transition);
}
.panel-card:hover,
.section-card:hover {
  box-shadow: var(--polish-lift-sm);
  transform: translateY(-1px);
}

.course-progress-card {
  transition:
    box-shadow   var(--polish-transition),
    transform    var(--polish-transition),
    border-color var(--polish-transition);
}

.course-card {
  transition:
    box-shadow   var(--polish-transition),
    transform    var(--polish-transition),
    border-color var(--polish-transition),
    background   var(--polish-transition);
}
.course-card:hover {
  box-shadow: var(--polish-lift-blue) !important;
}

.continue-card {
  transition:
    box-shadow   var(--polish-transition),
    transform    var(--polish-transition),
    border-color var(--polish-transition);
}

.cert-card {
  transition:
    box-shadow   var(--polish-transition),
    transform    var(--polish-transition),
    border-color var(--polish-transition);
}
.cert-card:hover {
  box-shadow: var(--polish-lift-sm);
  transform: translateY(-2px);
}

.activity-card {
  transition:
    box-shadow   var(--polish-transition),
    border-color var(--polish-transition);
}

.feature-card {
  transition:
    box-shadow   var(--polish-transition),
    transform    var(--polish-transition),
    border-color var(--polish-transition);
}

.cat-card {
  transition:
    box-shadow   var(--polish-transition),
    transform    var(--polish-transition),
    border-color var(--polish-transition),
    background   var(--polish-transition);
}

.testi-card {
  transition:
    box-shadow   var(--polish-transition),
    transform    var(--polish-transition),
    border-color var(--polish-transition);
}

.scard,
.lic,
.org {
  transition:
    box-shadow   var(--polish-transition),
    transform    var(--polish-transition),
    border-color var(--polish-transition),
    background   var(--polish-transition);
}
.scard:hover,
.lic:hover,
.org:hover {
  box-shadow: var(--polish-lift-sm);
  transform: translateY(-2px);
}

.glass-card {
  transition:
    box-shadow   var(--polish-transition),
    transform    var(--polish-transition),
    background   var(--polish-transition);
}
.glass-card:hover {
  box-shadow: var(--polish-lift-sm);
  transform: translateY(-2px);
}

.form-control,
.form-group input,
.form-group textarea,
.form-group select,
.search-box input,
.filter-select,
.sort-select,
.notes-textarea,
.qa-input {
  transition:
    border-color  var(--polish-transition),
    box-shadow    var(--polish-transition),
    background    var(--polish-transition);
}

.form-control::placeholder,
.form-group input::placeholder,
.form-group textarea::placeholder,
.search-box input::placeholder,
.notes-textarea::placeholder,
.qa-input::placeholder {
  color: rgba(148, 163, 184, 0.85);
}

select.form-control,
.filter-select,
.sort-select,
.form-group select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231A56DB' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.25rem;
}

tbody tr {
  transition: background var(--polish-transition);
}

.page-btn {
  transition:
    background    var(--polish-transition),
    border-color  var(--polish-transition),
    color         var(--polish-transition),
    box-shadow    var(--polish-transition),
    transform     0.12s ease;
}
.page-btn:hover:not(.active):not(.disabled) {
  transform: scale(1.05);
}
.page-btn.active {
  box-shadow: 0 2px 8px rgba(26, 86, 219, 0.30);
}

.nav-link,
.nav-item {
  transition:
    color        var(--polish-transition),
    background   var(--polish-transition),
    box-shadow   var(--polish-transition);
}

.curriculum-item,
.video-item {
  transition:
    background   var(--polish-transition),
    transform    var(--polish-transition);
}

.modal {
  transition:
    transform  0.28s cubic-bezier(0.2, 0.8, 0.3, 1),
    opacity    0.22s ease;
}

.progress-bar-fill,
.cppd-bar-fill,
.progress-fill {
  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes polish-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}

.skeleton-block {
  display: block;
  background: linear-gradient(
    90deg,
    rgba(226, 232, 240, 0.80)   0%,
    rgba(226, 232, 240, 0.80)   30%,
    rgba(241, 245, 249, 0.90)  48%,
    rgba(255, 255, 255, 0.90)  52%,
    rgba(241, 245, 249, 0.90)  56%,
    rgba(226, 232, 240, 0.80)   70%,
    rgba(226, 232, 240, 0.80)  100%
  );
  background-size: 300% 100%;
  animation: polish-shimmer 1.7s ease-in-out infinite;
  border-radius: 6px;
}

.skeleton-card {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.skeleton-line {
  height: 0.875rem;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    rgba(226, 232, 240, 0.80)   0%,
    rgba(226, 232, 240, 0.80)   30%,
    rgba(255, 255, 255, 0.90)  50%,
    rgba(226, 232, 240, 0.80)   70%,
    rgba(226, 232, 240, 0.80)  100%
  );
  background-size: 300% 100%;
  animation: polish-shimmer 1.7s ease-in-out infinite;
}
.skeleton-line.short  { width: 45%; }
.skeleton-line.medium { width: 65%; }
.skeleton-line.full   { width: 100%; }

.glass-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.30)  0%,
    rgba(255, 255, 255, 0.30)  30%,
    rgba(255, 255, 255, 0.60)  50%,
    rgba(255, 255, 255, 0.30)  70%,
    rgba(255, 255, 255, 0.30) 100%
  );
  background-size: 300% 100%;
  animation: polish-shimmer 1.7s ease-in-out infinite;
  border-radius: 8px;
}

.sidebar {
  transition:
    transform    0.30s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow   var(--polish-transition);
}

.topbar,
.dash-topbar {
  transition:
    background      var(--polish-transition),
    backdrop-filter var(--polish-transition),
    box-shadow      var(--polish-transition),
    border-color    var(--polish-transition);
}

@keyframes notif-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45); }
  50%       { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); }
}
.notification-dot {
  animation: notif-pulse 2.2s ease-in-out infinite;
}

.section-link,
.back-link,
footer ul li a,
.footer-legal a {
  transition:
    color         var(--polish-transition),
    opacity       var(--polish-transition),
    padding-left  var(--polish-transition);
}

.social-btn {
  transition:
    background    var(--polish-transition),
    border-color  var(--polish-transition),
    color         var(--polish-transition),
    transform     0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow    var(--polish-transition);
}
.social-btn:active {
  transform: scale(0.92);
}

.nav-user-btn,
.user-avatar-sm,
.sidebar-avatar,
.user-avatar-placeholder,
.profile-avatar {
  transition:
    transform    0.20s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow   var(--polish-transition);
}
.nav-user-btn:hover,
.user-avatar-sm:hover,
.sidebar-avatar:hover,
.user-avatar-placeholder:hover {
  transform: scale(1.06);
  box-shadow: 0 4px 12px rgba(26, 86, 219, 0.22);
}

.badge,
.course-tag,
.profile-badge,
.nav-badge,
.cppd-tag {
  transition:
    background  var(--polish-transition),
    color       var(--polish-transition),
    transform   0.12s ease;
}

.option-btn {
  transition:
    border-color  var(--polish-transition),
    background    var(--polish-transition),
    color         var(--polish-transition),
    transform     0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow    var(--polish-transition);
}
.option-btn:focus-visible {
  outline: none;
  box-shadow: var(--polish-focus-ring);
}

.resource-item {
  transition:
    border-color  var(--polish-transition),
    background    var(--polish-transition),
    transform     var(--polish-transition);
}
.resource-item:hover {
  transform: translateX(3px);
}

.course-thumb img,
.course-card-img {
  transition: transform 0.40s cubic-bezier(0.4, 0, 0.2, 1);
}

.welcome-banner {
  transition:
    box-shadow  var(--polish-transition);
}

.stat-card::before {
  transition: height 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-card {
  transition:
    box-shadow  var(--polish-transition),
    transform   var(--polish-transition);
}

.filter-option {
  transition:
    color         var(--polish-transition),
    background    var(--polish-transition);
  border-radius: 4px;
}

.tab-btn {
  transition:
    background  var(--polish-transition),
    color       var(--polish-transition),
    box-shadow  var(--polish-transition);
}

.topbar-btn:focus-visible {
  outline: none;
  box-shadow: var(--polish-focus-ring);
}

.vc-btn {
  transition:
    color        0.15s ease,
    background   0.15s ease,
    transform    0.12s ease;
}

.breadcrumb a {
  transition: color var(--polish-transition);
}
.breadcrumb a:hover {
  color: var(--polish-blue);
}

.page-btn.disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.addbar {
  transition:
    box-shadow   var(--polish-transition),
    border-color var(--polish-transition);
}

@media print {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    box-shadow: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }

  
  .skeleton-block,
  .skeleton-line,
  .glass-shimmer {
    animation: none !important;
    background: rgba(226, 232, 240, 0.75) !important;
  }

  
  .notification-dot {
    animation: none !important;
  }

  
  .stat-card:hover {
    transform: none;
  }

  
  .stat-card:hover,
  .course-card:hover,
  .continue-card:hover,
  .cert-card:hover,
  .panel-card:hover,
  .section-card:hover,
  .scard:hover,
  .lic:hover,
  .org:hover,
  .glass-card:hover {
    transform: none !important;
  }
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #0f172a;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
  box-shadow: 0 0 0 1000px #ffffff inset;
  caret-color: #0f172a;
  transition: background-color 9999s ease-in-out 0s;
}