/* ========================================================= */
/* SEKCJE */
/* ========================================================= */

.theory{
    border-left:6px solid #4caf50;
    background:
    color-mix(
    in srgb,
    #4caf50 12%,
    var(--surface)
    );
}

.tasks{
    border-left:6px solid #2196f3;
    background:
    color-mix(
    in srgb,
    #2196f3 12%,
    var(--surface)
    );
}

.solutions{
    border-left:6px solid #ff9800;
    background:
    color-mix(
    in srgb,
    #ff9800 12%,
    var(--surface)
    );
}

.quiz-block{
    border-left:6px solid #9c27b0;
    background:
    color-mix(
    in srgb,
    #9c27b0 12%,
    var(--surface)
    );
}

.materials{
    border-left:6px solid #009688;
    background:
    color-mix(
    in srgb,
    #009688 12%,
    var(--surface)
    );
}

.teacher{
    border-left:6px solid #795548;
    background:
    color-mix(
    in srgb,
    #795548 12%,
    var(--surface)
    );
}

/* ========================================================= */
/* QUESTION */
/* ========================================================= */

.question{

    background:var(--surface);

    color:var(--text);

    padding:18px;

    border-radius:12px;

    margin-bottom:16px;

    border:1px solid var(--border);

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

.question p{

    color:var(--text);

    font-weight:600;

    margin-bottom:10px;
}

.question button{

    width:100%;

    margin-top:8px;

    padding:12px;

    border-radius:10px;

    border:1px solid var(--border);

    cursor:pointer;

    background:var(--surface-soft);

    color:var(--text);

    font-weight:500;

    transition:.2s;
}

.question button:hover{
    background:var(--surface);
}

.question button.correct{
    background:#4caf50;
    color:#fff;
    border:none;
}

.question button.wrong{
    background:#f44336;
    color:#fff;
    border:none;
}

.done{
    opacity:.85;
}

/* ========================================================= */
/* RESULT */
/* ========================================================= */

#result{

    margin-top:20px;

    font-weight:bold;

    font-size:18px;
}

/* ========================================================= */
/* NAV */
/* ========================================================= */

.nav{

    display:flex;

    justify-content:flex-end;

    margin-top:30px;
}

.nav a{

    padding:10px 16px;

    background:var(--accent);

    color:white;

    border-radius:8px;
}

/* ========================================================= */
/* ACCORDION */
/* ========================================================= */

.accordion{

    width:100%;

    background:var(--accent);

    color:white;

    border:none;

    padding:16px;

    border-radius:14px;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

    margin-top:15px;
}

.accordion:hover{
    filter:brightness(1.1);
}

/* ========================================================= */
/* PANEL */
/* ========================================================= */

.panel{

    display:none;

    margin-top:10px;

    background:var(--surface);

    color:var(--text);

    border:1px solid var(--border);

    padding:20px;

    border-radius:0 0 14px 14px;

    line-height:1.8;
}

.panel p,
.panel li,
.panel span{
    color:var(--text);
}

.panel pre{

    background:#0f172a;

    color:#dbeafe;

    border:1px solid #334155;

    border-radius:12px;

    padding:18px;
}

.panel code{
    color:#dbeafe;
}

/* ========================================================= */
/* MODULE */
/* ========================================================= */

.module{
    margin-bottom:30px;
}

.module h3{

    margin-bottom:10px;

    color:var(--accent);
}

/* ========================================================= */
/* TOPICS */
/* ========================================================= */

.topics{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:12px;
}

.topics a{

    padding:12px;

    background:var(--surface);

    border-radius:10px;

    color:var(--text);

    border:1px solid var(--border);

    transition:.2s;
}

.topics a:hover{
    outline:1px solid var(--accent);
}

/* ========================================================= */
/* TABLES */
/* ========================================================= */

.block table{

    width:100%;

    border-collapse:separate;

    border-spacing:0;

    margin:18px 0;

    border-radius:14px;

    overflow:hidden;

    box-shadow:
    0 10px 25px rgba(0,0,0,0.08);
}

.block table thead th{

    color:#fff;

    padding:12px 14px;

    text-align:left;
}

.table-window thead th{
    background:
    linear-gradient(
    135deg,
    #0ea5e9,
    #0284c7
    );
}

.table-document thead th{
    background:
    linear-gradient(
    135deg,
    #22c55e,
    #16a34a
    );
}

.table-string thead th{
    background:
    linear-gradient(
    135deg,
    #a855f7,
    #7c3aed
    );
}

.table-math thead th{
    background:
    linear-gradient(
    135deg,
    #f59e0b,
    #d97706
    );
}

.table-array thead th{
    background:
    linear-gradient(
    135deg,
    #ef4444,
    #dc2626
    );
}

.block table tbody td{

    padding:12px 14px;

    background:var(--surface);

    border-bottom:
    1px solid var(--border);
}

.block table tbody tr:nth-child(even) td{
    background:var(--surface-soft);
}

.block table tbody tr:hover td{
    background:
    rgba(99,102,241,0.08);
}

html[data-theme="dark"]
.block table tbody td{

    background:#111827;

    color:#e5e7eb;
}

html[data-theme="dark"]
.block table tbody tr:nth-child(even) td{
    background:#1f2937;
}

/* ========================================================= */
/* IMG */
/* ========================================================= */

.img-responsive{

    max-width:100%;

    border-radius:12px;

    margin:10px 0;
}

/* ========================================================= */
/* SOLUTION */
/* ========================================================= */

.solution-highlight{

    border:2px solid var(--accent);

    padding:18px;

    border-radius:14px;

    background:var(--surface-soft);

    margin:25px 0;

    text-align:center;
}

.solution-btn{

    display:inline-block;

    margin-top:10px;

    padding:12px 18px;

    background:var(--accent);

    color:white;

    border-radius:10px;

    font-weight:600;
}

.solution-btn:hover{
    opacity:.85;
}