/* Tutorial System Styles */

/* Semi-transparent overlay that covers the entire screen */
.tutorial-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: rgba(0, 0, 0, 0.75); */
    z-index: 9998;
    /* backdrop-filter: blur(2px); */
}

/* Tutorial tooltip/dialog box */
.tutorial-tooltip {
    position: fixed;
    max-width: 500px;
    min-width: 320px;
    background: var(--color-bg-secondary, #1e1e1e);
    border: 2px solid var(--color-accent, #00d4ff);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 10000;
    animation: tutorialFadeIn 0.3s ease-out;
}

@keyframes tutorialFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Tooltip header */
.tutorial-tooltip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--color-border, #333);
}

.tutorial-tooltip-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-primary, #ffffff);
}

.tutorial-tooltip-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--color-text-secondary, #aaa);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.tutorial-tooltip-close:hover {
    background: var(--color-bg-hover, #2a2a2a);
    color: var(--color-text-primary, #ffffff);
}

/* Tooltip body */
.tutorial-tooltip-body {
    padding: 20px 24px;
}

.tutorial-tooltip-content {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-secondary, #ccc);
}

/* Tooltip footer */
.tutorial-tooltip-footer {
    padding: 16px 24px 20px;
    border-top: 1px solid var(--color-border, #333);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tutorial-tooltip-progress {
    font-size: 0.875rem;
    color: var(--color-text-tertiary, #888);
}

.tutorial-tooltip-buttons {
    display: flex;
    gap: 12px;
}

.tutorial-tooltip-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tutorial-tooltip-back {
    background: var(--color-bg-tertiary, #2a2a2a);
    color: var(--color-text-primary, #ffffff);
}

.tutorial-tooltip-back:hover {
    background: var(--color-bg-hover, #333);
}

.tutorial-tooltip-next {
    background: var(--color-accent, #00d4ff);
    color: #000;
}

.tutorial-tooltip-next:hover {
    background: var(--color-accent-hover, #00b8e6);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
}

/* Highlighted element styling */
.tutorial-highlight {
    /* position: relative !important; */
    z-index: 10001 !important;
    box-shadow: 0 0 0 4px var(--color-accent, #00d4ff),
        0 0 20px rgba(0, 212, 255, 0.6) !important;
    border-radius: 8px;
    animation: tutorialPulse 2s ease-in-out infinite;
    isolation: isolate;
}

@keyframes tutorialPulse {

    0%,
    100% {
        box-shadow: 0 0 0 4px var(--color-accent, #00d4ff),
            0 0 20px rgba(0, 212, 255, 0.6);
    }

    50% {
        box-shadow: 0 0 0 6px var(--color-accent, #00d4ff),
            0 0 30px rgba(0, 212, 255, 0.8);
    }
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .tutorial-tooltip {
        max-width: calc(100vw - 32px);
        min-width: 280px;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: calc(100vw - 32px);
        margin: 0;
        box-sizing: border-box;
    }

    .tutorial-tooltip-header {
        padding: 16px 20px 12px;
    }

    .tutorial-tooltip-title {
        font-size: 1.25rem;
    }

    .tutorial-tooltip-body {
        padding: 16px 20px;
    }

    .tutorial-tooltip-content {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    .tutorial-tooltip-footer {
        padding: 12px 20px 16px;
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .tutorial-tooltip-progress {
        text-align: center;
        margin-bottom: 4px;
    }

    .tutorial-tooltip-buttons {
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }

    .tutorial-tooltip-btn {
        width: 100%;
        padding: 12px 20px;
    }
}

/* Light theme support */
[data-theme="light"] .tutorial-overlay {
    background: rgba(255, 255, 255, 0.85);
}

[data-theme="light"] .tutorial-tooltip {
    background: #ffffff;
    border-color: #00b8e6;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .tutorial-tooltip-header {
    border-bottom-color: #e0e0e0;
}

[data-theme="light"] .tutorial-tooltip-title {
    color: #1a1a1a;
}

[data-theme="light"] .tutorial-tooltip-close {
    color: #666;
}

[data-theme="light"] .tutorial-tooltip-close:hover {
    background: #f0f0f0;
    color: #1a1a1a;
}

[data-theme="light"] .tutorial-tooltip-content {
    color: #333;
}

[data-theme="light"] .tutorial-tooltip-footer {
    border-top-color: #e0e0e0;
}

[data-theme="light"] .tutorial-tooltip-progress {
    color: #666;
}

[data-theme="light"] .tutorial-tooltip-back {
    background: #f0f0f0;
    color: #1a1a1a;
}

[data-theme="light"] .tutorial-tooltip-back:hover {
    background: #e0e0e0;
}

[data-theme="light"] .tutorial-highlight {
    box-shadow: 0 0 0 4px #00b8e6,
        0 0 20px rgba(0, 184, 230, 0.4);
}

@keyframes tutorialPulseLight {

    0%,
    100% {
        box-shadow: 0 0 0 4px #00b8e6,
            0 0 20px rgba(0, 184, 230, 0.4);
    }

    50% {
        box-shadow: 0 0 0 6px #00b8e6,
            0 0 30px rgba(0, 184, 230, 0.6);
    }
}

[data-theme="light"] .tutorial-highlight {
    animation: tutorialPulseLight 2s ease-in-out infinite;
}

/* Sunshine theme support - Yellow */
[data-theme="sunshine"] .tutorial-tooltip {
    border-color: #f4d03f;
}

[data-theme="sunshine"] .tutorial-tooltip-next {
    background: #f4d03f;
    color: #000;
}

[data-theme="sunshine"] .tutorial-tooltip-next:hover {
    background: #d4b534;
    box-shadow: 0 4px 12px rgba(244, 208, 63, 0.3);
}

[data-theme="sunshine"] .tutorial-highlight {
    box-shadow: 0 0 0 4px #f4d03f,
        0 0 20px rgba(244, 208, 63, 0.6);
}

@keyframes tutorialPulseSunshine {

    0%,
    100% {
        box-shadow: 0 0 0 4px #f4d03f,
            0 0 20px rgba(244, 208, 63, 0.6);
    }

    50% {
        box-shadow: 0 0 0 6px #f4d03f,
            0 0 30px rgba(244, 208, 63, 0.8);
    }
}

[data-theme="sunshine"] .tutorial-highlight {
    animation: tutorialPulseSunshine 2s ease-in-out infinite;
}

/* Ocean theme support - Blue */
[data-theme="ocean"] .tutorial-tooltip {
    border-color: #3b82f6;
}

[data-theme="ocean"] .tutorial-tooltip-next {
    background: #3b82f6;
    color: #fff;
}

[data-theme="ocean"] .tutorial-tooltip-next:hover {
    background: #2563eb;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

[data-theme="ocean"] .tutorial-highlight {
    box-shadow: 0 0 0 4px #3b82f6,
        0 0 20px rgba(59, 130, 246, 0.6);
}

@keyframes tutorialPulseOcean {

    0%,
    100% {
        box-shadow: 0 0 0 4px #3b82f6,
            0 0 20px rgba(59, 130, 246, 0.6);
    }

    50% {
        box-shadow: 0 0 0 6px #3b82f6,
            0 0 30px rgba(59, 130, 246, 0.8);
    }
}

[data-theme="ocean"] .tutorial-highlight {
    animation: tutorialPulseOcean 2s ease-in-out infinite;
}

/* Forest theme support - Green */
[data-theme="forest"] .tutorial-tooltip {
    border-color: #10b981;
}

[data-theme="forest"] .tutorial-tooltip-next {
    background: #10b981;
    color: #fff;
}

[data-theme="forest"] .tutorial-tooltip-next:hover {
    background: #059669;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

[data-theme="forest"] .tutorial-highlight {
    box-shadow: 0 0 0 4px #10b981,
        0 0 20px rgba(16, 185, 129, 0.6);
}

@keyframes tutorialPulseForest {

    0%,
    100% {
        box-shadow: 0 0 0 4px #10b981,
            0 0 20px rgba(16, 185, 129, 0.6);
    }

    50% {
        box-shadow: 0 0 0 6px #10b981,
            0 0 30px rgba(16, 185, 129, 0.8);
    }
}

[data-theme="forest"] .tutorial-highlight {
    animation: tutorialPulseForest 2s ease-in-out infinite;
}

/* Sunset theme support - Orange */
[data-theme="sunset"] .tutorial-tooltip {
    border-color: #f97316;
}

[data-theme="sunset"] .tutorial-tooltip-next {
    background: #f97316;
    color: #fff;
}

[data-theme="sunset"] .tutorial-tooltip-next:hover {
    background: #ea580c;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

[data-theme="sunset"] .tutorial-highlight {
    box-shadow: 0 0 0 4px #f97316,
        0 0 20px rgba(249, 115, 22, 0.6);
}

@keyframes tutorialPulseSunset {

    0%,
    100% {
        box-shadow: 0 0 0 4px #f97316,
            0 0 20px rgba(249, 115, 22, 0.6);
    }

    50% {
        box-shadow: 0 0 0 6px #f97316,
            0 0 30px rgba(249, 115, 22, 0.8);
    }
}

[data-theme="sunset"] .tutorial-highlight {
    animation: tutorialPulseSunset 2s ease-in-out infinite;
}

/* Lavender theme support - Purple */
[data-theme="lavender"] .tutorial-tooltip {
    border-color: #a855f7;
}

[data-theme="lavender"] .tutorial-tooltip-next {
    background: #a855f7;
    color: #fff;
}

[data-theme="lavender"] .tutorial-tooltip-next:hover {
    background: #9333ea;
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
}

[data-theme="lavender"] .tutorial-highlight {
    box-shadow: 0 0 0 4px #a855f7,
        0 0 20px rgba(168, 85, 247, 0.6);
}

@keyframes tutorialPulseLavender {

    0%,
    100% {
        box-shadow: 0 0 0 4px #a855f7,
            0 0 20px rgba(168, 85, 247, 0.6);
    }

    50% {
        box-shadow: 0 0 0 6px #a855f7,
            0 0 30px rgba(168, 85, 247, 0.8);
    }
}

[data-theme="lavender"] .tutorial-highlight {
    animation: tutorialPulseLavender 2s ease-in-out infinite;
}

/* Rose theme support - Pink */
[data-theme="rose"] .tutorial-tooltip {
    border-color: #ec4899;
}

[data-theme="rose"] .tutorial-tooltip-next {
    background: #ec4899;
    color: #fff;
}

[data-theme="rose"] .tutorial-tooltip-next:hover {
    background: #db2777;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}

[data-theme="rose"] .tutorial-highlight {
    box-shadow: 0 0 0 4px #ec4899,
        0 0 20px rgba(236, 72, 153, 0.6);
}

@keyframes tutorialPulseRose {

    0%,
    100% {
        box-shadow: 0 0 0 4px #ec4899,
            0 0 20px rgba(236, 72, 153, 0.6);
    }

    50% {
        box-shadow: 0 0 0 6px #ec4899,
            0 0 30px rgba(236, 72, 153, 0.8);
    }
}

[data-theme="rose"] .tutorial-highlight {
    animation: tutorialPulseRose 2s ease-in-out infinite;
}

/* Sunshine (Light) theme support - Yellow */
[data-theme="sunshine-light"] .tutorial-tooltip {
    background: #fffbf0;
    border-color: #f4d03f;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

[data-theme="sunshine-light"] .tutorial-tooltip-header {
    border-bottom-color: #ffeaa7;
}

[data-theme="sunshine-light"] .tutorial-tooltip-title {
    color: #2a240d;
}

[data-theme="sunshine-light"] .tutorial-tooltip-close {
    color: #6f6426;
}

[data-theme="sunshine-light"] .tutorial-tooltip-close:hover {
    background: #fff8ed;
    color: #2a240d;
}

[data-theme="sunshine-light"] .tutorial-tooltip-content {
    color: #1a1805;
}

[data-theme="sunshine-light"] .tutorial-tooltip-footer {
    border-top-color: #ffeaa7;
}

[data-theme="sunshine-light"] .tutorial-tooltip-progress {
    color: #6f6426;
}

[data-theme="sunshine-light"] .tutorial-tooltip-back {
    background: #fff8ed;
    color: #2a240d;
}

[data-theme="sunshine-light"] .tutorial-tooltip-back:hover {
    background: #ffeaa7;
}

[data-theme="sunshine-light"] .tutorial-tooltip-next {
    background: #f4d03f;
    color: #000;
}

[data-theme="sunshine-light"] .tutorial-tooltip-next:hover {
    background: #d4b534;
    box-shadow: 0 4px 12px rgba(244, 208, 63, 0.3);
}

[data-theme="sunshine-light"] .tutorial-highlight {
    box-shadow: 0 0 0 4px #f4d03f,
        0 0 20px rgba(244, 208, 63, 0.5);
}

@keyframes tutorialPulseSunshineLight {

    0%,
    100% {
        box-shadow: 0 0 0 4px #f4d03f,
            0 0 20px rgba(244, 208, 63, 0.5);
    }

    50% {
        box-shadow: 0 0 0 6px #f4d03f,
            0 0 30px rgba(244, 208, 63, 0.7);
    }
}

[data-theme="sunshine-light"] .tutorial-highlight {
    animation: tutorialPulseSunshineLight 2s ease-in-out infinite;
}

/* Ocean (Light) theme support - Blue */
[data-theme="ocean-light"] .tutorial-tooltip {
    background: #f0f5ff;
    border-color: #3b82f6;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

[data-theme="ocean-light"] .tutorial-tooltip-header {
    border-bottom-color: #bfdbfe;
}

[data-theme="ocean-light"] .tutorial-tooltip-title {
    color: #051a32;
}

[data-theme="ocean-light"] .tutorial-tooltip-close {
    color: #3d5a7d;
}

[data-theme="ocean-light"] .tutorial-tooltip-close:hover {
    background: #e6eff9;
    color: #051a32;
}

[data-theme="ocean-light"] .tutorial-tooltip-content {
    color: #051a32;
}

[data-theme="ocean-light"] .tutorial-tooltip-footer {
    border-top-color: #bfdbfe;
}

[data-theme="ocean-light"] .tutorial-tooltip-progress {
    color: #3d5a7d;
}

[data-theme="ocean-light"] .tutorial-tooltip-back {
    background: #e6eff9;
    color: #051a32;
}

[data-theme="ocean-light"] .tutorial-tooltip-back:hover {
    background: #bfdbfe;
}

[data-theme="ocean-light"] .tutorial-tooltip-next {
    background: #3b82f6;
    color: #fff;
}

[data-theme="ocean-light"] .tutorial-tooltip-next:hover {
    background: #2563eb;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

[data-theme="ocean-light"] .tutorial-highlight {
    box-shadow: 0 0 0 4px #3b82f6,
        0 0 20px rgba(59, 130, 246, 0.5);
}

@keyframes tutorialPulseOceanLight {

    0%,
    100% {
        box-shadow: 0 0 0 4px #3b82f6,
            0 0 20px rgba(59, 130, 246, 0.5);
    }

    50% {
        box-shadow: 0 0 0 6px #3b82f6,
            0 0 30px rgba(59, 130, 246, 0.7);
    }
}

[data-theme="ocean-light"] .tutorial-highlight {
    animation: tutorialPulseOceanLight 2s ease-in-out infinite;
}

/* Forest (Light) theme support - Green */
[data-theme="forest-light"] .tutorial-tooltip {
    background: #f0fdf6;
    border-color: #10b981;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

[data-theme="forest-light"] .tutorial-tooltip-header {
    border-bottom-color: #a7f3d0;
}

[data-theme="forest-light"] .tutorial-tooltip-title {
    color: #051f1a;
}

[data-theme="forest-light"] .tutorial-tooltip-close {
    color: #3d6b58;
}

[data-theme="forest-light"] .tutorial-tooltip-close:hover {
    background: #e6f9f1;
    color: #051f1a;
}

[data-theme="forest-light"] .tutorial-tooltip-content {
    color: #051f1a;
}

[data-theme="forest-light"] .tutorial-tooltip-footer {
    border-top-color: #a7f3d0;
}

[data-theme="forest-light"] .tutorial-tooltip-progress {
    color: #3d6b58;
}

[data-theme="forest-light"] .tutorial-tooltip-back {
    background: #e6f9f1;
    color: #051f1a;
}

[data-theme="forest-light"] .tutorial-tooltip-back:hover {
    background: #a7f3d0;
}

[data-theme="forest-light"] .tutorial-tooltip-next {
    background: #10b981;
    color: #fff;
}

[data-theme="forest-light"] .tutorial-tooltip-next:hover {
    background: #059669;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

[data-theme="forest-light"] .tutorial-highlight {
    box-shadow: 0 0 0 4px #10b981,
        0 0 20px rgba(16, 185, 129, 0.5);
}

@keyframes tutorialPulseForestLight {

    0%,
    100% {
        box-shadow: 0 0 0 4px #10b981,
            0 0 20px rgba(16, 185, 129, 0.5);
    }

    50% {
        box-shadow: 0 0 0 6px #10b981,
            0 0 30px rgba(16, 185, 129, 0.7);
    }
}

[data-theme="forest-light"] .tutorial-highlight {
    animation: tutorialPulseForestLight 2s ease-in-out infinite;
}

/* Sunset (Light) theme support - Orange */
[data-theme="sunset-light"] .tutorial-tooltip {
    background: #fef5ed;
    border-color: #f97316;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

[data-theme="sunset-light"] .tutorial-tooltip-header {
    border-bottom-color: #fedba8;
}

[data-theme="sunset-light"] .tutorial-tooltip-title {
    color: #1a0f08;
}

[data-theme="sunset-light"] .tutorial-tooltip-close {
    color: #7d5f42;
}

[data-theme="sunset-light"] .tutorial-tooltip-close:hover {
    background: #f9ede3;
    color: #1a0f08;
}

[data-theme="sunset-light"] .tutorial-tooltip-content {
    color: #1a0f08;
}

[data-theme="sunset-light"] .tutorial-tooltip-footer {
    border-top-color: #fedba8;
}

[data-theme="sunset-light"] .tutorial-tooltip-progress {
    color: #7d5f42;
}

[data-theme="sunset-light"] .tutorial-tooltip-back {
    background: #f9ede3;
    color: #1a0f08;
}

[data-theme="sunset-light"] .tutorial-tooltip-back:hover {
    background: #fedba8;
}

[data-theme="sunset-light"] .tutorial-tooltip-next {
    background: #f97316;
    color: #fff;
}

[data-theme="sunset-light"] .tutorial-tooltip-next:hover {
    background: #ea580c;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

[data-theme="sunset-light"] .tutorial-highlight {
    box-shadow: 0 0 0 4px #f97316,
        0 0 20px rgba(249, 115, 22, 0.5);
}

@keyframes tutorialPulseSunsetLight {

    0%,
    100% {
        box-shadow: 0 0 0 4px #f97316,
            0 0 20px rgba(249, 115, 22, 0.5);
    }

    50% {
        box-shadow: 0 0 0 6px #f97316,
            0 0 30px rgba(249, 115, 22, 0.7);
    }
}

[data-theme="sunset-light"] .tutorial-highlight {
    animation: tutorialPulseSunsetLight 2s ease-in-out infinite;
}

/* Lavender (Light) theme support - Purple */
[data-theme="lavender-light"] .tutorial-tooltip {
    background: #faf5ff;
    border-color: #a855f7;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

[data-theme="lavender-light"] .tutorial-tooltip-header {
    border-bottom-color: #e9d5ff;
}

[data-theme="lavender-light"] .tutorial-tooltip-title {
    color: #1a0d2d;
}

[data-theme="lavender-light"] .tutorial-tooltip-close {
    color: #6b4f8a;
}

[data-theme="lavender-light"] .tutorial-tooltip-close:hover {
    background: #f3ecff;
    color: #1a0d2d;
}

[data-theme="lavender-light"] .tutorial-tooltip-content {
    color: #1a0d2d;
}

[data-theme="lavender-light"] .tutorial-tooltip-footer {
    border-top-color: #e9d5ff;
}

[data-theme="lavender-light"] .tutorial-tooltip-progress {
    color: #6b4f8a;
}

[data-theme="lavender-light"] .tutorial-tooltip-back {
    background: #f3ecff;
    color: #1a0d2d;
}

[data-theme="lavender-light"] .tutorial-tooltip-back:hover {
    background: #e9d5ff;
}

[data-theme="lavender-light"] .tutorial-tooltip-next {
    background: #a855f7;
    color: #fff;
}

[data-theme="lavender-light"] .tutorial-tooltip-next:hover {
    background: #9333ea;
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
}

[data-theme="lavender-light"] .tutorial-highlight {
    box-shadow: 0 0 0 4px #a855f7,
        0 0 20px rgba(168, 85, 247, 0.5);
}

@keyframes tutorialPulseLavenderLight {

    0%,
    100% {
        box-shadow: 0 0 0 4px #a855f7,
            0 0 20px rgba(168, 85, 247, 0.5);
    }

    50% {
        box-shadow: 0 0 0 6px #a855f7,
            0 0 30px rgba(168, 85, 247, 0.7);
    }
}

[data-theme="lavender-light"] .tutorial-highlight {
    animation: tutorialPulseLavenderLight 2s ease-in-out infinite;
}

/* Rose (Light) theme support - Pink */
[data-theme="rose-light"] .tutorial-tooltip {
    background: #fff5fa;
    border-color: #ec4899;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

[data-theme="rose-light"] .tutorial-tooltip-header {
    border-bottom-color: #fbcfe8;
}

[data-theme="rose-light"] .tutorial-tooltip-title {
    color: #1d0f1a;
}

[data-theme="rose-light"] .tutorial-tooltip-close {
    color: #7d5b70;
}

[data-theme="rose-light"] .tutorial-tooltip-close:hover {
    background: #ffe8f5;
    color: #1d0f1a;
}

[data-theme="rose-light"] .tutorial-tooltip-content {
    color: #1d0f1a;
}

[data-theme="rose-light"] .tutorial-tooltip-footer {
    border-top-color: #fbcfe8;
}

[data-theme="rose-light"] .tutorial-tooltip-progress {
    color: #7d5b70;
}

[data-theme="rose-light"] .tutorial-tooltip-back {
    background: #ffe8f5;
    color: #1d0f1a;
}

[data-theme="rose-light"] .tutorial-tooltip-back:hover {
    background: #fbcfe8;
}

[data-theme="rose-light"] .tutorial-tooltip-next {
    background: #ec4899;
    color: #fff;
}

[data-theme="rose-light"] .tutorial-tooltip-next:hover {
    background: #db2777;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}

[data-theme="rose-light"] .tutorial-highlight {
    box-shadow: 0 0 0 4px #ec4899,
        0 0 20px rgba(236, 72, 153, 0.5);
}

@keyframes tutorialPulseRoseLight {

    0%,
    100% {
        box-shadow: 0 0 0 4px #ec4899,
            0 0 20px rgba(236, 72, 153, 0.5);
    }

    50% {
        box-shadow: 0 0 0 6px #ec4899,
            0 0 30px rgba(236, 72, 153, 0.7);
    }
}

[data-theme="rose-light"] .tutorial-highlight {
    animation: tutorialPulseRoseLight 2s ease-in-out infinite;
}