:root {
  --glass-bg: rgba(255, 255, 255, 0.68);
  --glass-bg-strong: rgba(255, 255, 255, 0.84);
  --glass-line: rgba(255, 255, 255, 0.78);
  --glass-shadow: 0 24px 70px rgba(30, 56, 60, 0.14);
  --glass-text: #172329;
  --glass-muted: #647178;
  --glass-accent: #1fa9a6;
}

body.glass-page {
  min-height: 100vh;
  color: var(--glass-text);
  background:
    radial-gradient(circle at 8% 12%, rgba(78, 205, 196, 0.28), transparent 34%),
    radial-gradient(circle at 92% 4%, rgba(144, 180, 255, 0.25), transparent 32%),
    radial-gradient(circle at 70% 86%, rgba(198, 161, 255, 0.19), transparent 35%),
    linear-gradient(145deg, #edf8f7 0%, #f7f7fb 48%, #eef5ff 100%);
  background-attachment: fixed;
}

.glass-page .card,
.glass-page .box,
.glass-page .order,
.glass-page .empty,
.glass-page .cart-row,
.glass-page .cart-aside,
.glass-page .application-section,
.glass-page .cosmetologist-form,
.glass-page .pro-intro,
.glass-page main > .card {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-line) !important;
  box-shadow: var(--glass-shadow) !important;
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  backdrop-filter: blur(22px) saturate(135%);
}

.glass-page .top,
.glass-page .topbar,
.glass-page header:not(.header),
.glass-page .nav-dropdown-menu {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.82) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
}

.glass-page input,
.glass-page select,
.glass-page textarea,
.glass-page .certificate-upload {
  background: rgba(255, 255, 255, 0.66) !important;
  border: 1px solid rgba(102, 128, 137, 0.24) !important;
  color: var(--glass-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.glass-page input:focus,
.glass-page select:focus,
.glass-page textarea:focus {
  outline: 3px solid rgba(31, 169, 166, 0.18) !important;
  border-color: rgba(31, 169, 166, 0.72) !important;
}

.glass-page button,
.glass-page .btn,
.glass-page .pay,
.glass-page .submit-application,
.glass-page .cart-checkout-btn {
  box-shadow: 0 12px 30px rgba(24, 87, 91, 0.18);
}

.glass-page .btn-light,
.glass-page .back,
.glass-page .order,
.glass-page .order-line,
.glass-page .items {
  border-color: rgba(97, 116, 125, 0.16) !important;
}

.glass-page .subtitle,
.glass-page .description,
.glass-page .desc,
.glass-page .welcome p,
.glass-page .order-date,
.glass-page .item-meta,
.glass-page .status {
  color: var(--glass-muted);
}

@media (max-width: 700px) {
  .glass-page .card,
  .glass-page .box,
  .glass-page .order,
  .glass-page .empty {
    border-radius: 20px !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glass-page .card,
  .glass-page .box,
  .glass-page .order,
  .glass-page .empty,
  .glass-page .cart-row,
  .glass-page .cart-aside,
  .glass-page .application-section,
  .glass-page .cosmetologist-form,
  .glass-page .pro-intro {
    background: #fff !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}