body{

    background:
    #07142b;

}

.topic-page{

    min-height:100vh;

}

.topic-hero{

    padding:
    128px 0 44px;

    background:
    linear-gradient(
        180deg,
        #07142b,
        #0a1d42
    );

    border-bottom:
    1px solid rgba(255,255,255,0.06);

}

.topic-hero h1{

    max-width:880px;

    margin-bottom:14px;

    font-size:44px;

    line-height:1.18;

}

.topic-subtitle{

    max-width:640px;

    color:#b9c8e6;

    font-size:15px;

    line-height:1.8;

}

.topic-section{

    padding:
    42px 0 90px;

}

.topic-section-header{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:24px;

    margin-bottom:24px;

}

.topic-section-header h2{

    font-size:30px;

    margin-bottom:8px;

}

.topic-section-header p{

    color:#9fb0d1;

    font-size:14px;

}

.back-link{

    flex:0 0 auto;

    color:#dbe7ff;

    text-decoration:none;

    background:
    rgba(255,255,255,0.06);

    border:
    1px solid rgba(255,255,255,0.08);

    border-radius:14px;

    padding:12px 16px;

    font-size:13px;

    font-weight:600;

    transition:0.25s ease;

}

.back-link:hover{

    color:white;

    border-color:
    rgba(56,182,255,0.42);

    background:
    rgba(56,182,255,0.12);

}

.topic-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(230px,1fr));

    gap:18px;

}

.topic-card{

    min-height:168px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    gap:20px;

    padding:22px;

    border-radius:18px;

    color:white;

    text-decoration:none;

    background:
    rgba(20,35,75,0.86);

    border:
    1px solid rgba(255,255,255,0.07);

    transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;

}

.topic-card:hover{

    transform:
    translateY(-5px);

    border-color:
    rgba(56,182,255,0.52);

    background:
    rgba(22,43,88,0.94);

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

}

.topic-card-top{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:14px;

}

.topic-icon{

    width:46px;

    height:46px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
    rgba(56,182,255,0.12);

    color:#38b6ff;

    font-size:18px;

}

.topic-number{

    color:#7f91b5;

    font-size:12px;

    font-weight:700;

    letter-spacing:0;

}

.topic-card h3{

    font-size:20px;

    line-height:1.35;

    margin-bottom:8px;

}

.topic-card p{

    color:#b9c8e6;

    font-size:13px;

    line-height:1.65;

}

.topic-action{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    color:#38b6ff;

    font-size:13px;

    font-weight:700;

}

.empty-topics{

    padding:36px;

    border-radius:18px;

    background:
    rgba(20,35,75,0.8);

    border:
    1px solid rgba(255,255,255,0.07);

    color:#b9c8e6;

}

@media(max-width:768px){

    .topic-hero{

        padding:
        104px 0 36px;

    }

    .topic-hero h1{

        font-size:34px;

    }

    .topic-section-header{

        align-items:flex-start;

        flex-direction:column;

    }

    .back-link{

        width:100%;

        text-align:center;

    }

    .topic-grid{

        grid-template-columns:1fr;

    }

}