/* Glassmorphism, Apple-style, dark theme compatible */

.bg-gradient-modern {
  background: linear-gradient(135deg, var(--bs-success) 0%, var(--bs-info) 25%, var(--bs-primary) 60%, var(--bs-danger) 100%);
  opacity: 0.15;
  min-height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  pointer-events: none;
}

.text-gradient-modern {
  background: -webkit-gradient(linear,left top, right top,from(var(--bs-success)),color-stop(var(--bs-info)),color-stop(var(--bs-primary)),to(var(--bs-danger)));
  background: linear-gradient(90deg,var(--bs-success),var(--bs-info),var(--bs-primary),var(--bs-danger));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.text-accent {
  color: var(--bs-danger) !important;
}

.btn-modern-main {
  background: rgba(var(--bs-primary-rgb), 0.60);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: var(--bs-light);
  border: 1.5px solid rgba(var(--bs-info-rgb), 0.37);
  font-weight: 600;
  -webkit-box-shadow: 0 4px 24px rgba(var(--bs-primary-rgb), .13),0 0 0 2px rgba(255,255,255,.09);
          box-shadow: 0 4px 24px rgba(var(--bs-primary-rgb), .13),0 0 0 2px rgba(255,255,255,.09);
  -webkit-transition: -webkit-transform .14s, -webkit-box-shadow .12s;
  transition: -webkit-transform .14s, -webkit-box-shadow .12s;
  transition: transform .14s, box-shadow .12s;
  transition: transform .14s, box-shadow .12s, -webkit-transform .14s, -webkit-box-shadow .12s;
  border-radius: 16px;
}
.btn-modern-main:hover {
  -webkit-transform: scale(1.045);
          transform: scale(1.045);
  -webkit-box-shadow: 0 8px 32px rgba(var(--bs-primary-rgb), .17),0 0 0 3px rgba(255,255,255,.14);
          box-shadow: 0 8px 32px rgba(var(--bs-primary-rgb), .17),0 0 0 3px rgba(255,255,255,.14);
  color: var(--bs-body-color);
  background: rgba(var(--bs-primary-rgb),0.26);
}

.btn-modern-ghost {
  border: 2px solid rgba(var(--bs-info-rgb),0.62);
  color: var(--bs-info);
  background: rgba(var(--bs-info-rgb),0.36);
  font-weight: 600;
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
  -webkit-transition: background .17s, color .17s;
  transition: background .17s, color .17s;
  border-radius: 16px;
}
.btn-modern-ghost:hover {
  background: var(--bs-success);
  color: var(--bs-light);
}

.badge-modern {
  background: rgba(var(--bs-danger-rgb),0.43);
  color: var(--bs-light);
  font-size: 1.09rem;
  font-weight: 500;
  border: 1.1px solid rgba(var(--bs-danger-rgb),0.06);
  -webkit-box-shadow: 0 2px 8px rgb(var(--bs-danger-rgb)/10%),0 0 0 1.5px rgba(255,255,255,.13);
          box-shadow: 0 2px 8px rgb(var(--bs-danger-rgb)/10%),0 0 0 1.5px rgba(255,255,255,.13);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.card-modern {
  border-radius: 32px;
  background: rgba(var(--bs-body-bg-rgb,255,255,255),0.32);
  -webkit-box-shadow: 0 13px 54px 0 rgba(var(--bs-primary-rgb),0.22),0 0px 0 rgba(var(--bs-primary-rgb),.04);
          box-shadow: 0 13px 54px 0 rgba(var(--bs-primary-rgb),0.22),0 0px 0 rgba(var(--bs-primary-rgb),.04);
  backdrop-filter: blur(19px) saturate(155%);
  -webkit-backdrop-filter: blur(19px) saturate(155%);
  border: 1.5px solid rgba(var(--bs-border-color-rgb,255,255,255),0.17);
  -webkit-transition: background .13s, -webkit-box-shadow .16s, -webkit-transform .18s;
  transition: background .13s, -webkit-box-shadow .16s, -webkit-transform .18s;
  transition: box-shadow .16s, transform .18s, background .13s;
  transition: box-shadow .16s, transform .18s, background .13s, -webkit-box-shadow .16s, -webkit-transform .18s;
}
.card-modern:hover {
  background: rgba(var(--bs-body-bg-rgb,255,255,255),0.53);
  -webkit-box-shadow: 0 16px 64px rgba(var(--bs-info-rgb),0.13), 0 0px 0 rgba(var(--bs-danger-rgb),.13);
          box-shadow: 0 16px 64px rgba(var(--bs-info-rgb),0.13), 0 0px 0 rgba(var(--bs-danger-rgb),.13);
  -webkit-transform: translateY(-10px) scale(1.04);
          transform: translateY(-10px) scale(1.04);
}

.shadow-modern {
  -webkit-box-shadow: 0 2px 18px rgba(var(--bs-primary-rgb), 0.13) !important;
          box-shadow: 0 2px 18px rgba(var(--bs-primary-rgb), 0.13) !important;
}

body {
  font-family: 'Rubik','Segoe UI',Arial,sans-serif;
  background: linear-gradient(105deg,var(--bs-danger)55 0%,var(--bs-info)22 94%);
  color: var(--bs-body-color);
}

@media (max-width: 767px) {
  h1.display-4 {
    font-size: 2.03rem;
  }
  .card-modern {
    border-radius: 18px;
  }
}

/* Dark theme support for glassmorphism */
[data-bs-theme="dark"] .bg-gradient-modern {
  opacity: 0.17;
}
[data-bs-theme="dark"] .text-gradient-modern {
  background: -webkit-gradient(linear,left top, right top,from(var(--bs-success)),color-stop(var(--bs-info)),color-stop(var(--bs-primary)),to(var(--bs-danger)));
  background: linear-gradient(90deg,var(--bs-success),var(--bs-info),var(--bs-primary),var(--bs-danger));
}
[data-bs-theme="dark"] .btn-modern-main {
  background: rgba(var(--bs-primary-rgb), 0.33);
  border: 1.5px solid rgba(var(--bs-success-rgb),0.24);
  color: var(--bs-light);
}
[data-bs-theme="dark"] .btn-modern-ghost {
  background: rgba(var(--bs-info-rgb),0.25);
  border: 2px solid rgba(var(--bs-success-rgb),0.24);
  color: var(--bs-info);
}
[data-bs-theme="dark"] .badge-modern {
  background: rgba(var(--bs-danger-rgb),0.29);
  color: var(--bs-light);
}
[data-bs-theme="dark"] .card-modern {
  background: rgba(33,34,52,0.23);
  border: 1.5px solid rgba(64,74,105,0.12);
  color: var(--bs-light);
}
[data-bs-theme="dark"] body {
  background: linear-gradient(105deg, var(--bs-danger) 2%, var(--bs-info) 95%);
  color: var(--bs-light);
}