::-webkit-scrollbar{width: 8px; height: 8px}
        ::-webkit-scrollbar-track{background: #161625; border-radius: 20px}
        ::-webkit-scrollbar-thumb{background: linear-gradient(#a78bfa, #c026d3); border-radius: 20px; box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);}
        ::-webkit-scrollbar-thumb:hover {background: linear-gradient(#c4b5fd, #e879f9)}
        html{scrollbar-color: #a78bfa #161625; scrollbar-width: thin}

        body{
            background: rgb(25, 25, 45);
            display: flex;
            justify-content: center;
        }

        .Container{
            position: absolute;
            top: 0;
            width: clamp(300px, 100%, 1700px);
            height: auto;
            display: flex;
            justify-content: left;
            box-sizing: border-box;
            border-radius: 15px;
            border: 2px solid rgb(55, 52, 58);
            left: 50%;
            transform: translate(-50%);
            overflow: hidden;
        }

        .preview-frame{
            width: 100%;
            height: 100%;
            border: 0;
        }

        .ContainerTemplate{
            position: absolute;
            top: 0;
            right: 0;
            width: 65%;
            height: 100%;
            border-radius: 0 15px 15px 0;
            border-left: 4px solid rgb(55, 52, 58);
        }





        .ContainerForm{
            position: relative;
            top: 0;
            left: 0;
            width: 35%;
            min-height: 100%;
            background: rgb(35, 32, 38);
            display: flex;
            justify-content: flex-start;
            flex-direction: column;
            border-radius: 15px 0 0 15px;
            text-align: center;
            padding-top: 15px;
        }

        #Buy,
        #Create,
        #clear-draft,
        #BundleDownload{
            position: relative;
            width: calc(100% - 30px);
            height: 50px;
            bottom: 10px;
            margin: 10px auto 5px auto;
            border: 0;
            border-radius: 10px;
            color: Lavender;
            font-family: Arial Black;
            font-size: 24px;
            cursor: pointer;
            padding: 0 20px;
            outline: none;
            text-align: center;
            transition: all 0.2s ease;
            transform: translateY(0);
        }


        #Create, #BundleDownload{background: DodgerBlue}
        #Create:hover, #BundleDownload:hover{box-shadow: 0 0 10px 0 DodgerBlue; transform: translateY(-3px)}

        #Buy{background: Orange}
        #Buy:hover{box-shadow: 0 0 10px 0 DarkOrange; transform: translateY(-3px)}

        #clear-draft{background: Crimson; margin: 20px auto 10px auto; height: 40px; font-size: 18px}
        #clear-draft:hover{box-shadow: 0 0 10px 0 Crimson; transform: translateY(-3px)}

        .form-group{
            margin-bottom: 10px;
            position: relative;
        }

        input{
            width: calc(100% - 50px);
            height: 10px;
            padding: 10px;
            border-radius: 5px;
            border: 0;
            outline: none;
            background: rgb(225, 225, 250);
        }

        #span-price{
            text-align: center;
            background: rgb(255, 215, 0, 0.8);
            color: White;
            padding: 5px 10px;
            line-height: 50px;
            border-radius: 15px;
        }


        #add-skill,
        #add-project,
        #add-work{
            width: calc(100% - 50px);
            height: fit-content;
            border-radius: 10px;
            border: 0;
            background: rgb(100, 0, 175);
            cursor: pointer;
            color: Snow;
            font-size: 16px;
            font-family: Arial Black;
            outline: none;
            transition: 0.2s;
            overflow: hidden;
            margin-top: 10px;
        }

        #skills-container,
        #projects-container,
        #works-container {
            display: flex;
            flex-direction: column;
            gap: 8px;
            width: 100%;
            padding: 10px 0;
        }

        #add-skill,
        #add-project,
        #add-work {
            width: 100%;
            height: fit-content;
            padding: 10px;
            border-radius: 10px;
            border: 0;
            background: rgb(100, 0, 175);
            cursor: pointer;
            color: Snow;
            font-size: 16px;
            font-family: Arial Black;
            outline: none;
            transition: 0.2s;
            overflow: hidden;
            margin-top: 5px;
        }

        #add-skill:hover, #add-project:hover, #add-work:hover{background: rgb(125, 25, 200)}

        #Line{
            width: calc(100% - 50px);
            height: 5px;
            background: Indigo;
        }

        #LabelPhoto{
            width: calc(100% - 50px);
            height: 25px;
            background: rgb(60, 60, 60);
            font-size: 20px;
            font-family: Arial Black;
            color: Snow;
            border-radius: 20px;
            padding: 10px;
            cursor: pointer;
            user-select: none;
            transition: 0.3s ease;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #LabelPhoto:hover{background: rgb(80, 80, 80)}
        #LabelPhoto.uploaded{background: MediumSeaGreen}





        #ResumeEvalutionContainer{
            position: relative;
            width: calc(100% - 30px);
            border-radius: 15px;
            left: 50%;
            transform: translate(-50%);
            font-family: Cursive;
            display: flex;
            justify-content: flex-start;
            flex-direction: column;
            border: 2px solid rgb(200, 0, 250);
            margin-top: 10px;
            overflow: hidden;
        }

        #ResumeEvalution{
            position: relative;
            width: calc(100% - 30px);
            padding: 7px 0;
            font-size: 18px;
            color: rgb(150, 100, 175);
            background: rgb(100, 0, 150);
            border-radius: 20px;
            margin: 15px auto;
        }



        #CheckListContainer{
            display: none;
            justify-content: center;
            flex-direction: column;
            text-align: center;
            border: 2px solid rgb(100, 100, 175);
            border-radius: 25px;
            margin: 0 15px;
            font-family: Arial Black;
            box-sizing: border-box;
        }

        #CheckList{
            position: relative;
            width: calc(100% - 50px);
            font-size: 16px;
            color: #22d3ee;
            background: rgb(125, 125, 200);
            border-radius: 20px;
            padding: 5px 15px;
            margin: 5px auto;
            box-sizing: border-box;
        }

        #CheckListContainer ul{
            list-style: none;
            padding: 0;
            margin: 0;
        }

        #CheckListContainer li{
            position: relative;
            width: calc(100% - 50px);
            color: #06b6d4;
            text-align: center;
            margin: 7px auto;
            background: rgb(125, 125, 225);
            border-radius: 20px;
            padding: 3px;
            font-size: 14px;
            box-sizing: border-box;
        }



        #ResultEvalution{
            position: relative;
            width: calc(100% - 30px);
            padding: 7px 0;
            font-size: 22px;
            color: rgb(175, 125, 200);
            background: rgb(125, 25, 175);
            border-radius: 20px;
            margin: 15px auto;
            display: none;
        }

        #StarsContainer{
            width: 100%;
            display: none;
            justify-content: center;
            margin: 0;
            box-sizing: border-box;
            font-size: 30px;
            gap: 25px;
            color: Snow;
        }

        #CheckResumeButton{
            position: relative;
            width: calc(100% - 30px);
            height: fit-content;
            padding: 7px 0;
            font-size: 22px;
            color: Cyan;
            background: rgb(100, 100, 225);
            border: 2px solid DodgerBlue;
            border-radius: 20px;
            margin: 5px auto 15px;
            cursor: pointer;
            transition: 0.3s ease;
            box-sizing: border-box;
        }

        #CheckResumeButton:hover{border: 2px solid rgb(125, 200, 255)}


        .format-selector{
            display: flex;
            justify-content: center;
            gap: 10px;
            margin: 10px auto 10px auto;
        }

        .format-option{
            position: relative;
            cursor: pointer;
        }

        .format-option input[type="radio"]{
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
        }

        .format-label{
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 12px 40px;
            border: 2px solid #333;
            border-radius: 8px;
            color: #888;
            font-weight: 600;
            font-size: 14px;
            transition: all 0.2s ease;
        }

        .format-option input[type="radio"]:checked + .format-label{
            border-color: #f97316;
            background: rgba(249, 115, 22, 0.1);
            color: #f97316;
        }

        .format-option:hover .format-label{border-color: #f97316}





        #resume-progress{
            width: auto;
            height: 20px;
            background: rgb(25, 25, 50);
            border-radius: 25px;
            overflow: hidden;
            margin: -10px 10px 20px 10px;
            border: 1px solid rgb(65, 65, 90);
            box-sizing: border-box;
        }

        #resume-progress-bar{
            width: 0%;
            height: 100%;
            background: linear-gradient(90deg, rgb(100, 50, 200), rgb(130, 44, 255));
            transition: width .35s ease;
            box-sizing: border-box;
        }

        #resume-progress-text{
            font-size: 15px;
            font-weight: 600;
            color: #fff;
            position: relative;
            margin: -30px auto auto 10px;
        }

        #resume-progress-percent{color: #8f5cff; font-family: Cursive}

        #Create:disabled{
            opacity: 0.7;
            cursor: not-allowed;
            pointer-events: none;
        }

        .btn-loading{
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }



        .form-section{
            margin-bottom: 10px;
            border-radius: 10px;
            overflow: hidden;
            background: rgba(30, 28, 45, 0.5);
            border: 1px solid rgba(124, 58, 237, 0.2);
            outline: none;
        }

        .form-section-toggle{
            width: 100%;
            padding: 14px 18px;
            background: rgba(124, 58, 237, 0.15);
            border: none;
            color: white;
            font-size: 15px;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            outline: none;
        }

        .toggle-icon{
            transition: transform 0.2s ease;
        }

        .form-section-toggle.active .toggle-icon{
            transform: rotate(180deg);
        }

        .form-section-body{
            max-height: 1000px;
            overflow: hidden;
            transition: max-height 0.3s ease, padding 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            width: 100%;
            padding: 10px 0;
        }

        .form-section-body.collapsed{
            max-height: 0 !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            overflow: hidden;
        }






        .PartnerOffer{
            position: relative;
            display: flex;
            align-items: center;
            gap: 20px;
            width: min(700px, 90%);
            margin: 15px auto;
            padding: 15px 30px;
            background: linear-gradient(135deg, rgba(40, 0, 90, .65), rgba(0, 55, 90, .65));
            border: 1px solid rgba(168, 130, 255, .25);
            border-radius: 20px;
            box-shadow:
                0 0 25px rgba(80, 0, 150, .2);
            box-sizing: border-box;
        }

        .PartnerOfferIcon{
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 55px;
            height: 55px;
            font-size: 28px;
            background: rgba(168, 130, 255, .15);
            border-radius: 15px;
            color: Lavender;
        }

        .PartnerOfferContent{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
        }

        .PartnerOfferContent h2{
            margin: 0;
            font-size: 20px;
            color: Lavender;
        }

        .PartnerOfferContent p{
            margin: 0;
            font-size: 14px;
            line-height: 1.5;
            color: rgba(255, 255, 255, .65);
        }

        .PartnerOfferButton{
            display: inline-flex;
            align-items: center;
            margin-top: 8px;
            padding: 10px 18px;
            border-radius: 12px;
            background: rgb(75, 75, 200);
            color: White;
            text-decoration: none;
            font-size: 14px;
            font-weight: 700;
            transition: .25s ease;
        }

        .PartnerOfferButton:hover{
            transform: translateY(-2px);
            box-shadow:
                0 0 15px rgba(75, 75, 200, .7);
        }






        .ModalOverlay{
            position: fixed;
            inset: 0;
            background: rgba(10, 8, 20, 0.75);
            backdrop-filter: blur(4px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            opacity: 0;
            animation: modalFadeIn 0.25s ease forwards;
        }

        @keyframes modalFadeIn{
            from{opacity: 0}
            to{opacity: 1}
        }

        .ModalBox{
            position: relative;
            background: linear-gradient(145deg, #1a1424, #120d1c);
            border: 1px solid rgba(124, 58, 237, 0.4);
            border-radius: 16px;
            padding: 36px 32px 32px;
            max-width: 400px;
            width: 90%;
            text-align: center;
            box-shadow:
                0 0 0 1px rgba(124, 58, 237, 0.15),
                0 20px 60px rgba(0, 0, 0, 0.6),
                0 0 40px rgba(124, 58, 237, 0.25);
            transform: scale(0.9) translateY(10px);
            opacity: 0;
            animation: modalPopIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s forwards;
        }

        @keyframes modalPopIn{
            to{
                transform: scale(1) translateY(0);
                opacity: 1;
            }
        }

        .ModalBox h3{
            font-family: 'Arial Black', Arial, sans-serif;
            font-size: 22px;
            color: #f0edf7;
            margin: 0 0 14px;
            background: linear-gradient(90deg, #7c3aed, #f97316);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .ModalBox p{
            font-size: 15px;
            line-height: 1.55;
            color: #b8b0cc;
            margin: 0;
        }

        .ModalCloseBtn{
            position: absolute;
            top: 12px;
            right: 14px;
            background: rgba(124, 58, 237, 0.12);
            border: 1px solid rgba(124, 58, 237, 0.3);
            color: #b8b0cc;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            font-size: 18px;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }

        .ModalCloseBtn:hover{
            background: rgba(249, 115, 22, 0.15);
            border-color: rgba(249, 115, 22, 0.5);
            color: #f97316;
            transform: rotate(90deg);
        }



        .BuyBtn{
            display: inline-block;
            width: calc(100% - 50px);
            padding: 7px 0;
            margin: auto;
            background: linear-gradient(90deg, #6366f1, #818cf8);
            color: white;
            text-decoration: none;
            font-weight: 700;
            text-align: center;
            border-radius: 50px;
            transition: all 0.3s ease;
            font-size: 1.05rem;
            box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
        }

        .BuyBtn:hover{
            background: linear-gradient(90deg, #4f46e5, #6366f1);
            transform: translateY(-3px);
            box-shadow: 0 12px 28px rgba(99, 102, 241, 0.4);
        }







        /* 150% и выше */
        @media (max-width: 1280px){
            #LabelPhoto{font-size: 18px}
            #Buy{font-size: 20px}
            #add-skill,
            #add-project,
            #add-work{font-size: 14px}
            #clear-draft{font-size: 16px}
        }

        /* 175% и выше */
        @media (max-width: 1097px){
            #LabelPhoto{font-size: 16px}
            #Buy, #Create{font-size: 16px}
            #add-skill,
            #add-project,
            #add-work{font-size: 12px}
            #CheckListContainer li{font-size: 8px}
            #CheckList{font-size: 14px}
            #StarsContainer{font-size: 24px; gap: 15px}
            .format-label{font-size: 10px}
        }

        /* 200% и выше */
        @media (max-width: 960px){
            #LabelPhoto{font-size: 14px}
            #Buy{font-size: 13px}
            #StarsContainer{font-size: 22px; gap: 10px}
            .format-label{font-size: 8px; padding: 12px 30px}
        }

        /* 250% и выше */
        @media (max-width: 768px){
            #LabelPhoto{font-size: 12px}
            #Buy, #Create{font-size: 8px}
            input::placeholder{font-size: 10px}
            #add-skill,
            #add-project,
            #add-work{font-size: 10px}
            #StarsContainer{font-size: 18px; gap: 10px}
            #CheckListContainer li{font-size: 6px}
            #CheckList{font-size: 10px}
            #resume-progress-text{font-size: 12px}
            .format-label{font-size: 8px; padding: 12px 20px}
            #ResumeEvalution{font-size: 10px}
        }

        /* 300% и выше */
        @media (max-width: 640px){
            #LabelPhoto{font-size: 10px}
            #add-skill,
            #add-project,
            #add-work{font-size: 8px}
            #StarsContainer{font-size: 16px; gap: 5px}
            #CheckListContainer li{font-size: 4px}
            #CheckList{font-size: 6px}
            #CheckResumeButton{font-size: 14px}
            .format-label{font-size: 8px; padding: 12px 15px}
            #resume-progress-text{font-size: 10px}
            #clear-draft{font-size: 14px}
            .PartnerOfferContent h2{font-size: 8px; margin-left: -60px}
            .PartnerOfferContent p{font-size: 10px; margin-left: -20px}
            .PartnerOfferIcon{margin-left: -25px}
        }

        /* 400% и выше */
        @media (max-width: 480px){
            #LabelPhoto{font-size: 10px}
            #Buy, #Create{font-size: 4px; width: calc(100% - 5px); left: 0}
            #add-skill,
            #add-project,
            #add-work{font-size: 3px}
            input::placeholder{font-size: 8px}
            #StarsContainer{font-size: 10px; gap: 5px}
            #CheckList{font-size: 6px; width: 100%}
            #CheckResumeButton{font-size: 8px; width: 100%; margin-left: 0}
            #ResultEvalution{font-size: 10px; width: 100%; margin-left: 0}
            #ResumeEvalution{font-size: 10px; width: 100%; margin-left: 0}
            #CheckListContainer{width: 100%; margin-left: 0}
            #CheckListContainer li{width: 100%; margin-left: 0}
            .format-label{width: calc(100% - 100px); margin-left: 10px; font-size: 8px}
            #clear-draft{font-size: 8px}
            .format-label{font-size: 6px; padding: 12px 15px}
            #resume-progress-text{font-size: 6px; margin-bottom: 5px}
            .format-selector{gap: 0}
            .PartnerOfferContent h2{font-size: 6px; margin-left: -12px}
            .PartnerOfferContent p{font-size: 10px}
            .PartnerOfferContent a{margin-left: -10px}
            .PartnerOfferIcon{display: none}
            #resume-progress-text{margin-top: -15px}
        }

        /* 500% и выше */
        @media (max-width: 384px){
            #LabelPhoto{font-size: 4px}
            input::placeholder{font-size: 4px}
            #StarsContainer{font-size: 6px; gap: 5px}
            #CheckList{font-size: 4px}
            #CheckResumeButton{font-size: 4px}
            #ResultEvalution{font-size: 10px}
            #ResumeEvalution{font-size: 6px}
            .format-label{width: calc(100% - 100px); margin-left: 2.5px; font-size: 8px}
            #clear-draft{font-size: 6px}
            .format-label{font-size: 4px; padding: 12px 10px}
            #resume-progress-text{font-size: 5px; margin-bottom: 5px}
            .format-selector{gap: 0}
            .PartnerOfferContent h2{font-size: 5px; margin-left: -20px}
            .PartnerOfferContent p{font-size: 3px; margin-left: -30px}
            .PartnerOfferContent a{margin-left: -29px}
        }