/*
    Copyright (c) BlazeInferno64 --> https://github.com/blazeInferno64
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
:root{
    --ff: "Poppins", sans-serif
}
*,
*::after,
*::before{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
button,select,textarea,input{
    outline: none;
}
a{
    text-decoration: none;
    color: inherit;
}
li{
    list-style: none;
}
body{
    font-family: var(--ff);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background: rgba(30,30,30);
    overflow:hidden ;
}
.file{
    display: none;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}
.app{
    background: #fff;
    width: 100vw;
    height: 100vh;
    border-radius: .3rem;
    user-select: none;
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow: none;
}
.app-head{
    width: 100%;
    padding: .3rem .5rem;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
}
.img{
    width: 20px;
}
.app-options{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .3rem .7rem .3rem;
    margin-top: .5rem;
}
.app-options ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
#file,#help,#edit,.set{
    background: transparent;
    border-radius: .2rem;
    position: relative;
    z-index: 2;
}
.set{
    padding: .5rem;
}
#file .fl, #edit .ed, #help .he{
    padding: .5rem;
}
#file:hover,#help:hover,#edit:hover,.set:hover{
    background: #dedede;
}
#file.active,#edit.active,#help.active{
    background: #dedede;
}
.set{
    cursor: pointer;
    transition: background .1s ease-in-out;
}
.set:active{
    scale: .95;
}
.action-list,.edit-list,.help-list{
    position: absolute;
    left: 0;
    background: #dedede;
    color: #111;
    width: fit-content;
    z-index: 1;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: fit-content;
    padding: .5rem .4rem;
    border-radius: .3rem;
    box-shadow: 0 10px 20px 0 rgba(0,0,0,.6);
    margin-top: .5rem;
    transition: all .5s ease-in-out;
}
.action-list ul,.edit-list ul,.help-list ul{
    display: flex;
    height: 100%;
    width: 250px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.action-list ul li,.edit-list ul li,.help-list ul li{
    background: transparent;
    width: 100%;
    border-radius: .3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all .1s ease-in-out;
}
.action-list ul li:hover,.edit-list ul li:hover,.help-list ul li:hover{
    background: #a5a5a5;
}
.action-list ul li span,.help-list ul li span,.edit-list ul li span{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    padding: .5rem ;
}
.action-list ul li span p,.help-list ul li span p,.edit-list ul li p{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}
.text {
    background: #dedede;
    width: calc(100% - 2rem); /* Adjusted width */
    min-height: 0; /* Ensure minimum height */
    outline: none;
    color: #111;
    padding: .5rem 1rem;
    font-size: 1.2rem;
    overflow-y: auto; /* Vertical scrollbar if needed */
    white-space: pre;
    border: none;
}
.text::-webkit-scrollbar{
    background: transparent;
    width: 10px;
}
.text::-webkit-scrollbar-thumb{
    background: #4b494d;
    border-radius: .5rem;
    cursor: auto; /* Change cursor style to default */
}
.text::-webkit-scrollbar-thumb:hover{
    background: hsl(270, 3%, 39%);
    border-radius: .5rem;
}
.text::-webkit-scrollbar-thumb:active{
    background: hsl(270, 3%, 49%);
    border-radius: .5rem;
}
.text::-webkit-scrollbar-corner{
    background: transparent;
}
.text::-webkit-scrollbar,.text::-webkit-scrollbar-thumb,.text::-webkit-scrollbar-corner{
    cursor: default;
}
.main {
    flex: 1; /* Allow it to grow */
    width: 100%;
    max-height: calc(100% - 2.3rem); /* Adjusted max height */
    display: flex;
    cursor: text;
    background: #dedede;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden; /* Hide overflow if any */
}
.footer{
    border-top: 1px solid #111;
    cursor: default;
    width: 100%;
    padding: .3rem .5rem;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #111;
}
.footer .info{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}
.info p{
    padding: .2rem .5rem;
}
.brow,.enc{
    display: flex;
    align-items: center;
}
.enc {
    margin-left: .5rem;
}
.srch-bg{
    position: fixed;
    height: 100vh;
    width: 100%;
    z-index: 7;
    user-select: none;
    background: rgba(0,0,0,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.srch-card{
    color: #111;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 350px;
    background: #dedede;
    box-shadow: 0 10px 20px 0 rgba(0,0,0,.6);
    transition: all .5s ease-in-out;
    overflow: hidden;
    border-radius: .3rem;
}
.srch-card .srch-head{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .3rem .5rem;
    font-size: 1.3rem;
}
.srch-head #close-srch{
    font-size: 2rem;
    background: transparent;
    width: 40px;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: all .1s ease-in-out;
}
.srch-head #close-srch:hover{
    background: #908f8f;
}
.srch-card .srch-main{
    background: #afadad;
    height: fit-content;
    width: 100%;
    padding: .3rem .5rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}
.srch-main .in{
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.in label{
    font-size: 1.1rem;
    width: 100%;
    background: #ccc;
    padding: .3rem .5rem;
    border-top-left-radius: .3rem;
    border-top-right-radius: .3rem;
}
.in input{
    border: none;
}
.in .srch,.in .rep{
    padding: .3rem .5rem;
    width: 100%;
    font-size: 1.1rem;
    border-bottom-left-radius: .3rem;
    border-bottom-right-radius: .3rem;
    background: #fff;
    color: #111;
}
.res{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.replace{
    width: 50%;
    font-size: 1.13rem;
    margin-bottom: .3rem;
    border: none;
    padding: .5rem 1rem;
    cursor: pointer;
    border-radius: .3rem;
    background: rgb(13, 138, 75);
    color: #fff;
    transition: all .1s ease-in-out;
}
.replace:hover{
    background: hsl(150, 83%, 25%);
}
.replace:active{
    scale: .97;
}
.f-bg{
    position: fixed;
    height: 100vh;
    width: 100%;
    z-index: 8;
    user-select: none;
    background: rgba(0,0,0,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.f-bg .f-card{
    color: #111;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 350px;
    background: #dedede;
    box-shadow: 0 10px 20px 0 rgba(0,0,0,.6);
    transition: all .5s ease-in-out;
    overflow: hidden;
    border-radius: .3rem;
}
.f-card .f-head{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .3rem .5rem;
    font-size: 1.3rem;
}
.f-head .f-close{
    font-size: 2rem;
    background: transparent;
    width: 40px;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: all .1s ease-in-out;
}
.f-head .f-close:hover{
    background: #908f8f;
}
.f-card .f-main{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.f-main .f-info{
    background: #afadad;
    height: fit-content;
    width: 100%;
    padding: .3rem .5rem;
    white-space: pre;
    overflow: auto;
    font-size: 1.13rem;
    user-select: auto;
    font-family: monospace;
}
.f-main .f-btns{
    margin-bottom: .5rem;
    margin-top: .5rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem 1rem;
    gap: 5px;
}
.f-info::-webkit-scrollbar{
    background: transparent;
    width: 10px;
}
.f-info::-webkit-scrollbar-thumb{
    background: #4b494d;
    border-radius: .5rem;
    cursor: auto; /* Change cursor style to default */
}
.f-info::-webkit-scrollbar-thumb:hover{
    background: hsl(270, 3%, 39%);
    border-radius: .5rem;
}
.f-info::-webkit-scrollbar-thumb:active{
    background: hsl(270, 3%, 49%);
    border-radius: .5rem;
}
.f-info::-webkit-scrollbar-corner{
    background: transparent;
}
.f-info::-webkit-scrollbar,.f-info::-webkit-scrollbar-thumb,.f-info::-webkit-scrollbar-corner{
    cursor: default;
}
.f-btns button{
    cursor: pointer;
    width: 50%;
    font-size: 1.3rem;
    padding: .5rem 1rem;
    transition: all .1s ease-in-out;
}
.f-down,.f-copy{
    outline: none;
    border: none;
    border-radius: .3rem;
}
.f-down{
    background: transparent;
    color: rgb(249, 55, 55);
    border: 2px solid rgb(249, 55, 55);
}
.f-copy{
    background: transparent;
    border: 2px solid rgb(14, 126, 186);
    color: rgb(14, 126, 186);
}
.f-down:hover{
    background: rgb(249, 55, 55);
    color: #111;
}
.f-copy:hover{
    background: rgb(14, 126, 186);
    color: #111;
}
.f-down:active,.f-copy:active{
    scale: .97;
}
.body.dark{
    background: rgba(30,30,30);
}
#no-script.dark{
    color: #fff;
}
.app.dark{
    background: rgba(30,30,30);
    color: #fff;
}
.app-head.dark{
    background: rgba(30,30,30);
}
#file.dark:hover,#edit.dark:hover,#help.dark:hover,.set.dark:hover{
    background: #2a2d2e;
}
.main.dark{
    background: #2a2d2e;
    color: #fff;
}
.text.dark{
    background: #2a2d2e;
    color: #fff;
}
.footer.dark{
    background: rgba(30,30,30);
    color: #fff;
}
#file.active.dark,#edit.active.dark,#help.active.dark{
    background: #2a2d2e;
}
.action-list.dark{
    background: #1a1a1a;
    color: #fff;
}
.action-list.dark ul li:hover{
    background: #4b494d;
}
.edit-list.dark{
    background: #1a1a1a;
    color: #fff;
}
.edit-list.dark ul li:hover{
    background: #4b494d;
}
.help-list.dark{
    background: #1a1a1a;
    color: #fff;
}
.help-list.dark ul li:hover{
    background: #4b494d;
}
.srch-card.dark,.f-card.dark{
    background: rgba(30,30,30);
    color: #fff;
}
.srch-card.dark .srch-head #close-srch:hover,.f-card.dark .f-head .f-close:hover{
    background: #4b494d;
}
.srch-card.dark .srch-main,.f-card.dark .f-main .f-info{
    background: #2a2d2e;
}
.srch-card.dark .srch-main .in{
    color: #fff;
}
.srch-card.dark .srch-main .in label{
    background: rgba(30,30,30);
}
.srch-card.dark .srch-main .in input{
    background: #4b494d;
    color: #fff;
}
.err{
    color: rgb(249, 55, 55);
}
.ok{
    color: rgb(36, 161, 99);
}
.none{
    display: none;
}
.hide{
    opacity: 0;
    pointer-events: none;
}
.up{
    transform: translateY(-100%);
}
.down{
    transform: translateY(100%);
}
.ani{
    animation: pop 1s ease-in-out;
}
.anti-ani{
    animation: unpop 1s ease-in-out;
}
.no{
    opacity: .55;
    pointer-events: none;
}

@keyframes pop {
    from{
        scale: 0;
    }
    to{
        scale: 1;
    }
}
@keyframes unpop {
    from{
        scale: 1;
    }
    to{
        scale: 0;
    }
}

@media (max-width: 250px) {
    .action-list ul,.help-list ul,.edit-list ul{
        width: 93%;
    }
}
@media (max-width: 350px) {
    .srch-card{
        width: 93%;
    }   
}
@media (max-height: 700px) {
    .text{
        height: 100%;
    }
}

@media (prefers-color-scheme: dark) {
    #no-script{
        color: #fff;
    }
}