/* ---------- Task detail ---------- */

.task-detail-layout{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 34px;
    align-items: start;
}

.task-main-card{
    position: relative;
    overflow: hidden;

    padding: 48px;
    border-radius: 32px;
}

.task-main-card::before{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background: linear-gradient(135deg, rgba(56,189,248,0.08), transparent 35%);
}

.task-main-card > *{
    position: relative;
    z-index: 2;
}

.task-detail-header{
    margin-bottom: 34px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.task-number-chip{
    display: inline-block;

    margin-bottom: 20px;
    padding: 9px 15px;

    border-radius: 999px;

    background: rgba(56,189,248,0.12);
    border: 1px solid rgba(56,189,248,0.25);

    color: #38bdf8;

    font-size: 15px;
    font-weight: 800;
}

.task-detail-title{
    max-width: 900px;
    margin: 0 0 16px;

    font-size: clamp(44px, 5vw, 68px);
    line-height: 1;
    letter-spacing: -2px;
}

.task-topic{
    margin-bottom: 0;
    font-size: 20px;
}

.task-question{
    position: relative;

    margin-top: 34px;
    margin-bottom: 25px;
    padding: 40px;

    border-radius: 28px;

    background: linear-gradient(180deg, rgba(15,23,42,0.96), rgba(15,23,42,0.78));
    border: 1px solid rgba(255,255,255,0.06);

    color: #e5e7eb;

    font-size: 18px;
    line-height: 1.8;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.03),
        0 10px 30px rgba(0,0,0,0.18);

    overflow: visible;
}

.task-question::before{
    content: "УСЛОВИЕ";

    position: absolute;
    top: -14px;
    left: 24px;

    padding: 6px 14px;
    border-radius: 999px;

    background: #38bdf8;
    color: #020617;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;

    z-index: 5;
}

.task-question p{
    margin-top: 0;
}

.task-question p:last-child{
    margin-bottom: 0;
}

.task-question strong{
    color: #f8fafc;
}

.task-question code,
.task-question pre{
    background: rgba(2,6,23,0.8);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 14px;
    color: #38bdf8;
}

/* CKEditor tables / images in tasks */

.task-question table{
    border-collapse: collapse !important;
    width: auto !important;
    margin: 20px 0;
}

.task-question td,
.task-question th,
.task-question figure.table td,
.task-question figure.table th{
    border: 1px solid #ffffff !important;
    padding: 12px 18px !important;
    text-align: center !important;
    background-color: #1a2740 !important;
    color: white !important;
}

.task-question th,
.task-question figure.table th{
    background-color: #2d3f5e !important;
    font-weight: bold;
}

.task-question figure.table{
    margin: 25px 0;
}

.task-question figure.table table{
    border-collapse: collapse !important;
    width: auto !important;
}

.task-question img{
    width: 600px !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 20px 0;
    border-radius: 10px;
}

.task-question figure.image{
    width: 600px !important;
    max-width: 100% !important;
    margin: 20px 0 !important;
}

.task-question figure.image img{
    width: 100% !important;
    height: auto !important;
    display: block;
    border-radius: 10px;
}

/* Programs table */

.programs-table{
    margin: 30px 0;
    max-width: 720px;
    overflow-x: auto;
}

.programs-table table{
    width: 100%;
    border-collapse: collapse !important;
    color: white;
    border: 1px solid white !important;
}

.programs-table th{
    background: #2f405c;
    border: 1px solid #ffffff !important;
    padding: 12px;
    text-align: center;
    font-size: 18px;
}

.programs-table td{
    border: 1px solid #ffffff !important;
    padding: 24px;
    vertical-align: top;
    text-align: left;
}

.programs-table pre{
    margin: 0;
    white-space: pre;
    font-family: Consolas, monospace;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
}

.programs-table tr{
    border: 1px solid white !important;
}

/* Answer form */

.answer-form{
    margin-top: 28px;

    display: grid;
    grid-template-columns: 120px 1fr 180px;
    gap: 16px;
    align-items: center;

    padding: 22px;

    background: rgba(15,23,42,0.65);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 22px;
}

.answer-form label{
    margin: 0;
    color: #cbd5e1;
    font-size: 17px;
    font-weight: 700;
}

.answer-form input{
    width: 100% !important;
    height: 58px;
    margin-left: 0;

    border-radius: 16px;
    font-size: 18px;
}

.answer-form button{
    height: 58px;
    border-radius: 16px;
    font-size: 16px;
}

.answer-form-success{
    border-color: rgba(34,197,94,0.35);
    box-shadow: 0 0 30px rgba(34,197,94,0.12);
}

.answer-form-success input{
    opacity: 0.75;
    cursor: not-allowed;
}

.answer-form-success button{
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    cursor: default;
    box-shadow: 0 12px 30px rgba(34,197,94,0.25);
}

.answer-form-success button:hover{
    transform: none;
}

/* Side panel */

.task-side-panel{
    position: sticky;
    top: 110px;

    display: grid;
    gap: 18px;
}

.side-card{
    padding: 28px;
    border-radius: 24px;
    transition: 0.3s;
}

.side-card:hover{
    border-color: rgba(56,189,248,0.45);
}

.side-label{
    display: block;
    margin-bottom: 18px;

    color: #94a3b8;

    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.side-card p{
    margin: 10px 0 0;
    color: #cbd5e1;
    line-height: 1.5;
}

.task-solved,
.task-unsolved{
    display: inline-block;

    margin: 8px 0 16px;
    padding: 7px 12px;

    border-radius: 999px;

    font-weight: 700;
    font-size: 14px;
}

.task-solved{
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

.task-unsolved{
    background: rgba(148,163,184,0.12);
    color: #cbd5e1;
}

.solve-btn{
    width: 100%;
    margin-top: 20px;
}

/* Task switcher */

.task-switcher-card{
    padding: 24px;
}

.task-switcher{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.task-switcher a,
.task-switcher-disabled,
.side-nav-buttons a{
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;
    padding: 14px 16px;

    border-radius: 16px;

    background: rgba(15,23,42,0.8);
    border: 1px solid rgba(255,255,255,0.08);

    color: #38bdf8;
    text-decoration: none;
    font-weight: 800;

    transition: 0.3s;
}

.task-switcher a:hover,
.side-nav-buttons a:hover{
    border-color: #38bdf8;
    background: rgba(56,189,248,0.10);
}

.task-switcher-disabled{
    color: #64748b;
    cursor: not-allowed;
    opacity: 0.65;
}

/* File / solution / result */

.download-file-btn{
    display: inline-block;
    margin: 10px 0 25px;

    background-color: #38bdf8;
    color: black;

    padding: 12px 20px;
    border-radius: 10px;

    text-decoration: none;
    font-weight: bold;
}

.download-file-btn:hover{
    background-color: #0ea5e9;
}

.file-check-note{
    margin-top: 20px;
    padding: 18px;

    background-color: #0f172a;
    border-left: 4px solid #38bdf8;
    border-radius: 10px;

    font-weight: bold;
}

.show-solution-btn{
    margin-top: 20px;

    background-color: #38bdf8;
    color: black;

    padding: 12px 20px;
    border-radius: 10px;

    font-weight: bold;
}

.show-solution-btn:hover{
    background-color: #0ea5e9;
}

.explanation{
    margin-top: 24px;

    max-height: 0;
    overflow: hidden;

    opacity: 0;
    transform: translateY(-10px);

    transition:
        max-height 0.5s ease,
        opacity 0.35s ease,
        transform 0.35s ease,
        padding 0.35s ease;

    padding: 0 24px;

    background: linear-gradient(180deg, rgba(15,23,42,0.95), rgba(15,23,42,0.75));
    border-radius: 22px;
    border: 1px solid rgba(56,189,248,0.15);
}

.explanation.solution-open{
    max-height: 2000px;
    opacity: 1;
    transform: translateY(0);
    padding: 28px 24px;
}

.explanation h3{
    margin-top: 0;
    color: #38bdf8;
}

.explanation p{
    line-height: 1.6;
}

.result{
    display: flex;
    flex-direction: column;
    gap: 6px;

    width: fit-content;
    margin-top: 22px;
    padding: 22px 24px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.08);

    font-size: 16px;
    line-height: 1.4;

    backdrop-filter: blur(12px);

    animation: resultFade 0.35s ease;
}

.result strong{
    display: block;
    margin-bottom: 8px;
    font-size: 24px;
}

.result span{
    color: #cbd5e1;
    line-height: 1.5;
    font-weight: 500;
}

.result-correct{
    background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(34,197,94,0.08));
    border-color: rgba(34,197,94,0.35);
    box-shadow: 0 0 30px rgba(34,197,94,0.15);
}

.result-correct strong{
    color: #4ade80;
}

.result-wrong{
    background: linear-gradient(135deg, rgba(239,68,68,0.18), rgba(239,68,68,0.08));
    border-color: rgba(239,68,68,0.35);
    box-shadow: 0 0 30px rgba(239,68,68,0.12);
}

.result-wrong strong{
    color: #f87171;
}
@keyframes resultFade {
    from{
        opacity: 0;
        transform: translateY(10px);
    }

    to{
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1000px) {
    .task-detail-layout{
        grid-template-columns: 1fr;
    }

    .task-side-panel{
        position: static;
    }
}

.task-chips-row{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.task-chips-row .task-number-chip{
    margin-bottom: 0;
}

.task-id-chip{
    display: inline-block;

    padding: 9px 15px;
    border-radius: 999px;

    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.25);

    color: #cbd5e1;

    font-size: 15px;
    font-weight: 800;
}

/* ---------- Logic expressions ---------- */

.logic-expression {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;

    margin-top: 22px;
    padding: 18px 22px;

    border-radius: 18px;

    background: rgba(2, 6, 23, 0.55);
    border: 1px solid rgba(56, 189, 248, 0.22);

    color: #e5edf8;

    font-size: 26px;
    font-weight: 800;
    line-height: 1.35;
}

.logic-expression span {
    display: inline-flex;
    align-items: center;

    color: #e5edf8;
}

.logic-expression span:nth-child(1),
.logic-expression span:nth-child(3),
.logic-expression span:nth-child(4) {
    color: #38bdf8;
    font-weight: 950;
    letter-spacing: 0.04em;
}

.logic-expression i {
    color: #ffffff;
    font-style: italic;
}

/* ---------- Logic expression card ---------- */

.logic-expression {
    display: inline-block;

    margin-top: 18px;
    padding: 18px 24px;

    border-radius: 18px;

    background: rgba(56, 189, 248, 0.10);
    border: 1px solid rgba(56, 189, 248, 0.28);

    color: #38bdf8;

    font-size: 26px;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: 0.02em;

    box-shadow:
        0 0 30px rgba(56, 189, 248, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.04);
}

.logic-expression i {
    color: #ffffff;
    font-style: italic;
}

.robot-code {
    display: block !important;
    margin: 18px 0 26px !important;
    padding: 20px 22px !important;
    border-radius: 18px !important;
    background: #07111f !important;
    border: 1px solid rgba(56, 189, 248, 0.28) !important;
    color: #e5edf7 !important;
    font-family: Consolas, Monaco, "Courier New", monospace !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
    overflow-x: auto !important;
}

.robot-code div {
    margin: 0 !important;
    padding: 0 !important;
    font-family: Consolas, Monaco, "Courier New", monospace !important;
    white-space: nowrap !important;
}

.robot-code .indent-1 {
    padding-left: 24px !important;
}

.robot-code .indent-2 {
    padding-left: 48px !important;
}

/* ---------- Robot code blocks for task 15 solutions ---------- */

.explanation .robot-code-table {
    width: 100% !important;
    max-width: 760px !important;

    margin: 18px 0 26px !important;

    border-collapse: separate !important;
    border-spacing: 0 !important;

    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    border-radius: 18px !important;

    overflow: hidden !important;

    background: #07111f !important;
}

.explanation .robot-code-table td {
    padding: 18px 22px !important;

    background: #07111f !important;

    color: #e5edf7 !important;

    font-family: Consolas, Monaco, "Courier New", monospace !important;
    font-size: 15px !important;
    line-height: 1.75 !important;

    border: none !important;

    white-space: nowrap !important;
    text-align: left !important;
}

.explanation .robot-code-line {
    display: block !important;
    font-family: Consolas, Monaco, "Courier New", monospace !important;
}

.explanation .robot-indent-1 {
    display: block !important;
    padding-left: 24px !important;
}

.explanation .robot-indent-2 {
    display: block !important;
    padding-left: 48px !important;
}

/* ---------- Beautiful tables inside task questions ---------- */

.task-question table {
    width: auto;
    max-width: 100%;
    margin: 10px 0 28px;

    border-collapse: separate;
    border-spacing: 0;

    overflow: hidden;

    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 16px;

    background: rgba(15, 23, 42, 0.72);
}

.task-question table th,
.task-question table td {
    min-width: 64px;
    padding: 16px 18px;

    border-right: 1px solid rgba(148, 163, 184, 0.26);
    border-bottom: 1px solid rgba(148, 163, 184, 0.26);

    color: #e5edf8;

    font-size: 18px;
    font-weight: 800;
    text-align: center;
}

.task-question table tr:last-child td {
    border-bottom: none;
}

.task-question table th:last-child,
.task-question table td:last-child {
    border-right: none;
}

.task-question table tr:first-child td,
.task-question table tr:first-child th {
    background: rgba(56, 189, 248, 0.10);
    color: #ffffff;
}

.task-question ul {
    margin: 14px 0 26px;
    padding-left: 28px;
}

.task-question li {
    margin-bottom: 10px;

    color: #dbeafe;

    font-size: 18px;
    line-height: 1.55;
}

.task-question p {
    color: #cbd5e1;
    font-size: 18px;
    line-height: 1.65;
}

/* =========================================================
   FINAL FIX — center tables and images in task questions
   ========================================================= */

.task-question figure.table {
    width: 100% !important;
    max-width: 100% !important;

    display: flex !important;
    justify-content: center !important;

    margin: 24px auto !important;
    overflow-x: auto !important;
}

.task-question figure.table table {
    width: auto !important;
    max-width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;
}

.task-question table {
    width: auto !important;
    max-width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;
}

.task-question figure.image {
    width: fit-content !important;
    max-width: 100% !important;

    margin: 24px auto !important;
}

.task-question figure.image img,
.task-question img {
    display: block !important;

    max-width: 100% !important;
    height: auto !important;

    margin-left: auto !important;
    margin-right: auto !important;
}

.explanation pre {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 14px 0 0;
    padding: 18px 20px;
    overflow-x: auto;

    white-space: pre-wrap;
    word-break: break-word;

    background: #07111f;
    border: 1px solid rgba(56, 189, 248, 0.28);
    border-radius: 16px;

    color: #e5edf7;
    font-size: 15px;
    line-height: 1.7;
    font-family: Consolas, Monaco, "Courier New", monospace;
}

.explanation code {
    font-family: Consolas, Monaco, "Courier New", monospace;
}

.explanation p {
    line-height: 1.7;
}

.explanation ol {
    margin: 12px 0 18px 22px;
    padding-left: 18px;
    line-height: 1.7;
}

.explanation li {
    margin-bottom: 8px;
}

/* =========================================================
   FINAL FIX — normal centered task detail page
   ========================================================= */

.task-detail-layout {
    display: block !important;

    width: 100% !important;
    max-width: 980px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}

.task-main-card {
    width: 100% !important;
    max-width: 980px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding: 42px 38px !important;
}

.task-side-panel {
    width: 100% !important;
    max-width: 980px !important;

    margin: 28px auto 0 !important;

    position: static !important;
}

.task-question {
    width: 100% !important;
}

.task-question .exam-programs-grid,
.exam-task-item .exam-programs-grid,
.exam-programs-grid {
    width: 100% !important;
    max-width: 760px !important;

    margin: 28px auto 34px !important;
}

.task-text-before,
.task-text-after {
    width: 100% !important;
    max-width: 760px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}

.answer-form {
    max-width: 760px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 768px) {
    .task-detail-layout,
    .task-main-card,
    .task-side-panel {
        max-width: 100% !important;
    }

    .task-main-card {
        padding: 26px 18px !important;
    }

    .task-question .exam-programs-grid,
    .exam-task-item .exam-programs-grid,
    .exam-programs-grid,
    .task-text-before,
    .task-text-after,
    .answer-form {
        max-width: 100% !important;
    }
}

/* =========================================================
   FINAL FIX 8 — restore right sidebar on task detail page
   ========================================================= */

@media (min-width: 1001px) {
    .task-detail-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 360px !important;
        gap: 34px !important;
        align-items: start !important;

        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .task-main-card {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .task-side-panel {
        position: sticky !important;
        top: 110px !important;

        display: grid !important;
        gap: 18px !important;

        width: auto !important;
        max-width: none !important;

        margin: 0 !important;
    }
}

@media (max-width: 1000px) {
    .task-detail-layout {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .task-side-panel {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ---------- Task detail responsive ---------- */

@media (max-width: 768px) {
    .task-detail-layout{
        display: flex !important;
        flex-direction: column !important;
        gap: 22px !important;
    }

    .task-main-card{
        order: 1 !important;

        width: 100%;
        max-width: 100%;

        padding: 26px 20px !important;
        border-radius: 28px !important;

        overflow-x: hidden;
    }

    .task-side-panel{
        order: 2 !important;

        position: static !important;

        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;

        width: 100%;
        max-width: 100%;
    }

    .task-detail-header{
        margin-bottom: 24px !important;
        padding-bottom: 22px !important;
    }

    .task-detail-title{
        font-size: 36px !important;
        line-height: 1.05 !important;
        letter-spacing: -1.2px !important;
        overflow-wrap: break-word;
        word-break: normal;
    }

    .task-topic{
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    .breadcrumbs{
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .task-question{
        margin-top: 28px !important;
        padding: 32px 20px 24px !important;
        border-radius: 24px !important;

        font-size: 17px !important;
        line-height: 1.65 !important;

        overflow: visible !important;
    }

    .task-question figure.table{
        overflow-x: auto !important;
        max-width: 100% !important;
    }

    .task-question::before{
        top: -14px !important;
        left: 18px !important;
        z-index: 5 !important;
    }

    .task-question table{
        min-width: 520px;
    }

    .answer-form{
        margin-top: 22px !important;
        padding: 20px !important;

        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .answer-form label{
        font-size: 16px !important;
    }

    .answer-form input[type="text"]{
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 58px !important;

        font-size: 18px !important;

        padding: 0 18px !important;
        margin: 0 !important;
    }

    .answer-form button{
        width: 100% !important;
        height: 58px !important;

        font-size: 17px !important;

        margin: 0 !important;
    }

    .task-switcher-card{
        width: 100% !important;
        padding: 18px !important;
    }

    .task-switcher{
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }

    .task-switcher a,
    .task-switcher-disabled{
        min-height: 56px !important;

        padding: 8px 10px !important;

        border-radius: 16px !important;

        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;

        text-align: center !important;
        white-space: normal !important;

        word-break: break-word !important;
    }

    .task-switcher-card .side-label{
        margin-bottom: 14px !important;
        font-size: 13px !important;
    }

    .side-card{
        width: 100% !important;
        max-width: 100% !important;

        padding: 22px !important;
        border-radius: 24px !important;
        margin: 0 !important;
    }

    .side-card .solve-btn{
        width: 100% !important;
        margin-top: 22px !important;
    }
}


/* ---------- Favorite button ---------- */

.favorite-btn{
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 54px;

    margin: 0 0 18px;
    padding: 0 18px;

    border-radius: 16px;

    background: linear-gradient(135deg, #facc15, #eab308) !important;
    border: none !important;

    color: #111827 !important;

    font-size: 15px;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;

    box-shadow: 0 14px 34px rgba(250, 204, 21, 0.24) !important;

    cursor: pointer;
    transition: 0.25s;
}

.favorite-btn:hover{
    transform: translateY(-2px);

    box-shadow: 0 18px 42px rgba(250, 204, 21, 0.34) !important;
}

/* =========================================================
   FINAL FIX — show all CKEditor paragraphs in task question
   ========================================================= */

.task-question {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.task-question p {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;

    margin: 0 0 18px !important;

    color: #cbd5e1 !important;
    font-size: 18px !important;
    line-height: 1.65 !important;
}

.task-question p:last-child {
    margin-bottom: 0 !important;
}

.task-question br {
    display: block !important;
    content: "" !important;
    margin-bottom: 2px !important;
}