/* Weji custom styles extracted from inline */
:root{--blue-bg:#0e58a8;--blue-bg-2:#0b3f85;--card-radius:18px;--card-shadow:0 10px 18px rgba(0,0,0,.15); height: 100vh;}
*{
    box-sizing:border-box
    }
body{
    margin:0;
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
    background: url('/images/background.jpg') center/cover no-repeat fixed;color:#fff;
}

.shell{
    max-width:980px;
    margin:48px auto;
    padding:0 16px
}

.panel{
    background:linear-gradient(180deg, #1e68c6 0%, #124e9c 100%);
    border-radius:24px;
    box-shadow:0 25px 40px rgba(0,0,0,.25);
}
.panel__inner{
    padding:22px 28px 26px
}

.header{
    display:flex;
    align-items:center;
    justify-content:space-between
}

.user{
    display:flex;
    align-items:center;
    gap:14px
}

.avatar{
    width:56px;
    height:56px;
    border-radius:50%;
    background:#ffd39a;
    display:grid;
    place-items:center;
    box-shadow:0 6px 10px rgba(0,0,0,.25)
}

.user__name{
    font-weight:800;
    font-size:22px;
    letter-spacing:.2px
}

.user__class{
    opacity:.85;
    margin-top:2px
}

.icons{
    display:flex;
    gap:16px
}

.icon-btn{
    width:36px;
    height:36px;
    border-radius:10px;
    background:rgba(255,255,255,.12);
    display:grid;
    place-items:center;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)
}

.cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
    margin:28px 0
}

.card{
    border-radius:22px;
    padding:18px;
    border:8px solid rgba(255,255,255,.9);
    background:#ffc33c;
    box-shadow:var(--card-shadow);
    text-decoration: none;
}

.card__inner{
    border-radius:14px;
    background:linear-gradient(180deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.2) 100%);
    padding:18px 12px 28px;
    display:grid;
    place-items:center;
    gap:14px
}

.card--yellow{
    background:#f6b32e
}

.card--green{
    background:#23b687
}

.card--red{
    background:#f06452
}

.card__title{
    font-weight:800;
    text-align:center;
    font-size:28px;
    line-height:1.05;
    letter-spacing:.5px;
    text-transform:uppercase;color:#fff;
    text-shadow:0 2px 0 rgba(0,0,0,.15)
}

.footer{
    background:linear-gradient(0deg, rgba(0,0,0,.12), rgba(0,0,0,.06));
    padding:16px 22px;
    display:flex;
    align-items:center;
    gap:26px
}

.dock{
    display:flex;
    gap:28px;
    align-items:center
}
.dock__item{
    width:42px;
    height:42px;
    border-radius:14px;
    background:rgba(255,255,255,.1);
    display:grid;
    place-items:center
}

.dock__label{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:10px;
    opacity:.9
}

.dock__user-btn{
    width:40px;
    height:40px;
    border-radius:14px;
    background:#ffe074;
    color:#0f3f86;
    display:grid;
    place-items:center;
    text-decoration:none;
    box-shadow:0 8px 14px rgba(0,0,0,.25);
    transition:transform .15s ease, background .15s ease;
}

.dock__user-btn:hover,
.dock__user-btn:focus-visible{
    color:#0b3f85;
    background:#ffd451;
    transform:translateY(-2px);
}

@media (max-width:860px){.cards{grid-template-columns:1fr;}}

.collapsible-card__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:8px
}

.collapsible-card__toggle{
    border:0;
    background:rgba(255,255,255,.16);
    color:#0f3f86;
    width:38px;
    height:38px;
    border-radius:12px;
    display:grid;
    place-items:center;
    box-shadow:inset 0 0 0 1px rgba(15,63,134,.08);
    cursor:pointer
}

.collapsible-card__toggle:focus-visible{
    outline:2px solid rgba(15,63,134,.45);
    outline-offset:3px
}

.collapsible-card__body{
    display:none
}

.collapsible-card__body.is-open{
    display:block
}

.subject-list{
    display:grid;
    gap:10px
}

.subject-item{
    background:#f5f8fd;
    border-radius:12px;
    padding:10px 12px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px
}

.subject-actions{
    display:flex;
    gap:8px;
    align-items:center
}

.manage-card{
    background:#fff;
    border-radius:22px;
    padding:24px;
    box-shadow:0 18px 32px rgba(12,38,96,.25);
    color:#123a6b;
}

.manage-card__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:18px;
}

.manage-card__title{
    font-weight:800;
    font-size:20px;
    color:#0f3f86;
}

.manage-card__subtitle{
    font-size:14px;
    opacity:.75;
}

.manage-form .form-control,
.manage-form .form-select{
    border-radius:14px;
    border:0;
    background:#f4f7fc;
    box-shadow:inset 0 0 0 1px rgba(15,63,134,.08);
}

.manage-form .form-control:focus,
.manage-form .form-select:focus{
    box-shadow:0 0 0 0.2rem rgba(15,63,134,.25);
}

.user-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0 12px;
    color:#123a6b;
}

.user-table th{
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:.08em;
    opacity:.7;
    padding:8px 12px;
    border-bottom:1px solid rgba(18,58,107,.2);
}

.user-table td{
    background:#f7fbff;
    padding:14px 12px;
    border-top:1px solid rgba(18,58,107,.05);
    border-bottom:1px solid rgba(18,58,107,.05);
}

.user-table tr td:first-child{
    border-top-left-radius:14px;
    border-bottom-left-radius:14px;
}

.user-table tr td:last-child{
    border-top-right-radius:14px;
    border-bottom-right-radius:14px;
}

.quiz-card .option-btn.active,
.quiz-card .option-btn:focus-visible{
    background:#f6b32e;
    color:#123a6b;
    border-color:#f6b32e;
    box-shadow:0 8px 16px rgba(246,179,46,.35);
}

.quiz-card .option-btn[disabled]{
    opacity:.7;
    cursor:not-allowed;
}

.flash-message{
    margin-top:20px;
    border-radius:18px;
    padding:12px 18px;
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:600;
    box-shadow:0 10px 20px rgba(0,0,0,.15);
}

.flash-message--success{
    background:rgba(35,182,135,.18);
    color:#0a4935;
}

.flash-message--danger{
    background:rgba(240,100,82,.18);
    color:#611e18;
}

.pagination-weji .pagination{
    --bs-pagination-border-radius:12px;
}

.pagination-weji .page-link{
    border-radius:12px;
    margin-left:8px;
}

/* Auth pages */
.auth{
    margin-top:32px;
    max-width:420px;
    margin-left:auto;
    margin-right:auto;
}

.auth__title{
    font-weight:800;
    font-size:28px;
    letter-spacing:.2em;
    text-align:center;
    margin-bottom:4px;
}

.auth__subtitle{
    text-align:center;
    opacity:.9;
    margin-bottom:20px;
    font-size:14px;
}

.auth__form .form-control{
    border-radius:12px;
    border:0;
}

.auth__btn{
    border-radius:16px;
    padding:10px 18px;
}

.auth__switch{
    font-size:14px;
}

.auth__link{
    color:#ffe074;
    font-weight:600;
    text-decoration:none;
}

.auth__link:hover{
    text-decoration:underline;
}

/* Feature icons (Latihan Soal & Kelas Belajar) */
.feature-header {
    display:flex;
    align-items:center;
    gap:14px;
}

.feature-icon {
    width:60px;
    height:60px;
    border-radius:18px;
    display:grid;
    place-items:center;
    box-shadow:0 10px 18px rgba(0,0,0,.18);
}

.feature-icon--yellow {
    background:#f6b32e;
    color:#1656a3;
}

.feature-icon--blue {
    background:#1656a3;
    color:#f6b32e;
}

.feature-icon--aqua {
    background:#2eb3f6;
    color:#ffffff;
}

.feature-icon--gold {
    background:#f6b32e;
    color:#ffffff;
}

.feature-icon--book {
    width:56px;
    height:56px;
    border-radius:12px;
    background:#bff0df;
    box-shadow:0 8px 14px rgba(0,0,0,.18);
}

.feature-icon__inner {
    font-size:28px;
}

/* Question number pill on student quiz */
.question-pill {
    width:46px;
    height:46px;
    border-radius:14px;
    background:#1656a3;
    display:grid;
    place-items:center;
    color:#f6b32e;
    font-weight:800;
    box-shadow:0 8px 14px rgba(0,0,0,.18);
}

/* Responsive tweaks for mobile */
@media (max-width: 576px) {
    .panel__inner{
        padding:18px 18px 20px;
    }

    .header{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

    .icons{
        margin-left:0;
    }

    .feature-header{
        align-items:flex-start;
        gap:10px;
    }

    .feature-icon{
        width:46px;
        height:46px;
        border-radius:14px;
    }

    .feature-icon__inner{
        font-size:22px;
    }

    .feature-icon--book{
        width:44px;
        height:44px;
        border-radius:12px;
    }

    .question-pill{
        width:34px;
        height:34px;
        border-radius:12px;
        font-size:14px;
    }

    .card__inner{
        grid-template-columns:1fr;
        text-align:left;
    }
}