: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;
    }
}