:root {
  --bg: #060b12;
  --bg-soft: #0a111b;
  --surface: #0f1826;
  --surface-2: #132033;
  --surface-3: #192a41;
  --text: #e8f0ff;
  --text-soft: #9aaec7;
  --text-muted: #6f8299;
  --line: rgba(173, 204, 255, 0.14);
  --line-strong: rgba(173, 204, 255, 0.24);
  --primary: #19b6c4;
  --primary-2: #0f8f9f;
  --accent: #ffa24a;
  --danger: #ff6f7d;
  --success: #32d296;
  --shadow-sm: 0 8px 24px rgba(4, 9, 16, 0.35);
  --shadow-md: 0 16px 48px rgba(4, 9, 16, 0.5);
  --glass-bg: rgba(19, 32, 51, 0.58);
  --glass-bg-soft: rgba(15, 24, 38, 0.46);
  --glass-edge: rgba(201, 227, 255, 0.2);
  --glass-glow: rgba(25, 182, 196, 0.2);
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 26px;
}

html,
body {
  background:
    radial-gradient(circle at 8% 2%, rgba(25, 182, 196, 0.16), transparent 26%),
    radial-gradient(circle at 96% 10%, rgba(255, 162, 74, 0.13), transparent 22%),
    linear-gradient(180deg, #060b12 0%, #0b1320 100%) !important;
  color: var(--text) !important;
  font-family: "Manrope", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
.card-title,
.page-title,
.page-title-box h4,
.nav-link {
  font-family: "Space Grotesk", "Manrope", sans-serif !important;
  color: var(--text) !important;
  letter-spacing: 0.01em;
}

a {
  color: #6fd6ff;
}

a:hover {
  color: #9ce6ff;
  text-decoration: none;
}

.page-content,
.main-content,
#layout-wrapper {
  background: transparent !important;
}

#page-topbar,
.navbar-header,
.topnav,
.navigation,
.navigation.sticky {
  background: linear-gradient(140deg, rgba(12, 18, 30, 0.72), rgba(8, 13, 22, 0.72)) !important;
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  border-bottom: 1px solid var(--glass-edge) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.topnav {
  border-top: 1px solid rgba(173, 204, 255, 0.08);
}

.topnav .navbar-nav .nav-link,
.navigation .navbar-nav .nav-link {
  color: var(--text-soft) !important;
  border-radius: 10px;
  padding: 0.6rem 0.95rem !important;
  transition: 0.2s ease;
}

.topnav .navbar-nav .nav-link:hover,
.topnav .navbar-nav .nav-link.active,
.navigation .navbar-nav .nav-link:hover,
.navigation .navbar-nav .nav-link.active {
  color: #eaf8ff !important;
  background: linear-gradient(135deg, rgba(25, 182, 196, 0.2), rgba(15, 143, 159, 0.2));
  box-shadow: inset 0 0 0 1px rgba(25, 182, 196, 0.35);
}

.header-item {
  color: var(--text-soft) !important;
}

.header-item:hover {
  color: var(--text) !important;
}

.card,
.modal-content,
.dropdown-menu {
  background: linear-gradient(160deg, var(--glass-bg), var(--glass-bg-soft)) !important;
  border: 1px solid var(--glass-edge) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  position: relative;
  overflow: hidden;
}

.card::after,
.modal-content::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(130deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.01) 38%, transparent 62%);
}

.card:hover {
  border-color: rgba(25, 182, 196, 0.48) !important;
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(25, 182, 196, 0.2), 0 0 34px var(--glass-glow) !important;
}

.card-header,
.card-footer,
.table-light,
.bg-light {
  background: rgba(12, 20, 32, 0.58) !important;
  border-color: rgba(201, 227, 255, 0.14) !important;
}

.bg-circle-shape,
.hero-section .bg-overlay {
  background:
    linear-gradient(140deg, rgba(25, 182, 196, 0.88), rgba(15, 143, 159, 0.86) 55%, rgba(9, 50, 82, 0.88)) !important;
}

.text-muted,
.form-text,
.text-white-50,
.breadcrumb-item.text-muted {
  color: var(--text-muted) !important;
}

.breadcrumb-item.text-primary,
.text-primary {
  color: #63d8ff !important;
}

.btn {
  border-radius: var(--radius-sm) !important;
  font-weight: 700;
  border: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.2s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary,
.badge.bg-primary,
.badge-soft-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-2)) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(15, 143, 159, 0.35);
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, #26c9d7, #128393) !important;
  box-shadow: 0 14px 30px rgba(18, 141, 158, 0.4) !important;
}

.btn-outline-primary {
  background: transparent !important;
  border: 1px solid rgba(25, 182, 196, 0.5) !important;
  color: #7ce9f7 !important;
}

.btn-outline-primary:hover {
  background: rgba(25, 182, 196, 0.14) !important;
  color: #d7fbff !important;
  border-color: rgba(25, 182, 196, 0.75) !important;
}

.btn-light {
  background: rgba(255, 162, 74, 0.14) !important;
  color: #ffd6ac !important;
  border: 1px solid rgba(255, 162, 74, 0.35) !important;
}

.btn-light:hover {
  background: rgba(255, 162, 74, 0.22) !important;
  color: #ffe6cb !important;
}

.btn-success,
.badge-soft-success {
  background: linear-gradient(135deg, #2dc387, #1e9f6a) !important;
  color: #ffffff !important;
}

.btn-danger,
.badge-soft-danger {
  background: linear-gradient(135deg, #ff6f7d, #d65266) !important;
  color: #ffffff !important;
}

.btn-warning,
.badge-soft-warning {
  background: linear-gradient(135deg, #ffbd66, #ff9f43) !important;
  color: #3f2b10 !important;
}

.form-control,
.form-select,
.input-group-text,
.bootstrap-touchspin .form-control {
  background: rgba(12, 22, 36, 0.56) !important;
  border: 1px solid rgba(201, 227, 255, 0.2) !important;
  border-radius: 11px !important;
  color: var(--text) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.form-control::placeholder,
.form-select::placeholder {
  color: #6e83a0 !important;
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(25, 182, 196, 0.65) !important;
  box-shadow: 0 0 0 3px rgba(25, 182, 196, 0.2) !important;
  background: rgba(13, 21, 35, 0.95) !important;
}

.form-label,
label {
  color: var(--text-soft) !important;
}

.table,
.table td,
.table th {
  color: var(--text) !important;
  border-color: rgba(173, 204, 255, 0.1) !important;
}

.table th {
  color: #9ec4e8 !important;
  background: rgba(11, 18, 30, 0.6) !important;
}

.table > tbody > tr:hover {
  background: rgba(25, 182, 196, 0.08) !important;
}

.table-responsive {
  border: 1px solid rgba(201, 227, 255, 0.2);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(10, 18, 30, 0.42);
  backdrop-filter: blur(10px);
}

.dropdown-menu {
  padding: 0.45rem;
}

.dropdown-item {
  color: var(--text-soft) !important;
  border-radius: 10px;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: rgba(25, 182, 196, 0.14) !important;
  color: #e4fbff !important;
}

.dropdown-divider {
  border-color: var(--line) !important;
}

.modal-header,
.modal-footer {
  border-color: var(--line) !important;
}

.modal-title {
  color: var(--text) !important;
}

.btn-close {
  filter: invert(1) grayscale(100%) brightness(190%);
}

.alert-success {
  background: rgba(50, 210, 150, 0.15) !important;
  border: 1px solid rgba(50, 210, 150, 0.35) !important;
  color: #9df7d0 !important;
  border-radius: 12px !important;
}

.alert-danger {
  background: rgba(255, 111, 125, 0.14) !important;
  border: 1px solid rgba(255, 111, 125, 0.35) !important;
  color: #ffc0c9 !important;
  border-radius: 12px !important;
}

.alert-warning {
  background: rgba(255, 162, 74, 0.16) !important;
  border: 1px solid rgba(255, 162, 74, 0.35) !important;
  color: #ffe0bf !important;
  border-radius: 12px !important;
}

.alert-info {
  background: rgba(99, 216, 255, 0.14) !important;
  border: 1px solid rgba(99, 216, 255, 0.35) !important;
  color: #cff3ff !important;
  border-radius: 12px !important;
}

.page-title-box {
  padding-bottom: 1.35rem;
}

.page-title-box h4 {
  font-size: 1.34rem;
}

.card.plan-box {
  overflow: hidden;
}

.card.plan-box::before {
  content: "";
  display: block;
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, #19b6c4, #6fd6ff, #ffa24a);
}

.card.plan-box .card-header {
  border-bottom: 0 !important;
  padding-bottom: 0;
}

.card.plan-box .card-title {
  font-size: 1.05rem;
}

.card.plan-box h2 {
  font-size: 1.76rem;
  font-weight: 700;
  color: #d8fbff !important;
}

.plan-features img {
  width: 220px;
  max-width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(173, 204, 255, 0.24);
  box-shadow: 0 12px 25px rgba(2, 6, 12, 0.45);
}

.plan-features img:hover {
  transform: translateY(-2px);
  transition: 0.2s ease;
}

.mini-stats-wid .avatar-title {
  background: linear-gradient(160deg, rgba(25, 182, 196, 0.25), rgba(15, 143, 159, 0.3)) !important;
  color: #84f2ff !important;
}

.account-pages {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.account-pages .card {
  border: 1px solid rgba(173, 204, 255, 0.2) !important;
  box-shadow: 0 20px 60px rgba(3, 8, 16, 0.6), 0 0 0 1px rgba(25, 182, 196, 0.14) !important;
}

.account-pages .card:hover {
  transform: none;
}

.auth-pass-inputgroup .btn {
  background: rgba(11, 18, 30, 0.95) !important;
  border: 1px solid var(--line) !important;
  color: var(--text-soft) !important;
}

.footer {
  border-top: 1px solid var(--glass-edge) !important;
  color: var(--text-muted) !important;
  background: rgba(8, 13, 22, 0.5) !important;
  backdrop-filter: blur(14px);
}

.loader span {
  background: #19b6c4 !important;
}

.loader span:nth-child(2) {
  background: #ffa24a !important;
}

.toast-success {
  background-color: rgba(50, 210, 150, 0.92) !important;
}

.toast-error {
  background-color: rgba(255, 111, 125, 0.92) !important;
}

.toast-warning {
  background-color: rgba(255, 162, 74, 0.92) !important;
}

.toast-info {
  background-color: rgba(99, 216, 255, 0.92) !important;
}

#toast-container > div {
  border-radius: 12px !important;
  box-shadow: var(--shadow-sm) !important;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  background: rgba(11, 18, 30, 0.95) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
  border-radius: 9px !important;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--text-soft) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: linear-gradient(135deg, var(--primary), var(--primary-2)) !important;
  color: #ffffff !important;
  border: none !important;
}

.accordion-item {
  background: rgba(13, 21, 35, 0.9) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
}

.accordion-button {
  background: rgba(13, 21, 35, 0.9) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
  background: rgba(25, 182, 196, 0.12) !important;
  color: #bdf7ff !important;
}

.accordion-body {
  color: var(--text-soft) !important;
}

.vertical-nav .nav-pills .nav-link {
  background: rgba(13, 21, 35, 0.9);
  border: 1px solid var(--line);
  color: var(--text-soft);
  border-radius: 12px;
  margin-bottom: 0.55rem;
}

.vertical-nav .nav-pills .nav-link.active {
  background: linear-gradient(135deg, rgba(25, 182, 196, 0.2), rgba(15, 143, 159, 0.2));
  border-color: rgba(25, 182, 196, 0.46);
  color: #d8fbff !important;
}

.hero-section {
  position: relative;
  padding-top: 170px;
  padding-bottom: 130px;
  overflow: hidden;
}

.hero-section .hero-title {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  text-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.hero-section img {
  width: min(100%, 460px);
  height: 320px;
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid rgba(173, 204, 255, 0.25);
  box-shadow: 0 24px 50px rgba(2, 8, 15, 0.6);
}

.section {
  position: relative;
}

.section#pricing {
  background: linear-gradient(180deg, rgba(10, 17, 27, 0.8), rgba(8, 14, 24, 0.8)) !important;
}

.hori-pricing .event-list {
  background: linear-gradient(165deg, rgba(19, 32, 51, 0.62), rgba(15, 24, 38, 0.62));
  border: 1px solid var(--glass-edge);
  border-radius: 18px;
  padding: 1.2rem;
  min-height: 380px;
  transition: 0.22s ease;
  backdrop-filter: blur(14px) saturate(130%);
}

.hori-pricing .event-list:hover {
  border-color: rgba(25, 182, 196, 0.42);
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}

.hori-pricing .event-list .event-date .text-primary {
  color: #8de7ff !important;
  font-weight: 700;
}

.hori-pricing .event-list h5 {
  color: #e8f6ff !important;
}

.hori-pricing .event-down-icon p {
  margin: 0.8rem 0;
  text-align: center;
}

.hori-pricing .event-down-icon p img {
  width: 180px !important;
  max-width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(173, 204, 255, 0.26);
}

.hori-pricing .down-arrow-icon {
  color: #7de6f5 !important;
}

.auth-logo .btn,
.card-body .btn {
  box-shadow: 0 10px 20px rgba(3, 9, 16, 0.35);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #0a111b;
}

::-webkit-scrollbar-thumb {
  background: #1e3553;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #245784;
}

@media (max-width: 1199px) {
  .hori-pricing .event-list {
    min-height: 350px;
  }

  .hero-section {
    padding-top: 140px;
    padding-bottom: 90px;
  }
}

@media (max-width: 991px) {
  .topnav .navbar-nav .nav-link,
  .navigation .navbar-nav .nav-link {
    margin-bottom: 0.32rem;
  }

  #topnav-menu-content {
    background: rgba(11, 18, 30, 0.95) !important;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.75rem;
    margin-top: 0.5rem;
  }

  .dropdown-menu {
    background: rgba(14, 23, 37, 0.9) !important;
    border: 1px solid var(--line) !important;
    box-shadow: none !important;
    padding-left: 0.2rem;
  }

  .hero-section {
    text-align: center;
  }

  .hero-section .button-items {
    justify-content: center;
  }

  .hero-section img {
    margin-top: 1.2rem;
    height: 260px;
  }
}

@media (max-width: 575px) {
  .container,
  .container-fluid {
    padding-left: 13px;
    padding-right: 13px;
  }

  .card,
  .modal-content {
    border-radius: 14px !important;
  }

  .page-title-box h4 {
    font-size: 1.08rem;
  }

  .card.plan-box h2 {
    font-size: 1.38rem;
  }

  .plan-features img,
  .hori-pricing .event-down-icon p img {
    width: 145px !important;
    height: 145px;
  }
}