/* Shared consumer page/component layouts. Palette and button geometry live in ybo-theme.css.
   Every page-specific selector is scoped to avoid affecting unrelated views. */

/* Store/SubscriptionDetail */
#mobileSubNav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background-color: var(--background);
    border-top: 2px solid var(--accent);
    box-shadow: 0 -4px 20px rgb(var(--shadow-color) / 0.25);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
#mobileSubNav .nav-price-row {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    gap: 10px;
    border-bottom: 1px solid var(--border);
}
#mobileSubNav .nav-price-row .price-tag {
    font-size: 16px;
    font-weight: 700;
    color: var(--link);
    white-space: nowrap;
    line-height: 1;
}
#mobileSubNav .nav-price-row .price-old {
    font-size: 12px;
    color: var(--foreground);
    opacity: 0.45;
    text-decoration: line-through;
    white-space: nowrap;
}
#mobileSubNav .nav-price-row .price-sub {
    font-size: 10px;
    color: var(--foreground);
    opacity: 0.5;
    white-space: nowrap;
}
#mobileSubNav .nav-cta-btn {
    white-space: nowrap;
    flex-shrink: 0;
}
#mobileSubNav .nav-cta-btn svg { width: 14px; height: 14px; }
#mobileSubNav .nav-links-row {
    display: flex;
    width: 100%;
}
#mobileSubNav .mobile-sub-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 5px 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--foreground);
    opacity: 0.7;
    text-decoration: none;
    transition: all 0.2s;
}
#mobileSubNav .mobile-sub-tab.active { color: var(--link); opacity: 1; }
#mobileSubNav .mobile-sub-tab svg { width: 16px; height: 16px; }
@media (min-width: 768px) {
    #mobileSubNav { display: none !important; }
}

/* Astro/Rectification */
.ybo-rectification .wizard-step {
        animation: yboRectificationIn 0.5s ease-out;
    }
    @keyframes yboRectificationIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .ybo-rectification .question-option {
        transition: all 0.2s ease;
    }
    .ybo-rectification .question-option:hover {
        transform: translateX(4px);
    }
    .ybo-rectification .question-option.selected {
        border-color: var(--link);
        background: var(--action-soft);
    }
    .ybo-rectification .event-card {
        animation: yboRectificationIn 0.3s ease-out;
    }

/* Cart/Gift */
/* intl-tel-input özelleştirmeleri */
        .ybo-gift-page .iti {
            width: 100%;
        }

        .ybo-gift-page .iti__tel-input, body:has(.ybo-gift-page) .iti--container .iti__tel-input {
            padding-left: 96px !important;
        }

        .ybo-gift-page .iti__country-container, body:has(.ybo-gift-page) .iti--container .iti__country-container {
            padding: 0;
        }

        .ybo-gift-page .iti__selected-country, body:has(.ybo-gift-page) .iti--container .iti__selected-country {
            background: transparent;
            border-radius: 0.75rem 0 0 0.75rem;
            padding: 0 0.5rem 0 1rem;
        }

        .ybo-gift-page .iti__selected-country:hover,
        body:has(.ybo-gift-page) .iti--container .iti__selected-country:hover,
        .ybo-gift-page .iti__selected-country:focus,
        body:has(.ybo-gift-page) .iti--container .iti__selected-country:focus {
            background: rgb(var(--foreground-rgb) / 0.05);
        }

        .ybo-gift-page .iti__arrow, body:has(.ybo-gift-page) .iti--container .iti__arrow {
            border-top-color: var(--foreground);
        }

        .ybo-gift-page .iti__arrow--up, body:has(.ybo-gift-page) .iti--container .iti__arrow--up {
            border-bottom-color: var(--foreground);
        }

        .ybo-gift-page .iti__dropdown-content, body:has(.ybo-gift-page) .iti--container .iti__dropdown-content {
            background: var(--surface) !important;
            border: 1px solid var(--border) !important;
            border-radius: 0.75rem;
            box-shadow: 0 10px 40px rgb(var(--shadow-color) / 0.5) !important;
            overflow: hidden;
        }

        .ybo-gift-page .iti__search-input, body:has(.ybo-gift-page) .iti--container .iti__search-input {
            background: var(--background) !important;
            border: 1px solid var(--border) !important;
            border-radius: 0.5rem;
            color: var(--foreground) !important;
            padding: 0.5rem 0.75rem;
            margin: 0.5rem;
            width: calc(100% - 1rem);
        }

        .ybo-gift-page .iti__search-input:focus, body:has(.ybo-gift-page) .iti--container .iti__search-input:focus {
            outline: none;
            border-color: var(--link) !important;
        }

        .ybo-gift-page .iti__search-input::placeholder, body:has(.ybo-gift-page) .iti--container .iti__search-input::placeholder {
            color: rgb(var(--foreground-rgb) / 0.4) !important;
        }

        .ybo-gift-page .iti__country-list, body:has(.ybo-gift-page) .iti--container .iti__country-list {
            background: var(--surface) !important;
            max-height: 250px;
        }

        .ybo-gift-page .iti__country, body:has(.ybo-gift-page) .iti--container .iti__country {
            padding: 0.625rem 1rem;
            color: var(--foreground) !important;
            background: var(--surface) !important;
        }

        .ybo-gift-page .iti__country:hover,
        body:has(.ybo-gift-page) .iti--container .iti__country:hover,
        .ybo-gift-page .iti__country--highlight,
        body:has(.ybo-gift-page) .iti--container .iti__country--highlight {
            background: var(--surface) !important;
        }

        .ybo-gift-page .iti__country-name, body:has(.ybo-gift-page) .iti--container .iti__country-name {
            color: var(--foreground) !important;
            margin-right: 0.5rem;
        }

        .ybo-gift-page .iti__dial-code, body:has(.ybo-gift-page) .iti--container .iti__dial-code {
            color: rgb(var(--foreground-rgb) / 0.6) !important;
        }

        .ybo-gift-page .iti__selected-dial-code, body:has(.ybo-gift-page) .iti--container .iti__selected-dial-code {
            color: var(--foreground);
            font-weight: 500;
        }

        .ybo-gift-page .iti__divider, body:has(.ybo-gift-page) .iti--container .iti__divider {
            border-bottom-color: rgb(var(--foreground-rgb) / 0.1) !important;
            background: transparent !important;
        }

        /* Flatpickr özelleştirmeleri */
        .flatpickr-calendar.ybo-gift-calendar {
            background: var(--surface) !important;
            border: 1px solid var(--border) !important;
            border-radius: 1rem !important;
            box-shadow: 0 10px 40px rgb(var(--shadow-color) / 0.5) !important;
        }

        .ybo-gift-calendar .flatpickr-months {
            background: var(--surface) !important;
            border-radius: 1rem 1rem 0 0;
        }

        .ybo-gift-calendar .flatpickr-month {
            background: var(--surface) !important;
            color: var(--foreground) !important;
        }

        .ybo-gift-calendar .flatpickr-current-month {
            color: var(--foreground) !important;
        }

        .ybo-gift-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
            background: var(--background) !important;
            color: var(--foreground) !important;
            border: 1px solid var(--border) !important;
            border-radius: 0.5rem;
        }

        .ybo-gift-calendar .flatpickr-current-month .flatpickr-monthDropdown-months option {
            background: var(--surface) !important;
            color: var(--foreground) !important;
        }

        .ybo-gift-calendar .flatpickr-current-month input.cur-year {
            color: var(--foreground) !important;
            background: transparent !important;
        }

        .ybo-gift-calendar .flatpickr-prev-month,
        .ybo-gift-calendar .flatpickr-next-month {
            fill: var(--foreground) !important;
        }

        .ybo-gift-calendar .flatpickr-prev-month:hover,
        .ybo-gift-calendar .flatpickr-next-month:hover {
            fill: var(--accent) !important;
        }

        .ybo-gift-calendar .flatpickr-weekdays {
            background: var(--surface) !important;
        }

        .ybo-gift-calendar .flatpickr-weekday {
            background: var(--surface) !important;
            color: rgb(var(--foreground-rgb) / 0.6) !important;
            font-weight: 600;
        }

        .ybo-gift-calendar .flatpickr-days {
            background: var(--surface) !important;
            border: none !important;
        }

        .ybo-gift-calendar .dayContainer {
            background: var(--surface) !important;
        }

        .ybo-gift-calendar .flatpickr-day {
            color: var(--foreground) !important;
            border-radius: 0.5rem !important;
            background: transparent !important;
        }

        .ybo-gift-calendar .flatpickr-day:hover {
            background: var(--surface) !important;
            border-color: transparent !important;
        }

        .ybo-gift-calendar .flatpickr-day.selected {
            background: var(--accent) !important;
            border-color: var(--link) !important;
            color: var(--action-on-primary) !important;
        }

        .ybo-gift-calendar .flatpickr-day.today {
            border-color: var(--link) !important;
        }

        .ybo-gift-calendar .flatpickr-day.flatpickr-disabled,
        .ybo-gift-calendar .flatpickr-day.prevMonthDay,
        .ybo-gift-calendar .flatpickr-day.nextMonthDay {
            color: rgb(var(--foreground-rgb) / 0.3) !important;
            background: transparent !important;
        }

        .ybo-gift-calendar .flatpickr-innerContainer {
            background: var(--surface) !important;
        }

        .ybo-gift-calendar .flatpickr-rContainer {
            background: var(--surface) !important;
        }

        .ybo-gift-page .phone-input-wrapper .iti {
            display: block;
        }

        /* Form validation uses the same semantic roles in both themes. */
        .ybo-gift-page .form-input.is-invalid {
            border-color: var(--error) !important;
            background-color: rgb(var(--error-rgb) / 0.05) !important;
        }

        .ybo-gift-page .form-input.is-invalid:focus {
            border-color: var(--error) !important;
            box-shadow: 0 0 0 3px rgb(var(--error-rgb) / 0.15) !important;
        }

        .ybo-gift-page .form-input.is-valid {
            border-color: var(--success) !important;
        }

        .ybo-gift-page .field-group.has-error .input-icon {
            color: var(--error) !important;
        }

        .ybo-gift-page .field-group.has-error label {
            color: var(--error) !important;
        }

        .ybo-gift-page .field-group.has-error .error-text {
            display: block !important;
        }

        .ybo-gift-page .field-group.has-error .help-text {
            display: none !important;
        }

        /* Telefon input için özel stil */
        .ybo-gift-page .phone-input-wrapper .iti .form-input.is-invalid {
            border-color: var(--error) !important;
        }

        /* Shake animasyonu */
        @keyframes yboGiftShake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
            20%, 40%, 60%, 80% { transform: translateX(4px); }
        }

        .ybo-gift-page .shake {
            animation: yboGiftShake 0.5s ease-in-out;
        }

/* Tools/Horoscope */
.horoscope-hero {
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--accent) 10%, var(--background)) 0%,
            var(--background) 50%,
            color-mix(in srgb, var(--accent-light) 8%, var(--background)) 100%
        );
    }
    .horoscope-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at top, color-mix(in srgb, var(--accent) 15%, transparent), transparent);
    }
    .horoscope-hero .sign-card {
        background: var(--card-bg);
        border: 1px solid var(--border);
        transition: all 0.2s ease;
    }
    .horoscope-hero .sign-card:hover {
        border-color: color-mix(in srgb, var(--accent) 50%, transparent);
        transform: scale(1.02);
    }
    .horoscope-hero .sign-card.active {
        background: color-mix(in srgb, var(--accent) 20%, transparent);
        border-color: var(--link);
        transform: scale(1.05);
    }
    .horoscope-hero .sign-card.active span:last-child {
        color: var(--link);
    }
    .horoscope-hero .result-card {
        background: var(--card-bg);
        border: 1px solid var(--border);
    }
    .horoscope-hero .result-header {
        background: linear-gradient(to right,
            color-mix(in srgb, var(--accent) 10%, transparent),
            color-mix(in srgb, var(--accent-light) 10%, transparent)
        );
    }


    @keyframes yboHoroscopeToastIn {
        from { opacity: 0; transform: translate(-50%, 20px); }
        to { opacity: 1; transform: translate(-50%, 0); }
    }
    @keyframes yboHoroscopeToastOut {
        from { opacity: 1; transform: translate(-50%, 0); }
        to { opacity: 0; transform: translate(-50%, 20px); }
    }

/* Tools/Index */
.ybo-tools-index .tools-hero {
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--accent) 10%, var(--background)) 0%,
            var(--background) 50%,
            color-mix(in srgb, var(--accent-light) 8%, var(--background)) 100%
        );
    }
    .ybo-tools-index .tools-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at top, color-mix(in srgb, var(--accent) 15%, transparent), transparent);
    }
    .ybo-tools-index .tool-card {
        background: var(--card-bg);
        border: 1px solid var(--border);
        transition: all 0.3s ease;
    }
    .ybo-tools-index .tool-card:hover {
        border-color: var(--link);
        transform: translateY(-4px);
        box-shadow: 0 12px 40px -12px color-mix(in srgb, var(--accent) 30%, transparent);
    }
    .ybo-tools-index .floating-orb {
        background: color-mix(in srgb, var(--accent) 12%, transparent);
        filter: blur(80px);
        animation: yboToolsFloat 6s ease-in-out infinite;
    }
    .ybo-tools-index .floating-orb-2 {
        background: color-mix(in srgb, var(--accent-light) 10%, transparent);
        filter: blur(100px);
        animation: yboToolsFloat 8s ease-in-out infinite reverse;
    }
    @keyframes yboToolsFloat {
        0%, 100% { transform: translateY(0) scale(1); }
        50% { transform: translateY(-20px) scale(1.05); }
    }
    .ybo-tools-index .badge {
        background: color-mix(in srgb, var(--foreground) 8%, transparent);
        border: 1px solid var(--border);
        color: var(--foreground);
    }
    .ybo-tools-index .badge-open {
        background: color-mix(in srgb, var(--accent) 15%, transparent);
        border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
        color: var(--link);
    }
    .ybo-tools-index .badge-member {
        background: color-mix(in srgb, var(--foreground) 10%, transparent);
        border: 1px solid var(--border);
        color: var(--foreground);
    }
    .ybo-tools-index .badge-info {
        background: color-mix(in srgb, var(--accent-light) 15%, transparent);
        border: 1px solid color-mix(in srgb, var(--accent-light) 40%, transparent);
        color: var(--link);
    }
    .ybo-tools-index .icon-box {
        background: color-mix(in srgb, var(--accent) 12%, transparent);
    }
    .ybo-tools-index .icon-box-amber { background: color-mix(in srgb, var(--accent) 15%, transparent); }
    .ybo-tools-index .icon-box-indigo { background: color-mix(in srgb, var(--accent) 12%, transparent); }
    .ybo-tools-index .icon-box-rose { background: color-mix(in srgb, var(--accent-light) 15%, transparent); }
    .ybo-tools-index .icon-box-emerald { background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* Tools/Chakra */
.chakra-hero {
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--accent) 8%, var(--background)) 0%,
            var(--background) 50%,
            color-mix(in srgb, var(--accent-light) 6%, var(--background)) 100%
        );
    }
    .chakra-hero .chakra-card {
        background: var(--card-bg);
        border: 1px solid var(--border);
    }
    .chakra-hero .chakra-header {
        background: linear-gradient(to right,
            color-mix(in srgb, var(--accent) 12%, transparent),
            color-mix(in srgb, var(--accent-light) 12%, transparent)
        );
    }
    .chakra-hero .chakra-badge {
        transition: all 0.2s ease;
    }
    .chakra-hero .progress-bar {
        background: var(--background);
    }
    .chakra-hero .progress-fill {
        background: var(--accent);
    }
    .chakra-hero .option-label {
        background: var(--background);
        border: 1px solid var(--border);
        transition: all 0.2s ease;
        cursor: pointer;
    }
    .chakra-hero .option-label:hover {
        border-color: var(--link);
    }
    .chakra-hero .option-label.selected {
        background: color-mix(in srgb, var(--accent) 15%, transparent);
        border-color: var(--link);
    }
    .chakra-hero .option-circle {
        border: 2px solid color-mix(in srgb, var(--foreground) 40%, transparent);
        transition: all 0.2s ease;
    }
    .chakra-hero .option-label.selected .option-circle {
        border-color: var(--link);
        background: var(--accent);
        color: var(--action-on-primary);
    }
    .chakra-hero .score-bar {
        background: var(--background);
    }
    .chakra-hero .advice-box {
        background: color-mix(in srgb, var(--background) 50%, transparent);
    }
    .chakra-hero .toast-warning {
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    color: var(--warning);
    }
    .chakra-hero .toast-error {
        background: color-mix(in srgb, var(--error) 15%, var(--card-bg));
        border: 1px solid color-mix(in srgb, var(--error) 30%, transparent);
        color: var(--error);
    }

/* Tools/Dream */
.dream-hero {
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--accent) 10%, var(--background)) 0%,
            var(--background) 50%,
            color-mix(in srgb, var(--accent-light) 8%, var(--background)) 100%
        );
    }
    .dream-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at top, color-mix(in srgb, var(--accent) 10%, transparent), transparent);
    }
    .dream-hero .dream-card {
        background: var(--card-bg);
        border: 1px solid var(--border);
    }
    .dream-hero .dream-header {
        background: linear-gradient(to right,
            color-mix(in srgb, var(--accent) 10%, transparent),
            color-mix(in srgb, var(--accent-light) 10%, transparent)
        );
    }
    .dream-hero .dream-textarea {
        background: color-mix(in srgb, var(--background) 50%, transparent);
        border: 1px solid var(--border);
        color: var(--foreground);
    }
    .dream-hero .dream-textarea:focus {
        border-color: var(--link);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
    }
    .dream-hero .dream-textarea::placeholder {
        color: color-mix(in srgb, var(--foreground) 40%, transparent);
    }
    .dream-hero .quota-badge {
        background: color-mix(in srgb, var(--accent) 15%, transparent);
        border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
        color: var(--link);
    }
    .dream-hero .warning-box {
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    }
    .dream-hero .warning-box span {
        color: var(--warning);
    }
    .dream-hero .tip-card {
        background: var(--card-bg);
        border: 1px solid var(--border);
    }
    .dream-hero .result-area {
        background: color-mix(in srgb, var(--accent) 5%, transparent);
    }
    .dream-hero .toast-error {
        background: color-mix(in srgb, var(--error) 15%, var(--card-bg));
        border: 1px solid color-mix(in srgb, var(--error) 30%, transparent);
        color: var(--error);
    }
    .dream-hero .toast-warning {
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    color: var(--warning);
    }
    .dream-hero .toast-success {
        background: color-mix(in srgb, var(--success) 15%, var(--card-bg));
        border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
        color: var(--success);
    }
    .dream-hero .animate-fade-in {
        animation: yboDreamFadeIn 0.3s ease-out;
    }
    @keyframes yboDreamFadeIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .dream-hero .star {
        position: absolute;
        width: 4px;
        height: 4px;
        background: var(--foreground);
        border-radius: 50%;
        opacity: 0.6;
        animation: yboDreamTwinkle 2s ease-in-out infinite;
    }
    @keyframes yboDreamTwinkle {
        0%, 100% { opacity: 0.3; transform: scale(1); }
        50% { opacity: 0.8; transform: scale(1.2); }
    }

/* Tools/Numerology */
.numerology-hero {
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--accent) 8%, var(--background)) 0%,
            var(--background) 50%,
            color-mix(in srgb, var(--accent-light) 6%, var(--background)) 100%
        );
    }
    .numerology-hero .numerology-card {
        background: var(--card-bg);
        border: 1px solid var(--border);
    }
    .numerology-hero .numerology-header {
        background: linear-gradient(to right,
            color-mix(in srgb, var(--accent) 12%, transparent),
            color-mix(in srgb, var(--accent-light) 12%, transparent)
        );
    }
    .numerology-hero .date-input {
        background: var(--background);
        border: 1px solid var(--border);
        color: var(--foreground);
    }
    .numerology-hero .date-input:focus {
        border-color: var(--link);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
        outline: none;
    }
    .numerology-hero .info-box {
        background: color-mix(in srgb, var(--background) 50%, transparent);
    }
    .numerology-hero .life-path-number {
    color: var(--link);
    }
    .numerology-hero .master-badge {
        background: color-mix(in srgb, var(--accent) 15%, transparent);
        border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
        color: var(--link);
    }
    .numerology-hero .zodiac-divider {
        background: var(--border);
    }
    .numerology-hero .number-grid-item {
        background: var(--background);
        transition: all 0.2s ease;
    }
    .numerology-hero .number-grid-item:hover {
        transform: scale(1.05);
    }
    .numerology-hero .number-grid-item.master {
        background: color-mix(in srgb, var(--accent) 10%, transparent);
        border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    }
    .numerology-hero .number-grid-item.master span:first-child {
        color: var(--link);
    }
    .numerology-hero .number-grid-item.master span:last-child {
        color: color-mix(in srgb, var(--accent) 70%, transparent);
    }
    .numerology-hero .toast-warning {
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    color: var(--warning);
    }
    .numerology-hero .toast-error {
        background: color-mix(in srgb, var(--error) 15%, var(--card-bg));
        border: 1px solid color-mix(in srgb, var(--error) 30%, transparent);
        color: var(--error);
    }

/* Home/Discover */
    .ybo-discover .discover-tab.active span {
    background: var(--action-soft-hover);
    color: var(--link);
    }

    /* Card standardization */
    .ybo-discover .discover-card-category {
        height: 1.25rem; /* 20px */
        margin-bottom: 0.25rem;
    }
    .ybo-discover .discover-card-title {
        height: 3rem; /* 48px - 2 satır için */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .ybo-discover .discover-card-subtitle {
        height: 2.5rem; /* 40px - 2 satır için */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

/* Home/Classes */
[id^="egitim-secenekleri-"] { scroll-margin-top: 7rem; }
#mobileNavTabs {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background-color: var(--background);
    border-top: 2px solid var(--accent);
    box-shadow: 0 -4px 20px rgb(var(--shadow-color) / 0.25);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
#mobileNavTabs .nav-price-row {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    gap: 10px;
    border-bottom: 1px solid var(--border);
}
#mobileNavTabs .nav-price-row .price-tag {
    font-size: 16px;
    font-weight: 700;
    color: var(--link);
    white-space: nowrap;
    line-height: 1;
}
#mobileNavTabs .nav-price-row .price-old {
    font-size: 12px;
    color: var(--foreground);
    opacity: 0.45;
    text-decoration: line-through;
    white-space: nowrap;
}
#mobileNavTabs .nav-cta-btn {
    white-space: nowrap;
    flex-shrink: 0;
}
#mobileNavTabs .nav-cta-btn svg { width: 14px; height: 14px; }
#mobileNavTabs .nav-links-row {
    display: flex;
    width: 100%;
}
#mobileNavTabs .mobile-nav-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 5px 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--foreground);
    opacity: 0.7;
    text-decoration: none;
    transition: all 0.2s;
}
#mobileNavTabs .mobile-nav-tab.active { color: var(--link); opacity: 1; }
#mobileNavTabs .mobile-nav-tab svg { width: 16px; height: 16px; }
@media (min-width: 768px) {
    #mobileNavTabs { display: none !important; }
}

/* Home/Shipping */
.legal-content p { margin-bottom: 1rem; color: rgb(var(--foreground-rgb) / 0.8); line-height: 1.75; }

/* Home/Agrement */
.legal-content .edit { color: rgb(var(--foreground-rgb) / 0.8); }
.legal-content .edit a { color: var(--link); }

/* Shared/Components/TrainerCarousel/Default */
.ybo-trainer-carousel .trainer-image-panel {
        width: 100%;
        height: 350px;
    }
    @media (min-width: 768px) {
        .ybo-trainer-carousel .trainer-image-panel {
            width: 35%;
            height: 480px;
        }
    }

/* Shared/Components/ClassList/Carousel */
.ybo-class-carousel .hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.ybo-class-carousel .hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Card standardization */
.ybo-class-carousel .class-card-title {
    height: 3.5rem; /* 56px - 2 satır için */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ybo-class-carousel .class-card-subtitle {
    height: 2.5rem; /* 40px - 2 satır için */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Shared/Components/ClassList/Grid */
/* Card standardization */
.ybo-class-grid .class-card-title {
    height: 3.5rem; /* 56px - 2 satır için */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ybo-class-grid .class-card-subtitle {
    height: 2.5rem; /* 40px - 2 satır için */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Shared/Components/Newsletter/LeadMagnet */
.ybo-newsletter-leadmagnet {

    background: var(--surface);
    border-radius: 16px;
    padding: 32px;
    max-width: 420px;
    margin: 0 auto;
}

/* Compact Mode - Footer için */
.ybo-newsletter-leadmagnet.compact-mode {
    background: transparent;
    padding: 0;
    max-width: 480px;
}

.ybo-newsletter-leadmagnet.compact-mode .form-group {
    margin-bottom: 0;
}

.ybo-newsletter-leadmagnet.compact-mode .newsletter-input {
    background: var(--background);
    border: 1px solid var(--border-strong);
    min-width: 280px;
}

.ybo-newsletter-leadmagnet.compact-mode .newsletter-input:focus {
    border-color: var(--focus-ring);
    background: var(--background);
}

.ybo-newsletter-leadmagnet.compact-mode .newsletter-btn {
    white-space: nowrap;
}

.ybo-newsletter-leadmagnet.compact-mode .newsletter-message {
    margin-top: 12px;
}

@media (max-width: 640px) {
    .ybo-newsletter-leadmagnet.compact-mode .form-group {
        flex-direction: column;
    }
    .ybo-newsletter-leadmagnet.compact-mode .newsletter-input {
        min-width: 100%;
    }
}

.ybo-newsletter-leadmagnet .newsletter-header {
    text-align: center;
    margin-bottom: 24px;
}

.ybo-newsletter-leadmagnet .newsletter-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
}

.ybo-newsletter-leadmagnet .newsletter-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--foreground);
    margin: 0 0 8px 0;
}

.ybo-newsletter-leadmagnet .newsletter-subtitle {
    font-size: 15px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

.ybo-newsletter-leadmagnet .form-group {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.ybo-newsletter-leadmagnet .newsletter-input {
    flex: 1;
    padding: 14px 16px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--background);
    color: var(--foreground);
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s;
}

.ybo-newsletter-leadmagnet .newsletter-input:focus {
    border-color: var(--focus-ring);
}

.ybo-newsletter-leadmagnet .newsletter-input::placeholder {
    color: var(--text-muted);
}

.ybo-newsletter-leadmagnet .newsletter-btn-outline {
    margin-top: 16px;
}

.ybo-newsletter-leadmagnet .spinner {
    animation: yboNewsletterSpin 1s linear infinite;
}

@keyframes yboNewsletterSpin {
    100% { transform: rotate(360deg); }
}

.ybo-newsletter-leadmagnet .newsletter-message {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    margin-top: 12px;
}

.ybo-newsletter-leadmagnet .newsletter-message.success {
    background: rgb(var(--success-rgb) / 0.1);
    color: var(--success);
    border: 1px solid rgb(var(--success-rgb) / 0.2);
}

.ybo-newsletter-leadmagnet .newsletter-message.error {
    background: rgb(var(--error-rgb) / 0.1);
    color: var(--error);
    border: 1px solid rgb(var(--error-rgb) / 0.2);
}

.ybo-newsletter-leadmagnet .newsletter-privacy {
    text-align: center;
    margin: 16px 0 0 0;
    color: var(--text-muted);
    font-size: 12px;
}

/* Phone Step Styles */
.ybo-newsletter-leadmagnet .phone-input-wrapper {
    display: flex;
    align-items: center;
    background: var(--background);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    overflow: hidden;
    flex: 1;
}

.ybo-newsletter-leadmagnet .country-code {
    padding: 14px 12px;
    color: var(--text-muted);
    background: var(--surface-muted);
    font-size: 15px;
    border-right: 1px solid var(--border);
}

.ybo-newsletter-leadmagnet .phone-input {
    border: none !important;
    border-radius: 0 !important;
}

.ybo-newsletter-leadmagnet .channel-preferences {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 20px;
}

.ybo-newsletter-leadmagnet .channel-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: all 0.2s;
}

.ybo-newsletter-leadmagnet .channel-option:has(input:checked) {
    border-color: var(--action-primary);
    background: rgb(var(--action-primary-rgb) / 0.1);
}

.ybo-newsletter-leadmagnet .channel-option input {
    display: none;
}

.ybo-newsletter-leadmagnet .channel-icon {
    font-size: 18px;
}

.ybo-newsletter-leadmagnet .channel-label {
    font-size: 14px;
    color: var(--foreground);
}

.ybo-newsletter-leadmagnet .form-actions {
    display: flex;
    gap: 12px;
}

.ybo-newsletter-leadmagnet .form-actions .newsletter-btn {
    flex: 1;
}

/* Shared/Components/Newsletter/PhoneOnly */
.ybo-newsletter-phone {

    background: var(--surface);
    border-radius: 16px;
    padding: 32px;
    max-width: 400px;
    margin: 0 auto;
}

.ybo-newsletter-phone .newsletter-header {
    text-align: center;
    margin-bottom: 24px;
}

.ybo-newsletter-phone .newsletter-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
}

.ybo-newsletter-phone .newsletter-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--foreground);
    margin: 0 0 8px 0;
}

.ybo-newsletter-phone .newsletter-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

.ybo-newsletter-phone .form-group {
    margin-bottom: 16px;
}

.ybo-newsletter-phone .phone-input-wrapper {
    display: flex;
    align-items: center;
    background: var(--background);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    overflow: hidden;
}

.ybo-newsletter-phone .country-code {
    padding: 14px 12px;
    color: var(--text-muted);
    background: var(--surface-muted);
    font-size: 15px;
    border-right: 1px solid var(--border);
}

.ybo-newsletter-phone .newsletter-input {
    flex: 1;
    padding: 14px 16px;
    border: none;
    background: transparent;
    color: var(--foreground);
    font-size: 15px;
    outline: none;
}

.ybo-newsletter-phone .newsletter-input::placeholder {
    color: var(--text-muted);
}

.ybo-newsletter-phone .channel-preferences {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 20px;
}

.ybo-newsletter-phone .channel-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: all 0.2s;
}

.ybo-newsletter-phone .channel-option:has(input:checked) {
    border-color: var(--action-primary);
    background: rgb(var(--action-primary-rgb) / 0.1);
}

.ybo-newsletter-phone .channel-option input {
    display: none;
}

.ybo-newsletter-phone .channel-icon {
    font-size: 18px;
}

.ybo-newsletter-phone .channel-label {
    font-size: 14px;
    color: var(--foreground);
}

.ybo-newsletter-phone .newsletter-btn {
    width: 100%;
}

.ybo-newsletter-phone .newsletter-btn-outline {
    margin-top: 16px;
}

.ybo-newsletter-phone .spinner {
    animation: yboNewsletterSpin 1s linear infinite;
}

.ybo-newsletter-phone .newsletter-message {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    margin-top: 12px;
}

.ybo-newsletter-phone .newsletter-message.success {
    background: rgb(var(--success-rgb) / 0.1);
    color: var(--success);
    border: 1px solid rgb(var(--success-rgb) / 0.2);
}

.ybo-newsletter-phone .newsletter-message.error {
    background: rgb(var(--error-rgb) / 0.1);
    color: var(--error);
    border: 1px solid rgb(var(--error-rgb) / 0.2);
}

.ybo-newsletter-phone .newsletter-privacy {
    text-align: center;
    margin: 16px 0 0 0;
    color: var(--text-muted);
    font-size: 12px;
}

/* Shared/Components/Newsletter/Standard */
.ybo-newsletter-standard {

    background: var(--surface);
    border-radius: 16px;
    padding: 32px;
    max-width: 520px;
    margin: 0 auto;
}

/* Screen reader only - accessibility */
.ybo-newsletter-standard .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Compact Mode - Footer için */
.ybo-newsletter-standard.compact-mode {
    background: transparent;
    padding: 0;
    max-width: 100%;
}

.ybo-newsletter-standard.compact-mode .form-group {
    margin-bottom: 0;
}

.ybo-newsletter-standard.compact-mode .newsletter-input {
    background: var(--background);
    border: 1px solid var(--border-strong);
    min-width: 280px;
}

.ybo-newsletter-standard.compact-mode .newsletter-input:focus {
    border-color: var(--focus-ring);
    background: var(--background);
}

.ybo-newsletter-standard.compact-mode .newsletter-privacy {
    margin-top: 12px;
}

@media (max-width: 768px) {
    .ybo-newsletter-standard.compact-mode .form-group {
        flex-direction: column;
    }
    .ybo-newsletter-standard.compact-mode .newsletter-input {
        min-width: 100%;
    }
}

.ybo-newsletter-standard .newsletter-header {
    text-align: center;
    margin-bottom: 24px;
}

.ybo-newsletter-standard .newsletter-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
}

.ybo-newsletter-standard .newsletter-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--foreground);
    margin: 0 0 8px 0;
}

.ybo-newsletter-standard .newsletter-subtitle {
    font-size: 15px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.6;
}

/* Form */
.ybo-newsletter-standard .form-group {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.ybo-newsletter-standard .newsletter-input {
    flex: 1;
    padding: 14px 16px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--background);
    color: var(--foreground);
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}

.ybo-newsletter-standard .newsletter-input:focus {
    border-color: var(--focus-ring);
    background: var(--background);
}

.ybo-newsletter-standard .newsletter-input::placeholder {
    color: var(--text-muted);
}

.ybo-newsletter-standard .newsletter-btn {
    white-space: nowrap;
}

.ybo-newsletter-standard .newsletter-btn-outline {
    margin-top: 16px;
}

.ybo-newsletter-standard .spinner {
    animation: yboNewsletterSpin 1s linear infinite;
}

.ybo-newsletter-standard .newsletter-message {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    margin-top: 12px;
}

.ybo-newsletter-standard .newsletter-message.success {
    background: rgb(var(--success-rgb) / 0.1);
    color: var(--success);
    border: 1px solid rgb(var(--success-rgb) / 0.2);
}

.ybo-newsletter-standard .newsletter-message.error {
    background: rgb(var(--error-rgb) / 0.1);
    color: var(--error);
    border: 1px solid rgb(var(--error-rgb) / 0.2);
}

.ybo-newsletter-standard .newsletter-privacy {
    text-align: center;
    margin: 16px 0 0 0;
    color: var(--text-muted);
    font-size: 12px;
}

/* Shared/Components/PushNotificationToggle/Default */
/* Bell animasyonu */
    .bell-animated {
        animation: bell-ring 0.5s ease-in-out;
    }

    @keyframes bell-ring {
        0%, 100% { transform: rotate(0); }
        25% { transform: rotate(10deg); }
        50% { transform: rotate(-10deg); }
        75% { transform: rotate(5deg); }
    }

    /* Subscribed durumu */
    [data-push-toggle].subscribed {
    --button-background: var(--success-bg);
    --button-foreground: var(--success);
    --button-border: var(--success-border);
    --button-hover-background: rgb(var(--success-rgb) / 0.16);
    --button-hover-border: var(--success);
    }

/* Shared/Partial/_whatsappHelp */
.whatsapp-help{position:fixed;right:1.5rem;bottom:1.5rem;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:.75rem}
        .whatsapp-help__button{display:flex;align-items:center;justify-content:center;width:3.75rem;height:3.75rem;border-radius:9999px;box-shadow:0 10px 25px rgb(var(--provider-whatsapp-rgb) / .35);transition:transform .2s ease,box-shadow .2s ease;--button-background: var(--provider-whatsapp);--button-foreground: var(--provider-on-whatsapp);--button-border: transparent;--button-hover-background: var(--provider-whatsapp-hover);--button-hover-border: transparent}
        .whatsapp-help__button:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgb(var(--provider-whatsapp-rgb) / .45)}
        .whatsapp-help__button:focus-visible,.whatsapp-help__close:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
        .whatsapp-help__button svg{width:2rem;height:2rem}
        .whatsapp-help__bubble{position:relative;max-width:17rem;padding:1rem 2.5rem 1rem 1rem;border:1px solid var(--border);border-radius:1rem;background:var(--background);color:var(--foreground);box-shadow:0 12px 30px rgb(var(--shadow-color) / .18)}
        .whatsapp-help__bubble::after{position:absolute;right:1.25rem;bottom:-.45rem;width:.9rem;height:.9rem;content:"";background:var(--background);border-right:1px solid var(--border);border-bottom:1px solid var(--border);transform:rotate(45deg)}
        .whatsapp-help__title,.whatsapp-help__text{margin:0}.whatsapp-help__title{font-weight:600}.whatsapp-help__text{margin-top:.15rem;font-size:.875rem;opacity:.8}
        .whatsapp-help__close{position:absolute;top:.45rem;right:.5rem;border:0;background:transparent;color:var(--foreground);font-size:1.4rem;line-height:1;cursor:pointer;opacity:.7}.whatsapp-help__close:hover{opacity:1}
        .whatsapp-help__visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
        @media (max-width:640px){.whatsapp-help{right:1rem;bottom:1rem}.whatsapp-help__bubble{max-width:15rem}.whatsapp-help__button{width:3.5rem;height:3.5rem;--button-background: var(--provider-whatsapp);--button-foreground: var(--provider-on-whatsapp);--button-border: transparent;--button-hover-background: var(--provider-whatsapp-hover);--button-hover-border: transparent}}

/* Shared/Partial/_LiveKitConference */
/* ========================================
   CSS Variables - Theme
   ======================================== */
.lk-app {
    --lk-primary: var(--action-primary);
    --lk-primary-light: var(--link);
    --lk-primary-dark: var(--action-primary-hover);
    --lk-success: var(--success);
    --lk-success-light: var(--success);
    --lk-danger: var(--error);
    --lk-danger-light: var(--error);
    --lk-warning: var(--warning);

    --lk-bg-primary: var(--background);
    --lk-bg-secondary: var(--surface);
    --lk-bg-tertiary: var(--surface-muted);
    --lk-bg-card: var(--surface);
    --lk-bg-glass: var(--action-soft);

    --lk-text-primary: var(--foreground);
    --lk-text-secondary: var(--text-muted);
    --lk-text-muted: var(--text-muted);

    --lk-border: var(--border);
    --lk-border-light: var(--border-strong);

    --lk-shadow-sm: 0 2px 8px rgb(var(--shadow-color) / 0.2);
    --lk-shadow-md: 0 4px 16px rgb(var(--shadow-color) / 0.3);
    --lk-shadow-lg: 0 8px 32px rgb(var(--shadow-color) / 0.4);
    --lk-shadow-glow: 0 0 40px rgb(var(--action-primary-rgb) / 0.15);

    --lk-radius-sm: 8px;
    --lk-radius-md: 12px;
    --lk-radius-lg: 16px;
    --lk-radius-xl: 24px;
    --lk-radius-full: 9999px;

    --lk-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --lk-transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   Base Styles
   ======================================== */
.lk-app {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100svh;
    background: var(--lk-bg-primary);
    font-family: var(--font-bricolage);
    color: var(--lk-text-primary);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

.lk-app .lk-screen {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
}

.lk-app .hidden {
    display: none !important;
}

/* ========================================
   Pre-Join Screen
   ======================================== */
.lk-app .lk-prejoin {
    background: var(--lk-bg-primary);
}

.lk-app .lk-prejoin-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.lk-app .lk-bg-gradient {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgb(var(--action-primary-rgb) / 0.15) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 20%, rgb(var(--success-rgb) / 0.1) 0%, transparent 40%);
    animation: gradientRotate 20s linear infinite;
}

@keyframes gradientRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.lk-app .lk-bg-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgb(var(--foreground-rgb) / 0.03) 1px, transparent 1px);
    background-size: 32px 32px;
}

.lk-app .lk-prejoin-container {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    padding-top: env(safe-area-inset-top, 1rem);
    padding-bottom: env(safe-area-inset-bottom, 1rem);
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
}

/* Header */
.lk-app .lk-prejoin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    margin-bottom: 1rem;
}

.lk-app .lk-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.lk-app .lk-brand-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--lk-primary) 0%, var(--lk-primary-dark) 100%);
    border-radius: var(--lk-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--action-on-primary);
}

.lk-app .lk-brand-icon svg {
    width: 20px;
    height: 20px;
}

.lk-app .lk-brand-text {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.lk-app .lk-host-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: var(--warning-bg);
    border-radius: var(--lk-radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--warning);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border: 1px solid var(--warning-border);
}

/* Video Preview */
.lk-app .lk-preview-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
}

.lk-app .lk-preview-container {
    position: relative;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 4/3;
    background: var(--lk-bg-secondary);
    border-radius: var(--lk-radius-xl);
    overflow: hidden;
    border: 1px solid var(--lk-border);
    box-shadow: var(--lk-shadow-lg), var(--lk-shadow-glow);
}

.lk-app .lk-preview-container video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
}

.lk-app .lk-preview-avatar {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: var(--lk-bg-secondary);
    color: var(--lk-text-muted);
}

.lk-app .lk-preview-avatar.hidden {
    display: none;
}

.lk-app .lk-avatar-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--lk-bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--lk-border-light);
}

.lk-app .lk-avatar-circle svg {
    width: 40px;
    height: 40px;
}

.lk-app .lk-preview-avatar span {
    font-size: 0.875rem;
}

.lk-app .lk-preview-status {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    gap: 0.5rem;
}

.lk-app .lk-status-item {
    width: 32px;
    height: 32px;
    border-radius: var(--lk-radius-sm);
    background: var(--error-solid);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--on-error);
    transition: var(--lk-transition);
}

.lk-app .lk-status-item.active {
    background: var(--success-solid);
    color: var(--on-success);
}

/* Device Controls */
.lk-app .lk-device-controls {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 1rem 0;
}

.lk-app .lk-device-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100px;
}

.lk-app .lk-device-btn.active {
    --button-background: var(--success-bg);
    --button-border: var(--success-border);
    --button-hover-background: var(--success-bg);
    --button-hover-border: var(--success);
}

.lk-app .lk-device-btn:not(.active) {
    --button-background: var(--error-bg);
    --button-border: var(--error-border);
    --button-hover-background: var(--error-bg);
    --button-hover-border: var(--error);
}

.lk-app .lk-btn-icon {
    width: 28px;
    height: 28px;
}

.lk-app .lk-btn-icon svg {
    width: 100%;
    height: 100%;
}

.lk-app .lk-device-btn.active .icon-off,
.lk-app .lk-device-btn:not(.active) .icon-on {
    display: none;
}

.lk-app .lk-device-btn.active .icon-on,
.lk-app .lk-device-btn:not(.active) .icon-off {
    display: block;
}

.lk-app .lk-btn-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--lk-text-secondary);
}

/* Join Button */
.lk-app .lk-join-btn {
    width: 100%;
    margin-top: 0.5rem;
}

.lk-app .lk-join-icon {
    width: 20px;
    height: 20px;
    transition: transform var(--lk-transition);
}

.lk-app .lk-join-btn:hover .lk-join-icon {
    transform: translateX(4px);
}

/* Info Text */
.lk-app .lk-info-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 0.75rem;
    color: var(--lk-text-muted);
    text-align: center;
}

/* ========================================
   Room Screen
   ======================================== */
.lk-app .lk-room {
    background: var(--lk-bg-primary);
}

.lk-app .lk-room-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    padding-top: calc(env(safe-area-inset-top, 0.75rem) + 0.75rem);
    background: var(--lk-bg-secondary);
    border-bottom: 1px solid var(--lk-border);
}

.lk-app .lk-room-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.lk-app .lk-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: var(--error-solid);
    border-radius: var(--lk-radius-full);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--on-error);
}

.lk-app .lk-live-dot {
    width: 6px;
    height: 6px;
    background: var(--on-error);
    border-radius: 50%;
    animation: livePulse 1.5s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.lk-app .lk-room-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--lk-text-secondary);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lk-app .lk-room-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.lk-app .lk-duration {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--lk-text-secondary);
    font-variant-numeric: tabular-nums;
}

.lk-app .lk-count {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: var(--lk-bg-glass);
    border-radius: var(--lk-radius-full);
    font-size: 0.75rem;
    color: var(--lk-text-secondary);
}

/* Video Stage */
.lk-app .lk-stage {
    flex: 1;
    display: grid;
    gap: 0.5rem;
    padding: 0.5rem;
    overflow: auto;
    grid-template-columns: 1fr;
}

.lk-app .lk-stage:has(.lk-tile:nth-child(2)) {
    grid-template-columns: repeat(2, 1fr);
}

.lk-app .lk-stage:has(.lk-tile:nth-child(3)) {
    grid-template-columns: repeat(2, 1fr);
}

.lk-app .lk-stage:has(.lk-tile:nth-child(5)) {
    grid-template-columns: repeat(2, 1fr);
}

.lk-app .lk-tile {
    position: relative;
    background: var(--lk-bg-secondary);
    border-radius: var(--lk-radius-md);
    overflow: hidden;
    aspect-ratio: 16/9;
    min-height: 120px;
}

.lk-app .lk-tile video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lk-app .lk-tile.local video {
    transform: scaleX(-1);
}

.lk-app .lk-tile-avatar {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--lk-bg-secondary);
}

.lk-app .lk-tile-avatar .lk-avatar-initial {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--lk-primary) 0%, var(--lk-primary-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--action-on-primary);
}

.lk-app .lk-tile-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.5rem;
    background: linear-gradient(transparent, var(--media-backdrop));
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--media-on-overlay);
}

.lk-app .lk-tile-name {
    font-size: 0.75rem;
    font-weight: 500;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lk-app .lk-tile-muted {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lk-danger);
}

.lk-app .lk-tile-muted svg {
    width: 14px;
    height: 14px;
}

.lk-app .lk-speaking-ring {
    position: absolute;
    inset: 0;
    border: 3px solid var(--lk-success);
    border-radius: var(--lk-radius-md);
    opacity: 0;
    transition: opacity var(--lk-transition);
    pointer-events: none;
}

.lk-app .lk-tile.speaking .lk-speaking-ring {
    opacity: 1;
    animation: speakingPulse 1s ease-in-out infinite;
}

@keyframes speakingPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgb(var(--success-rgb) / 0.4); }
    50% { box-shadow: 0 0 0 6px rgb(var(--success-rgb) / 0); }
}

/* Controls */
.lk-app .lk-controls {
    padding: 0.75rem 1rem;
    padding-bottom: calc(env(safe-area-inset-bottom, 0.75rem) + 0.75rem);
    background: var(--lk-bg-secondary);
    border-top: 1px solid var(--lk-border);
}

.lk-app .lk-controls-main {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.lk-app .lk-ctrl-btn svg {
    width: 22px;
    height: 22px;
}

.lk-app .lk-ctrl-btn:not(.active):not(.lk-btn-secondary):not(.lk-btn-danger) {
    --button-background: var(--error-solid);
    --button-foreground: var(--on-error);
    --button-border: var(--error-solid);
    --button-hover-background: var(--error-solid-hover);
    --button-hover-border: var(--error-solid-hover);
}

.lk-app .lk-ctrl-btn.active .icon-off,
.lk-app .lk-ctrl-btn:not(.active) .icon-on {
    display: none;
}

.lk-app .lk-ctrl-btn.active .icon-on,
.lk-app .lk-ctrl-btn:not(.active) .icon-off {
    display: block;
}

.lk-app .lk-btn-secondary.active {
    --button-background: var(--action-primary);
    --button-foreground: var(--action-on-primary);
    --button-border: var(--action-primary);
    --button-hover-background: var(--action-primary-hover);
    --button-hover-border: var(--action-primary-hover);
}

/* ========================================
   Overlays
   ======================================== */
.lk-app .lk-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(var(--background-rgb) / 0.96);
    backdrop-filter: blur(8px);
    z-index: 100;
}

.lk-app .lk-overlay-content {
    text-align: center;
    padding: 2rem;
}

.lk-app .lk-loader {
    position: relative;
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem;
}

.lk-app .lk-loader-ring {
    position: absolute;
    inset: 0;
    border: 3px solid transparent;
    border-top-color: var(--lk-primary);
    border-radius: 50%;
    animation: loaderSpin 1.2s linear infinite;
}

.lk-app .lk-loader-ring:nth-child(2) {
    inset: 8px;
    border-top-color: var(--lk-primary-light);
    animation-delay: 0.15s;
    animation-direction: reverse;
}

.lk-app .lk-loader-ring:nth-child(3) {
    inset: 16px;
    border-top-color: var(--lk-success);
    animation-delay: 0.3s;
}

@keyframes loaderSpin {
    to { transform: rotate(360deg); }
}

.lk-app .lk-overlay-text {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.lk-app .lk-overlay-subtext {
    font-size: 0.875rem;
    color: var(--lk-text-muted);
}

.lk-app .lk-overlay-error .lk-overlay-text {
    color: var(--lk-danger);
}

.lk-app .lk-error-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem;
    color: var(--lk-danger);
}

.lk-app .lk-error-icon svg {
    width: 100%;
    height: 100%;
}

.lk-app .lk-retry-btn {
    margin-top: 1rem;
}

/* ========================================
   Tablet & Desktop Styles
   ======================================== */
@media (min-width: 640px) {
    .lk-app .lk-prejoin-container {
        padding: 2rem;
        justify-content: center;
    }

    .lk-app .lk-preview-container {
        max-width: 420px;
        aspect-ratio: 16/10;
    }

    .lk-app .lk-device-btn {
        min-width: 120px;
    }

    .lk-app .lk-btn-icon {
        width: 32px;
        height: 32px;
    }

    .lk-app .lk-join-btn {
        max-width: 320px;
        margin: 0.5rem auto 0;
    }

    .lk-app .lk-stage {
        padding: 1rem;
        gap: 0.75rem;
    }

    .lk-app .lk-tile {
        min-height: 180px;
    }
}

@media (min-width: 1024px) {
    .lk-app {
        min-height: 600px;
        border-radius: var(--lk-radius-xl);
        overflow: hidden;
    }

    .lk-app .lk-prejoin-header {
        padding: 1rem 0;
    }

    .lk-app .lk-preview-container {
        max-width: 480px;
    }

    .lk-app .lk-device-controls {
        gap: 1.5rem;
    }

    .lk-app .lk-device-btn {
        min-width: 140px;
    }

    .lk-app .lk-stage {
        grid-template-columns: repeat(2, 1fr);
    }

    .lk-app .lk-stage:has(.lk-tile:nth-child(3)) {
        grid-template-columns: repeat(3, 1fr);
    }

    .lk-app .lk-stage:has(.lk-tile:nth-child(5)) {
        grid-template-columns: repeat(3, 1fr);
    }

    .lk-app .lk-tile {
        min-height: 220px;
    }

    .lk-app .lk-controls-main {
        gap: 1rem;
    }

    .lk-app .lk-ctrl-btn svg {
        width: 24px;
        height: 24px;
    }
}

/* Shared/Partial/MyAccount/_astro */
@keyframes yboAstroModalIn {
        from { opacity: 0; transform: translateY(20px) scale(0.95); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }

/* PasswordSetup/Index */
body.ybo-password-setup { margin:0; background:var(--background); color:var(--foreground); font-family:system-ui,sans-serif; }
        .ybo-password-setup input:not([type="hidden"]) { display:block; width:100%; padding:.8rem; margin-top:.5rem; background:transparent; border:1px solid var(--border); border-radius:.75rem; color:inherit; }
        .ybo-password-setup label { display:block; margin-top:1.25rem; }
        .ybo-password-setup .validation-summary-valid { display:none; }
        .ybo-password-setup .validation-summary-errors { margin-top:1rem; color:var(--error); }
        .ybo-password-setup a { color:var(--link); }

/* Content-only spectrum: actual chakra identifiers, never action or status colors. */
.chakra-hero {
    --chakra-root: #FF6B6B;
    --chakra-sacral: #FF9F43;
    --chakra-solar: #FECA57;
    --chakra-heart: #5CD85C;
    --chakra-throat: #54A0FF;
    --chakra-third-eye: #A55EEA;
    --chakra-crown: #D980FA;
}

/* Static component presentation, extracted from Razor attributes. */
.ybo-ambient-delay { animation-delay: 2s; }
.ybo-progress-quarter { width: 25% }
.ybo-spinner-reverse { animation-direction: reverse; animation-duration: 1.5s; }
.ybo-tool-soft-accent { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.ybo-tool-surface { background: var(--card-bg); }
.ybo-tool-orb-solid { background: var(--accent); }
.chakra-content-root { background: color-mix(in srgb, var(--chakra-root) 15%, transparent); color: var(--foreground); border: 1px solid color-mix(in srgb, var(--chakra-root) 30%, transparent); }
.chakra-content-sacral { background: color-mix(in srgb, var(--chakra-sacral) 15%, transparent); color: var(--foreground); border: 1px solid color-mix(in srgb, var(--chakra-sacral) 30%, transparent); }
.chakra-content-solar { background: color-mix(in srgb, var(--chakra-solar) 15%, transparent); color: var(--foreground); border: 1px solid color-mix(in srgb, var(--chakra-solar) 30%, transparent); }
.chakra-content-heart { background: color-mix(in srgb, var(--chakra-heart) 15%, transparent); color: var(--foreground); border: 1px solid color-mix(in srgb, var(--chakra-heart) 30%, transparent); }
.chakra-content-throat { background: color-mix(in srgb, var(--chakra-throat) 15%, transparent); color: var(--foreground); border: 1px solid color-mix(in srgb, var(--chakra-throat) 30%, transparent); }
.chakra-content-third-eye { background: color-mix(in srgb, var(--chakra-third-eye) 15%, transparent); color: var(--foreground); border: 1px solid color-mix(in srgb, var(--chakra-third-eye) 30%, transparent); }
.chakra-content-crown { background: color-mix(in srgb, var(--chakra-crown) 15%, transparent); color: var(--foreground); border: 1px solid color-mix(in srgb, var(--chakra-crown) 30%, transparent); }
.ybo-progress-zero { width: 0% }
.dream-star-one { top: 15%; left: 10%; animation-delay: 0s; }
.dream-star-two { top: 25%; left: 25%; animation-delay: 0.5s; }
.dream-star-three { top: 12%; right: 20%; animation-delay: 1s; }
.dream-star-four { top: 35%; right: 30%; animation-delay: 1.5s; }
.dream-star-five { top: 20%; left: 50%; animation-delay: 0.7s; }
.ybo-tool-warning-icon { color: var(--warning); }
.ybo-tool-soft-neutral { background: color-mix(in srgb, var(--foreground) 10%, transparent); }
.dream-account-prompt { background: color-mix(in srgb, var(--link) 10%, transparent); border: 1px solid color-mix(in srgb, var(--link) 20%, transparent); }
.ybo-tool-link-color { color: var(--link); }
.ybo-class-carousel-containment { min-height: 580px; contain: layout; }
.ybo-class-grid-containment { min-height: 700px; contain: layout; }
.ybo-initially-hidden { display:none; }
.ybo-newsletter-trap { position:absolute;left:-9999px;opacity:0;height:0;width:0; }

.ybo-copy-toast { background: var(--surface); border: 1px solid var(--border); animation: yboHoroscopeToastIn 0.3s ease-out; }
.ybo-trainer-carousel .trainer-image-panel { background-size: cover; background-position: center top; }
.ybo-trainer-carousel .trainer-social-link {
    --button-background: var(--media-overlay);
    --button-foreground: var(--media-on-overlay);
    --button-border: transparent;
    --button-hover-background: var(--media-overlay-strong);
    --button-hover-border: transparent;
}
/* Narrow layouts retain the complete field and action without horizontal scrolling. */
.ybo-newsletter-standard .newsletter-input,
.ybo-newsletter-leadmagnet .newsletter-input { min-width: 0; max-width: 100%; }
@media (max-width: 640px) {
  .ybo-newsletter-standard .form-group,
  .ybo-newsletter-leadmagnet .form-group { flex-direction: column; }
  .ybo-newsletter-standard .form-group > .newsletter-input,
  .ybo-newsletter-leadmagnet .form-group > .newsletter-input,
  .ybo-newsletter-standard .form-group > .newsletter-btn,
  .ybo-newsletter-leadmagnet .form-group > .newsletter-btn { width: 100%; min-width: 0; }
}

/* Package grids may shrink around rich text, including nonbreaking copied text. */
.ybo-package-detail { overflow-wrap: anywhere; }
.ybo-package-detail .grid > * { min-width: 0; }
.ybo-package-detail .package-breadcrumb { flex-wrap: wrap; }
.ybo-package-detail .package-rich-content {
    min-width: 0;
    max-width: 100%;
    /* Wide tables/code remain readable in this local scroller. */
    overflow-x: auto;
}
.ybo-package-detail .package-rich-content :where(video, iframe, object, embed) {
    max-width: 100%;
}

/* The lesson row is also a flex item inside the shared button. */
#lessonsList > .lesson-item > .flex {
    width: 100%;
    min-width: 0;
}
#lessonsList .lesson-item h3 {
    white-space: normal;
    overflow-wrap: anywhere;
    overflow: visible;
    text-overflow: clip;
}
#lessonsList .lesson-item p { overflow-wrap: anywhere; }