html, body {
    height: 100%;
    margin: 0;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.cabinet-layout {
    display: flex;
    height: 100vh;
    background: #230B02;
    font-family: 'Inter', sans-serif;
}

.cabinet-sidebar {
    width: 90px;
    background: #230B02;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 0;
    position: relative;
}

.cabinet-sidebar__logo {
    font-size: 28px;
    margin-bottom: 50px;
}

.cabinet-sidebar__menu {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.cabinet-sidebar__item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 18px;
    position: relative;
    padding: 10px 0;
    transition: 0.2s ease;
}

.cabinet-sidebar__item span {
    font-size: 12px;
}

.cabinet-sidebar__item:hover {
    color: white;
}

.cabinet-sidebar__item.active {
    color: white;
}

.cabinet-sidebar__item.active::after {
    content: "";
    position: absolute;
    right: 0;
    width: 4px;
    height: 30px;
    background: white;
    border-radius: 2px;
}

.cabinet-content-wrapper {
    flex: 1;
    margin: 30px;
    background: white;
    border-radius: 28px;
    overflow: hidden;

    display: flex;
    flex-direction: column;

    height: calc(100vh - 60px);

    box-shadow:
            0 40px 80px rgba(0,0,0,0.45),
            0 15px 30px rgba(0,0,0,0.25);
}


.cabinet-content {
    flex: 1;
    padding: 50px;
    background: #f7f7f7;

    overflow-y: auto;
}

.register-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.register-card {
    width: 100%;
    max-width: 600px;
    background: #ffffff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.register-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
}

.register-subtitle {
    color: #666;
    margin-bottom: 25px;
}

.register-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.register-row {
    display: flex;
    gap: 15px;
}

.register-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.register-label {
    font-weight: 600;
    margin-bottom: 6px;
}

.register-input,
.register-select {
    width: 100%;
    padding: 14px;
    border: none;
    background: #f1f1f1;
    border-radius: 4px;
    font-size: 14px;
}

.register-input:focus,
.register-select:focus {
    background: #e4e4e4;
    outline: none;
}

.register-btn {
    margin-top: 10px;
    background: #04AA6D;
    color: white;
    padding: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.2s;
}

.register-btn:hover {
    opacity: 0.9;
}

.register-footer {
    margin-top: 20px;
    text-align: center;
    background: #f1f1f1;
    padding: 12px;
    border-radius: 4px;
}

.register-footer a {
    color: dodgerblue;
    text-decoration: none;
}
.courses-page{
    display:flex;
    gap:40px;
    height:100%;
}

.courses-left{
    width:480px;
    display:flex;
    flex-direction:column;
}

.levels-filter{
    display:flex;
    gap:10px;
    margin-bottom:20px;
}

.levels-filter a{
    padding:6px 14px;
    border-radius:8px;
    text-decoration:none;
    font-size:14px;
    color:#666;
    background:#f3f3f3;
}

.levels-filter a.active{
    background:#fff;
    border:1px solid #e68a6a;
    color:#e68a6a;
}

.courses-list{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.course-card{
    display:flex;
    gap:14px;
    background:#fff;
    padding:14px;
    border-radius:12px;
    box-shadow:0 4px 12px rgba(0,0,0,0.06);
    transition:0.2s;
}

.course-card:hover{
    transform:translateY(-2px);
}

.course-card.active{
    border:1px solid #e68a6a;
}

.course-image{
    width:130px;
    height:90px;
    background:#eee;
    border-radius:8px;
    overflow:hidden;
}

.course-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.course-info{
    flex:1;
}

.course-info h4{
    margin:0 0 6px 0;
    font-size:15px;
}

.course-description{
    font-size:13px;
    color:#C0BDBD;
    margin:0 0 8px 0;
    line-height:1.3;
}

.course-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:12px;
}

.course-meta .level{
    color:#e68a6a;
    font-weight:600;
}

.course-meta .lessons-count{
}

.courses-right{
    flex:1;
}

.course-detail{
    max-width:800px;
}

.course-cover{
    width:100%;
    max-width:420px;
    border-radius:20px;
    margin-bottom:20px;
}

.course-level{
    color:#e68a6a;
    font-weight:600;
    margin-bottom:6px;
}

.course-detail h1{
    margin:0 0 12px 0;
    font-size:28px;
}

.course-detail h3{
    font-size:20px;
    font-weight:700;
    margin-bottom:20px;
}

.course-detail p{
    line-height:1.5;
    margin-bottom:30px;
}

.courses-page{
    display:flex;
    gap:40px;
    height:100%;
    overflow:hidden;
}

.courses-left{
    width:480px;
    display:flex;
    flex-direction:column;
    overflow-y:auto;
}

.courses-right{
    flex:1;
    overflow-y:auto;
}
.lesson-page{
    display:flex;
    gap:40px;
    height:100%;
    overflow:hidden;
}

.lesson-left{
    width:420px;
    overflow-y:auto;
}

.lesson-right{
    flex:1;
    overflow-y:auto;
}
.lessons{
    display:flex;
    flex-direction:column;
    gap:14px;
}


.lesson-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 4px 10px rgba(0,0,0,0.06);
}
.lesson-description{
    margin:4px 0 0 0;
    font-size:13px;
    color:#C0BDBD;
    line-height:1.4;
}

.lesson-info{
    flex:1;
    padding:12px;
}

.lesson-info h4{
    margin:0;
    font-size:16px;
}


.lesson-start a{
    border:1px solid #e68a6a;
    color:#e68a6a;
    padding:6px 16px;
    border-radius:8px;
    text-decoration:none;
    font-size:14px;
}

.lesson-start a:hover{
    background:#e68a6a;
    color:#fff;
}
.levels-filter{
    margin-bottom:20px;
}

.level-select{
    width:120px;
    padding:6px 10px;
    border-radius:8px;
    border:1px solid #e68a6a;
    font-size:14px;
    cursor:pointer;
}

.start-course-btn{
    display:inline-block;
    margin:20px 0 30px;
    background:#e68a6a;
    color:white;
    padding:12px 24px;
    border-radius:10px;
    text-decoration:none;
    font-weight:600;
}

.start-course-btn:hover{
    background:#e68a6a;
    color:white;
    transform:translateY(-1px);
    box-shadow:0 6px 18px rgba(0,0,0,0.12);
}
.lesson-page{
    display:flex;
    gap:40px;
}

.lesson-left{
    width:420px;
}

.lesson-card{
    display:flex;
    align-items:center;
    gap:16px;
    background:#fff;
    border-radius:14px;
    padding:14px;
    margin-bottom:14px;
    box-shadow:0 3px 8px rgba(0,0,0,0.06);
}
.lesson-card.active{
    border:2px solid #e68a6a;
}

.lesson-thumb{
    width:180px;
    align-self:stretch;
    border-radius:12px 0 0 12px;
    flex-shrink:0;
}

.lesson-info{
    flex:1;
}

.lesson-meta{
    font-size:12px;
    color:#aaa;
}

.lesson-info h4{
    margin:4px 0;
    font-size:16px;

}

.lesson-start button{
    border:1px solid #e68a6a;
    background:transparent;
    color:#e68a6a;
    padding:6px 16px;
    border-radius:8px;
    cursor:pointer;
}

.lesson-start button:hover{
    background:#e68a6a;
    color:white;
}

.lesson-tabs{
    display:flex;
    gap:10px;
    margin-bottom:20px;
}

.lesson-tabs a{
    padding:6px 14px;
    border-radius:8px;
    text-decoration:none;
    font-size:14px;
    color:#666;
    background:#f3f3f3;
}

.lesson-tabs a.active{
    background:#fff;
    border:1px solid #e68a6a;
    color:#e68a6a;
}
.lesson-card.active{
    border:2px solid #e68a6a;
}
.lesson-card.completed{
    opacity:0.7;
}
.start-btn{
    border:1px solid #e68a6a;
    color:#e68a6a;
    padding:6px 16px;
    border-radius:8px;
    text-decoration:none;
    font-size:14px;
}

.start-btn:hover{
    background:#e68a6a;
    color:white;
}
.lesson-done{
    color:#2ecc71;
    font-weight:bold;
    margin-left:6px;
}
.question-card{
    background:white;
    padding:20px;
    margin-bottom:20px;
    border-radius:10px;
    box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

.answers{
    margin-top:10px;
}

.answer{
    display:block;
    padding:10px;
    border:1px solid #eee;
    border-radius:6px;
    margin-bottom:8px;
}

.answer:hover{
    background:#f5f5f5;
}

.correct{
    background:#e6ffed;
    border-color:#22c55e;
}

.wrong{
    background:#ffeaea;
    border-color:#ef4444;
}

.test-result{
    padding:15px;
    border-radius:8px;
    margin-bottom:20px;
}

.test-result.passed{
    background:#e6ffed;
}

.test-result.failed{
    background:#ffeaea;
}

.submit-test{
    padding:12px 20px;
    background:#3b82f6;
    color:white;
    border:none;
    border-radius:8px;
    cursor:pointer;
}

.submit-test:hover{
    background:#2563eb;
}

.lesson-card-modern{
    display:flex;
    align-items:center;
    gap:20px;

    background:white;
    border:2px solid #e68a6a;

    border-radius:18px;
    overflow:hidden;

    padding:0;
    min-height:110px;

    transition:0.2s ease;
}

.lesson-card-modern:hover{
    transform:translateY(-2px);
}


.lesson-card-modern-thumb{
    width:160px;
    height:100%;
    background:#d17552;
    flex-shrink:0;
}


.lesson-card-modern-content{
    flex:1;
    padding:16px 0;
}


.lesson-time{
    font-size:12px;
    color:#9a9a9a;
    margin-bottom:4px;
}


.lesson-card-modern-content h4{
    margin:0;
    font-size:20px;
    font-weight:700;
}


.lesson-card-modern-desc{
    font-size:14px;
    color:#b5b5b5;
    margin-top:6px;
}


.lesson-start-btn{
    margin-right:20px;

    border:1px solid #e68a6a;
    color:#e68a6a;

    padding:8px 18px;

    border-radius:10px;
    text-decoration:none;

    font-weight:500;
}

.lesson-start-btn:hover{
    background:#e68a6a;
    color:white;
}
.start-lesson-btn{
    display:inline-block;
    margin:20px 0 30px;
    background:#e68a6a;
    color:white;
    padding:6px 16px;
    border-radius:10px;
    text-decoration:none;
    font-weight:600;
}

.start-lesson-btn:hover{
    opacity:0.9;
}
.word{
    transition: transform .18s ease, box-shadow .18s ease;
}

.word.dragging{
    opacity:.6;
    transform:scale(1.05);
    box-shadow:0 8px 20px rgba(0,0,0,0.15);
}

.order-container{
    min-height:40px;
}

.correct{
    background:#dcfce7;
    border:1px solid #16a34a;
}

.courses-left,
.courses-right{
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.15) transparent;
}


.courses-left::-webkit-scrollbar,
.courses-right::-webkit-scrollbar{
    width:4px;
}

.courses-left::-webkit-scrollbar-track,
.courses-right::-webkit-scrollbar-track{
    background:transparent;
}

.courses-left::-webkit-scrollbar-thumb,
.courses-right::-webkit-scrollbar-thumb{
    background:rgba(0,0,0,0.15);
    border-radius:10px;
    transition:0.2s;
}


.courses-left:hover::-webkit-scrollbar-thumb,
.courses-right:hover::-webkit-scrollbar-thumb{
    background:rgba(0,0,0,0.3);
}
.question-card{
    background:white;
    border-radius:16px;
    padding:24px;
    margin-bottom:20px;

    box-shadow:0 6px 18px rgba(0,0,0,0.06);
}
.answer-option{
    display:flex;
    align-items:center;
    gap:12px;

    padding:14px 16px;

    border:1px solid #eee;
    border-radius:10px;

    cursor:pointer;
    transition:0.2s;

    background:white;
}

.answer-option:hover{
    border-color:#e68a6a;
    background:#fff6f2;
}

.answer-option input{
    accent-color:#e68a6a;
}

.answer-option input:checked + span{
    font-weight:600;
}
.submit-test{
    margin-top:20px;
    background:#e68a6a;
    color:white;

    border:none;
    padding:12px 28px;

    border-radius:12px;

    font-weight:600;
    cursor:pointer;

    transition:0.2s;
}

.submit-test:hover{
    background:#e68a6a;
    color:white;
    transform:translateY(-1px);
    box-shadow:0 6px 18px rgba(0,0,0,0.12);
}
.course-title{
    font-size:28px;
    font-weight:700;
    margin-bottom:30px;
}
.pair-left,
.pair-right{
    border:1px solid #eee;
    border-radius:10px;
    padding:12px;
    cursor:pointer;
    transition:0.2s;
}

.pair-left:hover,
.pair-right:hover{
    border-color:#e68a6a;
}

.pair-left.selected{
    border:2px solid #e68a6a;
}
.answer-option input:checked + span{
    font-weight:600;
}

.answer-option:has(input:checked){
    border-color:#e68a6a;
    background:#fff5f2;
}
.test-result-card{
    display:flex;
    align-items:center;
    gap:20px;

    background:white;

    border-radius:16px;
    padding:22px;

    margin-bottom:30px;

    box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

.test-result-card.passed{
    border-left:6px solid #2ecc71;
}

.test-result-card.failed{
    border-left:6px solid #e68a6a;
}

.test-result-icon{
    font-size:34px;
}

.test-result-content h2{
    margin:0;
    font-size:20px;
}

.test-score{
    font-size:26px;
    font-weight:700;
    margin-top:4px;
}

.test-score span{
    font-size:14px;
    color:#888;
    font-weight:400;
}
.complete-lesson-btn{
    display:inline-block;

    background:#e68a6a;
    color:white;

    padding:12px 24px;

    border-radius:12px;
    text-decoration:none;

    font-weight:600;

    transition:0.2s;

    box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

.complete-lesson-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 20px rgba(0,0,0,0.12);
}


.lesson-completed-badge{
    display:inline-block;

    background:#f6fff8;
    color:#27ae60;

    border:1px solid #b8e8c8;

    padding:10px 18px;

    border-radius:12px;

    font-weight:600;
}

.progress-page{
    max-width:1100px;
    margin:auto;
    padding:20px;
}

.page-title{
    font-size:30px;
    font-weight:700;
    margin-bottom:30px;
}

.charts-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    margin-bottom:40px;
}

.chart-card{
    background:white;
    padding:25px;
    border-radius:14px;
    box-shadow:0 6px 18px rgba(0,0,0,0.08);
    text-align:center;
}

.chart-card canvas{
    width:180px !important;
    height:180px !important;
    margin:auto;
}



.activity-card,
.recent-card{
    background:white;
    padding:25px;
    border-radius:14px;
    box-shadow:0 6px 18px rgba(0,0,0,0.08);
    margin-bottom:30px;
}



.card-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
}

.card-header span{
    font-size:13px;
    color:#999;
}



.progress-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    font-size:14px;
}

.progress-table thead th{
    text-align:left;
    padding:12px 15px;
    font-size:13px;
    font-weight:600;
    color:#888;
    border-bottom:2px solid #eee;
}

.progress-table tbody td{
    padding:14px 15px;
    border-bottom:1px solid #f0f0f0;
}

.progress-table tbody tr:hover{
    background:#f8fafc;
}

.progress-table tbody tr:last-child td{
    border-bottom:none;
}



.date{
    font-size:13px;
    color:#666;
}

.test-name{
    font-weight:500;
}



.badge{
    display:inline-block;
    padding:4px 10px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
}



.badge.blue{
    background:#e3f2fd;
    color:#1976d2;
}

.badge.green{
    background:#e8f5e9;
    color:#2e7d32;
}

.badge.orange{
    background:#fff3e0;
    color:#ef6c00;
}

.badge.red{
    background:#ffebee;
    color:#c62828;
}
.section-title{
    font-size:20px;
    font-weight:600;
    margin-bottom:18px;
    position:relative;
    padding-left:14px;
}

.section-title::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:4px;
    height:18px;
    background:#9C27B0;
    border-radius:3px;
}
.date-filter{
    display:flex;
    gap:18px;
    align-items:flex-end;
    margin-bottom:20px;
    flex-wrap:wrap;
}

.filter-group{
    display:flex;
    flex-direction:column;
}

.filter-group label{
    font-size:12px;
    color:#777;
    margin-bottom:4px;
}

.filter-group input{
    padding:8px 10px;
    border:1px solid #ddd;
    border-radius:8px;
    font-size:14px;
    min-width:140px;
}

.filter-buttons{
    display:flex;
    gap:10px;
}

.btn-filter{
    background:#e68a6a;
    color:white;
    border:none;
    padding:8px 16px;
    border-radius:8px;
    cursor:pointer;
    font-weight:500;
}

.btn-filter:hover{
    background:#e68a6a;
    color:white;
    transform:translateY(-1px);
    box-shadow:0 6px 18px rgba(0,0,0,0.12);        }

.btn-reset{
    padding:8px 16px;
    border-radius:8px;
    background:#eee;
    text-decoration:none;
    color:#444;
    font-weight:500;
}

.btn-reset:hover{
    background:#ddd;
    transform:translateY(-1px);
    box-shadow:0 6px 18px rgba(0,0,0,0.12);
}

.page-title{
    margin-bottom:30px;
}

.certificates-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:24px;
}

.certificate-card{

    background:white;

    border-radius:18px;

    padding:26px;

    box-shadow:0 8px 22px rgba(0,0,0,0.08);

    display:flex;
    flex-direction:column;

    gap:16px;

    transition:all .2s ease;
}

.certificate-card:hover{

    transform:translateY(-4px);

    box-shadow:0 14px 30px rgba(0,0,0,0.12);

}

.certificate-top{

    display:flex;
    gap:12px;
    align-items:center;

}

.certificate-icon{

    font-size:28px;

    background:#fff3ef;

    color:#e68a6a;

    width:48px;
    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:12px;

}

.level-badge{

    display:inline-block;

    margin-top:4px;

    font-size:12px;

    padding:4px 10px;

    background:#f4f4f4;

    border-radius:8px;

    color:#666;

}

.certificate-info{

    margin-top:8px;

    display:flex;
    flex-direction:column;
    gap:8px;

}

.info-row{

    display:flex;
    justify-content:space-between;

    font-size:14px;

    color:#666;

}

.info-row strong{

    color:#222;

}

.download-btn{

    margin-top:8px;

    text-align:center;

    padding:12px;

    border-radius:12px;

    border:1px solid #e68a6a;

    color:#e68a6a;

    text-decoration:none;

    font-weight:600;

    transition:.2s;

}

.download-btn:hover{

    background:#e68a6a;

    color:white;

}

.no-certificates{

    background:white;

    border-radius:20px;

    padding:60px;

    text-align:center;

    box-shadow:0 8px 22px rgba(0,0,0,0.08);

}

.empty-icon{

    font-size:46px;

    margin-bottom:10px;

}

.no-certificates p{

    color:#777;

}
.sign-page {
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.cancel-btn{
    display:inline-block;
    margin:20px 0 30px;
    background:#9ca3af;
    color:white;
    padding:12px 24px;
    border-radius:10px;
    text-decoration:none;
    font-weight:600;
    border:none;
    cursor:pointer;
}

.cancel-btn:hover{
    background:#9ca3af;
    color:white;
    transform:translateY(-1px);
    box-shadow:0 6px 18px rgba(0,0,0,0.12);
}

.quiz-wrapper{
    display:flex;
    justify-content:center;
    padding:40px;
}


.quiz-card{
    width:650px;
    background:white;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,0.12);
    display:flex;
    flex-direction:column;
}


.quiz-header{
    padding:30px 35px 20px;
}


.quiz-progress{
    height:10px;
    background:#eee;
    border-radius:10px;
    overflow:hidden;
}


#progress-bar-fill{
    height:100%;
    width:0;
    background:#e68a6a;
    transition:.3s;
}


.quiz-body{
    padding:30px 35px;
    min-height:260px;
}


.quiz-question{
    font-size:20px;
    font-weight:600;
    margin-bottom:20px;
}


.quiz-counter{
    font-size:14px;
    color:#888;
}


.quiz-options{
    display:flex;
    flex-direction:column;
    gap:12px;
}


.quiz-option{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    border:1px solid #eee;
    border-radius:10px;
    cursor:pointer;
    transition:.2s;
}


.quiz-option:hover{
    border-color:#e68a6a;
    background:#fff6f2;
}


.quiz-option input{
    accent-color:#e68a6a;
}


.quiz-option.correct{
    background:#e7f8ee;
    border-color:#2ecc71;
}


.quiz-option.wrong{
    background:#ffeaea;
    border-color:#ff6b6b;
}


.quiz-footer{
    padding:25px 35px;
    border-top:1px solid #f1f1f1;
    display:flex;
    justify-content:space-between;
    align-items:center;
}


.quiz-button{
    background:#e68a6a;
    color:white;
    border:none;
    padding:12px 26px;
    border-radius:10px;
    font-weight:600;
    cursor:pointer;
    transition:.2s;
}


.quiz-button:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 20px rgba(0,0,0,0.12);
}