@font-face {
    font-family: 'default';
    src: url("i/medium.ttf")  format('truetype');
}
@font-face {
    font-family: 'bold';
    src: url("i/bold.ttf")  format('truetype');
}

:root {
    --bg: #F5F5F5;
    --bgSub: #EBEBEB;
    --bgLight: #FFFFFF;
    --prm: #FF4784;
    --txt: #141414;
    --txtSub: #A3A3A3;
    --blue: #4747FF;
    --green: #23B007;
    --red: #FF4747;
    --gray: #A3A3A3;
    --yellow: #F69628;
    --purple: #6F47FF;
    --gap: 24px;
    --grid: 8px;
}
::selection {
    background-color: var(--prm);
    color: var(--bg);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "default";
    font-size: calc(var(--grid) * 2);
    line-height: 100%;
    border: 0;
    outline: 0;
    word-wrap: break-word;
    transition: .2s;
}

html {
    height: 100%;
}
body {
    margin: var(--gap);
    background: var(--bg);
    color: var(--txtSub);
}
ul, li {
    list-style: none;
}

a {
    text-decoration: none;
    color: var(--txt);
}
a:hover {
    color: var(--prm);
}

/*  ------------------------------------------------  */

header, main, footer {
    display: flex;
    width: 100%;
}

/*  ------------------------------------------------  */

header {
    height: calc(var(--grid) * 4);
}
header .logo {
    width: calc(var(--grid) * 20);
    background: url(i/logo.png) center / 100% no-repeat;
}
header .logo a {
    display: block;
    height: 100%;
}
header .nav {
    display: flex;
    flex: 1 0 0;
    align-items: center;
    justify-content: flex-end;
    gap: var(--grid);
}
header .nav a.exit {
    background: url(i/iconExit.png) center / 100% no-repeat;
    width: calc(var(--grid) * 2);
    height: calc(var(--grid) * 2);
}

/*  ------------------------------------------------  */

main {
    flex-direction: column;
    gap: var(--gap);
    margin: var(--gap) 0;
    padding: var(--gap) 0;
    box-shadow: 0 1px 0 var(--bgSub), 0 -1px 0 var(--bgSub);
}
main .listCover {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--grid);
    padding: var(--gap);
    color: var(--bgLight);
}
main .listCover-theme-1 {
    background: url("i/bg-theme-1.png") center / var(--gap) var(--txt);
}
main .listCover-theme-2 {
    background: url("i/bg-theme-2.png") center / var(--gap) var(--prm);
}
main .listCover-theme-3 {
    background: url("i/bg-theme-3.png") center / var(--gap) var(--blue);
}
main .listCover-theme-4 {
    background: url("i/bg-theme-4.png") center / var(--gap) var(--green);
}
main .listCover-theme-5 {
    background: url("i/bg-theme-5.png") center / var(--gap) var(--red);
}
main .listCover-theme-6 {
    background: url("i/bg-theme-6.png") center / var(--gap) var(--red);
}
main .listCover-theme-7 {
    background: url("i/bg-theme-7.png") center / var(--gap) var(--red);
}
main .listCover-theme-8 {
    background: url("i/bg-theme-8.png") center / var(--gap) var(--red);
}
main .listCover span {
    color: rgba(255, 255, 255, .64);
}
main .listCover a {
    color: var(--bgLight);
    font-family: "bold";
}
main h2 {
    font-size: var(--gap);
    font-family: "bold";
    color: var(--txt);
}
main .listCover h2 {
    color: var(--bgLight);
}
main .listCover .counter {
    position: absolute;
    top: var(--gap);
    right: var(--gap);
    display: block;
    font-size: calc(var(--gap) * 3);
    opacity: .12;
    font-family: "bold";
}
main .common {
    display: flex;
    flex-direction: column;
    gap: var(--grid);
    background: var(--bgSub);
    padding: var(--gap);
}
main ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}
main ul li {
    cursor: pointer;
    position: relative;
    top: 0;
    display: flex;
    flex-direction: column;
    /* justify-content: flex-end; */
    width: calc((100% - calc(var(--gap) * 4)) / 5);
    border: 1px solid var(--bgSub);
    /* aspect-ratio: 1 / 1.2; */
    background-image: url("i/cover.png");
    background-position: center var(--gap);
    background-size: calc(100% - calc(var(--gap) * 2)) auto;
    background-repeat: no-repeat;
    word-break: break-all;
}
@media screen and (max-width: 1600px) {
    main ul li {
        width: calc((100% - calc(var(--gap) * 3)) / 4);
    }
}
@media screen and (max-width: 1200px) {
    main ul li {
        width: calc((100% - calc(var(--gap) * 2)) / 3);
    }
}
@media screen and (max-width: 960px) {
    main ul li {
        width: calc((100% - var(--gap)) / 2);
    }
}
@media screen and (max-width: 640px) {
    main ul li {
        width: 100%;
    }
}
main ul li:hover {
    top: calc(var(--grid) * -.5);
    box-shadow: 0 calc(var(--grid) * .5) 0 var(--bgSub);
}
main ul li article {
    margin-top: calc(var(--gap) * 6);
    display: flex;
    flex-direction: column;
    background: linear-gradient(rgba(255, 255, 255, .88), white, white);
    backdrop-filter: blur(8px);
    padding: var(--gap);
    box-shadow: 0 -1px 0 var(--bgSub);
    flex: 1 0 0;
}
main ul li article h3 {
    font-size: var(--gap);
    line-height: calc(var(--grid) * 4);
    font-family: "bold";
    color: var(--txt);
    font-weight: normal;
}
main ul li article .desc {
    display: flex;
    padding: calc(var(--grid) * 1.5) 0;
    line-height: calc(var(--grid) * 3);
    flex: 1 0 0;
}
main ul li article .desc:empty {
    padding: 0;
    height: calc(var(--grid) * 2);
}
main ul li article .info {
    margin-top: var(--grid);
    padding-top: var(--gap);
    display: flex;
    font-size: calc(var(--grid) * 1.5);
    box-shadow: 0 -1px 0 var(--bg);
}
main ul li article .info i {
    font-style: normal;
    flex: 1 0 0;
    font-size: calc(var(--grid) * 1.5);
}

/*  ------------------------------------------------  */

main ul.list li {
    aspect-ratio: inherit;
    background: var(--bg)
}
main ul.list li article {
    margin: 0;
    flex: 1 0 0;
}
main ul.list li article .desc {
    flex: 1 0 0;
}

/*  ------------------------------------------------  */

main ul li .icon {
    margin: var(--gap) 0 0 var(--gap);
    width: calc(var(--grid) * 3);
    height: calc(var(--grid) * 3);
    margin-bottom: var(--gap);
    background: url("i/iconList.png") center / 100% no-repeat;
}
main ul li.theme-1 {
    background: url("i/bg-theme-1.png") center / var(--gap) var(--txt);
}
main ul li.theme-2 {
    background: url("i/bg-theme-2.png") center / var(--gap) var(--prm);
}
main ul li.theme-3 {
    background: url("i/bg-theme-3.png") center / var(--gap) var(--blue);
}
main ul li.theme-4 {
    background: url("i/bg-theme-4.png") center / var(--gap) var(--green);
}
main ul li.theme-5 {
    background: url("i/bg-theme-5.png") center / var(--gap) var(--red);
}
main ul li.theme-6 {
    background: url("i/bg-theme-6.png") center / var(--gap) var(--red);
}
main ul li.theme-7 {
    background: url("i/bg-theme-7.png") center / var(--gap) var(--red);
}
main ul li.theme-8 {
    background: url("i/bg-theme-8.png") center / var(--gap) var(--red);
}

/*  ------------------------------------------------  */

main ul li .menu {
    position: absolute;
    top: var(--gap);
    right: var(--gap);
    display: flex;
    gap: var(--gap);
}
main ul li .menu button {
    cursor: pointer;
    width: var(--gap);
    height: var(--gap);
    background-position: 0 center;
    background-size: var(--gap);
    background-color: rgba(0, 0, 0, .48);
    background-repeat: no-repeat;
    backdrop-filter: blur(24px);
    background-image: url("i/iconMenu.png");
}
/* main ul li .menu:hover button {
    background-color: var(--txt);
} */
main ul li .menu-list {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    gap: var(--gap);
}
main ul li .menu-list button {
    background-position: center;
    width: calc(var(--grid) * 3);
    height: calc(var(--grid) * 3);
}
main ul li .menu-list button:nth-child(1) {
    background-image: url("i/iconEdit.png");
}
main ul li .menu-list button:nth-child(2) {
    background-image: url("i/iconDelete.png");
}
main ul li .menu-list button:hover {
    background-color: var(--prm);
}

/*  ------------------------------------------------  */

footer {
    gap: calc(var(--grid) * .5);
    justify-content: center;
    padding-bottom: var(--gap);
}

/*  ------------------------------------------------  */

form {
    display: flex;
    margin: auto;
    flex-direction: column;
    gap: var(--gap);
    width: 100%;
    max-width: 640px;
}
form h4 {
    font-weight: normal;
}
form h2 {
    box-shadow: 0 1px 0 var(--bgSub);
    padding-bottom: var(--gap);
}
form input, form select, form textarea {
    cursor: pointer;
    background: var(--bgLight);
    padding: var(--gap);
    border: 1px solid var(--bgSub);
    color: var(--txt);
}
form input:disabled {
    background: var(--bgSub);
}
form input:hover, form select:hover, form textarea:hover {
    border: 1px solid var(--txtSub);
}
form input:focus, form textarea:focus {
    color: var(--txt);
    font-family: "bold";
    border: 1px solid var(--prm);
}
form input::placeholder, form textarea::placeholder {
    color: var(--txtSub);
}
form input.btn {
    position: relative;
    top: 0;
    font-family: "bold";
    border: 0;
    background: var(--bgSub);
    color: var(--txt);
}
form input.btnPrm {
    background: var(--prm);
    color: var(--bgLight);
}
form input.btnLoading {
    background: url("i/iconLoading.gif") center / calc(var(--grid) * 2) no-repeat var(--prm);
    color: var(--bgLight);
}
form input.btn:hover {
    top: -4px;
    box-shadow: inset 0 -4px 0 rgba(20, 20, 20, .2);
}
form input.btn:active {
    top: 0;
    box-shadow: none;
}
form select {
    appearance: none;
    background: url("i/iconArrow.png") right var(--gap) center / calc(var(--grid) * 2) no-repeat var(--bgLight);
}
form textarea {
    line-height: var(--gap);
    min-height: calc(var(--gap) * 8);
    overflow: hidden;
    resize: none;
}
form label {
    cursor: pointer;
    gap: var(--grid);
    display: flex;
    align-items: center;
}
form input[type="checkbox"] {
    width: calc(var(--grid) * 4);
    height: calc(var(--grid) * 4);
    appearance: none;
    -webkit-appearance: none;
    background: url('i/iconCheck.png') no-repeat center;
    background-size: 100%;
    cursor: pointer;
    padding: 0;
    border: 0;
}
form label strong {
    font-weight: normal;
}
form label strong.checked {
    color: var(--txt);
    font-family: "bold";
}
form .preview {
    width: 100%;
    aspect-ratio: 1 / 0.4;
    overflow: hidden;
    background: url("i/noPreview.png") center / calc(var(--grid) * 8) no-repeat;
    border: 1px solid var(--bgSub);
}
form .preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*  ------------------------------------------------  */

form .themeList {
    display: flex;
    gap: var(--gap);
}
form .themeList button {
    cursor: pointer;
    width: calc(var(--grid) * 4);
    height: calc(var(--grid) * 4);
}
form .themeList button.theme-1 {
    background: var(--txt);
}
form .themeList button.theme-2 {
    background: var(--prm);
}
form .themeList button.theme-3 {
    background: var(--blue);
}
form .themeList button.theme-4 {
    background: var(--green);
}   
form .themeList button.theme-5 {
    background: var(--red);
}
form .themeList button.theme-6 {
    background: var(--gray);
}
form .themeList button.theme-7 {
    background: var(--yellow);
}
form .themeList button.theme-8 {
    background: var(--purple);
}
form .themeList button.checked {
    outline: 4px solid var(--prm);
    border: 4px solid var(--bgLight);
}


/*  ------------------------------------------------  */

main .tips {
    display: none;
    margin: auto;
    width: 100%;
    max-width: 640px;
    background: var(--red);
    color: var(--bgLight);
    padding: var(--gap);
} 
main .tips.error {
    display: block;
    background-color: var(--red);
}
main .tips.success {
    display: block;
    background-color: var(--green);
}

/*  ------------------------------------------------  */

.user-level {
    display: inline-block;
    padding: calc(var(--grid) * .25) calc(var(--grid) * .5);
    font-size: calc(var(--grid) * 1.5);
    color: var(--bgLight) !important;
    font-family: "bold";
}
.user-level.admin {
    background: var(--red);
}
.user-level.pro {
    background: var(--prm);
}
.user-level.blacklist {
    background: var(--txt);
}

/*  ------------------------------------------------  */

.linkAdd, .linkList {
    position: fixed;
    bottom: var(--gap);
    right: var(--gap);
    width: calc(var(--grid) * 8);
    height: calc(var(--grid) * 8);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: var(--prm);
}
.linkAdd {
    bottom: calc(var(--grid) * 14);
    background-image: url("i/iconLinkAdd.png");
}
.linkList {
    bottom: var(--gap);
    background-image: url("i/iconLinkList.png");
    background-color: var(--txtSub);
}