html, body { height: 100%; overflow: hidden; user-select: none; margin: 0; padding: 0; font-size: 10px; }

html {
    --side-panel-width: 55rem;
    --anim-duration: 0.4s;
    --idle-warning-transition: 5s;
    --ui-master-color: #007AFF;
    --ui-master-light-color: #83B8F1;
    --catalog-padding: 1.6rem;
}
 
* {
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    /* touch-action: none; */
}

scroll-area {
    touch-action: pan-x pan-y;
}

div[rotatedevice] {
    position: fixed;
    left: 0; top: 0; width: 100%; height: 100%;
    background-image: url(images/phone_rotate.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 40dvh;
    background-color: rgba(255,255,255,1);
    display: none;
    z-index: 5000;
}

.spinner {
    position: absolute;
    left: 50%; top: 50%; transform: translate(-50%,-50%);
    width: 8rem; height: 8rem;
    opacity: 0;
    transition: opacity var(--anim-duration);
}

.spinner.visible {
    opacity: 1;
}

main {
    position: absolute;
    left: 0; top: 0; width: 100%; height: 100%;
    overflow: hidden;
}


#plan {
    position: absolute; 
    left: 0; top: 0; width: 100%; height: 100%;
    transition: left var(--anim-duration), height var(--anim-duration);
    /* background-image: url(../../data/media/gallery/a871450248f2cbb91b1727c859780e297088c245.jpg); */
    /* background-size: cover; */
    z-index: 10;
}


aside {
    box-sizing: border-box;
    position: absolute;
    right: calc(0px - var(--side-panel-width)); top: 0; height: 100%;
    width: var(--side-panel-width); 
    border-left: 1px solid #fff;
    box-shadow: 0 0 3rem rgba(0,0,0,0.2);
    opacity: 1;
    pointer-events: none;
    transition: width var(--anim-duration), height var(--anim-duration), opacity var(--anim-duration), right var(--anim-duration);
    overflow: hidden;
    z-index: 20;
}

aside::before {
    content: '';
    position: absolute;
    box-sizing: border-box;
    left: 0; bottom: 0; width: 100%; top: 0;
    backdrop-filter: blur(20px);
    background-color: rgba(255,255,255,0.5);
    transition: height calc(var(--anim-duration) / 3), backdrop-filter calc(var(--anim-duration) / 3);
    z-index: -1;
}

aside section {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--anim-duration);
}

aside section.card {
    position: absolute;
    left: 0; top: 0; width: 100%; height: 100%;
    z-index: 600;
}

aside section.search {
    position: relative;
    left: 0; top: 0; width: 100%; height: var(--search-section-height);
    z-index: 500;
}

aside section.topblur {
    position: absolute;
    left: 0; top: 0; width: 100%; height: var(--topblur-height);
    backdrop-filter: blur(20px);
    background-color: rgba(255,255,255,0.5);
    box-shadow: 0 0 2rem rgba(0,0,0,0.15);
    opacity: 1;
    pointer-events: none;
    transition: height calc(var(--anim-duration) / 3);
    z-index: 400;
}

aside section.kwords {
    position: absolute;
    left: 0; top: 0rem; width: 100%; height: 100%;
    z-index: 300;
}

aside section.categories {
    position: absolute;
    left: 0; top: 0rem; width: 100%; height: 100%;
    z-index: 200;
}

aside section.items {
    position: absolute;
    left: 0; top: 0rem; width: 100%; height: 100%;
    z-index: 100;
}





.overlay {
    position: absolute;
    left: 0; top: 0; width: 100%; height: 100%;
    backdrop-filter: blur(10px);
    background-color: rgba(255,255,255,0.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--anim-duration), width var(--anim-duration);
    z-index: 1000;
}

.overlay::after {
    content: '';
    position: absolute;
    left: 100%; top: 0; width: var(--side-panel-width); height: 100%;
    background-color: rgba(0,0,0,0.0);
}

body.idle_promo .overlay::after {
    display: none;
}

.overlay::before {
    content: '';
    position: absolute;
    display: none;   
    box-sizing: border-box; 
    top: 1.6rem; right: 1.6rem; width: 7rem; height: 7rem;
    background-color: #007AFF;
    background-image: url(images/icon_btn_x_white.svg);
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 1.8rem;
    border: 0;
    cursor: pointer;
    transform: rotate(0deg);
    transition: transform var(--anim-duration);
    transition-delay: 0.1s; 
    z-index: 1000;
}

.overlay:has(app-module-media:not(:active)):active::before { 
    transform: scale(1.3);
    transition: transform var(--anim-duration);
    transition-delay: 0s; 
}


.overlay.gallery {
    z-index: 900;
}

.overlay.keyboard {
    backdrop-filter: blur(5px);
    background-color: rgba(255,255,255,0.0);
    z-index: 950;
}

.overlay.keyboard::after {
    pointer-events: none;
}

.overlay app-module-media {
    position: absolute;
    box-sizing: border-box;
    width: 100%; height: 100%;
    /* --gallery-viewpot-padding: 50px; */
}


#catalog {
    position: absolute;
    left: 0; top: 0; width: 100%; height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--anim-duration);
}











#plan .ui_stage {
    position: absolute; 
    left: 0; top: 0;
    width: calc(100% - var(--side-panel-width)); height: 100%;
    pointer-events: none;
    z-index: 1000;
}

#plan .ui_stage .btns_stage {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
} 





#main {
    position: absolute;
    left: 0; top: 0; width: 100%; height: 100%;
    transition: height var(--anim-duration);
    overflow: hidden;
}