@font-face {
    font-family: Roboto Flex;
    src: url(../fonts/RobotoFlex-VariableFont.ttf) format("truetype")
}

@font-face {
    font-family: Material Symbols Outlined;
    src: url(../fonts/MaterialSymbolsOutlined-VariableFont_FILL,GRAD,opsz,wght.ttf) format("truetype");
    font-style: normal;
    font-display: auto
}

body {
    height: 100vh;
    margin: 0;
    overflow: hidden
}

main {
    padding: 12px 12px 0
}

a {
    color: var(--kendo-color-on-app-surface)
}

    a:hover {
        color: var(--kendo-color-primary);
        text-decoration: none
    }

h1, h2, h3 {
    margin: .67em 0 .3em;
    font-weight: 400
}

h1 {
    font-size: 42px
}

h2 {
    font-size: 32px
}

h3 {
    font-size: 24px
}

.k-drawer-container {
    height: calc(100vh - var(--kendo-drawer-header-height, 57px));
    background-color: var(--kendo-drawer-bg, var(--kendo-color-surface-alt, #f8f8f8))
}

.k-drawer {
    border: 0;
    padding: var(--kendo-spacing-4)
}

    .k-drawer .k-drawer-item {
        color: var(--kendo-color-subtle);
        margin-bottom: var(--kendo-spacing-0\.5);
        border-radius: var(--kendo-border-radius-md, 4px)
    }

        .k-drawer .k-drawer-item .k-item-text {
            color: var(--kendo-color-subtle);
            font-size: var(--kendo-font-size-sm, 14px);
            font-weight: var(--kendo-font-weight, 400);
            line-height: 142%;
            letter-spacing: var(--kendo-letter-spacing-normal, 0)
        }

        .k-drawer .k-drawer-item .k-icon {
            color: var(--kendo-color-subtle)
        }

        .k-drawer .k-drawer-item .drawer-chevron-icon {
            margin-left: auto
        }

        .k-drawer .k-drawer-item:hover {
            color: var(--kendo-color-on-app-surface, #303030);
            background: var(--kendo-color-base-opacity-Base-Active, rgba(50, 49, 48, .08))
        }

            .k-drawer .k-drawer-item:hover .k-item-text {
                color: var(--kendo-color-on-app-surface, #303030)
            }

            .k-drawer .k-drawer-item:hover .k-icon {
                color: var(--kendo-color-subtle)
            }

        .k-drawer .k-drawer-item.k-selected {
            border-radius: var(--kendo-border-radius-md, 4px);
            background: var(--kendo-color-base-opacity-Base-Active, rgba(50, 49, 48, .08))
        }

            .k-drawer .k-drawer-item.k-selected .k-item-text {
                color: var(--kendo-color-on-app-surface, #303030);
                font-weight: var(--kendo-font-weight-semibold, 600)
            }

            .k-drawer .k-drawer-item.k-selected .k-icon {
                color: var(--kendo-color-primary)
            }

            .k-drawer .k-drawer-item.k-selected:before {
                opacity: 0
            }

        .k-drawer .k-drawer-item.k-level-1 {
            margin-left: var(--kendo-spacing-6);
            padding: var(--kendo-spacing-2) var(--kendo-spacing-2) var(--kendo-spacing-2) var(--kendo-spacing-5)
        }

            .k-drawer .k-drawer-item.k-level-1:before {
                border-color: var(--kendo-color-border-alt, rgba(138, 136, 134, .36));
                opacity: 1
            }

            .k-drawer .k-drawer-item.k-level-1.k-selected:before {
                border-color: var(--kendo-color-primary);
                opacity: 1
            }

        .k-drawer .k-drawer-item.k-level-2:before {
            opacity: 0
        }

.k-drawer-content {
    height: 100%;
    border-radius: var(--kendo-border-radius-xxl, 12px) 0 0 0;
    border-top: 1px solid var(--kendo-color-border, rgba(138, 136, 134, .36));
    border-left: 1px solid var(--kendo-color-border, rgba(138, 136, 134, .36));
    background: var(--kendo-color-app-surface, #fff)
}

.k-badge-edge.k-top-end {
    top: 0;
    right: 0;
    transform: translate(0%, -50%);
}

div.appbar-top {
    position: relative;
    z-index: 1
}

.appbar-top > div {
    line-height: 2.4
}

#app-title {
    display: flex;
    gap: .2em;
    align-items: center;
    margin: 0;
    padding: 0;
    font-size: 1.2em
}

    #app-title strong {
        font-weight: 500
    }

    #app-title sup {
        font-size: .4em
    }

    #app-title a, #app-title a:hover {
        text-decoration: none;
        color: inherit
    }

#product-page-link {
    display: block;
    width: 42px;
    margin-right: var(--kendo-spacing-2);
    background: url(components/devcraft-ninja-small.svg) center no-repeat;
    background-size: contain;
    font-size: var(--kendo-font-size-lg);
    text-decoration: none;
    text-indent: -9999px
}

:root {
    --error-ui-bg: #999999;
    --error-ui-text: #ffffff;
    --error-ui-shadow: rgba(0, 0, 0, .3);
    --error-ui-padding: .8rem 1.5rem .8rem 1.5rem;
    --error-ui-font-size: 1.1rem;
    --error-boundary-bg: #b32121;
    --error-boundary-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODY2LjA1NDdDMjYxLjA0OSA4Ni4wNTQ3IDI1OS43ODYgODcuMzAwNSAyNTkuNzg2IDg5Ljc5MjEgMjU5Ljc4NiA5Mi4yODM3IDI2MS4wNDkgOTMuNTI5NSAyNjMuNTc2IDkzLjUyOTUgMjY2LjExNiA5My41Mjk1IDI2Ny4zODcgOTIuMjgzNyAyNjcuMzg3IDg5Ljc5MjEgMjY3Mzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODY2LjA1NDdaIiBmaWxsPSIjRkZFNTAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L2c+PC9zdmc+);
    --error-boundary-icon-size: 2rem;
    --error-boundary-padding: 1.2rem;
    --error-boundary-left-padding: calc(var(--error-boundary-icon-size) + 1.5rem)
}

[data-theme=light] {
    --error-ui-bg: #f0f0f0;
    --error-ui-text: #222222;
    --error-boundary-bg: #d32f2f
}

[data-theme=dark] {
    --error-ui-bg: #222222;
    --error-ui-text: #ffffff;
    --error-boundary-bg: #b71c1c
}

#blazor-error-ui {
    background: var(--error-ui-bg);
    color: var(--error-ui-text);
    bottom: 0;
    box-shadow: 0 -2px 5px var(--error-ui-shadow);
    display: none;
    left: 0;
    padding: var(--error-ui-padding);
    position: fixed;
    width: 100%;
    z-index: 10100;
    font-size: var(--error-ui-font-size)
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: .75rem;
        top: .5rem
    }

.blazor-error-boundary {
    background: var(--error-boundary-bg);
    background-image: var(--error-boundary-icon);
    background-repeat: no-repeat;
    background-size: var(--error-boundary-icon-size);
    background-position: 1rem center;
    padding: var(--error-boundary-padding);
    padding-left: var(--error-boundary-left-padding);
    color: var(--error-ui-text);
    font-size: var(--error-ui-font-size);
    font-weight: 600;
    transition: background .3s ease,color .3s ease
}

    .blazor-error-boundary:after {
        content: "Server connection briefly lost or an error has occurred."
    }

div.appbar-bottom {
    z-index: 1;
    background-color: var(--kendo-color-surface);
    color: var(--kendo-color-subtle)
}

#copyright {
    padding: .5em 0
}

.breadcrumb-region {
    height: 28px
}

.compact-view-toggle-button {
    position: fixed;
    -webkit-align-items: end;
    align-items: end;
    right: 8px;
    top: -64px
}

.align-right {
    justify-self: end
}

.banner-region-container {
    padding-bottom: var(--kendo-spacing-1, 8px);
    justify-content: space-between;
    border-bottom: solid 1px #cecece;
    margin-bottom: 24px;
    vertical-align: bottom
}

.top-banner-title {
    margin-top: 16px;
    padding-left: 16px
}

.menu-right-align {
    display: flex;
    justify-content: flex-end !important;
    align-items: flex-end !important;
    margin-top: 8px;
    margin-bottom: 8px
}

.rich-text-editor div.k-editor-content div.k-content {
    font-family: Aptos,Calibri;
    background-color: #dcdcdc;
    color: #696969
}

.pct-telerik-grid .k-table .k-table-th {
    min-width: 280px
}

.pct-admin-config-data-grid {
    height: calc(100vh - 360px);
    overflow: auto
}

.pct-environment-banner {
    color: #333;
    padding: 10px 20px;
    border-radius: 5px;
    display: inline-block;
    font-family: Arial,sans-serif;
    font-size: 16px;
    text-align: center
}

.pct-textarea-max-height > textarea {
    max-height: 240px;
    overflow-y: auto !important
}

.pct-inline-picker-reset-button-1 {
    margin-left: -7.25em;
    z-index: 10000
}

.pct-inline-picker-reset-button-0 {
    margin-left: -3.5em;
    z-index: 10000
}

.pct-outline-picker-reset-button-1 {
    margin-left: 7.25em;
    z-index: 10000
}

.pct-outline-picker-reset-button-0 {
    margin-left: 3.5em;
    z-index: 10000
}

.pct-no-now-button .k-time-now {
    display: none
}

.pct-notification {
    position: fixed;
    top: 80px;
    right: 24px;
    width: auto;
    min-width: 420px;
    max-width: 600px;
    z-index: 2147483647;
}

    /* Override Telerik notification container styles */
    .pct-notification .k-notification-container {
        margin: 0;
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    /* Base notification styling - Enhanced with notebook tab design */
    .pct-notification .k-notification {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 248, 248, 0.95) 100%);
        backdrop-filter: blur(24px) saturate(200%) brightness(1.05);
        -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(1.05);
        border: 2px solid rgba(0, 0, 0, 0.12);
        border-left: none;
        border-radius: 0 16px 16px 0;
        padding: 28px 36px 28px 48px;
        margin-bottom: 16px;
        box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.15), 0 3px 6px -1px rgba(0, 0, 0, 0.08), 0 24px 48px -12px rgba(0, 0, 0, 0.18), 0 12px 24px -6px rgba(0, 0, 0, 0.12), inset 0 1px 0 0 rgba(255, 255, 255, 0.8);
        position: relative;
        overflow: visible;
        animation: notificationSlideIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        transform-origin: right center;
    }

        /* Notebook tab styling - Left edge */
        .pct-notification .k-notification::before {
            content: '';
            position: absolute;
            left: -24px;
            top: -2px;
            bottom: -2px;
            width: 24px;
            background: inherit;
            border: 2px solid rgba(0, 0, 0, 0.12);
            border-right: none;
            border-radius: 16px 0 0 16px;
            box-shadow: -3px 0 6px rgba(0, 0, 0, 0.08), inset 1px 0 0 0 rgba(255, 255, 255, 0.8);
        }

        /* Tab hole punches */
        .pct-notification .k-notification::after {
            content: '';
            position: absolute;
            left: -16px;
            top: 50%;
            transform: translateY(-50%);
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.08);
            box-shadow: 0 -20px 0 rgba(0, 0, 0, 0.08), 0 20px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(0, 0, 0, 0.15);
        }

/* Dark theme notebook styling - IMPROVED READABILITY */
[data-theme="dark"] .pct-notification .k-notification {
    /* Higher opacity background for better text contrast */
    background: linear-gradient( 135deg, rgba(48, 48, 50, 0.98) 0%, /* Raised from 40,40,40 @ 0.95 */
    rgba(42, 42, 44, 0.96) 100% /* Raised from 32,32,32 @ 0.92 */
    );
    /* Brighter border for better definition */
    border: 2px solid rgba(255, 255, 255, 0.25); /* Increased from 0.15 */
    border-left: none;
    /* Simplified shadows - reduced layers for clarity */
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.5), /* Increased opacity */
    0 12px 32px -8px rgba(0, 0, 0, 0.6), /* Reduced spread */
    inset 0 1px 0 0 rgba(255, 255, 255, 0.12); /* Subtle inner highlight */
}

    [data-theme="dark"] .pct-notification .k-notification::before {
        border: 2px solid rgba(255, 255, 255, 0.25); /* Match main border */
        border-right: none;
        box-shadow: -2px 0 8px rgba(0, 0, 0, 0.4), /* Simplified shadow */
        inset 1px 0 0 0 rgba(255, 255, 255, 0.12);
    }

    [data-theme="dark"] .pct-notification .k-notification::after {
        background: rgba(255, 255, 255, 0.15); /* Increased from 0.1 */
        box-shadow: 0 -20px 0 rgba(255, 255, 255, 0.15), /* Match background */
        0 20px 0 rgba(255, 255, 255, 0.15), inset 0 1px 2px rgba(0, 0, 0, 0.4); /* Slightly deeper inset */
    }

/* ABSOLUTE TEXT COLOR OVERRIDE - ALWAYS DARK TEXT */
/* Applied to all notification content text regardless of theme */
.pct-notification .k-notification-content,
.pct-notification .k-notification-content *,
[data-theme="dark"] .pct-notification .k-notification-content,
[data-theme="dark"] .pct-notification .k-notification-content *,
[data-theme="light"] .pct-notification .k-notification-content,
[data-theme="light"] .pct-notification .k-notification-content * {    
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Dark theme close button - improved visibility */
[data-theme="dark"] .pct-notification .k-notification-closable .k-icon-close {
    background: rgba(255, 255, 255, 0.1); /* Increased from 0.06 */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Increased from 0.1 */    
    opacity: 0.8; /* Increased base opacity */
}

    [data-theme="dark"] .pct-notification .k-notification-closable .k-icon-close:hover {
        background: rgba(255, 255, 255, 0.18); /* Increased from 0.12 */
        border-color: rgba(255, 255, 255, 0.35); /* Increased from 0.2 */
        opacity: 1;
    }

/* Enhanced status bars for dark theme - better visibility */
[data-theme="dark"] .pct-notification .k-notification-success .status-bar {
    background: linear-gradient(180deg, #4caf50 0%, #388e3c 100%); /* Brighter green */
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.6), /* Reduced glow */
    inset 0 0 3px rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .pct-notification .k-notification-error .status-bar {
    background: linear-gradient(180deg, #ef5350 0%, #c62828 100%); /* Brighter red */
    box-shadow: 0 0 10px rgba(239, 83, 80, 0.6), inset 0 0 3px rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .pct-notification .k-notification-warning .status-bar {
    background: linear-gradient(180deg, #ffca28 0%, #f9a825 100%); /* Brighter yellow */
    box-shadow: 0 0 10px rgba(255, 202, 40, 0.6), inset 0 0 3px rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .pct-notification .k-notification-info .status-bar {
    background: linear-gradient(180deg, #42a5f5 0%, #1e88e5 100%); /* Brighter blue */
    box-shadow: 0 0 10px rgba(66, 165, 245, 0.6), inset 0 0 3px rgba(255, 255, 255, 0.2);
}

/* Dark theme icon adjustments */
[data-theme="dark"] .pct-notification .k-icon {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); /* Increased shadow */
}

/* Dark theme hover state - reduced elevation for cleaner look */
@media (hover: hover) {
    [data-theme="dark"] .pct-notification .k-notification:hover {
        transform: translateY(-3px); /* Reduced from -4px */
        box-shadow: 0 6px 16px -3px rgba(0, 0, 0, 0.6), 0 16px 40px -10px rgba(0, 0, 0, 0.7), inset 0 1px 0 0 rgba(255, 255, 255, 0.12);
    }
}

/* Enhanced notification text styling - BASE DEFINITION */
.pct-notification .k-notification-content {
    display: flex;
    align-items: center;
    gap: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;    
    font-weight: 450;
    letter-spacing: -0.011em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* Enhanced icon styling */
.pct-notification .k-icon {
    font-size: 24px;
    opacity: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Status-specific styling with enhanced accent bars */
.pct-notification .k-notification-success {
    position: relative;
    padding-left: 56px;
}

    .pct-notification .k-notification-success .status-bar {
        position: absolute;
        left: -24px;
        top: -2px;
        bottom: -2px;
        width: 6px;
        background: linear-gradient(180deg, var(--kendo-color-success, #55a554) 0%, var(--kendo-color-success-hover, #3e973e) 100%);
        border-radius: 16px 0 0 16px;
        box-shadow: 0 0 12px var(--kendo-color-success, #55a554), inset 0 0 4px rgba(255, 255, 255, 0.3);
    }

    .pct-notification .k-notification-success .k-icon {
        color: var(--kendo-color-success, #55a554);
        animation: iconPulse 2s ease-in-out infinite;
    }

.pct-notification .k-notification-error {
    position: relative;
    padding-left: 56px;
}

    .pct-notification .k-notification-error .status-bar {
        position: absolute;
        left: -24px;
        top: -2px;
        bottom: -2px;
        width: 6px;
        background: linear-gradient(180deg, var(--kendo-color-error, #c2666b) 0%, var(--kendo-color-error-hover, #b85156) 100%);
        border-radius: 16px 0 0 16px;
        box-shadow: 0 0 12px var(--kendo-color-error, #c2666b), inset 0 0 4px rgba(255, 255, 255, 0.3);
    }

    .pct-notification .k-notification-error .k-icon {
        color: var(--kendo-color-error, #c2666b);
        animation: iconShake 0.5s ease-in-out;
    }

.pct-notification .k-notification-warning {
    position: relative;
    padding-left: 56px;
}

    .pct-notification .k-notification-warning .status-bar {
        position: absolute;
        left: -24px;
        top: -2px;
        bottom: -2px;
        width: 6px;
        background: linear-gradient(180deg, var(--kendo-color-warning, #ffc80a) 0%, var(--kendo-color-warning-hover, #f5c000) 100%);
        border-radius: 16px 0 0 16px;
        box-shadow: 0 0 12px var(--kendo-color-warning, #ffc80a), inset 0 0 4px rgba(255, 255, 255, 0.3);
    }

    .pct-notification .k-notification-warning .k-icon {
        color: var(--kendo-color-warning, #ffc80a);
        animation: iconBounce 1s ease-in-out;
    }

.pct-notification .k-notification-info {
    position: relative;
    padding-left: 56px;
}

    .pct-notification .k-notification-info .status-bar {
        position: absolute;
        left: -24px;
        top: -2px;
        bottom: -2px;
        width: 6px;
        background: linear-gradient(180deg, var(--kendo-color-info, #0a7eff) 0%, var(--kendo-color-info-hover, #096edf) 100%);
        border-radius: 16px 0 0 16px;
        box-shadow: 0 0 12px var(--kendo-color-info, #0a7eff), inset 0 0 4px rgba(255, 255, 255, 0.3);
    }

    .pct-notification .k-notification-info .k-icon {
        color: var(--kendo-color-info, #0a7eff);
        animation: iconRotate 2s ease-in-out;
    }

/* Enhanced close button styling */
.pct-notification .k-notification-closable .k-icon-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    opacity: 0.7;    
}

    .pct-notification .k-notification-closable .k-icon-close:hover {
        background: rgba(0, 0, 0, 0.08);
        opacity: 1;
        transform: scale(1.1) rotate(90deg);
        border-color: rgba(0, 0, 0, 0.12);
    }

/* Dark theme close button */
[data-theme="dark"] .pct-notification .k-notification-closable .k-icon-close {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);    
}

    [data-theme="dark"] .pct-notification .k-notification-closable .k-icon-close:hover {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.2);
    }

/* Flamboyant entrance animation */
@keyframes notificationSlideIn {
    0% {
        transform: translateX(150%) rotate(15deg) scale(0.8);
        opacity: 0;
    }

    50% {
        transform: translateX(-10%) rotate(-2deg) scale(1.05);
        opacity: 0.8;
    }

    70% {
        transform: translateX(5%) rotate(1deg) scale(0.98);
        opacity: 0.9;
    }

    100% {
        transform: translateX(0) rotate(0deg) scale(1);
        opacity: 1;
    }
}

/* Flamboyant exit animation */
.pct-notification .k-notification.k-notification-hiding {
    animation: notificationSlideOut 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes notificationSlideOut {
    0% {
        transform: translateX(0) rotate(0deg) scale(1);
        opacity: 1;
    }

    30% {
        transform: translateX(-20px) rotate(-3deg) scale(1.02);
        opacity: 1;
    }

    100% {
        transform: translateX(150%) rotate(20deg) scale(0.7);
        opacity: 0;
    }
}

/* Icon animations */
@keyframes iconPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.15);
        opacity: 0.8;
    }
}

@keyframes iconShake {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-3px);
    }

    75% {
        transform: translateX(3px);
    }
}

@keyframes iconBounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes iconRotate {
    0% {
        transform: rotate(0deg);
    }

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

/* Responsive adjustments */
@media (max-width: 640px) {
    .pct-notification {
        left: 16px;
        right: 16px;
        width: auto;
        min-width: unset;
        max-width: unset;
    }

        .pct-notification .k-notification {
            padding: 20px 28px 20px 40px;
        }
}

/* Enhanced hover effect for desktop */
@media (hover: hover) {
    .pct-notification .k-notification {
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

        .pct-notification .k-notification:hover {
            transform: translateY(-4px) translateX(-4px);
            box-shadow: 0 8px 16px -3px rgba(0, 0, 0, 0.2), 0 4px 8px -2px rgba(0, 0, 0, 0.12), 0 32px 64px -16px rgba(0, 0, 0, 0.24), 0 16px 32px -8px rgba(0, 0, 0, 0.16), inset 0 1px 0 0 rgba(255, 255, 255, 0.8);
        }

    /* Enhanced shadow for dark theme hover */
    [data-theme="dark"] .pct-notification .k-notification:hover {
        box-shadow: 0 8px 16px -3px rgba(0, 0, 0, 0.5), 0 4px 8px -2px rgba(0, 0, 0, 0.4), 0 32px 64px -16px rgba(0, 0, 0, 0.6), 0 16px 32px -8px rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
    }
}

.k-notification-container {
    margin: 8px;
}