/* Сброс стилей */
/* Убрать голубую подсветку при тапах в моб версии */
@media (max-width: 1023px) {
    .classic {
        * {
            -webkit-tap-highlight-color: transparent;
        }
    }
}
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
:active, :focus {
    outline: none; /* firefox fix */
}
button {
    background-color: transparent; /* перебить встроенные */
    border-width: 0; /* перебить встроенные */
}
/* Сброс стилей */

:root {
    /* Шум */
    --noise-dark: url(../img/noise-dark.png);
    --noise-light: url(../img/noise-light.png);

    /* Глаз на виджете паролей */
    --eye-on-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 111 111'%3E%3Cdefs%3E%3Cstyle%3E.a,.c%7Bfill:none;%7D.b%7Bfill:%23beafa2;%7D.c%7Bstroke:%23beafa2;stroke-miterlimit:10;stroke-width:7px;%7D%3C/style%3E%3C/defs%3E%3Crect class='a' width='111' height='111'/%3E%3Cpath class='b' d='M55.61,93A57.36,57.36,0,0,1,2,56.45l-.5-1.28L2,53.88A57.36,57.36,0,0,1,55.61,17.37h0a57.36,57.36,0,0,1,53.65,36.51l.49,1.27-.48,1.27C101,77.94,79,93,55.61,93ZM9,55.17A50.39,50.39,0,0,0,55.61,86c20.06,0,39-12.6,46.61-30.8A50.37,50.37,0,0,0,55.61,24.37h0A50.37,50.37,0,0,0,9,55.17Z' transform='translate(-0.11)'/%3E%3Cpath class='b' d='M55.61,80.17a25,25,0,1,1,25-25A25,25,0,0,1,55.61,80.17Zm0-41.55A16.55,16.55,0,1,0,72.16,55.17,16.57,16.57,0,0,0,55.61,38.62Z' transform='translate(-0.11)'/%3E%3Cpath class='c' d='M103.77,88.28' transform='translate(-0.11)'/%3E%3Cpath class='c' d='M19.55,7.34' transform='translate(-0.11)'/%3E%3C/svg%3E");
    --eye-off-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 111 111'%3E%3Cdefs%3E%3Cstyle%3E.a,.b%7Bfill:none;%7D.b%7Bstroke:%23beafa2;stroke-miterlimit:10;stroke-width:7px;%7D.c%7Bfill:%23beafa2;%7D%3C/style%3E%3C/defs%3E%3Crect class='a' width='111' height='111'/%3E%3Cpath class='b' d='M103.77,88.28' transform='translate(-0.11)'/%3E%3Cpath class='b' d='M19.55,7.34' transform='translate(-0.11)'/%3E%3Cpath class='c' d='M78.12,66A25,25,0,0,0,44.75,32.66l6.55,6.55A16.49,16.49,0,0,1,71.57,59.48Z' transform='translate(-0.11)'/%3E%3Cpath class='c' d='M109.26,53.88A57.36,57.36,0,0,0,55.61,17.37h0a58.11,58.11,0,0,0-21.89,4.26l5.44,5.44a51.16,51.16,0,0,1,16.45-2.7,50.37,50.37,0,0,1,46.61,30.81A49.46,49.46,0,0,1,87,74.93l5,5a56.18,56.18,0,0,0,17.29-23.47l.48-1.27Z' transform='translate(-0.11)'/%3E%3Cpath class='c' d='M86.21,84l-5.08-5.08h0l-7-7-6-6L44.83,42.64l-6-6L32.22,30h0l-5.16-5.17h0L12.17,10,7.22,14.93,21.07,28.78A57.62,57.62,0,0,0,2,53.88l-.5,1.29L2,56.45A57.36,57.36,0,0,0,55.61,93,57,57,0,0,0,79.79,87.5L97,104.67l5-5L86.2,84ZM62.5,70.21a16.37,16.37,0,0,1-6.89,1.51A16.56,16.56,0,0,1,39.06,55.17a16.3,16.3,0,0,1,1.52-6.88ZM55.61,86A50.39,50.39,0,0,1,9,55.17,50.55,50.55,0,0,1,26.09,33.8l8.26,8.26a24.73,24.73,0,0,0-3.74,13.11A25,25,0,0,0,68.73,76.44l5.76,5.76A49.74,49.74,0,0,1,55.61,86Z' transform='translate(-0.11)'/%3E%3C/svg%3E");
    --eye-on-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 111 111'%3E%3Cdefs%3E%3Cstyle%3E.a,.c%7Bfill:none;%7D.b%7Bfill:%239b8b84;%7D.c%7Bstroke:%239b8b84;stroke-miterlimit:10;stroke-width:7px;%7D%3C/style%3E%3C/defs%3E%3Crect class='a' width='111' height='111'/%3E%3Cpath class='b' d='M55.61,93A57.36,57.36,0,0,1,2,56.45l-.5-1.28L2,53.88A57.36,57.36,0,0,1,55.61,17.37h0a57.36,57.36,0,0,1,53.65,36.51l.49,1.27-.48,1.27C101,77.94,79,93,55.61,93ZM9,55.17A50.39,50.39,0,0,0,55.61,86c20.06,0,39-12.6,46.61-30.8A50.37,50.37,0,0,0,55.61,24.37h0A50.37,50.37,0,0,0,9,55.17Z' transform='translate(-0.11)'/%3E%3Cpath class='b' d='M55.61,80.17a25,25,0,1,1,25-25A25,25,0,0,1,55.61,80.17Zm0-41.55A16.55,16.55,0,1,0,72.16,55.17,16.57,16.57,0,0,0,55.61,38.62Z' transform='translate(-0.11)'/%3E%3Cpath class='c' d='M103.77,88.28' transform='translate(-0.11)'/%3E%3Cpath class='c' d='M19.55,7.34' transform='translate(-0.11)'/%3E%3C/svg%3E");
    --eye-off-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 111 111'%3E%3Cdefs%3E%3Cstyle%3E.a,.b%7Bfill:none;%7D.b%7Bstroke:%239b8b84;stroke-miterlimit:10;stroke-width:7px;%7D.c%7Bfill:%239b8b84;%7D%3C/style%3E%3C/defs%3E%3Crect class='a' width='111' height='111'/%3E%3Cpath class='b' d='M103.77,88.28' transform='translate(-0.11)'/%3E%3Cpath class='b' d='M19.55,7.34' transform='translate(-0.11)'/%3E%3Cpath class='c' d='M78.12,66A25,25,0,0,0,44.75,32.66l6.55,6.55A16.49,16.49,0,0,1,71.57,59.48Z' transform='translate(-0.11)'/%3E%3Cpath class='c' d='M109.26,53.88A57.36,57.36,0,0,0,55.61,17.37h0a58.11,58.11,0,0,0-21.89,4.26l5.44,5.44a51.16,51.16,0,0,1,16.45-2.7,50.37,50.37,0,0,1,46.61,30.81A49.46,49.46,0,0,1,87,74.93l5,5a56.18,56.18,0,0,0,17.29-23.47l.48-1.27Z' transform='translate(-0.11)'/%3E%3Cpath class='c' d='M86.21,84l-5.08-5.08h0l-7-7-6-6L44.83,42.64l-6-6L32.22,30h0l-5.16-5.17h0L12.17,10,7.22,14.93,21.07,28.78A57.62,57.62,0,0,0,2,53.88l-.5,1.29L2,56.45A57.36,57.36,0,0,0,55.61,93,57,57,0,0,0,79.79,87.5L97,104.67l5-5L86.2,84ZM62.5,70.21a16.37,16.37,0,0,1-6.89,1.51A16.56,16.56,0,0,1,39.06,55.17a16.3,16.3,0,0,1,1.52-6.88ZM55.61,86A50.39,50.39,0,0,1,9,55.17,50.55,50.55,0,0,1,26.09,33.8l8.26,8.26a24.73,24.73,0,0,0-3.74,13.11A25,25,0,0,0,68.73,76.44l5.76,5.76A49.74,49.74,0,0,1,55.61,86Z' transform='translate(-0.11)'/%3E%3C/svg%3E");

    /* Галочка в выпадающем списке */
    --select-icon-dark: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23888888' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    --select-icon-light: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23b9a097' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");

    /* Чекбокс */
    --check-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");

    /* Лупа */
    --search-icon-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 489.68 489.68'%3E%3Cdefs%3E%3Cstyle%3E.a-search%7Bfill:%23d09074;%7D%3C/style%3E%3C/defs%3E%3Cpath class='a-search' d='M0,196.4C0,304.9,88,392.83,196.5,392.8A196.53,196.53,0,0,0,320.1,349l135,135A20.44,20.44,0,0,0,484,455.1l-135-135c68.29-84.31,55.3-208-29-276.3A196.42,196.42,0,0,0,196.4,0C88,0,0,87.9,0,196.4Zm40.8,0A155.6,155.6,0,1,1,196.4,352h0A155.66,155.66,0,0,1,40.8,196.4Z'/%3E%3C/svg%3E");
    --search-icon-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 489.68 489.68'%3E%3Cdefs%3E%3Cstyle%3E.a-search%7Bfill:%239b8b84;%7D%3C/style%3E%3C/defs%3E%3Cpath class='a-search' d='M0,196.4C0,304.9,88,392.83,196.5,392.8A196.53,196.53,0,0,0,320.1,349l135,135A20.44,20.44,0,0,0,484,455.1l-135-135c68.29-84.31,55.3-208-29-276.3A196.42,196.42,0,0,0,196.4,0C88,0,0,87.9,0,196.4Zm40.8,0A155.6,155.6,0,1,1,196.4,352h0A155.66,155.66,0,0,1,40.8,196.4Z'/%3E%3C/svg%3E");

    /* Крестик */
    --icon-cross-dark: url("data:image/svg+xml,%0A%3Csvg version='1.1' viewBox='0 0 37.819 37.819' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.a-clear%7Bfill:none;stroke-linecap:round;stroke-width:5;stroke:%23d09074%7D%3C/style%3E%3Cg transform='translate(-32.072 -86.124)'%3E%3Cpath class='a-clear' d='m32.34 86.392 37.284 37.284'/%3E%3Cpath class='a-clear' d='m69.624 86.392-37.284 37.284'/%3E%3C/g%3E%3C/svg%3E");
    --icon-cross-light: url("data:image/svg+xml,%0A%3Csvg version='1.1' viewBox='0 0 37.819 37.819' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.a-clear%7Bfill:none;stroke-linecap:round;stroke-width:5;stroke:%239b8b84%7D%3C/style%3E%3Cg transform='translate(-32.072 -86.124)'%3E%3Cpath class='a-clear' d='m32.34 86.392 37.284 37.284'/%3E%3Cpath class='a-clear' d='m69.624 86.392-37.284 37.284'/%3E%3C/g%3E%3C/svg%3E");

    /* Корзина */
    --icon-trash-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35'%3E%3Cdefs%3E%3Cstyle%3E.a,.b%7Bfill:none;%7D.a%7Bstroke:%239b8b84;stroke-miterlimit:10;stroke-width:1.7px;%7D%3C/style%3E%3C/defs%3E%3Cline class='a' x1='9.63' y1='12.04' x2='25.38' y2='12.04'/%3E%3Cline class='a' x1='15.14' y1='8.75' x2='19.86' y2='8.75'/%3E%3Cpath class='a' d='M23.87,14.77v8.84a2.68,2.68,0,0,1-2.68,2.64H13.82a2.68,2.68,0,0,1-2.64-2.64V14.77'/%3E%3Cline class='a' x1='15.33' y1='15.89' x2='15.33' y2='21.96'/%3E%3Cline class='a' x1='19.69' y1='15.89' x2='19.69' y2='21.96'/%3E%3Crect class='b' width='35' height='35'/%3E%3C/svg%3E");
    --icon-trash-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35'%3E%3Cdefs%3E%3Cstyle%3E.a,.b%7Bfill:none;%7D.a%7Bstroke:%239b8b84;stroke-miterlimit:10;stroke-width:1.7px;%7D%3C/style%3E%3C/defs%3E%3Cline class='a' x1='9.63' y1='12.04' x2='25.38' y2='12.04'/%3E%3Cline class='a' x1='15.14' y1='8.75' x2='19.86' y2='8.75'/%3E%3Cpath class='a' d='M23.87,14.77v8.84a2.68,2.68,0,0,1-2.68,2.64H13.82a2.68,2.68,0,0,1-2.64-2.64V14.77'/%3E%3Cline class='a' x1='15.33' y1='15.89' x2='15.33' y2='21.96'/%3E%3Cline class='a' x1='19.69' y1='15.89' x2='19.69' y2='21.96'/%3E%3Crect class='b' width='35' height='35'/%3E%3C/svg%3E");

    /* Транслитерация */
    --translit-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36.86 18.94'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;stroke:%23d09074;stroke-linecap:round;stroke-width:3px;%7D%3C/style%3E%3C/defs%3E%3Cpath class='a' d='M22.06,10.83H27.7a8,8,0,0,1,8,8h0a8,8,0,0,1-8,8H22.06' transform='translate(-0.3 -9.33)'/%3E%3Cpath class='a' d='M15.41,26.78H9.77a8,8,0,0,1-8-8h0a8,8,0,0,1,8-8h5.64' transform='translate(-0.3 -9.33)'/%3E%3Cline class='a' x1='8.31' y1='9.47' x2='28.56' y2='9.47'/%3E%3C/svg%3E");
    --translit-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36.86 18.94'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;stroke:%239b8b84;stroke-linecap:round;stroke-width:3px;%7D%3C/style%3E%3C/defs%3E%3Cpath class='a' d='M22.06,10.83H27.7a8,8,0,0,1,8,8h0a8,8,0,0,1-8,8H22.06' transform='translate(-0.3 -9.33)'/%3E%3Cpath class='a' d='M15.41,26.78H9.77a8,8,0,0,1-8-8h0a8,8,0,0,1,8-8h5.64' transform='translate(-0.3 -9.33)'/%3E%3Cline class='a' x1='8.31' y1='9.47' x2='28.56' y2='9.47'/%3E%3C/svg%3E");

    /* Дискета */
    --icon-save-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 769.83 769.83'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;stroke:%23d09074;stroke-miterlimit:10;stroke-width:55px;%7D%3C/style%3E%3C/defs%3E%3Ccircle class='a' cx='384.91' cy='384.91' r='102.48'/%3E%3Cpath class='a' d='M750.91,258.62V687.83a63.08,63.08,0,0,1-63.08,63.08H89.17a63.08,63.08,0,0,1-63.08-63.08h0V89.17A63.08,63.08,0,0,1,89.17,26.09H518.38A98.74,98.74,0,0,1,588.17,55L722,188.83A98.74,98.74,0,0,1,750.91,258.62Z' transform='translate(-3.59 -3.59)'/%3E%3Cpath class='a' d='M464.15,26.09V129.44A46.11,46.11,0,0,1,418,175.55H187.48a46.11,46.11,0,0,1-46.11-46.11V26.09' transform='translate(-3.59 -3.59)'/%3E%3C/svg%3E");
    --icon-save-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 769.83 769.83'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;stroke:%239b8b84;stroke-miterlimit:10;stroke-width:55px;%7D%3C/style%3E%3C/defs%3E%3Ccircle class='a' cx='384.91' cy='384.91' r='102.48'/%3E%3Cpath class='a' d='M750.91,258.62V687.83a63.08,63.08,0,0,1-63.08,63.08H89.17a63.08,63.08,0,0,1-63.08-63.08h0V89.17A63.08,63.08,0,0,1,89.17,26.09H518.38A98.74,98.74,0,0,1,588.17,55L722,188.83A98.74,98.74,0,0,1,750.91,258.62Z' transform='translate(-3.59 -3.59)'/%3E%3Cpath class='a' d='M464.15,26.09V129.44A46.11,46.11,0,0,1,418,175.55H187.48a46.11,46.11,0,0,1-46.11-46.11V26.09' transform='translate(-3.59 -3.59)'/%3E%3C/svg%3E");

    /* Шестеренка */
    --icon-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3Cstyle%3E.a,.b%7Bfill:none;%7D.b%7Bstroke:%239b8b84%7D%3C/style%3E%3C/defs%3E%3Crect class='a' width='20' height='20'/%3E%3Cpath class='b' d='M12,14.41,12.8,14a.73.73,0,0,0,.33-.82l-.26-.89a.73.73,0,0,1,.53-.9l.89-.21a.73.73,0,0,0,.55-.7V9.56a.73.73,0,0,0-.55-.7l-.89-.22a.72.72,0,0,1-.52-.9l.26-.88A.71.71,0,0,0,12.81,6L12,5.59a.73.73,0,0,0-.88.13l-.64.66a.73.73,0,0,1-1,0l-.63-.67A.71.71,0,0,0,8,5.59L7.2,6a.73.73,0,0,0-.33.82l.26.89a.73.73,0,0,1-.53.9l-.89.21a.73.73,0,0,0-.55.7v.89a.73.73,0,0,0,.55.7l.89.22a.72.72,0,0,1,.52.9l-.26.88a.71.71,0,0,0,.33.82l.77.45a.73.73,0,0,0,.88-.13l.64-.66a.73.73,0,0,1,1,0l.63.67A.71.71,0,0,0,12,14.41Z'/%3E%3Ccircle class='b' cx='10' cy='10' r='1.4'/%3E%3C/svg%3E");
}

html {
    height: 100%;
    overflow: hidden; /* отключить свайп */
    &.dark {
        color-scheme: dark;
        background-color: #000;
    }
    &.light {
        color-scheme: light;
        background-color: #000;
    }
}

body {
    max-width: 120rem;
    margin: auto;
    display: grid;
    height: 100%;
    font-family: var(--sans-serif);
    font-size: var(--sans-serif-size);
    &:is(.dark *)  { background-color: #1e1d1d; background-image: var(--noise-dark); }
    &:is(.light *) { background-color: #e9e0dd; background-image: var(--noise-light); }
    @media (max-width: 1023px) {
        grid-template-rows: 48px 1fr;
        grid-template-areas: 
            "header" 
            "main";
    }
    @media (min-width: 1024px) {
        grid-template-rows: auto 1fr;
    }
    &.login {
        @media (min-width: 1024px) {
            grid-template-areas:
                "header"
                "main";
        }
    }
    &.logged {
        @media (min-width: 1024px) {
            grid-template-columns: auto 1fr;
            grid-template-areas:
                "header header"
                "aside main";
            position: relative;
        }
    }

    > .log {
        .panel();
        position: absolute;
        z-index: -1;
        &:is(body.log *) {
            z-index: 20;
        }
        width: calc(100% - 4rem);
        top: 2rem;
        left: 2rem;
        max-height: calc(100vh - 4rem);
        &:is(.classic *) {
            box-shadow: 4px 5px 0px 0 #00000077;
        }
        grid-template-rows: 1fr 2rem;

        .hist {
            display: grid;
            overflow-y: auto;
            row-gap: 0.5rem;
            a {
                .link();
            }

            > div {
                display: grid;
                grid-auto-flow: column;
                justify-content: start;
                column-gap: 0.5rem;

                .marker {
                    margin-top: 3px;
                    height: 1rem;
                    aspect-ratio: 1/1;
                    border-radius: 50%;
                    &:is(.result *)  { background-color: #71b300; }
                    &:is(.error *) { background-color: #e30000; }
                    &:is(.warning *) { background-color: #f5e624; }
                    &:is(.note *) { background-color: #d204ff; }
                }

                .date {
                    margin-top: 3px;
                    font-size: 0.8rem;
                    &:is(.dark *) {
                        color: #b3aaa3;
                    }
                }

                .del_file {
                    line-height: 1.5rem;
                }
            }
        }

        .footer {
            display: grid;
            grid-auto-flow: column;
            grid-template-columns: auto 1fr;
            &:is(.win7 *) { grid-template-columns: 36px 1fr; }
            column-gap: 1rem;
            
            .button {
                .button();
            }

            input {
                .input();
            }
        }
    }

    > header {
        grid-area: header;
        display: grid;
        padding: 0.5rem 1rem;
        @media (min-width: 1024px) {
            &:is(.logged *) {
                grid-template-columns: 1fr auto;
                column-gap: 1rem;
            }
        }
        @media (max-width: 1023px) {
            &:is(.logged *) {
                grid-template-columns: 1fr 48px;
                column-gap: 5px;
            }
        }

        .button {
            .button();
            &.active {
                .button-active();
            }
            padding: 0.25rem 1rem;
        }

        .tabs {
            display: grid;
            grid-auto-flow: column;
            justify-content: left;
            column-gap: 0.5rem;
            /* Прокрутка для кнопок */
            overflow-y: auto;
            scrollbar-width: none;

            @media (max-width: 1023px) {
                display: none;
            }

            [data-changed="true"] span {
                /* .changed-mid(); */
                &:is(.dark *) { --color: #00ffff; }
                &:is(.light *) { --color: #ea8000; }
                color: var(--color);
            }
        }

        .menu {
            display: grid;
            grid-auto-flow: column;
            column-gap: 24px;
            @media (width < 24rem) { column-gap: 1rem; }
            align-items: center;
            position: relative;
            &:is(body.logged *) {
                justify-self: start; /* Выравнивание влево на моб */
            }
            &:is(body.login *) {
                justify-self: end;
            }

            .button {
                &.preload {
                    padding: 0;
                    border: 0;
                    position: absolute;
                }

                &.result { color: #00e300 !important; }
                &.error { color: #e30000 !important; }
                &.warning { color: #f5e624 !important; }
            }

            > *:not(.button) {
                cursor: pointer;
                user-select: none;
                &:is(.dark *)  { color: #d09074; &:hover { color: #f0743f; } }
                &:is(.light *) { color: #764646; &:hover { color: #9b2e00; } }
            }
            
            a {
                text-decoration: none;
            }
        }

        .burger {
            display: none;
            @media (max-width: 1023px) {
                display: grid;
                justify-content: center;
                align-items: center;

                .icon {
                    width: 28px;
                    height: 12px;
                    position: relative;

                    span {
                        display: block;
                        position: absolute;
                        left: 0;
                        width: 100%;
                        height: 2px;
                        &:is(.dark *)  { background-color: #d09074; }
                        &:is(.light *) { background-color: #c33b00; }
                        &.line-1 {
                            top: 0;
                            &:is(body.menu *) {
                                top: 5px;
                                transform: rotate(45deg);
                            }
                        }
                        &.line-2 {
                            bottom: 0;
                            &:is(body.menu *) {
                                top: 5px;
                                transform: rotate(-45deg);
                            }
                        }
                    }
                }
            }
        }
    }

    > aside {
        overflow-y: auto;
        scrollbar-width: none;
        @media (min-width: 1024px) {
            grid-area: aside;
        }
        @media (max-width: 1023px) {
            position: fixed;
            width: 230px;
            left: 0;
            top: 0;
            bottom: 0;
            transform: translateX(-100%);
            z-index: 10;
            &:is(.dark *)  {
                background-color: #1e1d1d;
                background-image: var(--noise-dark);
            }
            &:is(.light *) {
                background-color: #ede9e8;
                background-image: var(--noise-light);
            }
            &:is(body.menu *) {
                transform: translateX(0);
            }
        }

        section {
            padding: 9px 0 10px 0;

            .title {
                padding: 5px 5px 5px 20px;
                &:is(.dark *)  { color: #8f786f; }
                &:is(.light *) { color: #8f786f; }
            }

            a {
                display: block;
                text-decoration: none;
                &:is(.dark *)  { color: #eabca9; }
                &:is(.light *) { color: #382218; }
                @media (max-width: 1023px) {
                    padding: 5px 10px 5px 36px;
                }
                @media (min-width: 1024px) {
                    padding: 3px 10px 3px 36px;
                }
                border-color: transparent;
                border-style: solid;
                border-width: 2px 2px 2px 0;
                &:is(.modern *) {
                    @media (min-width: 1024px) {
                        border-radius: 0 5px 5px 0;
                    }
                }

                &:hover {
                    &:is(.dark.classic *)  {
                        background-color: #38343340;
                        border-color: #393737;
                    }
                    &:is(.dark.modern *)  {
                        background-color: #38343340;
                        border-color: #38343340;
                    }
                    &:is(.light *) {
                        background-color: #fffbfb4d;
                        border-color: #fffbfb4d;
                    }
                }

                &.active {
                    &:is(.dark.classic *)  {
                        background-color: #111111;
                        border-color: #393737;
                    }
                    &:is(.dark.modern *)  {
                        background-color: #38343373;
                        border-color: #38343373;
                    }
                    &:is(.light *) {
                        background-color: #ffffff;
                        border-color: #ffffff;
                    }
                }

                &.red {
                    &:is(.dark.classic *)  {
                        background-color: #9f2624;
                        border-color: #ff0000;
                    }
                    &:is(.dark.modern *)  {
                        background-color: #9f2624;
                        border-color: #9f2624;
                    }
                    &:is(.light *) {
                        background-color: #ff8585;
                        border-color: #ff8585;
                    }
                }
            }
        }
    }


    > main {
        grid-area: main;
        overflow: hidden;
        &:is(.login *) {
            display: grid;
            grid-template-areas: ". center .";
            grid-template-columns: 1fr minmax(auto, 300px) 1fr;
            overflow-y: auto;

            .panel {
                .panel();
            }

            .select.widget {
                .select_widget();
            }

            .password.widget {
                .password_widget();
            }

            input {
                .input();
                font-family: var(--monospace);
                font-size: var(--monospace-size);
            }

            .button {
                .button();
                &:is(form > .button) {
                    min-height: 36px;
                    width: max-content;
                    padding: 0 16px;
                    justify-self: center;
                }
            }

            .center {
                display: grid;
                grid-template-rows: auto auto auto auto 1fr auto;
                grid-area: center;
                row-gap: 16px;

                .error {
                    display: grid;
                    align-items: center;
                    text-align: center;
                    min-height: 64px;
                    color: red;
                }

                .setup {
                    display: grid;
                    align-content: center;
                    justify-content: center;
                    min-height: 32px;
                }

                .support {
                    display: grid;
                    justify-content: center;
                    padding-bottom: 32px;
                    a {
                        .link();
                        padding: 8px 16px;
                    }
                }
            }
        }

        > section {
            &:not(:target) {
                display: none !important;
            }
        }
    }


    > .milk {
        @media (max-width: 1023px) {
            &:is(body.menu *) {
                display: block;
                position: fixed;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                opacity: 0.7;
                z-index: 5;
                &:is(.dark *)  { background-color: #181010; }
                &:is(.light *) { background-color: #18101071; }
            }
        }
    }


    > .notify {
        position: absolute;
        z-index: 800;
        display: inline-grid;
        pointer-events: none;
        @media (max-width: 1023px) {
            top: 48px;
            right: 5px;
        }
        @media (min-width: 1024px) {
            top: 38px;
            right: 94px;
        }
        
        .info {
            padding: 15px;
            margin-bottom: 10px;
            justify-self: right;
            border-width: 2px;
            border-style: solid;
            max-height: 200px;
            overflow-y: auto;
            &:is(.modern *) {
                border-radius: 5px;
            }
            &:is(.classic *) {
                box-shadow: 4px 5px 0px 0 #00000077;
            }
            &.result, &.notify {
                &:is(.dark.classic *)  {
                    background-color: #292827ed;
                    border-color: #999999;
                    color: #ffffff;
                }
                &:is(.dark.modern *)  {
                    background-color: #e9e0ddcc;
                    border-color: #e9e0ddcc;
                    color: #000000;
                }
                &:is(.light *) {
                    background-color: #4c3a36bf;
                    border-color: #4c3a36bf;
                    color: #ffffff;
                }
            }
            &.warning {
                &:is(.dark.classic *)  {
                    background-color: #292827ed;
                    border-color: #f5e624;
                    color: #ffffff;
                }
                &:is(.dark.modern *)  {
                    background-color: #e9e0ddcc;
                    border-color: #f5e624;
                    color: #000000;
                }
                &:is(.light *) {
                    background-color: #4c3a36bf;
                    border-color: #f5e624;
                    color: #ffffff;
                }
            }
            &.error {
                &:is(.dark.classic *)  {
                    background-color: #940002c4;
                    border-color: #999999;
                    color: #ffffff;
                }
                &:is(.dark.modern *)  {
                    background-color: #940002c4;
                    border-color: #940002c4;
                    color: #ffffff;
                }
                &:is(.light *) {
                    background-color: #940002c4;
                    border-color: #940002c4;
                    color: #ffffff;
                }
            }
            &.timeout {
                overflow: hidden;
                height: 0 !important;
                transition: height 0.5s, opacity 0.2s, padding 0.5s, margin 0.5s;
                opacity: 0;
                padding-top: 0;
                padding-bottom: 0;
                margin-bottom: 0;
                border-width: 0;
            }

            a {
                .link();
            }
        }
    }
}


#start {
    overflow-y: auto;
    scrollbar-width: none;
    max-height: 100%;

    @media (max-width: 1023px) {
        padding: 16px 6px;
    }

    @media (min-width: 1024px) {
        padding: 16px;
    }

    .panel {
        .panel();
        
        a {
            .link();
        }
    }
}


#auth {
    display: grid;
    padding: 0 1rem 1rem 1rem;
    max-height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
    row-gap: 1rem;

    .title {
        .title();
    }

    input {
        .input();
        font-family: var(--monospace);
        font-size: var(--monospace-size);
    }

    .password.widget {
        .password_widget();
    }

    .button {
        .button();
        
        &.save {
            max-width: max-content;
            justify-self: center;
        }
    }

    .panel {
        .panel();
    }

    form {
        @media (max-width: 1370px) {
            width: max-content;
            row-gap: 16px;
            padding: 16px 12px;
        }
        @media (min-width: 1371px) {
            grid-auto-flow: column;
            column-gap: 16px;
            justify-content: left;
            padding: 16px;
        }

        label {
            display: grid;

            @media (max-width: 1370px) {
                gap: 3px;
            }
            
            @media (min-width: 1371px) {
                grid-template-columns: auto auto;
                gap: 12px;
            }
        }
    }

    .active,
    .history {
        display: grid;
        row-gap: 8px;

        .sessions {
            @media (min-width: 1024px) {
                grid-template-columns: auto auto auto 1fr;
            }
            @media (max-width: 1023px) {
                row-gap: 16px;
                grid-template-columns: auto auto 1fr min-content;
            }

            .row {
                display: grid;
                grid-template-columns: subgrid;
                &:is(.win7 *) { grid-template-columns: 30px 160px 110px 1fr; }
                grid-column: 1 / -1;
                column-gap: 8px;
                font-size: 14px;
                @media (max-width: 1023px) {
                    grid-template-areas:
                    "date  ip    .     del"
                    "agent agent agent .";
                }
                &:is(.dark *) {
                    color: #b3aaa3;
                }
                &:is(.light *) {
                    color: #52473d;
                }
                &.current {
                    &:is(.dark *) {
                        color: #78ca78;
                    }
                    &:is(.light *) {
                        color: #008917;
                    }
                }

                .close {
                    height: 24px;
                }

                .date,
                .ip {
                    .inset();
                    justify-content: center;
                    &:is(.modern *) {
                        padding: 0;
                    }
                }

                .agent {
                    align-content: center;
                    @media (max-width: 1023px) {
                        grid-area: agent;
                    }
                }

            }
        }
    }
}


#phpinfo {
    &:is(.dark *) {
        color: #a38173;
    }
    &:is(.light *) {
        color: #563939;
    }
    font-family: var(--sans-serif);
    overflow-y: scroll;
    scrollbar-width: none;
    height: 100%;
    padding: 0 1rem 1rem 1rem;
    @media (max-width: 1023px) {
        padding: 0 6px 6px 6px;
        .e {word-break: break-word; min-width: 100px; max-width: 33%;}
        .h {word-break: break-word;}
        .v {word-break: break-word;}
    }
    @media (min-width: 1024px) {
        .e {min-width: 200px;width: 33%;}
        .v {word-break: break-word;}
    }
    td a img { display: none; }
    pre {margin: 0; font-family: var(--monospace);}
    table {border-collapse: collapse; border: 0; width: 100%;}
    .center {
        text-align: center;
        @media (min-width: 1024px) {table:first-child {margin-top: 0;}}
        table {margin: 16px auto; text-align: left;}
    }
    td, th {
        border-width: 1px;
        border-style: solid;
        &:is(.dark *) {
            border-color: #383433;
        }
        &:is(.light *) {
            border-color: #fffbfb;
        }
        font-size: 75%;
        vertical-align: baseline;
        padding: 4px 5px;
    }
    th {position: sticky; top: 0; background-color: inherit;}
    h1 {font-size: 150%;}
    h2 {font-size: 125%;}
    .p {text-align: left; margin: 0;}
    .e {
        &:is(.dark *) {
            background-color: #1e1d1d;
        }
        &:is(.light *) {
            background-color: #ede9e8;
        }
        font-weight: bold;
    }
    .h {
        &:is(.dark *) {
            background-color: #373434;
        }
        &:is(.light *) {
            background-color: #d7cac7;
        }
        font-weight: bold;
    }
    .v {
        &:is(.dark *) {
            background-color: #1e1d1d;
        }
        &:is(.light *) {
            background-color: #ede9e8;
        }
        overflow-x: auto;
    }
    .v i { color: #b39393; }
    img {float: right; border: 0;}
    hr { width: 100%; background-color: #615858; border: 0; height: 1px; }
    th { border-color: transparent;}
    tr:hover td {
        &:is(.dark *) {
            background-color: #111111;
        }
        &:is(.light *) {
            background-color: #f8f2f2;
        }
    }
}


#fonts {
    display: grid;
    padding: 0 1rem 1rem 1rem;
    gap: 1rem;
    overflow-y: auto;
    scrollbar-width: none;
    max-height: 100%;
  
    @media (max-width: 1023px) {
        grid-template-areas: 
            "settings"
            "help";
    }
  
    @media (min-width: 1024px) {
        grid-template-columns: auto 1fr;
        grid-template-areas: 
            "settings help";
    }

    .button {
        .button();
        min-height: 36px;
        max-width: max-content;
        padding: 0 16px;
        justify-self: center;
    }

    input, textarea {
        .input();
    }

    .title {
        .title();
    }

    .panel {
        .panel();
    }

    .settings {
        @media (max-width: 1023px) {
            padding: 16px 12px 16px 12px;
        }

        @media (min-width: 1024px) {
            padding: 16px;
        }

        .variative,
        .monotype {
            display: grid;
            gap: 3px;

            .title {
                margin-bottom: 7px;
            }

            input {
                font-size: 14px;
                font-family: var(--monospace);
                padding: 0 8px 0 8px;
            }
        }
    }
    .help {
        @media (max-width: 1023px) {
            padding: 16px 12px 16px 12px;
        }

        @media (min-width: 1024px) {
            padding: 16px;
        }
    }
}


#modules {
    display: grid;
    padding: 0 1rem 1rem 1rem;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
    grid-auto-rows: max-content;
    row-gap: 1rem;

    input {
        .input();
    }

    .button {
        .button();
        padding: 0 10px;
        min-height: 36px;
        max-width: max-content;
        justify-self: center;
    }

    .title {
        .title();
    }

    .panel {
        .panel();
    }

    a {
        .link();
    }

    .header {
        display: grid;
        row-gap: 8px;

        .panel.update {

            .info {
                display: grid;
                row-gap: 8px;
            }

            .buttons {
                display: grid;
                gap: 16px;
                @media (min-width: 768px) {
                    display: grid;
                    grid-template-columns: auto auto auto 1fr [dev] auto;
                    .button.dev {
                        grid-column-start: dev;
                    }
                }
            }
        }

        .panel.dev {
            &.hidden {
                display: none;
            }

            .buttons {
                display: grid;
                gap: 16px;
                @media (min-width: 768px) {
                    grid-auto-flow: column;
                    justify-content: left;
                }
            }
        }

        .panel.files {
            &:is(.empty, .hidden) {
                display: none;
            }

            div {
                word-break: break-all;
                font-family: var(--monospace);
                font-size: 14px;
            }
        }

    }

    .modules {
        display: grid;
        row-gap: 8px;

        .module {
            display: grid;
            grid-template-areas:
                "name   version"
                "desc   desc"
                "switch del";
            grid-template-columns: 1fr auto;
            padding: 12px;
            column-gap: 12px;
            row-gap: 5px;
            &.disabled {
                border-color: #931818;
            }

            .name {
                grid-area: name;
            }

            .version {
                grid-area: version;
                .inset();
                text-align: center;
            }

            .description {
                grid-area: desc;
                &:is(.dark *) {
                    color: #a08c81;
                }
                &:is(.light *) {
                    color: #c76a4c;
                }
            }

            .switch {
                grid-area: switch;
                justify-self: left;
            }

            .del {
                grid-area: del;
            }
        }
    }
}


#admin_menu {
    display: grid;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
    grid-auto-rows: max-content;

    input {
        .input();
    }

    .button {
        .button();
        &:not(.select *) {
            min-height: 30px;
            padding: 0 16px;
        }
        &:is(.footer *) {
            padding: 0 16px;
            min-height: 36px;
        }
    }

    .select.widget {
        .select_widget();
    }

    .title {
        .title();
    }

    .sections {
        display: grid;
        gap: 32px;
        width: fit-content;
        @media (max-width: 1023px) {
            padding: 0 10px;
        }
        @media (min-width: 1024px) {
            padding: 0 16px;
        }

        .section {
            .panel();
            &:has(> .hidden) {
                &:is(.dark *) {
                    border-color: #931818;
                }
                &:is(.light *) {
                    border-color: #ff0000;
                }
            }

            [data-am-type="section"] {
                display: grid;
                grid-template-areas:
                    "title   sort"
                    "buttons buttons";
                grid-template-columns: 1fr auto;
                column-gap: 16px;
                row-gap: 10px;
                position: relative;
        
                input[name=title] {
                    grid-area: title;
                }
        
                input[name=sort] {
                    grid-area: sort;
                    text-align: right;
                }

                .buttons {
                    grid-area: buttons;
                    display: grid;
                    grid-auto-flow: column;
                    justify-content: left;
                    column-gap: 16px;
                }
            }

            .items {
                display: grid;
                row-gap: 5px;

                .item {
                    .panel();
                    padding-top: 8px;
                    grid-template-areas:
                        "name    name"
                        "select  sort"
                        "buttons buttons";
                    grid-template-columns: 1fr auto;
                    column-gap: 16px;
                    row-gap: 10px;
                    &.hidden {
                        &:is(.dark *) {
                            border-color: #931818;
                        }
                        &:is(.light *) {
                            border-color: #ff0000;
                        }
                    }

                    .name {
                        grid-area: name;
                    }

                    .orders.select.widget {
                        grid-area: select;
                    }

                    input[name=sort] {
                        grid-area: sort;
                        text-align: right;
                    }

                    .buttons {
                        grid-area: buttons;
                        display: grid;
                        grid-auto-flow: column;
                        justify-content: left;
                        &:is(.classic *) {
                            column-gap: 10px;
                        }
                        &:is(.modern *) {
                            column-gap: 16px;
                        }
                    }
                }
            }
        }
    }

    
    .footer {
        display: grid;
        grid-auto-flow: column;
        column-gap: 16px;
        justify-content: left;
        @media (max-width: 1023px) {
            padding: 16px 12px 16px 12px;
        }
        @media (min-width: 1024px) {
            padding: 16px;
        }
    }
}





.CodeMirror {
    /* набор костылей для изменяемой высоты */
    min-height: 100%;
    max-height: 100%;
    height: 0;
    line-height: 1.3;
    
    font-family: var(--monospace);
    font-size: var(--monospace-size);

    &:is(.dark *) {
        &.cm-s-default { background-color: #1e1d1d; }
        &.cm-s-default { color: #d5d0cc; }
        
        .CodeMirror-gutters { background-color: #1e1d1d; }
        .CodeMirror-gutters { color: #897067; }
        .CodeMirror-activeline-background { background-color: #111; }

        .cm-keyword { color: #C792EA; }
        .cm-operator { color: #89DDFF; }
        .cm-variable-2 { color: #EEFFFF; }
        .cm-variable-3,
        .cm-type { color: #DECB6B; }
        .cm-builtin { color: #FFCB6B; }
        .cm-atom { color: #F78C6C; }
        .cm-number { color: #FF5370; }
        .cm-def { color: #82AAFF; }
        .cm-string { color: #94af6e; }
        .cm-string-2 { color: #f07178; }
        .cm-comment { color: #546E7A; }
        .cm-variable { color: #f07178; }
        .cm-tag { color: #FF5370; }
        .cm-meta { color: #FFCB6B; }
        .cm-attribute { color: #C792EA; }
        .cm-property { color: #C792EA; }
        .cm-qualifier { color: #DECB6B; }
        .cm-error { color: #ffffff; background-color: #FF5370; }
    }

    &:is(.light *) {
        &.cm-s-default { background-color: #ffffff; }
        &.cm-s-default { color: #454545; }

        .CodeMirror-gutters { background-color: #ffffff; }
        .CodeMirror-gutters { color: #897067; }
        .CodeMirror-activeline-background { background-color: #f5f1efb5; }
        
        .cm-keyword { color: #C792EA; }
        .cm-operator { color: #00a5e8; }
        .cm-variable-2 { color: #373737; }
        .cm-variable-3,
        .cm-type { color: #f71d1d; }
        .cm-builtin { color: #ffa706; }
        .cm-atom { color: #F78C6C; }
        .cm-number { color: #FF5370; }
        .cm-def { color: #03A9F4; }
        .cm-string { color: #71b199; }
        .cm-string-2 { color: #f07178; }
        .cm-comment { color: #546E7A; }
        .cm-variable { color: #f07178; }
        .cm-tag { color: #b6745c; }
        .cm-meta { color: #ff7600; }
        .cm-attribute { color: #C792EA; }
        .cm-property { color: #373737; }
        .cm-qualifier { color: #c868e9; }
        .cm-error { color: #ffffff; background-color: #FF5370; }
    }

    input {
        .input();
    }

    button {
        .button();
        font-size: 13px;
        padding: 0 8px;
        align-content: center;
        &:active {
            padding-top: 2px;
        }
    }

    .CodeMirror-gutters {
        border: none;
    }

    .CodeMirror-dialog-top {
        display: grid;
        grid-auto-flow: column;
        justify-content: left;
        gap: 7px;
        /* height: 30px; */
        padding: 4px 12px;
        border-bottom: 0;
        &:is(.dark *)  { background-color: #2d2a2a; }
        &:is(.light *) { background-color: #f7efee; }
        
        .CodeMirror-search-label, .CodeMirror-search-hint {
            align-self: center;
        }
    }

    &.CodeMirror-wrap {
        pre.CodeMirror-line, pre.CodeMirror-line-like {
            word-break: break-all;
            font-family: var(--monospace);
            font-size: var(--monospace-size);
        }
    }
    
    .CodeMirror-guttermarker,
    .CodeMirror-guttermarker-subtle,
    .CodeMirror-linenumber {
        &:is(.dark *)  { color: #897067; }
        &:is(.light *) { color: #897067; }
    }

    .CodeMirror-selected {
        &:is(.dark *)  { background-color: #0663d2; }
        &:is(.light *) { background-color: #65aaff; }
        
    }

    .CodeMirror-cursor {
        border-width: 0 0 0 2px;
        border-style: solid;
        &:is(.dark *)  { border-color: #ffcc00; }
        &:is(.light *) { border-color: #ff5100; }
    }

    input.CodeMirror-search-field {
        margin-left: 7px;
    }

    .CodeMirror-matchingbracket {
        border-width: 1px;
        border-style: solid;
        border-color: #0663d2;
    }

    /* TODO: Что это? */
    .cm-searching {
        background-color: #7070644d;
    }
    /* TODO: Что это? */
    .CodeMirror-line {
        &::selection,
        > span::selection,
        > span > span::selection {
            background-color: #80cbc433;
        }
    }
}
/* Вне .CodeMirror находится */
.CodeMirror-hints.default {
    &:is(.dark *) { background-color: #302c2c; }
    &:is(.light *) { background-color: #ffffff; }
    &:is(.classic *) { border-radius: 0; }
    &:is(.modern *) { border-radius: 4px; }
    scrollbar-width: none;
    li {
        &:is(.classic *) { border-radius: 0; }
        &:is(.dark *) { color: #ddd; }
        &:is(.light *) { color: #333; }
    }
}
