:root { --ink: #062a2b; --teal: #626850; --teal-dark: #4f553f; --mint: #daddcf; --paper: rgba(247,255,254,.68); }
body { min-height: 100vh; color: var(--ink); background: radial-gradient(circle at 15% 10%, #d1d4c3 0, transparent 38%), radial-gradient(circle at 90% 20%, #b8bda4 0, transparent 35%), linear-gradient(150deg, #7c826b, #e4e6da 62%, #a9ae97); background-attachment: fixed; padding-bottom: 96px; }
.glass { background: var(--paper); border: 1px solid rgba(255,255,255,.72); box-shadow: 0 18px 45px rgba(4,71,70,.16); backdrop-filter: blur(20px); }
.hero { border-radius: 0 0 34px 34px; }
.eyebrow { letter-spacing: .18em; text-transform: uppercase; font-size: .75rem; font-weight: 700; color: var(--teal); }
.day-title { position: sticky; top: 8px; z-index: 2; width: fit-content; border-radius: 999px; padding: .45rem 1rem; }
.class-card { border-radius: 22px; transition: transform .2s ease, box-shadow .2s ease; }
.class-card:hover { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(4,71,70,.22); }
.tier-premium { background: var(--teal-dark); color: #eef0e6; }
.tier-regular { background: var(--mint); color: var(--teal); }
.bottom-nav { position: fixed; inset: auto 0 0; z-index: 1030; border-radius: 24px 24px 0 0; }
.nav-action { color: #075e5a; border: 0; background: transparent; min-width: 72px; }
.nav-action i { display: block; font-size: 1.4rem; }
.btn-teal { background: var(--teal); color: #fff; border: 0; }
.btn-teal:hover { background: var(--teal-dark); color: #fff; }
a, .btn-link, .link-dark { color: var(--teal-dark); }
a:hover, .btn-link:hover, .link-dark:hover { color: var(--teal); }
.package-carousel { padding: 0 2.5rem; }
.package-card { min-height: 310px; border: 1px solid rgba(255,255,255,.78); background: linear-gradient(150deg, rgba(255,255,255,.86), rgba(218,221,207,.86)); box-shadow: 0 14px 32px rgba(79,85,63,.16); }
.package-price { color: var(--teal-dark); font-size: 2rem; font-weight: 800; letter-spacing: -.04em; }
.package-credit { border-top: 1px solid rgba(98,104,80,.16); }
.package-carousel .carousel-control-prev, .package-carousel .carousel-control-next { width: 2.25rem; }
.package-carousel .carousel-control-prev-icon, .package-carousel .carousel-control-next-icon { filter: invert(35%) sepia(13%) saturate(910%) hue-rotate(36deg); }
.offcanvas { background: #effcf9; }
#profile .nav-pills .nav-link { color: var(--teal-dark); background: rgba(218,221,207,.62); border: 1px solid rgba(98,104,80,.16); }
#profile .nav-pills .nav-link.active { color: #fff; background: var(--teal); border-color: var(--teal); }
#profile .form-check-input:checked { background-color: var(--teal); border-color: var(--teal); }
#profile .form-check-input:focus { border-color: var(--teal); box-shadow: 0 0 0 .25rem rgba(98,104,80,.2); }
[x-cloak] { display: none !important; }
@media (min-width: 992px) { .classSession-grid { grid-template-columns: repeat(3, 1fr); } .bottom-nav { left: 50%; width: 620px; transform: translateX(-50%); bottom: 16px; border-radius: 24px; } }