:root{
    --sand:#E5CB90;
    --cream:#FFF3C8;
    --mint:#34A99D;
    --teal:#458393;

    --blue:#458393;
    --blue-dark:#263B3A;
    --green:#34A99D;
    --orange:#E5CB90;
    --yellow:#FFF3C8;

    --ink:#263B3A;
    --muted:#6B7A78;
    --soft:#FFF8DE;
    --line:rgba(69,131,147,.18);
    --danger:#ef4444;
    --white:#fff;
    --shadow:0 12px 30px rgba(69,131,147,.13);
    --radius:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    color:var(--ink);
    background:linear-gradient(180deg,#f3f8ff 0%,#fff 45%,#f8fbff 100%);
    min-height:100vh;
}
a{color:inherit;text-decoration:none}
.topbar{
    position:sticky;top:0;z-index:20;
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:12px 18px;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--blue-dark)}
.brand small{display:block;color:var(--muted);font-size:11px;font-weight:600;margin-top:1px}
.brand-mark{
    display:inline-grid;place-items:center;width:42px;height:42px;border-radius:14px;
    background:linear-gradient(135deg,var(--blue),var(--green));color:#fff;font-weight:900;font-size:12px;
    box-shadow:var(--shadow);
}
.topnav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.topnav a{padding:9px 12px;border-radius:12px;color:#334155;font-weight:650;font-size:14px}
.topnav a.active,.topnav a:hover{background:var(--soft);color:var(--blue-dark)}
.user-chip{background:#eff6ff;color:var(--blue-dark);font-weight:700;padding:8px 12px;border-radius:999px;font-size:13px;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.container{width:min(1120px,100%);margin:0 auto;padding:22px 18px 90px}
.role-peserta .container{width:min(560px,100%);padding:18px 14px 92px}
.hero{
    display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:center;
    padding:28px;border-radius:28px;background:linear-gradient(135deg,#0f67d8,#11a36a);color:#fff;box-shadow:var(--shadow);overflow:hidden;position:relative;
}
.hero:after{content:"";position:absolute;right:-80px;bottom:-100px;width:260px;height:260px;background:rgba(250,204,21,.3);border-radius:50%}
.hero h1{font-size:clamp(30px,5vw,52px);line-height:1.05;margin:0 0 12px}
.hero p{opacity:.92;font-size:17px;line-height:1.6;margin:0 0 18px}
.hero-card{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);border-radius:24px;padding:20px;backdrop-filter:blur(10px);position:relative;z-index:1}
.btn,.button{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    border:0;border-radius:14px;padding:12px 16px;background:var(--blue);color:#fff;font-weight:800;cursor:pointer;
    box-shadow:0 10px 20px rgba(15,103,216,.18);
}
.btn:hover,.button:hover{background:var(--blue-dark)}
.btn.green{background:var(--green)}.btn.orange{background:var(--orange)}.btn.light{background:#fff;color:var(--blue-dark)}
.btn.outline{background:#fff;color:var(--blue-dark);border:1px solid var(--line);box-shadow:none}
.btn.small{padding:8px 11px;font-size:13px;border-radius:11px}
.btn.block{width:100%}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.card{
    background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);
}
.card.flat{box-shadow:none}.card h2,.card h3{margin-top:0}.muted{color:var(--muted)}
.stat{display:flex;align-items:center;gap:14px}.stat .num{font-size:34px;font-weight:900;color:var(--blue-dark)}
.alert{padding:12px 14px;border-radius:14px;margin-bottom:14px;font-weight:650}
.alert.success{background:#dcfce7;color:#166534}.alert.danger{background:#fee2e2;color:#991b1b}.alert.info{background:#dbeafe;color:#1e3a8a}
.form{display:grid;gap:12px}.form label{font-weight:750;font-size:14px}.form input,.form select,.form textarea{
    width:100%;border:1px solid var(--line);border-radius:14px;padding:12px 13px;font:inherit;background:#fff;color:var(--ink);
}
.form textarea{min-height:120px;resize:vertical}.form .hint{font-size:12px;color:var(--muted)}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:18px;background:#fff}
table{width:100%;border-collapse:collapse;background:#fff}th,td{padding:12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{background:#f8fbff;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:#475569}
.badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:800;background:#e5e7eb;color:#374151}.badge.success{background:#dcfce7;color:#166534}.badge.warning{background:#fef3c7;color:#92400e}.badge.danger{background:#fee2e2;color:#991b1b}.badge.muted{background:#f1f5f9;color:#64748b}
.mobile-card{border-radius:24px;padding:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);margin-bottom:14px}
.welcome{background:linear-gradient(135deg,var(--blue),#24b36b);color:#fff;border:0;position:relative;overflow:hidden}.welcome:after{content:"";position:absolute;right:-50px;top:-50px;width:150px;height:150px;background:rgba(250,204,21,.28);border-radius:50%}.welcome *{position:relative;z-index:1}.welcome h1{margin:0 0 8px;font-size:24px}.welcome p{margin:0;color:rgba(255,255,255,.9);line-height:1.55}
.fast-menu{display:grid;grid-template-columns:1fr 1fr;gap:12px}.fast-menu a{background:#fff;border:1px solid var(--line);border-radius:20px;padding:14px;box-shadow:var(--shadow);font-weight:800}.fast-menu span{display:block;font-size:28px;margin-bottom:6px}
.journey{display:grid;gap:10px}.journey-step{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:13px;box-shadow:0 8px 18px rgba(15,103,216,.07)}.journey-step .icon{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:#eff6ff;font-size:22px}.journey-step.done .icon{background:#dcfce7}.journey-step.locked{opacity:.55}.journey-step strong{display:block}.journey-step small{color:var(--muted)}
.progress{height:10px;background:#e8eef7;border-radius:999px;overflow:hidden}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--green));border-radius:999px}
.ai-box{background:#f0f7ff;border:1px solid #bfdbfe;border-radius:18px;padding:14px;white-space:pre-wrap;line-height:1.55}.coach-box{background:#f7fee7;border:1px solid #d9f99d;border-radius:18px;padding:14px;white-space:pre-wrap;line-height:1.55}.danger-box{background:#fff7ed;border:1px solid #fed7aa;border-radius:18px;padding:14px;line-height:1.55}
.bottom-nav{display:none}
.auth-wrap{width:min(440px,100%);margin:24px auto}.auth-logo{text-align:center;margin-bottom:18px}.auth-logo .brand-mark{margin:auto;width:70px;height:70px;border-radius:24px;font-size:18px}.auth-logo h1{margin:10px 0 4px}.auth-logo p{margin:0;color:var(--muted)}
.video{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:16px;background:#e5e7eb}.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.kbd{font-family:ui-monospace, SFMono-Regular, Menlo, monospace;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:8px;padding:2px 6px;font-size:12px}
@media(max-width:760px){
    .topbar{padding:10px 12px}.topnav{display:none}.user-chip{display:none}.container{padding:16px 12px 92px}.hero{grid-template-columns:1fr;padding:22px}.grid,.grid.two{grid-template-columns:1fr}.card{padding:15px}.role-peserta .topbar{justify-content:center}.role-peserta .brand small{display:none}.role-peserta .brand-mark{width:38px;height:38px}.bottom-nav{position:fixed;display:grid;grid-template-columns:repeat(4,1fr);left:0;right:0;bottom:0;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);z-index:30;padding:8px 6px calc(8px + env(safe-area-inset-bottom))}.bottom-nav a{text-align:center;color:#475569;font-weight:800}.bottom-nav span{display:block;font-size:22px;line-height:1}.bottom-nav small{font-size:11px}.table-wrap{border-radius:14px}th,td{padding:10px;font-size:14px}
}

/* ======================================================
   AUTH PAGE - MOBILE APP LOGIN
   ASN Coaching Hub
   Palette: #E5CB90 #FFF3C8 #34A99D #458393
====================================================== */

body.login-page {
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(52,169,157,.16), transparent 32%),
        radial-gradient(circle at bottom right, rgba(229,203,144,.28), transparent 36%),
        var(--cream);
}

body.login-page .topbar {
    display: none !important;
}

body.login-page main.container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.login-page main.container > .alert {
    width: min(390px, calc(100% - 32px));
    margin: 18px auto -10px;
    position: relative;
    z-index: 10;
    border-radius: 14px;
    border: 1px solid var(--line);
    box-shadow: 0 12px 28px rgba(69, 131, 147, .10);
}

.login-mobile-page {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.login-phone-frame {
    width: 100%;
    max-width: 430px;
    min-height: 720px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,253,244,.96)),
        #FFFDF4;
    border-radius: 34px;
    border: 1px solid var(--line);
    box-shadow: 0 24px 60px rgba(69, 131, 147, .16);
    padding: 38px 28px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.login-phone-frame::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 999px;
    background: rgba(52,169,157,.10);
    top: -70px;
    right: -70px;
    pointer-events: none;
}

.login-phone-frame::after {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 999px;
    background: rgba(229,203,144,.22);
    bottom: -70px;
    left: -70px;
    pointer-events: none;
}

.login-logo-area,
.login-form,
.login-footer-text {
    position: relative;
    z-index: 2;
}

.login-logo-area {
    text-align: center;
    margin-bottom: 28px;
}

.login-logo {
    width: 190px;
    max-width: 76%;
    height: auto;
    display: block;
    margin: 0 auto 18px;
    object-fit: contain;
}

.login-logo-fallback {
    width: 154px;
    height: 154px;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        linear-gradient(#FFFDF4, #FFFDF4) padding-box,
        linear-gradient(135deg, var(--sand), var(--mint), var(--teal)) border-box;
    border: 4px solid transparent;
    color: var(--teal);
    font-size: 42px;
    font-weight: 950;
    letter-spacing: -.04em;
    box-shadow: 0 14px 34px rgba(69, 131, 147, .14);
}

.login-title {
    margin: 0;
    color: var(--ink);
    font-size: 22px;
    line-height: 1.25;
    font-weight: 900;
    letter-spacing: -.02em;
}

.login-desc {
    margin: 9px auto 0;
    color: var(--muted);
    max-width: 310px;
    font-size: 13.5px;
    line-height: 1.55;
}

.login-form {
    display: grid;
    gap: 14px;
}

.login-field {
    position: relative;
}

.login-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--teal);
    font-size: 13px;
    font-weight: 850;
}

.login-field input {
    width: 100%;
    height: 52px;
    border: 1px solid rgba(69, 131, 147, .20);
    border-radius: 13px;
    background: rgba(255, 255, 255, .82);
    color: var(--ink);
    padding: 0 46px 0 15px;
    font: inherit;
    outline: none;
    transition: .2s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.login-field input::placeholder {
    color: rgba(107, 122, 120, .68);
}

.login-field input:focus {
    background: #ffffff;
    border-color: var(--mint);
    box-shadow: 0 0 0 4px rgba(52, 169, 157, .14);
}

.login-field-icon,
.password-toggle {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    color: var(--teal);
    font-size: 16px;
    opacity: .78;
}

.password-toggle {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.login-btn {
    height: 52px;
    border: 0;
    border-radius: 13px;
    cursor: pointer;
    background: linear-gradient(135deg, var(--mint), var(--teal));
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
    box-shadow: 0 14px 24px rgba(52, 169, 157, .24);
    transition: .2s ease;
}

.login-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 30px rgba(52, 169, 157, .32);
    filter: saturate(1.04);
}

.login-links {
    margin-top: 4px;
    text-align: center;
    display: grid;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
}

.login-links a {
    color: var(--teal);
    font-weight: 850;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.login-note {
    margin-top: 16px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255, 243, 200, .72);
    border: 1px solid rgba(229, 203, 144, .55);
    color: var(--ink);
    font-size: 12.8px;
    line-height: 1.55;
}

.login-note strong {
    color: var(--teal);
}

.demo-box {
    margin-top: 14px;
    border: 1px solid rgba(52, 169, 157, .24);
    background: rgba(52, 169, 157, .08);
    color: var(--teal);
    border-radius: 16px;
    padding: 12px 14px;
    font-size: 12.5px;
    line-height: 1.55;
}

.demo-box summary {
    cursor: pointer;
    font-weight: 900;
}

.demo-box .kbd {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 6px;
    background: rgba(255,255,255,.80);
    border: 1px solid rgba(69, 131, 147, .16);
    color: var(--ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11.5px;
}

.login-footer-text {
    margin-top: 24px;
    text-align: center;
    color: rgba(69, 131, 147, .78);
    font-size: 12px;
    line-height: 1.45;
    font-weight: 650;
}

@media (max-width: 520px) {
    body.login-page {
        background: #FFFDF4;
    }

    .login-mobile-page {
        min-height: 100dvh;
        padding: 0;
        align-items: stretch;
    }

    .login-phone-frame {
        max-width: none;
        min-height: 100dvh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 38px 24px 28px;
        background:
            radial-gradient(circle at top right, rgba(52,169,157,.12), transparent 32%),
            linear-gradient(180deg, var(--cream) 0%, #FFFDF4 46%, #ffffff 100%);
    }

    .login-logo {
        width: 180px;
    }
}

@media (max-width: 370px) {
    .login-phone-frame {
        padding-left: 18px;
        padding-right: 18px;
    }

    .login-logo {
        width: 160px;
    }

    .login-title {
        font-size: 20px;
    }
}

/* ======================================================
   REGISTER PAGE - MOBILE APP REGISTER
   ASN Coaching Hub
====================================================== */

body.register-page {
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(52,169,157,.16), transparent 32%),
        radial-gradient(circle at bottom right, rgba(229,203,144,.28), transparent 36%),
        var(--cream);
}

body.register-page .topbar {
    display: none !important;
}

body.register-page main.container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.register-page main.container > .alert {
    width: min(430px, calc(100% - 32px));
    margin: 18px auto -10px;
    position: relative;
    z-index: 10;
    border-radius: 14px;
    border: 1px solid var(--line);
    box-shadow: 0 12px 28px rgba(69, 131, 147, .10);
}

.register-mobile-page {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.register-phone-frame {
    width: 100%;
    max-width: 470px;
    min-height: 720px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,253,244,.96)),
        #FFFDF4;
    border-radius: 34px;
    border: 1px solid var(--line);
    box-shadow: 0 24px 60px rgba(69, 131, 147, .16);
    padding: 34px 28px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.register-phone-frame::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 999px;
    background: rgba(52,169,157,.10);
    top: -70px;
    right: -70px;
    pointer-events: none;
}

.register-phone-frame::after {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 999px;
    background: rgba(229,203,144,.22);
    bottom: -70px;
    left: -70px;
    pointer-events: none;
}

.register-logo-area,
.register-form,
.register-footer-text {
    position: relative;
    z-index: 2;
}

.register-logo-area {
    text-align: center;
    margin-bottom: 22px;
}

.register-logo {
    width: 160px;
    max-width: 68%;
    height: auto;
    display: block;
    margin: 0 auto 14px;
    object-fit: contain;
}

.register-logo-fallback {
    width: 128px;
    height: 128px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        linear-gradient(#FFFDF4, #FFFDF4) padding-box,
        linear-gradient(135deg, var(--sand), var(--mint), var(--teal)) border-box;
    border: 4px solid transparent;
    color: var(--teal);
    font-size: 36px;
    font-weight: 950;
    letter-spacing: -.04em;
    box-shadow: 0 14px 34px rgba(69, 131, 147, .14);
}

.register-title {
    margin: 0;
    color: var(--ink);
    font-size: 22px;
    line-height: 1.25;
    font-weight: 900;
    letter-spacing: -.02em;
}

.register-desc {
    margin: 9px auto 0;
    color: var(--muted);
    max-width: 340px;
    font-size: 13.5px;
    line-height: 1.55;
}

.register-form {
    display: grid;
    gap: 13px;
}

.register-field {
    position: relative;
}

.register-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--teal);
    font-size: 13px;
    font-weight: 850;
}

.register-field input {
    width: 100%;
    height: 50px;
    border: 1px solid rgba(69, 131, 147, .20);
    border-radius: 13px;
    background: rgba(255, 255, 255, .82);
    color: var(--ink);
    padding: 0 44px 0 15px;
    font: inherit;
    outline: none;
    transition: .2s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.register-field input::placeholder {
    color: rgba(107, 122, 120, .68);
}

.register-field input:focus {
    background: #ffffff;
    border-color: var(--mint);
    box-shadow: 0 0 0 4px rgba(52, 169, 157, .14);
}

.register-field-icon,
.register-password-toggle {
    position: absolute;
    right: 14px;
    bottom: 13px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    color: var(--teal);
    font-size: 15px;
    opacity: .78;
}

.register-password-toggle {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.register-btn {
    height: 52px;
    border: 0;
    border-radius: 13px;
    cursor: pointer;
    background: linear-gradient(135deg, var(--mint), var(--teal));
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
    box-shadow: 0 14px 24px rgba(52, 169, 157, .24);
    transition: .2s ease;
    margin-top: 4px;
}

.register-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 30px rgba(52, 169, 157, .32);
    filter: saturate(1.04);
}

.register-links {
    margin-top: 4px;
    text-align: center;
    display: grid;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
}

.register-links a {
    color: var(--teal);
    font-weight: 850;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.register-note {
    margin-top: 14px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255, 243, 200, .72);
    border: 1px solid rgba(229, 203, 144, .55);
    color: var(--ink);
    font-size: 12.8px;
    line-height: 1.55;
}

.register-note strong {
    color: var(--teal);
}

.register-footer-text {
    margin-top: 22px;
    text-align: center;
    color: rgba(69, 131, 147, .78);
    font-size: 12px;
    line-height: 1.45;
    font-weight: 650;
}

@media (min-width: 760px) {
    .register-phone-frame {
        max-width: 640px;
    }

    .register-form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 13px;
    }

    .register-field.full {
        grid-column: 1 / -1;
    }
}

@media (max-width: 520px) {
    body.register-page {
        background: #FFFDF4;
    }

    .register-mobile-page {
        min-height: 100dvh;
        padding: 0;
        align-items: stretch;
    }

    .register-phone-frame {
        max-width: none;
        min-height: 100dvh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 34px 24px 28px;
        justify-content: flex-start;
        background:
            radial-gradient(circle at top right, rgba(52,169,157,.12), transparent 32%),
            linear-gradient(180deg, var(--cream) 0%, #FFFDF4 44%, #ffffff 100%);
    }

    .register-logo {
        width: 154px;
    }
}

@media (max-width: 370px) {
    .register-phone-frame {
        padding-left: 18px;
        padding-right: 18px;
    }

    .register-logo {
        width: 140px;
    }

    .register-title {
        font-size: 20px;
    }
}

.login-logo,
.register-logo {
    width: 190px;
    max-width: 76%;
    height: auto;
    display: block;
    margin: 0 auto 18px;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(69, 131, 147, .12));
}

@media (max-width: 520px) {
    .login-logo,
    .register-logo {
        width: 180px;
    }
}

@media (max-width: 370px) {
    .login-logo,
    .register-logo {
        width: 160px;
    }
}

/* ======================================================
   LANDING PAGE - MOBILE FIRST
   ASN Coaching Hub
====================================================== */

body.landing-page {
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(52,169,157,.16), transparent 32%),
        radial-gradient(circle at bottom right, rgba(229,203,144,.28), transparent 36%),
        var(--cream);
}

body.landing-page .topbar {
    display: none !important;
}

body.landing-page main.container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.landing-page main.container > .alert {
    width: min(430px, calc(100% - 32px));
    margin: 18px auto -10px;
    position: relative;
    z-index: 10;
    border-radius: 14px;
}

.landing-mobile-page {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.landing-phone-frame {
    width: 100%;
    max-width: 460px;
    min-height: 720px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,253,244,.97)),
        #FFFDF4;
    border-radius: 34px;
    border: 1px solid var(--line);
    box-shadow: 0 24px 60px rgba(69, 131, 147, .16);
    padding: 30px 22px 26px;
    position: relative;
    overflow: hidden;
}

.landing-phone-frame::before {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    border-radius: 999px;
    background: rgba(52,169,157,.10);
    top: -88px;
    right: -88px;
    pointer-events: none;
}

.landing-phone-frame::after {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    border-radius: 999px;
    background: rgba(229,203,144,.22);
    bottom: -80px;
    left: -80px;
    pointer-events: none;
}

.landing-hero,
.landing-section,
.landing-coaching-card,
.landing-role-grid,
.landing-bottom-cta,
.landing-footer-text {
    position: relative;
    z-index: 2;
}

.landing-hero {
    text-align: center;
    padding: 4px 2px 18px;
}

.landing-logo {
    width: 190px;
    max-width: 78%;
    height: auto;
    display: block;
    margin: 0 auto 14px;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(69, 131, 147, .12));
}

.landing-logo-fallback {
    width: 140px;
    height: 140px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        linear-gradient(#FFFDF4, #FFFDF4) padding-box,
        linear-gradient(135deg, var(--sand), var(--mint), var(--teal)) border-box;
    border: 4px solid transparent;
    color: var(--teal);
    font-size: 38px;
    font-weight: 950;
}

.landing-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(52, 169, 157, .10);
    border: 1px solid rgba(52, 169, 157, .22);
    color: var(--teal);
    font-size: 11.5px;
    font-weight: 900;
    letter-spacing: .02em;
}

.landing-hero h1 {
    margin: 0 auto 12px;
    max-width: 380px;
    color: var(--ink);
    font-size: clamp(28px, 7vw, 40px);
    line-height: 1.08;
    letter-spacing: -.045em;
    font-weight: 950;
}

.landing-hero p {
    margin: 0 auto;
    max-width: 370px;
    color: var(--muted);
    font-size: 14.2px;
    line-height: 1.65;
}

.landing-actions {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 10px;
    margin-top: 20px;
}

.landing-btn {
    height: 52px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 14.5px;
}

.landing-btn.primary {
    background: linear-gradient(135deg, var(--mint), var(--teal));
    color: #ffffff;
    box-shadow: 0 14px 24px rgba(52, 169, 157, .24);
}

.landing-btn.secondary {
    background: rgba(255,255,255,.82);
    color: var(--teal);
    border: 1px solid rgba(69, 131, 147, .22);
}

.landing-section {
    margin-top: 18px;
}

.landing-section-head {
    margin-bottom: 12px;
}

.landing-section-head h2 {
    margin: 0;
    color: var(--ink);
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: -.02em;
}

.landing-section-head p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.landing-journey {
    display: grid;
    gap: 10px;
}

.landing-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border-radius: 18px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(69, 131, 147, .16);
    box-shadow: 0 10px 22px rgba(69, 131, 147, .07);
}

.landing-step span {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--sand), var(--cream));
    color: var(--teal);
    font-weight: 950;
}

.landing-step strong {
    display: block;
    color: var(--ink);
    font-size: 14px;
}

.landing-step small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.4;
}

.landing-materials {
    display: grid;
    gap: 10px;
}

.landing-material-card {
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 243, 200, .55);
    border: 1px solid rgba(229, 203, 144, .48);
}

.landing-material-card span {
    display: block;
    font-size: 24px;
    margin-bottom: 8px;
}

.landing-material-card strong {
    display: block;
    color: var(--ink);
    font-size: 14px;
}

.landing-material-card small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.landing-coaching-card {
    display: flex;
    gap: 14px;
    margin-top: 18px;
    padding: 16px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(52,169,157,.13), rgba(69,131,147,.10));
    border: 1px solid rgba(52,169,157,.22);
}

.landing-coaching-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 18px rgba(69, 131, 147, .10);
    font-size: 24px;
}

.landing-coaching-card h2 {
    margin: 0 0 6px;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.3;
}

.landing-coaching-card p {
    margin: 0;
    color: var(--muted);
    font-size: 12.8px;
    line-height: 1.55;
}

.landing-role-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.landing-role-grid > div {
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(69, 131, 147, .16);
}

.landing-role-grid span {
    display: block;
    font-size: 23px;
    margin-bottom: 8px;
}

.landing-role-grid strong {
    display: block;
    color: var(--ink);
    font-size: 14px;
}

.landing-role-grid small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12.3px;
    line-height: 1.45;
}

.landing-bottom-cta {
    display: none;
}

.landing-footer-text {
    margin-top: 24px;
    text-align: center;
    color: rgba(69, 131, 147, .78);
    font-size: 12px;
    line-height: 1.45;
    font-weight: 650;
}

@media (min-width: 860px) {
    .landing-phone-frame {
        max-width: 920px;
        display: grid;
        grid-template-columns: .95fr 1.05fr;
        gap: 22px;
        padding: 38px;
    }

    .landing-hero {
        text-align: left;
        align-self: center;
    }

    .landing-logo {
        margin-left: 0;
        margin-right: 0;
    }

    .landing-hero p {
        margin-left: 0;
    }

    .landing-actions {
        max-width: 340px;
    }

    .landing-section,
    .landing-coaching-card,
    .landing-role-grid,
    .landing-footer-text {
        grid-column: 2;
    }

    .landing-journey {
        grid-template-columns: 1fr 1fr;
    }

    .landing-materials {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    body.landing-page {
        background: #FFFDF4;
    }

    .landing-mobile-page {
        min-height: 100dvh;
        padding: 0;
        align-items: stretch;
    }

    .landing-phone-frame {
        max-width: none;
        min-height: 100dvh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 28px 20px 96px;
        background:
            radial-gradient(circle at top right, rgba(52,169,157,.12), transparent 32%),
            linear-gradient(180deg, var(--cream) 0%, #FFFDF4 42%, #ffffff 100%);
    }

    .landing-logo {
        width: 180px;
    }

    .landing-bottom-cta {
        position: fixed;
        left: 14px;
        right: 14px;
        bottom: calc(14px + env(safe-area-inset-bottom));
        z-index: 40;
        display: grid;
        grid-template-columns: 1.2fr .8fr;
        gap: 10px;
        padding: 10px;
        border-radius: 22px;
        background: rgba(255, 255, 255, .86);
        border: 1px solid rgba(69, 131, 147, .16);
        backdrop-filter: blur(14px);
        box-shadow: 0 18px 38px rgba(69, 131, 147, .18);
    }

    .landing-bottom-cta a {
        height: 46px;
        border-radius: 15px;
        display: grid;
        place-items: center;
        font-size: 13.5px;
        font-weight: 900;
    }

    .landing-bottom-cta a:first-child {
        background: linear-gradient(135deg, var(--mint), var(--teal));
        color: #ffffff;
    }

    .landing-bottom-cta a:last-child {
        background: rgba(255, 243, 200, .72);
        color: var(--teal);
        border: 1px solid rgba(229, 203, 144, .45);
    }
}

@media (max-width: 370px) {
    .landing-phone-frame {
        padding-left: 16px;
        padding-right: 16px;
    }

    .landing-logo {
        width: 160px;
    }

    .landing-hero h1 {
        font-size: 26px;
    }

    .landing-actions {
        grid-template-columns: 1fr;
    }

    .landing-role-grid {
        grid-template-columns: 1fr;
    }
}
/* ======================================================
   PESERTA HOME - KATEGORI COACHING
====================================================== */

body.peserta-home-page {
    background:
        radial-gradient(circle at top left, rgba(52,169,157,.10), transparent 30%),
        linear-gradient(180deg, var(--cream) 0%, #FFFDF4 34%, #ffffff 100%);
}

.peserta-welcome-card {
    background:
        linear-gradient(135deg, rgba(52,169,157,.12), rgba(255,243,200,.70)),
        #ffffff;
    border: 1px solid rgba(69,131,147,.15);
}

.peserta-welcome-card h1 {
    color: var(--ink);
    letter-spacing: -.03em;
}

.peserta-welcome-card p {
    color: var(--muted);
    line-height: 1.65;
}

.peserta-fast-menu {
    margin-bottom: 14px;
}

.peserta-fast-menu a span {
    color: var(--teal);
}

.peserta-section-head {
    margin-bottom: 14px;
    text-align: center;
}

.peserta-section-head h2 {
    margin: 0;
    color: var(--ink);
    font-size: 21px;
    font-weight: 950;
    letter-spacing: -.035em;
}

.peserta-section-head p {
    margin: 6px auto 0;
    max-width: 340px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.coaching-category-card {
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(69,131,147,.14);
    box-shadow: 0 16px 34px rgba(69,131,147,.10);
}

.coaching-category-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.coaching-category-item {
    min-height: 205px;
    padding: 16px 12px 14px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid rgba(69,131,147,.13);
    box-shadow: 0 12px 26px rgba(69,131,147,.08);
    text-align: center;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
    transition: .2s ease;
    position: relative;
    overflow: hidden;
}

.coaching-category-item::before {
    content: "";
    position: absolute;
    width: 96px;
    height: 96px;
    border-radius: 999px;
    top: -42px;
    right: -42px;
    opacity: .16;
    background: var(--mint);
}

.coaching-category-item::after {
    content: "";
    position: absolute;
    width: 74px;
    height: 74px;
    border-radius: 999px;
    bottom: -38px;
    left: -38px;
    opacity: .12;
    background: var(--sand);
}

.coaching-category-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 34px rgba(69,131,147,.14);
}

.coaching-category-visual {
    width: 100%;
    height: 92px;
    margin-bottom: 12px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(255,243,200,.85), transparent 42%),
        linear-gradient(135deg, rgba(52,169,157,.10), rgba(69,131,147,.08));
    border: 1px solid rgba(69,131,147,.10);
}

.coaching-category-icon {
    width: 62px;
    height: 62px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    font-size: 29px;
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(69,131,147,.16);
    position: relative;
    z-index: 2;
}

.category-dot {
    position: absolute;
    border-radius: 999px;
    opacity: .85;
    z-index: 1;
}

.category-dot.dot-one {
    width: 10px;
    height: 10px;
    top: 19px;
    left: 19px;
}

.category-dot.dot-two {
    width: 14px;
    height: 14px;
    right: 22px;
    top: 28px;
}

.category-dot.dot-three {
    width: 8px;
    height: 8px;
    left: 36px;
    bottom: 22px;
}

.coaching-category-item strong {
    display: block;
    min-height: 38px;
    color: var(--ink);
    font-size: 13.5px;
    line-height: 1.28;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .01em;
}

.coaching-category-item small {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.45;
}

.cat-managerial .coaching-category-icon {
    background: linear-gradient(135deg, var(--teal), var(--mint));
}

.cat-technical .coaching-category-icon {
    background: linear-gradient(135deg, #34A99D, #2F8F86);
}

.cat-sociocultural .coaching-category-icon {
    background: linear-gradient(135deg, var(--sand), #D9A84F);
}

.cat-government .coaching-category-icon {
    background: linear-gradient(135deg, #458393, #263B3A);
}

.cat-managerial .category-dot {
    background: var(--teal);
}

.cat-technical .category-dot {
    background: var(--mint);
}

.cat-sociocultural .category-dot {
    background: #D9A84F;
}

.cat-government .category-dot {
    background: var(--ink);
}

.cat-managerial::before {
    background: var(--teal);
}

.cat-technical::before {
    background: var(--mint);
}

.cat-sociocultural::before {
    background: var(--sand);
}

.cat-government::before {
    background: var(--ink);
}

.peserta-journey-card {
    margin-top: 14px;
}

.mini-journey-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.mini-journey-grid div {
    padding: 12px;
    border-radius: 17px;
    background: rgba(255,243,200,.52);
    border: 1px solid rgba(229,203,144,.45);
    display: flex;
    align-items: center;
    gap: 9px;
}

.mini-journey-grid span {
    width: 30px;
    height: 30px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    background: linear-gradient(135deg, var(--mint), var(--teal));
    color: #ffffff;
    font-size: 12px;
    font-weight: 950;
}

.mini-journey-grid strong {
    color: var(--ink);
    font-size: 12.5px;
    line-height: 1.25;
}

.peserta-path-card {
    margin-top: 14px;
}

.peserta-path-item h3 {
    color: var(--ink);
    margin-bottom: 6px;
}

.empty-learning-path {
    text-align: center;
    padding: 16px 4px 4px;
}

.empty-learning-path .empty-icon {
    width: 66px;
    height: 66px;
    margin: 0 auto 12px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    background: rgba(52,169,157,.12);
    color: var(--teal);
    font-size: 28px;
}

.empty-learning-path h3 {
    margin: 0 0 6px;
    color: var(--ink);
    font-size: 17px;
}

@media (max-width: 380px) {
    .coaching-category-grid {
        gap: 10px;
    }

    .coaching-category-item {
        min-height: 188px;
        padding: 12px 9px;
        border-radius: 19px;
    }

    .coaching-category-visual {
        height: 82px;
        border-radius: 17px;
        margin-bottom: 10px;
    }

    .coaching-category-icon {
        width: 54px;
        height: 54px;
        border-radius: 18px;
        font-size: 24px;
    }

    .coaching-category-item strong {
        font-size: 12px;
    }

    .coaching-category-item small {
        font-size: 10.5px;
    }

    .mini-journey-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 760px) {
    body.peserta-home-page main.container {
        max-width: 880px;
    }

    .coaching-category-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .coaching-category-item {
        min-height: 190px;
    }

    .mini-journey-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ======================================================
   PESERTA SYSTEM LOGO
====================================================== */

.peserta-system-logo {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 8px 0 14px;
    padding: 6px 0;
}

.peserta-system-logo img {
    width: 185px;
    max-width: 72%;
    height: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 10px 20px rgba(69, 131, 147, .12));
}

.peserta-system-logo-fallback {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        linear-gradient(#FFFDF4, #FFFDF4) padding-box,
        linear-gradient(135deg, var(--sand), var(--mint), var(--teal)) border-box;
    border: 4px solid transparent;
    color: var(--teal);
    font-size: 36px;
    font-weight: 950;
    letter-spacing: -.04em;
    box-shadow: 0 14px 34px rgba(69, 131, 147, .14);
}

@media (max-width: 520px) {
    .peserta-system-logo {
        margin-top: 2px;
        margin-bottom: 12px;
    }

    .peserta-system-logo img {
        width: 175px;
        max-width: 76%;
    }
}

@media (max-width: 370px) {
    .peserta-system-logo img {
        width: 155px;
    }
}

/* ======================================================
   HEADER BRAND LOGO
====================================================== */

.brand.brand-logo-only {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 4px 0;
    text-decoration: none;
}

.brand.brand-logo-only img {
    width: 148px;
    max-height: 52px;
    height: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 6px 12px rgba(69, 131, 147, .10));
}

@media (max-width: 520px) {
    .brand.brand-logo-only img {
        width: 132px;
        max-height: 48px;
    }
}

@media (max-width: 370px) {
    .brand.brand-logo-only img {
        width: 118px;
        max-height: 44px;
    }
}
/* ======================================================
   PESERTA COURSES - SUBCOMPETENCY STRUCTURE
====================================================== */
.course-category-block h2 {
    color: var(--ink);
    margin-bottom: 6px;
}

.subcompetency-block {
    margin-top: 14px;
    padding: 14px;
    border-radius: 20px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(69,131,147,.14);
    box-shadow: 0 10px 22px rgba(69,131,147,.06);
}

.subcompetency-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.subcompetency-head h3 {
    margin: 0;
    color: var(--teal);
    font-size: 17px;
    line-height: 1.25;
    letter-spacing: -.02em;
}

.subcompetency-head p {
    margin: 5px 0 0;
}

.course-item-card {
    margin-bottom: 10px;
    border: 1px solid rgba(69,131,147,.12);
}

.course-item-card:last-child {
    margin-bottom: 0;
}

.course-item-card h3 {
    margin-bottom: 6px;
    color: var(--ink);
}

.btn.ghost {
    background: rgba(255,243,200,.70);
    border: 1px solid rgba(229,203,144,.50);
    color: var(--teal);
    box-shadow: none;
}

@media (max-width: 420px) {
    .subcompetency-head {
        flex-direction: column;
    }

    .subcompetency-head .btn {
        width: 100%;
    }
}



/* ======================================================
   PESERTA JOURNEY PAGE
====================================================== */

body.peserta-journey-page {
    background:
        radial-gradient(circle at top left, rgba(52,169,157,.10), transparent 30%),
        linear-gradient(180deg, var(--cream) 0%, #FFFDF4 34%, #ffffff 100%);
}

body.peserta-journey-page main.container {
    max-width: 980px;
}

.journey-page {
    display: grid;
    gap: 16px;
    padding-bottom: 24px;
}

.journey-hero-card,
.journey-road-card,
.standard-card {
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(69,131,147,.14);
    box-shadow: 0 16px 34px rgba(69,131,147,.10);
    border-radius: 28px;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.journey-hero-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background:
        radial-gradient(circle at top right, rgba(52,169,157,.13), transparent 35%),
        linear-gradient(135deg, rgba(255,243,200,.82), rgba(255,255,255,.96));
}

.journey-eyebrow {
    display: inline-flex;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(52,169,157,.12);
    border: 1px solid rgba(52,169,157,.22);
    color: var(--teal);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.journey-hero-card h1 {
    margin: 14px 0 8px;
    color: var(--ink);
    font-size: clamp(28px, 6vw, 42px);
    line-height: 1.05;
    letter-spacing: -.05em;
    font-weight: 950;
}

.journey-hero-card p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.62;
    max-width: 620px;
}

.journey-hero-icon {
    width: 86px;
    height: 86px;
    flex: 0 0 86px;
    border-radius: 30px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--mint), var(--teal));
    color: #ffffff;
    font-size: 38px;
    box-shadow: 0 18px 32px rgba(52,169,157,.24);
}

.journey-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

.journey-pill-row span {
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.80);
    border: 1px solid rgba(69,131,147,.14);
    color: var(--teal);
    font-size: 11.5px;
    font-weight: 800;
}

.journey-section-head {
    text-align: center;
    margin-bottom: 16px;
}

.journey-section-head h2 {
    margin: 0;
    color: var(--ink);
    font-size: 23px;
    font-weight: 950;
    letter-spacing: -.04em;
}

.journey-section-head p {
    margin: 7px auto 0;
    max-width: 520px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.journey-road-track {
    position: relative;
    display: grid;
    gap: 14px;
    padding: 4px 0;
}

.journey-road-track::before {
    content: "";
    position: absolute;
    top: 22px;
    bottom: 22px;
    left: 26px;
    width: 5px;
    border-radius: 999px;
    background: linear-gradient(
        180deg,
        #34A99D 0%,
        #E5CB90 38%,
        #458393 72%,
        #263B3A 100%
    );
    opacity: .72;
}

.journey-road-step {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 52px 54px 1fr;
    gap: 12px;
    align-items: start;
    padding: 14px;
    border-radius: 22px;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(69,131,147,.13);
    box-shadow: 0 12px 26px rgba(69,131,147,.08);
}

.journey-step-number {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: #ffffff;
    font-weight: 950;
    font-size: 22px;
    box-shadow: 0 12px 22px rgba(69,131,147,.15);
}

.journey-step-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 19px;
    background: rgba(255,243,200,.62);
    color: var(--teal);
    font-size: 25px;
}

.journey-step-body h3 {
    margin: 0 0 6px;
    color: var(--ink);
    font-size: 17px;
    font-weight: 950;
}

.journey-step-body p {
    margin: 0;
    color: var(--muted);
    font-size: 12.8px;
    line-height: 1.55;
}

.journey-output {
    margin-top: 10px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(255,243,200,.48);
    border: 1px solid rgba(229,203,144,.38);
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted);
}

.journey-output strong {
    display: block;
    color: var(--teal);
    margin-bottom: 2px;
}

.journey-step-goal .journey-step-number {
    background: linear-gradient(135deg, #34A99D, #458393);
}

.journey-step-plan .journey-step-number {
    background: linear-gradient(135deg, #E5CB90, #D9A84F);
}

.journey-step-activity .journey-step-number {
    background: linear-gradient(135deg, #F08A3E, #D96A1B);
}

.journey-step-inspiration .journey-step-number {
    background: linear-gradient(135deg, #F2C94C, #D9A84F);
}

.journey-step-practices .journey-step-number {
    background: linear-gradient(135deg, #458393, #34A99D);
}

.journey-step-reflection .journey-step-number {
    background: linear-gradient(135deg, #263B3A, #458393);
}

.journey-finish-card {
    margin-top: 16px;
    padding: 14px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(52,169,157,.12), rgba(255,243,200,.70));
    border: 1px solid rgba(69,131,147,.14);
}

.journey-finish-card > div {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: #ffffff;
    color: var(--teal);
    font-size: 24px;
    box-shadow: 0 10px 20px rgba(69,131,147,.10);
}

.journey-finish-card p {
    margin: 0;
    color: var(--muted);
    font-size: 12.8px;
    line-height: 1.5;
}

.journey-finish-card strong {
    display: block;
    color: var(--ink);
    font-size: 14px;
}

.standard-root {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 18px;
    padding: 13px 16px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--teal), var(--mint));
    color: #ffffff;
    box-shadow: 0 14px 26px rgba(52,169,157,.20);
    text-align: center;
}

.standard-root strong {
    font-size: 13px;
    letter-spacing: .02em;
}

.standard-category-grid {
    display: grid;
    gap: 14px;
}

.standard-category-card {
    border-radius: 22px;
    padding: 14px;
    background: rgba(255,255,255,.90);
    border: 1px solid rgba(69,131,147,.13);
    box-shadow: 0 10px 24px rgba(69,131,147,.07);
}

.standard-category-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(69,131,147,.12);
}

.standard-category-head > span {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    background: linear-gradient(135deg, var(--mint), var(--teal));
    color: #ffffff;
    font-size: 22px;
}

.standard-category-head h3 {
    margin: 0;
    color: var(--ink);
    font-size: 16px;
    font-weight: 950;
}

.standard-category-head p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12.2px;
    line-height: 1.45;
}

.standard-sub-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.standard-sub-item {
    padding: 12px;
    border-radius: 17px;
    background: rgba(255,243,200,.42);
    border: 1px solid rgba(229,203,144,.38);
}

.standard-sub-item strong {
    display: block;
    color: var(--ink);
    font-size: 13.2px;
    line-height: 1.35;
}

.standard-sub-item p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 11.8px;
    line-height: 1.45;
}

.standard-level-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}

.standard-level-row span {
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(52,169,157,.12);
    color: var(--teal);
    border: 1px solid rgba(52,169,157,.20);
    font-size: 11px;
    font-weight: 850;
}

.standard-level-row em {
    color: var(--muted);
    font-size: 11.5px;
}

.journey-bottom-action {
    display: grid;
    gap: 10px;
}

.journey-bottom-action .btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.journey-bottom-action .btn.light {
    background: rgba(255,243,200,.72);
    color: var(--teal);
    border: 1px solid rgba(229,203,144,.45);
}

@media (min-width: 760px) {
    .journey-road-track {
        grid-template-columns: 1fr 1fr;
    }

    .journey-road-track::before {
        left: 50%;
        transform: translateX(-50%);
    }

    .journey-road-step:nth-child(even) {
        margin-top: 28px;
    }

    .standard-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .journey-bottom-action {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    body.peserta-journey-page main.container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .journey-hero-card {
        align-items: flex-start;
    }

    .journey-hero-icon {
        width: 64px;
        height: 64px;
        flex-basis: 64px;
        border-radius: 22px;
        font-size: 28px;
    }

    .journey-road-step {
        grid-template-columns: 46px 1fr;
    }

    .journey-step-icon {
        display: none;
    }

    .journey-step-number {
        width: 46px;
        height: 46px;
        border-radius: 16px;
        font-size: 19px;
    }

    .journey-road-track::before {
        left: 23px;
    }

    .journey-section-head h2 {
        font-size: 21px;
    }
}

@media (max-width: 380px) {
    .journey-hero-card,
    .journey-road-card,
    .standard-card {
        padding: 16px;
        border-radius: 24px;
    }

    .journey-hero-icon {
        display: none;
    }

    .standard-category-head {
        flex-direction: column;
    }
}

/* ======================================================
   COMPETENCY FOCUS / LOCKED UI
====================================================== */

.coaching-category-item {
    --cat-color: var(--mint);
}

.coaching-category-item .coaching-category-icon {
    background: linear-gradient(135deg, var(--cat-color), var(--teal));
}

.coaching-category-item .category-dot {
    background: var(--cat-color);
}

.coaching-category-item::before {
    background: var(--cat-color);
}

.coaching-category-item.is-locked {
    background: #F3F4F6;
    border-color: #E5E7EB;
    box-shadow: none;
    color: #6B7280;
    cursor: not-allowed;
    filter: grayscale(.12);
}

.coaching-category-item.is-locked::before,
.coaching-category-item.is-locked::after {
    background: #D1D5DB;
    opacity: .25;
}

.coaching-category-item.is-locked .coaching-category-visual {
    background: linear-gradient(135deg, #F9FAFB, #F3F4F6);
    border-color: #E5E7EB;
}

.coaching-category-item.is-locked .coaching-category-icon {
    background: linear-gradient(135deg, #9CA3AF, #6B7280);
    color: #ffffff;
}

.coaching-category-item.is-locked strong {
    color: #6B7280;
}

.coaching-category-item.is-locked small {
    color: #9CA3AF;
}

.course-unit-card,
.material-item-card,
.subcompetency-card {
    --item-color: var(--mint);
}

.course-unit-card .unit-icon,
.material-item-card .material-icon,
.subcompetency-card .subcompetency-icon {
    background: linear-gradient(135deg, var(--item-color), var(--teal));
}

.course-unit-card.is-locked,
.material-item-card.is-locked,
.subcompetency-card.is-locked {
    background: #F3F4F6;
    border-color: #E5E7EB;
    color: #6B7280;
    box-shadow: none;
    cursor: not-allowed;
}

.course-unit-card.is-locked .unit-icon,
.material-item-card.is-locked .material-icon,
.subcompetency-card.is-locked .subcompetency-icon {
    background: linear-gradient(135deg, #9CA3AF, #6B7280);
}

.locked-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    background: #F3F4F6;
    color: #6B7280;
    border: 1px solid #E5E7EB;
    font-size: 11px;
    font-weight: 850;
}

.setting-category-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.setting-category-icon,
.setting-sub-icon {
    background: linear-gradient(135deg, var(--setting-color), #458393);
    color: #fff;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.setting-category-icon {
    width: 56px;
    height: 56px;
    border-radius: 20px;
    font-size: 25px;
}

.setting-sub-icon {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    font-size: 18px;
}

.setting-grid {
    display: grid;
    gap: 12px;
}

.setting-grid input[type="text"],
.setting-grid input[type="color"] {
    width: 100%;
}

.switch-row {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 850;
    color: var(--ink);
}

.switch-row input {
    width: 18px;
    height: 18px;
}

.setting-sub-list {
    margin-top: 18px;
    display: grid;
    gap: 12px;
}

.setting-sub-list h3 {
    margin: 0;
    color: var(--ink);
}

.setting-sub-item {
    display: flex;
    gap: 12px;
    padding: 13px;
    border-radius: 18px;
    background: rgba(255,255,255,.80);
    border: 1px solid rgba(69,131,147,.13);
}

.setting-sub-content {
    flex: 1;
}

.setting-sub-content strong {
    display: block;
    color: var(--ink);
    margin-bottom: 8px;
}

.setting-grid.small {
    grid-template-columns: 90px 1fr;
    align-items: end;
}

@media (min-width: 760px) {
    .setting-grid {
        grid-template-columns: 1fr 150px 1.4fr;
        align-items: end;
    }
}

/* ======================================================
   LANDING PARTNER LOGOS
====================================================== */

.landing-partner-section {
    margin: 8px auto 16px;
    width: min(360px, 100%);
    position: relative;
    z-index: 2;
}

.landing-partner-label {
    display: block;
    margin-bottom: 9px;
    color: rgba(69, 131, 147, .82);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: center;
}

.landing-partner-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px;
    border-radius: 20px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(69, 131, 147, .14);
    box-shadow: 0 10px 22px rgba(69, 131, 147, .08);
}

.landing-partner-logo {
    width: 66px;
    height: 52px;
    border-radius: 15px;
    background: #ffffff;
    border: 1px solid rgba(69, 131, 147, .12);
    display: grid;
    place-items: center;
    padding: 8px;
    text-decoration: none;
    transition: .2s ease;
}

.landing-partner-logo:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(69, 131, 147, .12);
}

.landing-partner-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.admin-logo-list {
    display: grid;
    gap: 16px;
}

.admin-logo-item {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 20px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(69, 131, 147, .14);
}

.admin-logo-preview {
    min-height: 96px;
    border-radius: 18px;
    background: rgba(255,243,200,.45);
    border: 1px dashed rgba(69, 131, 147, .24);
    display: grid;
    place-items: center;
    padding: 14px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

.admin-logo-preview img {
    max-width: 220px;
    max-height: 86px;
    object-fit: contain;
    display: block;
}

.admin-logo-form {
    margin: 0;
}

.btn.danger {
    background: #ef4444;
    color: #ffffff;
}

@media (min-width: 760px) {
    .landing-partner-logo {
        width: 74px;
        height: 56px;
    }

    .admin-logo-item {
        grid-template-columns: 180px 1fr;
        align-items: start;
    }

    .admin-logo-item form:last-child {
        grid-column: 2;
    }
}

@media (max-width: 380px) {
    .landing-partner-logo {
        width: 58px;
        height: 48px;
        border-radius: 13px;
    }

    .landing-partner-logos {
        gap: 8px;
        padding: 8px;
    }
}
/* ======================================================
   AUTH PARTNER LOGOS - LOGIN / REGISTER
====================================================== */

.auth-partner-section {
    width: min(350px, 100%);
    margin: 2px auto 18px;
    position: relative;
    z-index: 2;
}

.auth-partner-label {
    display: block;
    margin-bottom: 8px;
    color: rgba(69, 131, 147, .82);
    font-size: 10.5px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: center;
}

.auth-partner-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    padding: 9px;
    border-radius: 18px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(69, 131, 147, .14);
    box-shadow: 0 10px 22px rgba(69, 131, 147, .08);
}

.auth-partner-logo {
    width: 62px;
    height: 48px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(69, 131, 147, .12);
    display: grid;
    place-items: center;
    padding: 7px;
    text-decoration: none;
    transition: .2s ease;
}

.auth-partner-logo:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(69, 131, 147, .12);
}

.auth-partner-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

@media (max-width: 380px) {
    .auth-partner-logos {
        gap: 7px;
        padding: 8px;
    }

    .auth-partner-logo {
        width: 56px;
        height: 44px;
        border-radius: 13px;
    }
}


/* ======================================================
   MATERIALS FILTER, SEARCH, SORTING, PAGINATION
   Salin isi file ini ke bagian bawah assets/css/app.css
====================================================== */

.materials-title-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.materials-filter-form {
    margin: 12px 0 16px;
    padding: 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .74);
    border: 1px solid rgba(69, 131, 147, .14);
    box-shadow: 0 10px 22px rgba(69, 131, 147, .06);
}

.materials-filter-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.materials-filter-grid label {
    display: grid;
    gap: 6px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 850;
}

.materials-filter-grid input,
.materials-filter-grid select {
    width: 100%;
    min-height: 42px;
}

.materials-filter-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 14px;
}

.table-sort-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ink);
    text-decoration: none;
    font-weight: 900;
    white-space: nowrap;
}

.table-sort-link:hover {
    color: var(--teal);
}

.materials-table th,
.materials-table td {
    vertical-align: top;
}

.materials-pagination-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.materials-pagination {
    display: flex;
    gap: 7px;
    align-items: center;
    flex-wrap: wrap;
}

@media (min-width: 760px) {
    .materials-filter-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: end;
    }

    .materials-filter-grid .filter-wide {
        grid-column: span 2;
    }
}

@media (min-width: 1080px) {
    .materials-filter-grid {
        grid-template-columns: 1.6fr 1fr 1fr 1fr;
    }
}

@media (max-width: 520px) {
    .materials-filter-form {
        padding: 12px;
        border-radius: 18px;
    }

    .materials-pagination-bar {
        align-items: stretch;
    }

    .materials-pagination,
    .materials-filter-actions {
        width: 100%;
    }

    .materials-pagination .btn,
    .materials-filter-actions .btn {
        flex: 1;
        justify-content: center;
    }
}

/* ======================================================
   MOBILE HEADER LAYOUT
   Left: System Logo | Center: Sponsor Logos | Right: Back
====================================================== */

.mobile-back-button {
    display: none;
}

.topbar-brand-group {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.header-partner-logos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 5px 7px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .68);
    border: 1px solid rgba(69, 131, 147, .12);
    box-shadow: 0 8px 18px rgba(69, 131, 147, .07);
}

.header-partner-logo {
    width: 42px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    padding: 4px;
    background: #ffffff;
    border: 1px solid rgba(69, 131, 147, .10);
    text-decoration: none;
    transition: .2s ease;
}

.header-partner-logo:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(69, 131, 147, .10);
}

.header-partner-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Mobile / Tablet */
@media (max-width: 1024px) {
    .topbar {
        position: sticky;
        top: 0;
        z-index: 80;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .topbar-brand-group {
        width: 100%;
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 10px;
    }

    .brand.brand-logo-only {
        justify-self: start;
        min-width: 0;
    }

    .brand.brand-logo-only img {
        width: 126px;
        max-height: 48px;
        object-fit: contain;
    }

    .header-partner-logos {
        justify-self: center;
        max-width: 100%;
        gap: 6px;
        padding: 5px 7px;
        border-radius: 16px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .header-partner-logos::-webkit-scrollbar {
        display: none;
    }

    .header-partner-logo {
        flex: 0 0 auto;
        width: 38px;
        height: 31px;
        border-radius: 10px;
        padding: 4px;
    }

    .mobile-back-button {
        justify-self: end;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 38px;
        padding: 0 12px;
        border-radius: 999px;
        border: 1px solid rgba(69, 131, 147, .26);
        background: linear-gradient(135deg, #ffffff, #FFF3C8);
        color: var(--teal);
        font-size: 12px;
        font-weight: 900;
        line-height: 1;
        box-shadow: 0 8px 18px rgba(69, 131, 147, .18);
        cursor: pointer;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
        transition: .18s ease;
    }

    .mobile-back-button i {
        font-size: 14px;
    }

    .mobile-back-button:active {
        transform: scale(.96);
        box-shadow: 0 5px 12px rgba(69, 131, 147, .13);
    }
}

/* HP sedang */
@media (max-width: 620px) {
    .topbar-brand-group {
        grid-template-columns: 112px 1fr 40px;
        gap: 8px;
    }

    .brand.brand-logo-only img {
        width: 108px;
        max-height: 42px;
    }

    .header-partner-logos {
        max-width: 100%;
        gap: 5px;
        padding: 4px 5px;
    }

    .header-partner-logo {
        width: 34px;
        height: 28px;
        border-radius: 9px;
        padding: 3px;
    }

    .mobile-back-button {
        width: 40px;
        height: 40px;
        padding: 0;
        border-radius: 50%;
    }

    .mobile-back-button span {
        display: none;
    }

    .mobile-back-button i {
        font-size: 15px;
    }
}

/* HP kecil */
@media (max-width: 380px) {
    .topbar-brand-group {
        grid-template-columns: 100px 1fr 38px;
        gap: 6px;
    }

    .brand.brand-logo-only img {
        width: 96px;
        max-height: 38px;
    }

    .header-partner-logo {
        width: 30px;
        height: 26px;
        border-radius: 8px;
    }

    .mobile-back-button {
        width: 38px;
        height: 38px;
    }
}

/* ======================================================
   EVALUATION & REFLECTION COURSE DASHBOARD
====================================================== */

.evaluation-course-dashboard-page .evaluation-hero-card {
    display: grid;
    gap: 18px;
    background:
        radial-gradient(circle at top right, rgba(52,169,157,.18), transparent 38%),
        linear-gradient(135deg, rgba(255,243,200,.92), rgba(255,255,255,.94));
    border: 1px solid rgba(69,131,147,.16);
    overflow: hidden;
}

.evaluation-course-dashboard-page .eval-kicker {
    display: inline-flex;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(52,169,157,.12);
    color: var(--teal);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.evaluation-course-dashboard-page .evaluation-hero-card h1,
.evaluation-course-dashboard-page .evaluation-filter-panel h2,
.evaluation-course-dashboard-page .eval-question-panel h2 {
    margin-top: 0;
}

.evaluation-course-dashboard-page .eval-hero-stats,
.evaluation-course-dashboard-page .eval-summary-strip,
.evaluation-course-dashboard-page .eval-course-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.evaluation-course-dashboard-page .eval-hero-stats div,
.evaluation-course-dashboard-page .eval-summary-strip div,
.evaluation-course-dashboard-page .eval-course-stats div {
    padding: 12px 10px;
    border-radius: 18px;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(69,131,147,.12);
    text-align: center;
}

.evaluation-course-dashboard-page .eval-hero-stats strong,
.evaluation-course-dashboard-page .eval-summary-strip strong,
.evaluation-course-dashboard-page .eval-course-stats strong {
    display: block;
    color: var(--teal);
    font-size: 22px;
    line-height: 1;
    font-weight: 950;
}

.evaluation-course-dashboard-page .eval-hero-stats span,
.evaluation-course-dashboard-page .eval-summary-strip span,
.evaluation-course-dashboard-page .eval-course-stats span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    margin-top: 5px;
}

.evaluation-course-dashboard-page .eval-action-menu {
    margin-bottom: 16px;
}

.evaluation-course-dashboard-page .eval-course-grid {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.evaluation-course-dashboard-page .eval-course-card {
    position: relative;
    padding: 16px;
    border-radius: 24px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(69,131,147,.14);
    box-shadow: 0 12px 26px rgba(69,131,147,.09);
    overflow: hidden;
}

.evaluation-course-dashboard-page .eval-course-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--mint), var(--teal));
    opacity: .95;
}

.evaluation-course-dashboard-page .eval-course-card.is-selected {
    border-color: rgba(52,169,157,.45);
    box-shadow: 0 18px 34px rgba(52,169,157,.18);
}

.evaluation-course-dashboard-page .eval-course-top,
.evaluation-course-dashboard-page .eval-course-detail-head,
.evaluation-course-dashboard-page .eval-question-card,
.evaluation-course-dashboard-page .eval-question-badges,
.evaluation-course-dashboard-page .eval-course-actions,
.evaluation-course-dashboard-page .eval-detail-actions,
.evaluation-course-dashboard-page .eval-mini-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.evaluation-course-dashboard-page .eval-course-top {
    justify-content: space-between;
    margin-bottom: 10px;
}

.evaluation-course-dashboard-page .eval-course-icon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--mint), var(--teal));
    box-shadow: 0 10px 20px rgba(52,169,157,.18);
}

.evaluation-course-dashboard-page .eval-level-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,243,200,.82);
    color: var(--ink);
    border: 1px solid rgba(229,203,144,.45);
    font-size: 11px;
    font-weight: 900;
}

.evaluation-course-dashboard-page .eval-course-card h3 {
    margin: 0 0 6px;
    color: var(--ink);
    line-height: 1.2;
}

.evaluation-course-dashboard-page .eval-course-stats {
    margin-top: 13px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.evaluation-course-dashboard-page .eval-course-stats div {
    padding: 10px 7px;
    border-radius: 16px;
    background: rgba(255,248,222,.64);
}

.evaluation-course-dashboard-page .eval-course-stats strong {
    font-size: 18px;
}

.evaluation-course-dashboard-page .eval-mini-meta {
    margin-top: 12px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.evaluation-course-dashboard-page .eval-mini-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(69,131,147,.06);
}

.evaluation-course-dashboard-page .eval-course-actions {
    margin-top: 14px;
}

.evaluation-course-dashboard-page .eval-question-panel {
    margin-top: 18px;
    border: 1px solid rgba(52,169,157,.22);
}

.evaluation-course-dashboard-page .eval-course-detail-head {
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
}

.evaluation-course-dashboard-page .eval-summary-strip {
    margin: 12px 0 16px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.evaluation-course-dashboard-page .eval-question-filter {
    margin-bottom: 14px;
    padding: 12px;
    border-radius: 20px;
    background: rgba(255,248,222,.50);
    border: 1px solid rgba(69,131,147,.10);
}

.evaluation-course-dashboard-page .materials-filter-grid.compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.evaluation-course-dashboard-page .eval-question-list {
    display: grid;
    gap: 11px;
}

.evaluation-course-dashboard-page .eval-question-card {
    justify-content: space-between;
    align-items: flex-start;
    padding: 14px;
    border-radius: 20px;
    background: rgba(255,255,255,.90);
    border: 1px solid rgba(69,131,147,.12);
}

.evaluation-course-dashboard-page .eval-question-card.is-global-question {
    background: linear-gradient(135deg, rgba(255,243,200,.55), rgba(255,255,255,.92));
}

.evaluation-course-dashboard-page .eval-question-main {
    flex: 1 1 260px;
    min-width: 0;
}

.evaluation-course-dashboard-page .eval-question-main h3 {
    margin: 9px 0 5px;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.35;
}

.evaluation-course-dashboard-page .empty-state-box {
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 28px 16px;
    border-radius: 22px;
    background: rgba(255,243,200,.45);
    border: 1px dashed rgba(69,131,147,.20);
    text-align: center;
    color: var(--muted);
}

.evaluation-course-dashboard-page .empty-state-box i {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--mint), var(--teal));
    color: #fff;
    font-size: 22px;
}

.evaluation-course-dashboard-page .empty-state-box strong {
    color: var(--ink);
}

@media (min-width: 760px) {
    .evaluation-course-dashboard-page .evaluation-hero-card {
        grid-template-columns: 1.25fr .95fr;
        align-items: center;
    }

    .evaluation-course-dashboard-page .eval-course-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1080px) {
    .evaluation-course-dashboard-page .eval-course-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .evaluation-course-dashboard-page .eval-hero-stats,
    .evaluation-course-dashboard-page .eval-course-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .evaluation-course-dashboard-page .eval-summary-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .evaluation-course-dashboard-page .materials-filter-grid.compact {
        grid-template-columns: 1fr;
    }

    .evaluation-course-dashboard-page .eval-course-detail-head {
        display: grid;
        gap: 12px;
    }

    .evaluation-course-dashboard-page .eval-detail-actions,
    .evaluation-course-dashboard-page .eval-course-actions {
        width: 100%;
    }

    .evaluation-course-dashboard-page .eval-detail-actions .btn,
    .evaluation-course-dashboard-page .eval-course-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}


/* ======================================================
   RICH TEXT EDITOR FOR MATERIAL CONTENT
====================================================== */

.rich-editor {
    margin-top: 8px;
    border-radius: 18px;
    border: 1px solid rgba(69, 131, 147, .18);
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 10px 22px rgba(69, 131, 147, .07);
    overflow: hidden;
}

.rich-editor-toolbar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 9px;
    border-bottom: 1px solid rgba(69, 131, 147, .14);
    background: linear-gradient(135deg, rgba(255,243,200,.82), rgba(255,255,255,.84));
}

.rich-editor-toolbar button {
    width: 34px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid rgba(69, 131, 147, .18);
    background: #ffffff;
    color: var(--ink, #263B3A);
    font-weight: 850;
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    transition: .18s ease;
}

.rich-editor-toolbar button:hover,
.rich-editor-toolbar button.is-active {
    background: var(--mint, #34A99D);
    color: #ffffff;
    border-color: transparent;
    transform: translateY(-1px);
}

.rich-editor-area {
    min-height: 260px;
    padding: 16px;
    outline: none;
    background: #ffffff;
    color: var(--ink, #263B3A);
    line-height: 1.75;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.rich-editor-area:empty::before {
    content: attr(data-placeholder);
    color: rgba(107, 122, 120, .70);
    pointer-events: none;
}

.rich-editor-area h2,
.rich-editor-area h3,
.rich-editor-area h4 {
    margin: 16px 0 8px;
    line-height: 1.25;
    color: var(--teal, #458393);
}

.rich-editor-area p {
    margin: 0 0 12px;
}

.rich-editor-area ul,
.rich-editor-area ol {
    margin: 8px 0 14px 22px;
    padding-left: 14px;
}

.rich-editor-area blockquote {
    margin: 12px 0;
    padding: 10px 13px;
    border-left: 4px solid var(--mint, #34A99D);
    background: rgba(255,243,200,.44);
    border-radius: 12px;
    color: var(--ink, #263B3A);
}

.rich-editor-area a {
    color: var(--teal, #458393);
    font-weight: 800;
    text-decoration: underline;
}

.rich-editor-textarea {
    display: none !important;
}

.material-content-text {
    line-height: 1.78;
    color: var(--ink, #263B3A);
    overflow-wrap: anywhere;
}

.material-content-text h2,
.material-content-text h3,
.material-content-text h4 {
    margin: 16px 0 8px;
    line-height: 1.25;
    color: var(--teal, #458393);
}

.material-content-text p {
    margin: 0 0 12px;
}

.material-content-text ul,
.material-content-text ol {
    margin: 8px 0 14px 22px;
    padding-left: 14px;
}

.material-content-text blockquote {
    margin: 12px 0;
    padding: 10px 13px;
    border-left: 4px solid var(--mint, #34A99D);
    background: rgba(255,243,200,.44);
    border-radius: 12px;
}

.material-content-text a {
    color: var(--teal, #458393);
    font-weight: 800;
    text-decoration: underline;
}

@media (max-width: 520px) {
    .rich-editor-toolbar {
        gap: 5px;
        padding: 8px;
    }

    .rich-editor-toolbar button {
        width: 31px;
        height: 30px;
        border-radius: 9px;
        font-size: 12px;
    }

    .rich-editor-area {
        min-height: 230px;
        padding: 14px;
        font-size: 14px;
    }
}


/* ======================================================
   SUBCOMPETENCY MATERIAL STRUCTURE UPDATE
====================================================== */
.course-category-title-row,
.subcompetency-head,
.course-item-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.course-category-title-row > span {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--mint), var(--teal));
    color: #fff;
    font-size: 22px;
    box-shadow: 0 12px 24px rgba(52,169,157,.18);
}

.subcompetency-block {
    margin-top: 14px;
    padding: 14px;
    border-radius: 22px;
    background: rgba(255,255,255,.84);
    border: 1px solid rgba(69,131,147,.14);
}

.subcompetency-head {
    justify-content: space-between;
    margin-bottom: 12px;
}

.subcompetency-head h3 {
    margin: 0 0 4px;
    color: var(--ink);
    font-size: 18px;
    font-weight: 950;
}

.course-item-card {
    margin-top: 10px;
}

.course-item-head {
    justify-content: space-between;
    margin-bottom: 8px;
}

.course-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    border: 1px solid rgba(69,131,147,.16);
}

.course-type-badge.concept {
    background: rgba(255,243,200,.72);
    color: #8a6200;
}

.course-type-badge.level {
    background: rgba(52,169,157,.12);
    color: var(--teal);
}

.course-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.category-filter-menu a.active {
    background: rgba(52,169,157,.14);
    border-color: rgba(52,169,157,.24);
    color: var(--teal);
}

.subcompetency-hero-card h1,
.material-course-hero h1 {
    margin-top: 10px;
}

.subcompetency-tree {
    display: grid;
    gap: 14px;
    margin-top: 16px;
    position: relative;
}

.sub-tree-course {
    padding: 14px;
    border-radius: 22px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(69,131,147,.14);
    box-shadow: 0 10px 24px rgba(69,131,147,.07);
}

.sub-tree-course.concept {
    background: linear-gradient(135deg, rgba(255,243,200,.58), rgba(255,255,255,.96));
}

.sub-tree-course.level {
    background: linear-gradient(135deg, rgba(52,169,157,.09), rgba(255,255,255,.96));
}

.sub-tree-course-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.sub-tree-level {
    min-width: 70px;
    padding: 8px 10px;
    border-radius: 14px;
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, var(--mint), var(--teal));
    font-size: 12px;
    font-weight: 950;
}

.sub-tree-course.concept .sub-tree-level {
    background: linear-gradient(135deg, var(--sand), #d9a84f);
}

.sub-tree-course h3 {
    margin: 0 0 5px;
    color: var(--ink);
    font-size: 16px;
    font-weight: 950;
}

.sub-tree-course p {
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.48;
}

.sub-tree-material-list {
    display: grid;
    gap: 8px;
}

.sub-tree-material-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 15px;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(69,131,147,.12);
    color: var(--ink);
    text-decoration: none;
}

.sub-tree-material-list a > span {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(52,169,157,.12);
    color: var(--teal);
}

.sub-tree-material-list strong {
    display: block;
    font-size: 12.8px;
}

.sub-tree-material-list small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 11.2px;
}

.material-read-card h2 {
    color: var(--ink);
    font-size: 20px;
    letter-spacing: -.025em;
}

.material-content-text {
    color: var(--ink);
    font-size: 14px;
    line-height: 1.72;
}

.material-video {
    margin-top: 14px;
}

.material-link-card,
.material-attachment-card {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border-radius: 18px;
    background: rgba(52,169,157,.10);
    border: 1px solid rgba(52,169,157,.18);
    color: var(--teal);
    text-decoration: none;
}

.material-link-card i,
.material-attachment-card i {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 8px 16px rgba(69,131,147,.10);
    font-size: 20px;
}

.material-attachment-card strong {
    display: block;
    color: var(--ink);
    font-size: 13.5px;
}

.material-attachment-card small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
}

.materials-admin-page .form textarea,
.coach-materials-page .form textarea {
    min-height: 120px;
}

.alert.info {
    background: rgba(52,169,157,.10);
    color: var(--teal);
    border: 1px solid rgba(52,169,157,.22);
}

@media (max-width: 520px) {
    .course-category-title-row,
    .subcompetency-head {
        align-items: flex-start;
    }

    .subcompetency-head {
        flex-direction: column;
    }

    .course-actions .btn {
        flex: 1 1 auto;
        text-align: center;
        justify-content: center;
    }

    .sub-tree-course-head {
        flex-direction: column;
    }
}

/* ======================================================
   EVALUATION & REFLECTION UI
====================================================== */
.evaluation-question-card,
.evaluation-answer-card {
    border: 1px solid rgba(69, 131, 147, .14);
    background: rgba(255,255,255,.78);
    border-radius: 20px;
    padding: 16px;
    margin: 14px 0;
    box-shadow: 0 10px 22px rgba(69, 131, 147, .06);
}

.evaluation-question-card h3,
.evaluation-answer-card h3 {
    margin-top: 0;
    color: var(--ink);
}

.mcq-option-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px;
    margin: 8px 0;
    border-radius: 16px;
    background: rgba(255, 243, 200, .38);
    border: 1px solid rgba(69, 131, 147, .12);
    cursor: pointer;
}

.mcq-option-row input {
    margin-top: 3px;
}

.essay-box {
    padding: 14px;
    border-radius: 16px;
    background: rgba(255, 243, 200, .38);
    border: 1px solid rgba(69, 131, 147, .12);
    color: var(--ink);
    line-height: 1.6;
}

.score-big {
    font-size: 30px;
    line-height: 1;
    font-weight: 950;
    color: var(--teal);
    margin: 8px 0;
}

.evaluation-attempt-form textarea,
.evaluation-question-form textarea {
    width: 100%;
    min-height: 130px;
}

.evaluation-answer-list {
    display: grid;
    gap: 12px;
}

@media (max-width: 520px) {
    .score-big {
        font-size: 26px;
    }

    .evaluation-question-card,
    .evaluation-answer-card {
        padding: 14px;
        border-radius: 18px;
    }
}

/* ======================================================
   PESERTA EVALUASI & REFLEKSI - MOBILE QUIZ UI
====================================================== */

body.peserta-evaluasi-refleksi-page {
    background:
        radial-gradient(circle at top left, rgba(52,169,157,.16), transparent 32%),
        linear-gradient(180deg, #FFF9E6 0%, #F7FBFA 42%, #FFFFFF 100%);
}

.peserta-evaluasi-refleksi-page .container {
    max-width: 920px;
}

.quiz-hero-card,
.quiz-section-card,
.quiz-submit-card,
.quiz-empty-state,
.quiz-result-card {
    border: 1px solid rgba(69, 131, 147, .14);
    box-shadow: 0 14px 36px rgba(69, 131, 147, .10);
}

.quiz-hero-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: stretch;
    padding: 22px;
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(255, 243, 200, .86));
    margin-bottom: 18px;
}

.quiz-hero-card::before {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    right: -80px;
    top: -80px;
    border-radius: 50%;
    background: rgba(52, 169, 157, .14);
}

.quiz-hero-main,
.quiz-hero-status {
    position: relative;
    z-index: 1;
}

.quiz-kicker,
.quiz-section-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(52, 169, 157, .12);
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .02em;
}

.quiz-hero-card h1 {
    margin: 12px 0 8px;
    color: var(--ink);
    font-size: clamp(25px, 5vw, 38px);
    line-height: 1.05;
    letter-spacing: -.04em;
}

.quiz-hero-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.quiz-meta-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

.quiz-meta-pills span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(69, 131, 147, .12);
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
}

.quiz-hero-status {
    min-width: 148px;
    border-radius: 24px;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(69,131,147,.12);
    display: grid;
    place-items: center;
    align-content: center;
    padding: 16px;
    text-align: center;
}

.quiz-hero-status strong {
    display: block;
    margin: 10px 0 2px;
    font-size: 34px;
    line-height: 1;
    color: var(--teal);
    letter-spacing: -.05em;
}

.quiz-hero-status small {
    color: var(--muted);
    font-weight: 850;
}

.quiz-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(229, 203, 144, .28);
    color: #8A641B;
    font-size: 11px;
    font-weight: 900;
}

.quiz-status-badge.is-done {
    background: rgba(52,169,157,.14);
    color: var(--teal);
}

.quiz-progress-panel {
    position: sticky;
    top: 82px;
    z-index: 35;
    display: grid;
    gap: 10px;
    margin: 0 0 16px;
    padding: 14px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(69,131,147,.13);
    box-shadow: 0 12px 26px rgba(69,131,147,.10);
    backdrop-filter: blur(10px);
}

.quiz-progress-panel strong {
    display: block;
    color: var(--ink);
}

.quiz-progress-panel small {
    color: var(--muted);
}

.quiz-progress-track {
    height: 9px;
    border-radius: 999px;
    background: rgba(69,131,147,.13);
    overflow: hidden;
}

.quiz-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--mint), var(--teal));
    transition: width .25s ease;
}

.quiz-section-card {
    margin: 18px 0;
    padding: 18px;
    border-radius: 26px;
    background: rgba(255,255,255,.90);
}

.quiz-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.quiz-section-head h2 {
    margin: 9px 0 5px;
    color: var(--ink);
    letter-spacing: -.02em;
}

.quiz-section-head p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.quiz-section-count {
    flex: 0 0 auto;
    padding: 9px 12px;
    border-radius: 999px;
    background: #FFF3C8;
    color: #8A641B;
    font-size: 12px;
    font-weight: 950;
}

.quiz-question-card,
.quiz-review-card {
    margin: 14px 0;
    padding: 16px;
    border-radius: 24px;
    background: linear-gradient(180deg, #FFFFFF, #FFFCF0);
    border: 1px solid rgba(69,131,147,.13);
    box-shadow: 0 10px 24px rgba(69,131,147,.08);
}

.quiz-question-card.is-answered {
    border-color: rgba(52,169,157,.34);
}

.quiz-question-top,
.quiz-review-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 13px;
}

.quiz-number-badge,
.quiz-review-icon {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    background: linear-gradient(135deg, var(--mint), var(--teal));
    color: #fff;
    font-weight: 950;
    box-shadow: 0 8px 16px rgba(52,169,157,.22);
}

.quiz-number-badge.reflection,
.quiz-review-icon.reflection {
    background: linear-gradient(135deg, var(--sand), #D9A84F);
}

.quiz-question-top h3,
.quiz-review-top strong {
    display: block;
    margin: 0;
    color: var(--ink);
}

.quiz-question-top small,
.quiz-review-top small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.quiz-question-text {
    margin: 8px 0 14px;
    color: var(--ink);
    line-height: 1.7;
}

.quiz-options-grid {
    display: grid;
    gap: 10px;
}

.quiz-option-row {
    position: relative;
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 10px;
    align-items: center;
    min-height: 54px;
    padding: 10px 12px;
    border-radius: 18px;
    border: 1px solid rgba(69,131,147,.14);
    background: #fff;
    cursor: pointer;
    transition: .18s ease;
}

.quiz-option-row:hover,
.quiz-option-row.is-selected {
    border-color: rgba(52,169,157,.48);
    box-shadow: 0 8px 18px rgba(52,169,157,.10);
    transform: translateY(-1px);
}

.quiz-option-row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.quiz-option-letter {
    width: 34px;
    height: 34px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: rgba(69,131,147,.08);
    color: var(--teal);
    font-weight: 950;
}

.quiz-option-row.is-selected .quiz-option-letter {
    background: linear-gradient(135deg, var(--mint), var(--teal));
    color: #fff;
}

.quiz-option-text {
    color: var(--ink);
    line-height: 1.45;
    font-weight: 750;
}

.quiz-textarea-wrap textarea {
    width: 100%;
    min-height: 180px;
    border-radius: 20px;
    border: 1px solid rgba(69,131,147,.17);
    background: #fff;
    padding: 14px;
    line-height: 1.65;
    resize: vertical;
    color: var(--ink);
}

.quiz-textarea-wrap textarea:focus {
    outline: none;
    border-color: rgba(52,169,157,.55);
    box-shadow: 0 0 0 4px rgba(52,169,157,.10);
}

.quiz-textarea-hint {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 7px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.quiz-submit-card {
    display: grid;
    gap: 14px;
    margin: 18px 0;
    padding: 18px;
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(52,169,157,.12), rgba(255,243,200,.72));
}

.quiz-submit-card h2 {
    margin: 0 0 4px;
    color: var(--ink);
}

.quiz-submit-card p {
    margin: 0;
    color: var(--muted);
}

.quiz-result-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.quiz-result-card {
    display: grid;
    gap: 7px;
    padding: 18px;
    border-radius: 24px;
    background: #fff;
}

.quiz-result-card.primary {
    background: linear-gradient(135deg, var(--teal), var(--mint));
    color: #fff;
}

.quiz-result-card span {
    font-size: 12px;
    font-weight: 900;
    color: inherit;
    opacity: .86;
}

.quiz-result-card strong {
    font-size: 30px;
    line-height: 1;
    letter-spacing: -.04em;
    color: inherit;
}

.quiz-result-card small {
    color: inherit;
    opacity: .80;
    font-weight: 800;
}

.quiz-review-card.is-correct {
    border-color: rgba(52,169,157,.33);
}

.quiz-review-card.is-wrong {
    border-color: rgba(239,68,68,.25);
}

.quiz-review-card.is-wrong .quiz-review-icon {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
}

.quiz-answer-detail {
    display: grid;
    gap: 6px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(69,131,147,.05);
}

.quiz-answer-detail p {
    margin: 0;
}

.quiz-essay-box,
.quiz-coach-feedback {
    padding: 13px;
    border-radius: 18px;
    background: rgba(255,243,200,.45);
    border: 1px solid rgba(229,203,144,.28);
    color: var(--ink);
    line-height: 1.7;
}

.quiz-coach-feedback {
    margin-top: 12px;
    background: rgba(52,169,157,.09);
    border-color: rgba(52,169,157,.18);
}

.quiz-empty-state {
    text-align: center;
}

.quiz-empty-icon {
    width: 62px;
    height: 62px;
    border-radius: 22px;
    margin: 0 auto 12px;
    display: grid;
    place-items: center;
    background: rgba(52,169,157,.12);
    color: var(--teal);
    font-size: 26px;
}

.quiz-bottom-menu {
    margin-top: 18px;
}

@media (max-width: 760px) {
    .quiz-hero-card {
        grid-template-columns: 1fr;
        padding: 18px;
        border-radius: 24px;
    }

    .quiz-hero-status {
        min-width: 0;
        grid-template-columns: auto 1fr auto;
        justify-items: start;
        text-align: left;
        gap: 10px;
        padding: 12px;
    }

    .quiz-hero-status strong {
        margin: 0;
        font-size: 26px;
    }

    .quiz-section-card {
        padding: 14px;
        border-radius: 22px;
    }

    .quiz-section-head {
        display: grid;
    }

    .quiz-section-count {
        width: fit-content;
    }

    .quiz-result-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .peserta-evaluasi-refleksi-page .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .quiz-hero-card h1 {
        font-size: 25px;
    }

    .quiz-meta-pills span {
        font-size: 11.5px;
        padding: 6px 8px;
    }

    .quiz-question-card,
    .quiz-review-card {
        padding: 13px;
        border-radius: 21px;
    }

    .quiz-option-row {
        grid-template-columns: 34px 1fr;
        padding: 9px 10px;
    }

    .quiz-option-letter {
        width: 31px;
        height: 31px;
        border-radius: 12px;
    }

    .quiz-textarea-wrap textarea {
        min-height: 170px;
    }

    .quiz-progress-panel {
        top: 74px;
    }
}

/* ======================================================
   PESERTA EVALUASI & REFLEKSI - FINAL SCORE CARD
====================================================== */

.peserta-evaluasi-refleksi-page .quiz-result-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.peserta-evaluasi-refleksi-page .quiz-result-card.final-score {
    background: linear-gradient(135deg, #263B3A, #458393);
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.peserta-evaluasi-refleksi-page .quiz-result-card.final-score::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    right: -46px;
    top: -46px;
    border-radius: 50%;
    background: rgba(255, 243, 200, .18);
}

.peserta-evaluasi-refleksi-page .quiz-result-card.final-score span,
.peserta-evaluasi-refleksi-page .quiz-result-card.final-score strong,
.peserta-evaluasi-refleksi-page .quiz-result-card.final-score small {
    position: relative;
    z-index: 1;
}

.quiz-final-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: -4px 0 18px;
    padding: 13px 14px;
    border-radius: 20px;
    background: rgba(255, 243, 200, .60);
    border: 1px solid rgba(229, 203, 144, .55);
    color: var(--ink);
    font-size: 13px;
    line-height: 1.55;
    box-shadow: 0 10px 24px rgba(69, 131, 147, .08);
}

.quiz-final-note i {
    margin-top: 3px;
    color: var(--teal);
    flex: 0 0 auto;
}

.quiz-final-note strong {
    color: var(--teal);
}

@media (max-width: 760px) {
    .peserta-evaluasi-refleksi-page .quiz-result-grid {
        grid-template-columns: 1fr;
    }
}

/* ======================================================
   PESERTA MATERIAL PROFESSIONAL LEARNING UI
====================================================== */

.peserta-material-pro-page .container {
    max-width: 1080px;
}

.pm-hero-card,
.pm-info-card,
.pm-action-card {
    border-radius: 26px;
    background:
        radial-gradient(circle at top left, rgba(52,169,157,.16), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,243,200,.70));
    border: 1px solid rgba(69,131,147,.16);
    box-shadow: 0 16px 38px rgba(69,131,147,.12);
    padding: 22px;
    margin-bottom: 18px;
}

.pm-hero-card {
    display: grid;
    grid-template-columns: 1fr 190px;
    gap: 18px;
    align-items: stretch;
    overflow: hidden;
    position: relative;
}

.pm-hero-card::after {
    content: "";
    position: absolute;
    right: -54px;
    bottom: -72px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(52,169,157,.13);
    pointer-events: none;
}

.pm-hero-main,
.pm-hero-status {
    position: relative;
    z-index: 1;
}

.pm-kicker,
.pm-small-label {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(52,169,157,.13);
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 10px;
}

.pm-hero-card h1 {
    margin: 0 0 10px;
    color: var(--ink);
    letter-spacing: -.04em;
    line-height: 1.05;
    font-size: clamp(26px, 4vw, 42px);
}

.pm-hero-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.pm-meta-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.pm-meta-pills span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 7px 10px;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(69,131,147,.13);
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
}

.pm-meta-pills i {
    color: var(--mint);
}

.pm-hero-status {
    min-height: 184px;
    border-radius: 24px;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(69,131,147,.13);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 18px;
}

.pm-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 950;
    margin-bottom: 10px;
    color: #fff;
    background: #9CA3AF;
}

.pm-status-badge.graded,
.pm-status-badge.coaching {
    background: linear-gradient(135deg, var(--mint), var(--teal));
}

.pm-status-badge.waiting,
.pm-status-badge.in-progress {
    background: linear-gradient(135deg, var(--sand), #D9A84F);
    color: #51401D;
}

.pm-status-badge.not-started {
    background: linear-gradient(135deg, #9CA3AF, #6B7280);
}

.pm-hero-status strong {
    display: block;
    color: var(--ink);
    font-size: 34px;
    font-weight: 950;
    letter-spacing: -.04em;
    line-height: 1;
}

.pm-hero-status small {
    display: block;
    color: var(--muted);
    margin-top: 6px;
    font-size: 12px;
    font-weight: 800;
}

.pm-info-card,
.pm-action-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.pm-info-icon,
.pm-action-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--mint), var(--teal));
    box-shadow: 0 10px 20px rgba(52,169,157,.20);
    font-size: 20px;
}

.pm-info-card h2,
.pm-action-card h2,
.pm-section-title h2 {
    margin: 0 0 7px;
    color: var(--ink);
    letter-spacing: -.03em;
}

.pm-info-card p,
.pm-action-card p,
.pm-section-title p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.pm-learning-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 18px;
    align-items: start;
    margin-bottom: 18px;
}

.pm-material-nav {
    position: sticky;
    top: 92px;
}

.pm-section-title {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.pm-section-title span {
    display: inline-block;
    color: var(--mint);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.pm-section-title strong {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(52,169,157,.13);
    color: var(--teal);
    font-weight: 950;
}

.pm-nav-list {
    display: grid;
    gap: 8px;
}

.pm-nav-list a {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 10px;
    align-items: center;
    text-decoration: none;
    color: var(--ink);
    padding: 10px;
    border-radius: 16px;
    background: rgba(255,255,255,.74);
    border: 1px solid rgba(69,131,147,.10);
    transition: .18s ease;
}

.pm-nav-list a:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(69,131,147,.09);
}

.pm-nav-list b {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--mint), var(--teal));
    color: #fff;
    font-size: 12px;
}

.pm-nav-list span {
    font-size: 13px;
    line-height: 1.35;
    font-weight: 850;
}

.pm-accordion-list {
    display: grid;
    gap: 12px;
}

.pm-material-accordion {
    border: 1px solid rgba(69,131,147,.13);
    border-radius: 20px;
    background: rgba(255,255,255,.82);
    overflow: hidden;
    box-shadow: 0 10px 22px rgba(69,131,147,.07);
}

.pm-material-accordion summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    -webkit-tap-highlight-color: transparent;
}

.pm-material-accordion summary::-webkit-details-marker {
    display: none;
}

.pm-material-number {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--sand), var(--cream));
    color: #5A4A22;
    font-weight: 950;
}

.pm-material-summary-text {
    min-width: 0;
}

.pm-material-summary-text strong {
    display: block;
    color: var(--ink);
    line-height: 1.25;
    margin-bottom: 4px;
}

.pm-material-summary-text small {
    display: block;
    color: var(--muted);
    line-height: 1.45;
}

.pm-material-tools {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--teal);
}

.pm-chevron {
    transition: .18s ease;
}

.pm-material-accordion[open] .pm-chevron {
    transform: rotate(180deg);
}

.pm-material-body {
    padding: 0 16px 16px 74px;
    animation: pmFadeIn .18s ease;
}

@keyframes pmFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.pm-material-body .rich-content {
    color: var(--ink);
    line-height: 1.78;
    overflow-wrap: anywhere;
}

.pm-material-body .rich-content p {
    margin-top: 0;
}

.pm-material-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px dashed rgba(69,131,147,.18);
}

.pm-empty-state {
    text-align: center;
    padding: 34px 18px;
}

.pm-empty-state i {
    font-size: 38px;
    color: var(--mint);
    margin-bottom: 8px;
}

.pm-action-card {
    margin-top: 18px;
}

.pm-action-main {
    flex: 1;
    min-width: 0;
}

.pm-eval-mini-grid,
.pm-score-grid {
    display: grid;
    gap: 10px;
    margin: 16px 0;
}

.pm-eval-mini-grid {
    grid-template-columns: repeat(3, 1fr);
}

.pm-eval-mini-grid div,
.pm-score-box {
    border-radius: 18px;
    padding: 14px;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(69,131,147,.12);
    text-align: center;
}

.pm-eval-mini-grid strong,
.pm-score-box strong {
    display: block;
    color: var(--ink);
    font-size: 24px;
    font-weight: 950;
    letter-spacing: -.04em;
}

.pm-eval-mini-grid span,
.pm-score-box span,
.pm-score-box small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.pm-score-grid {
    grid-template-columns: repeat(3, 1fr);
}

.pm-score-box.final {
    background: linear-gradient(135deg, rgba(52,169,157,.14), rgba(255,243,200,.80));
}

.pm-score-box.final strong {
    color: var(--teal);
}

.pm-status-note {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    border-radius: 16px;
    padding: 12px;
    margin: 12px 0 16px;
    font-size: 13px;
    line-height: 1.55;
}

.pm-status-note.waiting {
    background: rgba(229,203,144,.22);
    color: #5A4A22;
}

.pm-status-note.graded {
    background: rgba(52,169,157,.13);
    color: var(--teal);
}

.pm-bottom-menu {
    margin-top: 18px;
}

@media (max-width: 900px) {
    .pm-hero-card {
        grid-template-columns: 1fr;
    }

    .pm-hero-status {
        min-height: auto;
        align-items: flex-start;
        text-align: left;
    }

    .pm-learning-layout {
        grid-template-columns: 1fr;
    }

    .pm-material-nav {
        position: static;
    }

    .pm-nav-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .pm-hero-card,
    .pm-info-card,
    .pm-action-card {
        border-radius: 22px;
        padding: 18px;
    }

    .pm-meta-pills {
        gap: 7px;
    }

    .pm-meta-pills span {
        width: 100%;
        justify-content: flex-start;
    }

    .pm-info-card,
    .pm-action-card {
        display: block;
    }

    .pm-info-icon,
    .pm-action-icon {
        margin-bottom: 12px;
    }

    .pm-nav-list {
        grid-template-columns: 1fr;
    }

    .pm-material-accordion summary {
        grid-template-columns: 42px 1fr auto;
        gap: 9px;
        padding: 12px;
    }

    .pm-material-number {
        width: 38px;
        height: 38px;
        border-radius: 14px;
        font-size: 12px;
    }

    .pm-material-summary-text small {
        display: none;
    }

    .pm-material-body {
        padding: 0 12px 14px 12px;
    }

    .pm-material-links .btn {
        width: 100%;
        justify-content: center;
    }

    .pm-eval-mini-grid,
    .pm-score-grid {
        grid-template-columns: 1fr;
    }
}

/* ======================================================
   COACH DASHBOARD PROFESSIONAL UI
====================================================== */

.coach-dashboard-page .coach-hero-card {
    display: grid;
    gap: 18px;
    padding: 22px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(52,169,157,.18), transparent 38%),
        linear-gradient(135deg, rgba(255,243,200,.96), rgba(255,255,255,.94));
    border: 1px solid rgba(69,131,147,.16);
    box-shadow: 0 18px 42px rgba(69,131,147,.12);
    margin-bottom: 18px;
}

.coach-dashboard-page .coach-eyebrow {
    display: inline-flex;
    width: fit-content;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(52,169,157,.12);
    color: var(--teal);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.coach-dashboard-page .coach-hero-card h1 {
    margin: 0 0 8px;
    color: var(--ink);
    letter-spacing: -.04em;
}

.coach-dashboard-page .coach-hero-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.coach-dashboard-page .coach-hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.coach-dashboard-page .coach-stat-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 18px;
}

.coach-dashboard-page .coach-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 22px;
    background: rgba(255,255,255,.90);
    border: 1px solid rgba(69,131,147,.14);
    box-shadow: 0 12px 28px rgba(69,131,147,.09);
}

.coach-dashboard-page .coach-stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--mint), var(--teal));
    flex: 0 0 auto;
    font-size: 19px;
}

.coach-dashboard-page .coach-stat-card.warning .coach-stat-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.coach-dashboard-page .coach-stat-card.success .coach-stat-icon {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.coach-dashboard-page .coach-stat-num {
    color: var(--ink);
    font-size: 27px;
    font-weight: 950;
    line-height: 1;
}

.coach-dashboard-page .coach-stat-card strong {
    display: block;
    margin-top: 3px;
    color: var(--ink);
}

.coach-dashboard-page .coach-stat-card span {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.coach-dashboard-page .coach-participants-card {
    padding: 18px;
    border-radius: 28px;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(69,131,147,.14);
    box-shadow: 0 16px 38px rgba(69,131,147,.10);
}

.coach-dashboard-page .coach-section-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.coach-dashboard-page .coach-section-head h2 {
    margin: 0 0 6px;
    color: var(--ink);
    letter-spacing: -.02em;
}

.coach-dashboard-page .coach-section-head p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.coach-dashboard-page .coach-toolbar {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
}

.coach-dashboard-page .coach-search-box {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 13px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(69,131,147,.16);
    box-shadow: 0 8px 18px rgba(69,131,147,.06);
}

.coach-dashboard-page .coach-search-box i {
    color: var(--teal);
}

.coach-dashboard-page .coach-search-box input {
    border: none;
    outline: none;
    box-shadow: none;
    padding: 0;
    width: 100%;
    background: transparent;
    font: inherit;
    color: var(--ink);
}

.coach-dashboard-page .coach-filter-pills {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.coach-dashboard-page .coach-filter-pills::-webkit-scrollbar {
    display: none;
}

.coach-dashboard-page .coach-filter-pill {
    border: 1px solid rgba(69,131,147,.16);
    background: #fff;
    color: var(--muted);
    border-radius: 999px;
    padding: 9px 13px;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
    cursor: pointer;
    transition: .18s ease;
}

.coach-dashboard-page .coach-filter-pill.active {
    background: linear-gradient(135deg, var(--mint), var(--teal));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 10px 18px rgba(52,169,157,.20);
}

.coach-dashboard-page .coach-participant-list {
    display: grid;
    gap: 14px;
}

.coach-dashboard-page .coach-participant-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.88));
    border: 1px solid rgba(69,131,147,.13);
    box-shadow: 0 12px 28px rgba(69,131,147,.08);
}

.coach-dashboard-page .coach-participant-main {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.coach-dashboard-page .coach-avatar {
    width: 52px;
    height: 52px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--sand), var(--mint));
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 22px;
    font-weight: 950;
    flex: 0 0 auto;
    box-shadow: 0 10px 18px rgba(69,131,147,.12);
}

.coach-dashboard-page .coach-participant-info {
    min-width: 0;
    flex: 1;
}

.coach-dashboard-page .coach-participant-title-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
}

.coach-dashboard-page .coach-participant-title-row h3 {
    margin: 0;
    color: var(--ink);
    letter-spacing: -.02em;
}

.coach-dashboard-page .coach-participant-info p {
    margin: 5px 0 0;
    color: var(--muted);
    line-height: 1.45;
}

.coach-dashboard-page .coach-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.coach-dashboard-page .coach-status-badge.warning {
    color: #92400e;
    background: #fef3c7;
}

.coach-dashboard-page .coach-status-badge.success {
    color: #166534;
    background: #dcfce7;
}

.coach-dashboard-page .coach-status-badge.info {
    color: #075985;
    background: #e0f2fe;
}

.coach-dashboard-page .coach-status-badge.muted {
    color: #6b7280;
    background: #f3f4f6;
}

.coach-dashboard-page .coach-participant-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 12px;
    margin-top: 10px;
    color: var(--muted);
    font-size: 12px;
}

.coach-dashboard-page .coach-participant-meta span {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}

.coach-dashboard-page .coach-participant-meta i {
    color: var(--teal);
}

.coach-dashboard-page .coach-participant-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.coach-dashboard-page .coach-participant-summary > div {
    padding: 12px;
    border-radius: 18px;
    background: rgba(255,243,200,.36);
    border: 1px solid rgba(229,203,144,.34);
}

.coach-dashboard-page .coach-participant-summary strong {
    display: block;
    color: var(--ink);
    font-size: 20px;
    font-weight: 950;
    line-height: 1;
}

.coach-dashboard-page .coach-participant-summary span {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.35;
}

.coach-dashboard-page .coach-path-stack {
    display: grid;
    gap: 10px;
}

.coach-dashboard-page .coach-path-card {
    padding: 14px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid rgba(69,131,147,.12);
}

.coach-dashboard-page .coach-path-card.has-pending {
    border-color: rgba(245,158,11,.38);
    box-shadow: inset 4px 0 0 rgba(245,158,11,.75);
}

.coach-dashboard-page .coach-path-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.coach-dashboard-page .coach-course-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--teal);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.35;
}

.coach-dashboard-page .coach-path-head h4 {
    margin: 0;
    color: var(--ink);
    letter-spacing: -.01em;
}

.coach-dashboard-page .coach-path-head p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.coach-dashboard-page .coach-progress-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
}

.coach-dashboard-page .coach-progress {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #ecfdf5;
    border: 1px solid rgba(52,169,157,.16);
}

.coach-dashboard-page .coach-progress span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--mint), var(--teal));
}

.coach-dashboard-page .coach-progress-row strong {
    color: var(--ink);
    font-size: 12px;
}

.coach-dashboard-page .coach-path-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 11px;
    margin-top: 11px;
    color: var(--muted);
    font-size: 12px;
}

.coach-dashboard-page .coach-path-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.coach-dashboard-page .coach-path-meta i {
    color: var(--teal);
}

.coach-dashboard-page .text-warning,
.coach-dashboard-page .text-warning i {
    color: #d97706 !important;
    font-weight: 850;
}

.coach-dashboard-page .coach-empty-path-box,
.coach-dashboard-page .coach-empty-state {
    display: flex;
    gap: 12px;
    padding: 14px;
    border-radius: 20px;
    background: #f9fafb;
    border: 1px dashed rgba(107,114,128,.24);
    color: var(--muted);
}

.coach-dashboard-page .coach-empty-path-box i,
.coach-dashboard-page .coach-empty-state i {
    color: var(--teal);
    font-size: 20px;
    margin-top: 2px;
}

.coach-dashboard-page .coach-empty-path-box strong {
    display: block;
    color: var(--ink);
    margin-bottom: 4px;
}

.coach-dashboard-page .coach-empty-path-box p {
    margin: 0;
    line-height: 1.55;
}

.coach-dashboard-page .coach-empty-state {
    display: grid;
    place-items: center;
    text-align: center;
    padding: 34px 16px;
}

.coach-dashboard-page .coach-empty-state i {
    font-size: 34px;
}

.coach-dashboard-page .coach-empty-state h3 {
    margin: 8px 0 0;
    color: var(--ink);
}

@media (min-width: 760px) {
    .coach-dashboard-page .coach-hero-card {
        grid-template-columns: 1fr auto;
        align-items: center;
    }

    .coach-dashboard-page .coach-stat-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .coach-dashboard-page .coach-toolbar {
        grid-template-columns: 1fr auto;
        align-items: center;
    }
}

@media (max-width: 640px) {
    .coach-dashboard-page .coach-hero-card,
    .coach-dashboard-page .coach-participants-card {
        border-radius: 24px;
        padding: 16px;
    }

    .coach-dashboard-page .coach-stat-grid {
        grid-template-columns: 1fr;
    }

    .coach-dashboard-page .coach-participant-main,
    .coach-dashboard-page .coach-path-head {
        align-items: stretch;
    }

    .coach-dashboard-page .coach-path-head {
        flex-direction: column;
    }

    .coach-dashboard-page .coach-path-head .btn {
        width: 100%;
    }

    .coach-dashboard-page .coach-participant-title-row {
        flex-direction: column;
        gap: 6px;
    }

    .coach-dashboard-page .coach-participant-summary {
        grid-template-columns: 1fr;
    }

    .coach-dashboard-page .coach-avatar {
        width: 48px;
        height: 48px;
        border-radius: 18px;
    }
}

/* ======================================================
   PESERTA MY COACHING PAGE
====================================================== */

.my-coaching-page {
    display: grid;
    gap: 16px;
}

.my-coaching-hero {
    display: grid;
    gap: 18px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(52, 169, 157, .18), transparent 34%),
        linear-gradient(135deg, #ffffff, rgba(255, 243, 200, .72));
}

.my-coaching-hero::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -80px;
    bottom: -90px;
    border-radius: 50%;
    background: rgba(229, 203, 144, .28);
}

.my-coaching-hero-main,
.my-coaching-hero-progress {
    position: relative;
    z-index: 2;
}

.my-coaching-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(52, 169, 157, .12);
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.my-coaching-hero h1 {
    margin: 12px 0 8px;
    color: var(--ink);
    font-size: clamp(28px, 8vw, 42px);
    line-height: 1.05;
    letter-spacing: -.04em;
}

.my-coaching-hero p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.my-coach-chip {
    margin-top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 18px;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(69, 131, 147, .14);
    box-shadow: 0 10px 22px rgba(69, 131, 147, .08);
}

.my-coach-chip > span {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--mint), var(--teal));
    color: #fff;
}

.my-coach-chip small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.my-coach-chip strong {
    display: block;
    color: var(--ink);
}

.my-coaching-hero-progress {
    display: grid;
    place-items: center;
}

.my-coaching-ring {
    --progress: 0%;
    width: 122px;
    height: 122px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle, #fff 57%, transparent 58%),
        conic-gradient(var(--mint) var(--progress), rgba(69, 131, 147, .14) 0);
    box-shadow: 0 14px 28px rgba(69, 131, 147, .12);
}

.my-coaching-ring strong {
    display: block;
    color: var(--teal);
    font-size: 28px;
    line-height: 1;
}

.my-coaching-ring small {
    display: block;
    margin-top: -28px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
}

.my-coaching-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.my-coaching-stat-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid rgba(69, 131, 147, .12);
    box-shadow: 0 10px 22px rgba(69, 131, 147, .08);
}

.my-coaching-stat-card > span {
    width: 40px;
    height: 40px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: rgba(52, 169, 157, .12);
    color: var(--teal);
    flex: 0 0 auto;
}

.my-coaching-stat-card strong {
    display: block;
    color: var(--ink);
    font-size: 24px;
    line-height: 1;
}

.my-coaching-stat-card small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.my-coaching-toolbar {
    display: grid;
    gap: 12px;
}

.my-coaching-toolbar label {
    display: grid;
    gap: 7px;
    color: var(--ink);
    font-weight: 850;
}

.my-coaching-search {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(69, 131, 147, .16);
}

.my-coaching-search i {
    color: var(--muted);
}

.my-coaching-search input {
    border: 0 !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    background: transparent !important;
}

.my-coaching-list {
    display: grid;
    gap: 14px;
}

.my-coaching-card {
    padding: 16px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid rgba(69, 131, 147, .12);
    box-shadow: 0 12px 28px rgba(69, 131, 147, .10);
    overflow: hidden;
}

.my-coaching-card-head {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 12px;
    align-items: flex-start;
}

.my-coaching-course-icon {
    width: 46px;
    height: 46px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--mint), var(--teal));
    color: #fff;
    box-shadow: 0 10px 20px rgba(52, 169, 157, .20);
}

.my-coaching-card-title {
    min-width: 0;
}

.my-coaching-breadcrumb {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
    font-weight: 850;
}

.my-coaching-card h2 {
    margin: 4px 0 7px;
    color: var(--ink);
    font-size: 18px;
    line-height: 1.25;
}

.my-coaching-course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.my-coaching-course-meta span {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(69, 131, 147, .08);
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
}

.my-coaching-status-pill {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.my-coaching-status-pill.success {
    background: rgba(34, 197, 94, .12);
    color: #15803d;
}

.my-coaching-status-pill.warning {
    background: rgba(245, 158, 11, .14);
    color: #b45309;
}

.my-coaching-status-pill.info {
    background: rgba(52, 169, 157, .12);
    color: var(--teal);
}

.my-coaching-status-pill.muted {
    background: #f3f4f6;
    color: #6b7280;
}

.my-coaching-desc {
    margin: 12px 0 0;
    color: var(--muted);
    line-height: 1.58;
}

.my-coaching-progress-block {
    margin-top: 14px;
}

.my-coaching-progress-label {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 12px;
}

.my-coaching-progress-label strong {
    color: var(--ink);
}

.my-coaching-progress {
    height: 10px;
    border-radius: 999px;
    background: rgba(69, 131, 147, .12);
    overflow: hidden;
}

.my-coaching-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--mint), var(--teal));
}

.my-coaching-step-strip {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 13px;
    overflow-x: auto;
    scrollbar-width: none;
}

.my-coaching-step-strip::-webkit-scrollbar {
    display: none;
}

.my-coaching-step-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 950;
    border: 1px solid transparent;
}

.my-coaching-step-dot.is-confirmed {
    background: rgba(34, 197, 94, .14);
    color: #15803d;
    border-color: rgba(34, 197, 94, .22);
}

.my-coaching-step-dot.is-pending {
    background: rgba(245, 158, 11, .16);
    color: #b45309;
    border-color: rgba(245, 158, 11, .24);
}

.my-coaching-step-dot.is-active {
    background: rgba(52, 169, 157, .14);
    color: var(--teal);
    border-color: rgba(52, 169, 157, .24);
}

.my-coaching-step-dot.is-empty {
    background: #f3f4f6;
    color: #9ca3af;
    border-color: #e5e7eb;
}

.my-coaching-card-foot {
    display: grid;
    gap: 12px;
    margin-top: 15px;
    padding-top: 14px;
    border-top: 1px solid rgba(69, 131, 147, .10);
}

.my-coaching-mini-info {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.my-coaching-mini-info i {
    color: var(--teal);
}

.my-coaching-empty,
.my-coaching-no-result {
    text-align: center;
}

.my-coaching-empty-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 12px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    background: rgba(52, 169, 157, .12);
    color: var(--teal);
    font-size: 28px;
}

@media (min-width: 720px) {
    .my-coaching-hero {
        grid-template-columns: 1fr 160px;
        align-items: center;
    }

    .my-coaching-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .my-coaching-toolbar {
        grid-template-columns: 1fr 230px;
        align-items: end;
    }

    .my-coaching-card-head {
        grid-template-columns: 52px 1fr auto;
        align-items: center;
    }

    .my-coaching-course-icon {
        width: 52px;
        height: 52px;
    }

    .my-coaching-status-pill {
        grid-column: auto;
    }

    .my-coaching-card-foot {
        grid-template-columns: 1fr auto;
        align-items: center;
    }
}

@media (max-width: 390px) {
    .my-coaching-stat-card {
        padding: 11px;
    }

    .my-coaching-stat-card > span {
        width: 34px;
        height: 34px;
        border-radius: 13px;
    }

    .my-coaching-stat-card strong {
        font-size: 20px;
    }

    .my-coaching-card {
        padding: 14px;
        border-radius: 21px;
    }
}


/* ======================================================
   PESERTA BOTTOM NAV - FIXED TO SCREEN BOTTOM
====================================================== */

body.role-peserta {
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
}

.bottom-nav.bottom-nav-pro.bottom-nav-fixed {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    width: 100%;
    min-height: calc(76px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 1fr 1fr 1.22fr 1fr 1fr;
    align-items: end;
    gap: 2px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: #ffffff;
    border-top: 1px solid rgba(69, 131, 147, .18);
    box-shadow: 0 -12px 34px rgba(38, 59, 58, .16);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
}

.bottom-nav-pro .bottom-nav-item {
    min-width: 0;
    height: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    color: #6B7A78;
    text-decoration: none;
    font-size: 11px;
    font-weight: 850;
    border-radius: 18px;
    transition: .2s ease;
    -webkit-tap-highlight-color: transparent;
}

.bottom-nav-pro .bottom-nav-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: rgba(69, 131, 147, .08);
    color: var(--teal);
    font-size: 15px;
    transition: .2s ease;
}

.bottom-nav-pro .bottom-nav-item small {
    line-height: 1;
    font-size: 10.5px;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.bottom-nav-pro .bottom-nav-item.active,
.bottom-nav-pro .bottom-nav-item:hover {
    color: var(--teal);
}

.bottom-nav-pro .bottom-nav-item.active .bottom-nav-icon {
    background: linear-gradient(135deg, var(--mint), var(--teal));
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(52, 169, 157, .25);
}

/* Tombol utama tengah */
.bottom-nav-pro .bottom-nav-main {
    position: relative;
    height: 82px;
    justify-content: flex-start;
    margin-top: -34px;
    color: var(--teal);
    z-index: 2;
}

.bottom-nav-pro .bottom-main-circle {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.32), transparent 36%),
        linear-gradient(135deg, var(--mint), var(--teal));
    color: #ffffff;
    border: 6px solid #ffffff;
    box-shadow:
        0 14px 32px rgba(52, 169, 157, .34),
        0 6px 16px rgba(38, 59, 58, .20);
    font-size: 25px;
    transition: .2s ease;
}

.bottom-nav-pro .bottom-nav-main small {
    margin-top: 3px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #FFF3C8;
    color: var(--teal);
    font-size: 10px;
    font-weight: 950;
    box-shadow: 0 5px 12px rgba(69, 131, 147, .10);
}

.bottom-nav-pro .bottom-nav-main.active .bottom-main-circle,
.bottom-nav-pro .bottom-nav-main:hover .bottom-main-circle {
    transform: translateY(-2px);
    box-shadow:
        0 18px 40px rgba(52, 169, 157, .40),
        0 8px 18px rgba(38, 59, 58, .22);
}

/* Desktop: bottom nav disembunyikan */
@media (min-width: 1025px) {
    .bottom-nav.bottom-nav-pro.bottom-nav-fixed {
        display: none;
    }

    body.role-peserta {
        padding-bottom: 0;
    }
}

/* HP kecil */
@media (max-width: 420px) {
    body.role-peserta {
        padding-bottom: calc(88px + env(safe-area-inset-bottom));
    }

    .bottom-nav.bottom-nav-pro.bottom-nav-fixed {
        min-height: calc(72px + env(safe-area-inset-bottom));
        grid-template-columns: 1fr 1fr 1.15fr 1fr 1fr;
        gap: 1px;
        padding: 7px 6px calc(7px + env(safe-area-inset-bottom));
    }

    .bottom-nav-pro .bottom-nav-icon {
        width: 31px;
        height: 31px;
        border-radius: 13px;
        font-size: 14px;
    }

    .bottom-nav-pro .bottom-nav-item {
        height: 55px;
    }

    .bottom-nav-pro .bottom-nav-item small {
        font-size: 9.5px;
    }

    .bottom-nav-pro .bottom-nav-main {
        height: 78px;
        margin-top: -32px;
    }

    .bottom-nav-pro .bottom-main-circle {
        width: 64px;
        height: 64px;
        font-size: 23px;
        border-width: 5px;
    }

    .bottom-nav-pro .bottom-nav-main small {
        font-size: 9px;
        padding: 3px 6px;
    }
}

/* ======================================================
   PESERTA AI-COACH CHATBOT
====================================================== */

.ai-coach-shell {
    display: grid;
    gap: 16px;
}

.ai-coach-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    gap: 15px;
    align-items: flex-start;
    background:
        radial-gradient(circle at top right, rgba(52, 169, 157, .20), transparent 36%),
        linear-gradient(135deg, #ffffff, #FFF8DE);
}

.ai-coach-hero::after {
    content: "";
    position: absolute;
    right: -36px;
    bottom: -42px;
    width: 130px;
    height: 130px;
    border-radius: 999px;
    background: rgba(229, 203, 144, .25);
}

.ai-coach-hero-icon {
    width: 58px;
    height: 58px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    flex: 0 0 58px;
    background: linear-gradient(135deg, var(--mint), var(--teal));
    color: #fff;
    box-shadow: 0 14px 28px rgba(52, 169, 157, .24);
    font-size: 24px;
}

.ai-coach-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 243, 200, .82);
    color: var(--teal);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ai-coach-hero h1 {
    margin: 0 0 6px;
    color: var(--ink);
    letter-spacing: -.04em;
}

.ai-coach-hero p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.ai-coach-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.ai-coach-stat {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px !important;
}

.ai-coach-stat > span {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(52, 169, 157, .12);
    color: var(--teal);
    flex: 0 0 42px;
}

.ai-coach-stat strong {
    display: block;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.15;
}

.ai-coach-stat small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 750;
}

.ai-coach-chat-card {
    padding: 0 !important;
    overflow: hidden;
}

.ai-coach-chat-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    padding: 18px 18px 12px;
    border-bottom: 1px solid rgba(69, 131, 147, .12);
}

.ai-coach-chat-head h2 {
    margin: 0 0 4px;
}

.ai-coach-scope-note {
    margin: 14px 18px 0;
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding: 11px 12px;
    border-radius: 16px;
    background: rgba(255, 243, 200, .55);
    border: 1px solid rgba(229, 203, 144, .38);
    color: var(--teal);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.45;
}

.ai-coach-messages {
    display: grid;
    gap: 14px;
    padding: 18px;
    max-height: min(62vh, 680px);
    overflow-y: auto;
    scroll-behavior: smooth;
}

.ai-coach-welcome-bubble {
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(52, 169, 157, .12), rgba(255, 243, 200, .64));
    border: 1px solid rgba(69, 131, 147, .12);
    padding: 16px;
    color: var(--ink);
}

.ai-coach-welcome-bubble p {
    margin: 6px 0 0;
    color: var(--muted);
}

.ai-message {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.ai-message.is-user {
    flex-direction: row-reverse;
}

.ai-message-avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    color: #fff;
    background: linear-gradient(135deg, var(--teal), #263B3A);
    box-shadow: 0 8px 18px rgba(69, 131, 147, .18);
}

.ai-message.is-user .ai-message-avatar {
    background: linear-gradient(135deg, var(--sand), #d7a947);
}

.ai-message-body {
    max-width: min(82%, 720px);
}

.ai-message-text {
    padding: 13px 14px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid rgba(69, 131, 147, .12);
    box-shadow: 0 8px 20px rgba(69, 131, 147, .08);
    color: var(--ink);
    line-height: 1.62;
    font-size: 14px;
}

.ai-message.is-user .ai-message-text {
    background: linear-gradient(135deg, var(--mint), var(--teal));
    color: #ffffff;
    border-color: transparent;
}

.ai-source-list {
    margin-top: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    font-size: 11px;
    color: var(--muted);
}

.ai-source-list > span {
    font-weight: 900;
}

.ai-source-list a {
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(52, 169, 157, .10);
    color: var(--teal);
    text-decoration: none;
    font-weight: 850;
}

.ai-quick-prompts {
    display: flex;
    gap: 8px;
    padding: 0 18px 14px;
    overflow-x: auto;
    scrollbar-width: none;
}

.ai-quick-prompts::-webkit-scrollbar {
    display: none;
}

.ai-quick-prompts button {
    flex: 0 0 auto;
    border: 1px solid rgba(69, 131, 147, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .86);
    color: var(--teal);
    font-size: 12px;
    font-weight: 850;
    padding: 9px 11px;
    cursor: pointer;
}

.ai-coach-composer {
    display: grid;
    grid-template-columns: 1fr 48px;
    gap: 10px;
    padding: 14px;
    background: rgba(255, 248, 222, .68);
    border-top: 1px solid rgba(69, 131, 147, .12);
}

.ai-coach-composer textarea {
    width: 100%;
    min-height: 50px;
    max-height: 150px;
    resize: vertical;
    border-radius: 18px;
    border: 1px solid rgba(69, 131, 147, .18);
    background: #fff;
    padding: 13px 14px;
    line-height: 1.45;
}

.ai-coach-composer button {
    width: 48px;
    height: 50px;
    border-radius: 18px;
    border: none;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--mint), var(--teal));
    color: #fff;
    box-shadow: 0 10px 22px rgba(52, 169, 157, .24);
    cursor: pointer;
}

.ai-coach-empty-state {
    text-align: center;
    padding: 28px 18px !important;
}

.ai-coach-empty-state > i {
    width: 62px;
    height: 62px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
    background: rgba(52, 169, 157, .12);
    color: var(--teal);
    font-size: 26px;
}

.ai-coach-empty-state h2 {
    margin: 0 0 8px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 760px) {
    .ai-coach-stat-grid {
        grid-template-columns: 1fr;
    }

    .ai-coach-hero {
        gap: 12px;
    }

    .ai-coach-hero-icon {
        width: 50px;
        height: 50px;
        border-radius: 19px;
        flex-basis: 50px;
        font-size: 21px;
    }

    .ai-coach-chat-head {
        padding: 16px 14px 11px;
    }

    .ai-coach-scope-note {
        margin: 12px 14px 0;
    }

    .ai-coach-messages {
        padding: 14px;
        max-height: 58vh;
    }

    .ai-message-body {
        max-width: 86%;
    }

    .ai-message-text {
        font-size: 13.6px;
        border-radius: 16px;
    }

    .ai-quick-prompts {
        padding-left: 14px;
        padding-right: 14px;
    }

    .ai-coach-composer {
        padding: 12px;
        grid-template-columns: 1fr 46px;
    }
}

/* ======================================================
   PESERTA MATERIAL - UNIT BY MATERIAL TYPE
====================================================== */

#pm-page-top,
#daftar-unit,
#daftar-bagian {
    scroll-margin-top: 96px;
}

.pm-unit-card {
    margin-top: 18px;
}

.pm-unit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.pm-unit-item {
    position: relative;
    display: grid;
    grid-template-columns: 46px 1fr auto;
    align-items: flex-start;
    gap: 12px;
    min-height: 112px;
    padding: 14px;
    border-radius: 22px;
    text-decoration: none;
    color: var(--ink);
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,243,200,.42));
    border: 1px solid rgba(69, 131, 147, .14);
    box-shadow: 0 10px 22px rgba(69, 131, 147, .08);
    transition: .2s ease;
    overflow: hidden;
}

.pm-unit-item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--mint), var(--teal));
    opacity: .55;
}

.pm-unit-item:hover,
.pm-unit-item.is-active {
    transform: translateY(-2px);
    border-color: rgba(52, 169, 157, .35);
    box-shadow: 0 16px 30px rgba(52, 169, 157, .14);
}

.pm-unit-item.is-active {
    background: linear-gradient(135deg, rgba(52,169,157,.12), rgba(255,243,200,.74));
}

.pm-unit-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    background: linear-gradient(135deg, var(--mint), var(--teal));
    color: #fff;
    font-size: 18px;
    box-shadow: 0 10px 20px rgba(52,169,157,.18);
}

.pm-unit-body {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.pm-unit-body strong {
    display: block;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.25;
}

.pm-unit-body small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.pm-unit-body em {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(69,131,147,.08);
    color: var(--teal);
    font-style: normal;
    font-size: 11px;
    font-weight: 900;
}

.pm-unit-tools {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(69, 131, 147, .70);
    font-size: 12px;
}

.pm-selected-unit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin-top: 6px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(52,169,157,.10);
    color: var(--teal);
    font-size: 11px;
    font-weight: 900;
}

.pm-material-unit-tag {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    width: fit-content;
    margin: 4px 0 2px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(52,169,157,.10);
    color: var(--teal) !important;
    font-size: 10.5px !important;
    font-weight: 900;
}

.pm-empty-state.compact {
    padding: 20px;
    text-align: center;
}

.pm-up-button {
    position: fixed;
    left: 14px;
    bottom: calc(96px + env(safe-area-inset-bottom));
    z-index: 130;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--mint), var(--teal));
    color: #fff;
    text-decoration: none;
    border: 4px solid #fff;
    box-shadow: 0 14px 28px rgba(38, 59, 58, .22);
    transition: .18s ease;
    -webkit-tap-highlight-color: transparent;
}

.pm-up-button:hover,
.pm-up-button:active {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(38, 59, 58, .26);
}

.pm-up-button i {
    font-size: 16px;
}

@media (min-width: 1025px) {
    .pm-up-button {
        left: calc(50% - 610px);
        bottom: 28px;
    }
}

@media (max-width: 760px) {
    .pm-unit-grid {
        grid-template-columns: 1fr;
    }

    .pm-unit-item {
        min-height: unset;
        grid-template-columns: 42px 1fr auto;
        border-radius: 20px;
        padding: 13px;
    }

    .pm-unit-icon {
        width: 42px;
        height: 42px;
        border-radius: 15px;
        font-size: 16px;
    }
}

@media (max-width: 420px) {
    #pm-page-top,
    #daftar-unit,
    #daftar-bagian {
        scroll-margin-top: 82px;
    }

    .pm-unit-body strong {
        font-size: 14px;
    }

    .pm-unit-body small {
        font-size: 11.5px;
    }

    .pm-up-button {
        width: 40px;
        height: 40px;
        left: 10px;
        bottom: calc(88px + env(safe-area-inset-bottom));
        border-width: 3px;
    }
}

/* ======================================================
   PESERTA MATERIAL - SPLIT FILE LAYOUT ADJUSTMENT
   material1.php = top + daftar unit
   material2.php = daftar bagian
   material3.php = belajar bertahap + action
====================================================== */

.pm-learning-layout-parts-only,
.pm-learning-layout-content-only {
    display: block;
    margin-top: 18px;
}

.pm-learning-layout-parts-only .pm-material-nav,
.pm-learning-layout-content-only .pm-material-content {
    width: 100%;
}

.pm-learning-layout-parts-only .pm-material-nav {
    position: static;
}

.pm-learning-layout-content-only .pm-material-content {
    min-width: 0;
}

@media (min-width: 1025px) {
    .pm-learning-layout-parts-only .pm-material-nav,
    .pm-learning-layout-content-only .pm-material-content {
        max-width: 100%;
    }
}

/* ======================================================
   PESERTA STEP - MULTI AI ANALYSIS BEFORE COACH SUBMIT
====================================================== */

.peserta-step-ai-page .step-ai-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 170px;
    gap: 16px;
    align-items: stretch;
    margin-bottom: 16px;
    padding: 22px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.72), transparent 32%),
        linear-gradient(135deg, rgba(255,243,200,.96), rgba(255,255,255,.94));
    border: 1px solid rgba(69, 131, 147, .15);
    box-shadow: 0 16px 38px rgba(69, 131, 147, .14);
}

.peserta-step-ai-page .step-ai-hero::after {
    content: "";
    position: absolute;
    right: -90px;
    top: -90px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--item-color, var(--mint)) 24%, transparent);
}

.step-ai-hero-main,
.step-ai-status-card {
    position: relative;
    z-index: 1;
}

.step-ai-hero-main h1 {
    margin: 8px 0;
    color: var(--ink);
    letter-spacing: -.04em;
}

.step-ai-hero-main p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.step-ai-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.step-ai-pills span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(69, 131, 147, .12);
    color: var(--teal);
    font-size: 12px;
    font-weight: 850;
}

.step-ai-status-card {
    display: grid;
    place-items: center;
    text-align: center;
    border-radius: 24px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid rgba(69, 131, 147, .14);
    box-shadow: 0 12px 28px rgba(69, 131, 147, .11);
}

.step-ai-status-card span {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
    color: var(--teal);
    background: rgba(52, 169, 157, .10);
}

.step-ai-status-card.pending span { color: #92400e; background: #FEF3C7; }
.step-ai-status-card.confirmed span { color: #166534; background: #DCFCE7; }
.step-ai-status-card.revision span { color: #991b1b; background: #FEE2E2; }

.step-ai-status-card strong {
    margin-top: 8px;
    color: var(--ink);
    font-size: 34px;
    line-height: 1;
    letter-spacing: -.06em;
}

.step-ai-status-card small {
    margin-top: 4px;
    color: var(--muted);
    font-weight: 800;
}

.step-ai-progress-card {
    margin-bottom: 16px;
}

.step-ai-journey {
    margin-top: 14px;
}

.step-ai-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
    gap: 16px;
    align-items: start;
}

.step-ai-form,
.step-ai-side .mobile-card {
    border: 1px solid rgba(69, 131, 147, .14);
}

.step-ai-form-head,
.step-ai-side-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.step-ai-form-head h2,
.step-ai-side-head h2 {
    margin: 0;
    color: var(--ink);
}

.step-ai-ready-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #DCFCE7;
    color: #166534;
    font-size: 11px;
    font-weight: 950;
    white-space: nowrap;
}

.step-ai-ready-badge.muted {
    background: #F3F4F6;
    color: #6B7280;
}

.step-ai-form textarea {
    min-height: 132px;
    line-height: 1.6;
    resize: vertical;
}

.step-ai-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.step-ai-actions .btn {
    justify-content: center;
    min-height: 44px;
}

.step-ai-help-note {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.55;
}

.step-ai-side {
    display: grid;
    gap: 16px;
    position: sticky;
    top: 84px;
}

.step-ai-side-icon {
    width: 46px;
    height: 46px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: #fff;
    background: linear-gradient(135deg, var(--mint), var(--teal));
    box-shadow: 0 10px 20px rgba(52, 169, 157, .22);
}

.step-ai-feedback-box {
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 243, 200, .38);
    border: 1px solid rgba(69, 131, 147, .13);
    line-height: 1.65;
}

.step-ai-empty-ai {
    display: grid;
    place-items: center;
    text-align: center;
    gap: 10px;
    padding: 22px;
    border-radius: 20px;
    background: rgba(69, 131, 147, .06);
    color: var(--muted);
}

.step-ai-empty-ai i {
    font-size: 28px;
    color: var(--teal);
}

.step-ai-history-card h2 {
    margin-bottom: 4px;
}

.step-ai-history-list {
    display: grid;
    gap: 9px;
    margin-top: 12px;
}

.step-ai-history-list details {
    border-radius: 16px;
    border: 1px solid rgba(69, 131, 147, .13);
    background: rgba(255,255,255,.72);
    overflow: hidden;
}

.step-ai-history-list summary {
    cursor: pointer;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    font-weight: 900;
    color: var(--ink);
}

.step-ai-history-list summary small {
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
}

.step-ai-history-list details > div {
    padding: 0 12px 12px;
    color: var(--muted);
    line-height: 1.6;
    font-size: 13px;
}

.step-ai-case-card {
    margin-bottom: 16px;
}

.step-ai-bottom-nav {
    margin-top: 16px;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    flex-wrap: wrap;
}

@media (max-width: 980px) {
    .peserta-step-ai-page .step-ai-hero,
    .step-ai-layout {
        grid-template-columns: 1fr;
    }

    .step-ai-status-card {
        display: flex;
        justify-content: space-between;
        text-align: left;
        gap: 12px;
    }

    .step-ai-status-card strong {
        margin-top: 0;
    }

    .step-ai-side {
        position: static;
    }
}

@media (max-width: 620px) {
    .peserta-step-ai-page .step-ai-hero {
        padding: 18px;
        border-radius: 24px;
    }

    .step-ai-pills span {
        width: 100%;
    }

    .step-ai-form-head,
    .step-ai-side-head {
        display: grid;
    }

    .step-ai-ready-badge {
        width: fit-content;
    }

    .step-ai-actions {
        grid-template-columns: 1fr;
    }

    .step-ai-form textarea {
        min-height: 150px;
    }

    .step-ai-bottom-nav .btn {
        width: 100%;
    }
}

/* ======================================================
   AI-COACH DB READY FIX
====================================================== */
.peserta-ai-coach-page .ai-coach-shell {
    display: grid;
    gap: 16px;
    max-width: 980px;
    margin: 0 auto;
}

.ai-coach-hero {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: linear-gradient(135deg, #ffffff, #FFF3C8);
    border: 1px solid rgba(69, 131, 147, .14);
}

.ai-coach-hero-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 20px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--mint), var(--teal));
    box-shadow: 0 12px 28px rgba(52, 169, 157, .24);
    font-size: 22px;
}

.ai-coach-kicker {
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(52, 169, 157, .12);
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 7px;
}

.ai-coach-hero h1 {
    margin: 0 0 6px;
    font-size: clamp(26px, 5vw, 40px);
    letter-spacing: -.04em;
    color: var(--ink);
}

.ai-coach-hero p,
.ai-coach-chat-head p {
    margin: 0;
}

.ai-coach-status-card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 12px;
}

.ai-coach-status-card > div {
    border-radius: 18px;
    padding: 13px 10px;
    background: rgba(69, 131, 147, .07);
    text-align: center;
    border: 1px solid rgba(69, 131, 147, .10);
}

.ai-coach-status-card strong {
    display: block;
    color: var(--teal);
    font-size: 18px;
    font-weight: 950;
}

.ai-coach-status-card span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    margin-top: 2px;
}

.ai-coach-chat-card {
    display: grid;
    gap: 14px;
}

.ai-coach-chat-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ai-coach-chat-head h2 {
    margin: 0 0 4px;
    color: var(--ink);
}

.ai-coach-scope-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px;
    border-radius: 18px;
    background: rgba(255, 243, 200, .65);
    border: 1px solid rgba(229, 203, 144, .58);
    color: #6b5a1f;
    font-size: 13px;
    font-weight: 750;
}

.ai-coach-messages {
    display: grid;
    gap: 12px;
    max-height: min(62vh, 620px);
    overflow-y: auto;
    padding: 4px 2px 6px;
    scroll-behavior: smooth;
}

.ai-coach-welcome-bubble {
    border-radius: 22px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(52, 169, 157, .12), rgba(255, 243, 200, .56));
    border: 1px solid rgba(69, 131, 147, .12);
}

.ai-coach-welcome-bubble p {
    margin: 6px 0 0;
    color: var(--muted);
}

.ai-message {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.ai-message.is-user {
    flex-direction: row-reverse;
}

.ai-message-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: rgba(69, 131, 147, .10);
    color: var(--teal);
}

.ai-message.is-ai .ai-message-avatar {
    background: linear-gradient(135deg, var(--mint), var(--teal));
    color: #ffffff;
}

.ai-message-body {
    max-width: min(82%, 720px);
}

.ai-message-text {
    padding: 13px 14px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid rgba(69, 131, 147, .12);
    color: var(--ink);
    line-height: 1.65;
    box-shadow: 0 8px 20px rgba(69, 131, 147, .07);
    overflow-wrap: anywhere;
}

.ai-message.is-user .ai-message-text {
    background: linear-gradient(135deg, var(--teal), var(--mint));
    color: #ffffff;
    border-color: transparent;
}

.ai-answer-meta {
    display: flex;
    gap: 7px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 7px;
}

.ai-source-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 23px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .04em;
    border: 1px solid rgba(69, 131, 147, .14);
    background: rgba(69, 131, 147, .08);
    color: var(--teal);
}

.ai-source-badge.source-api {
    background: rgba(52, 169, 157, .12);
    color: var(--teal);
}

.ai-source-badge.source-cache {
    background: rgba(255, 243, 200, .88);
    color: #806a23;
}

.ai-source-badge.source-local {
    background: rgba(239, 68, 68, .08);
    color: #b91c1c;
}

.ai-quick-prompts {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.ai-quick-prompts::-webkit-scrollbar {
    display: none;
}

.ai-quick-prompts button {
    flex: 0 0 auto;
    border: 1px solid rgba(69, 131, 147, .16);
    background: rgba(255, 255, 255, .86);
    color: var(--teal);
    border-radius: 999px;
    padding: 9px 12px;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
}

.ai-coach-composer {
    display: grid;
    grid-template-columns: 1fr 48px;
    gap: 8px;
    align-items: end;
    padding: 8px;
    border-radius: 24px;
    background: rgba(69, 131, 147, .06);
    border: 1px solid rgba(69, 131, 147, .13);
}

.ai-coach-composer textarea {
    width: 100%;
    min-height: 52px;
    max-height: 160px;
    border: 0;
    outline: 0;
    resize: vertical;
    background: #ffffff;
    border-radius: 18px;
    padding: 13px 14px;
    color: var(--ink);
    font: inherit;
}

.ai-coach-composer button {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 18px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--mint), var(--teal));
    box-shadow: 0 12px 24px rgba(52, 169, 157, .26);
    cursor: pointer;
}

.ai-history-list {
    display: grid;
    gap: 12px;
}

.ai-history-item {
    padding: 15px;
    border-radius: 22px;
    border: 1px solid rgba(69, 131, 147, .13);
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(69, 131, 147, .07);
}

.ai-history-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}

.ai-history-item h3 {
    margin: 0 0 10px;
    font-size: 16px;
    color: var(--ink);
}

.ai-history-answer {
    color: var(--muted);
    line-height: 1.65;
}

.ai-coach-empty-history {
    text-align: center;
    padding: 32px 12px;
}

.ai-coach-empty-history i {
    font-size: 34px;
    color: var(--teal);
    margin-bottom: 8px;
}

@media (max-width: 620px) {
    .ai-coach-hero {
        flex-direction: column;
    }

    .ai-coach-status-card {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 7px;
    }

    .ai-coach-status-card > div {
        padding: 10px 6px;
        border-radius: 15px;
    }

    .ai-coach-chat-head {
        flex-direction: column;
    }

    .ai-coach-chat-head .btn {
        width: 100%;
    }

    .ai-message-body {
        max-width: calc(100% - 46px);
    }

    .ai-message-text {
        font-size: 14px;
        line-height: 1.58;
    }

    .ai-coach-composer {
        grid-template-columns: 1fr 46px;
    }
}

/* ======================================================
   ACTIVITY CASES - Peserta, Admin, Coach
====================================================== */

.case-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(52, 169, 157, .12);
    color: var(--teal);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.case-hero-card,
.case-admin-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding: 24px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(229, 203, 144, .42), transparent 34%),
        linear-gradient(135deg, #ffffff, #FFF8DE);
    border: 1px solid rgba(69, 131, 147, .16);
    box-shadow: 0 16px 44px rgba(69, 131, 147, .12);
    margin-bottom: 18px;
}

.case-hero-card::after,
.case-admin-hero::after {
    content: "";
    position: absolute;
    right: -34px;
    bottom: -54px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(255, 243, 200, .82);
}

.case-hero-main,
.case-admin-hero-main {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.case-hero-main h1,
.case-admin-hero-main h1 {
    margin: 10px 0 8px;
    color: var(--ink);
    font-size: clamp(30px, 5vw, 46px);
    line-height: 1.02;
    letter-spacing: -.05em;
}

.case-hero-main p,
.case-admin-hero-main p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.case-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.case-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(69, 131, 147, .13);
    color: var(--teal);
    font-size: 12px;
    font-weight: 850;
}

.case-hero-score {
    position: relative;
    z-index: 1;
    flex: 0 0 136px;
    height: 136px;
    display: grid;
    place-items: center;
    text-align: center;
    border-radius: 30px;
    background: linear-gradient(135deg, var(--mint), var(--teal));
    color: #fff;
    box-shadow: 0 16px 34px rgba(52, 169, 157, .28);
}

.case-hero-score strong {
    display: block;
    font-size: 35px;
    line-height: 1;
    letter-spacing: -.06em;
}

.case-hero-score span {
    display: block;
    max-width: 90px;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
}

.case-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.case-stat-grid-peserta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.case-stat-card {
    min-height: 86px;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 14px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid rgba(69, 131, 147, .14);
    box-shadow: 0 10px 28px rgba(69, 131, 147, .08);
}

.case-stat-card strong {
    color: var(--teal);
    font-size: 26px;
    line-height: 1;
    letter-spacing: -.04em;
}

.case-stat-card span {
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

.case-progress-card {
    margin-bottom: 18px;
}

.case-progress-top,
.case-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.case-progress-top strong,
.case-section-heading h2 {
    color: var(--ink);
}

.case-progress-top span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.case-difficulty-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.case-difficulty-summary span {
    padding: 7px 9px;
    border-radius: 999px;
    background: rgba(69, 131, 147, .07);
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

.case-list-peserta {
    display: grid;
    gap: 16px;
}

.case-card-peserta,
.case-form-card,
.case-list-card,
.case-admin-item {
    background: #ffffff;
    border: 1px solid rgba(69, 131, 147, .15);
    box-shadow: 0 12px 34px rgba(69, 131, 147, .10);
}

.case-card-peserta {
    padding: 20px;
    border-radius: 26px;
    scroll-margin-top: 104px;
}

.case-card-peserta.is-answered {
    border-color: rgba(52, 169, 157, .28);
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, rgba(52, 169, 157, .34), rgba(255, 243, 200, .65)) border-box;
}

.case-card-head,
.case-admin-item-top,
.case-admin-actions,
.case-admin-mini-stats,
.ai-answer-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.case-card-head,
.case-admin-item-top {
    justify-content: space-between;
}

.case-difficulty,
.case-indicator,
.case-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
}

.case-difficulty.basic { background: rgba(52, 169, 157, .12); color: var(--teal); }
.case-difficulty.intermediate { background: rgba(229, 203, 144, .36); color: #8a6518; }
.case-difficulty.advanced { background: rgba(239, 68, 68, .10); color: #b91c1c; }
.case-indicator { background: rgba(69, 131, 147, .08); color: var(--teal); }
.case-status.active { background: rgba(52, 169, 157, .12); color: var(--teal); }
.case-status.inactive { background: rgba(107, 122, 120, .12); color: var(--muted); }

.case-number {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: var(--soft);
    border: 1px solid rgba(229, 203, 144, .45);
    color: var(--teal);
    font-weight: 950;
}

.case-card-peserta h2,
.case-admin-item h3 {
    margin: 14px 0 8px;
    color: var(--ink);
    letter-spacing: -.03em;
}

.case-scenario {
    color: var(--ink);
    line-height: 1.72;
}

.case-answer-form {
    margin-top: 16px;
}

.case-option-list {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.case-option {
    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: start;
    gap: 10px;
    padding: 13px;
    border-radius: 18px;
    border: 1px solid rgba(69, 131, 147, .15);
    background: #fff;
    cursor: pointer;
    transition: .18s ease;
}

.case-option:hover,
.case-option.selected {
    border-color: rgba(52, 169, 157, .45);
    background: rgba(52, 169, 157, .06);
    transform: translateY(-1px);
}

.case-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.case-option-letter {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(69, 131, 147, .10);
    color: var(--teal);
    font-weight: 950;
}

.case-option.selected .case-option-letter {
    background: linear-gradient(135deg, var(--mint), var(--teal));
    color: #ffffff;
}

.case-option-text {
    color: var(--ink);
    line-height: 1.5;
    font-weight: 700;
}

.case-feedback-box {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(255, 243, 200, .70), rgba(52, 169, 157, .08));
    border: 1px solid rgba(229, 203, 144, .45);
}

.case-feedback-score {
    min-height: 76px;
    display: grid;
    place-items: center;
    text-align: center;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid rgba(69, 131, 147, .14);
}

.case-feedback-score strong {
    color: var(--teal);
    font-size: 28px;
    line-height: 1;
}

.case-feedback-score span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.case-feedback-box h3 {
    margin: 0 0 6px;
    color: var(--ink);
}

.case-feedback-box p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.case-bottom-action {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.case-empty-state {
    text-align: center;
}

.case-empty-state i {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
    border-radius: 24px;
    background: rgba(52, 169, 157, .12);
    color: var(--teal);
    font-size: 26px;
}

.case-empty-state.compact {
    padding: 30px 18px;
}

.case-admin-layout {
    display: grid;
    grid-template-columns: minmax(320px, .9fr) minmax(420px, 1.1fr);
    gap: 18px;
    align-items: start;
}

.case-form-card,
.case-list-card {
    border-radius: 28px;
    padding: 18px;
}

.case-section-heading span {
    display: block;
    color: var(--teal);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.case-section-heading h2 {
    margin: 3px 0 0;
    letter-spacing: -.04em;
}

.case-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.case-field,
.case-switch {
    display: grid;
    gap: 6px;
}

.case-field.full,
.case-options-editor.full,
.case-switch.full,
.case-form-grid .full {
    grid-column: 1 / -1;
}

.case-field span,
.case-switch span {
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
}

.case-field input,
.case-field select,
.case-field textarea,
.case-filter-bar input,
.case-filter-bar select {
    width: 100%;
    border: 1px solid rgba(69, 131, 147, .18);
    border-radius: 16px;
    padding: 12px 13px;
    background: #fff;
    color: var(--ink);
    outline: none;
}

.case-field textarea {
    min-height: 110px;
    resize: vertical;
}

.case-field input:focus,
.case-field select:focus,
.case-field textarea:focus,
.case-filter-bar input:focus,
.case-filter-bar select:focus {
    border-color: rgba(52, 169, 157, .50);
    box-shadow: 0 0 0 4px rgba(52, 169, 157, .10);
}

.case-options-editor {
    display: grid;
    gap: 10px;
}

.case-option-edit {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 8px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(69, 131, 147, .05);
    border: 1px solid rgba(69, 131, 147, .10);
}

.case-option-edit strong {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--mint), var(--teal));
    color: #fff;
}

.case-option-edit textarea {
    grid-column: 2 / 3;
    min-height: 82px;
}

.case-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255, 243, 200, .50);
    border: 1px solid rgba(229, 203, 144, .45);
}

.case-filter-bar {
    display: grid;
    grid-template-columns: minmax(160px, 1.2fr) minmax(130px, .9fr) minmax(120px, .7fr) minmax(110px, .6fr) auto;
    gap: 8px;
    margin-bottom: 14px;
}

.case-admin-list {
    display: grid;
    gap: 12px;
}

.case-admin-item {
    padding: 15px;
    border-radius: 22px;
}

.case-admin-item.is-inactive {
    opacity: .72;
    background: #f8faf9;
}

.case-admin-item h3 {
    font-size: 18px;
}

.case-admin-mini-stats {
    margin-top: 10px;
}

.case-admin-mini-stats span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border-radius: 999px;
    background: rgba(69, 131, 147, .07);
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
}

.case-admin-actions {
    justify-content: flex-end;
    margin-top: 12px;
}

.case-admin-actions form {
    margin: 0;
}

.btn.danger {
    background: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
}

@media (max-width: 1024px) {
    .case-admin-layout {
        grid-template-columns: 1fr;
    }

    .case-filter-bar {
        grid-template-columns: 1fr 1fr;
    }

    .case-filter-bar .btn {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .case-hero-card,
    .case-admin-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px;
        border-radius: 24px;
    }

    .case-hero-score {
        width: 100%;
        height: auto;
        min-height: 92px;
        grid-template-columns: auto 1fr;
        justify-content: start;
        text-align: left;
        padding: 16px;
        border-radius: 22px;
    }

    .case-hero-score span {
        max-width: none;
        margin-top: 0;
        margin-left: 8px;
    }

    .case-stat-grid,
    .case-stat-grid-peserta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .case-form-grid,
    .case-filter-bar {
        grid-template-columns: 1fr;
    }

    .case-option-edit,
    .case-feedback-box {
        grid-template-columns: 1fr;
    }

    .case-option-edit textarea {
        grid-column: auto;
    }

    .case-bottom-action .btn {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .case-stat-grid,
    .case-stat-grid-peserta {
        gap: 8px;
    }

    .case-stat-card {
        min-height: 76px;
        padding: 11px;
        border-radius: 18px;
    }

    .case-stat-card strong {
        font-size: 22px;
    }

    .case-card-peserta,
    .case-form-card,
    .case-list-card {
        padding: 15px;
        border-radius: 22px;
    }

    .case-option {
        grid-template-columns: 34px 1fr;
        padding: 11px;
    }

    .case-option-letter {
        width: 32px;
        height: 32px;
        border-radius: 12px;
    }
}

/* ======================================================
   ASN Coaching Hub - Admin Cases + Coach Dashboard Pro UI
   Tempel di bagian paling bawah assets/css/app.css
====================================================== */

/* ---------- Admin/Coach Cases Management ---------- */
.cases-manage-pro-page .case-admin-hero-pro {
    align-items: stretch;
    min-height: 210px;
    padding: 26px;
    border-radius: 32px;
    background:
        radial-gradient(circle at 92% 18%, rgba(52, 169, 157, .26), transparent 30%),
        radial-gradient(circle at 72% 92%, rgba(229, 203, 144, .42), transparent 36%),
        linear-gradient(135deg, #ffffff 0%, #FFF8DE 100%);
    border: 1px solid rgba(69, 131, 147, .18);
    box-shadow: 0 18px 48px rgba(69, 131, 147, .14);
}

.cases-manage-pro-page .case-admin-hero-main {
    display: grid;
    align-content: center;
}

.cases-manage-pro-page .case-admin-actions-top {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}

.cases-manage-pro-page .case-admin-hero-visual {
    position: relative;
    z-index: 1;
    width: 166px;
    min-width: 166px;
    border-radius: 34px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    color: #ffffff;
    background:
        linear-gradient(135deg, rgba(52, 169, 157, .94), rgba(69, 131, 147, .98));
    box-shadow: 0 18px 38px rgba(52, 169, 157, .28);
}

.cases-manage-pro-page .case-admin-hero-visual i {
    font-size: 46px;
}

.cases-manage-pro-page .case-admin-hero-visual span {
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.cases-manage-pro-page .case-stat-grid-pro {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.cases-manage-pro-page .case-stat-card.pro {
    position: relative;
    overflow: hidden;
    min-height: 112px;
    place-items: start;
    text-align: left;
    align-content: space-between;
    padding: 16px;
    border-radius: 26px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 14px 34px rgba(69, 131, 147, .10);
}

.cases-manage-pro-page .case-stat-card.pro::after {
    content: "";
    position: absolute;
    right: -24px;
    bottom: -34px;
    width: 96px;
    height: 96px;
    border-radius: 999px;
    background: rgba(255, 243, 200, .9);
}

.cases-manage-pro-page .case-stat-card.pro i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--mint), var(--teal));
    box-shadow: 0 10px 20px rgba(52, 169, 157, .22);
}

.cases-manage-pro-page .case-stat-card.pro.warning i { background: linear-gradient(135deg, #f59e0b, #d97706); }
.cases-manage-pro-page .case-stat-card.pro.success i { background: linear-gradient(135deg, #22c55e, #16a34a); }
.cases-manage-pro-page .case-stat-card.pro.info i { background: linear-gradient(135deg, #458393, #263B3A); }

.cases-manage-pro-page .case-stat-card.pro strong {
    position: relative;
    z-index: 1;
    margin-top: 12px;
    font-size: 30px;
    color: var(--ink);
}

.cases-manage-pro-page .case-stat-card.pro span {
    position: relative;
    z-index: 1;
    color: var(--muted);
}

.cases-manage-pro-page .case-admin-layout-pro {
    grid-template-columns: minmax(360px, 0.95fr) minmax(0, 1.25fr);
    align-items: start;
    gap: 18px;
}

.cases-manage-pro-page .case-form-card,
.cases-manage-pro-page .case-list-card {
    border-radius: 30px;
    border: 1px solid rgba(69, 131, 147, .15);
    box-shadow: 0 18px 46px rgba(69, 131, 147, .12);
}

.cases-manage-pro-page .case-form-card {
    position: sticky;
    top: 92px;
}

.cases-manage-pro-page .case-section-heading-pro {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(69, 131, 147, .12);
}

.cases-manage-pro-page .case-section-heading-pro span {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(52, 169, 157, .10);
    color: var(--teal);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.cases-manage-pro-page .case-section-heading-pro h2 {
    margin: 0;
    color: var(--ink);
    letter-spacing: -.03em;
}

.cases-manage-pro-page .case-section-heading-pro p {
    margin: 6px 0 0;
    color: var(--muted);
    line-height: 1.55;
}

.cases-manage-pro-page .case-form-grid-pro {
    gap: 13px;
}

.cases-manage-pro-page .case-field span,
.cases-manage-pro-page .case-switch span {
    font-weight: 900;
    color: var(--ink);
}

.cases-manage-pro-page .case-field input,
.cases-manage-pro-page .case-field select,
.cases-manage-pro-page .case-field textarea,
.cases-manage-pro-page .case-option-edit input,
.cases-manage-pro-page .case-option-edit textarea,
.cases-manage-pro-page .case-filter-bar-pro input,
.cases-manage-pro-page .case-filter-bar-pro select {
    border-radius: 18px;
    border: 1px solid rgba(69, 131, 147, .18);
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(69, 131, 147, .05);
}

.cases-manage-pro-page .case-options-editor {
    display: grid;
    gap: 11px;
}

.cases-manage-pro-page .case-option-edit {
    padding: 12px;
    border-radius: 20px;
    border: 1px solid rgba(69, 131, 147, .13);
    background: linear-gradient(180deg, #ffffff, rgba(255, 248, 222, .38));
}

.cases-manage-pro-page .case-option-edit strong {
    width: 32px;
    height: 32px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--mint), var(--teal));
}

.cases-manage-pro-page .case-filter-bar-pro {
    grid-template-columns: minmax(180px, 1.4fr) minmax(150px, .9fr) minmax(120px, .65fr) minmax(120px, .65fr) auto auto;
    align-items: center;
    padding: 12px;
    border-radius: 24px;
    background: rgba(255, 248, 222, .54);
    border: 1px solid rgba(69, 131, 147, .11);
}

.cases-manage-pro-page .case-filter-bar-pro label {
    position: relative;
    margin: 0;
}

.cases-manage-pro-page .case-filter-bar-pro label i {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--teal);
}

.cases-manage-pro-page .case-filter-bar-pro label input {
    width: 100%;
    padding-left: 39px;
}

.cases-manage-pro-page .case-difficulty-summary-pro {
    padding: 10px 0 4px;
}

.cases-manage-pro-page .case-difficulty-summary-pro span {
    background: #fff;
    border: 1px solid rgba(69, 131, 147, .12);
    box-shadow: 0 8px 16px rgba(69, 131, 147, .05);
}

.cases-manage-pro-page .case-admin-list-pro {
    display: grid;
    gap: 13px;
    margin-top: 14px;
}

.cases-manage-pro-page .case-admin-item-pro {
    position: relative;
    overflow: hidden;
    padding: 16px;
    border-radius: 24px;
}

.cases-manage-pro-page .case-admin-item-pro::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, var(--mint), var(--teal));
}

.cases-manage-pro-page .case-admin-item-pro.is-inactive {
    opacity: .78;
    background: #f9fafb;
}

.cases-manage-pro-page .case-admin-item-pro h3 {
    margin: 12px 0 7px;
    color: var(--ink);
    letter-spacing: -.02em;
}

.cases-manage-pro-page .case-course-line {
    display: flex;
    gap: 7px;
    align-items: flex-start;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.cases-manage-pro-page .case-admin-mini-stats span {
    background: rgba(69, 131, 147, .07);
    color: var(--muted);
    padding: 7px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 850;
}

.cases-manage-pro-page .case-admin-actions {
    margin-top: 12px;
    justify-content: flex-end;
}

/* ---------- Coach Dashboard ---------- */
.coach-dashboard-pro-page .coach-hero-pro-card {
    align-items: stretch;
    min-height: 220px;
    padding: 26px;
    border-radius: 34px;
    background:
        radial-gradient(circle at 90% 18%, rgba(52,169,157,.24), transparent 32%),
        radial-gradient(circle at 78% 92%, rgba(255,243,200,.80), transparent 38%),
        linear-gradient(135deg, #ffffff, #FFF8DE);
    border: 1px solid rgba(69,131,147,.16);
    box-shadow: 0 18px 48px rgba(69,131,147,.13);
}

.coach-dashboard-pro-page .coach-eyebrow {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(52,169,157,.12);
    color: var(--teal);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.coach-dashboard-pro-page .coach-eyebrow.small {
    margin-bottom: 8px;
}

.coach-dashboard-pro-page .coach-hero-mini-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.coach-dashboard-pro-page .coach-hero-mini-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(69,131,147,.12);
    color: var(--teal);
    font-size: 12px;
    font-weight: 850;
}

.coach-dashboard-pro-page .coach-hero-actions-pro {
    min-width: 190px;
    padding: 14px;
    border-radius: 26px;
    align-self: center;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(69,131,147,.12);
    box-shadow: 0 12px 26px rgba(69,131,147,.08);
}

.coach-dashboard-pro-page .coach-hero-actions-pro .btn {
    width: 100%;
    justify-content: center;
}

.coach-dashboard-pro-page .coach-stat-grid-pro {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.coach-dashboard-pro-page .coach-stat-card.pro {
    min-height: 116px;
    border-radius: 26px;
    background: #ffffff;
    border: 1px solid rgba(69,131,147,.14);
    box-shadow: 0 14px 34px rgba(69,131,147,.10);
}

.coach-dashboard-pro-page .coach-stat-card.pro .coach-stat-icon {
    border-radius: 18px;
}

.coach-dashboard-pro-page .coach-stat-card.pro.info .coach-stat-icon { background: linear-gradient(135deg, #458393, #263B3A); }

.coach-dashboard-pro-page .coach-workbench-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
    margin: 16px 0;
}

.coach-dashboard-pro-page .coach-workbench-card {
    display: grid;
    gap: 6px;
    padding: 16px;
    border-radius: 24px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(69,131,147,.13);
    box-shadow: 0 12px 28px rgba(69,131,147,.08);
    color: var(--ink);
    text-decoration: none;
    transition: .18s ease;
}

.coach-dashboard-pro-page .coach-workbench-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(69,131,147,.12);
}

.coach-dashboard-pro-page .coach-workbench-card i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, var(--mint), var(--teal));
}

.coach-dashboard-pro-page .coach-workbench-card strong {
    color: var(--ink);
    font-size: 15px;
}

.coach-dashboard-pro-page .coach-workbench-card span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.coach-dashboard-pro-page .coach-participants-pro-card {
    border-radius: 32px;
    background: rgba(255,255,255,.90);
    border: 1px solid rgba(69,131,147,.14);
    box-shadow: 0 18px 48px rgba(69,131,147,.10);
}

.coach-dashboard-pro-page .coach-section-head-pro {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(69,131,147,.12);
}

.coach-dashboard-pro-page .coach-toolbar-pro {
    margin-top: 14px;
    padding: 12px;
    border-radius: 24px;
    background: rgba(255,248,222,.55);
    border: 1px solid rgba(69,131,147,.11);
}

.coach-dashboard-pro-page .coach-search-box {
    border-radius: 18px;
}

.coach-dashboard-pro-page .coach-participant-pro-card {
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
    border: 1px solid rgba(69,131,147,.14);
    box-shadow: 0 14px 34px rgba(69,131,147,.09);
}

.coach-dashboard-pro-page .coach-participant-title-row {
    align-items: flex-start;
}

.coach-dashboard-pro-page .coach-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
    white-space: nowrap;
}

.coach-dashboard-pro-page .coach-status-badge.warning { background: rgba(245,158,11,.13); color: #b45309; }
.coach-dashboard-pro-page .coach-status-badge.success { background: rgba(34,197,94,.12); color: #15803d; }
.coach-dashboard-pro-page .coach-status-badge.info { background: rgba(69,131,147,.11); color: var(--teal); }
.coach-dashboard-pro-page .coach-status-badge.danger { background: rgba(239,68,68,.10); color: #b91c1c; }
.coach-dashboard-pro-page .coach-status-badge.muted { background: rgba(107,122,120,.10); color: var(--muted); }

.coach-dashboard-pro-page .coach-participant-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.coach-dashboard-pro-page .coach-path-card {
    border-radius: 22px;
    border: 1px solid rgba(69,131,147,.12);
    background: #fff;
}

.coach-dashboard-pro-page .coach-path-card.has-pending {
    border-color: rgba(245,158,11,.34);
    background: linear-gradient(180deg, #fff, rgba(255,248,222,.68));
}

.coach-dashboard-pro-page .coach-path-card.has-revision {
    border-color: rgba(239,68,68,.20);
}

.coach-dashboard-pro-page .text-danger { color: #b91c1c !important; }

@media (max-width: 1024px) {
    .cases-manage-pro-page .case-admin-layout-pro,
    .cases-manage-pro-page .case-stat-grid-pro,
    .coach-dashboard-pro-page .coach-stat-grid-pro,
    .coach-dashboard-pro-page .coach-workbench-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cases-manage-pro-page .case-form-card {
        position: static;
    }

    .cases-manage-pro-page .case-filter-bar-pro {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 720px) {
    .cases-manage-pro-page .case-admin-hero-pro,
    .coach-dashboard-pro-page .coach-hero-pro-card {
        display: grid;
        padding: 20px;
        border-radius: 26px;
    }

    .cases-manage-pro-page .case-admin-hero-visual {
        display: none;
    }

    .coach-dashboard-pro-page .coach-hero-actions-pro {
        width: 100%;
        min-width: 0;
    }

    .cases-manage-pro-page .case-admin-layout-pro,
    .cases-manage-pro-page .case-stat-grid-pro,
    .coach-dashboard-pro-page .coach-stat-grid-pro,
    .coach-dashboard-pro-page .coach-workbench-grid,
    .coach-dashboard-pro-page .coach-participant-summary,
    .cases-manage-pro-page .case-filter-bar-pro {
        grid-template-columns: 1fr;
    }

    .cases-manage-pro-page .case-admin-actions-top,
    .coach-dashboard-pro-page .coach-hero-mini-meta {
        display: grid;
        grid-template-columns: 1fr;
    }

    .coach-dashboard-pro-page .coach-participant-main,
    .coach-dashboard-pro-page .coach-participant-title-row,
    .coach-dashboard-pro-page .coach-path-head {
        display: grid;
        gap: 10px;
    }

    .coach-dashboard-pro-page .coach-avatar {
        width: 48px;
        height: 48px;
        border-radius: 18px;
    }
}

/* ======================================================
   ACTIVITY CASES FILTER - PROFESSIONAL FORM FIX
   Berlaku untuk /admin/cases.php dan /coach/cases.php
====================================================== */

.acm-filter-card {
    padding: 18px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid rgba(69, 131, 147, .16);
    box-shadow: 0 12px 28px rgba(69, 131, 147, .08);
}

.acm-filter-form {
    display: grid;
    grid-template-columns: minmax(180px, 1.1fr) minmax(260px, 1.8fr) minmax(150px, .8fr) minmax(140px, .8fr) auto;
    align-items: end;
    gap: 14px;
    width: 100%;
}

.acm-filter-form > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.acm-filter-form label {
    display: block;
    margin: 0;
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .01em;
}

.acm-filter-form input[type="search"],
.acm-filter-form input[type="text"],
.acm-filter-form select {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border-radius: 15px;
    border: 1px solid rgba(69, 131, 147, .22);
    background: #ffffff;
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
    outline: none;
    box-shadow: 0 6px 14px rgba(69, 131, 147, .05);
    transition: .18s ease;
}

.acm-filter-form input[type="search"]::placeholder,
.acm-filter-form input[type="text"]::placeholder {
    color: #8a9896;
    font-weight: 600;
}

.acm-filter-form input[type="search"]:focus,
.acm-filter-form input[type="text"]:focus,
.acm-filter-form select:focus {
    border-color: var(--mint);
    box-shadow: 0 0 0 4px rgba(52, 169, 157, .13);
}

.acm-filter-form select {
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--teal) 50%),
        linear-gradient(135deg, var(--teal) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 19px,
        calc(100% - 12px) 19px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 38px;
}

.acm-filter-form .btn,
.acm-filter-form button[type="submit"] {
    height: 46px;
    min-width: 108px;
    padding: 0 18px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 950;
    white-space: nowrap;
    box-shadow: 0 10px 20px rgba(69, 131, 147, .18);
}

/* Tablet */
@media (max-width: 1024px) {
    .acm-filter-form {
        grid-template-columns: 1fr 1fr;
    }

    .acm-filter-form .btn,
    .acm-filter-form button[type="submit"] {
        width: 100%;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .acm-filter-card {
        padding: 15px;
        border-radius: 20px;
    }

    .acm-filter-form {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .acm-filter-form input[type="search"],
    .acm-filter-form input[type="text"],
    .acm-filter-form select,
    .acm-filter-form .btn,
    .acm-filter-form button[type="submit"] {
        height: 48px;
        border-radius: 16px;
        font-size: 14px;
    }
}

/* ======================================================
   ADMIN NAV DROPDOWN - SETTING MENU
====================================================== */

.nav-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.nav-dropdown summary {
    list-style: none;
    cursor: pointer;
    height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
    transition: .2s ease;
    user-select: none;
}

.nav-dropdown summary::-webkit-details-marker {
    display: none;
}

.nav-dropdown summary i {
    font-size: 11px;
    transition: .2s ease;
}

.nav-dropdown[open] summary i {
    transform: rotate(180deg);
}

.nav-dropdown.active summary,
.nav-dropdown summary:hover,
.nav-dropdown[open] summary {
    background: #FFF3C8;
    color: var(--teal);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 150;
    min-width: 220px;
    padding: 10px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid rgba(69, 131, 147, .16);
    box-shadow: 0 18px 42px rgba(38, 59, 58, .16);
    display: grid;
    gap: 6px;
}

.nav-dropdown-menu a {
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 850;
    text-decoration: none;
    transition: .2s ease;
}

.nav-dropdown-menu a i {
    width: 20px;
    color: var(--teal);
    text-align: center;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.active {
    background: rgba(52, 169, 157, .10);
    color: var(--teal);
}

/* Mobile/tablet: dropdown menyatu rapi dengan menu */
@media (max-width: 1024px) {
    .nav-dropdown {
        width: 100%;
        display: block;
    }

    .nav-dropdown summary {
        width: 100%;
        justify-content: space-between;
    }

    .nav-dropdown-menu {
        position: static;
        min-width: 0;
        margin-top: 6px;
        padding: 8px;
        box-shadow: none;
        border-radius: 16px;
        background: rgba(255, 255, 255, .72);
    }
}

/* ======================================================
   COACH REVIEW CHECKLIST
   Paste into /assets/css/app.css
====================================================== */

.coach-review-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 24px;
    border-radius: 26px;
    background:
        radial-gradient(circle at top left, rgba(52,169,157,.16), transparent 36%),
        linear-gradient(135deg, #ffffff, #FFF8DE);
    border: 1px solid rgba(69,131,147,.16);
    box-shadow: 0 14px 34px rgba(69,131,147,.10);
}

.coach-review-hero h1 {
    margin: 6px 0;
    color: var(--ink);
}

.coach-review-summary-card {
    margin-top: 16px;
}

.coach-review-list {
    display: grid;
    gap: 16px;
    margin-top: 18px;
}

.coach-review-step-card {
    border-radius: 24px;
    border: 1px solid rgba(69,131,147,.14);
    box-shadow: 0 10px 28px rgba(69,131,147,.08);
}

.coach-review-step-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.coach-review-block {
    margin-top: 16px;
}

.coach-review-answer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.coach-review-answer-item {
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,243,200,.42);
    border: 1px solid rgba(229,203,144,.32);
}

.coach-review-answer-item strong {
    display: block;
    margin-bottom: 8px;
    color: var(--teal);
    font-size: 13px;
    line-height: 1.4;
}

.coach-review-answer-item p {
    margin: 0;
    color: var(--ink);
    line-height: 1.65;
}

.coach-review-form {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed rgba(69,131,147,.22);
}

.coach-review-form-grid {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 14px;
    align-items: end;
}

.coach-review-check-panel {
    display: grid;
    grid-template-columns: minmax(260px, .85fr) minmax(320px, 1.15fr);
    gap: 14px;
    margin: 14px 0;
}

.coach-review-check-group {
    padding: 16px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid rgba(69,131,147,.14);
    box-shadow: 0 8px 18px rgba(69,131,147,.05);
}

.coach-review-check-group h3 {
    margin: 0 0 4px;
    color: var(--ink);
}

.coach-review-check-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.coach-review-check-list.two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.coach-review-check-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-height: 42px;
    padding: 10px 11px;
    border-radius: 14px;
    background: rgba(52,169,157,.07);
    border: 1px solid rgba(52,169,157,.11);
    cursor: pointer;
    font-size: 13px;
    line-height: 1.4;
}

.coach-review-check-row input {
    margin-top: 2px;
    accent-color: var(--teal);
}

.coach-review-other-field {
    display: block;
    margin-top: 12px;
}

.step-coach-review-card .step-ai-side-icon.coach {
    background: linear-gradient(135deg, var(--sand), var(--mint));
    color: #ffffff;
}

.coach-score-pill {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 14px 0;
    padding: 14px 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(52,169,157,.12), rgba(255,243,200,.72));
    border: 1px solid rgba(52,169,157,.18);
}

.coach-score-pill span {
    color: var(--muted);
    font-weight: 900;
}

.coach-score-pill strong {
    color: var(--teal);
    font-size: 22px;
}

.coach-review-readonly-section {
    margin-top: 14px;
}

.coach-review-readonly-section h3 {
    margin-bottom: 8px;
}

.coach-review-readonly-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.coach-review-readonly-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(52,169,157,.08);
    color: var(--ink);
    font-size: 13px;
    line-height: 1.45;
}

.coach-review-readonly-list li i {
    margin-top: 2px;
    color: var(--teal);
}

@media (max-width: 1024px) {
    .coach-review-hero,
    .coach-review-step-head {
        flex-direction: column;
        align-items: stretch;
    }

    .coach-review-answer-grid,
    .coach-review-form-grid,
    .coach-review-check-panel,
    .coach-review-check-list.two-col {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .coach-review-hero {
        padding: 18px;
        border-radius: 22px;
    }

    .coach-review-check-group,
    .coach-review-answer-item {
        padding: 13px;
    }
}

/* ======================================================
   STEP RUBRICS - COACH MANAGE + PESERTA CARD
====================================================== */

.step-rubric-card,
.rubric-hero,
.rubric-filter-card,
.rubric-form-card,
.rubric-card,
.rubric-empty-state,
.rubric-stat-card {
    border: 1px solid rgba(69, 131, 147, .16);
    box-shadow: 0 12px 30px rgba(69, 131, 147, .08);
}

.step-rubric-head,
.rubric-hero {
    display: flex;
    align-items: center;
    gap: 14px;
}

.step-rubric-icon,
.rubric-hero-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: linear-gradient(135deg, var(--mint), var(--teal));
    color: #fff;
    box-shadow: 0 14px 28px rgba(52, 169, 157, .24);
    font-size: 22px;
}

.step-rubric-head h2,
.rubric-hero h1,
.rubric-section-title h2,
.rubric-card h2 {
    margin: 0;
    color: var(--ink);
}

.step-rubric-head p,
.rubric-hero p,
.rubric-section-title p {
    margin: 5px 0 0;
}

.step-rubric-list {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.step-rubric-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 20px;
    background: linear-gradient(135deg, #fff, rgba(255, 243, 200, .32));
    border: 1px solid rgba(69, 131, 147, .13);
}

.step-rubric-filemark {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(239, 68, 68, .10);
    color: #dc2626;
    font-size: 20px;
}

.step-rubric-info strong {
    display: block;
    color: var(--ink);
    font-size: 15px;
    font-weight: 950;
}

.step-rubric-info p {
    margin: 4px 0;
    color: var(--muted);
    line-height: 1.5;
}

.step-rubric-info small {
    color: #6B7A78;
    font-weight: 750;
}

.step-rubric-empty {
    margin-top: 16px;
    padding: 14px;
    border-radius: 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(255, 243, 200, .48);
    border: 1px solid rgba(229, 203, 144, .38);
    color: var(--ink);
}

.step-rubric-empty i {
    color: var(--teal);
    font-size: 20px;
    margin-top: 2px;
}

.step-rubric-empty strong,
.step-rubric-empty span {
    display: block;
    text-align: left;
}

.step-rubric-empty span {
    margin-top: 3px;
    color: var(--muted);
    line-height: 1.45;
}

.rubric-manage-shell {
    display: grid;
    gap: 18px;
}

.rubric-hero {
    justify-content: space-between;
    background: linear-gradient(135deg, #fff, #FFF3C8);
}

.rubric-kicker,
.rubric-section-title span {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(52, 169, 157, .12);
    color: var(--teal);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.rubric-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.rubric-stat-card {
    display: grid;
    gap: 5px;
    text-align: left;
}

.rubric-stat-card span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

.rubric-stat-card strong {
    color: var(--teal);
    font-size: 28px;
    font-weight: 950;
}

.rubric-layout {
    display: grid;
    grid-template-columns: minmax(320px, 420px) 1fr;
    gap: 18px;
    align-items: start;
}

.rubric-form-card {
    position: sticky;
    top: 92px;
}

.rubric-form input[type="text"],
.rubric-form input[type="file"],
.rubric-form select,
.rubric-form textarea,
.rubric-filter-form input,
.rubric-filter-form select {
    width: 100%;
    border-radius: 15px;
    border: 1px solid rgba(69, 131, 147, .20);
    background: #fff;
    color: var(--ink);
    font-weight: 750;
}

.rubric-filter-form {
    display: grid;
    grid-template-columns: 1.3fr 1.3fr .9fr .8fr auto;
    gap: 12px;
    align-items: end;
}

.rubric-filter-form > div {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.rubric-filter-form label,
.rubric-form label {
    color: var(--ink);
    font-size: 12px;
    font-weight: 950;
}

.rubric-upload-note {
    margin: -6px 0 8px;
    font-size: 12px;
}

.rubric-current-file {
    display: grid;
    gap: 6px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(52, 169, 157, .08);
    border: 1px solid rgba(52, 169, 157, .18);
}

.rubric-current-file a {
    color: var(--teal);
    font-weight: 900;
    text-decoration: none;
}

.rubric-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.rubric-card.is-inactive {
    opacity: .68;
}

.rubric-card-top,
.rubric-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.rubric-step-pill,
.rubric-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
}

.rubric-step-pill {
    background: rgba(52, 169, 157, .12);
    color: var(--teal);
}

.rubric-status-pill.active {
    background: rgba(52, 169, 157, .13);
    color: var(--teal);
}

.rubric-status-pill.inactive {
    background: rgba(107, 122, 120, .12);
    color: #6B7A78;
}

.rubric-course-line {
    line-height: 1.45;
}

.rubric-file-box {
    margin: 12px 0;
    padding: 12px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(239, 68, 68, .06);
    border: 1px solid rgba(239, 68, 68, .12);
}

.rubric-file-box i {
    color: #dc2626;
    font-size: 22px;
}

.rubric-file-box strong,
.rubric-file-box small {
    display: block;
    text-align: left;
}

.rubric-file-box strong {
    color: var(--ink);
    font-weight: 900;
}

.rubric-file-box small {
    color: var(--muted);
}

.rubric-actions {
    justify-content: flex-start;
    margin-top: 12px;
}

.rubric-empty-state {
    text-align: center;
    padding: 34px 20px;
}

.rubric-empty-state i {
    font-size: 42px;
    color: var(--teal);
    margin-bottom: 10px;
}

@media (max-width: 1024px) {
    .rubric-stat-grid,
    .rubric-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rubric-layout {
        grid-template-columns: 1fr;
    }

    .rubric-form-card {
        position: static;
    }

    .rubric-filter-form {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .step-rubric-head,
    .rubric-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .step-rubric-item {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .step-rubric-item .btn {
        width: 100%;
    }

    .rubric-stat-grid,
    .rubric-card-grid,
    .rubric-filter-form {
        grid-template-columns: 1fr;
    }
}

/* ======================================================
   COACH REVIEW - SINGLE STEP PAGE
====================================================== */
.coach-review-single-page .coach-review-shell {
    width: min(980px, calc(100% - 28px));
    margin: 0 auto 40px;
    display: grid;
    gap: 18px;
}

.coach-review-hero,
.coach-review-participant,
.coach-review-step-picker,
.coach-review-current-card,
.coach-review-nav-actions {
    border: 1px solid rgba(69, 131, 147, .14);
    box-shadow: 0 14px 34px rgba(69, 131, 147, .08);
}

.coach-review-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,243,200,.62));
}

.coach-review-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(52, 169, 157, .10);
    color: var(--teal);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.coach-review-hero h1,
.coach-review-current-head h2,
.coach-review-section-head h2,
.coach-review-section-head h3 {
    margin: 8px 0 6px;
    color: var(--ink);
}

.coach-review-hero p,
.coach-review-section-head p,
.coach-review-panel p {
    margin: 0;
    line-height: 1.65;
}

.coach-review-participant {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.coach-review-progress-box {
    min-width: 132px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(52, 169, 157, .10);
    text-align: center;
}

.coach-review-progress-box strong {
    display: block;
    color: var(--teal);
    font-size: 28px;
    font-weight: 950;
    line-height: 1;
}

.coach-review-progress-box span {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
}

.coach-review-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

.coach-review-section-head.compact {
    align-items: flex-start;
}

.coach-review-section-head .progress {
    width: min(300px, 100%);
}

.coach-review-step-tabs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.coach-review-step-tab {
    min-height: 104px;
    padding: 12px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    text-decoration: none;
    color: var(--ink);
    background: #ffffff;
    border: 1px solid rgba(69, 131, 147, .14);
    transition: .2s ease;
}

.coach-review-step-tab:hover,
.coach-review-step-tab.is-selected {
    transform: translateY(-2px);
    border-color: rgba(52, 169, 157, .45);
    box-shadow: 0 14px 26px rgba(69, 131, 147, .13);
}

.coach-review-step-tab.is-selected {
    background: linear-gradient(135deg, rgba(52,169,157,.14), rgba(255,243,200,.56));
}

.coach-review-step-no {
    width: 30px;
    height: 30px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(69, 131, 147, .10);
    color: var(--teal);
    font-size: 13px;
    font-weight: 950;
}

.coach-review-step-name {
    color: var(--ink);
    font-size: 13px;
    font-weight: 950;
    line-height: 1.25;
}

.coach-review-step-tab small {
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.3;
}

.coach-review-current-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(69, 131, 147, .12);
}

.coach-review-empty-step {
    padding: 34px 16px;
    text-align: center;
}

.coach-review-empty-step i {
    width: 62px;
    height: 62px;
    border-radius: 22px;
    display: inline-grid;
    place-items: center;
    margin-bottom: 14px;
    background: rgba(69, 131, 147, .09);
    color: var(--teal);
    font-size: 24px;
}

.coach-review-answer-section,
.coach-review-ai-section,
.coach-review-form {
    margin-top: 18px;
}

.coach-review-answer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.coach-review-answer-box {
    padding: 15px;
    border-radius: 18px;
    background: rgba(255, 243, 200, .48);
    border: 1px solid rgba(229, 203, 144, .42);
}

.coach-review-answer-box strong {
    display: block;
    color: var(--teal);
    margin-bottom: 8px;
    line-height: 1.35;
}

.coach-review-answer-box p {
    margin: 0;
    color: var(--ink);
    line-height: 1.65;
}

.coach-review-ai-box {
    max-height: 430px;
    overflow: auto;
    line-height: 1.75;
}

.coach-review-ai-score {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(69, 131, 147, .10);
    color: var(--teal);
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
}

.coach-review-form-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 14px;
    align-items: stretch;
}

.coach-review-panel {
    padding: 16px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid rgba(69, 131, 147, .14);
    box-shadow: 0 8px 22px rgba(69, 131, 147, .06);
}

.coach-review-panel h3 {
    margin: 0 0 6px;
    color: var(--ink);
}

.coach-review-choice-list {
    margin-top: 12px;
    display: grid;
    gap: 9px;
}

.coach-review-choice-list.focus-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.coach-review-choice-row {
    min-height: 48px;
    padding: 11px 12px;
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: flex-start;
    gap: 10px;
    border-radius: 15px;
    background: rgba(52, 169, 157, .08);
    border: 1px solid rgba(52, 169, 157, .12);
    color: var(--ink);
    cursor: pointer;
    transition: .18s ease;
    text-align: left;
}

.coach-review-choice-row:hover {
    background: rgba(52, 169, 157, .13);
    border-color: rgba(52, 169, 157, .26);
}

.coach-review-choice-row input {
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--teal);
}

.coach-review-choice-text {
    display: block;
    text-align: left;
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 850;
    line-height: 1.35;
}

.coach-review-radio-row {
    min-height: 54px;
}

.coach-review-other-label {
    display: grid;
    gap: 7px;
    margin-top: 12px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
}

.coach-review-score-note-grid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: minmax(180px, .42fr) minmax(0, 1fr);
    gap: 14px;
}

.coach-review-score-note-grid label {
    display: grid;
    gap: 7px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
}

.coach-review-nav-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

@media (max-width: 980px) {
    .coach-review-step-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .coach-review-form-grid,
    .coach-review-score-note-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .coach-review-single-page .coach-review-shell {
        width: min(100% - 18px, 560px);
    }

    .coach-review-hero,
    .coach-review-participant,
    .coach-review-current-head,
    .coach-review-section-head,
    .coach-review-nav-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .coach-review-step-tabs {
        grid-template-columns: 1fr 1fr;
    }

    .coach-review-answer-grid,
    .coach-review-choice-list.focus-list {
        grid-template-columns: 1fr;
    }

    .coach-review-ai-box {
        max-height: 360px;
    }
}

/* ======================================================
   STEP INSPIRATIONS - Coach Upload & Peserta View
====================================================== */

.step-inspiration-card,
.my-inspiration-hero,
.inspiration-manage-hero {
    border: 1px solid rgba(69, 131, 147, .16);
    box-shadow: 0 14px 34px rgba(69, 131, 147, .10);
}

.step-inspiration-card {
    margin-bottom: 18px;
    background:
        radial-gradient(circle at top left, rgba(52, 169, 157, .14), transparent 32%),
        #ffffff;
}

.step-inspiration-head,
.my-inspiration-hero,
.inspiration-manage-hero,
.step-inspiration-body,
.my-inspiration-note,
.my-inspiration-video-header {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.step-inspiration-icon,
.my-inspiration-hero-icon,
.inspiration-hero-icon {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    color: #ffffff;
    font-size: 22px;
    background: linear-gradient(135deg, var(--mint), var(--teal));
    box-shadow: 0 12px 24px rgba(52, 169, 157, .24);
}

.step-inspiration-body {
    margin: 16px 0;
    align-items: center;
    justify-content: space-between;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 243, 200, .42);
    border: 1px solid rgba(229, 203, 144, .35);
}

.step-inspiration-summary {
    display: grid;
    gap: 2px;
}

.step-inspiration-summary strong {
    color: var(--teal);
    font-size: 28px;
    line-height: 1;
}

.step-inspiration-summary span {
    color: var(--muted);
    font-weight: 800;
    font-size: 12px;
}

.my-inspiration-pills,
.my-inspiration-file-meta,
.inspiration-video-top,
.inspiration-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.my-inspiration-pills span,
.my-inspiration-file-meta span,
.inspiration-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(69, 131, 147, .08);
    color: var(--teal);
    font-weight: 850;
    font-size: 12px;
}

.inspiration-badge.active { background: rgba(52, 169, 157, .14); color: var(--teal); }
.inspiration-badge.inactive { background: rgba(239, 68, 68, .10); color: #b91c1c; }

.my-inspiration-note {
    align-items: center;
    background: #FFFDF4;
}

.my-inspiration-note > i {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: var(--teal);
    background: #FFF3C8;
}

.my-inspiration-video-list,
.inspiration-card-grid {
    display: grid;
    gap: 16px;
}

.my-inspiration-video-card,
.inspiration-video-card {
    overflow: hidden;
}

.inspiration-number {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: #ffffff;
    font-weight: 950;
    background: linear-gradient(135deg, var(--mint), var(--teal));
}

.my-inspiration-video-frame,
.inspiration-video-frame {
    margin: 14px 0;
    border-radius: 20px;
    overflow: hidden;
    background: #101827;
    border: 1px solid rgba(69, 131, 147, .16);
}

.my-inspiration-video-frame video,
.inspiration-video-frame video {
    width: 100%;
    max-height: 460px;
    display: block;
    background: #101827;
}

.my-inspiration-description {
    padding: 14px;
    border-radius: 16px;
    background: rgba(69, 131, 147, .06);
    color: var(--ink);
    line-height: 1.65;
}

.my-inspiration-actions { margin-top: 16px; }

.step-inspiration-manage-shell,
.my-inspiration-shell {
    display: grid;
    gap: 16px;
}

.inspiration-manage-hero {
    align-items: center;
    justify-content: space-between;
}

.inspiration-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.inspiration-stat-card {
    display: grid;
    gap: 4px;
}

.inspiration-stat-card span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

.inspiration-stat-card strong {
    color: var(--teal);
    font-size: 30px;
    line-height: 1;
}

.inspiration-manage-layout {
    display: grid;
    grid-template-columns: minmax(320px, 390px) 1fr;
    gap: 16px;
    align-items: start;
}

.inspiration-form-card {
    position: sticky;
    top: 92px;
}

.inspiration-section-title span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.inspiration-section-title h2 { margin: 4px 0 6px; }

.inspiration-two-col {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 12px;
}

.inspiration-current-video {
    padding: 12px;
    border-radius: 16px;
    background: rgba(52, 169, 157, .08);
    border: 1px solid rgba(52, 169, 157, .16);
}

.inspiration-filter-card { margin-bottom: 16px; }

.inspiration-filter-form {
    display: grid;
    grid-template-columns: 1.4fr 1.2fr .8fr auto;
    gap: 12px;
    align-items: end;
}

.inspiration-filter-form > div {
    display: grid;
    gap: 6px;
}

.inspiration-filter-form input,
.inspiration-filter-form select {
    width: 100%;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(69, 131, 147, .22);
    padding: 0 12px;
    font-weight: 750;
}

.inspiration-video-card.is-inactive { opacity: .72; }

.inspiration-video-body h2 { margin-top: 8px; }

.inspiration-actions {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(69, 131, 147, .12);
}

.inspiration-empty-state {
    text-align: center;
    padding: 30px 20px;
}

.inspiration-empty-state > i {
    font-size: 38px;
    color: var(--teal);
    margin-bottom: 10px;
}

@media (max-width: 1024px) {
    .inspiration-manage-layout {
        grid-template-columns: 1fr;
    }
    .inspiration-form-card {
        position: static;
    }
    .inspiration-filter-form {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .step-inspiration-head,
    .my-inspiration-hero,
    .inspiration-manage-hero,
    .step-inspiration-body,
    .my-inspiration-note,
    .my-inspiration-video-header {
        flex-direction: column;
    }
    .inspiration-stat-grid {
        grid-template-columns: 1fr;
    }
    .inspiration-filter-form,
    .inspiration-two-col {
        grid-template-columns: 1fr;
    }
    .step-inspiration-icon,
    .my-inspiration-hero-icon,
    .inspiration-hero-icon {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
        border-radius: 18px;
    }
}


/* YouTube / Upload source selector */
.inspiration-source-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 6px 0 12px;
}

.inspiration-source-choice label {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(69, 131, 147, .18);
    background: #ffffff;
    color: var(--ink);
    font-weight: 900;
    cursor: pointer;
}

.inspiration-source-choice input {
    width: auto;
    height: auto;
    accent-color: var(--teal);
}

.inspiration-source-choice i.fa-youtube,
.inspiration-source-choice .fa-youtube {
    color: #dc2626;
}

.inspiration-media-input {
    margin-top: 10px;
}

.my-inspiration-video-frame iframe,
.inspiration-video-frame iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 240px;
    display: block;
    border: 0;
    background: #101827;
}

@media (max-width: 640px) {
    .inspiration-source-choice {
        grid-template-columns: 1fr;
    }

    .my-inspiration-video-frame iframe,
    .inspiration-video-frame iframe {
        min-height: 190px;
    }
}

/* ======================================================
   PESERTA MY INSPIRATION - THUMBNAIL FULLSCREEN PLAYER
====================================================== */

.peserta-my-inspiration-fullscreen-page .my-inspiration-video-card {
    overflow: hidden;
}

.my-inspiration-video-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 14px 0;
    padding: 0;
    display: block;
    overflow: hidden;
    border: 0;
    border-radius: 22px;
    background: #101827;
    box-shadow: 0 14px 34px rgba(38, 59, 58, .18);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.my-inspiration-video-thumb img,
.my-inspiration-video-thumb video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: #101827;
    transition: transform .25s ease, filter .25s ease;
}

.my-inspiration-video-thumb:hover img,
.my-inspiration-video-thumb:hover video {
    transform: scale(1.025);
    filter: brightness(.86);
}

.my-inspiration-thumb-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    gap: 8px;
    align-content: center;
    color: #ffffff;
    background:
        linear-gradient(to bottom, rgba(16, 24, 39, .08), rgba(16, 24, 39, .56)),
        radial-gradient(circle at center, rgba(52, 169, 157, .22), transparent 42%);
}

.my-inspiration-play-circle {
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mint), var(--teal));
    border: 5px solid rgba(255, 255, 255, .92);
    box-shadow: 0 18px 42px rgba(16, 24, 39, .32);
    color: #ffffff;
    font-size: 26px;
}

.my-inspiration-play-circle i {
    transform: translateX(2px);
}

.my-inspiration-thumb-overlay small {
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: var(--teal);
    font-weight: 950;
    font-size: 12px;
    box-shadow: 0 8px 18px rgba(16, 24, 39, .18);
}

.inspiration-player-open {
    overflow: hidden;
}

.inspiration-fullscreen-player {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    padding: clamp(10px, 2vw, 24px);
    background: #050b14;
}

.inspiration-fullscreen-player.is-open {
    display: grid;
    place-items: center;
}

.inspiration-fullscreen-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top left, rgba(52, 169, 157, .18), transparent 36%),
        rgba(5, 11, 20, .96);
}

.inspiration-fullscreen-dialog {
    position: relative;
    z-index: 2;
    width: min(1200px, 100%);
    height: min(780px, 100%);
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    border-radius: 24px;
    background: #08111f;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 26px 70px rgba(0, 0, 0, .45);
}

.inspiration-fullscreen-head {
    min-height: 64px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #ffffff;
    background: rgba(255, 255, 255, .06);
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.inspiration-fullscreen-head span {
    display: block;
    color: rgba(255, 255, 255, .62);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.inspiration-fullscreen-head h2 {
    margin: 2px 0 0;
    color: #ffffff;
    font-size: clamp(16px, 2vw, 22px);
    line-height: 1.25;
}

.inspiration-fullscreen-close {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
    cursor: pointer;
    transition: .18s ease;
}

.inspiration-fullscreen-close:hover {
    background: rgba(255, 255, 255, .20);
    transform: scale(1.04);
}

.inspiration-fullscreen-body {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid;
    place-items: center;
    background: #000000;
}

.inspiration-fullscreen-body iframe,
.inspiration-fullscreen-body video {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #000000;
}

.inspiration-fullscreen-body video {
    object-fit: contain;
}

@media (max-width: 720px) {
    .my-inspiration-play-circle {
        width: 64px;
        height: 64px;
        font-size: 22px;
        border-width: 4px;
    }

    .my-inspiration-thumb-overlay small {
        font-size: 11px;
    }

    .inspiration-fullscreen-player {
        padding: 0;
    }

    .inspiration-fullscreen-dialog {
        width: 100%;
        height: 100%;
        border-radius: 0;
        border: 0;
    }

    .inspiration-fullscreen-head {
        min-height: 58px;
        padding: 10px 12px;
    }

    .inspiration-fullscreen-close {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }
}

/* ======================================================
   PRAKTIK BAIK 30 HARI - PESERTA + COACH
====================================================== */

.step-practices-card,
.practice-hero,
.practice-instruction-card,
.coach-review-practices-section {
    position: relative;
    overflow: hidden;
}

.step-practices-card::before,
.practice-hero::before,
.coach-review-practices-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 92% 8%, rgba(52,169,157,.16), transparent 34%);
    pointer-events: none;
}

.step-practices-head,
.practice-hero,
.practice-instruction-card,
.practice-day-head,
.practice-review-day-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.step-practices-head,
.practice-hero-main,
.practice-instruction-card > div,
.coach-review-practices-section > * {
    position: relative;
    z-index: 1;
}

.step-practices-icon,
.practice-hero .practice-kicker i {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: inline-grid;
    place-items: center;
    background: linear-gradient(135deg, var(--mint), var(--teal));
    color: #fff;
    box-shadow: 0 12px 26px rgba(52,169,157,.22);
}

.step-practices-summary-grid,
.practice-stats-grid,
.practice-review-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.step-practices-summary-grid > div,
.practice-stat-card,
.practice-review-summary-grid > div {
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,243,200,.58);
    border: 1px solid rgba(69,131,147,.14);
    text-align: left;
}

.step-practices-summary-grid strong,
.practice-stat-card strong,
.practice-review-summary-grid strong {
    display: block;
    color: var(--teal);
    font-size: 24px;
    font-weight: 950;
    line-height: 1;
}

.step-practices-summary-grid span,
.practice-stat-card span,
.practice-review-summary-grid span {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.step-practices-empty,
.practice-coach-note-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background: #fff8de;
    border: 1px solid rgba(229,203,144,.42);
}

.practice-page-shell {
    display: grid;
    gap: 16px;
}

.practice-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--teal);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.practice-hero h1 {
    margin: 10px 0 8px;
    font-size: clamp(28px, 5vw, 42px);
    letter-spacing: -.04em;
}

.practice-meta-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.practice-meta-pills span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(69,131,147,.14);
    color: var(--ink);
    font-size: 12px;
    font-weight: 850;
}

.practice-ring {
    flex: 0 0 auto;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(closest-side, #fff 72%, transparent 74% 100%),
        conic-gradient(var(--mint) var(--progress), rgba(69,131,147,.12) 0);
    box-shadow: 0 12px 28px rgba(69,131,147,.12);
}

.practice-ring strong {
    color: var(--teal);
    font-size: 26px;
    font-weight: 950;
}

.practice-ring small {
    margin-top: -38px;
    color: var(--muted);
    font-weight: 850;
}

.practice-days-grid,
.practice-review-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.practice-day-card,
.practice-review-day {
    border: 1px solid rgba(69,131,147,.14);
}

.practice-day-card.is-filled,
.practice-review-day.is-filled {
    border-color: rgba(52,169,157,.30);
    box-shadow: 0 12px 26px rgba(52,169,157,.08);
}

.practice-day-head span:first-child,
.practice-review-day-head span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.practice-day-head strong {
    display: block;
    color: var(--ink);
    font-size: 28px;
    font-weight: 950;
    line-height: 1;
}

.practice-day-status {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
}

.practice-day-status.filled {
    background: rgba(52,169,157,.13);
    color: var(--teal);
}

.practice-day-status.empty {
    background: rgba(107,122,120,.09);
    color: var(--muted);
}

.practice-existing-box,
.practice-review-text {
    margin-top: 12px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(69,131,147,.05);
    color: var(--ink);
    line-height: 1.55;
}

.practice-day-form,
.practice-review-form {
    display: grid;
    gap: 11px;
    margin-top: 14px;
}

.practice-day-form label,
.practice-review-form label {
    display: grid;
    gap: 6px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
    text-align: left;
}

.practice-day-form textarea,
.practice-review-form textarea,
.practice-review-form select,
.practice-day-form input[type="file"] {
    width: 100%;
    border-radius: 16px;
    border: 1px solid rgba(69,131,147,.20);
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-weight: 650;
    outline: none;
}

.practice-day-form textarea,
.practice-review-form textarea {
    padding: 12px 13px;
    resize: vertical;
}

.practice-review-form select,
.practice-day-form input[type="file"] {
    min-height: 44px;
    padding: 10px 12px;
}

.practice-delete-media {
    display: flex !important;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 9px !important;
    color: var(--muted) !important;
    font-weight: 800 !important;
}

.practice-media-wrap {
    display: grid;
    gap: 7px;
    margin-top: 10px;
}

.practice-media-preview {
    display: block;
    width: 100%;
    max-height: 220px;
    border-radius: 16px;
    overflow: hidden;
    object-fit: cover;
    border: 1px solid rgba(69,131,147,.14);
    background: #0f172a;
}

.practice-media-preview img,
img.practice-media-preview {
    width: 100%;
    height: 190px;
    object-fit: cover;
}

video.practice-media-preview {
    width: 100%;
    height: auto;
}

.practice-coach-note-box {
    margin-top: 12px;
    background: linear-gradient(135deg, rgba(255,243,200,.86), rgba(52,169,157,.08));
}

.practice-coach-emoji {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #fff;
    font-size: 23px;
    box-shadow: 0 8px 18px rgba(69,131,147,.10);
}

.coach-review-practices-section {
    margin-top: 18px;
    padding: 18px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid rgba(69,131,147,.14);
}

.practice-review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.practice-review-day {
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,.92);
}

.practice-review-day.is-empty {
    opacity: .72;
    background: rgba(107,122,120,.04);
}

.practice-review-day-head strong {
    font-size: 16px;
    font-weight: 950;
    color: var(--ink);
}

.practice-review-day-head span {
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(69,131,147,.08);
    color: var(--muted);
}

@media (max-width: 1024px) {
    .practice-days-grid,
    .practice-review-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .practice-hero,
    .practice-instruction-card,
    .step-practices-head {
        flex-direction: column;
    }

    .step-practices-summary-grid,
    .practice-stats-grid,
    .practice-review-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .practice-days-grid,
    .practice-review-grid {
        grid-template-columns: 1fr;
    }

    .practice-ring {
        width: 104px;
        height: 104px;
    }
}

/* ======================================================
   PRAKTIK BAIK 30 HARI - PESERTA + COACH
====================================================== */

.step-practices-card,
.practice-hero,
.practice-instruction-card,
.coach-review-practices-section {
    position: relative;
    overflow: hidden;
}

.step-practices-card::before,
.practice-hero::before,
.coach-review-practices-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 92% 8%, rgba(52,169,157,.16), transparent 34%);
    pointer-events: none;
}

.step-practices-head,
.practice-hero,
.practice-instruction-card,
.practice-day-head,
.practice-review-day-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.step-practices-head,
.practice-hero-main,
.practice-instruction-card > div,
.coach-review-practices-section > * {
    position: relative;
    z-index: 1;
}

.step-practices-icon,
.practice-hero .practice-kicker i {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: inline-grid;
    place-items: center;
    background: linear-gradient(135deg, var(--mint), var(--teal));
    color: #fff;
    box-shadow: 0 12px 26px rgba(52,169,157,.22);
}

.step-practices-summary-grid,
.practice-stats-grid,
.practice-review-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.step-practices-summary-grid > div,
.practice-stat-card,
.practice-review-summary-grid > div {
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,243,200,.58);
    border: 1px solid rgba(69,131,147,.14);
    text-align: left;
}

.step-practices-summary-grid strong,
.practice-stat-card strong,
.practice-review-summary-grid strong {
    display: block;
    color: var(--teal);
    font-size: 24px;
    font-weight: 950;
    line-height: 1;
}

.step-practices-summary-grid span,
.practice-stat-card span,
.practice-review-summary-grid span {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.step-practices-empty,
.practice-coach-note-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background: #fff8de;
    border: 1px solid rgba(229,203,144,.42);
}

.practice-page-shell {
    display: grid;
    gap: 16px;
}

.practice-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--teal);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.practice-hero h1 {
    margin: 10px 0 8px;
    font-size: clamp(28px, 5vw, 42px);
    letter-spacing: -.04em;
}

.practice-meta-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.practice-meta-pills span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(69,131,147,.14);
    color: var(--ink);
    font-size: 12px;
    font-weight: 850;
}

.practice-ring {
    flex: 0 0 auto;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(closest-side, #fff 72%, transparent 74% 100%),
        conic-gradient(var(--mint) var(--progress), rgba(69,131,147,.12) 0);
    box-shadow: 0 12px 28px rgba(69,131,147,.12);
}

.practice-ring strong {
    color: var(--teal);
    font-size: 26px;
    font-weight: 950;
}

.practice-ring small {
    margin-top: -38px;
    color: var(--muted);
    font-weight: 850;
}

.practice-days-grid,
.practice-review-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.practice-day-card,
.practice-review-day {
    border: 1px solid rgba(69,131,147,.14);
}

.practice-day-card.is-filled,
.practice-review-day.is-filled {
    border-color: rgba(52,169,157,.30);
    box-shadow: 0 12px 26px rgba(52,169,157,.08);
}

.practice-day-head span:first-child,
.practice-review-day-head span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.practice-day-head strong {
    display: block;
    color: var(--ink);
    font-size: 28px;
    font-weight: 950;
    line-height: 1;
}

.practice-day-status {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
}

.practice-day-status.filled {
    background: rgba(52,169,157,.13);
    color: var(--teal);
}

.practice-day-status.empty {
    background: rgba(107,122,120,.09);
    color: var(--muted);
}

.practice-existing-box,
.practice-review-text {
    margin-top: 12px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(69,131,147,.05);
    color: var(--ink);
    line-height: 1.55;
}

.practice-day-form,
.practice-review-form {
    display: grid;
    gap: 11px;
    margin-top: 14px;
}

.practice-day-form label,
.practice-review-form label {
    display: grid;
    gap: 6px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
    text-align: left;
}

.practice-day-form textarea,
.practice-review-form textarea,
.practice-review-form select,
.practice-day-form input[type="file"] {
    width: 100%;
    border-radius: 16px;
    border: 1px solid rgba(69,131,147,.20);
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-weight: 650;
    outline: none;
}

.practice-day-form textarea,
.practice-review-form textarea {
    padding: 12px 13px;
    resize: vertical;
}

.practice-review-form select,
.practice-day-form input[type="file"] {
    min-height: 44px;
    padding: 10px 12px;
}

.practice-delete-media {
    display: flex !important;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 9px !important;
    color: var(--muted) !important;
    font-weight: 800 !important;
}

.practice-media-wrap {
    display: grid;
    gap: 7px;
    margin-top: 10px;
}

.practice-media-preview {
    display: block;
    width: 100%;
    max-height: 220px;
    border-radius: 16px;
    overflow: hidden;
    object-fit: cover;
    border: 1px solid rgba(69,131,147,.14);
    background: #0f172a;
}

.practice-media-preview img,
img.practice-media-preview {
    width: 100%;
    height: 190px;
    object-fit: cover;
}

video.practice-media-preview {
    width: 100%;
    height: auto;
}

.practice-coach-note-box {
    margin-top: 12px;
    background: linear-gradient(135deg, rgba(255,243,200,.86), rgba(52,169,157,.08));
}

.practice-coach-emoji {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #fff;
    font-size: 23px;
    box-shadow: 0 8px 18px rgba(69,131,147,.10);
}

.coach-review-practices-section {
    margin-top: 18px;
    padding: 18px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid rgba(69,131,147,.14);
}

.practice-review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.practice-review-day {
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,.92);
}

.practice-review-day.is-empty {
    opacity: .72;
    background: rgba(107,122,120,.04);
}

.practice-review-day-head strong {
    font-size: 16px;
    font-weight: 950;
    color: var(--ink);
}

.practice-review-day-head span {
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(69,131,147,.08);
    color: var(--muted);
}

@media (max-width: 1024px) {
    .practice-days-grid,
    .practice-review-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .practice-hero,
    .practice-instruction-card,
    .step-practices-head {
        flex-direction: column;
    }

    .step-practices-summary-grid,
    .practice-stats-grid,
    .practice-review-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .practice-days-grid,
    .practice-review-grid {
        grid-template-columns: 1fr;
    }

    .practice-ring {
        width: 104px;
        height: 104px;
    }
}

/* ======================================================
   PRAKTIK BAIK - OUTPUT MINGGUAN 5 MINGGU
====================================================== */
.practice-weekly-output {
    display: grid;
    gap: 16px;
}

.practice-week-progress-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 8px 0 4px;
}

.practice-week-progress-grid > div {
    padding: 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 243, 200, .72), rgba(255, 255, 255, .92));
    border: 1px solid rgba(69, 131, 147, .14);
}

.practice-week-progress-grid strong {
    display: block;
    color: var(--teal);
    font-size: 22px;
    font-weight: 950;
    line-height: 1;
}

.practice-week-progress-grid span {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.practice-week-list,
.practice-week-review-list {
    display: grid;
    gap: 14px;
}

.practice-week-card,
.practice-week-review-card,
.practice-final-impact-card,
.practice-submit-card {
    padding: 16px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid rgba(69, 131, 147, .16);
    box-shadow: 0 10px 24px rgba(69, 131, 147, .07);
}

.practice-week-card.is-locked,
.practice-week-review-card.is-empty {
    background: rgba(255,255,255,.68);
    border-style: dashed;
}

.practice-week-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.practice-week-head span {
    display: inline-flex;
    align-items: center;
    color: var(--teal);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.practice-week-head h3 {
    margin: 4px 0 3px;
    color: var(--ink);
    font-size: 18px;
    line-height: 1.2;
}

.practice-week-head p {
    margin: 0;
}

.practice-week-head > strong {
    flex: 0 0 auto;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(52, 169, 157, .10);
    color: var(--teal);
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
}

.practice-week-form {
    display: grid;
    gap: 12px;
}

.practice-week-form label,
.practice-week-coach-form label {
    display: grid;
    gap: 7px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
    text-align: left;
}

.practice-week-form textarea,
.practice-week-coach-form textarea {
    width: 100%;
    border-radius: 16px;
    border: 1px solid rgba(69, 131, 147, .22);
    padding: 13px 14px;
    color: var(--ink);
    background: #fff;
    font-size: 14px;
    line-height: 1.55;
    outline: none;
    resize: vertical;
    box-shadow: 0 6px 14px rgba(69, 131, 147, .05);
}

.practice-week-form textarea:focus,
.practice-week-coach-form textarea:focus {
    border-color: var(--mint);
    box-shadow: 0 0 0 4px rgba(52, 169, 157, .13);
}

.practice-week-form textarea[readonly] {
    background: rgba(69, 131, 147, .05);
}

.practice-week-ai-box,
.practice-week-coach-box {
    margin-top: 12px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(52, 169, 157, .08);
    border: 1px solid rgba(52, 169, 157, .16);
    text-align: left;
}

.practice-week-coach-box {
    background: rgba(255, 243, 200, .62);
    border-color: rgba(229, 203, 144, .42);
}

.practice-week-ai-box strong,
.practice-week-coach-box strong {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--teal);
    margin-bottom: 8px;
}

.practice-week-coach-form {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(69, 131, 147, .12);
}

.practice-final-impact-box {
    margin-top: 14px;
}

.practice-submit-card {
    display: grid;
    grid-template-columns: 1fr minmax(180px, 260px);
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, rgba(52, 169, 157, .10), rgba(255, 243, 200, .66));
}

.practice-submit-card h3 {
    margin: 0 0 4px;
}

.step-ai-actions.compact {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 760px) {
    .practice-week-progress-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .practice-submit-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 460px) {
    .practice-week-progress-grid {
        grid-template-columns: 1fr;
    }

    .practice-week-head {
        flex-direction: column;
        align-items: stretch;
    }

    .practice-week-head > strong {
        width: fit-content;
    }
}

/* ======================================================
   PRAKTIK BAIK 30 HARI - PESERTA + COACH
====================================================== */

.step-practices-card,
.practice-hero,
.practice-instruction-card,
.coach-review-practices-section {
    position: relative;
    overflow: hidden;
}

.step-practices-card::before,
.practice-hero::before,
.coach-review-practices-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 92% 8%, rgba(52,169,157,.16), transparent 34%);
    pointer-events: none;
}

.step-practices-head,
.practice-hero,
.practice-instruction-card,
.practice-day-head,
.practice-review-day-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.step-practices-head,
.practice-hero-main,
.practice-instruction-card > div,
.coach-review-practices-section > * {
    position: relative;
    z-index: 1;
}

.step-practices-icon,
.practice-hero .practice-kicker i {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: inline-grid;
    place-items: center;
    background: linear-gradient(135deg, var(--mint), var(--teal));
    color: #fff;
    box-shadow: 0 12px 26px rgba(52,169,157,.22);
}

.step-practices-summary-grid,
.practice-stats-grid,
.practice-review-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.step-practices-summary-grid > div,
.practice-stat-card,
.practice-review-summary-grid > div {
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,243,200,.58);
    border: 1px solid rgba(69,131,147,.14);
    text-align: left;
}

.step-practices-summary-grid strong,
.practice-stat-card strong,
.practice-review-summary-grid strong {
    display: block;
    color: var(--teal);
    font-size: 24px;
    font-weight: 950;
    line-height: 1;
}

.step-practices-summary-grid span,
.practice-stat-card span,
.practice-review-summary-grid span {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.step-practices-empty,
.practice-coach-note-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background: #fff8de;
    border: 1px solid rgba(229,203,144,.42);
}

.practice-page-shell {
    display: grid;
    gap: 16px;
}

.practice-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--teal);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.practice-hero h1 {
    margin: 10px 0 8px;
    font-size: clamp(28px, 5vw, 42px);
    letter-spacing: -.04em;
}

.practice-meta-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.practice-meta-pills span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(69,131,147,.14);
    color: var(--ink);
    font-size: 12px;
    font-weight: 850;
}

.practice-ring {
    flex: 0 0 auto;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(closest-side, #fff 72%, transparent 74% 100%),
        conic-gradient(var(--mint) var(--progress), rgba(69,131,147,.12) 0);
    box-shadow: 0 12px 28px rgba(69,131,147,.12);
}

.practice-ring strong {
    color: var(--teal);
    font-size: 26px;
    font-weight: 950;
}

.practice-ring small {
    margin-top: -38px;
    color: var(--muted);
    font-weight: 850;
}

.practice-days-grid,
.practice-review-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.practice-day-card,
.practice-review-day {
    border: 1px solid rgba(69,131,147,.14);
}

.practice-day-card.is-filled,
.practice-review-day.is-filled {
    border-color: rgba(52,169,157,.30);
    box-shadow: 0 12px 26px rgba(52,169,157,.08);
}

.practice-day-head span:first-child,
.practice-review-day-head span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.practice-day-head strong {
    display: block;
    color: var(--ink);
    font-size: 28px;
    font-weight: 950;
    line-height: 1;
}

.practice-day-status {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
}

.practice-day-status.filled {
    background: rgba(52,169,157,.13);
    color: var(--teal);
}

.practice-day-status.empty {
    background: rgba(107,122,120,.09);
    color: var(--muted);
}

.practice-existing-box,
.practice-review-text {
    margin-top: 12px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(69,131,147,.05);
    color: var(--ink);
    line-height: 1.55;
}

.practice-day-form,
.practice-review-form {
    display: grid;
    gap: 11px;
    margin-top: 14px;
}

.practice-day-form label,
.practice-review-form label {
    display: grid;
    gap: 6px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
    text-align: left;
}

.practice-day-form textarea,
.practice-review-form textarea,
.practice-review-form select,
.practice-day-form input[type="file"] {
    width: 100%;
    border-radius: 16px;
    border: 1px solid rgba(69,131,147,.20);
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-weight: 650;
    outline: none;
}

.practice-day-form textarea,
.practice-review-form textarea {
    padding: 12px 13px;
    resize: vertical;
}

.practice-review-form select,
.practice-day-form input[type="file"] {
    min-height: 44px;
    padding: 10px 12px;
}

.practice-delete-media {
    display: flex !important;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 9px !important;
    color: var(--muted) !important;
    font-weight: 800 !important;
}

.practice-media-wrap {
    display: grid;
    gap: 7px;
    margin-top: 10px;
}

.practice-media-preview {
    display: block;
    width: 100%;
    max-height: 220px;
    border-radius: 16px;
    overflow: hidden;
    object-fit: cover;
    border: 1px solid rgba(69,131,147,.14);
    background: #0f172a;
}

.practice-media-preview img,
img.practice-media-preview {
    width: 100%;
    height: 190px;
    object-fit: cover;
}

video.practice-media-preview {
    width: 100%;
    height: auto;
}

.practice-coach-note-box {
    margin-top: 12px;
    background: linear-gradient(135deg, rgba(255,243,200,.86), rgba(52,169,157,.08));
}

.practice-coach-emoji {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #fff;
    font-size: 23px;
    box-shadow: 0 8px 18px rgba(69,131,147,.10);
}

.coach-review-practices-section {
    margin-top: 18px;
    padding: 18px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid rgba(69,131,147,.14);
}

.practice-review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.practice-review-day {
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,.92);
}

.practice-review-day.is-empty {
    opacity: .72;
    background: rgba(107,122,120,.04);
}

.practice-review-day-head strong {
    font-size: 16px;
    font-weight: 950;
    color: var(--ink);
}

.practice-review-day-head span {
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(69,131,147,.08);
    color: var(--muted);
}

@media (max-width: 1024px) {
    .practice-days-grid,
    .practice-review-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .practice-hero,
    .practice-instruction-card,
    .step-practices-head {
        flex-direction: column;
    }

    .step-practices-summary-grid,
    .practice-stats-grid,
    .practice-review-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .practice-days-grid,
    .practice-review-grid {
        grid-template-columns: 1fr;
    }

    .practice-ring {
        width: 104px;
        height: 104px;
    }
}

/* ======================================================
   PRAKTIK BAIK - OUTPUT MINGGUAN 5 MINGGU
====================================================== */
.practice-weekly-output {
    display: grid;
    gap: 16px;
}

.practice-week-progress-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 8px 0 4px;
}

.practice-week-progress-grid > div {
    padding: 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 243, 200, .72), rgba(255, 255, 255, .92));
    border: 1px solid rgba(69, 131, 147, .14);
}

.practice-week-progress-grid strong {
    display: block;
    color: var(--teal);
    font-size: 22px;
    font-weight: 950;
    line-height: 1;
}

.practice-week-progress-grid span {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.practice-week-list,
.practice-week-review-list {
    display: grid;
    gap: 14px;
}

.practice-week-card,
.practice-week-review-card,
.practice-final-impact-card,
.practice-submit-card {
    padding: 16px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid rgba(69, 131, 147, .16);
    box-shadow: 0 10px 24px rgba(69, 131, 147, .07);
}

.practice-week-card.is-locked,
.practice-week-review-card.is-empty {
    background: rgba(255,255,255,.68);
    border-style: dashed;
}

.practice-week-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.practice-week-head span {
    display: inline-flex;
    align-items: center;
    color: var(--teal);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.practice-week-head h3 {
    margin: 4px 0 3px;
    color: var(--ink);
    font-size: 18px;
    line-height: 1.2;
}

.practice-week-head p {
    margin: 0;
}

.practice-week-head > strong {
    flex: 0 0 auto;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(52, 169, 157, .10);
    color: var(--teal);
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
}

.practice-week-form {
    display: grid;
    gap: 12px;
}

.practice-week-form label,
.practice-week-coach-form label {
    display: grid;
    gap: 7px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
    text-align: left;
}

.practice-week-form textarea,
.practice-week-coach-form textarea {
    width: 100%;
    border-radius: 16px;
    border: 1px solid rgba(69, 131, 147, .22);
    padding: 13px 14px;
    color: var(--ink);
    background: #fff;
    font-size: 14px;
    line-height: 1.55;
    outline: none;
    resize: vertical;
    box-shadow: 0 6px 14px rgba(69, 131, 147, .05);
}

.practice-week-form textarea:focus,
.practice-week-coach-form textarea:focus {
    border-color: var(--mint);
    box-shadow: 0 0 0 4px rgba(52, 169, 157, .13);
}

.practice-week-form textarea[readonly] {
    background: rgba(69, 131, 147, .05);
}

.practice-week-ai-box,
.practice-week-coach-box {
    margin-top: 12px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(52, 169, 157, .08);
    border: 1px solid rgba(52, 169, 157, .16);
    text-align: left;
}

.practice-week-coach-box {
    background: rgba(255, 243, 200, .62);
    border-color: rgba(229, 203, 144, .42);
}

.practice-week-ai-box strong,
.practice-week-coach-box strong {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--teal);
    margin-bottom: 8px;
}

.practice-week-coach-form {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(69, 131, 147, .12);
}

.practice-final-impact-box {
    margin-top: 14px;
}

.practice-submit-card {
    display: grid;
    grid-template-columns: 1fr minmax(180px, 260px);
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, rgba(52, 169, 157, .10), rgba(255, 243, 200, .66));
}

.practice-submit-card h3 {
    margin: 0 0 4px;
}

.step-ai-actions.compact {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 760px) {
    .practice-week-progress-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .practice-submit-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 460px) {
    .practice-week-progress-grid {
        grid-template-columns: 1fr;
    }

    .practice-week-head {
        flex-direction: column;
        align-items: stretch;
    }

    .practice-week-head > strong {
        width: fit-content;
    }
}

/* ======================================================
   PRAKTIK BAIK - VIDEO THUMBNAIL & FULLSCREEN PLAYER
====================================================== */
.practice-video-thumb {
    position: relative;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
    display: grid;
    gap: 8px;
}

.practice-video-thumb-media {
    position: relative;
    display: block;
    width: 100%;
    min-height: 188px;
    border-radius: 18px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, .94), rgba(69, 131, 147, .86)),
        radial-gradient(circle at 85% 12%, rgba(52, 169, 157, .35), transparent 38%);
    border: 1px solid rgba(69, 131, 147, .16);
    box-shadow: 0 14px 28px rgba(15, 23, 42, .14);
}

.practice-video-thumb-media img {
    width: 100%;
    height: 210px;
    display: block;
    object-fit: cover;
    transform: scale(1.01);
    transition: transform .25s ease, filter .25s ease;
}

.practice-video-thumb:hover .practice-video-thumb-media img {
    transform: scale(1.045);
    filter: brightness(.86);
}

.practice-video-thumb-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, .05), rgba(15, 23, 42, .44));
    pointer-events: none;
}

.practice-video-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 66px;
    height: 66px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(52, 169, 157, .92);
    border: 4px solid rgba(255, 255, 255, .88);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .30);
    z-index: 2;
    transition: transform .2s ease, background .2s ease;
}

.practice-video-thumb:hover .practice-video-play {
    transform: scale(1.07);
    background: var(--teal);
}

.practice-video-play i {
    margin-left: 4px;
    font-size: 22px;
}

.practice-video-caption {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(52, 169, 157, .10);
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.practice-video-fallback {
    min-height: 210px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 7px;
    padding: 22px;
    color: #fff;
    text-align: center;
}

.practice-video-fallback i {
    width: 54px;
    height: 54px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .16);
    font-size: 22px;
}

.practice-video-fallback strong {
    font-size: 15px;
    font-weight: 950;
}

.practice-video-fallback small {
    color: rgba(255, 255, 255, .76);
    font-weight: 750;
}

.practice-video-modal[hidden] {
    display: none !important;
}

.practice-video-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(10, 15, 25, .82);
    backdrop-filter: blur(12px);
}

.practice-video-modal-backdrop {
    position: absolute;
    inset: 0;
}

.practice-video-modal-panel {
    position: relative;
    z-index: 1;
    width: min(1120px, 100%);
    max-height: calc(100vh - 44px);
    border-radius: 24px;
    overflow: hidden;
    background: #07111f;
    box-shadow: 0 26px 80px rgba(0, 0, 0, .48);
    border: 1px solid rgba(255, 255, 255, .16);
}

.practice-video-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    color: #fff;
    background: linear-gradient(135deg, rgba(52, 169, 157, .24), rgba(69, 131, 147, .12));
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.practice-video-modal-head span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, .72);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.practice-video-modal-head strong {
    display: block;
    margin-top: 2px;
    font-size: 15px;
    font-weight: 950;
    color: #fff;
}

.practice-video-close {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .10);
    color: #fff;
    cursor: pointer;
}

.practice-video-close:hover {
    background: rgba(255, 255, 255, .18);
}

.practice-video-player {
    display: block;
    width: 100%;
    max-height: calc(100vh - 132px);
    background: #000;
}

.practice-video-is-open {
    overflow: hidden;
}

@media (max-width: 720px) {
    .practice-video-modal {
        padding: 0;
    }

    .practice-video-modal-panel {
        width: 100%;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }

    .practice-video-player {
        height: calc(100vh - 72px);
        max-height: none;
        object-fit: contain;
    }

    .practice-video-thumb-media,
    .practice-video-thumb-media img,
    .practice-video-fallback {
        min-height: 180px;
        height: 180px;
    }
}