:root {
    /* Palet UNJ: hijau-teal #006569 + kuning #ffdd00 (diambil dari unj.ac.id) */
    --green-950: #012a2c;
    --green-900: #003b3e;
    --green-800: #004e52;
    --green-700: #006569;
    --green-100: #dbecec;
    --green-50: #eef7f7;
    --gold-700: #7a5f00;
    --gold-500: #ffdd00;
    --gold-100: #fff6c9;
    --ink: #16302f;
    --muted: #566a69;
    --soft: #f1f6f5;
    --paper: #fbfcfc;
    --white: #ffffff;
    --line: #d5e3e1;
    --line-strong: #b6cbc8;
    --danger: #9f2f2f;
    --danger-soft: #fff0ef;
    --warning: #785300;
    --warning-soft: #fff6d8;
    --shadow-sm: 0 4px 16px rgba(0, 60, 64, .08);
    --shadow-md: 0 18px 48px rgba(0, 60, 64, .12);
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 24px;
    --content: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--green-800); text-underline-offset: 3px; }
img { max-width: 100%; }
h1, h2, h3, p { overflow-wrap: break-word; }
h1, h2, h3 { margin-top: 0; line-height: 1.16; letter-spacing: -.025em; }
p { margin-top: 0; }

:focus-visible { outline: 3px solid #2479c9; outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 999; padding: 10px 16px; border-radius: 8px; background: var(--white); color: var(--green-950); font-weight: 800; transform: translateY(-150%); box-shadow: var(--shadow-md); }
.skip-link:focus { transform: translateY(0); }

.app-header { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 12px max(24px, calc((100vw - var(--content)) / 2)); background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(12px); }
.app-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--green-950); text-decoration: none; flex: none; }
.app-brand > span:last-child { display: grid; }
.app-brand strong { font-size: 18px; line-height: 1.15; }
.app-brand small { color: var(--muted); font-size: 11px; }
.brand-mark { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; color: var(--green-950); background: radial-gradient(circle, var(--gold-100) 0 35%, var(--gold-500) 36% 50%, var(--green-800) 51% 100%); border: 2px solid var(--gold-500); box-shadow: inset 0 0 0 4px var(--green-800); font-weight: 900; font-size: 12px; }
.app-nav { display: flex; align-items: center; gap: 6px; }
.app-nav a, .nav-logout { min-height: 42px; display: inline-flex; align-items: center; border: 0; border-radius: 10px; padding: 8px 13px; background: transparent; color: #314139; text-decoration: none; font-size: 14px; font-weight: 700; cursor: pointer; }
.app-nav a:hover, .nav-logout:hover, .app-nav .is-active { background: var(--green-50); color: var(--green-800); }
.app-nav form { margin: 0; }
.app-nav .nav-primary { margin-left: 5px; padding-inline: 18px; background: var(--green-800); color: var(--white); }
.app-nav .nav-primary:hover { background: var(--green-900); color: var(--white); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--green-800); font-size: 22px; cursor: pointer; }

.app-main { width: min(var(--content), calc(100% - 40px)); min-height: calc(100vh - 160px); margin: 0 auto; padding: 52px 0 84px; }
.flash-wrap { width: min(var(--content), calc(100% - 40px)); margin: 24px auto 0; }
.app-main > .flash-wrap { width: 100%; margin: 0 0 24px; }
.notice { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border: 1px solid; border-radius: var(--radius-sm); margin-bottom: 14px; }
.notice strong { flex: none; }
.notice ul { margin: 0; padding-left: 20px; }
.notice-success { color: var(--green-950); background: var(--green-100); border-color: #abd2bb; }
.notice-warning { color: var(--warning); background: var(--warning-soft); border-color: #ead287; }
.notice-error { color: var(--danger); background: var(--danger-soft); border-color: #e9b7b2; }

.app-footer { min-height: 110px; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 28px max(24px, calc((100vw - var(--content)) / 2)); border-top: 1px solid var(--line); background: var(--white); }
.app-footer div { display: grid; }
.app-footer strong { color: var(--green-900); }
.app-footer span, .app-footer p { color: var(--muted); font-size: 12px; margin: 0; }
.app-footer p { max-width: 450px; text-align: right; }

.section-kicker { display: inline-block; margin-bottom: 9px; color: var(--gold-700); font-size: 12px; font-weight: 900; letter-spacing: .13em; }
.page-heading { margin-bottom: 32px; }
.page-heading h1 { margin-bottom: 12px; font-size: clamp(34px, 5vw, 58px); color: var(--green-950); }
.page-heading p { max-width: 720px; color: var(--muted); font-size: 18px; }
.narrow-heading { max-width: 780px; margin-inline: auto; text-align: center; }
.content-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.content-heading h2 { margin: 0; font-size: clamp(25px, 3vw, 34px); color: var(--green-950); }
.content-heading > span, .content-heading a { color: var(--muted); font-size: 14px; font-weight: 700; }

.button, button.button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid transparent; border-radius: 12px; padding: 10px 20px; text-decoration: none; font-weight: 800; font-size: 14px; cursor: pointer; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--green-800); color: var(--white); box-shadow: 0 8px 22px rgba(0, 84, 90, .18); }
.button-primary:hover { background: var(--green-900); color: var(--white); }
.button-secondary { background: var(--white); color: var(--green-800); border-color: var(--green-800); }
.button-secondary:hover { background: var(--green-50); }
.button-tertiary { background: var(--green-50); color: var(--green-800); border-color: var(--line); }
.button-small { min-height: 38px; padding: 7px 14px; font-size: 13px; border-radius: 9px; }
.button-block { width: 100%; }
.text-link { color: var(--green-800); text-decoration: none; font-weight: 800; }

.field-group { margin-bottom: 18px; }
.field-group > label, .field-label-row label, form > label { display: inline-block; margin-bottom: 7px; color: #26372e; font-size: 14px; font-weight: 800; }
.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.field-label-row a { font-size: 12px; font-weight: 700; }
input, textarea, select { width: 100%; min-height: 48px; display: block; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--white); color: var(--ink); padding: 11px 13px; transition: border-color .16s, box-shadow .16s; }
input::placeholder, textarea::placeholder { color: #86948c; }
input:focus, textarea:focus, select:focus { outline: 0; border-color: var(--green-700); box-shadow: 0 0 0 3px rgba(0, 101, 105, .14); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }
textarea { min-height: 130px; resize: vertical; }
.field-help { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; }
.field-error { display: block; margin-top: 6px; color: var(--danger); font-size: 12px; font-weight: 700; }
.password-control { position: relative; }
.password-control input { padding-right: 96px; }
.password-toggle { min-height: 36px; position: absolute; top: 6px; right: 7px; border: 0; border-radius: 7px; padding: 5px 9px; background: var(--green-50); color: var(--green-800); font-size: 12px; font-weight: 800; cursor: pointer; }
.check-field { display: flex !important; align-items: flex-start; gap: 10px; margin: 4px 0 20px !important; color: var(--muted) !important; font-weight: 600 !important; }
.check-field input { width: 19px; min-height: 19px; height: 19px; margin: 2px 0 0; flex: none; accent-color: var(--green-800); }
.password-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 15px; margin: 9px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 11px; }
.password-rules li::before { content: "○"; margin-right: 5px; }
.password-rules li.is-valid { color: var(--green-700); }
.password-rules li.is-valid::before { content: "✓"; font-weight: 900; }
.otp-input { letter-spacing: .45em; text-align: center; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }

.auth-page { background: #f5f7f5; }
.auth-page .app-header, .auth-page .app-footer { display: none; }
.auth-main { min-height: 100vh; padding: 0; background: #f5f7f5; }
.auth-main > .flash-wrap { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 50; width: min(680px, calc(100% - 32px)); }
.auth-shell { width: 100%; min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; overflow: hidden; background: #f5f7f5; }
.auth-shell-register, .auth-shell-compact { min-height: 100vh; }
.auth-story { min-height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 56px 64px; color: var(--white); background: linear-gradient(135deg, var(--green-950), var(--green-700)); position: relative; overflow: hidden; }
.auth-story::before { content: ""; position: absolute; width: 420px; height: 420px; top: -140px; right: -120px; border-radius: 50%; background: rgba(255,255,255,.1); }
.auth-story::after { content: ""; position: absolute; width: 280px; height: 280px; bottom: -100px; left: -80px; border: 28px solid rgba(214,168,0,.18); border-radius: 50%; background: rgba(255,255,255,.07); }
.auth-story > * { position: relative; z-index: 1; }
.auth-story .section-kicker { color: #ffe14d; }
.auth-story h1 { max-width: 520px; margin-bottom: 16px; font-size: 38px; line-height: 1.2; letter-spacing: -.5px; }
.auth-story > div > p { max-width: 420px; color: #d9efee; font-size: 16px; }
.auth-brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; }
.auth-brand > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.18); font-size: 14px; font-weight: 900; }
.auth-brand > strong { font-size: 19px; }
.auth-back { color: var(--white); text-decoration: none; font-size: 13px; font-weight: 800; }
.auth-benefits { display: grid; gap: 18px; margin: 34px 0 0; padding: 0; list-style: none; }
.auth-benefits li { display: flex; gap: 13px; }
.auth-benefits li > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.14); color: #ffe14d; font-weight: 900; flex: none; }
.auth-benefits strong, .auth-benefits small { display: block; }
.auth-benefits small { color: #c8e3e2; }
.auth-domain { margin: 32px 0 0; color: #d9efee; font-size: 12px; }
.auth-domain strong { color: var(--white); }
.auth-steps { display: grid; gap: 18px; margin-top: 34px; }
.auth-steps > div { display: flex; align-items: center; gap: 14px; }
.auth-steps b { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--gold-500); color: var(--green-950); }
.auth-steps span, .auth-steps strong, .auth-steps small { display: block; }
.auth-steps small { color: #c8e3e2; }
.auth-panel { min-width: 0; display: flex; align-items: stretch; justify-content: center; flex-direction: column; padding: 40px; background: #fff; }
.auth-panel > * { width: 100%; max-width: 380px; margin-left: auto; margin-right: auto; }
.auth-shell-register .form-two { grid-template-columns: 1fr; }
.auth-panel-head { margin-bottom: 28px; }
.auth-panel-head h2 { margin-bottom: 9px; color: var(--green-950); font-size: 26px; letter-spacing: -.4px; }
.auth-panel-head p { color: var(--muted); }
.auth-form .button { margin-top: 4px; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 15px; color: var(--muted); font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.security-note { display: flex; gap: 8px; margin: 20px 0 0; padding: 12px; border-radius: 9px; background: var(--green-50); color: var(--muted); font-size: 11px; }
.form-consent { margin: 12px 0 0; color: var(--muted); text-align: center; font-size: 11px; }
.auth-symbol { width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 24px; border-radius: 18px; background: var(--green-100); color: var(--green-800); font-size: 24px; font-weight: 900; letter-spacing: 4px; }
.recovery-option { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.recovery-option summary { color: var(--green-800); cursor: pointer; font-size: 13px; font-weight: 800; }
.recovery-option form { margin-top: 15px; }

.dashboard-hero { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-bottom: 32px; }
.dashboard-hero h1 { margin-bottom: 8px; color: var(--green-950); font-size: clamp(36px, 5vw, 58px); }
.dashboard-hero p { color: var(--muted); font-size: 17px; }
.profile-chip { display: flex; align-items: center; gap: 12px; min-width: 240px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.profile-chip > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--green-800); color: var(--white); font-weight: 900; }
.profile-chip strong, .profile-chip small { display: block; }
.profile-chip small { color: var(--muted); }
.dashboard-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; }
.dashboard-stats article { display: flex; align-items: center; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
.stat-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--green-50); color: var(--green-800); font-weight: 900; }
.dashboard-stats strong, .dashboard-stats small { display: block; }
.dashboard-stats strong { font-size: 25px; line-height: 1.1; }
.dashboard-stats small { color: var(--muted); }
.continue-card { display: grid; grid-template-columns: 290px 1fr; overflow: hidden; margin-bottom: 56px; border-radius: var(--radius-lg); background: var(--green-950); color: var(--white); box-shadow: var(--shadow-md); }
.continue-visual { min-height: 260px; display: flex; flex-direction: column; justify-content: flex-end; padding: 30px; background: linear-gradient(145deg, var(--green-700), var(--green-950)); position: relative; }
.continue-visual::after { content: ""; width: 170px; height: 170px; position: absolute; right: -70px; top: -60px; border: 28px solid rgba(214,168,0,.55); border-radius: 50%; }
.continue-visual > span { color: #ffe14d; font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.continue-visual > strong { font-size: 64px; line-height: 1.1; }
.continue-visual .progress-track { background: rgba(255,255,255,.2); }
.continue-visual .progress-track span { background: #ffe14d; }
.continue-copy { align-self: center; padding: 35px 42px; }
.continue-copy h2 { margin: 13px 0 9px; font-size: 32px; }
.continue-copy p { color: #d2e6da; }
.continue-meta { display: flex; gap: 20px; margin-bottom: 20px; color: #bed7c8; font-size: 13px; }
.dashboard-section { margin-top: 52px; }
.learning-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.learning-card { display: grid; grid-template-columns: 120px 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
.course-monogram { display: grid; place-items: center; min-height: 250px; background: linear-gradient(155deg, var(--green-100), #c4dfce); color: var(--green-800); font: 900 64px Georgia, serif; }
.learning-card-body { padding: 24px; }
.learning-card h3 { margin: 11px 0 25px; font-size: 21px; }
.progress-label { display: flex; justify-content: space-between; gap: 15px; color: var(--muted); font-size: 12px; }
.progress-track { height: 8px; overflow: hidden; border-radius: 99px; background: #e5ebe7; }
.progress-track span { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--green-700), var(--green-800)); }
.learning-card p { margin: 7px 0 18px; color: var(--muted); font-size: 12px; }
.card-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.status-badge { width: max-content; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 99px; font-size: 10px; font-weight: 900; letter-spacing: .06em; }
.status-active { background: var(--gold-100); color: #704c00; }
.status-complete { background: var(--green-100); color: var(--green-900); }
.status-open { background: #e8f0ff; color: #244e89; }
.status-draft { background: #ecefed; color: #4f5d55; }
.empty-state { grid-column: 1 / -1; padding: 48px 28px; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--white); text-align: center; }
.empty-state > span { display: block; color: var(--green-700); font-size: 42px; }
.empty-state h3 { margin: 12px 0 6px; }
.empty-state p { color: var(--muted); }
.compact-course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.compact-course-grid article { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.compact-cover { min-height: 105px; display: grid; place-items: center; background: linear-gradient(140deg, var(--green-800), var(--green-950)); color: #ffe14d; font: 900 45px Georgia, serif; }
.compact-course-grid article > div:last-child { padding: 18px; }
.compact-course-grid span, .compact-course-grid small { color: var(--muted); font-size: 11px; }
.compact-course-grid h3 { margin: 8px 0; font-size: 18px; }
.compact-course-grid h3 a { color: var(--ink); text-decoration: none; }
.compact-course-grid p { color: var(--muted); font-size: 13px; }

.catalog-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 34px; padding: 44px; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--green-950), var(--green-800)); color: var(--white); }
.catalog-hero > div:first-child { max-width: 750px; }
.catalog-hero .section-kicker { color: #ffe14d; }
.catalog-hero h1 { margin-bottom: 14px; font-size: clamp(40px, 6vw, 66px); }
.catalog-hero p { color: #d4e8dc; font-size: 17px; }
.catalog-count { flex: none; padding-left: 28px; border-left: 1px solid rgba(255,255,255,.3); }
.catalog-count strong, .catalog-count span { display: block; }
.catalog-count strong { color: #ffe14d; font-size: 50px; line-height: 1; }
.catalog-count span { font-size: 12px; }
.catalog-tools { display: grid; grid-template-columns: 1fr 250px; gap: 18px; align-items: end; padding: 18px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
.search-field { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
.search-field > span { margin-left: 8px; color: var(--green-800); font-size: 23px; }
.search-field input { border: 0; box-shadow: none; }
.search-field input:focus { box-shadow: none; }
.sort-field { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.sort-field label { margin: 0; color: var(--muted); font-size: 12px; font-weight: 800; }
.search-summary { display: flex; justify-content: space-between; gap: 18px; margin: 16px 0; }
.search-summary p { margin: 0; }
.catalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.catalog-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }
.catalog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.catalog-cover { min-height: 175px; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; background: linear-gradient(145deg, #dcece2, #b8d6c4); position: relative; overflow: hidden; }
.catalog-cover::after { content: ""; width: 180px; height: 180px; position: absolute; right: -80px; bottom: -105px; border: 28px solid var(--gold-500); border-radius: 50%; opacity: .65; }
.catalog-cover b { align-self: center; color: var(--green-800); font: 900 70px Georgia, serif; }
.catalog-label { width: max-content; padding: 4px 8px; border-radius: 99px; background: rgba(255,255,255,.75); color: var(--green-900); font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.catalog-card-body { padding: 22px; }
.catalog-meta { display: flex; flex-wrap: wrap; gap: 7px; color: var(--gold-700); font-size: 10px; font-weight: 800; }
.catalog-meta span + span::before { content: "·"; margin-right: 7px; }
.catalog-card h2 { margin: 10px 0 8px; font-size: 21px; }
.catalog-card h2 a { color: var(--ink); text-decoration: none; }
.catalog-card-body > p { min-height: 63px; color: var(--muted); font-size: 13px; }
.instructor-line { display: flex; align-items: center; gap: 9px; margin: 18px 0; }
.instructor-line > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--green-800); color: var(--white); font-size: 11px; font-weight: 900; }
.instructor-line small { color: var(--muted); }
.instructor-line strong { color: var(--ink); }
.catalog-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 15px; border-top: 1px solid var(--line); }
.catalog-card-footer span { color: var(--muted); font-size: 11px; }
.catalog-card-footer a { text-decoration: none; font-size: 12px; font-weight: 800; }
.catalog-empty { min-height: 300px; display: grid; place-items: center; align-content: center; }
.pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 35px; padding-top: 24px; border-top: 1px solid var(--line); }
.pagination div:last-child { text-align: right; }
.pagination a, .pagination span { font-weight: 800; text-decoration: none; }
.pagination [aria-disabled="true"] { color: #9aa69f; }
.pagination p { margin: 0; color: var(--muted); font-size: 13px; }

.breadcrumb { display: flex; align-items: center; gap: 9px; margin-bottom: 24px; color: var(--muted); font-size: 13px; }
.breadcrumb a { text-decoration: none; font-weight: 700; }
.course-hero { display: grid; grid-template-columns: 1.4fr .6fr; overflow: hidden; margin-bottom: 32px; border-radius: var(--radius-lg); background: var(--green-950); color: var(--white); }
.course-hero-copy { padding: 48px; }
.course-hero h1 { margin: 16px 0; font-size: clamp(38px, 5vw, 62px); }
.course-hero-copy > p { max-width: 760px; color: #d5eae9; font-size: 17px; }
.course-author { display: flex; align-items: center; gap: 11px; margin-top: 25px; }
.course-author > span { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 50%; background: var(--gold-500); color: var(--green-950); font-weight: 900; }
.course-author small, .course-author strong { display: block; }
.course-author small { color: #bcd6c6; font-size: 9px; letter-spacing: .1em; }
.course-hero-art { min-height: 330px; display: grid; place-items: center; background: linear-gradient(145deg, var(--green-700), #0c4c2e); position: relative; overflow: hidden; }
.course-hero-art::before { content: ""; width: 260px; height: 260px; position: absolute; border: 40px solid var(--gold-500); border-radius: 50%; opacity: .7; }
.course-hero-art > span { position: absolute; left: 22px; top: 20px; color: #d5eae9; font-weight: 900; }
.course-hero-art b { z-index: 1; color: var(--white); font: 900 96px Georgia, serif; }
.course-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; gap: 28px; }
.course-content { display: grid; gap: 32px; }
.course-overview, .curriculum-section, .assessment-section { padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.course-overview h2, .curriculum-section h2, .assessment-section h2 { color: var(--green-950); }
.overview-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.overview-grid > div { padding: 15px; border-radius: 11px; background: var(--soft); }
.overview-grid > div > span { display: block; margin-bottom: 8px; color: var(--green-700); font-size: 23px; }
.overview-grid strong, .overview-grid small { display: block; }
.overview-grid small { color: var(--muted); font-size: 11px; }
.curriculum-list { display: grid; gap: 11px; }
.curriculum-list details { overflow: hidden; border: 1px solid var(--line); border-radius: 11px; }
.curriculum-list summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px; cursor: pointer; list-style: none; background: var(--soft); }
.curriculum-list summary::-webkit-details-marker { display: none; }
.curriculum-list summary > span { display: flex; align-items: center; gap: 13px; }
.curriculum-list summary b { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; background: var(--green-100); color: var(--green-800); }
.curriculum-list summary strong, .curriculum-list summary small { display: block; }
.curriculum-list summary small { color: var(--muted); }
.curriculum-list summary i { color: var(--green-800); font-style: normal; font-size: 22px; }
.curriculum-list details[open] summary i { transform: rotate(45deg); }
.curriculum-list ol { margin: 0; padding: 5px 18px 12px; list-style: none; }
.curriculum-list li { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.curriculum-list li:last-child { border: 0; }
.curriculum-list li > div { flex: 1; }
.curriculum-list li strong, .curriculum-list li small { display: block; }
.curriculum-list li a { color: var(--ink); text-decoration: none; }
.curriculum-list li small { color: var(--muted); font-size: 11px; }
.lesson-status { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); flex: none; }
.lesson-status.is-complete { background: var(--green-800); color: var(--white); border-color: var(--green-800); }
.locked { color: var(--muted); font-size: 11px; }
.assessment-grid { display: grid; gap: 12px; }
.assessment-grid article { display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 12px; background: var(--green-50); }
.assessment-grid article > span { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 12px; background: var(--green-800); color: var(--white); font-weight: 900; }
.assessment-grid article > div { flex: 1; }
.assessment-grid h3, .assessment-grid p { margin: 0; }
.assessment-grid p { color: var(--muted); font-size: 12px; }
.assessment-grid form { margin-top: 10px; }
.enrollment-panel { position: sticky; top: 104px; padding: 25px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-md); }
.enrollment-panel h2 { margin: 13px 0 8px; }
.enrollment-panel > p, .enrollment-panel > small { color: var(--muted); }
.enrollment-panel ul { padding-left: 20px; color: var(--muted); font-size: 13px; }
.enrollment-panel li { margin: 6px 0; }
.enrollment-panel form { margin-top: 20px; }
.progress-score { display: flex; align-items: flex-end; justify-content: space-between; margin: 20px 0 8px; }
.progress-score strong { font-size: 40px; line-height: 1; color: var(--green-800); }
.progress-score span { color: var(--muted); font-size: 11px; }
.enrollment-panel .progress-track { margin-bottom: 22px; }
.certificate-link { display: block; margin-top: 15px; text-align: center; font-size: 12px; font-weight: 800; }
.safe-callout { display: flex; gap: 9px; margin-top: 20px; padding: 12px; border-radius: 9px; background: var(--green-50); }
.safe-callout p { margin: 0; color: var(--muted); font-size: 11px; }

.lesson-main { max-width: none; min-height: calc(100vh - 78px); margin: 0; padding: 0; }
.lesson-shell { display: grid; grid-template-columns: 330px minmax(0, 1fr); min-height: calc(100vh - 78px); }
.lesson-sidebar { padding: 30px 24px; border-right: 1px solid var(--line); background: #f2f6f3; }
.lesson-course-back { display: inline-block; margin-bottom: 28px; text-decoration: none; font-size: 12px; font-weight: 800; }
.lesson-course-title { padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.lesson-course-title > small, .lesson-module > span { color: var(--gold-700); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.lesson-course-title h2 { margin: 5px 0 18px; font-size: 20px; }
.lesson-module { margin-top: 24px; }
.lesson-module h3 { margin: 4px 0 10px; font-size: 14px; }
.lesson-module ol { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.lesson-module a { display: flex; align-items: center; gap: 10px; padding: 9px; border-radius: 9px; color: var(--muted); text-decoration: none; font-size: 12px; }
.lesson-module a > span:first-child { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; flex: none; font-size: 10px; }
.lesson-module a span:last-child, .lesson-module a small { display: block; }
.lesson-module a small { color: #84928a; }
.lesson-module a.is-current { background: var(--white); color: var(--green-900); box-shadow: var(--shadow-sm); }
.lesson-module a.is-complete > span:first-child { background: var(--green-800); border-color: var(--green-800); color: var(--white); }
.lesson-content { width: min(860px, calc(100% - 64px)); margin: 0 auto; padding: 50px 0 70px; }
.lesson-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.lesson-header h1 { margin: 3px 0 8px; color: var(--green-950); font-size: clamp(34px, 5vw, 55px); }
.lesson-header p { color: var(--muted); }
.reading-content { min-height: 340px; padding: 42px 0; color: #26372e; font-size: 18px; line-height: 1.85; }
.lesson-complete { padding: 22px; border-radius: var(--radius); background: var(--green-50); }
.lesson-complete p { margin: 0; color: var(--green-900); }
.lesson-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; padding-top: 25px; border-top: 1px solid var(--line); }
.lesson-navigation a { display: grid; padding: 15px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; }
.lesson-navigation a.next { text-align: right; }
.lesson-navigation span { color: var(--green-800); font-size: 11px; font-weight: 800; }
.lesson-navigation strong { font-size: 13px; }

.quiz-header { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-bottom: 30px; padding: 34px; border-radius: var(--radius-lg); background: var(--green-950); color: var(--white); }
.quiz-header h1 { margin-bottom: 8px; font-size: clamp(34px, 5vw, 52px); }
.quiz-header p { max-width: 660px; color: #cfe6e5; }
.quiz-header .section-kicker { color: #ffe14d; }
.quiz-timer { min-width: 190px; padding: 18px; border: 1px solid rgba(255,255,255,.2); border-radius: 14px; background: rgba(255,255,255,.08); text-align: center; }
.quiz-timer small, .quiz-timer strong, .quiz-timer span { display: block; }
.quiz-timer small { color: #ffe14d; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.quiz-timer strong { margin: 4px 0; font-size: 34px; font-variant-numeric: tabular-nums; }
.quiz-timer span { color: #c9ddd1; font-size: 9px; }
.quiz-timer.is-urgent { background: #742828; }
.quiz-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; align-items: start; gap: 25px; }
.quiz-form { display: grid; gap: 18px; }
.question-card { margin: 0; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.question-card legend { width: 100%; display: flex; align-items: flex-start; gap: 13px; padding: 0; font-size: 17px; font-weight: 800; }
.question-card legend > span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 9px; background: var(--green-100); color: var(--green-800); flex: none; font-size: 12px; }
.answer-list { display: grid; gap: 10px; margin-top: 20px; }
.answer-list label { margin: 0; cursor: pointer; }
.answer-list input { width: 1px; height: 1px; min-height: 1px; position: absolute; opacity: 0; pointer-events: none; }
.answer-list label > span { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-weight: 500; }
.answer-list label > span b { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; background: var(--soft); color: var(--ink); }
.answer-list input:focus-visible + span { outline: 3px solid #2479c9; outline-offset: 2px; }
.answer-list input:checked + span { border-color: var(--green-700); background: var(--green-50); color: var(--ink); }
.answer-list input:checked + span b { background: var(--green-800); color: var(--white); }
.quiz-submit { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 22px; border-radius: var(--radius); background: var(--green-100); }
.quiz-submit p { margin: 0; color: var(--muted); font-size: 12px; }
.quiz-guide { position: sticky; top: 104px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.quiz-guide h2 { font-size: 19px; }
.quiz-guide ul { padding-left: 19px; color: var(--muted); font-size: 12px; }
.quiz-guide li { margin: 9px 0; }

.admin-hero { display: flex; justify-content: space-between; gap: 35px; margin-bottom: 30px; padding: 35px; border-radius: var(--radius-lg); background: var(--green-950); color: var(--white); }
.admin-hero h1 { margin-bottom: 10px; font-size: clamp(36px, 5vw, 55px); }
.admin-hero p { color: #cfe6e5; }
.admin-hero .section-kicker { color: #ffe14d; }
.admin-summary { display: grid; grid-template-columns: 1fr 1fr; align-self: center; min-width: 280px; }
.admin-summary div { padding: 15px 25px; border-left: 1px solid rgba(255,255,255,.2); }
.admin-summary strong, .admin-summary span { display: block; }
.admin-summary strong { color: #ffe14d; font-size: 33px; }
.admin-summary span { color: #cfe6e5; font-size: 11px; }
.admin-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); align-items: start; gap: 25px; }
.admin-form-card { position: sticky; top: 104px; padding: 25px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
.admin-form-card > p { color: var(--muted); font-size: 13px; }
.admin-course-list { display: grid; gap: 14px; }
.admin-course-list > article { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.admin-course-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.admin-course-top h3 { margin: 9px 0 3px; }
.admin-course-top p { margin: 0; color: var(--muted); font-size: 12px; }
.admin-course-list details { margin-top: 17px; padding-top: 14px; border-top: 1px solid var(--line); }
.admin-course-list summary { display: flex; justify-content: space-between; cursor: pointer; color: var(--green-800); font-size: 13px; font-weight: 800; }
.nested-form { margin-top: 18px; padding: 18px; border-radius: 11px; background: var(--soft); }
.form-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nested-form label { width: 100%; }
.audit-section { margin-top: 50px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 13px 16px; border-bottom: 1px solid var(--line); text-align: left; font-size: 12px; }
th { background: var(--soft); color: var(--muted); font-size: 10px; letter-spacing: .08em; }
tbody tr:last-child td { border-bottom: 0; }
td code { color: var(--green-800); font-weight: 800; }

.setup-card { max-width: 820px; margin: 0 auto; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); }
.setup-steps { display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; }
.setup-steps > li { display: grid; grid-template-columns: 43px 1fr; gap: 17px; }
.setup-steps > li > b { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 50%; background: var(--green-100); color: var(--green-800); }
.setup-steps p { color: var(--muted); }
.secret { margin: 12px 0; padding: 15px; border-radius: 9px; background: var(--green-950); color: #bff0d1; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.inline-confirm { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.inline-confirm label { grid-column: 1 / -1; }
.recovery-card { max-width: 720px; }
.recovery-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 25px 0; padding: 0; list-style: none; }
.recovery-codes li { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); text-align: center; }
.recovery-codes code { color: var(--green-950); font-weight: 800; letter-spacing: .05em; }
.recovery-actions { display: flex; justify-content: flex-end; gap: 12px; }

.certificate-page { background: #f1f6f3; }
.certificate-card { max-width: 820px; margin: 25px auto; padding: 55px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); text-align: center; box-shadow: var(--shadow-md); }
.certificate-card h1 { margin: 10px 0; color: var(--green-950); font-size: clamp(38px, 6vw, 60px); }
.certificate-seal { width: 80px; height: 80px; display: grid; place-items: center; margin: 0 auto 22px; border-radius: 50%; background: var(--green-800); color: var(--white); font-size: 38px; box-shadow: 0 0 0 9px var(--green-100); }
.certificate-seal-warning { background: var(--gold-700); box-shadow: 0 0 0 9px var(--gold-100); }
.certificate-lead, .certificate-note { color: var(--muted); }
.certificate-details { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; margin: 28px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--line); text-align: left; }
.certificate-details > div { padding: 18px; background: var(--white); }
.certificate-details small, .certificate-details strong { display: block; }
.certificate-details small { color: var(--muted); }
.certificate-details code { font-size: 11px; word-break: break-all; }

@media (max-width: 980px) {
    .app-header { padding-inline: 22px; }
    .nav-toggle { display: grid; place-items: center; }
    .app-nav { display: none; position: absolute; top: 78px; left: 0; right: 0; align-items: stretch; flex-direction: column; gap: 2px; padding: 16px 22px 22px; border-bottom: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow-md); }
    .app-nav.is-open { display: flex; }
    .app-nav a, .nav-logout { width: 100%; justify-content: flex-start; }
    .app-nav .nav-primary { margin-left: 0; justify-content: center; }
    .app-nav form { width: 100%; }
    .dashboard-stats { grid-template-columns: repeat(2, 1fr); }
    .catalog-grid { grid-template-columns: repeat(2, 1fr); }
    .course-layout, .quiz-layout, .admin-layout { grid-template-columns: 1fr; }
    .enrollment-panel, .quiz-guide, .admin-form-card { position: static; }
    .overview-grid { grid-template-columns: repeat(2, 1fr); }
    .lesson-shell { grid-template-columns: 270px minmax(0, 1fr); }
}

@media (max-width: 760px) {
    .app-main { width: min(100% - 28px, var(--content)); padding: 34px 0 60px; }
    .app-footer { align-items: flex-start; flex-direction: column; gap: 12px; }
    .app-footer p { text-align: left; }
    .content-heading, .dashboard-hero, .catalog-hero, .quiz-header, .admin-hero { align-items: flex-start; flex-direction: column; }
    .profile-chip { width: 100%; }
    .dashboard-stats { grid-template-columns: 1fr 1fr; }
    .continue-card { grid-template-columns: 1fr; }
    .continue-visual { min-height: 190px; }
    .continue-copy { padding: 28px 24px; }
    .learning-grid, .compact-course-grid, .catalog-grid { grid-template-columns: 1fr; }
    .learning-card { grid-template-columns: 90px 1fr; }
    .course-monogram { min-height: 220px; }
    .auth-main { padding: 15px; }
    .auth-shell { grid-template-columns: 1fr; border-radius: 18px; }
    .auth-story { min-height: 340px; padding: 30px 25px; }
    .auth-story h1 { font-size: 39px; }
    .auth-story .auth-benefits, .auth-story .auth-steps { display: none; }
    .auth-panel { padding: 34px 24px; }
    .auth-panel-head h2 { font-size: 30px; }
    .password-rules { grid-template-columns: 1fr; }
    .catalog-hero { padding: 30px 25px; }
    .catalog-count { padding: 18px 0 0; border-top: 1px solid rgba(255,255,255,.25); border-left: 0; }
    .catalog-tools { grid-template-columns: 1fr; }
    .search-field { grid-template-columns: auto 1fr; }
    .search-field .button { grid-column: 1 / -1; }
    .course-hero { grid-template-columns: 1fr; }
    .course-hero-copy { padding: 30px 24px; }
    .course-hero-art { min-height: 190px; }
    .course-overview, .curriculum-section, .assessment-section { padding: 21px 16px; }
    .overview-grid { grid-template-columns: 1fr 1fr; }
    .lesson-shell { display: block; }
    .lesson-sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
    .lesson-sidebar nav { max-height: 290px; overflow: auto; }
    .lesson-content { width: calc(100% - 36px); padding: 35px 0 55px; }
    .lesson-header { display: grid; }
    .lesson-navigation { grid-template-columns: 1fr; }
    .quiz-header { padding: 25px; }
    .quiz-timer { width: 100%; }
    .question-card { padding: 20px 15px; }
    .quiz-submit { align-items: stretch; flex-direction: column; }
    .admin-summary { min-width: 0; width: 100%; }
    .admin-summary div:first-child { border-left: 0; }
    .admin-course-top { align-items: flex-start; flex-direction: column; }
    .form-two, .inline-confirm, .certificate-details { grid-template-columns: 1fr; }
    .inline-confirm label { grid-column: auto; }
    .certificate-card { padding: 38px 20px; }
    .pagination { grid-template-columns: 1fr 1fr; }
    .pagination p { grid-column: 1 / -1; grid-row: 1; margin-bottom: 15px; text-align: center; }
}

@media print {
    .app-header, .app-footer, .recovery-actions, .skip-link { display: none !important; }
    .app-main { width: 100%; padding: 0; }
    .setup-card { border: 0; box-shadow: none; }
}

@media (max-width: 430px) {
    .dashboard-stats { grid-template-columns: 1fr; }
    .learning-card { grid-template-columns: 1fr; }
    .course-monogram { min-height: 110px; }
    .overview-grid { grid-template-columns: 1fr; }
    .card-actions { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 900px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-story { display: none; }
    .auth-panel { min-height: 100vh; }
}

@media (max-width: 760px) {
    .auth-main { padding: 0; }
    .auth-shell { border-radius: 0; }
    .auth-panel { padding: 34px 24px; }
    .auth-panel-head h2 { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ===== Brand logo (Klinik Belajar — PPKN FISH UNJ) ===== */
.app-logo { height: 46px; width: auto; display: block; }
.brand-logo { height: 48px; width: auto; display: block; }
.auth-logo { height: 44px; width: auto; display: block; background: #fff; padding: 7px 13px; border-radius: 12px; box-shadow: var(--shadow-sm); }
.footer-brand .brand-logo, .brand-logo-light { background: #fff; padding: 8px 14px; border-radius: 12px; }
@media (max-width: 640px) { .app-logo { height: 40px; } .brand-logo { height: 42px; } }

/* Verified badge (halaman app-layout) */
.kb-verified { display: inline-flex; align-items: center; vertical-align: middle; font-size: 1em; line-height: 1; margin-left: 5px; }
.kb-verified svg { display: block; }