body { font-family: "Segoe UI", system-ui, sans-serif; }

.sidebar { width: 230px; min-height: 100vh; }
.sidebar .nav-link { border-radius: 0.375rem; margin: 0.125rem 0; padding: 0.5rem 0.75rem; }
.sidebar .nav-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

.table th { white-space: nowrap; }
.table td { vertical-align: middle; }

.calendar-table td {
    height: 96px;
    width: 14.28%;
    vertical-align: top;
    border: 1px solid #dee2e6;
    padding: 0.375rem;
    font-size: 0.85rem;
    background: #fff;
}
.calendar-table td.muted { background: #f8f9fa; }
.calendar-table td.today { outline: 2px solid var(--bs-primary); }
.calendar-event {
    display: block;
    background: var(--bs-primary);
    color: #fff;
    border-radius: 0.25rem;
    padding: 0.15rem 0.35rem;
    margin-top: 0.2rem;
    font-size: 0.75rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.calendar-event.cancelled { background: var(--bs-secondary); text-decoration: line-through; }
.calendar-event.pending { background: var(--bs-warning); color: #000; }

.stat-card { border-left: 4px solid var(--bs-primary); }

.hero {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #c026d3 100%);
    color: #fff;
    padding: 3.5rem 3rem;
    overflow: hidden;
}
.hero-badge {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.28);
    padding: 0.45rem 0.9rem;
    font-weight: 600;
}
.hero-title { line-height: 1.15; }
.hero-highlight {
    background: linear-gradient(90deg, #fde68a, #f9a8d4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero-lead { font-size: 1.05rem; color: rgba(255, 255, 255, 0.92); }
.hero-meta { font-size: 0.85rem; color: rgba(255, 255, 255, 0.85); }

.hero-preview {
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1rem;
    padding: 1.25rem;
    backdrop-filter: blur(6px);
}
.preview-stat {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.6rem;
    padding: 0.75rem;
    text-align: center;
}
.preview-stat-num { font-weight: 700; font-size: 1rem; }
.preview-stat-label { font-size: 0.72rem; color: rgba(255, 255, 255, 0.75); }
.preview-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.6rem;
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.6rem;
}

.feature-card { border: 1px solid #e9ecef; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.feature-card:hover { transform: translateY(-3px); box-shadow: 0 0.6rem 1.4rem rgba(76, 62, 201, 0.12); }
.feature-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #fff;
    border-radius: 0.65rem;
    background: linear-gradient(135deg, #4f46e5, #c026d3);
}

.price-card { border: 1px solid #e9ecef; position: relative; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.price-card:hover { transform: translateY(-3px); box-shadow: 0 0.6rem 1.4rem rgba(76, 62, 201, 0.12); }
.price-card-featured { box-shadow: 0 0.6rem 1.4rem rgba(76, 62, 201, 0.18); }
.price-badge { position: absolute; top: -0.65rem; left: 50%; transform: translateX(-50%); }
.price-tag { font-size: 1.6rem; font-weight: 800; color: #4f46e5; }

.price-cycle .price-yearly,
.price-cycle .unit-yearly,
.price-cycle .free-months { display: none; }
.price-cycle[data-cycle="yearly"] .price-monthly,
.price-cycle[data-cycle="yearly"] .unit-monthly { display: none; }
.price-cycle[data-cycle="yearly"] .price-yearly,
.price-cycle[data-cycle="yearly"] .unit-yearly { display: inline; }
.price-cycle[data-cycle="yearly"] .free-months { display: inline-block; }

.hero-cta {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #c026d3 100%);
    color: #fff;
    border: 0;
}

.compare-col-featured { background-color: rgba(79, 70, 229, 0.06); }
.compare-badge { vertical-align: middle; }
.compare-table th { border-bottom-width: 2px; }
.compare-table td, .compare-table th { text-align: center; }
.compare-table td:first-child, .compare-table th:first-child { text-align: left; }

.plan-option {
    display: block;
    position: relative;
    border: 1px solid #e9ecef;
    border-radius: 0.75rem;
    padding: 1rem;
    cursor: pointer;
    height: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.plan-option input[type="radio"] {
    position: absolute;
    opacity: 0;
}
.plan-option:hover { border-color: #b9c3f0; }
.plan-option-selected {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.15);
}
.plan-option-featured { border-top: 3px solid var(--bs-primary); }
.plan-badge {
    position: absolute;
    top: -0.7rem;
    right: 0.75rem;
    background: var(--bs-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
}
.plan-price { font-weight: 800; color: #4f46e5; font-size: 1.15rem; }

.pay-option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    padding: 0.6rem 0.8rem;
    cursor: pointer;
    font-size: 0.9rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pay-option:hover { border-color: #b9c3f0; }
.pay-option:has(input:checked) {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.15);
    color: var(--bs-primary);
    font-weight: 600;
}

.checkout-card { border: 0; overflow: hidden; }
.checkout-summary {
    background: linear-gradient(160deg, #4f46e5 0%, #7c3aed 55%, #c026d3 100%);
    color: #fff;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
}
.checkout-price { font-size: 2.4rem; font-weight: 800; line-height: 1; }
.checkout-summary ul i { color: #fff; }

.cycle-seg {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 3px;
}
.cycle-seg button {
    border: 0;
    background: transparent;
    padding: 0.3rem 1rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
}
.cycle-seg button.active { background: #fff; color: #4f46e5; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }

.plan-chip {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    border: 1px solid #e9ecef;
    border-radius: 0.75rem;
    padding: 0.65rem 0.85rem;
    cursor: pointer;
    height: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.plan-chip input { position: absolute; opacity: 0; }
.plan-chip:hover { border-color: #b9c3f0; }
.plan-chip:has(input:checked) {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.15);
}
.plan-chip-name { font-weight: 700; font-size: 0.95rem; }
.plan-chip-price { font-size: 0.8rem; color: #6b7280; }

.profile-cover {
    position: relative;
    height: 210px;
    background:
        radial-gradient(circle at 12% 30%, rgba(255, 255, 255, 0.18) 0 70px, transparent 72px),
        radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.14) 0 90px, transparent 92px),
        linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #c026d3 100%);
    overflow: hidden;
}
.profile-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: 55px;
}
.profile-avatar {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #fff;
    background: #fff;
    box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.2);
    margin-top: -70px;
}
.profile-avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #c026d3);
}
.profile-info h1 { font-size: 1.45rem; }
.profile-social {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eef0ff;
    color: #4f46e5;
    font-size: 1.05rem;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.profile-social:hover {
    background: linear-gradient(135deg, #4f46e5, #c026d3);
    color: #fff;
    transform: translateY(-2px);
}
@media (max-width: 575.98px) {
    .profile-avatar { width: 96px; height: 96px; margin-top: -52px; }
    .profile-info h1 { font-size: 1.2rem; }
}

.cal-grid { min-height: 220px; }
.cal-table th { font-size: 0.72rem; color: #6b7280; background: #f8f9fa; }
.cal-day { height: 40px; font-size: 0.85rem; cursor: default; user-select: none; }
.cal-available { color: #198754; font-weight: 600; cursor: pointer; background: #f3fbf6; }
.cal-available:hover { background: #d8f3e3; }
.cal-booked { color: #dc3545; background: #fdf0f0; position: relative; }
.cal-booked::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #dc3545;
}
.cal-past { color: #adb5bd; background: #f8f9fa; }
.cal-today { box-shadow: inset 0 0 0 2px var(--bs-primary); }
.cal-selected { box-shadow: inset 0 0 0 2px #198754; background: #d8f3e3; }

.gallery-tile { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.gallery-tile:hover img { transform: scale(1.06); }
.gallery-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.35rem 0.55rem;
    font-size: 0.75rem;
    color: #fff;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
}