:root {
    --navy: #123a63;
    --navy-2: #0b2947;
    --blue: #1e6fb9;
    --cyan: #2aa6b8;
    --gold: #f2b84b;
    --ink: #1d2939;
    --muted: #667085;
    --line: #e4e7ec;
    --surface: #ffffff;
    --canvas: #f4f7fb;
    --success: #157347;
    --success-bg: #e9f8ef;
    --warning: #9a6700;
    --warning-bg: #fff5d6;
    --danger: #b42318;
    --danger-bg: #ffebe9;
    --info: #175cd3;
    --info-bg: #e9f2ff;
    --radius: 16px;
    --shadow: 0 14px 40px rgba(23, 43, 77, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: none; }
button, input, select, textarea { font: inherit; }
img { max-width: 100%; }

.app-shell { min-height: 100vh; display: flex; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; width: 270px; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--navy-2), var(--navy)); color: #fff; box-shadow: 8px 0 30px rgba(7, 29, 51, .12); }
.brand { min-height: 88px; display: flex; align-items: center; gap: 12px; padding: 18px 22px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.09); }
.brand:hover { color: #fff; }
.brand img { width: 46px; height: 46px; border-radius: 12px; object-fit: contain; background: #fff; padding: 4px; }
.brand-mark { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: linear-gradient(135deg, var(--gold), #ffdc8a); color: var(--navy-2); font-size: 25px; font-weight: 900; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.brand strong { display: block; max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.brand small { display: block; opacity: .67; font-size: 11px; margin-top: 2px; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 15px 13px; }
.nav-label { padding: 17px 13px 7px; color: rgba(255,255,255,.48); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.sidebar-link { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 3px 0; padding: 9px 12px; color: rgba(255,255,255,.78); border-radius: 11px; transition: .18s ease; font-size: 14px; }
.sidebar-link:hover { color: #fff; background: rgba(255,255,255,.08); transform: translateX(2px); }
.sidebar-link.active { color: #fff; background: rgba(255,255,255,.14); box-shadow: inset 3px 0 0 var(--gold); }
.nav-icon { width: 24px; text-align: center; font-size: 18px; color: #cde9ff; }
.sidebar-footer { padding: 15px 22px 20px; border-top: 1px solid rgba(255,255,255,.09); color: rgba(255,255,255,.52); font-size: 10px; }
.sidebar-footer small, .sidebar-footer span { display: block; }
.sidebar-footer span { margin-top: 3px; }

.main-area { width: calc(100% - 270px); margin-left: 270px; min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 30; height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 30px; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(228,231,236,.9); }
.topbar-title small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.topbar-title h1 { margin: 2px 0 0; font-size: 21px; line-height: 1.2; }
.user-menu { display: flex; align-items: center; gap: 10px; }
.avatar { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 50%; background: #e7f0fa; color: var(--navy); font-weight: 900; border: 1px solid #d4e2f2; }
.user-meta strong, .user-meta small { display: block; }
.user-meta strong { font-size: 13px; }
.user-meta small { color: var(--muted); font-size: 11px; }
.content-area { padding: 28px 30px 50px; max-width: 1600px; margin: 0 auto; }

.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.page-heading h2 { margin: 0; font-size: 24px; letter-spacing: -.02em; }
.page-heading p { margin: 6px 0 0; color: var(--muted); max-width: 760px; }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.card-header h3 { margin: 0; font-size: 16px; }
.card-body { padding: 20px; }
.card-footer { padding: 15px 20px; border-top: 1px solid var(--line); background: #fbfcfe; border-radius: 0 0 var(--radius) var(--radius); }
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-main { grid-template-columns: minmax(0, 1.8fr) minmax(280px, .9fr); }
.stack { display: grid; gap: 16px; }

.stat-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; position: relative; }
.stat-card::after { content: ''; position: absolute; width: 90px; height: 90px; border-radius: 50%; right: -30px; top: -40px; background: rgba(30,111,185,.06); }
.stat-meta small { display: block; color: var(--muted); font-weight: 600; }
.stat-meta strong { display: block; font-size: 29px; line-height: 1.15; margin-top: 5px; }
.stat-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: #edf5fc; color: var(--navy); font-size: 23px; }

.button { appearance: none; border: 1px solid transparent; border-radius: 10px; min-height: 41px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 15px; cursor: pointer; font-weight: 700; font-size: 13px; transition: .16s ease; white-space: nowrap; }
.button:hover { transform: translateY(-1px); }
.button-primary { color: #fff; background: var(--navy); border-color: var(--navy); }
.button-primary:hover { color: #fff; background: var(--navy-2); }
.button-secondary { color: var(--navy); background: #eaf2fa; border-color: #d5e4f3; }
.button-secondary:hover { color: var(--navy-2); background: #deecf8; }
.button-success { color: #fff; background: var(--success); }
.button-danger { color: #fff; background: var(--danger); }
.button-warning { color: #6b4300; background: var(--gold); }
.button-ghost { color: var(--ink); background: transparent; border-color: var(--line); }
.button-ghost:hover { color: var(--navy); background: #f7f9fc; }
.button-sm { min-height: 34px; padding: 6px 10px; font-size: 12px; border-radius: 8px; }
.button-block { width: 100%; }
.icon-button { width: 41px; height: 41px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-group { display: grid; gap: 7px; }
.form-group.full { grid-column: 1 / -1; }
label { color: #344054; font-size: 13px; font-weight: 700; }
.label-help { color: var(--muted); font-size: 11px; font-weight: 400; }
.input, .select, .textarea { width: 100%; border: 1px solid #d0d5dd; border-radius: 10px; background: #fff; color: var(--ink); padding: 11px 12px; outline: none; transition: .15s ease; }
.input, .select { min-height: 45px; }
.textarea { min-height: 125px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(30,111,185,.11); }
.help-text { color: var(--muted); font-size: 11px; }
.checkbox-row { display: flex; align-items: center; gap: 9px; min-height: 42px; }
.checkbox-row input { width: 17px; height: 17px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.search-bar { display: flex; flex-wrap: wrap; gap: 9px; align-items: flex-end; }
.search-bar .form-group { min-width: 180px; flex: 1; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 13px; }
table { width: 100%; border-collapse: collapse; min-width: 720px; background: #fff; }
th, td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: #f8fafc; color: #475467; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
td { font-size: 13px; }
tr:last-child td { border-bottom: 0; }
.table-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.table-title { font-weight: 800; color: var(--ink); }
.table-subtitle { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; text-transform: capitalize; }
.badge-success { color: var(--success); background: var(--success-bg); }
.badge-warning { color: var(--warning); background: var(--warning-bg); }
.badge-danger { color: var(--danger); background: var(--danger-bg); }
.badge-info { color: var(--info); background: var(--info-bg); }
.badge-neutral { color: #475467; background: #f2f4f7; }

.alert { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 13px 15px; margin-bottom: 16px; border-radius: 11px; border: 1px solid; font-size: 13px; }
.alert button { border: 0; background: transparent; font-size: 18px; cursor: pointer; color: inherit; }
.alert-success { color: var(--success); background: var(--success-bg); border-color: #b8e5c8; }
.alert-warning { color: var(--warning); background: var(--warning-bg); border-color: #f3d98c; }
.alert-danger { color: var(--danger); background: var(--danger-bg); border-color: #f2c4bf; }
.alert-info { color: var(--info); background: var(--info-bg); border-color: #c8dcff; }

.empty-state { padding: 45px 22px; text-align: center; color: var(--muted); }
.empty-state .empty-icon { width: 58px; height: 58px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 17px; background: #eef4fa; color: var(--navy); font-size: 26px; }
.empty-state h3 { margin: 0 0 5px; color: var(--ink); }
.empty-state p { margin: 0 auto 16px; max-width: 500px; }

.course-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.course-card { display: flex; flex-direction: column; min-height: 250px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.course-cover { min-height: 96px; padding: 18px; display: flex; align-items: flex-end; justify-content: space-between; color: #fff; background: linear-gradient(135deg, var(--navy), var(--blue)); position: relative; overflow: hidden; }
.course-cover::after { content: ''; position: absolute; width: 120px; height: 120px; right: -25px; top: -55px; border-radius: 50%; background: rgba(255,255,255,.12); }
.course-cover small { opacity: .8; }
.course-card-body { padding: 17px; flex: 1; }
.course-card h3 { margin: 0 0 6px; font-size: 17px; }
.course-card p { color: var(--muted); font-size: 12px; margin: 0; }
.course-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 17px; border-top: 1px solid var(--line); }

.list { display: grid; gap: 0; }
.list-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.list-item:first-child { padding-top: 0; }
.list-item:last-child { border-bottom: 0; padding-bottom: 0; }
.list-item h4 { margin: 0; font-size: 14px; }
.list-item p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.list-item-meta { flex: 0 0 auto; color: var(--muted); font-size: 11px; text-align: right; }

.tabs { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; margin-bottom: 18px; }
.tab { flex: 0 0 auto; padding: 9px 13px; border-radius: 9px; background: #fff; border: 1px solid var(--line); color: #475467; font-size: 12px; font-weight: 800; }
.tab.active, .tab:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

.progress { height: 8px; border-radius: 999px; overflow: hidden; background: #edf0f4; }
.progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--cyan)); }

.prose { color: #344054; }
.prose p:first-child { margin-top: 0; }
.prose p:last-child { margin-bottom: 0; }
.prose pre { white-space: pre-wrap; background: #f7f9fc; border: 1px solid var(--line); border-radius: 10px; padding: 12px; }

.announcement { padding: 18px 0; border-bottom: 1px solid var(--line); }
.announcement:last-child { border-bottom: 0; }
.announcement-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.announcement h3 { margin: 0; font-size: 16px; }
.announcement-meta { display: flex; flex-wrap: wrap; gap: 9px; color: var(--muted); font-size: 11px; margin-top: 5px; }
.announcement-body { margin-top: 12px; color: #344054; white-space: pre-wrap; }

.discussion-post { padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.discussion-author { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.discussion-author .avatar { width: 34px; height: 34px; }
.discussion-author small { display: block; color: var(--muted); }
.reply { margin-left: 28px; border-left: 3px solid #d8e7f4; padding-left: 15px; }

.quiz-question { padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.option-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; margin-top: 8px; cursor: pointer; }
.option-row:hover { background: #f8fbfe; }
.quiz-timer { position: sticky; top: 102px; z-index: 5; padding: 12px 15px; border-radius: 11px; background: var(--navy); color: #fff; font-weight: 800; box-shadow: var(--shadow); }

.public-body { min-height: 100vh; background: #eef3f8; }
.public-nav { height: 76px; display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.public-nav .brand { min-height: auto; padding: 0; border: 0; color: var(--navy); }
.public-nav .brand:hover { color: var(--navy); }
.public-nav .brand small { color: var(--muted); opacity: 1; }
.public-nav-actions { display: flex; gap: 8px; }
.hero { max-width: 1200px; margin: 0 auto; padding: 64px 24px 80px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 54px; align-items: center; }
.hero-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; color: var(--navy); background: #dcebf7; font-size: 11px; font-weight: 900; letter-spacing: .06em; }
.hero h1 { margin: 17px 0 15px; max-width: 760px; color: var(--navy-2); font-size: clamp(40px, 6vw, 68px); line-height: 1.04; letter-spacing: -.045em; }
.hero p { max-width: 650px; color: #526275; font-size: 17px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hero-panel { position: relative; padding: 18px; border-radius: 24px; background: linear-gradient(145deg, var(--navy-2), var(--blue)); box-shadow: 0 28px 80px rgba(13,53,90,.25); color: #fff; }
.hero-panel::before { content: ''; position: absolute; inset: 18px; border: 1px solid rgba(255,255,255,.15); border-radius: 16px; pointer-events: none; }
.hero-screen { position: relative; padding: 22px; min-height: 350px; border-radius: 16px; background: rgba(255,255,255,.08); backdrop-filter: blur(10px); }
.hero-screen h3 { margin: 0 0 4px; font-size: 21px; }
.hero-screen p { color: rgba(255,255,255,.7); font-size: 12px; margin: 0; }
.hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 24px; }
.hero-stat { padding: 15px; border-radius: 13px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); }
.hero-stat strong { display: block; font-size: 26px; }
.hero-stat small { color: rgba(255,255,255,.68); }
.features-section { background: #fff; padding: 78px 24px; }
.section-inner { max-width: 1200px; margin: 0 auto; }
.section-heading { max-width: 700px; margin-bottom: 30px; }
.section-heading h2 { margin: 0 0 10px; font-size: 34px; color: var(--navy-2); }
.section-heading p { margin: 0; color: var(--muted); }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature-card { padding: 24px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: 0 10px 34px rgba(32,56,85,.06); }
.feature-icon { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 13px; background: #eaf3fb; color: var(--navy); font-size: 21px; }
.feature-card h3 { margin: 16px 0 7px; }
.feature-card p { margin: 0; color: var(--muted); font-size: 13px; }
.public-footer { padding: 30px 24px; text-align: center; color: var(--muted); font-size: 12px; }

.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(350px, .82fr) minmax(450px, 1.18fr); }
.auth-panel { padding: 45px max(28px, 7vw); background: #fff; display: flex; flex-direction: column; justify-content: center; }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 40px; color: var(--navy); }
.auth-brand strong, .auth-brand small { display: block; }
.auth-brand small { color: var(--muted); font-size: 11px; }
.auth-panel h1 { margin: 0 0 8px; font-size: 32px; color: var(--navy-2); }
.auth-panel > p { margin: 0 0 24px; color: var(--muted); }
.auth-form { max-width: 520px; width: 100%; }
.auth-side { padding: 50px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; background: linear-gradient(145deg, rgba(8,38,66,.96), rgba(28,102,164,.92)), radial-gradient(circle at top right, #5dc1d1, #123a63); }
.auth-side h2 { margin: 0 0 12px; font-size: 38px; max-width: 700px; line-height: 1.12; }
.auth-side p { max-width: 640px; color: rgba(255,255,255,.72); }
.auth-links { margin-top: 18px; color: var(--muted); font-size: 13px; }

.install-shell { min-height: 100vh; padding: 45px 20px; background: #eef3f8; }
.install-card { max-width: 960px; margin: 0 auto; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 25px 70px rgba(26,55,86,.14); }
.install-head { padding: 30px; color: #fff; background: linear-gradient(135deg, var(--navy-2), var(--blue)); }
.install-head h1 { margin: 0 0 5px; }
.install-head p { margin: 0; color: rgba(255,255,255,.72); }
.install-body { padding: 30px; }
.requirement-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 22px; }
.requirement { padding: 12px; border-radius: 10px; border: 1px solid var(--line); font-size: 12px; }
.requirement.ok { color: var(--success); background: var(--success-bg); }
.requirement.fail { color: var(--danger); background: var(--danger-bg); }

.kpi-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 12px; }
.muted { color: var(--muted); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-right { text-align: right; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 8px; }
.gap-2 { gap: 16px; }
.w-full { width: 100%; }
.mobile-only { display: none; }

@media (max-width: 1180px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .course-grid, .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-main { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .sidebar { transform: translateX(-100%); transition: transform .22s ease; }
    body.sidebar-open .sidebar { transform: translateX(0); }
    .sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 40; background: rgba(16,24,40,.48); }
    body.sidebar-open .sidebar-backdrop { display: block; }
    .main-area { width: 100%; margin-left: 0; }
    .mobile-only { display: grid; }
    .topbar { height: 76px; padding: 0 18px; }
    .content-area { padding: 22px 18px 42px; }
    .hero { grid-template-columns: 1fr; padding-top: 35px; }
    .auth-wrap { grid-template-columns: 1fr; }
    .auth-side { display: none; }
}

@media (max-width: 680px) {
    .desktop-only { display: none !important; }
    .page-heading { display: grid; }
    .page-actions { justify-content: flex-start; }
    .grid-2, .grid-3, .grid-4, .course-grid, .feature-grid, .form-grid { grid-template-columns: 1fr; }
    .form-group.full { grid-column: auto; }
    .public-nav { height: 68px; padding: 0 16px; }
    .public-nav .brand small, .public-nav .brand strong { max-width: 145px; }
    .public-nav-actions .button:first-child { display: none; }
    .hero { padding: 35px 16px 55px; gap: 34px; }
    .hero h1 { font-size: 40px; }
    .features-section { padding: 55px 16px; }
    .auth-panel { padding: 34px 22px; }
    .auth-panel h1 { font-size: 27px; }
    .requirement-list { grid-template-columns: 1fr; }
    .install-body, .install-head { padding: 22px; }
    .topbar-title h1 { font-size: 17px; }
    .button { min-height: 40px; }
}

.button:disabled,
.button[disabled] { opacity: .55; cursor: not-allowed; transform: none; pointer-events: none; }

/* Update application module */
.update-result { margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: #fbfcfe; display: grid; gap: 12px; }
.update-result.has-update { border-color: #f3d38a; background: #fffaf0; }
.update-result.is-current { border-color: #b8e0c8; background: #f4fbf7; }
.update-result h3 { margin: 8px 0 0; }
.compact-list { margin: 0; padding-left: 20px; display: grid; gap: 5px; color: var(--muted); font-size: 13px; }
.update-check-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.update-check { padding: 14px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 6px; background: #fbfcfe; }
.update-check strong { font-size: 13px; }
.update-check span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.update-check.ok { border-color: #b8e0c8; background: #f4fbf7; }
.update-check.bad { border-color: #f5c2c7; background: #fff6f6; }
.update-check.warn { border-color: #f3d38a; background: #fffaf0; }
.text-muted { color: var(--muted); }
@media (max-width: 1100px) { .update-check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .update-check-grid { grid-template-columns: 1fr; } }

/* =========================================================
   Administrator top navigation layout — v1.4.1
   Sidebar admin dipindahkan ke atas agar area kerja penuh.
   ========================================================= */
body.admin-top-layout { background: var(--canvas); }
.admin-shell { min-height: 100vh; width: 100%; }
.admin-header { position: sticky; top: 0; z-index: 70; background: #fff; box-shadow: 0 8px 28px rgba(23, 43, 77, .07); }
.admin-header-main { min-height: 72px; display: grid; grid-template-columns: minmax(230px, 1fr) minmax(180px, .8fr) minmax(300px, 1fr); align-items: center; gap: 22px; padding: 10px 28px; border-bottom: 1px solid var(--line); }
.admin-brand { min-width: 0; display: flex; align-items: center; gap: 11px; color: var(--navy-2); }
.admin-brand:hover { color: var(--navy-2); }
.admin-brand img { width: 44px; height: 44px; flex: 0 0 44px; object-fit: contain; border: 1px solid #dbe4ee; border-radius: 12px; background: #fff; padding: 4px; }
.admin-brand .brand-mark { width: 44px; height: 44px; flex: 0 0 44px; }
.admin-brand-text { min-width: 0; }
.admin-brand-text strong, .admin-brand-text small { display: block; }
.admin-brand-text strong { max-width: 330px; color: var(--navy-2); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-brand-text small { margin-top: 1px; color: var(--muted); font-size: 10px; }
.admin-page-title { min-width: 0; text-align: center; }
.admin-page-title small, .mobile-page-title small { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
.admin-page-title h1 { margin: 2px 0 0; color: var(--ink); font-size: 18px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-user-menu { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.admin-user-meta { min-width: 0; max-width: 220px; }
.admin-user-meta strong, .admin-user-meta small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-user-meta strong { font-size: 12px; }
.admin-user-meta small { color: var(--muted); font-size: 10px; }
.admin-menu-button { border-color: #d7e0ea; }

.admin-topnav { min-height: 54px; background: linear-gradient(135deg, var(--navy-2), var(--navy)); }
.admin-topnav-inner { width: 100%; min-height: 54px; display: flex; align-items: stretch; gap: 2px; padding: 0 24px; }
.topnav-link, .topnav-dropbtn { position: relative; min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border: 0; border-radius: 0; color: rgba(255,255,255,.82); background: transparent; cursor: pointer; font-size: 12px; font-weight: 750; white-space: nowrap; transition: background .18s ease, color .18s ease; }
.topnav-link:hover, .topnav-dropbtn:hover, .topnav-dropdown:hover > .topnav-dropbtn { color: #fff; background: rgba(255,255,255,.09); }
.topnav-link.active, .topnav-dropdown.active > .topnav-dropbtn { color: #fff; background: rgba(255,255,255,.11); }
.topnav-link.active::after, .topnav-dropdown.active > .topnav-dropbtn::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--gold); }
.topnav-icon { min-width: 18px; text-align: center; color: #cfeaff; font-size: 16px; line-height: 1; }
.topnav-chevron { margin-left: 1px; color: rgba(255,255,255,.58); font-size: 13px; transition: transform .18s ease; }
.topnav-dropdown { position: relative; }
.topnav-dropdown.open .topnav-chevron { transform: rotate(180deg); }
.topnav-dropdown-menu { position: absolute; top: calc(100% + 7px); left: 0; z-index: 90; width: 310px; display: none; padding: 8px; border: 1px solid #dce3ec; border-radius: 14px; background: #fff; box-shadow: 0 20px 48px rgba(16, 36, 61, .18); }
.topnav-dropdown:hover > .topnav-dropdown-menu, .topnav-dropdown:focus-within > .topnav-dropdown-menu, .topnav-dropdown.open > .topnav-dropdown-menu { display: grid; gap: 3px; }
.topnav-dropdown-link { min-width: 0; display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 9px; padding: 10px; color: var(--ink); border-radius: 10px; }
.topnav-dropdown-link:hover { color: var(--navy); background: #f1f6fb; }
.topnav-dropdown-link.active { color: var(--navy); background: #eaf3fb; box-shadow: inset 3px 0 0 var(--gold); }
.topnav-dropdown-icon { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #dce8f3; border-radius: 10px; background: #f4f8fc; color: var(--navy); font-size: 17px; }
.topnav-dropdown-link strong, .topnav-dropdown-link small { display: block; }
.topnav-dropdown-link strong { font-size: 12px; line-height: 1.3; }
.topnav-dropdown-link small { margin-top: 2px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.admin-nav-version { margin-left: auto; align-self: center; padding: 5px 9px; color: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; font-size: 9px; font-weight: 800; }

.admin-main-area { width: 100%; min-height: calc(100vh - 126px); margin: 0; }
.admin-content-area { width: 100%; max-width: none; padding: 26px 28px 52px; }
.mobile-page-title { padding: 15px 18px 0; }
.mobile-page-title h1 { margin: 2px 0 0; font-size: 18px; line-height: 1.25; }
.admin-menu-backdrop { display: none; }

@media (max-width: 1180px) and (min-width: 901px) {
    .admin-header-main { grid-template-columns: minmax(220px, 1fr) minmax(260px, 1fr); }
    .admin-page-title { display: none !important; }
    .admin-user-menu { justify-self: end; }
    .admin-topnav-inner { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; padding: 0 18px; }
    .admin-nav-version { flex: 0 0 auto; }
    .topnav-link, .topnav-dropbtn { flex: 0 0 auto; }
}

@media (max-width: 900px) {
    .admin-header { position: sticky; top: 0; }
    .admin-header-main { min-height: 66px; display: flex; justify-content: space-between; gap: 10px; padding: 9px 14px; }
    .admin-brand { flex: 1 1 auto; min-width: 0; }
    .admin-brand img, .admin-brand .brand-mark { width: 40px; height: 40px; flex-basis: 40px; border-radius: 10px; }
    .admin-brand-text strong { max-width: 220px; font-size: 12px; }
    .admin-brand-text small { font-size: 9px; }
    .admin-user-menu { flex: 0 0 auto; gap: 7px; }
    .admin-user-meta { display: none; }
    .admin-user-menu .avatar { display: none; }
    .admin-user-menu .button { padding-inline: 10px; }

    .admin-topnav { position: fixed; top: 66px; left: 0; bottom: 0; z-index: 85; width: min(330px, 88vw); min-height: 0; overflow-y: auto; transform: translateX(-105%); transition: transform .22s ease; box-shadow: 14px 0 38px rgba(7,29,51,.22); }
    body.admin-menu-open .admin-topnav { transform: translateX(0); }
    .admin-topnav-inner { min-height: 100%; display: block; padding: 13px 10px 28px; }
    .topnav-link, .topnav-dropbtn { width: 100%; min-height: 46px; justify-content: flex-start; padding: 9px 12px; border-radius: 10px; font-size: 13px; }
    .topnav-link.active::after, .topnav-dropdown.active > .topnav-dropbtn::after { top: 9px; bottom: 9px; left: 0; right: auto; width: 3px; height: auto; border-radius: 0 3px 3px 0; }
    .topnav-dropbtn .topnav-chevron { margin-left: auto; }
    .topnav-dropdown-menu { position: static; width: auto; margin: 3px 5px 8px 28px; padding: 5px; border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.07); box-shadow: none; }
    .topnav-dropdown:hover > .topnav-dropdown-menu, .topnav-dropdown:focus-within > .topnav-dropdown-menu { display: none; }
    .topnav-dropdown.open > .topnav-dropdown-menu { display: grid; }
    .topnav-dropdown-link { color: rgba(255,255,255,.86); grid-template-columns: 30px 1fr; padding: 8px; }
    .topnav-dropdown-link:hover, .topnav-dropdown-link.active { color: #fff; background: rgba(255,255,255,.1); }
    .topnav-dropdown-link.active { box-shadow: inset 3px 0 0 var(--gold); }
    .topnav-dropdown-icon { width: 30px; height: 30px; border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.07); color: #d7efff; font-size: 14px; }
    .topnav-dropdown-link strong { font-size: 11px; }
    .topnav-dropdown-link small { color: rgba(255,255,255,.55); font-size: 9px; }
    .admin-nav-version { display: inline-block; margin: 13px 10px 0; }
    .admin-menu-backdrop { display: none; position: fixed; inset: 66px 0 0; z-index: 80; background: rgba(16,24,40,.48); }
    body.admin-menu-open .admin-menu-backdrop { display: block; }
    .admin-content-area { padding: 18px 16px 42px; }
}

@media (max-width: 560px) {
    .admin-brand-text strong { max-width: 145px; }
    .admin-brand-text small { display: none; }
    .admin-user-menu .button { font-size: 11px; }
    .admin-content-area { padding-left: 12px; padding-right: 12px; }
}

/* Report export cards — v1.4.2 */
.report-export-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft, #f8fafc);
}
.report-export-copy { min-width: 0; }
.report-export-copy h4 { margin: 0 0 5px; font-size: 15px; }
.report-export-copy p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.report-export-card .button { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 640px) {
    .report-export-card { align-items: flex-start; flex-direction: column; }
    .report-export-card .button { width: 100%; justify-content: center; }
}


/* v1.4.3 - perbaikan form materi dosen dan tampilan area kerja */
.role-lecturer .content-area { width: 100%; }
.lecturer-form-card { width: 100%; max-width: 1180px; overflow: hidden; }
.material-editor-header { align-items: flex-start; }
.card-header-note { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.material-form-grid { align-items: start; }
.material-form .file-input { padding: 8px 10px; background: #fbfcfe; }
.material-form .file-input::file-selector-button { margin-right: 10px; border: 0; border-radius: 8px; padding: 8px 12px; background: #eaf3fb; color: var(--navy); font-weight: 800; cursor: pointer; }
.material-form .textarea-compact { min-height: 96px; }
.material-form .material-content-editor { min-height: 220px; }
.current-file-link { display: inline-flex; width: fit-content; margin-top: 2px; font-size: 12px; font-weight: 800; }
.material-form-actions { padding-top: 2px; border-top: 1px solid #eef1f5; }
.lecturer-form-alert { max-width: 1180px; }

@media (max-width: 1100px) {
    .lecturer-form-card, .lecturer-form-alert { max-width: none; }
}

@media (max-width: 760px) {
    .material-editor-header { align-items: stretch; flex-direction: column; }
    .material-editor-header .badge { width: fit-content; }
    .material-form-grid { grid-template-columns: 1fr; }
    .material-form-grid .form-group.full { grid-column: auto; }
    .material-form .material-content-editor { min-height: 180px; }
    .material-form-actions .button { width: 100%; justify-content: center; }
}

/* =========================================================
   v1.4.4 — Login As, pemeriksaan sistem, dan stabilitas UI
   ========================================================= */
.button-login-as {
    border-color: #bfd7ee;
    background: #eef6ff;
    color: var(--navy);
}
.button-login-as:hover { background: #dfefff; color: var(--navy-2); }
.user-table-actions { min-width: 300px; }
.user-table-actions form { margin: 0; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.pagination-info { color: var(--muted); font-size: 12px; font-weight: 750; }

.impersonation-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 18px;
    padding: 13px 15px;
    border: 1px solid #efcf80;
    border-radius: 13px;
    background: #fff8e8;
    color: #6f4b00;
    box-shadow: 0 7px 20px rgba(111, 75, 0, .06);
}
.impersonation-banner > div { min-width: 0; }
.impersonation-banner strong,
.impersonation-banner span { display: block; }
.impersonation-banner strong { margin-bottom: 2px; font-size: 13px; }
.impersonation-banner span { font-size: 12px; line-height: 1.45; }
.impersonation-banner form { flex: 0 0 auto; margin: 0; }

.system-overview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}
.system-overview strong { font-size: 14px; }
.system-overview span { color: var(--muted); font-size: 11px; }
.system-overview-ok { border-color: #b8e0c8; background: #f4fbf7; }
.system-overview-warn { border-color: #f3d38a; background: #fffaf0; }
.system-overview-bad { border-color: #f5c2c7; background: #fff6f6; }
.system-check-list { display: grid; gap: 9px; }
.system-check-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fbfcfe;
}
.system-check-row.status-ok { border-color: #cfe6d7; background: #f7fcf9; }
.system-check-row.status-warn { border-color: #f0db9d; background: #fffaf0; }
.system-check-row.status-bad { border-color: #f1c9c6; background: #fff7f7; }
.system-check-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--line);
    font-weight: 900;
}
.status-ok .system-check-icon { color: var(--success); }
.status-warn .system-check-icon { color: var(--warning); }
.status-bad .system-check-icon { color: var(--danger); }
.system-check-copy { min-width: 0; }
.system-check-copy strong,
.system-check-copy span,
.system-check-copy small { display: block; }
.system-check-copy strong { font-size: 13px; }
.system-check-copy span { margin-top: 2px; color: var(--muted); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.system-check-copy small { margin-top: 4px; color: var(--ink); font-size: 10px; line-height: 1.4; }

@media (max-width: 760px) {
    .user-table-actions { min-width: 0; }
    .impersonation-banner,
    .system-overview { align-items: stretch; flex-direction: column; }
    .impersonation-banner form,
    .impersonation-banner .button { width: 100%; }
    .impersonation-banner .button { justify-content: center; }
    .system-check-row { grid-template-columns: 34px minmax(0,1fr); }
    .system-check-row > .badge { grid-column: 2; width: fit-content; }
}

/* =========================================================
   Administrator left navigation layout — v1.4.5
   Menu admin kembali ke sidebar kiri yang konsisten dengan
   portal dosen/mahasiswa. Rule top-navigation lama tetap
   tidak aktif karena class admin-top-layout tidak digunakan.
   ========================================================= */
.role-admin .admin-sidebar .sidebar-nav { padding-bottom: 24px; }
.role-admin .admin-sidebar .nav-label { padding-top: 14px; }
.role-admin .admin-sidebar .sidebar-link { min-height: 42px; font-size: 13px; }
.role-admin .admin-sidebar .nav-icon { width: 22px; font-size: 17px; }
.role-admin .admin-main-area-left { width: calc(100% - 270px); margin-left: 270px; min-height: 100vh; }
.role-admin .admin-topbar-left { z-index: 35; }
.role-admin .admin-content-left { max-width: 1800px; }

@media (max-width: 900px) {
    .role-admin .admin-main-area-left { width: 100%; margin-left: 0; }
    .role-admin .admin-sidebar { transform: translateX(-100%); }
    .role-admin.sidebar-open .admin-sidebar { transform: translateX(0); }
}

/* v1.4.6 - updater reliability and cache-recovery UI */
.update-success-notice { align-items: center; flex-wrap: wrap; }
.update-success-notice > span { flex: 1 1 520px; }
.update-success-notice .button { flex: 0 0 auto; }
@media (max-width: 700px) {
    .update-success-notice { align-items: stretch; }
    .update-success-notice .button { width: 100%; }
}

/* =========================================================
   v1.4.7 — Filter Program Studi & pagination daftar kelas
   ========================================================= */
.course-list-header { align-items: center; gap: 14px; flex-wrap: wrap; }
.course-list-header > div { min-width: 0; flex: 1 1 420px; }
.course-list-header p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.course-filter-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1.35fr) minmax(210px, 1fr) minmax(170px, .75fr) minmax(130px, .55fr) auto;
    align-items: end;
    gap: 12px;
}
.course-filter-grid .form-group { margin: 0; min-width: 0; }
.course-filter-actions { display: flex; align-items: center; gap: 8px; min-height: 42px; }
.course-filter-actions .button { white-space: nowrap; }
.course-program-study {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    margin-top: 6px;
    padding: 3px 8px;
    border: 1px solid #d8e5f0;
    border-radius: 999px;
    background: #f4f8fc;
    color: var(--navy);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.35;
    white-space: normal;
}
.course-table-actions { min-width: 170px; }
.course-table-actions form { margin: 0; }
.course-table-wrap tbody tr { vertical-align: top; }

@media (max-width: 1280px) {
    .course-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .course-filter-search { grid-column: 1 / -1; }
    .course-filter-actions { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
    .course-filter-grid { grid-template-columns: 1fr; }
    .course-filter-search,
    .course-filter-actions { grid-column: auto; }
    .course-filter-actions { align-items: stretch; flex-direction: column; }
    .course-filter-actions .button { width: 100%; justify-content: center; }
    .course-table-actions { min-width: 0; }
}

/* ==========================================================
   v1.4.9 — Filter Program Studi & pagination Absensi Kelas
   ========================================================== */
.attendance-list-header > div > p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12px;
}
.attendance-filter-grid {
    display: grid;
    grid-template-columns: minmax(230px, 1.45fr) minmax(180px, 1fr) minmax(150px, .82fr) minmax(120px, .58fr) auto;
    gap: 10px;
    align-items: end;
}
.attendance-filter-grid .form-group { margin: 0; min-width: 0; }
.attendance-filter-actions { display: flex; align-items: center; gap: 8px; min-height: 42px; }
.attendance-filter-actions .button { white-space: nowrap; }
.attendance-program-study {
    display: block;
    width: fit-content;
    margin-top: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--surface-soft, #f3f7fb);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.35;
}
.attendance-table-wrap tbody td { vertical-align: top; }

@media (max-width: 1180px) {
    .attendance-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .attendance-filter-search { grid-column: 1 / -1; }
    .attendance-filter-actions { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
    .attendance-filter-grid { grid-template-columns: 1fr; }
    .attendance-filter-search,
    .attendance-filter-actions { grid-column: auto; }
    .attendance-filter-actions { align-items: stretch; flex-direction: column; }
    .attendance-filter-actions .button { width: 100%; justify-content: center; }
}

/* =========================================================
   v1.4.12 — Pilih & hapus pengguna secara massal
   ========================================================= */
.bulk-user-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface-soft, #f8fafc);
}
.bulk-user-toolbar-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.bulk-user-toolbar-info strong { font-size: 13px; color: var(--text); }
.bulk-user-toolbar-info span { font-size: 12px; color: var(--muted); }
.user-select-col { width: 72px; text-align: center; white-space: nowrap; }
.user-check-label { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font-size: 11px; font-weight: 800; color: var(--muted); }
.user-row-check,
#user-select-all { width: 17px; height: 17px; margin: 0; cursor: pointer; accent-color: var(--primary); }
.user-check-disabled { color: var(--muted); opacity: .6; }
@media (max-width: 720px) {
    .bulk-user-toolbar { align-items: stretch; flex-direction: column; }
    .bulk-user-toolbar .button { width: 100%; justify-content: center; }
    .user-select-col { width: 58px; }
    .user-check-label span { display: none; }
}


/* =========================================================
   v1.4.13 — Pengumuman Split View + filter + pagination
   ========================================================= */
.announcement-split {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(320px, .85fr);
    gap: 18px;
    align-items: start;
}
.announcement-single { display: block; }
.announcement-list-card,
.announcement-compose-card { min-width: 0; }
.announcement-compose-card {
    position: sticky;
    top: 106px;
    max-height: calc(100vh - 126px);
    overflow: auto;
}
.announcement-list-header > div > p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12px;
}
.announcement-filter-grid {
    display: grid;
    grid-template-columns: minmax(210px, 1.4fr) minmax(155px, .8fr) minmax(155px, .8fr) minmax(90px, .42fr) auto;
    gap: 10px;
    align-items: end;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}
.announcement-filter-grid .form-group { margin: 0; min-width: 0; }
.announcement-filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 45px;
}
.announcement-filter-actions .button { white-space: nowrap; }
.announcement-list-wrap { min-height: 180px; }
.announcement-title-wrap { min-width: 0; }
.announcement-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}
.announcement-title-row h3 { min-width: 0; overflow-wrap: anywhere; }
.announcement-body {
    line-height: 1.65;
    overflow-wrap: anywhere;
}
.announcement-compose-textarea { min-height: 170px; }
.announcement-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    margin-top: 4px;
    border-top: 1px solid var(--line);
}
.announcement-page-info { color: var(--muted); font-size: 12px; }
.announcement-page-actions { display: flex; gap: 8px; }

@media (max-width: 1180px) {
    .announcement-split { grid-template-columns: minmax(0, 1.55fr) minmax(300px, .9fr); }
    .announcement-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .announcement-filter-search { grid-column: 1 / -1; }
    .announcement-filter-actions { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    .announcement-split { grid-template-columns: 1fr; }
    .announcement-compose-card { position: static; max-height: none; order: -1; }
}
@media (max-width: 650px) {
    .announcement-filter-grid { grid-template-columns: 1fr; }
    .announcement-filter-search,
    .announcement-filter-actions { grid-column: auto; }
    .announcement-filter-actions { align-items: stretch; flex-direction: column; }
    .announcement-filter-actions .button { width: 100%; justify-content: center; }
    .announcement-head { flex-direction: column; }
    .announcement-head > form { align-self: flex-start; }
    .announcement-pagination { align-items: stretch; flex-direction: column; }
    .announcement-page-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .announcement-page-actions .button { width: 100%; }
}

/* =========================================================
   v1.4.15 — Modern Public Landing Page
   ========================================================= */
.landing-body {
    min-height: 100vh;
    background: #f6f9fc;
    color: #172235;
    overflow-x: hidden;
}
.landing-page { min-height: 100vh; }
.landing-container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.landing-nav-wrap {
    position: sticky;
    top: 0;
    z-index: 90;
    background: rgba(248, 251, 254, .88);
    border-bottom: 1px solid rgba(216, 226, 237, .82);
    backdrop-filter: blur(18px);
}
.landing-nav {
    width: min(1180px, calc(100% - 40px));
    min-height: 78px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(250px, 1fr) auto minmax(250px, 1fr);
    align-items: center;
    gap: 24px;
}
.landing-brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; color: #10375e; }
.landing-brand:hover { color: #10375e; }
.landing-brand img,
.landing-footer-brand img {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    object-fit: contain;
    padding: 3px;
    border: 1px solid #dbe5ef;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(20, 54, 88, .08);
}
.landing-brand-mark {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: linear-gradient(135deg, #f7c555, #ffe5a3);
    color: #0b2947;
    font-size: 24px;
    font-weight: 900;
}
.landing-brand-copy { min-width: 0; }
.landing-brand-copy strong,
.landing-brand-copy small { display: block; }
.landing-brand-copy strong { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.landing-brand-copy small { margin-top: 1px; color: #7b8998; font-size: 10px; }
.landing-nav-links { display: flex; align-items: center; justify-content: center; gap: 30px; }
.landing-nav-links a { position: relative; color: #506176; font-size: 12px; font-weight: 800; }
.landing-nav-links a::after { content: ''; position: absolute; left: 50%; right: 50%; bottom: -8px; height: 2px; background: #1e6fb9; transition: .18s ease; }
.landing-nav-links a:hover { color: #123a63; }
.landing-nav-links a:hover::after { left: 0; right: 0; }
.landing-nav-actions { display: flex; justify-content: flex-end; gap: 8px; }
.landing-login-button { min-width: 82px; }

.landing-hero {
    position: relative;
    overflow: hidden;
    padding: 92px 0 84px;
    background:
        radial-gradient(circle at 76% 22%, rgba(56, 157, 217, .15), transparent 25%),
        radial-gradient(circle at 13% 2%, rgba(242, 184, 75, .12), transparent 21%),
        linear-gradient(180deg, #f8fbfe 0%, #edf4fa 100%);
}
.landing-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #dbe5ef 20%, #dbe5ef 80%, transparent);
}
.landing-hero-orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(2px); }
.landing-hero-orb-one { width: 380px; height: 380px; right: -190px; top: 30px; border: 1px solid rgba(30,111,185,.12); box-shadow: inset 0 0 90px rgba(30,111,185,.05); }
.landing-hero-orb-two { width: 230px; height: 230px; left: -120px; bottom: -90px; border: 1px solid rgba(242,184,75,.16); }
.landing-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(430px, .98fr); align-items: center; gap: 72px; }
.landing-hero-copy { min-width: 0; }
.landing-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border: 1px solid #d7e6f3;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    color: #174d7f;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .09em;
    box-shadow: 0 8px 24px rgba(29, 71, 108, .05);
}
.landing-eyebrow > span { width: 7px; height: 7px; border-radius: 50%; background: #28a279; box-shadow: 0 0 0 4px rgba(40,162,121,.11); }
.landing-hero h1 {
    margin: 20px 0 18px;
    max-width: 760px;
    color: #0b2947;
    font-size: clamp(46px, 5.4vw, 72px);
    line-height: 1.02;
    letter-spacing: -.052em;
}
.landing-hero h1 em { color: #1e6fb9; font-style: normal; }
.landing-hero-lead { max-width: 670px; margin: 0; color: #58697d; font-size: 17px; line-height: 1.8; }
.landing-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.landing-button-lg { min-height: 48px; padding: 10px 18px; border-radius: 12px; }
.landing-login-hint { display: flex; align-items: center; gap: 9px; margin-top: 22px; color: #728195; font-size: 11px; }
.landing-login-hint strong { color: #40566d; }
.landing-check { width: 21px; height: 21px; display: grid; place-items: center; flex: 0 0 21px; border-radius: 50%; background: #e2f6ee; color: #17835f; font-size: 11px; font-weight: 900; }

.landing-hero-visual { position: relative; min-width: 0; padding: 18px 14px 24px; }
.landing-dashboard-card {
    position: relative;
    z-index: 2;
    padding: 21px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 25px;
    background: linear-gradient(145deg, #0b2947 0%, #123f6b 58%, #1d72b8 100%);
    color: #fff;
    box-shadow: 0 32px 80px rgba(11,41,71,.25);
}
.landing-dashboard-card::before { content: ''; position: absolute; inset: 1px; border-radius: 24px; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 40%); }
.landing-dashboard-top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
.landing-dashboard-top small,
.landing-dashboard-top strong { display: block; }
.landing-dashboard-top small { color: rgba(255,255,255,.56); font-size: 9px; letter-spacing: .11em; }
.landing-dashboard-top strong { margin-top: 3px; max-width: 250px; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.landing-live { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.72); font-size: 9px; font-weight: 800; white-space: nowrap; }
.landing-live i { width: 6px; height: 6px; border-radius: 50%; background: #64e0af; box-shadow: 0 0 0 4px rgba(100,224,175,.1); }
.landing-dashboard-stats { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 17px; }
.landing-dashboard-stats article { display: flex; align-items: center; gap: 11px; min-height: 78px; padding: 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 15px; background: rgba(255,255,255,.075); }
.landing-stat-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; border-radius: 10px; background: rgba(255,255,255,.11); color: #d9efff; }
.landing-dashboard-stats strong,
.landing-dashboard-stats small { display: block; }
.landing-dashboard-stats strong { font-size: 22px; line-height: 1.05; }
.landing-dashboard-stats small { margin-top: 4px; color: rgba(255,255,255,.57); font-size: 9px; }
.landing-dashboard-modules { position: relative; display: grid; gap: 8px; margin-top: 12px; }
.landing-dashboard-module { display: grid; grid-template-columns: 35px minmax(0,1fr); align-items: center; gap: 10px; padding: 9px 11px; border-radius: 12px; background: rgba(255,255,255,.055); }
.landing-dashboard-module > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: rgba(242,184,75,.16); color: #ffd981; font-size: 9px; font-weight: 900; }
.landing-dashboard-module strong,
.landing-dashboard-module small { display: block; }
.landing-dashboard-module strong { font-size: 10px; }
.landing-dashboard-module small { margin-top: 1px; color: rgba(255,255,255,.5); font-size: 8px; }
.landing-floating-card { position: absolute; z-index: 3; border: 1px solid rgba(211,225,238,.9); border-radius: 14px; background: rgba(255,255,255,.94); box-shadow: 0 18px 42px rgba(20,54,88,.13); backdrop-filter: blur(12px); }
.landing-floating-card-a { left: -25px; bottom: -2px; display: flex; align-items: center; gap: 9px; padding: 10px 13px; }
.landing-floating-card-a > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: #e7f6ef; color: #16815d; font-weight: 900; }
.landing-floating-card-a strong,
.landing-floating-card-a small { display: block; }
.landing-floating-card-a strong { color: #19324c; font-size: 10px; }
.landing-floating-card-a small { color: #7a8998; font-size: 8px; }
.landing-floating-card-b { right: -18px; top: -4px; padding: 11px 14px; text-align: center; }
.landing-floating-card-b strong,
.landing-floating-card-b small { display: block; }
.landing-floating-card-b strong { color: #153b61; font-size: 18px; }
.landing-floating-card-b small { color: #718195; font-size: 8px; }

.landing-metrics { position: relative; z-index: 5; margin-top: -1px; background: #fff; border-bottom: 1px solid #e4ebf2; }
.landing-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
.landing-metric-grid article { position: relative; padding: 25px 22px; text-align: center; }
.landing-metric-grid article:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 25%; bottom: 25%; width: 1px; background: #e5ebf2; }
.landing-metric-grid strong,
.landing-metric-grid span { display: block; }
.landing-metric-grid strong { color: #0c3459; font-size: 28px; letter-spacing: -.03em; }
.landing-metric-grid span { margin-top: 3px; color: #758497; font-size: 10px; font-weight: 700; }

.landing-section { padding: 92px 0; background: #fff; }
.landing-section:nth-of-type(even) { background: #f7fafc; }
.landing-section-head { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 38px; }
.landing-section-head > div { max-width: 710px; }
.landing-section-head > p { max-width: 430px; margin: 0 0 4px; color: #718095; font-size: 13px; line-height: 1.75; }
.landing-section-head-center { justify-content: center; text-align: center; }
.landing-section-label { display: block; margin-bottom: 10px; color: #1e6fb9; font-size: 9px; font-weight: 900; letter-spacing: .15em; }
.landing-section-head h2,
.landing-cta-card h2 { margin: 0; color: #0d2e4e; font-size: clamp(31px, 4vw, 46px); line-height: 1.12; letter-spacing: -.035em; }

.landing-bento { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.landing-feature { position: relative; min-height: 245px; padding: 24px; overflow: hidden; border: 1px solid #e0e8f0; border-radius: 20px; background: #fff; box-shadow: 0 14px 40px rgba(34,60,89,.055); }
.landing-feature-wide { grid-column: span 2; display: grid; grid-template-columns: minmax(0,1fr) minmax(180px,.75fr); gap: 24px; align-items: center; }
.landing-feature-primary { color: #fff; border-color: transparent; background: linear-gradient(135deg, #0b2947, #174f81 70%, #1e6fb9); box-shadow: 0 20px 50px rgba(11,41,71,.16); }
.landing-feature-soft { background: linear-gradient(135deg, #f1f7fc, #fff); }
.landing-feature-icon { width: 45px; height: 45px; display: grid; place-items: center; margin-bottom: 24px; border-radius: 13px; background: #edf5fb; color: #164c7b; font-size: 20px; font-weight: 800; }
.landing-feature-wide .landing-feature-icon { position: absolute; right: 22px; top: 20px; margin: 0; }
.landing-feature-primary .landing-feature-icon { background: rgba(255,255,255,.12); color: #fff; }
.landing-feature-no { display: block; margin-bottom: 7px; color: #9aabba; font-size: 9px; font-weight: 900; letter-spacing: .11em; }
.landing-feature-primary .landing-feature-no { color: rgba(255,255,255,.48); }
.landing-feature h3 { margin: 0 0 9px; color: #18324c; font-size: 19px; }
.landing-feature-primary h3 { color: #fff; }
.landing-feature p { max-width: 520px; margin: 0; color: #718195; font-size: 12px; line-height: 1.7; }
.landing-feature-primary p { color: rgba(255,255,255,.67); }
.landing-feature-preview { display: grid; gap: 8px; align-self: end; }
.landing-feature-preview span { padding: 10px 12px; border: 1px solid rgba(255,255,255,.11); border-radius: 10px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.78); font-size: 9px; font-weight: 700; }
.landing-chip-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.landing-chip-row span { padding: 7px 9px; border: 1px solid #d8e6f2; border-radius: 999px; background: #fff; color: #4b6884; font-size: 9px; font-weight: 800; }

.landing-role-section { background: linear-gradient(180deg, #f6f9fc, #eef4f9); }
.landing-role-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.landing-role-card { position: relative; padding: 28px; border: 1px solid #dde7ef; border-radius: 21px; background: #fff; box-shadow: 0 15px 44px rgba(28,56,86,.055); }
.landing-role-card-featured { border-color: #c9deee; box-shadow: 0 22px 55px rgba(23,76,124,.1); transform: translateY(-8px); }
.landing-role-badge { display: inline-flex; padding: 5px 8px; border-radius: 999px; background: #edf5fb; color: #1c6099; font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.landing-role-avatar { width: 48px; height: 48px; display: grid; place-items: center; margin-top: 22px; border-radius: 15px; background: linear-gradient(135deg, #0d3459, #1e6fb9); color: #fff; font-size: 18px; font-weight: 900; box-shadow: 0 12px 26px rgba(18,58,99,.16); }
.landing-role-card h3 { margin: 17px 0 14px; color: #18324d; font-size: 18px; }
.landing-role-card ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.landing-role-card li { position: relative; padding-left: 20px; color: #6d7d90; font-size: 11px; }
.landing-role-card li::before { content: '✓'; position: absolute; left: 0; top: 0; color: #208361; font-weight: 900; }

.landing-announcement-section { background: #fff; }
.landing-text-link { align-self: flex-end; color: #1d679f; font-size: 11px; font-weight: 800; white-space: nowrap; }
.landing-announcement-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.landing-announcement-card { padding: 24px; border: 1px solid #e0e8ef; border-radius: 18px; background: #fff; box-shadow: 0 12px 32px rgba(29,55,83,.045); }
.landing-announcement-card > span { color: #1f6da8; font-size: 9px; font-weight: 900; letter-spacing: .06em; }
.landing-announcement-card h3 { margin: 12px 0 8px; color: #18324c; font-size: 15px; line-height: 1.4; }
.landing-announcement-card p { margin: 0; color: #778699; font-size: 11px; line-height: 1.7; }

.landing-cta-section { padding: 34px 0 92px; background: #fff; }
.landing-cta-card { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 50px; padding: 46px; border-radius: 25px; background: linear-gradient(125deg, #092743, #0f3d67 58%, #1b6fae); color: #fff; box-shadow: 0 28px 65px rgba(11,41,71,.18); }
.landing-cta-card::after { content: ''; position: absolute; width: 360px; height: 360px; right: -160px; top: -170px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.landing-section-label-light { color: #91d1ff; }
.landing-cta-card h2 { max-width: 690px; color: #fff; }
.landing-cta-card p { max-width: 610px; margin: 14px 0 0; color: rgba(255,255,255,.62); font-size: 12px; }
.landing-cta-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.landing-cta-button { min-height: 46px; color: #0b2947; background: #fff; border-color: #fff; }
.landing-cta-button:hover { color: #0b2947; background: #eef6fc; }
.landing-cta-ghost { min-height: 46px; color: #fff; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); }
.landing-cta-ghost:hover { color: #fff; background: rgba(255,255,255,.12); }

.landing-footer { padding: 28px 0; border-top: 1px solid #e2e9f0; background: #f7fafc; }
.landing-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.landing-footer-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.landing-footer-brand img,
.landing-footer-brand .landing-brand-mark { width: 36px; height: 36px; flex-basis: 36px; border-radius: 10px; }
.landing-footer-brand strong,
.landing-footer-brand small { display: block; }
.landing-footer-brand strong { color: #173654; font-size: 11px; }
.landing-footer-brand small { color: #8491a1; font-size: 8px; }
.landing-footer p { margin: 0; color: #8793a2; font-size: 9px; text-align: right; }

@media (max-width: 1080px) {
    .landing-nav { grid-template-columns: minmax(230px,1fr) auto; }
    .landing-nav-links { display: none; }
    .landing-hero-grid { grid-template-columns: 1fr 430px; gap: 38px; }
    .landing-hero h1 { font-size: clamp(44px, 5.5vw, 60px); }
    .landing-bento { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .landing-feature-wide { grid-column: span 2; }
}

@media (max-width: 860px) {
    .landing-container,
    .landing-nav { width: min(100% - 32px, 720px); }
    .landing-hero { padding: 65px 0 70px; }
    .landing-hero-grid { grid-template-columns: 1fr; gap: 44px; }
    .landing-hero-copy { text-align: center; }
    .landing-hero-lead { margin-left: auto; margin-right: auto; }
    .landing-hero-actions,
    .landing-login-hint { justify-content: center; }
    .landing-hero-visual { width: min(100%, 560px); margin: 0 auto; }
    .landing-metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .landing-metric-grid article:nth-child(2)::after { display: none; }
    .landing-metric-grid article:nth-child(-n+2) { border-bottom: 1px solid #e5ebf2; }
    .landing-section { padding: 72px 0; }
    .landing-section-head { align-items: flex-start; flex-direction: column; gap: 15px; }
    .landing-role-grid { grid-template-columns: 1fr; }
    .landing-role-card-featured { transform: none; }
    .landing-announcement-grid { grid-template-columns: 1fr; }
    .landing-cta-card { align-items: flex-start; flex-direction: column; padding: 36px; }
    .landing-cta-actions { justify-content: flex-start; }
}

@media (max-width: 620px) {
    .landing-container,
    .landing-nav { width: min(100% - 26px, 560px); }
    .landing-nav { min-height: 68px; gap: 10px; }
    .landing-brand img,
    .landing-brand-mark { width: 38px; height: 38px; flex-basis: 38px; border-radius: 11px; }
    .landing-brand-copy strong { max-width: 165px; font-size: 11px; }
    .landing-brand-copy small { font-size: 8px; }
    .landing-register-top { display: none; }
    .landing-nav-actions .button { min-height: 38px; padding: 7px 11px; font-size: 11px; }
    .landing-hero { padding: 50px 0 58px; }
    .landing-hero h1 { font-size: 42px; }
    .landing-hero-lead { font-size: 14px; }
    .landing-hero-actions { display: grid; grid-template-columns: 1fr; }
    .landing-hero-actions .button { width: 100%; }
    .landing-login-hint { align-items: flex-start; text-align: left; }
    .landing-hero-visual { padding: 9px 0 15px; }
    .landing-dashboard-card { padding: 16px; border-radius: 20px; }
    .landing-dashboard-stats { grid-template-columns: 1fr 1fr; }
    .landing-dashboard-stats article { min-height: 70px; padding: 10px; }
    .landing-stat-icon { display: none; }
    .landing-floating-card { display: none; }
    .landing-metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .landing-metric-grid article { padding: 20px 10px; }
    .landing-metric-grid strong { font-size: 24px; }
    .landing-section { padding: 58px 0; }
    .landing-section-head h2,
    .landing-cta-card h2 { font-size: 32px; }
    .landing-bento { grid-template-columns: 1fr; }
    .landing-feature,
    .landing-feature-wide { grid-column: auto; min-height: 0; padding: 22px; display: block; }
    .landing-feature-wide .landing-feature-icon { position: static; margin-bottom: 22px; }
    .landing-feature-preview { margin-top: 18px; }
    .landing-chip-row { justify-content: flex-start; margin-top: 18px; }
    .landing-role-card { padding: 24px; }
    .landing-cta-section { padding: 15px 0 60px; }
    .landing-cta-card { gap: 28px; padding: 28px 23px; border-radius: 21px; }
    .landing-cta-actions { display: grid; width: 100%; }
    .landing-cta-actions .button { width: 100%; }
    .landing-footer-inner { align-items: flex-start; flex-direction: column; gap: 15px; }
    .landing-footer p { text-align: left; }
}

/* =========================================================
   v1.4.16 — Register Modern Auth Split View
   ========================================================= */
.register-modern-page {
    min-height: 100vh;
    background: #f4f8fc;
}
.register-modern-shell { min-height: 100vh; }
.register-modern-main {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(560px, .95fr) minmax(520px, 1.05fr);
    background: #f7fafc;
}
.register-modern-form-column {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    padding: 34px clamp(28px, 5.2vw, 76px) 44px;
    background:
        radial-gradient(circle at 12% 5%, rgba(242,184,75,.08), transparent 23%),
        #fff;
}
.register-modern-form-inner { width: min(100%, 720px); }
.register-modern-topbar {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 48px;
}
.register-modern-brand {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--navy-2);
}
.register-modern-brand:hover { color: var(--navy-2); }
.register-modern-brand img,
.register-modern-brand-mark {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 12px;
}
.register-modern-brand img {
    object-fit: contain;
    padding: 4px;
    border: 1px solid #dce6f0;
    background: #fff;
}
.register-modern-brand-mark {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #f2b84b, #ffdc8a);
    color: #0b2947;
    font-size: 23px;
    font-weight: 900;
}
.register-modern-brand strong,
.register-modern-brand small { display: block; }
.register-modern-brand strong {
    max-width: 230px;
    overflow: hidden;
    color: #113252;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.register-modern-brand small { margin-top: 2px; color: #7f8da0; font-size: 9px; }
.register-modern-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid #e0e7ef;
    border-radius: 10px;
    color: #52677d;
    background: rgba(255,255,255,.85);
    font-size: 11px;
    font-weight: 800;
    transition: .16s ease;
}
.register-modern-back:hover {
    color: #123a63;
    background: #f4f8fc;
    transform: translateY(-1px);
}
.register-modern-card { width: 100%; }
.register-modern-heading { margin-bottom: 26px; }
.register-modern-kicker {
    display: inline-flex;
    align-items: center;
    padding: 6px 9px;
    border: 1px solid #d9e8f5;
    border-radius: 999px;
    color: #1a6097;
    background: #f4f9fd;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .1em;
}
.register-modern-heading h1 {
    margin: 14px 0 9px;
    max-width: 620px;
    color: #0b2947;
    font-size: clamp(32px, 3vw, 45px);
    line-height: 1.08;
    letter-spacing: -.04em;
}
.register-modern-heading p {
    max-width: 610px;
    margin: 0;
    color: #687a8f;
    font-size: 13px;
    line-height: 1.75;
}
.register-modern-alert {
    margin-bottom: 20px;
    padding: 14px 16px;
    border: 1px solid #f1c9c6;
    border-radius: 13px;
    background: #fff7f7;
    color: #8f2d25;
    font-size: 12px;
}
.register-modern-alert strong { display: block; margin-bottom: 5px; }
.register-modern-alert ul { margin: 0; padding-left: 18px; }
.register-modern-form { display: grid; gap: 19px; }
.register-modern-role-switch {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    align-items: center;
    gap: 5px 14px;
    padding: 14px;
    border: 1px solid #dde7f0;
    border-radius: 14px;
    background: #f8fbfe;
}
.register-modern-role-switch > label { color: #334d67; font-size: 11px; }
.register-modern-select-wrap { position: relative; }
.register-modern-role-switch .select {
    min-height: 42px;
    border-color: #d5e1ec;
    background-color: #fff;
    font-size: 12px;
    font-weight: 750;
}
.register-modern-role-note {
    grid-column: 2;
    margin: 0;
    color: #7a8999;
    font-size: 10px;
    line-height: 1.5;
}
.register-modern-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 15px;
}
.register-modern-field { min-width: 0; }
.register-modern-full { grid-column: 1 / -1; }
.register-modern-field label {
    display: block;
    margin-bottom: 7px;
    color: #33475e;
    font-size: 11px;
    font-weight: 800;
}
.register-modern-field label > span { color: #d13d32; }
.register-modern-field .input {
    min-height: 48px;
    padding: 11px 13px;
    border-color: #d6e0ea;
    border-radius: 11px;
    background: #fff;
    font-size: 12px;
    box-shadow: 0 1px 0 rgba(13,53,90,.02);
}
.register-modern-field .input::placeholder { color: #a0abba; }
.register-modern-field .input:focus {
    border-color: #4b8fc4;
    box-shadow: 0 0 0 4px rgba(30,111,185,.09);
}
.register-modern-password-wrap { position: relative; }
.register-modern-password-wrap .input { padding-right: 82px; }
.register-modern-password-button {
    position: absolute;
    top: 50%;
    right: 7px;
    min-width: 62px;
    height: 34px;
    padding: 0 8px;
    transform: translateY(-50%);
    border: 0;
    border-radius: 8px;
    color: #315d83;
    background: #edf5fb;
    cursor: pointer;
    font-size: 10px;
    font-weight: 850;
}
.register-modern-password-button:hover { background: #e2eff9; }
.register-modern-password-meter {
    height: 4px;
    margin-top: 8px;
    overflow: hidden;
    border-radius: 99px;
    background: #edf1f5;
}
.register-modern-password-meter > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #d14b42;
    transition: width .18s ease, background .18s ease;
}
.register-modern-password-meter > span.is-medium { background: #d99a22; }
.register-modern-password-meter > span.is-strong { background: #1d9169; }
.register-modern-password-hint {
    display: block;
    margin-top: 5px;
    color: #8895a5;
    font-size: 9px;
}
.register-modern-password-hint.is-good { color: #197a5a; }
.register-modern-password-hint.is-bad { color: #b42318; }
.register-modern-field .input.is-bad { border-color: #d96d66; box-shadow: 0 0 0 3px rgba(180,35,24,.07); }
.register-modern-submit-row { margin-top: 2px; }
.register-modern-submit {
    width: 100%;
    min-height: 49px;
    border-radius: 11px;
    background: linear-gradient(135deg, #0d3458, #174f7e);
    box-shadow: 0 10px 22px rgba(13,52,88,.15);
}
.register-modern-submit:hover { background: linear-gradient(135deg, #092c4d, #123f69); }
.register-modern-submit-row > p {
    margin: 9px 0 0;
    color: #8995a4;
    font-size: 9px;
    line-height: 1.5;
    text-align: center;
}
.register-modern-login-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
    padding-top: 19px;
    border-top: 1px solid #e9eef3;
    color: #7b8898;
    font-size: 11px;
}
.register-modern-login-link a { color: #1767a1; font-weight: 850; }

.register-modern-showcase {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: clamp(50px, 6vw, 86px);
    display: flex;
    align-items: center;
    color: #fff;
    background:
        radial-gradient(circle at 78% 18%, rgba(67,170,230,.22), transparent 28%),
        radial-gradient(circle at 17% 84%, rgba(242,184,75,.12), transparent 23%),
        linear-gradient(145deg, #092743 0%, #0e3c65 54%, #1b6da8 100%);
}
.register-modern-showcase::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 95%);
}
.register-modern-showcase-orb {
    position: absolute;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 50%;
    pointer-events: none;
}
.register-modern-showcase-orb-one { width: 420px; height: 420px; top: -160px; right: -180px; }
.register-modern-showcase-orb-two { width: 250px; height: 250px; bottom: -110px; left: -100px; }
.register-modern-showcase-inner {
    position: relative;
    z-index: 1;
    width: min(100%, 720px);
    margin: 0 auto;
}
.register-modern-showcase-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.74);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .09em;
}
.register-modern-showcase-badge i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #64ddb0;
    box-shadow: 0 0 0 4px rgba(100,221,176,.1);
}
.register-modern-showcase h2 {
    max-width: 690px;
    margin: 24px 0 14px;
    color: #fff;
    font-size: clamp(43px, 4.2vw, 64px);
    line-height: 1.02;
    letter-spacing: -.045em;
}
.register-modern-showcase > div > p {
    max-width: 620px;
    margin: 0;
    color: rgba(255,255,255,.63);
    font-size: 13px;
    line-height: 1.75;
}
.register-modern-feature-list {
    display: grid;
    gap: 10px;
    margin-top: 34px;
}
.register-modern-feature-list article {
    display: grid;
    grid-template-columns: 44px minmax(0,1fr);
    align-items: center;
    gap: 13px;
    padding: 13px 14px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 14px;
    background: rgba(255,255,255,.055);
    backdrop-filter: blur(8px);
}
.register-modern-feature-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    color: #9fd7ff;
    background: rgba(255,255,255,.06);
    font-size: 10px;
    font-weight: 900;
}
.register-modern-feature-list strong,
.register-modern-feature-list small { display: block; }
.register-modern-feature-list strong { font-size: 12px; }
.register-modern-feature-list small { margin-top: 2px; color: rgba(255,255,255,.52); font-size: 10px; line-height: 1.45; }
.register-modern-process-card {
    margin-top: 24px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 17px;
    background: rgba(5,28,49,.24);
}
.register-modern-process-card > span { color: rgba(255,255,255,.45); font-size: 8px; font-weight: 900; letter-spacing: .11em; }
.register-modern-process-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
    margin-top: 12px;
}
.register-modern-process-grid > div {
    min-width: 0;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.06);
}
.register-modern-process-grid b {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    margin-bottom: 10px;
    border-radius: 8px;
    color: #0e3c65;
    background: #d8efff;
    font-size: 9px;
}
.register-modern-process-grid strong,
.register-modern-process-grid small { display: block; }
.register-modern-process-grid strong { font-size: 10px; }
.register-modern-process-grid small { margin-top: 2px; color: rgba(255,255,255,.48); font-size: 8px; }
.register-modern-showcase-footer {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 28px;
    color: rgba(255,255,255,.38);
    font-size: 8px;
}

@media (max-width: 1120px) {
    .register-modern-main { grid-template-columns: minmax(520px, 1fr) minmax(390px, .78fr); }
    .register-modern-showcase { padding: 48px; }
    .register-modern-showcase h2 { font-size: 46px; }
}
@media (max-width: 900px) {
    .register-modern-main { grid-template-columns: 1fr; }
    .register-modern-form-column { order: 1; padding: 28px 34px 46px; }
    .register-modern-form-inner { width: min(100%, 700px); }
    .register-modern-topbar { margin-bottom: 34px; }
    .register-modern-showcase { order: 2; min-height: auto; padding: 50px 34px; }
    .register-modern-showcase-inner { width: min(100%, 700px); }
    .register-modern-showcase h2 { max-width: 600px; font-size: 42px; }
    .register-modern-feature-list { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .register-modern-feature-list article { display: block; }
    .register-modern-feature-icon { margin-bottom: 11px; }
}
@media (max-width: 620px) {
    .register-modern-form-column { padding: 20px 18px 36px; }
    .register-modern-topbar { min-height: 50px; margin-bottom: 28px; }
    .register-modern-brand img,
    .register-modern-brand-mark { width: 39px; height: 39px; flex-basis: 39px; }
    .register-modern-brand strong { max-width: 160px; font-size: 11px; }
    .register-modern-brand small { font-size: 8px; }
    .register-modern-back { padding: 7px 9px; font-size: 10px; }
    .register-modern-heading h1 { font-size: 34px; }
    .register-modern-heading p { font-size: 12px; }
    .register-modern-role-switch { grid-template-columns: 1fr; gap: 7px; }
    .register-modern-role-note { grid-column: auto; }
    .register-modern-grid { grid-template-columns: 1fr; }
    .register-modern-full { grid-column: auto; }
    .register-modern-login-link { flex-direction: column; gap: 4px; }
    .register-modern-showcase { padding: 42px 18px; }
    .register-modern-showcase h2 { font-size: 37px; }
    .register-modern-feature-list { grid-template-columns: 1fr; }
    .register-modern-feature-list article { display: grid; }
    .register-modern-feature-icon { margin-bottom: 0; }
    .register-modern-process-grid { grid-template-columns: 1fr; }
    .register-modern-process-grid > div { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 2px 10px; }
    .register-modern-process-grid b { grid-row: span 2; margin: 0; }
    .register-modern-showcase-footer { align-items: flex-start; flex-direction: column; gap: 3px; }
}

/* =========================================================
   v1.4.17 — Login Modern Auth Split View
   ========================================================= */
.login-modern-page {
    min-height: 100vh;
    background: #f4f8fc;
}
.login-modern-shell { min-height: 100vh; }
.login-modern-main {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(520px, .9fr) minmax(620px, 1.1fr);
    background: #fff;
}
.login-modern-form-column {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    min-width: 0;
    padding: 34px clamp(34px, 5.5vw, 82px) 42px;
    background:
        radial-gradient(circle at 10% 8%, rgba(242,184,75,.08), transparent 26%),
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}
.login-modern-form-inner {
    width: min(100%, 620px);
    display: flex;
    flex-direction: column;
}
.login-modern-topbar {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: clamp(56px, 9vh, 105px);
}
.login-modern-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    color: #0b2947;
}
.login-modern-brand:hover { color: #0b2947; }
.login-modern-brand img,
.login-modern-brand-mark {
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    border-radius: 13px;
}
.login-modern-brand img {
    object-fit: contain;
    padding: 3px;
    background: #fff;
    border: 1px solid #dce5ef;
    box-shadow: 0 7px 20px rgba(16,45,73,.08);
}
.login-modern-brand-mark {
    display: grid;
    place-items: center;
    color: #0b2947;
    background: linear-gradient(135deg, #f2b84b, #ffdc8a);
    font-size: 24px;
    font-weight: 950;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.48), 0 7px 20px rgba(16,45,73,.08);
}
.login-modern-brand strong,
.login-modern-brand small { display: block; }
.login-modern-brand strong {
    max-width: 235px;
    overflow: hidden;
    color: #0b2947;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: -.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.login-modern-brand small {
    margin-top: 2px;
    color: #7c8b9d;
    font-size: 9px;
}
.login-modern-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-height: 36px;
    padding: 7px 11px;
    border: 1px solid #e1e8f0;
    border-radius: 9px;
    color: #526477;
    background: rgba(255,255,255,.78);
    font-size: 10px;
    font-weight: 800;
}
.login-modern-back:hover {
    color: #0b2947;
    background: #f6f9fc;
}
.login-modern-card { width: 100%; }
.login-modern-heading { margin-bottom: 27px; }
.login-modern-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 5px 10px;
    border: 1px solid #d9e8f5;
    border-radius: 999px;
    color: #1a5c91;
    background: #eef6fc;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .13em;
}
.login-modern-heading h1 {
    margin: 12px 0 9px;
    max-width: 550px;
    color: #0b2947;
    font-size: clamp(36px, 4vw, 50px);
    line-height: 1.04;
    letter-spacing: -.045em;
}
.login-modern-heading p {
    max-width: 540px;
    margin: 0;
    color: #627285;
    font-size: 13px;
    line-height: 1.72;
}
.login-modern-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid #cfe0ef;
    border-radius: 11px;
    color: #25577e;
    background: #f1f7fc;
    font-size: 11px;
}
.login-modern-alert-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    margin-top: 5px;
    border-radius: 50%;
    background: #2a78b9;
}
.login-modern-alert strong { display: block; margin-bottom: 3px; }
.login-modern-alert ul { margin: 3px 0 0; padding-left: 17px; }
.login-modern-alert-danger {
    border-color: #efc8c3;
    color: #8f3028;
    background: #fff4f2;
}
.login-modern-alert-danger .login-modern-alert-dot { background: #b42318; }
.login-modern-alert-success {
    border-color: #bfe4cf;
    color: #116146;
    background: #effaf4;
}
.login-modern-alert-success .login-modern-alert-dot { background: #157347; }
.login-modern-alert-warning {
    border-color: #efdca5;
    color: #76540b;
    background: #fff9e8;
}
.login-modern-alert-warning .login-modern-alert-dot { background: #c38811; }
.login-modern-form {
    display: grid;
    gap: 17px;
}
.login-modern-field {
    display: grid;
    gap: 7px;
}
.login-modern-field label {
    color: #223a53;
    font-size: 11px;
    font-weight: 850;
}
.login-modern-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.login-modern-caps {
    color: #b66f00;
    font-size: 9px;
    font-weight: 800;
}
.login-modern-input-wrap,
.login-modern-password-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.login-modern-input-icon {
    position: absolute;
    left: 12px;
    z-index: 2;
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #315d83;
    background: #eef5fb;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .02em;
    pointer-events: none;
}
.login-modern-input {
    min-height: 52px;
    padding-left: 51px;
    border-radius: 12px;
    border-color: #d5dee8;
    color: #172b3f;
    background: #fff;
    font-size: 12px;
}
.login-modern-input::placeholder { color: #9aa7b5; }
.login-modern-input:focus {
    border-color: #2a78b9;
    box-shadow: 0 0 0 4px rgba(42,120,185,.09);
}
.login-modern-password-wrap .login-modern-input { padding-right: 90px; }
.login-modern-password-button {
    position: absolute;
    right: 8px;
    z-index: 3;
    min-width: 68px;
    height: 36px;
    padding: 0 10px;
    border: 0;
    border-radius: 9px;
    color: #315d83;
    background: #eef5fb;
    cursor: pointer;
    font-size: 10px;
    font-weight: 850;
}
.login-modern-password-button:hover { background: #e2eff9; }
.login-modern-help {
    color: #8290a1;
    font-size: 9px;
    line-height: 1.55;
}
.login-modern-submit {
    width: 100%;
    min-height: 52px;
    justify-content: space-between;
    margin-top: 3px;
    padding: 10px 13px 10px 18px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0b3155 0%, #174e7d 100%);
    box-shadow: 0 12px 26px rgba(13,52,88,.16);
    font-size: 12px;
}
.login-modern-submit:hover {
    background: linear-gradient(135deg, #082b4a 0%, #123f69 100%);
}
.login-modern-submit:disabled {
    cursor: wait;
    opacity: .78;
    transform: none;
}
.login-modern-submit-arrow {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(255,255,255,.12);
    font-size: 15px;
}
.login-modern-access-note {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding: 13px 15px;
    border: 1px solid #e4ebf2;
    border-radius: 12px;
    background: #fbfdff;
}
.login-modern-access-note > div { min-width: 0; }
.login-modern-access-note strong,
.login-modern-access-note span { display: block; }
.login-modern-access-note strong {
    color: #263e56;
    font-size: 9px;
    font-weight: 900;
}
.login-modern-access-note span {
    margin-top: 2px;
    color: #7b8a9a;
    font-size: 8px;
    white-space: nowrap;
}
.login-modern-access-note i {
    width: 1px;
    height: 28px;
    background: #e1e8ef;
}
.login-modern-register-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 14px;
    padding: 14px 15px;
    border: 1px solid #e5eaf0;
    border-radius: 12px;
    background: #fff;
}
.login-modern-register-card span,
.login-modern-register-card strong { display: block; }
.login-modern-register-card > div > span {
    color: #8090a1;
    font-size: 9px;
}
.login-modern-register-card > div > strong {
    margin-top: 2px;
    color: #2b4055;
    font-size: 10px;
    font-weight: 800;
}
.login-modern-register-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 9px;
    color: #145687;
    background: #edf5fb;
    font-size: 9px;
    font-weight: 900;
}
.login-modern-register-link:hover { color: #0b2947; background: #e1eef8; }
.login-modern-register-link.is-disabled { color: #778697; background: #f2f4f6; }
.login-modern-footer-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
    color: #98a3b0;
    font-size: 8px;
}
.login-modern-showcase {
    position: relative;
    min-width: 0;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 82% 12%, rgba(83,179,230,.36), transparent 26%),
        radial-gradient(circle at 10% 88%, rgba(49,138,196,.22), transparent 24%),
        linear-gradient(145deg, #082b4b 0%, #0f4a79 47%, #1b6aa4 100%);
}
.login-modern-showcase-grid {
    position: absolute;
    inset: 0;
    opacity: .12;
    background-image:
        linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 72%);
}
.login-modern-showcase-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px);
    pointer-events: none;
}
.login-modern-showcase-orb-one {
    width: 310px;
    height: 310px;
    right: -115px;
    top: -80px;
    background: rgba(255,255,255,.08);
}
.login-modern-showcase-orb-two {
    width: 220px;
    height: 220px;
    left: -85px;
    bottom: 9%;
    background: rgba(78,186,225,.11);
}
.login-modern-showcase-inner {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 42px clamp(42px, 6vw, 88px) 45px;
}
.login-modern-showcase-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.login-modern-showcase-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 29px;
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    color: rgba(255,255,255,.82);
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(10px);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .13em;
}
.login-modern-showcase-badge i,
.login-modern-online i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #7fe0a9;
    box-shadow: 0 0 0 4px rgba(127,224,169,.11);
}
.login-modern-version {
    color: rgba(255,255,255,.55);
    font-size: 9px;
    font-weight: 800;
}
.login-modern-showcase-copy {
    max-width: 760px;
    margin-top: auto;
    padding-top: 90px;
}
.login-modern-eyebrow {
    display: block;
    margin-bottom: 13px;
    color: #bfe7ff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .15em;
}
.login-modern-showcase-copy h2 {
    margin: 0;
    max-width: 760px;
    font-size: clamp(39px, 4.8vw, 66px);
    line-height: 1.03;
    letter-spacing: -.045em;
}
.login-modern-showcase-copy p {
    max-width: 700px;
    margin: 19px 0 0;
    color: rgba(255,255,255,.69);
    font-size: 13px;
    line-height: 1.75;
}
.login-modern-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 11px;
    max-width: 760px;
    margin-top: 30px;
}
.login-modern-feature-grid article {
    display: grid;
    grid-template-columns: 37px 1fr;
    gap: 11px;
    align-items: start;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 13px;
    background: rgba(255,255,255,.075);
    backdrop-filter: blur(12px);
}
.login-modern-feature-index {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #d8f1ff;
    background: rgba(255,255,255,.09);
    font-size: 9px;
    font-weight: 950;
}
.login-modern-feature-grid strong,
.login-modern-feature-grid small { display: block; }
.login-modern-feature-grid strong {
    color: #fff;
    font-size: 11px;
    font-weight: 850;
}
.login-modern-feature-grid small {
    margin-top: 3px;
    color: rgba(255,255,255,.6);
    font-size: 9px;
    line-height: 1.45;
}
.login-modern-showcase-bottom {
    display: flex;
    align-items: center;
    gap: 13px;
    max-width: 760px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.12);
}
.login-modern-role-stack {
    display: flex;
    padding-left: 8px;
}
.login-modern-role-stack span {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    margin-left: -8px;
    border: 2px solid #175887;
    border-radius: 50%;
    color: #0c3658;
    background: #e8f5fd;
    font-size: 8px;
    font-weight: 950;
}
.login-modern-showcase-bottom > div:nth-child(2) { min-width: 0; }
.login-modern-showcase-bottom strong,
.login-modern-showcase-bottom small { display: block; }
.login-modern-showcase-bottom strong {
    font-size: 10px;
    font-weight: 850;
}
.login-modern-showcase-bottom small {
    margin-top: 2px;
    color: rgba(255,255,255,.57);
    font-size: 8px;
}
.login-modern-online {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    padding: 7px 9px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;
    color: rgba(255,255,255,.76);
    background: rgba(255,255,255,.07);
    font-size: 8px;
    font-weight: 900;
}
@media (max-width: 1120px) {
    .login-modern-main { grid-template-columns: minmax(480px, .9fr) minmax(480px, 1.1fr); }
    .login-modern-form-column { padding-inline: 34px; }
    .login-modern-showcase-inner { padding-inline: 38px; }
    .login-modern-showcase-copy h2 { font-size: 45px; }
    .login-modern-feature-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .login-modern-main { grid-template-columns: 1fr; }
    .login-modern-form-column { min-height: auto; padding: 28px 28px 42px; }
    .login-modern-form-inner { width: min(100%, 650px); }
    .login-modern-topbar { margin-bottom: 48px; }
    .login-modern-showcase { min-height: auto; }
    .login-modern-showcase-inner { min-height: auto; padding: 48px 28px; }
    .login-modern-showcase-copy { margin-top: 0; padding-top: 48px; }
    .login-modern-showcase-copy h2 { max-width: 680px; font-size: 46px; }
    .login-modern-feature-grid { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: none; }
    .login-modern-showcase-bottom { max-width: none; }
}
@media (max-width: 620px) {
    .login-modern-form-column { padding: 20px 18px 34px; }
    .login-modern-topbar { min-height: 48px; margin-bottom: 35px; }
    .login-modern-brand img,
    .login-modern-brand-mark { width: 40px; height: 40px; flex-basis: 40px; }
    .login-modern-brand strong { max-width: 165px; font-size: 11px; }
    .login-modern-brand small { font-size: 8px; }
    .login-modern-back { min-height: 33px; padding: 6px 8px; font-size: 9px; }
    .login-modern-heading h1 { font-size: 36px; }
    .login-modern-heading p { font-size: 12px; }
    .login-modern-access-note { grid-template-columns: 1fr; gap: 8px; }
    .login-modern-access-note i { width: 100%; height: 1px; }
    .login-modern-access-note span { white-space: normal; }
    .login-modern-register-card { align-items: flex-start; flex-direction: column; }
    .login-modern-register-link { width: 100%; justify-content: center; }
    .login-modern-footer-note { align-items: flex-start; flex-direction: column; gap: 3px; }
    .login-modern-showcase-inner { padding: 38px 18px; }
    .login-modern-showcase-top { align-items: flex-start; flex-direction: column; gap: 9px; }
    .login-modern-showcase-copy { padding-top: 36px; }
    .login-modern-showcase-copy h2 { font-size: 37px; }
    .login-modern-feature-grid { grid-template-columns: 1fr; }
    .login-modern-showcase-bottom { align-items: flex-start; flex-wrap: wrap; }
    .login-modern-online { margin-left: 0; }
}

/* =========================================================
   v1.4.18 · ADMIN DATABASE BACKUP
   ========================================================= */
.backup-header-action { margin: 0; }
.backup-stat-size,
.backup-stat-date { font-size: 19px !important; line-height: 1.25 !important; }
.backup-security-note {
    display: grid;
    grid-template-columns: 44px minmax(0,1fr);
    gap: 14px;
    align-items: start;
    padding: 16px 18px;
    border: 1px solid #b8e5c8;
    border-radius: 14px;
    color: var(--success);
    background: linear-gradient(135deg, #f2fbf5, #e9f8ef);
}
.backup-security-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    background: var(--success);
    font-size: 20px;
    font-weight: 900;
}
.backup-security-note strong,
.backup-security-note span { display: block; }
.backup-security-note strong { color: #11643e; font-size: 13px; }
.backup-security-note span { margin-top: 3px; color: #3f6652; font-size: 12px; line-height: 1.6; }
.backup-card-subtitle { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.backup-filename { word-break: break-word; }
.backup-data-chip {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    margin: 0 5px 5px 0;
    padding: 4px 8px;
    border-radius: 999px;
    color: #344054;
    background: #f2f4f7;
    font-size: 10px;
    font-weight: 800;
}
.backup-table td:last-child { min-width: 175px; }
.backup-table form { margin: 0; }
.backup-empty-state.compact { padding-block: 28px; }
.backup-update-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.backup-update-card {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto;
    gap: 11px;
    align-items: center;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fbfcfe;
}
.backup-update-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--navy);
    background: #eaf2fa;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .04em;
}
.backup-update-copy { min-width: 0; }
.backup-update-copy strong,
.backup-update-copy span { display: block; }
.backup-update-copy strong { overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.backup-update-copy span { margin-top: 2px; color: var(--muted); font-size: 10px; }
.backup-footer-note { color: var(--muted); font-size: 11px; line-height: 1.6; }
.backup-footer-note strong { color: #344054; }
@media (max-width: 900px) {
    .backup-update-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .backup-header-action,
    .backup-header-action .button { width: 100%; }
    .backup-security-note { grid-template-columns: 1fr; }
    .backup-update-card { grid-template-columns: 38px minmax(0,1fr); }
    .backup-update-card .button { grid-column: 1 / -1; width: 100%; }
}

/* v1.4.20 — Forgot Password / Reset Password */
.login-modern-forgot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: -4px;
    color: var(--muted);
    font-size: 12px;
}
.login-modern-forgot-row a {
    color: var(--navy);
    font-weight: 800;
    text-decoration: none;
}
.login-modern-forgot-row a:hover { text-decoration: underline; }
.password-reset-card { max-width: 610px; }
.password-reset-code {
    min-height: 62px;
    text-align: center;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: .32em;
    font-variant-numeric: tabular-nums;
}
.password-reset-actions {
    margin-top: 16px;
    text-align: center;
    font-size: 12px;
}
.password-reset-actions a {
    color: var(--navy);
    font-weight: 800;
    text-decoration: none;
}
.password-reset-actions a:hover { text-decoration: underline; }
.password-reset-help { margin-top: 22px; }
.password-reset-showcase .login-modern-showcase-copy h2 { max-width: 760px; }
.password-reset-verify-form { margin-top: 8px; }
@media (max-width: 620px) {
    .login-modern-forgot-row { align-items: flex-start; }
    .password-reset-code { font-size: 24px; letter-spacing: .24em; }
}

/* ===== v1.4.21 SMTP Email Settings ===== */
.smtp-settings-grid { align-items: start; }
.smtp-password-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.smtp-actions { flex-wrap: wrap; }
.smtp-example-list { display: grid; gap: 10px; }
.smtp-example-list > div { display: grid; gap: 3px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 10px; background: #f8fbfe; }
.smtp-example-list strong { color: var(--ink); font-size: 13px; }
.smtp-example-list span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.smtp-info-box { margin-top: 14px; margin-bottom: 0; }
@media (max-width: 700px) {
    .smtp-password-row { grid-template-columns: 1fr; }
    .smtp-password-row .button { width: 100%; }
    .smtp-actions .button { width: 100%; }
}

/* =========================================================
   v1.4.22 · PILIH DOSEN MENJADI KAPRODI
   ========================================================= */
.kaprodi-source-picker { overflow: hidden; }
.kaprodi-source-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(230px, .8fr) auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 14px;
}
.kaprodi-source-filter-actions { padding-bottom: 1px; }
.kaprodi-source-list {
    display: grid;
    gap: 9px;
    max-height: 420px;
    padding-right: 5px;
    overflow: auto;
    scrollbar-width: thin;
}
.kaprodi-source-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 12px 13px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.kaprodi-source-item:hover {
    border-color: #b7cee4;
    box-shadow: 0 8px 22px rgba(15, 56, 91, .07);
}
.kaprodi-source-item.is-selected {
    border-color: #64ad83;
    background: #f2fbf6;
    box-shadow: 0 0 0 2px rgba(27, 135, 82, .07);
}
.kaprodi-source-avatar {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: var(--navy);
    background: #e9f2fb;
    font-size: 16px;
    font-weight: 900;
}
.kaprodi-source-copy { min-width: 0; }
.kaprodi-source-copy strong,
.kaprodi-source-copy span,
.kaprodi-source-copy small { display: block; }
.kaprodi-source-copy strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kaprodi-source-copy span {
    overflow: hidden;
    margin-top: 2px;
    color: #516174;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kaprodi-source-copy small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.45;
}
.kaprodi-source-meta { white-space: nowrap; }
.kaprodi-source-empty {
    padding: 18px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    color: var(--muted);
    background: #fafbfd;
    text-align: center;
    font-size: 12px;
}
.kaprodi-selected-note {
    display: none;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-top: 14px;
    padding: 11px 13px;
    border: 1px solid #b8e5c8;
    border-radius: 12px;
    background: #f1faf4;
}
.kaprodi-selected-note.is-active { display: grid; }
.kaprodi-selected-note > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: var(--success);
    font-weight: 900;
}
.kaprodi-selected-note strong,
.kaprodi-selected-note small { display: block; }
.kaprodi-selected-note strong { color: #155d3d; font-size: 12px; }
.kaprodi-selected-note small { margin-top: 2px; color: #557064; font-size: 10px; }
.kaprodi-promote-note { margin-top: 14px; }
@media (max-width: 900px) {
    .kaprodi-source-toolbar { grid-template-columns: 1fr 1fr; }
    .kaprodi-source-filter-actions { grid-column: 1 / -1; }
    .kaprodi-source-item { grid-template-columns: 44px minmax(0,1fr) auto; }
    .kaprodi-source-meta { display: none; }
}
@media (max-width: 620px) {
    .kaprodi-source-toolbar { grid-template-columns: 1fr; }
    .kaprodi-source-filter-actions { grid-column: auto; }
    .kaprodi-source-filter-actions .button { width: 100%; }
    .kaprodi-source-list { max-height: none; }
    .kaprodi-source-item { grid-template-columns: 40px minmax(0,1fr); }
    .kaprodi-source-avatar { width: 40px; height: 40px; }
    .kaprodi-source-item > .button { grid-column: 1 / -1; width: 100%; }
}


/* SMTP DNS diagnostics v1.4.23 */
.smtp-candidate-list{display:grid;gap:10px}
.smtp-candidate-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 14px;border:1px solid var(--border,#dbe3ec);border-radius:12px;background:#fff}
.smtp-candidate-row>div:first-child{display:grid;gap:4px;min-width:0}
.smtp-candidate-row strong{word-break:break-word}
.smtp-candidate-row span{font-size:12px;color:var(--muted,#64748b)}
.button-small{min-height:32px;padding:7px 10px;font-size:12px}
@media (max-width:720px){.smtp-candidate-row{align-items:flex-start;flex-direction:column}.smtp-candidate-row .form-actions{width:100%;justify-content:space-between}}

/* =========================================================
   v1.4.32 — Modern Glass UI Front Page
   ========================================================= */
.home32-body {
    min-height: 100vh;
    margin: 0;
    color: #162235;
    background: #f4f7fb;
    overflow-x: hidden;
}
.home32-page { min-height: 100vh; }
.home32-container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.home32-nav-shell {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 14px 0;
    background: rgba(244,247,251,.74);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.home32-nav {
    width: min(1180px, calc(100% - 40px));
    min-height: 66px;
    margin: 0 auto;
    padding: 8px 10px 8px 14px;
    display: grid;
    grid-template-columns: minmax(260px,1fr) auto minmax(260px,1fr);
    align-items: center;
    gap: 22px;
    border: 1px solid rgba(211,222,234,.88);
    border-radius: 20px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 14px 36px rgba(20,48,77,.08);
}
.home32-brand { min-width: 0; display: flex; align-items: center; gap: 12px; color: #0b2b4a; }
.home32-brand:hover { color: #0b2b4a; }
.home32-brand img,
.home32-footer-brand img {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    object-fit: contain;
    padding: 3px;
    border: 1px solid #d9e4ee;
    border-radius: 13px;
    background: #fff;
}
.home32-brand-mark {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: linear-gradient(135deg,#f5bc47,#ffe3a2);
    color: #082946;
    font-size: 23px;
    font-weight: 900;
}
.home32-brand strong,
.home32-brand small { display: block; }
.home32-brand strong { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.home32-brand small { margin-top: 1px; color: #8090a2; font-size: 9px; }
.home32-nav-links { display: flex; justify-content: center; gap: 27px; }
.home32-nav-links a { color: #5d6d80; font-size: 11px; font-weight: 800; transition: .18s ease; }
.home32-nav-links a:hover { color: #1666a5; }
.home32-nav-actions { display: flex; justify-content: flex-end; gap: 8px; }
.home32-btn {
    min-height: 40px;
    padding: 9px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 900;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.home32-btn:hover { transform: translateY(-1px); }
.home32-btn-primary { color: #fff; background: #0d3c68; box-shadow: 0 10px 22px rgba(13,60,104,.16); }
.home32-btn-primary:hover { color: #fff; background: #14558f; }
.home32-btn-ghost { color: #34506b; border-color: #d8e3ed; background: #fff; }
.home32-btn-light { color: #0b2d4c; background: #fff; border-color: rgba(255,255,255,.45); box-shadow: 0 14px 30px rgba(3,18,34,.15); }
.home32-btn-light:hover { color: #0b2d4c; background: #f2f7fb; }
.home32-btn-glass { color: #fff; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.09); backdrop-filter: blur(12px); }
.home32-btn-glass:hover { color: #fff; background: rgba(255,255,255,.14); }
.home32-btn-lg { min-height: 50px; padding: 11px 18px; border-radius: 13px; font-size: 12px; }

.home32-hero {
    position: relative;
    overflow: hidden;
    margin-top: -94px;
    padding: 172px 0 90px;
    color: #fff;
    background:
        radial-gradient(circle at 78% 16%, rgba(30,125,199,.44), transparent 30%),
        radial-gradient(circle at 12% 86%, rgba(242,184,75,.13), transparent 24%),
        linear-gradient(132deg,#061a2e 0%,#0a2b4b 46%,#0d4779 100%);
}
.home32-grid-lines {
    position: absolute;
    inset: 0;
    opacity: .08;
    background-image: linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(to bottom,black,transparent 82%);
}
.home32-glow { position: absolute; border-radius: 50%; filter: blur(1px); pointer-events: none; }
.home32-glow-a { width: 510px; height: 510px; right: -210px; top: 90px; border: 1px solid rgba(255,255,255,.11); box-shadow: inset 0 0 120px rgba(57,157,220,.12); }
.home32-glow-b { width: 300px; height: 300px; left: -140px; bottom: -120px; border: 1px solid rgba(242,184,75,.15); }
.home32-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1fr) minmax(450px,.92fr); align-items: center; gap: 70px; }
.home32-hero-copy { min-width: 0; }
.home32-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 11px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    color: rgba(255,255,255,.72);
    background: rgba(255,255,255,.07);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .11em;
    backdrop-filter: blur(12px);
}
.home32-pill span { width: 7px; height: 7px; border-radius: 50%; background: #60e1ae; box-shadow: 0 0 0 5px rgba(96,225,174,.09); }
.home32-hero h1 {
    max-width: 760px;
    margin: 22px 0 18px;
    font-size: clamp(48px,5.6vw,76px);
    line-height: .99;
    letter-spacing: -.055em;
    color: #fff;
}
.home32-hero h1 em { color: #79c8ff; font-style: normal; }
.home32-hero-copy > p { max-width: 680px; margin: 0; color: rgba(255,255,255,.67); font-size: 16px; line-height: 1.8; }
.home32-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.home32-login-note { display: flex; align-items: center; gap: 8px; margin-top: 20px; color: rgba(255,255,255,.55); font-size: 10px; }
.home32-login-note strong { color: rgba(255,255,255,.8); }
.home32-check { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(94,224,172,.13); color: #6ee7b7; font-weight: 900; }
.home32-mini-stats { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 36px; padding-top: 25px; border-top: 1px solid rgba(255,255,255,.1); }
.home32-mini-stats article { min-width: 95px; }
.home32-mini-stats strong,
.home32-mini-stats span { display: block; }
.home32-mini-stats strong { font-size: 22px; }
.home32-mini-stats span { margin-top: 2px; color: rgba(255,255,255,.48); font-size: 9px; }

.home32-hero-console { position: relative; min-width: 0; padding: 18px; }
.home32-console-window {
    position: relative;
    z-index: 2;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 25px;
    background: rgba(255,255,255,.095);
    box-shadow: 0 35px 90px rgba(0,10,22,.34);
    backdrop-filter: blur(18px);
}
.home32-console-head { min-height: 48px; padding: 0 16px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.055); }
.home32-window-dots { display: flex; gap: 5px; }
.home32-window-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.25); }
.home32-console-head > span { color: rgba(255,255,255,.55); font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.home32-online { justify-self: end; display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.55); font-size: 8px; }
.home32-online i { width: 6px; height: 6px; border-radius: 50%; background: #62dda9; box-shadow: 0 0 0 4px rgba(98,221,169,.1); }
.home32-console-body { padding: 20px; }
.home32-console-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.home32-console-topline small,
.home32-console-topline strong { display: block; }
.home32-console-topline small { color: rgba(255,255,255,.44); font-size: 8px; }
.home32-console-topline strong { margin-top: 3px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.home32-avatar-stack { display: flex; padding-left: 15px; }
.home32-avatar-stack span { width: 28px; height: 28px; margin-left: -8px; display: grid; place-items: center; border: 2px solid #123e69; border-radius: 50%; color: #dff2ff; background: #22679e; font-size: 8px; font-weight: 900; }
.home32-console-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-top: 20px; }
.home32-console-kpis article { padding: 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: rgba(255,255,255,.055); }
.home32-console-kpis span,
.home32-console-kpis strong,
.home32-console-kpis small { display: block; }
.home32-console-kpis span { color: rgba(255,255,255,.42); font-size: 7px; }
.home32-console-kpis strong { margin-top: 6px; font-size: 20px; }
.home32-console-kpis small { margin-top: 3px; color: rgba(255,255,255,.42); font-size: 7px; }
.home32-console-course { display: grid; grid-template-columns: 42px minmax(0,1fr) 20px; gap: 12px; align-items: center; margin-top: 14px; padding: 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.075); }
.home32-course-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #ffdf8c; background: rgba(242,184,75,.14); }
.home32-console-course small,
.home32-console-course strong,
.home32-console-course span { display: block; }
.home32-console-course small { color: #82caf8; font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.home32-console-course strong { margin-top: 2px; font-size: 10px; }
.home32-console-course span { margin-top: 2px; color: rgba(255,255,255,.43); font-size: 7px; }
.home32-console-course b { color: rgba(255,255,255,.4); }
.home32-console-row { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; }
.home32-console-row span { color: rgba(255,255,255,.45); font-size: 7px; }
.home32-console-row i { color: #69dfb0; font-style: normal; }
.home32-float-card { position: absolute; z-index: 3; border: 1px solid rgba(255,255,255,.24); border-radius: 14px; background: rgba(255,255,255,.92); color: #17334e; box-shadow: 0 18px 46px rgba(0,13,28,.18); backdrop-filter: blur(14px); }
.home32-float-one { left: -20px; bottom: -3px; display: flex; align-items: center; gap: 9px; padding: 10px 12px; }
.home32-float-one > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #1a699f; background: #e9f4fb; }
.home32-float-card strong,
.home32-float-card small { display: block; }
.home32-float-card strong { font-size: 9px; }
.home32-float-card small { margin-top: 1px; color: #8290a0; font-size: 7px; }
.home32-float-two { right: -8px; top: -7px; padding: 11px 14px; text-align: center; }
.home32-float-two strong { color: #0f4a79; font-size: 15px; }

.home32-statbar { position: relative; z-index: 3; margin-top: -28px; }
.home32-statbar-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); overflow: hidden; border: 1px solid #dfe7ef; border-radius: 20px; background: rgba(255,255,255,.96); box-shadow: 0 18px 50px rgba(18,47,76,.09); }
.home32-statbar article { display: flex; align-items: center; gap: 14px; padding: 22px; }
.home32-statbar article:not(:last-child) { border-right: 1px solid #e6edf3; }
.home32-statbar article > span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; border-radius: 10px; color: #1c6398; background: #eef6fb; font-size: 8px; font-weight: 900; }
.home32-statbar strong,
.home32-statbar small { display: block; }
.home32-statbar strong { color: #0d3153; font-size: 23px; }
.home32-statbar small { margin-top: 1px; color: #7a899b; font-size: 8px; }

.home32-section { padding: 92px 0; }
.home32-features-section { background: #f4f7fb; }
.home32-heading { display: flex; align-items: end; justify-content: space-between; gap: 42px; margin-bottom: 38px; }
.home32-heading > div { max-width: 720px; }
.home32-heading > div > span,
.home32-cta > div > span { display: block; margin-bottom: 10px; color: #2374ad; font-size: 9px; font-weight: 900; letter-spacing: .15em; }
.home32-heading h2,
.home32-cta h2 { margin: 0; color: #0b2b49; font-size: clamp(31px,4vw,47px); line-height: 1.1; letter-spacing: -.04em; }
.home32-heading > p { max-width: 430px; margin: 0; color: #748396; font-size: 12px; line-height: 1.8; }
.home32-heading-center { justify-content: center; text-align: center; }

.home32-bento { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.home32-bento-card { position: relative; min-height: 240px; padding: 24px; overflow: hidden; border: 1px solid #dfe8ef; border-radius: 21px; background: rgba(255,255,255,.96); box-shadow: 0 14px 40px rgba(28,56,85,.05); }
.home32-bento-main { grid-column: span 2; min-height: 300px; color: #fff; border-color: transparent; background: linear-gradient(135deg,#082844,#0c426f 60%,#156ca9); box-shadow: 0 24px 56px rgba(8,40,68,.16); }
.home32-bento-blue { color: #fff; border-color: transparent; background: linear-gradient(145deg,#1269a5,#2582bf); }
.home32-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.home32-card-top b { color: #a0adbb; font-size: 8px; letter-spacing: .1em; }
.home32-bento-main .home32-card-top b,
.home32-bento-blue .home32-card-top b { color: rgba(255,255,255,.46); }
.home32-iconbox { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; color: #175e91; background: #edf5fa; font-size: 18px; }
.home32-bento-main .home32-iconbox,
.home32-bento-blue .home32-iconbox { color: #fff; background: rgba(255,255,255,.11); }
.home32-bento-card h3 { margin: 22px 0 8px; color: #16324e; font-size: 18px; }
.home32-bento-main h3,
.home32-bento-blue h3 { color: #fff; }
.home32-bento-card p { max-width: 540px; margin: 0; color: #738396; font-size: 11px; line-height: 1.75; }
.home32-bento-main p,
.home32-bento-blue p { color: rgba(255,255,255,.62); }
.home32-layer-preview { position: absolute; right: 26px; bottom: 24px; width: 43%; min-width: 220px; height: 120px; }
.home32-layer-preview i { position: absolute; left: 0; right: 0; height: 54px; border: 1px solid rgba(255,255,255,.13); border-radius: 13px; background: rgba(255,255,255,.07); transform: rotate(-3deg); }
.home32-layer-preview i:nth-child(1) { bottom: 42px; opacity: .45; }
.home32-layer-preview i:nth-child(2) { bottom: 22px; left: 12px; right: 12px; opacity: .65; transform: rotate(2deg); }
.home32-layer-preview i:nth-child(3) { bottom: 0; left: 25px; right: 25px; opacity: .9; transform: none; }
.home32-layer-preview span { position: absolute; left: 42px; bottom: 17px; z-index: 2; color: rgba(255,255,255,.7); font-size: 8px; font-weight: 800; }
.home32-progress-ring { width: 74px; height: 74px; margin-top: 25px; display: grid; place-items: center; border-radius: 50%; border: 7px solid rgba(255,255,255,.14); border-top-color: #fff; color: #fff; font-size: 18px; font-weight: 900; transform: rotate(22deg); }
.home32-progress-ring small { font-size: 8px; }
.home32-bento-wide { grid-column: span 2; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 24px; }
.home32-chipbox { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.home32-chipbox span { padding: 7px 9px; border: 1px solid #d8e4ed; border-radius: 999px; color: #4e6c87; background: #f8fbfd; font-size: 8px; font-weight: 800; }

.home32-flow-section { background: #fff; }
.home32-flow { position: relative; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.home32-flow::before { content: ''; position: absolute; left: 10%; right: 10%; top: 46px; height: 1px; background: linear-gradient(90deg,transparent,#cddde9 12%,#cddde9 88%,transparent); }
.home32-flow article { position: relative; z-index: 1; padding: 22px; text-align: center; border: 1px solid #e0e8ef; border-radius: 19px; background: #fff; }
.home32-flow article > b { position: absolute; right: 14px; top: 13px; color: #a3afbb; font-size: 8px; }
.home32-flow-icon { width: 49px; height: 49px; margin: 0 auto 15px; display: grid; place-items: center; border: 7px solid #fff; border-radius: 50%; color: #155d91; background: #eaf4fa; box-shadow: 0 0 0 1px #d9e7f1; }
.home32-flow h3 { margin: 0 0 7px; color: #17334f; font-size: 14px; }
.home32-flow p { margin: 0; color: #7c8b9c; font-size: 9px; line-height: 1.7; }

.home32-role-section { background: linear-gradient(180deg,#f4f7fb,#eef4f8); }
.home32-role-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.home32-role-grid article { padding: 25px; border: 1px solid #dae5ee; border-radius: 20px; background: rgba(255,255,255,.92); box-shadow: 0 14px 36px rgba(29,57,85,.045); transition: transform .18s ease, box-shadow .18s ease; }
.home32-role-grid article:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(29,57,85,.09); }
.home32-role-letter { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 22px; border-radius: 14px; color: #fff; background: linear-gradient(135deg,#0b3458,#1c72ae); font-weight: 900; box-shadow: 0 12px 24px rgba(15,70,113,.16); }
.home32-role-grid article > span { color: #2775aa; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.home32-role-grid h3 { margin: 8px 0; color: #17334f; font-size: 16px; }
.home32-role-grid p { margin: 0; color: #778799; font-size: 10px; line-height: 1.7; }

.home32-news-section { background: #fff; }
.home32-text-link { color: #1b6fa8; font-size: 10px; font-weight: 900; }
.home32-news-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.home32-news-grid article { position: relative; min-height: 210px; padding: 24px; border: 1px solid #dfe8ef; border-radius: 20px; background: #fff; box-shadow: 0 14px 34px rgba(27,54,82,.045); }
.home32-news-no { position: absolute; right: 18px; top: 15px; color: #e8eef3; font-size: 32px; font-weight: 900; }
.home32-news-grid article > span { color: #2877ad; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.home32-news-grid h3 { position: relative; margin: 18px 0 9px; color: #18334d; font-size: 15px; line-height: 1.42; }
.home32-news-grid p { position: relative; margin: 0; color: #7b8999; font-size: 10px; line-height: 1.72; }

.home32-cta-section { padding: 28px 0 90px; background: #fff; }
.home32-cta { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 48px; padding: 46px; border-radius: 26px; color: #fff; background: linear-gradient(125deg,#061f37,#0b355b 54%,#1268a2); box-shadow: 0 30px 70px rgba(8,39,65,.18); }
.home32-cta-orb { position: absolute; width: 360px; height: 360px; right: -170px; top: -190px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.home32-cta > div > span { color: #80c8f7; }
.home32-cta h2 { max-width: 720px; color: #fff; }
.home32-cta p { max-width: 610px; margin: 13px 0 0; color: rgba(255,255,255,.58); font-size: 11px; }
.home32-cta-actions { position: relative; z-index: 1; flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.home32-footer { padding: 28px 0; border-top: 1px solid #e0e8ef; background: #f5f8fb; }
.home32-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.home32-footer-brand { display: flex; align-items: center; gap: 10px; }
.home32-footer-brand img,
.home32-footer-brand .home32-brand-mark { width: 36px; height: 36px; flex-basis: 36px; border-radius: 10px; }
.home32-footer-brand strong,
.home32-footer-brand small { display: block; }
.home32-footer-brand strong { color: #143451; font-size: 10px; }
.home32-footer-brand small { color: #8492a1; font-size: 8px; }
.home32-footer p { margin: 0; color: #8693a2; font-size: 8px; text-align: right; }

@media (max-width: 1080px) {
    .home32-nav { grid-template-columns: minmax(220px,1fr) auto; }
    .home32-nav-links { display: none; }
    .home32-hero-grid { grid-template-columns: minmax(0,1fr) 420px; gap: 38px; }
    .home32-console-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .home32-role-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 860px) {
    .home32-container,
    .home32-nav { width: min(100% - 30px,720px); }
    .home32-hero { padding-top: 155px; }
    .home32-hero-grid { grid-template-columns: 1fr; gap: 48px; }
    .home32-hero-copy { text-align: center; }
    .home32-hero-copy > p { margin-left: auto; margin-right: auto; }
    .home32-hero-actions,
    .home32-login-note,
    .home32-mini-stats { justify-content: center; }
    .home32-hero-console { width: min(100%,570px); margin: 0 auto; }
    .home32-statbar-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .home32-statbar article:nth-child(2) { border-right: 0; }
    .home32-statbar article:nth-child(-n+2) { border-bottom: 1px solid #e6edf3; }
    .home32-heading { align-items: flex-start; flex-direction: column; gap: 15px; }
    .home32-bento { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .home32-bento-main,
    .home32-bento-wide { grid-column: span 2; }
    .home32-flow { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .home32-flow::before { display: none; }
    .home32-news-grid { grid-template-columns: 1fr; }
    .home32-cta { align-items: flex-start; flex-direction: column; }
    .home32-cta-actions { justify-content: flex-start; }
}
@media (max-width: 620px) {
    .home32-container,
    .home32-nav { width: min(100% - 24px,560px); }
    .home32-nav-shell { padding: 8px 0; }
    .home32-nav { min-height: 60px; padding: 7px 8px 7px 10px; border-radius: 16px; }
    .home32-brand img,
    .home32-brand-mark { width: 38px; height: 38px; flex-basis: 38px; border-radius: 11px; }
    .home32-brand strong { max-width: 160px; font-size: 11px; }
    .home32-brand small { font-size: 7px; }
    .home32-nav-register { display: none; }
    .home32-nav-actions .home32-btn { min-height: 36px; padding: 7px 10px; font-size: 10px; }
    .home32-hero { margin-top: -76px; padding: 132px 0 62px; }
    .home32-pill { font-size: 7px; }
    .home32-hero h1 { font-size: 42px; }
    .home32-hero-copy > p { font-size: 13px; }
    .home32-hero-actions { display: grid; grid-template-columns: 1fr; }
    .home32-hero-actions .home32-btn { width: 100%; }
    .home32-login-note { text-align: left; }
    .home32-mini-stats { gap: 12px; }
    .home32-mini-stats article { min-width: 84px; }
    .home32-hero-console { padding: 8px 0 14px; }
    .home32-console-body { padding: 15px; }
    .home32-console-head { grid-template-columns: auto 1fr auto; }
    .home32-console-head > span { text-align: center; }
    .home32-console-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .home32-console-course { grid-template-columns: 38px minmax(0,1fr); }
    .home32-console-course > b { display: none; }
    .home32-console-row { flex-wrap: wrap; justify-content: flex-start; }
    .home32-float-card { display: none; }
    .home32-statbar { margin-top: -20px; }
    .home32-statbar-grid { grid-template-columns: repeat(2,minmax(0,1fr)); border-radius: 17px; }
    .home32-statbar article { padding: 16px 12px; }
    .home32-statbar article > span { display: none; }
    .home32-statbar strong { font-size: 19px; }
    .home32-section { padding: 62px 0; }
    .home32-heading h2,
    .home32-cta h2 { font-size: 32px; }
    .home32-bento { grid-template-columns: 1fr; }
    .home32-bento-main,
    .home32-bento-wide { grid-column: auto; min-height: 0; }
    .home32-bento-wide { display: block; }
    .home32-layer-preview { position: relative; right: auto; bottom: auto; width: 100%; min-width: 0; margin-top: 24px; }
    .home32-chipbox { justify-content: flex-start; margin-top: 20px; }
    .home32-flow { grid-template-columns: 1fr; }
    .home32-role-grid { grid-template-columns: 1fr; }
    .home32-cta-section { padding-bottom: 62px; }
    .home32-cta { gap: 28px; padding: 28px 22px; border-radius: 21px; }
    .home32-cta-actions { display: grid; width: 100%; }
    .home32-cta-actions .home32-btn { width: 100%; }
    .home32-footer-inner { align-items: flex-start; flex-direction: column; gap: 14px; }
    .home32-footer p { text-align: left; }
}

/* =========================================================
   v1.4.33 - BERANDA MODERN BLUE (referensi visual pengguna)
   ========================================================= */
.home33-body{margin:0;background:#f7fbff;color:#102a55;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}.home33-body *{box-sizing:border-box}.home33-body a{text-decoration:none}.home33-page{min-height:100vh;overflow:hidden;background:linear-gradient(#fff 0,#f7fbff 48%,#fff 100%)}.home33-container{width:min(1180px,calc(100% - 40px));margin-inline:auto}.home33-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);border-bottom:1px solid rgba(26,77,139,.08);box-shadow:0 10px 30px rgba(17,55,103,.05);backdrop-filter:blur(18px)}.home33-nav{min-height:78px;display:grid;grid-template-columns:minmax(260px,1fr) auto minmax(260px,1fr);align-items:center;gap:24px}.home33-brand{display:flex;align-items:center;gap:11px;min-width:0}.home33-brand img,.home33-brand-fallback{width:46px;height:46px;flex:0 0 46px;border-radius:13px;object-fit:contain;background:#fff;box-shadow:0 8px 20px rgba(15,56,112,.08)}.home33-brand-fallback{display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#0872e8,#00b6ff);font-weight:900}.home33-brand strong,.home33-brand small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.home33-brand strong{color:#0e315f;font-size:15px;line-height:1.25}.home33-brand small{margin-top:3px;color:#6c7e99;font-size:8px}.home33-menu{display:flex;align-items:center;justify-content:center;gap:24px}.home33-menu a{position:relative;padding:30px 0 27px;color:#16345f;font-size:10px;font-weight:800}.home33-menu a:hover,.home33-menu a.active{color:#0867e8}.home33-menu a.active:after{content:"";position:absolute;left:10%;right:10%;bottom:18px;height:2px;border-radius:999px;background:#176cff}.home33-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}.home33-search{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;color:#164b81;background:#eff7ff;font-size:20px;font-weight:900}.home33-btn{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 18px;border:1px solid transparent;border-radius:13px;font-size:10px;font-weight:900;transition:.18s ease}.home33-btn:hover{transform:translateY(-2px)}.home33-btn-primary{color:#fff;background:linear-gradient(135deg,#0867ef,#0754ce);box-shadow:0 12px 26px rgba(9,102,235,.22)}.home33-btn-soft{color:#0e4c9b;background:#eef6ff;border-color:#d9eaff}.home33-btn-white{color:#0b58c6;background:#fff;box-shadow:0 12px 30px rgba(2,40,94,.13)}.home33-btn-outline{color:#fff;border-color:rgba(255,255,255,.62);background:rgba(5,72,174,.16);backdrop-filter:blur(8px)}.home33-btn-lg{min-height:52px;padding:13px 23px;border-radius:17px;font-size:12px}
.home33-hero{position:relative;padding:70px 0 0;background:radial-gradient(circle at 60% 10%,rgba(73,210,255,.38),transparent 26%),linear-gradient(120deg,#0758d9 0%,#0977f5 43%,#0aa8f4 100%);color:#fff}.home33-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(10,50,150,.16),transparent 42%),repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 1px,transparent 1px 42px);pointer-events:none}.home33-hero-glow{position:absolute;border-radius:50%;filter:blur(5px);pointer-events:none}.home33-hero-glow-a{width:430px;height:430px;left:-180px;top:-170px;background:radial-gradient(circle,rgba(37,238,255,.25),transparent 68%)}.home33-hero-glow-b{width:520px;height:520px;right:-170px;bottom:-260px;background:radial-gradient(circle,rgba(125,95,255,.26),transparent 68%)}.home33-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(480px,.98fr);align-items:center;gap:50px;padding-bottom:54px}.home33-kicker{display:inline-block;margin-bottom:14px;color:#bfeeff;font-size:8px;font-weight:900;letter-spacing:.18em}.home33-hero h1{max-width:670px;margin:0;color:#fff;font-size:48px;line-height:1.05;letter-spacing:-.035em}.home33-hero h1 em{font-style:normal;color:#58f3e2}.home33-hero-copy>p{max-width:610px;margin:20px 0 0;color:rgba(255,255,255,.86);font-size:14px;line-height:1.72}.home33-hero-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:27px}.home33-benefit-line{display:flex;flex-wrap:wrap;gap:22px;margin-top:29px;color:#d8f7ff;font-size:9px;font-weight:800}.home33-benefit-line span{display:flex;align-items:center;gap:6px}.home33-hero-visual{position:relative;min-height:390px}.home33-orbit{position:absolute;border:1px solid rgba(255,255,255,.2);border-radius:50%}.home33-orbit-one{width:410px;height:410px;right:-30px;top:-15px}.home33-orbit-two{width:300px;height:300px;right:35px;top:40px}.home33-laptop{position:absolute;left:10px;right:0;top:24px;z-index:2;border:10px solid rgba(11,46,104,.85);border-bottom-width:18px;border-radius:24px 24px 16px 16px;background:#eaf5ff;box-shadow:0 28px 70px rgba(2,38,94,.34);transform:perspective(900px) rotateY(-3deg)}.home33-laptop:after{content:"";position:absolute;left:12%;right:12%;bottom:-32px;height:15px;border-radius:0 0 24px 24px;background:#123766;box-shadow:0 8px 18px rgba(0,30,70,.2)}.home33-laptop-top{height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:#fff;border-radius:13px 13px 0 0}.home33-mini-brand{display:flex;align-items:center;gap:7px;color:#173764;font-size:8px}.home33-mini-brand img,.home33-mini-brand span{width:24px;height:24px;border-radius:8px;object-fit:contain}.home33-mini-brand span{display:grid;place-items:center;color:#fff;background:#0874ed}.home33-dotbar{display:flex;gap:5px}.home33-dotbar i{width:6px;height:6px;border-radius:50%;background:#d9e8f8}.home33-laptop-screen{display:grid;grid-template-columns:115px minmax(0,1fr);min-height:255px;background:#f7fbff}.home33-laptop-screen aside{padding:20px 12px;color:#dceaff;background:linear-gradient(180deg,#0a3568,#0b2750);font-size:8px}.home33-laptop-screen aside b,.home33-laptop-screen aside span{display:block;padding:8px 9px;border-radius:8px}.home33-laptop-screen aside b{margin-bottom:10px;color:#fff;background:#1579ef}.home33-dash{padding:18px}.home33-dash>small{color:#7590af;font-size:7px;font-weight:900;letter-spacing:.12em}.home33-dash h3{margin:3px 0 4px;color:#173664;font-size:18px}.home33-dash p{margin:0;color:#7b8da4;font-size:8px}.home33-dash-search{margin:14px 0;padding:9px 10px;border:1px solid #e1edf8;border-radius:10px;color:#91a3b8;background:#fff;font-size:7px}.home33-dash-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.home33-dash-grid article{padding:10px;border:1px solid #e3edf6;border-radius:11px;background:#fff;box-shadow:0 6px 16px rgba(25,75,125,.05)}.home33-dash-grid article span{float:left;margin-right:7px;font-size:15px}.home33-dash-grid b,.home33-dash-grid small{display:block}.home33-dash-grid b{color:#1f4778;font-size:8px}.home33-dash-grid small{margin-top:2px;color:#8b9aab;font-size:6px}.home33-student-card{position:absolute;z-index:5;right:-12px;bottom:15px;width:180px;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:9px;padding:11px;border:1px solid rgba(255,255,255,.48);border-radius:16px;color:#154c87;background:rgba(255,255,255,.94);box-shadow:0 16px 36px rgba(2,36,89,.2)}.home33-student-avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;color:#fff;background:linear-gradient(135deg,#8f76ff,#5664ee);font-weight:900}.home33-student-card strong,.home33-student-card small{display:block}.home33-student-card strong{font-size:8px}.home33-student-card small{margin-top:2px;color:#7890a9;font-size:6px;line-height:1.4}.home33-student-card>span{color:#21b977;font-size:20px;font-weight:900}.home33-stat-strip{position:relative;z-index:7;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:-42px;border-radius:20px;background:#fff;box-shadow:0 20px 48px rgba(14,70,132,.16)}.home33-stat-strip article{display:flex;align-items:center;justify-content:center;gap:14px;padding:21px 16px;border-right:1px solid #e3ecf6}.home33-stat-strip article:last-child{border-right:0}.home33-stat-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;font-size:21px}.home33-stat-icon.blue{background:#edf5ff}.home33-stat-icon.purple{background:#f2ebff}.home33-stat-icon.green{background:#e9fff5}.home33-stat-icon.gold{background:#fff6df}.home33-stat-strip strong,.home33-stat-strip small{display:block}.home33-stat-strip strong{color:#0865df;font-size:23px;line-height:1}.home33-stat-strip small{margin-top:4px;color:#71839b;font-size:8px;font-weight:800}
.home33-section{padding:95px 0 72px}.home33-section-title{margin-bottom:32px}.home33-section-title.center{text-align:center}.home33-section-title>span{display:inline-flex;align-items:center;gap:10px;color:#0871ed;font-size:8px;font-weight:900;letter-spacing:.18em}.home33-section-title>span:before,.home33-section-title>span:after{content:"";width:28px;height:1px;background:#58a2ff}.home33-section-title h2{margin:8px 0 9px;color:#123668;font-size:30px;line-height:1.15;letter-spacing:-.025em}.home33-section-title p{max-width:680px;margin:0 auto;color:#73849b;font-size:10px;line-height:1.7}.home33-why{padding-top:115px;background:linear-gradient(180deg,#f5faff,#fff)}.home33-color-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.home33-color-grid article{min-height:172px;padding:24px;border-radius:18px;color:#fff;box-shadow:0 18px 36px rgba(31,83,145,.12);transition:.2s ease}.home33-color-grid article:hover{transform:translateY(-5px)}.home33-color-grid article.green{background:linear-gradient(145deg,#28cf8d,#13a86f)}.home33-color-grid article.orange{background:linear-gradient(145deg,#ffc63d,#ff8a16)}.home33-color-grid article.purple{background:linear-gradient(145deg,#b548f7,#6747ee)}.home33-color-grid article.blue{background:linear-gradient(145deg,#25bdf8,#086bea)}.home33-color-grid article>div{font-size:25px}.home33-color-grid h3{margin:16px 0 8px;font-size:14px}.home33-color-grid p{margin:0;color:rgba(255,255,255,.88);font-size:9px;line-height:1.55}.home33-features{background:#fff}.home33-feature-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.home33-feature-grid article{min-height:240px;padding:20px 17px;border:1px solid #e1ebf5;border-radius:17px;background:#fff;box-shadow:0 12px 30px rgba(24,75,128,.07);transition:.18s ease}.home33-feature-grid article:hover{transform:translateY(-4px);box-shadow:0 20px 36px rgba(24,75,128,.11)}.home33-feature-icon{width:55px;height:55px;display:grid;place-items:center;margin-bottom:19px;border-radius:15px;font-size:28px;font-weight:900}.home33-feature-icon.blue{background:#edf5ff}.home33-feature-icon.orange{background:#fff1df}.home33-feature-icon.green{background:#e9fff4}.home33-feature-icon.purple{background:#f2edff}.home33-feature-icon.pink{color:#f24c75;background:#fff0f4}.home33-feature-icon.cyan{color:#0589dd;background:#e9f9ff}.home33-feature-grid h3{margin:0 0 8px;color:#12376a;font-size:13px}.home33-feature-grid p{margin:0;color:#74859a;font-size:9px;line-height:1.6}.home33-feature-grid a{display:inline-block;margin-top:18px;color:#0871eb;font-size:8px;font-weight:900}.home33-roles{background:linear-gradient(180deg,#f7fbff,#eef8ff)}.home33-role-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.home33-role-grid article{overflow:hidden;padding:0 18px 17px;border:1px solid #dceaf6;border-radius:18px;background:#fff;box-shadow:0 12px 28px rgba(24,75,128,.07)}.home33-role-portrait{height:122px;margin:0 -18px 16px;display:grid;place-items:center;font-size:54px}.home33-role-portrait.student{background:linear-gradient(135deg,#e4f0ff,#f4f9ff)}.home33-role-portrait.lecturer{background:linear-gradient(135deg,#e6fff5,#f7fffb)}.home33-role-portrait.kaprodi{background:linear-gradient(135deg,#f0eaff,#fbf9ff)}.home33-role-portrait.admin{background:linear-gradient(135deg,#fff2e7,#fffaf5)}.home33-role-grid h3{margin:0 0 10px;color:#12366a;font-size:14px}.home33-role-grid ul{display:grid;gap:6px;margin:0 0 17px;padding:0;list-style:none;color:#5f7690;font-size:8px}.home33-role-grid li:before{content:"✓";margin-right:6px;color:#17b778;font-weight:900}.home33-role-btn{display:flex;align-items:center;justify-content:center;min-height:37px;border-radius:10px;color:#fff;font-size:8px;font-weight:900}.home33-role-btn.blue{background:#0872ed}.home33-role-btn.green{background:#11a96e}.home33-role-btn.purple{background:#7549e8}.home33-role-btn.orange{background:#f39218}.home33-info{background:#fff}.home33-info-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);gap:24px}.home33-mini-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.home33-mini-heading span{color:#123c75;font-size:10px;font-weight:900;letter-spacing:.08em}.home33-mini-heading a{color:#0871e9;font-size:8px;font-weight:900}.home33-news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.home33-news-grid article{min-height:182px;padding:16px;border:1px solid #e2ebf4;border-radius:15px;background:#fff;box-shadow:0 10px 26px rgba(20,74,130,.06)}.home33-news-icon{width:35px;height:35px;display:grid;place-items:center;margin-bottom:10px;border-radius:10px;font-size:16px}.home33-news-icon.pink{background:#fff0f4}.home33-news-icon.blue{background:#edf5ff}.home33-news-icon.green{background:#eafff3}.home33-news-grid article>span{color:#7d8fa4;font-size:7px}.home33-news-grid h3{margin:7px 0;color:#163967;font-size:10px;line-height:1.4}.home33-news-grid p{margin:0;color:#7a899d;font-size:7px;line-height:1.55}.home33-news-grid article>small{display:inline-block;margin-top:10px;padding:4px 7px;border-radius:999px;color:#0a6de0;background:#eef6ff;font-size:6px;font-weight:900}.home33-faq details{margin-bottom:8px;border:1px solid #e0eaf4;border-radius:12px;background:#fff;box-shadow:0 7px 20px rgba(25,73,124,.045)}.home33-faq summary{cursor:pointer;padding:14px 15px;color:#153767;font-size:9px;font-weight:900;list-style:none}.home33-faq summary::-webkit-details-marker{display:none}.home33-faq summary:after{content:"⌄";float:right;color:#0b70e9}.home33-faq details[open] summary:after{content:"⌃"}.home33-faq p{margin:0;padding:0 15px 14px;color:#78889d;font-size:8px;line-height:1.6}.home33-cta-section{padding:0 0 48px;background:#fff}.home33-cta{position:relative;overflow:hidden;display:grid;grid-template-columns:110px minmax(0,1fr) auto;align-items:center;gap:24px;padding:24px 30px;border-radius:19px;color:#fff;background:linear-gradient(120deg,#0370ec,#09a9f0);box-shadow:0 20px 44px rgba(7,98,218,.18)}.home33-cta:before,.home33-cta:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.14);border-radius:50%}.home33-cta:before{width:250px;height:250px;right:-90px;top:-120px}.home33-cta:after{width:180px;height:180px;left:-80px;bottom:-100px}.home33-cta-campus{position:relative;z-index:1;height:74px;display:grid;place-items:center;border-radius:14px;color:#0a65da;background:rgba(255,255,255,.88);font-size:38px}.home33-cta>div:nth-child(2){position:relative;z-index:1}.home33-cta strong{font-size:10px}.home33-cta h2{margin:3px 0 4px;color:#fff;font-size:22px}.home33-cta p{margin:0;color:rgba(255,255,255,.83);font-size:8px}.home33-cta>a{position:relative;z-index:1}.home33-footer{padding:45px 0 18px;color:#d9e8f7;background:linear-gradient(180deg,#08294d,#061c36)}.home33-footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:38px}.home33-footer .footer-brand strong{color:#fff}.home33-footer .footer-brand small{color:#9bb5d0}.home33-footer-about>p{max-width:300px;margin-top:15px;color:#9db3ca;font-size:8px;line-height:1.7}.home33-footer h3{margin:0 0 12px;color:#fff;font-size:10px}.home33-footer-grid>div:not(:first-child){display:flex;flex-direction:column;align-items:flex-start}.home33-footer a,.home33-footer-grid>div:not(:first-child)>p{margin:0 0 7px;color:#a9bfd5;font-size:8px;line-height:1.55}.home33-footer a:hover{color:#fff}.home33-footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:35px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);color:#7f9bb7;font-size:7px}
@media(max-width:1100px){.home33-nav{grid-template-columns:minmax(220px,1fr) auto}.home33-menu{display:none}.home33-hero-grid{grid-template-columns:1fr 430px;gap:26px}.home33-feature-grid{grid-template-columns:repeat(3,1fr)}.home33-role-grid,.home33-color-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:850px){.home33-container{width:min(100% - 28px,720px)}.home33-hero{padding-top:50px}.home33-hero-grid{grid-template-columns:1fr;gap:34px}.home33-hero-copy{text-align:center}.home33-hero-copy>p{margin-inline:auto}.home33-hero-buttons,.home33-benefit-line{justify-content:center}.home33-hero-visual{width:min(100%,560px);margin-inline:auto}.home33-stat-strip{grid-template-columns:repeat(2,1fr)}.home33-stat-strip article:nth-child(2){border-right:0}.home33-stat-strip article:nth-child(-n+2){border-bottom:1px solid #e3ecf6}.home33-feature-grid{grid-template-columns:repeat(2,1fr)}.home33-info-grid{grid-template-columns:1fr}.home33-footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.home33-container{width:min(100% - 22px,560px)}.home33-nav{min-height:66px;gap:10px}.home33-brand img,.home33-brand-fallback{width:38px;height:38px;flex-basis:38px}.home33-brand strong{max-width:155px;font-size:11px}.home33-brand small{font-size:6px}.home33-search,.home33-actions .home33-btn-soft{display:none}.home33-actions .home33-btn{min-height:36px;padding:8px 12px;font-size:9px}.home33-hero h1{font-size:37px}.home33-hero-copy>p{font-size:12px}.home33-hero-buttons{display:grid}.home33-hero-buttons .home33-btn{width:100%}.home33-benefit-line{gap:10px;font-size:7px}.home33-hero-visual{min-height:310px}.home33-laptop{left:0;top:12px;border-width:7px;border-bottom-width:13px}.home33-laptop-screen{grid-template-columns:86px 1fr;min-height:200px}.home33-laptop-screen aside{padding:12px 7px;font-size:6px}.home33-dash{padding:12px}.home33-dash h3{font-size:14px}.home33-dash-grid{gap:5px}.home33-dash-grid article{padding:7px}.home33-student-card{right:2px;bottom:2px;width:160px}.home33-orbit{display:none}.home33-stat-strip{margin-bottom:-30px}.home33-stat-strip article{padding:14px 8px;gap:8px}.home33-stat-icon{width:35px;height:35px;font-size:16px}.home33-stat-strip strong{font-size:17px}.home33-section{padding:72px 0 55px}.home33-why{padding-top:90px}.home33-section-title h2{font-size:25px}.home33-color-grid,.home33-feature-grid,.home33-role-grid,.home33-news-grid,.home33-footer-grid{grid-template-columns:1fr}.home33-color-grid article{min-height:auto}.home33-feature-grid article{min-height:auto}.home33-role-portrait{height:105px}.home33-cta{grid-template-columns:1fr;text-align:center}.home33-cta-campus{width:100px;margin:auto}.home33-cta .home33-btn{width:100%}.home33-footer-bottom{flex-direction:column}}

/* =========================================================
   v1.4.34 - BERANDA SESUAI MODEL REFERENSI + TYPOGRAPHY BESAR
   ========================================================= */
@media (min-width: 851px) {
  .home33-container{width:min(1260px,calc(100% - 56px))}
  .home33-nav{min-height:86px;grid-template-columns:minmax(300px,1fr) auto minmax(300px,1fr);gap:30px}
  .home33-brand img,.home33-brand-fallback{width:54px;height:54px;flex-basis:54px;border-radius:15px}
  .home33-brand strong{font-size:18px}
  .home33-brand small{font-size:11px}
  .home33-menu{gap:30px}
  .home33-menu a{padding:33px 0 29px;font-size:13px}
  .home33-menu a.active:after{bottom:19px;height:3px}
  .home33-search{width:44px;height:44px;font-size:22px}
  .home33-btn{min-height:45px;padding:10px 21px;border-radius:14px;font-size:13px}
  .home33-btn-lg{min-height:58px;padding:15px 28px;border-radius:18px;font-size:15px}

  .home33-hero{padding-top:78px}
  .home33-hero-grid{grid-template-columns:minmax(0,1fr) minmax(540px,1.02fr);gap:54px;padding-bottom:62px}
  .home33-kicker{margin-bottom:18px;font-size:11px;letter-spacing:.2em}
  .home33-hero h1{max-width:720px;font-size:60px;line-height:1.04}
  .home33-hero-copy>p{max-width:650px;margin-top:22px;font-size:18px;line-height:1.65}
  .home33-hero-buttons{gap:14px;margin-top:30px}
  .home33-benefit-line{gap:28px;margin-top:32px;font-size:13px}
  .home33-hero-visual{min-height:455px}
  .home33-orbit-one{width:470px;height:470px;right:-35px;top:-10px}
  .home33-orbit-two{width:340px;height:340px;right:50px;top:55px}
  .home33-laptop{left:0;top:28px;border-width:12px;border-bottom-width:21px;border-radius:26px 26px 17px 17px}
  .home33-laptop-top{height:50px;padding:0 17px}
  .home33-mini-brand{gap:9px;font-size:11px}
  .home33-mini-brand img,.home33-mini-brand span{width:29px;height:29px;border-radius:9px}
  .home33-dotbar i{width:7px;height:7px}
  .home33-laptop-screen{grid-template-columns:135px minmax(0,1fr);min-height:300px}
  .home33-laptop-screen aside{padding:23px 14px;font-size:10px}
  .home33-laptop-screen aside b,.home33-laptop-screen aside span{padding:9px 10px}
  .home33-dash{padding:22px}
  .home33-dash>small{font-size:9px}
  .home33-dash h3{margin:4px 0 6px;font-size:24px}
  .home33-dash p{font-size:11px;line-height:1.45}
  .home33-dash-search{margin:17px 0;padding:11px 12px;font-size:10px}
  .home33-dash-grid{gap:10px}
  .home33-dash-grid article{padding:13px;border-radius:13px}
  .home33-dash-grid article span{margin-right:9px;font-size:20px}
  .home33-dash-grid b{font-size:11px}
  .home33-dash-grid small{font-size:9px}
  .home33-student-card{right:-12px;bottom:18px;width:220px;grid-template-columns:46px 1fr auto;gap:11px;padding:14px;border-radius:18px}
  .home33-student-avatar{width:46px;height:46px;border-radius:13px;font-size:18px}
  .home33-student-card strong{font-size:11px}
  .home33-student-card small{font-size:9px}
  .home33-student-card>span{font-size:23px}

  .home33-stat-strip{margin-bottom:-49px;border-radius:22px}
  .home33-stat-strip article{gap:16px;padding:26px 20px}
  .home33-stat-icon{width:56px;height:56px;border-radius:16px;font-size:26px}
  .home33-stat-strip strong{font-size:31px}
  .home33-stat-strip small{margin-top:5px;font-size:12px}

  .home33-section{padding:88px 0 76px}
  .home33-why{padding-top:125px}
  .home33-section-title{margin-bottom:38px}
  .home33-section-title>span{font-size:11px;letter-spacing:.2em}
  .home33-section-title>span:before,.home33-section-title>span:after{width:38px}
  .home33-section-title h2{margin:10px 0 11px;font-size:38px;line-height:1.12}
  .home33-section-title p{max-width:760px;font-size:14px;line-height:1.65}

  .home33-color-grid{gap:18px}
  .home33-color-grid article{min-height:205px;padding:28px 27px;border-radius:20px}
  .home33-color-grid article>div{font-size:34px}
  .home33-color-grid h3{margin:18px 0 10px;font-size:19px}
  .home33-color-grid p{font-size:13px;line-height:1.55}

  .home33-feature-grid{gap:15px}
  .home33-feature-grid article{min-height:285px;padding:24px 20px;border-radius:19px}
  .home33-feature-icon{width:66px;height:66px;margin-bottom:21px;border-radius:18px;font-size:34px}
  .home33-feature-grid h3{margin-bottom:9px;font-size:17px}
  .home33-feature-grid p{font-size:13px;line-height:1.55}
  .home33-feature-grid a{margin-top:20px;font-size:12px}

  .home33-role-grid{gap:18px}
  .home33-role-grid article{padding:0 22px 21px;border-radius:20px}
  .home33-role-portrait{height:145px;margin:0 -22px 19px;font-size:66px}
  .home33-role-grid h3{margin-bottom:12px;font-size:18px}
  .home33-role-grid ul{gap:8px;margin-bottom:20px;font-size:12px;line-height:1.35}
  .home33-role-btn{min-height:46px;border-radius:12px;font-size:12px}

  .home33-info-grid{grid-template-columns:minmax(0,1.08fr) minmax(430px,.92fr);gap:30px}
  .home33-mini-heading{margin-bottom:17px}
  .home33-mini-heading span{font-size:13px}
  .home33-mini-heading a{font-size:11px}
  .home33-news-grid{gap:13px}
  .home33-news-grid article{min-height:225px;padding:20px;border-radius:17px}
  .home33-news-icon{width:43px;height:43px;margin-bottom:12px;border-radius:12px;font-size:20px}
  .home33-news-grid article>span{font-size:10px}
  .home33-news-grid h3{margin:9px 0;font-size:14px;line-height:1.4}
  .home33-news-grid p{font-size:11px;line-height:1.55}
  .home33-news-grid article>small{margin-top:12px;padding:5px 9px;font-size:9px}
  .home33-faq details{margin-bottom:10px;border-radius:14px}
  .home33-faq summary{padding:17px 18px;font-size:12px}
  .home33-faq p{padding:0 18px 16px;font-size:11px;line-height:1.6}

  .home33-cta-section{padding-bottom:58px}
  .home33-cta{grid-template-columns:130px minmax(0,1fr) auto;gap:30px;padding:30px 36px;border-radius:22px}
  .home33-cta-campus{height:88px;border-radius:17px;font-size:46px}
  .home33-cta strong{font-size:13px}
  .home33-cta h2{margin:5px 0 6px;font-size:30px}
  .home33-cta p{font-size:12px}

  .home33-footer{padding:54px 0 22px}
  .home33-footer-grid{gap:44px}
  .home33-footer-about>p{max-width:340px;margin-top:17px;font-size:11px;line-height:1.7}
  .home33-footer h3{margin-bottom:14px;font-size:13px}
  .home33-footer a,.home33-footer-grid>div:not(:first-child)>p{margin-bottom:8px;font-size:11px}
  .home33-footer-bottom{margin-top:40px;padding-top:18px;font-size:9px}
}

@media (min-width: 1200px) {
  .home33-hero h1{font-size:64px}
  .home33-hero-copy>p{font-size:19px}
  .home33-section-title h2{font-size:40px}
}

@media (max-width: 850px) {
  .home33-brand strong{font-size:14px}
  .home33-brand small{font-size:9px}
  .home33-btn{font-size:11px}
  .home33-kicker{font-size:9px}
  .home33-section-title>span{font-size:9px}
  .home33-section-title p{font-size:12px}
  .home33-color-grid h3{font-size:16px}
  .home33-color-grid p,.home33-feature-grid p{font-size:11px}
  .home33-feature-grid h3{font-size:15px}
  .home33-feature-grid a{font-size:10px}
  .home33-role-grid h3{font-size:16px}
  .home33-role-grid ul{font-size:10px}
  .home33-role-btn{font-size:10px}
  .home33-mini-heading span{font-size:11px}
  .home33-news-grid h3{font-size:13px}
  .home33-news-grid p,.home33-faq p{font-size:10px}
  .home33-faq summary{font-size:11px}
}


/* =========================================================
   v1.4.35 - FINISHING MODEL REFERENSI (lebih padat & terbaca)
   ========================================================= */
.home35-campus-note{position:absolute;z-index:4;right:4px;top:-38px;color:#083a78;font-size:13px;line-height:1.15;font-weight:800;font-style:italic;transform:rotate(-5deg);text-align:center;text-shadow:0 2px 10px rgba(255,255,255,.8)}
.home35-campus-note:after{content:"";display:block;width:76px;height:4px;margin:7px auto 0;border-radius:999px;background:#ffbf2f;transform:rotate(-8deg)}

@media (min-width: 851px){
  .home33-container{width:min(1180px,calc(100% - 48px))}
  .home33-nav{min-height:74px;grid-template-columns:minmax(270px,1fr) auto minmax(270px,1fr);gap:24px}
  .home33-brand img,.home33-brand-fallback{width:48px;height:48px;flex-basis:48px;border-radius:14px}
  .home33-brand strong{font-size:17px}.home33-brand small{font-size:10px}
  .home33-menu{gap:26px}.home33-menu a{padding:28px 0 24px;font-size:13px}.home33-menu a.active:after{bottom:14px}
  .home33-search{width:42px;height:42px}.home33-btn{min-height:43px;font-size:13px}.home33-btn-lg{min-height:56px;font-size:15px}

  .home33-hero{padding-top:56px}
  .home33-hero-grid{grid-template-columns:minmax(0,1fr) minmax(500px,.98fr);gap:38px;padding-bottom:58px}
  .home33-kicker{font-size:11px;margin-bottom:14px}
  .home33-hero h1{font-size:58px;max-width:650px;line-height:1.02}
  .home33-hero-copy>p{font-size:18px;line-height:1.55;max-width:610px;margin-top:18px}
  .home33-hero-buttons{margin-top:25px}.home33-benefit-line{font-size:13px;margin-top:24px;gap:24px}
  .home33-hero-visual{min-height:420px}
  .home33-laptop{top:18px;left:8px;border-width:11px;border-bottom-width:19px}
  .home33-laptop-screen{min-height:285px;grid-template-columns:126px minmax(0,1fr)}
  .home33-laptop-screen aside{font-size:10px;padding:20px 13px}.home33-dash{padding:20px}
  .home33-dash h3{font-size:23px}.home33-dash p{font-size:11px}.home33-dash-search{font-size:10px}
  .home33-dash-grid b{font-size:11px}.home33-dash-grid small{font-size:9px}
  .home33-student-card{right:-5px;bottom:12px;width:210px}

  .home33-stat-strip{margin-bottom:-38px;border-radius:20px}
  .home33-stat-strip article{padding:21px 18px;gap:14px}.home33-stat-icon{width:52px;height:52px;font-size:24px}
  .home33-stat-strip strong{font-size:30px}.home33-stat-strip small{font-size:12px}

  .home33-section{padding:64px 0 58px}
  .home33-why{padding-top:86px}
  .home33-section-title{margin-bottom:30px}.home33-section-title>span{font-size:11px}
  .home33-section-title h2{font-size:35px;margin:8px 0 8px}.home33-section-title p{font-size:14px;line-height:1.55}

  .home33-color-grid{gap:14px}.home33-color-grid article{min-height:176px;padding:23px 22px;border-radius:17px}
  .home33-color-grid article>div{font-size:31px}.home33-color-grid h3{font-size:19px;margin:14px 0 8px}.home33-color-grid p{font-size:14px;line-height:1.48}

  .home33-features{padding-top:58px;padding-bottom:60px}
  .home33-feature-grid{gap:12px}.home33-feature-grid article{min-height:242px;padding:20px 16px;border-radius:16px}
  .home33-feature-icon{width:58px;height:58px;margin-bottom:16px;border-radius:15px;font-size:30px}
  .home33-feature-grid h3{font-size:17px}.home33-feature-grid p{font-size:14px;line-height:1.45}.home33-feature-grid a{font-size:12px;margin-top:16px}

  .home33-roles{padding-top:58px;padding-bottom:48px}
  .home33-role-grid{gap:12px}.home33-role-grid article{padding:0 17px 16px;border-radius:16px}
  .home33-role-portrait{height:88px;margin:0 -17px 14px;font-size:46px}
  .home33-role-grid h3{font-size:18px;margin-bottom:10px}.home33-role-grid ul{font-size:13px;gap:7px;margin-bottom:16px;line-height:1.28}
  .home33-role-btn{min-height:44px;font-size:12px}

  .home33-info{padding-top:48px;padding-bottom:56px}.home33-info-grid{grid-template-columns:minmax(0,1.08fr) minmax(410px,.92fr);gap:22px}
  .home33-mini-heading span{font-size:13px}.home33-mini-heading a{font-size:11px}
  .home33-news-grid{gap:10px}.home33-news-grid article{min-height:195px;padding:16px;border-radius:15px}
  .home33-news-icon{width:40px;height:40px;font-size:19px}.home33-news-grid article>span{font-size:10px}.home33-news-grid h3{font-size:14px;line-height:1.33}.home33-news-grid p{font-size:12px;line-height:1.45}.home33-news-grid article>small{font-size:9px}
  .home33-faq details{margin-bottom:8px}.home33-faq summary{font-size:13px;padding:15px 16px}.home33-faq p{font-size:12px;padding:0 16px 14px;line-height:1.5}

  .home33-cta-section{padding-bottom:42px}.home33-cta{grid-template-columns:110px minmax(0,1fr) auto;gap:24px;padding:23px 28px;border-radius:18px}
  .home33-cta-campus{height:78px}.home33-cta strong{font-size:12px}.home33-cta h2{font-size:27px}.home33-cta p{font-size:12px}

  .home33-footer{padding:42px 0 18px}.home33-footer-grid{gap:32px}.home33-footer-about>p{font-size:11px}.home33-footer h3{font-size:13px}.home33-footer a,.home33-footer-grid>div:not(:first-child)>p{font-size:11px}.home33-footer-bottom{margin-top:30px;font-size:9px}
}

@media (min-width: 1200px){
  .home33-hero h1{font-size:61px}
  .home33-hero-copy>p{font-size:19px}
  .home33-section-title h2{font-size:37px}
}

@media (max-width: 850px){
  .home35-campus-note{display:none}
  .home33-section{padding-top:58px;padding-bottom:50px}
  .home33-why{padding-top:82px}
  .home33-role-portrait{height:90px}
  .home33-role-grid ul{font-size:11px}
  .home33-news-grid p,.home33-faq p{font-size:11px}
}

/* =========================================================
   v1.4.36 - BERANDA REFERENSI FINAL (home36)
   ========================================================= */
.home36-body{margin:0;background:#f8fbff;color:#0f2f62;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}.home36-body *{box-sizing:border-box}.home36-body a{text-decoration:none}.home36-page{min-height:100vh;overflow:hidden;background:linear-gradient(180deg,#fff 0,#f6fbff 52%,#fff 100%)}.home36-container{width:min(1280px,calc(100% - 48px));margin-inline:auto}.home36-header{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.94);border-bottom:1px solid rgba(16,64,132,.08);box-shadow:0 8px 28px rgba(19,73,142,.07);backdrop-filter:blur(18px)}.home36-nav{min-height:84px;display:grid;grid-template-columns:minmax(300px,1fr) auto minmax(260px,1fr);align-items:center;gap:24px}.home36-brand{display:flex;align-items:center;gap:13px;min-width:0;color:#0f3268}.home36-brand img,.home36-logo-fallback{width:52px;height:52px;flex:0 0 52px;border-radius:14px;object-fit:contain;background:#fff;box-shadow:0 7px 20px rgba(16,73,136,.12)}.home36-logo-fallback{display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#108e72,#0d68d9);font-size:22px;font-weight:900}.home36-brand-copy{display:block;min-width:0}.home36-brand-copy strong,.home36-brand-copy small,.home36-brand-copy em{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.home36-brand-copy strong{font-size:19px;line-height:1.1;letter-spacing:.01em}.home36-brand-copy small{margin-top:3px;color:#62758e;font-size:11px;font-weight:600}.home36-brand-copy em{margin-top:2px;color:#7b8da5;font-size:9px;font-style:normal}.home36-menu{display:flex;align-items:center;justify-content:center;gap:30px}.home36-menu a{position:relative;padding:32px 0 29px;color:#153967;font-size:13px;font-weight:850}.home36-menu a:hover,.home36-menu a.active{color:#0b69ef}.home36-menu a.active:after{content:"";position:absolute;left:5%;right:5%;bottom:21px;height:3px;border-radius:999px;background:#126df1}.home36-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px}.home36-search{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:#164a83;background:#eef6ff;font-size:24px;font-weight:900}.home36-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:10px 22px;border:1px solid transparent;border-radius:14px;font-size:13px;font-weight:900;transition:transform .18s ease,box-shadow .18s ease}.home36-btn:hover{transform:translateY(-2px)}.home36-btn-primary{color:#fff;background:linear-gradient(135deg,#0a72f5,#0859d6);box-shadow:0 12px 28px rgba(11,104,232,.24)}.home36-btn-soft{color:#0b58c7;background:#eaf4ff;border-color:#d7e9fb}

.home36-hero{position:relative;padding:0 0 66px;color:#fff;background:linear-gradient(112deg,#0863e9 0%,#0a82f5 47%,#10b0ef 100%);overflow:visible}.home36-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 69% 12%,rgba(255,255,255,.22),transparent 28%),radial-gradient(circle at 8% 80%,rgba(18,246,255,.22),transparent 31%),repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 1px,transparent 1px 54px);pointer-events:none}.home36-hero-shape{position:absolute;pointer-events:none;border-radius:50%;opacity:.5}.home36-hero-shape.one{width:420px;height:420px;left:-180px;top:50px;border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 0 80px rgba(255,255,255,.03)}.home36-hero-shape.two{width:540px;height:540px;right:-210px;bottom:-250px;background:radial-gradient(circle,rgba(112,102,255,.23),transparent 70%)}.home36-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.94fr) minmax(540px,1.06fr);align-items:center;gap:50px;min-height:505px;padding-top:44px;padding-bottom:44px}.home36-hero-copy{min-width:0}.home36-kicker{display:inline-flex;margin-bottom:18px;color:#d6f5ff;font-size:10px;font-weight:900;letter-spacing:.18em}.home36-hero h1{max-width:700px;margin:0;color:#fff;font-size:clamp(48px,4.4vw,70px);line-height:1.02;letter-spacing:-.045em}.home36-hero h1 em{color:#55f4df;font-style:normal}.home36-hero-copy>p{max-width:640px;margin:22px 0 0;color:rgba(255,255,255,.92);font-size:19px;line-height:1.62;font-weight:500}.home36-hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:31px}.home36-btn-hero-primary,.home36-btn-hero-outline{min-height:58px;padding:14px 26px;border-radius:18px;font-size:15px}.home36-btn-hero-primary{color:#0b5bca;background:#fff;box-shadow:0 15px 35px rgba(0,39,104,.18)}.home36-btn-hero-outline{color:#fff;border-color:rgba(255,255,255,.7);background:rgba(5,73,181,.18);backdrop-filter:blur(8px)}.home36-benefits{display:flex;flex-wrap:wrap;gap:26px;margin-top:30px}.home36-benefits span{display:flex;align-items:center;gap:8px;color:#e2faff;font-size:12px;font-weight:800}.home36-benefits b{width:23px;height:23px;display:grid;place-items:center;border-radius:50%;color:#0963df;background:#4ef4e0;font-size:12px}.home36-hero-media{position:relative;align-self:end;min-height:410px;display:flex;align-items:flex-end;justify-content:flex-end}.home36-hero-media img{width:100%;max-width:650px;display:block;object-fit:contain;filter:drop-shadow(0 28px 48px rgba(4,40,100,.24));border-radius:22px}.home36-stats{position:absolute;z-index:8;left:50%;bottom:-48px;transform:translateX(-50%);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;border-radius:22px;background:#fff;box-shadow:0 22px 55px rgba(13,74,149,.18)}.home36-stats article{min-height:96px;display:flex;align-items:center;justify-content:center;gap:16px;padding:20px 18px;border-right:1px solid #dfe9f4}.home36-stats article:last-child{border-right:0}.home36-stat-icon{width:52px;height:52px;display:grid;place-items:center;flex:0 0 52px;border-radius:15px;font-size:24px}.home36-stat-icon.blue{background:#eaf4ff}.home36-stat-icon.purple{background:#f3eaff}.home36-stat-icon.green{background:#e9fff6}.home36-stat-icon.gold{background:#fff6dd}.home36-stats strong,.home36-stats small{display:block}.home36-stats strong{color:#0871ec;font-size:30px;line-height:1}.home36-stats small{margin-top:5px;color:#617793;font-size:11px;font-weight:800}

.home36-section{padding:88px 0}.home36-heading{margin-bottom:34px}.home36-heading.center{text-align:center}.home36-heading>span{display:inline-flex;align-items:center;gap:10px;color:#0d76ef;font-size:10px;font-weight:900;letter-spacing:.18em}.home36-heading>span:before,.home36-heading>span:after{content:"";width:34px;height:2px;border-radius:999px;background:#55a0ff}.home36-heading h2{margin:10px 0 10px;color:#14366e;font-size:36px;line-height:1.13;letter-spacing:-.03em}.home36-heading p{max-width:760px;margin:0 auto;color:#6e8199;font-size:14px;line-height:1.7}.home36-why{padding-top:118px;background:linear-gradient(180deg,#f4f9ff 0,#fff 100%)}.home36-why-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.home36-why-grid article{min-height:202px;padding:28px 26px;border-radius:20px;color:#fff;box-shadow:0 18px 42px rgba(34,84,146,.13);transition:.2s ease}.home36-why-grid article:hover{transform:translateY(-5px)}.home36-why-grid .green{background:linear-gradient(145deg,#29d08f,#14a96f)}.home36-why-grid .orange{background:linear-gradient(145deg,#ffc33b,#ff8a12)}.home36-why-grid .purple{background:linear-gradient(145deg,#b649f7,#6747ee)}.home36-why-grid .blue{background:linear-gradient(145deg,#27bff8,#0870ea)}.home36-why-icon{font-size:33px}.home36-why-grid h3{margin:18px 0 10px;font-size:19px}.home36-why-grid p{margin:0;color:rgba(255,255,255,.94);font-size:13px;line-height:1.55}

.home36-features{background:#fff}.home36-feature-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:15px}.home36-feature-grid article{min-height:272px;display:flex;flex-direction:column;padding:22px 18px 18px;border:1px solid #e0eaf5;border-radius:18px;background:#fff;box-shadow:0 15px 35px rgba(26,79,140,.08);transition:.2s ease}.home36-feature-grid article:hover{transform:translateY(-5px);box-shadow:0 20px 42px rgba(26,79,140,.13)}.home36-feature-icon{width:64px;height:64px;display:grid;place-items:center;margin-bottom:16px;border-radius:18px;font-size:33px}.home36-feature-icon.books{background:#edf5ff}.home36-feature-icon.exam{background:#fff1df}.home36-feature-icon.attendance{background:#ebfff5}.home36-feature-icon.forum{background:#f1ecff}.home36-feature-icon.grade{background:#fff2ee;color:#d95046;font-weight:900}.home36-feature-icon.feeder{background:#e8f9ff;color:#1598c8;font-size:34px}.home36-feature-grid h3{margin:0;color:#123b76;font-size:18px;line-height:1.15}.home36-feature-grid p{margin:10px 0 14px;color:#71849c;font-size:13px;line-height:1.6;flex:1}.home36-feature-grid a{color:#0c72ee;font-size:12px;font-weight:900}

.home36-roles{padding-top:76px;background:linear-gradient(180deg,#f9fcff 0,#f0f7ff 100%)}.home36-role-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.home36-role-grid article{min-height:308px;display:flex;flex-direction:column;overflow:hidden;padding:0 20px 18px;border:1px solid #dce8f4;border-radius:20px;background:#fff;box-shadow:0 14px 34px rgba(26,75,132,.08)}.home36-role-visual{height:88px;margin:0 -20px 14px;display:grid;place-items:center;font-size:52px;background:#edf5ff}.home36-role-grid .student .home36-role-visual{background:#eaf4ff}.home36-role-grid .lecturer .home36-role-visual{background:#ecfff5}.home36-role-grid .kaprodi .home36-role-visual{background:#f2ecff}.home36-role-grid .admin .home36-role-visual{background:#fff4e8}.home36-role-grid h3{margin:0 0 10px;color:#143b76;font-size:18px}.home36-role-grid ul{list-style:none;margin:0 0 18px;padding:0;flex:1}.home36-role-grid li{position:relative;margin:8px 0;padding-left:20px;color:#627790;font-size:12px}.home36-role-grid li:before{content:"✓";position:absolute;left:0;color:#15ae72;font-weight:900}.home36-role-grid a{min-height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;color:#fff;font-size:11px;font-weight:900}.home36-role-grid .student a{background:linear-gradient(135deg,#0b7af4,#0a60df)}.home36-role-grid .lecturer a{background:linear-gradient(135deg,#1dbb78,#10a765)}.home36-role-grid .kaprodi a{background:linear-gradient(135deg,#8c4ff1,#7145e6)}.home36-role-grid .admin a{background:linear-gradient(135deg,#ffa51c,#f1880c)}

.home36-info{padding-top:68px;background:#fff}.home36-info-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:28px;align-items:start}.home36-mini-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.home36-mini-title span{color:#0b5fc7;font-size:12px;font-weight:950;letter-spacing:.08em}.home36-mini-title a{color:#0b72ed;font-size:11px;font-weight:900}.home36-news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.home36-news-grid article{min-height:214px;padding:16px;border:1px solid #dce8f4;border-radius:17px;background:#fff;box-shadow:0 12px 30px rgba(27,76,135,.08)}.home36-news-top{display:flex;align-items:center;gap:10px;margin-bottom:13px}.home36-news-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;font-size:17px}.home36-news-icon.pink{background:#ffe8ec}.home36-news-icon.blue{background:#eaf3ff}.home36-news-icon.green{background:#e9fff5}.home36-news-top time{color:#8191a7;font-size:10px}.home36-news-grid h3{margin:0 0 8px;color:#173c76;font-size:14px;line-height:1.3}.home36-news-grid p{margin:0 0 12px;color:#77889e;font-size:11px;line-height:1.55}.home36-news-grid small{display:inline-flex;padding:5px 9px;border-radius:999px;color:#0b68d8;background:#edf6ff;font-size:9px;font-weight:900}.home36-faq details{margin-bottom:10px;border:1px solid #dce8f4;border-radius:14px;background:#fff;box-shadow:0 7px 22px rgba(26,77,135,.06)}.home36-faq summary{cursor:pointer;list-style:none;padding:16px 18px;color:#14396f;font-size:12px;font-weight:900}.home36-faq summary::-webkit-details-marker{display:none}.home36-faq summary:after{content:"⌄";float:right;color:#0b72ed;font-size:16px}.home36-faq details[open] summary:after{content:"⌃"}.home36-faq p{margin:0;padding:0 18px 17px;color:#788aa0;font-size:11px;line-height:1.55}

.home36-cta-wrap{padding:20px 0 50px;background:#fff}.home36-cta{min-height:128px;display:grid;grid-template-columns:270px minmax(0,1fr) auto;align-items:center;gap:26px;overflow:hidden;padding:0 28px 0 0;border-radius:22px;color:#fff;background:linear-gradient(110deg,#0871ed,#12a9f0);box-shadow:0 20px 45px rgba(11,101,223,.17)}.home36-cta>img{width:100%;height:128px;object-fit:cover;object-position:center;border-radius:22px 0 0 22px}.home36-cta-copy strong{font-size:13px}.home36-cta-copy h2{margin:4px 0 5px;font-size:24px;line-height:1.15}.home36-cta-copy p{margin:0;color:rgba(255,255,255,.85);font-size:12px}.home36-cta-btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:12px 22px;border-radius:15px;color:#0c60cf;background:#fff;font-size:12px;font-weight:900;box-shadow:0 10px 24px rgba(5,48,116,.13)}

.home36-footer{padding:45px 0 0;color:#d9e8f8;background:#0b2b51}.home36-footer-grid{display:grid;grid-template-columns:1.45fr .72fr .72fr 1fr;gap:48px;padding-bottom:36px}.home36-footer .home36-brand{color:#fff}.home36-footer .home36-brand-copy strong{font-size:17px}.home36-footer .home36-brand-copy small{color:#9fb7cf}.home36-footer-brand>p{max-width:330px;margin:18px 0 0;color:#9fb4ca;font-size:11px;line-height:1.7}.home36-footer-grid>div>h3{margin:3px 0 13px;color:#fff;font-size:12px}.home36-footer-grid>div>a{display:block;margin:9px 0;color:#afc4d8;font-size:10px}.home36-footer-grid>div>a:hover{color:#fff}.home36-footer-grid>div>p{margin:8px 0;color:#afc4d8;font-size:10px;line-height:1.55}.home36-footer-bottom{display:flex;justify-content:space-between;gap:20px;padding:18px 0 22px;border-top:1px solid rgba(255,255,255,.12);color:#7f9bb7;font-size:9px}.home36-footer-bottom span:last-child{font-style:italic}

@media (max-width:1120px){.home36-nav{grid-template-columns:1fr auto}.home36-menu{display:none}.home36-hero-grid{grid-template-columns:1fr 1fr;gap:26px}.home36-hero h1{font-size:50px}.home36-hero-copy>p{font-size:16px}.home36-feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.home36-role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home36-info-grid{grid-template-columns:1fr}.home36-cta{grid-template-columns:220px 1fr auto}.home36-footer-grid{grid-template-columns:1.4fr repeat(3,1fr);gap:28px}}
@media (max-width:820px){.home36-container{width:min(100% - 28px,680px)}.home36-nav{min-height:72px;grid-template-columns:1fr auto}.home36-brand img,.home36-logo-fallback{width:44px;height:44px;flex-basis:44px}.home36-brand-copy strong{font-size:15px}.home36-brand-copy small{font-size:9px}.home36-brand-copy em{display:none}.home36-search{display:none}.home36-btn{min-height:40px;padding:8px 13px;font-size:11px}.home36-hero{padding-bottom:110px}.home36-hero-grid{grid-template-columns:1fr;padding-top:42px;padding-bottom:12px}.home36-hero h1{font-size:44px}.home36-hero-copy>p{font-size:16px}.home36-hero-media{min-height:auto}.home36-hero-media img{max-width:100%}.home36-stats{bottom:-80px;grid-template-columns:repeat(2,minmax(0,1fr))}.home36-stats article{min-height:78px;padding:12px;border-bottom:1px solid #e2ebf4}.home36-stats article:nth-child(2){border-right:0}.home36-stat-icon{width:42px;height:42px;flex-basis:42px;font-size:20px}.home36-stats strong{font-size:23px}.home36-stats small{font-size:9px}.home36-why{padding-top:125px}.home36-heading h2{font-size:30px}.home36-why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home36-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home36-role-grid{grid-template-columns:1fr 1fr}.home36-news-grid{grid-template-columns:1fr}.home36-cta{grid-template-columns:1fr;padding:0 20px 20px;text-align:center}.home36-cta>img{width:calc(100% + 40px);height:120px;margin-left:-20px;border-radius:22px 22px 0 0}.home36-footer-grid{grid-template-columns:1fr 1fr}.home36-footer-brand{grid-column:1/-1}}
@media (max-width:560px){.home36-container{width:min(100% - 22px,520px)}.home36-header{position:relative}.home36-nav{min-height:66px}.home36-brand{gap:8px}.home36-brand img,.home36-logo-fallback{width:40px;height:40px;flex-basis:40px}.home36-brand-copy strong{max-width:170px;font-size:13px}.home36-brand-copy small{font-size:8px}.home36-actions .home36-btn-soft{display:none}.home36-hero-grid{padding-top:35px}.home36-kicker{font-size:8px}.home36-hero h1{font-size:36px}.home36-hero-copy>p{font-size:14px}.home36-btn-hero-primary,.home36-btn-hero-outline{min-height:50px;padding:12px 18px;font-size:13px}.home36-benefits{gap:10px 14px}.home36-benefits span{font-size:10px}.home36-stats{bottom:-126px;grid-template-columns:1fr 1fr}.home36-stats article{justify-content:flex-start}.home36-why{padding-top:170px}.home36-section{padding:64px 0}.home36-heading h2{font-size:26px}.home36-heading p{font-size:12px}.home36-why-grid,.home36-role-grid{grid-template-columns:1fr}.home36-feature-grid{grid-template-columns:1fr}.home36-feature-grid article{min-height:auto}.home36-info{padding-top:56px}.home36-footer-grid{grid-template-columns:1fr}.home36-footer-brand{grid-column:auto}.home36-footer-bottom{flex-direction:column}}

/* =========================================================
   v1.4.37 - FINISHING SECTION SESUAI REFERENSI
   ========================================================= */
.home36-container{width:min(1180px,calc(100% - 48px))}
.home36-section{padding:76px 0}
.home36-heading{margin-bottom:30px}
.home36-heading>span{font-size:11px;letter-spacing:.2em}
.home36-heading>span:before,.home36-heading>span:after{width:38px}
.home36-heading h2{margin:9px 0 8px;font-size:34px;line-height:1.12;letter-spacing:-.025em}
.home36-heading p{max-width:760px;font-size:14px;line-height:1.6}

.home36-why{padding-top:110px;padding-bottom:72px;background:linear-gradient(180deg,#f4f9ff 0,#fff 100%)}
.home36-why-grid{gap:16px}
.home36-why-grid article{min-height:198px;padding:28px 24px;border-radius:18px}
.home36-why-icon{font-size:34px}
.home36-why-grid h3{margin:16px 0 10px;font-size:18px;line-height:1.22}
.home36-why-grid p{font-size:13px;line-height:1.55}

.home36-features{padding-top:72px;padding-bottom:76px}
.home36-feature-grid{gap:14px}
.home36-feature-grid article{min-height:260px;padding:20px 16px 18px;border-radius:17px}
.home36-feature-icon{width:60px;height:60px;margin-bottom:15px;border-radius:17px;font-size:31px}
.home36-feature-grid h3{font-size:17px;line-height:1.15}
.home36-feature-grid p{margin:10px 0 14px;font-size:12.8px;line-height:1.58}
.home36-feature-grid a{font-size:11.8px}

.home36-roles{padding-top:70px;padding-bottom:78px;background:#f2f8ff}
.home36-role-grid{gap:16px}
.home36-role-grid article{min-height:330px;padding:0 18px 18px;border-radius:18px;box-shadow:0 12px 30px rgba(26,75,132,.07)}
.home36-role-visual{position:relative;height:112px;margin:0 -18px 16px;display:grid;place-items:center;overflow:hidden;font-size:58px;line-height:1;background:#eaf4ff}
.home36-role-visual:before{content:"";position:absolute;width:148px;height:148px;border-radius:50%;right:-34px;bottom:-74px;background:rgba(255,255,255,.42)}
.home36-role-visual:after{content:"";position:absolute;width:88px;height:88px;border-radius:28px;left:-24px;top:-38px;background:rgba(255,255,255,.28);transform:rotate(24deg)}
.home36-role-grid .student .home36-role-visual{background:linear-gradient(135deg,#e6f1ff,#dbeafe)}
.home36-role-grid .lecturer .home36-role-visual{background:linear-gradient(135deg,#e7fff1,#ddf8e9)}
.home36-role-grid .kaprodi .home36-role-visual{background:linear-gradient(135deg,#f0e9ff,#e9ddff)}
.home36-role-grid .admin .home36-role-visual{background:linear-gradient(135deg,#fff5e7,#ffead5)}
.home36-role-grid h3{margin:0 0 11px;font-size:18px}
.home36-role-grid ul{margin-bottom:17px}
.home36-role-grid li{margin:7px 0;padding-left:20px;font-size:12px;line-height:1.35}
.home36-role-grid a{min-height:43px;border-radius:11px;font-size:11px}

.home36-info{padding-top:60px;padding-bottom:58px}
.home36-mini-title{margin-bottom:15px}
.home36-mini-title span{font-size:12px}
.home36-news-grid article{min-height:205px}
.home36-faq summary{padding:15px 17px;font-size:12px}

.home36-cta-wrap{padding:10px 0 44px}
.home36-cta{min-height:118px;grid-template-columns:250px minmax(0,1fr) auto;border-radius:20px}
.home36-cta>img{height:118px;border-radius:20px 0 0 20px}
.home36-cta-copy h2{font-size:22px}
.home36-cta-copy p{font-size:11.5px}
.home36-footer{padding-top:40px}

@media (min-width:1400px){
  .home36-container{width:min(1220px,calc(100% - 56px))}
  .home36-heading h2{font-size:36px}
  .home36-why-grid article{min-height:205px}
  .home36-feature-grid article{min-height:270px}
  .home36-role-grid article{min-height:338px}
}
@media (max-width:1120px){
  .home36-container{width:min(100% - 34px,980px)}
  .home36-heading h2{font-size:31px}
  .home36-role-visual{height:104px}
}
@media (max-width:820px){
  .home36-container{width:min(100% - 28px,680px)}
  .home36-section{padding:64px 0}
  .home36-heading h2{font-size:29px}
  .home36-why{padding-top:124px}
  .home36-role-grid article{min-height:310px}
}
@media (max-width:560px){
  .home36-container{width:min(100% - 22px,520px)}
  .home36-section{padding:58px 0}
  .home36-heading h2{font-size:25px}
  .home36-why{padding-top:168px}
  .home36-feature-grid,.home36-role-grid,.home36-why-grid{grid-template-columns:1fr}
  .home36-role-grid article{min-height:auto}
}

/* =========================================================
   v1.4.38 — BERANDA FINAL SESUAI REFERENSI PENGGUNA
   Fokus: proporsi target, teks besar, section rapat, footer langsung.
   ========================================================= */
.home36-body{background:#f8fbff;color:#143b77}
.home36-page{background:linear-gradient(180deg,#fff 0,#f7fbff 66%,#eef7ff 100%)}
.home36-container{width:min(1280px,calc(100% - 56px))}
.home36-header{position:sticky;top:0;background:rgba(255,255,255,.96);box-shadow:0 7px 24px rgba(29,91,162,.08)}
.home36-nav{min-height:76px;grid-template-columns:minmax(290px,1fr) auto minmax(220px,1fr);gap:20px}
.home36-brand img,.home36-logo-fallback{width:48px;height:48px;flex-basis:48px;border-radius:50%;box-shadow:none}
.home36-brand-copy strong{font-size:18px;font-weight:950}.home36-brand-copy small{font-size:10px}.home36-brand-copy em{font-size:8px}
.home36-menu{gap:27px}.home36-menu a{padding:29px 0 25px;font-size:12px}.home36-menu a.active:after{bottom:18px;height:2px}
.home36-search{width:40px;height:40px}.home36-btn{min-height:42px;border-radius:12px;padding:9px 20px;font-size:12px}

.home36-hero{padding-bottom:66px;background:linear-gradient(114deg,#0864e9 0%,#0c82f7 48%,#18b8f2 100%)}
.home36-hero-grid{grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr);gap:38px;min-height:500px;padding-top:34px;padding-bottom:34px}
.home36-kicker{display:none}
.home36-hero h1{max-width:690px;font-size:clamp(48px,4.4vw,66px);line-height:1.03;letter-spacing:-.04em}
.home36-hero h1 em{color:#50f0da}
.home36-hero-copy>p{max-width:610px;margin-top:18px;font-size:18px;line-height:1.5}
.home36-hero-actions{margin-top:25px;gap:14px}.home36-btn-hero-primary,.home36-btn-hero-outline{min-height:54px;border-radius:18px;padding:13px 25px;font-size:14px}
.home36-benefits{margin-top:25px;gap:22px}.home36-benefits span{font-size:11px}.home36-benefits b{width:22px;height:22px}
.home36-hero-media{min-height:395px}.home36-hero-media img{max-width:675px;border-radius:0;filter:drop-shadow(0 25px 45px rgba(3,48,111,.2))}
.home36-stats{bottom:-44px;border-radius:18px;box-shadow:0 18px 42px rgba(13,74,149,.15)}
.home36-stats article{min-height:88px;gap:15px;padding:16px 22px}.home36-stat-icon{width:48px;height:48px;flex-basis:48px;border-radius:14px;font-size:23px}
.home36-stats strong{font-size:28px}.home36-stats small{font-size:10px}

.home36-section{padding:58px 0}
.home36-heading{margin-bottom:28px}.home36-heading>span{font-size:10px;letter-spacing:.18em}.home36-heading>span:before,.home36-heading>span:after{width:35px}
.home36-heading h2{margin:8px 0 7px;font-size:32px;line-height:1.12}.home36-heading p{max-width:760px;font-size:13px;line-height:1.55}
.home36-why{padding-top:108px;padding-bottom:58px;background:linear-gradient(180deg,#eff7ff 0%,#fff 100%)}
.home36-why-grid{gap:14px}.home36-why-grid article{min-height:190px;padding:26px 24px;border-radius:18px;box-shadow:0 12px 28px rgba(42,92,154,.08)}
.home36-why-icon{font-size:34px}.home36-why-grid h3{margin:15px 0 9px;font-size:18px}.home36-why-grid p{font-size:12.5px;line-height:1.52}

.home36-features{padding-top:48px;padding-bottom:60px;background:#fff}
.home36-feature-grid{gap:12px}.home36-feature-grid article{min-height:238px;padding:19px 15px 17px;border-radius:16px;border:1px solid #dce8f5;box-shadow:0 12px 28px rgba(30,82,146,.07)}
.home36-feature-icon{width:56px;height:56px;margin-bottom:13px;border-radius:16px;font-size:29px}.home36-feature-grid h3{font-size:16px}.home36-feature-grid p{margin:9px 0 13px;font-size:12px;line-height:1.52}.home36-feature-grid a{font-size:11px;font-weight:900}

.home36-roles{padding-top:48px;padding-bottom:42px;background:linear-gradient(180deg,#f3f9ff,#edf6ff)}
.home36-role-grid{gap:14px}.home36-role-grid article{min-height:318px;padding:0 16px 16px;border-radius:16px;background:#fff;box-shadow:0 10px 26px rgba(31,79,139,.07)}
.home36-role-visual{height:118px;margin:0 -16px 15px;font-size:65px;border-radius:16px 16px 0 0}
.home36-role-grid h3{font-size:17px;margin-bottom:10px}.home36-role-grid li{margin:6px 0;font-size:11.5px}.home36-role-grid a{min-height:40px;margin-top:auto;border-radius:10px;font-size:10.5px}

.home38-anchor{display:block;position:relative;top:-76px;height:0;visibility:hidden}
.home36-footer{padding-top:30px;background:#082b52}
.home36-footer-grid{grid-template-columns:1.35fr .72fr .72fr 1fr;gap:40px;padding-bottom:26px}
.home36-footer .home36-brand-copy strong{font-size:15px}.home36-footer .home36-brand-copy small{font-size:9px}.home36-footer-brand>p{max-width:310px;margin-top:14px;font-size:10px;line-height:1.6}
.home36-footer-grid>div>h3{font-size:11px;margin-bottom:10px}.home36-footer-grid>div>a,.home36-footer-grid>div>p{font-size:9.5px;margin:7px 0}.home36-footer-bottom{padding:14px 0 17px;font-size:8.5px}

@media (min-width:1400px){
 .home36-container{width:min(1320px,calc(100% - 72px))}
 .home36-hero-grid{min-height:520px}.home36-hero h1{font-size:68px}.home36-heading h2{font-size:34px}
}
@media (max-width:1120px){
 .home36-container{width:min(100% - 36px,980px)}.home36-hero-grid{grid-template-columns:1fr 1fr}.home36-hero h1{font-size:48px}.home36-feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.home36-role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
 .home36-container{width:min(100% - 28px,680px)}.home36-nav{min-height:70px}.home36-hero{padding-bottom:105px}.home36-hero-grid{grid-template-columns:1fr;min-height:auto;padding-top:38px}.home36-hero h1{font-size:43px}.home36-hero-copy>p{font-size:15px}.home36-hero-media{min-height:auto}.home36-stats{bottom:-82px;grid-template-columns:repeat(2,1fr)}.home36-why{padding-top:125px}.home36-heading h2{font-size:29px}.home36-why-grid{grid-template-columns:repeat(2,1fr)}.home36-feature-grid{grid-template-columns:repeat(2,1fr)}.home36-role-grid{grid-template-columns:repeat(2,1fr)}.home36-footer-grid{grid-template-columns:1fr 1fr}.home36-footer-brand{grid-column:1/-1}
}
@media (max-width:560px){
 .home36-container{width:min(100% - 22px,520px)}.home36-brand-copy em{display:none}.home36-actions .home36-btn-soft{display:none}.home36-hero{padding-bottom:128px}.home36-hero h1{font-size:35px}.home36-hero-copy>p{font-size:14px}.home36-stats{bottom:-126px}.home36-why{padding-top:165px}.home36-heading h2{font-size:25px}.home36-why-grid,.home36-feature-grid,.home36-role-grid{grid-template-columns:1fr}.home36-role-grid article{min-height:auto}.home36-footer-grid{grid-template-columns:1fr}.home36-footer-brand{grid-column:auto}
}

/* =========================================================
   v1.4.39 — Administrator Modern Glass UI
   Dashboard + shell admin modern, tetap sidebar kiri.
   ========================================================= */
.role-admin {
    --admin-navy: #0b2d52;
    --admin-blue: #1769d2;
    --admin-cyan: #19a8e5;
    --admin-surface: rgba(255,255,255,.88);
    --admin-line: rgba(194,211,229,.72);
    --admin-shadow: 0 18px 46px rgba(23,58,96,.10);
    background:
        radial-gradient(circle at 78% 5%, rgba(69,149,240,.13), transparent 30%),
        radial-gradient(circle at 34% 42%, rgba(78,200,222,.07), transparent 28%),
        #f3f7fc;
}
.role-admin .admin-sidebar {
    width: 278px;
    background:
        radial-gradient(circle at 20% 0%, rgba(67,143,222,.22), transparent 28%),
        linear-gradient(180deg, #092541 0%, #0c335b 58%, #0a2948 100%);
    border-right: 1px solid rgba(255,255,255,.07);
    box-shadow: 16px 0 48px rgba(8,31,55,.14);
}
.role-admin .admin-sidebar .brand {
    min-height: 96px;
    padding: 19px 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.01));
}
.role-admin .admin-sidebar .brand img,
.role-admin .admin-sidebar .brand-mark {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    box-shadow: 0 10px 28px rgba(0,0,0,.16);
}
.role-admin .admin-sidebar .brand strong { font-size: 15px; letter-spacing: -.01em; }
.role-admin .admin-sidebar .brand small { margin-top: 3px; font-size: 10px; color: rgba(255,255,255,.7); }
.role-admin .admin-sidebar .sidebar-nav { padding: 14px 14px 30px; }
.role-admin .admin-sidebar .nav-label {
    padding: 18px 12px 7px;
    color: rgba(207,230,250,.48);
    font-size: 9px;
    letter-spacing: .17em;
}
.role-admin .admin-sidebar .sidebar-link {
    min-height: 44px;
    margin: 4px 0;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 13px;
    color: rgba(235,245,255,.78);
    font-size: 12px;
}
.role-admin .admin-sidebar .sidebar-link:hover {
    transform: translateX(2px);
    color: #fff;
    border-color: rgba(255,255,255,.08);
    background: rgba(255,255,255,.075);
}
.role-admin .admin-sidebar .sidebar-link.active {
    color: #fff;
    border-color: rgba(255,255,255,.14);
    background: linear-gradient(135deg, rgba(77,154,231,.42), rgba(255,255,255,.12));
    box-shadow: inset 3px 0 0 #ffc857, 0 10px 28px rgba(0,0,0,.12);
}
.role-admin .admin-sidebar .nav-icon {
    width: 23px;
    color: #d4efff;
    font-size: 16px;
}
.role-admin .admin-sidebar .sidebar-footer {
    padding: 16px 22px 20px;
    background: rgba(0,0,0,.05);
    color: rgba(223,240,255,.52);
}
.role-admin .admin-main-area-left {
    width: calc(100% - 278px);
    margin-left: 278px;
    background: transparent;
}
.role-admin .admin-topbar-left {
    height: 84px;
    padding: 0 32px;
    background: rgba(250,252,255,.78);
    border-bottom: 1px solid rgba(199,214,229,.72);
    box-shadow: 0 8px 28px rgba(18,55,89,.045);
    backdrop-filter: blur(18px) saturate(135%);
}
.role-admin .admin-topbar-left .topbar-title small {
    color: #6a7d94;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}
.role-admin .admin-topbar-left .topbar-title h1 {
    margin-top: 3px;
    color: #162b43;
    font-size: 20px;
    letter-spacing: -.02em;
}
.role-admin .admin-topbar-left .avatar {
    width: 42px;
    height: 42px;
    border: 1px solid #cfe0f1;
    background: linear-gradient(145deg, #eef7ff, #dfeefe);
    box-shadow: 0 8px 24px rgba(24,86,145,.08);
}
.role-admin .admin-content-left {
    max-width: 1700px;
    padding: 28px 32px 54px;
}
.role-admin .card,
.role-admin .stat-card,
.role-admin .table-wrap,
.role-admin .input,
.role-admin .select,
.role-admin .textarea {
    border-color: var(--admin-line);
}
.role-admin .card,
.role-admin .stat-card {
    border-radius: 20px;
    box-shadow: var(--admin-shadow);
}
.role-admin .card {
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(14px);
}
.role-admin .card-header { padding: 20px 22px; }
.role-admin .card-body { padding: 22px; }
.role-admin .table-wrap { border-radius: 16px; overflow: hidden; }
.role-admin table { background: rgba(255,255,255,.94); }
.role-admin th { background: #f3f7fb; }
.role-admin .button { border-radius: 11px; }
.role-admin .button-primary {
    background: linear-gradient(135deg, #103f70, #176ec1);
    border-color: transparent;
    box-shadow: 0 8px 22px rgba(23,110,193,.15);
}
.role-admin .button-primary:hover { background: linear-gradient(135deg, #0a3158, #125fa9); }

.admin-dashboard-modern { display: grid; gap: 22px; }
.admin-welcome-panel {
    position: relative;
    overflow: hidden;
    min-height: 248px;
    display: grid;
    grid-template-columns: minmax(0,1.55fr) minmax(300px,.75fr);
    align-items: center;
    gap: 34px;
    padding: 34px 38px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 28px;
    background:
        radial-gradient(circle at 86% 16%, rgba(77,204,242,.34), transparent 24%),
        radial-gradient(circle at 58% 120%, rgba(43,117,215,.4), transparent 42%),
        linear-gradient(125deg, #0b2e57 0%, #12569a 52%, #1399d4 100%);
    box-shadow: 0 26px 70px rgba(12,64,112,.22);
}
.admin-welcome-panel::before,
.admin-welcome-panel::after {
    content: '';
    position: absolute;
    pointer-events: none;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 50%;
}
.admin-welcome-panel::before { width: 380px; height: 380px; right: -120px; top: -210px; }
.admin-welcome-panel::after { width: 250px; height: 250px; right: 120px; bottom: -195px; }
.admin-welcome-copy,
.admin-welcome-insight { position: relative; z-index: 2; }
.admin-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.09);
    color: rgba(255,255,255,.82);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .13em;
}
.admin-welcome-copy h2 {
    max-width: 720px;
    margin: 16px 0 8px;
    color: #fff;
    font-size: clamp(29px, 3vw, 44px);
    line-height: 1.08;
    letter-spacing: -.04em;
}
.admin-welcome-copy p {
    max-width: 720px;
    margin: 0;
    color: rgba(238,248,255,.76);
    font-size: 13px;
    line-height: 1.7;
}
.admin-welcome-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.admin-button-light {
    color: #123c66;
    background: #fff;
    border-color: rgba(255,255,255,.8);
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
}
.admin-button-light:hover { color: #0c3154; background: #f8fbff; }
.admin-button-glass {
    color: #fff;
    background: rgba(255,255,255,.09);
    border-color: rgba(255,255,255,.28);
}
.admin-button-glass:hover { color: #fff; background: rgba(255,255,255,.15); }
.admin-welcome-insight {
    min-height: 170px;
    display: grid;
    grid-template-columns: 150px minmax(0,1fr);
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 22px;
    background: rgba(4,36,68,.24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(12px);
}
.admin-insight-orb {
    width: 132px;
    height: 132px;
    display: grid;
    align-content: center;
    justify-items: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.14), rgba(255,255,255,.04));
}
.admin-insight-orb span { color: #aeeaff; font-size: 20px; }
.admin-insight-orb strong { margin-top: 2px; color: #fff; font-size: 31px; line-height: 1; }
.admin-insight-orb small { margin-top: 6px; color: rgba(255,255,255,.66); font-size: 9px; }
.admin-insight-mini { display: grid; gap: 9px; }
.admin-insight-mini span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 11px;
    border-radius: 12px;
    background: rgba(255,255,255,.085);
    color: rgba(255,255,255,.72);
    font-size: 10px;
}
.admin-insight-mini b { color: #fff; font-size: 14px; }

.admin-metric-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 16px;
}
.admin-metric-card {
    position: relative;
    overflow: hidden;
    min-height: 132px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border: 1px solid rgba(203,216,231,.75);
    border-radius: 20px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 14px 38px rgba(26,62,98,.08);
    backdrop-filter: blur(12px);
}
.admin-metric-card::after {
    content: '';
    position: absolute;
    width: 110px;
    height: 110px;
    right: -42px;
    top: -52px;
    border-radius: 50%;
    background: var(--metric-soft,#eaf3ff);
}
.admin-metric-card.tone-blue { --metric:#1769d2; --metric-soft:#e8f1ff; }
.admin-metric-card.tone-amber { --metric:#d88914; --metric-soft:#fff3dd; }
.admin-metric-card.tone-violet { --metric:#7548df; --metric-soft:#f0eaff; }
.admin-metric-card.tone-green { --metric:#0b9b6c; --metric-soft:#e5f8f0; }
.admin-metric-icon {
    position: relative;
    z-index: 1;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    flex: 0 0 50px;
    border-radius: 15px;
    color: var(--metric);
    background: var(--metric-soft);
    font-size: 21px;
    font-weight: 900;
}
.admin-metric-copy { position: relative; z-index: 1; min-width: 0; }
.admin-metric-copy span { display: block; color: #65768a; font-size: 10px; font-weight: 800; }
.admin-metric-copy strong { display: block; margin-top: 3px; color: #172b43; font-size: 30px; line-height: 1; letter-spacing: -.035em; }
.admin-metric-copy small { display: block; margin-top: 8px; color: #8794a3; font-size: 9px; line-height: 1.4; }

.admin-quick-section,
.admin-glass-card {
    border: 1px solid rgba(204,217,231,.78);
    border-radius: 22px;
    background: rgba(255,255,255,.82);
    box-shadow: var(--admin-shadow);
    backdrop-filter: blur(14px);
}
.admin-quick-section { padding: 22px; }
.admin-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}
.admin-section-heading span,
.admin-panel-head span {
    display: block;
    color: #2a78bd;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .11em;
}
.admin-section-heading h3,
.admin-panel-head h3 { margin: 3px 0 0; color: #172b43; font-size: 18px; letter-spacing: -.02em; }
.admin-section-heading > small { color: #7d8c9d; font-size: 10px; }
.admin-quick-grid {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 11px;
}
.admin-quick-grid a {
    min-width: 0;
    min-height: 112px;
    display: grid;
    align-content: center;
    gap: 4px;
    padding: 15px;
    color: #18344f;
    border: 1px solid #dce7f1;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,250,254,.96));
    transition: .18s ease;
}
.admin-quick-grid a:hover {
    transform: translateY(-3px);
    border-color: #b9d7f1;
    box-shadow: 0 12px 28px rgba(26,77,126,.1);
}
.admin-quick-grid i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    margin-bottom: 5px;
    border-radius: 11px;
    background: #eaf4ff;
    color: #176ec1;
    font-style: normal;
    font-size: 17px;
    font-weight: 900;
}
.admin-quick-grid strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.admin-quick-grid small { color: #8190a0; font-size: 9px; }

.admin-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0,1.7fr) minmax(320px,.9fr);
    gap: 18px;
}
.admin-glass-card { overflow: hidden; }
.admin-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 19px 20px;
    border-bottom: 1px solid rgba(207,220,233,.78);
}
.admin-panel-body { padding: 8px 18px 16px; }
.admin-user-list,
.admin-course-list { display: grid; }
.admin-user-row {
    min-width: 0;
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 13px 2px;
    border-bottom: 1px solid #edf2f7;
}
.admin-user-row:last-child,
.admin-course-row:last-child { border-bottom: 0; }
.admin-user-avatar {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid #d7e4ef;
    border-radius: 13px;
    background: linear-gradient(145deg, #eaf5ff, #f7fbff);
    color: #155e9d;
    font-size: 13px;
    font-weight: 900;
}
.admin-user-main { min-width: 0; }
.admin-user-main strong,
.admin-user-main small { display: block; }
.admin-user-main strong { overflow: hidden; color: #1d3249; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-main small { margin-top: 3px; overflow: hidden; color: #7d8b9b; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-meta { display: grid; justify-items: end; gap: 4px; }
.admin-user-meta small { color: #8b98a8; font-size: 8px; }
.admin-course-row {
    min-width: 0;
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 14px 2px;
    color: inherit;
    border-bottom: 1px solid #edf2f7;
}
.admin-course-row:hover { background: rgba(239,246,252,.65); }
.admin-course-mark {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #e9f4ff;
    color: #1769b5;
    font-size: 15px;
}
.admin-course-row strong,
.admin-course-row small { display: block; }
.admin-course-row strong {
    display: -webkit-box;
    overflow: hidden;
    color: #1964a7;
    font-size: 10px;
    line-height: 1.45;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.admin-course-row small { margin-top: 3px; color: #7b8999; font-size: 8px; }

@media (max-width: 1280px) {
    .admin-welcome-panel { grid-template-columns: minmax(0,1.35fr) minmax(300px,.9fr); }
    .admin-metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .admin-quick-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 1050px) {
    .admin-welcome-panel { grid-template-columns: 1fr; }
    .admin-welcome-insight { max-width: 540px; }
    .admin-dashboard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .role-admin .admin-main-area-left { width: 100%; margin-left: 0; }
    .role-admin .admin-content-left { padding: 22px 18px 44px; }
    .role-admin .admin-topbar-left { height: 76px; padding: 0 18px; }
    .role-admin .admin-sidebar { width: 278px; }
}
@media (max-width: 680px) {
    .admin-dashboard-modern { gap: 16px; }
    .admin-welcome-panel { min-height: 0; padding: 26px 22px; border-radius: 22px; }
    .admin-welcome-copy h2 { font-size: 30px; }
    .admin-welcome-insight { grid-template-columns: 1fr; }
    .admin-insight-orb { width: 112px; height: 112px; }
    .admin-insight-mini { grid-template-columns: 1fr 1fr 1fr; }
    .admin-insight-mini span { display: grid; justify-items: center; text-align: center; }
    .admin-metric-grid { grid-template-columns: 1fr; }
    .admin-quick-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .admin-section-heading { align-items: flex-start; flex-direction: column; }
    .admin-user-row { grid-template-columns: 40px minmax(0,1fr); }
    .admin-user-meta { grid-column: 2; justify-items: start; grid-auto-flow: column; align-items: center; }
}
@media (max-width: 440px) {
    .admin-quick-grid { grid-template-columns: 1fr; }
    .admin-insight-mini { grid-template-columns: 1fr; }
    .admin-welcome-actions .button { width: 100%; }
}

/* =========================================================
   v1.4.40 — MAHASISWA MODERN GLASS UI
   ========================================================= */
.role-student {
    background:
        radial-gradient(circle at 92% 4%, rgba(72,175,255,.16), transparent 24%),
        radial-gradient(circle at 12% 92%, rgba(117,72,223,.08), transparent 25%),
        #f3f7fc;
}
.role-student .sidebar {
    background:
        radial-gradient(circle at 20% 8%, rgba(67,153,222,.22), transparent 26%),
        linear-gradient(180deg, #082a48 0%, #0d3d67 48%, #123f69 100%);
    box-shadow: 10px 0 34px rgba(7,35,61,.14);
}
.role-student .brand { min-height: 92px; }
.role-student .sidebar-link {
    min-height: 46px;
    border: 1px solid transparent;
    border-radius: 13px;
}
.role-student .sidebar-link.active {
    background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.10));
    border-color: rgba(255,255,255,.08);
    box-shadow: inset 3px 0 0 #f5c450, 0 8px 20px rgba(0,0,0,.08);
}
.role-student .topbar {
    height: 88px;
    background: rgba(255,255,255,.82);
    border-bottom-color: rgba(204,218,233,.72);
    box-shadow: 0 8px 28px rgba(31,73,111,.05);
    backdrop-filter: blur(18px);
}
.role-student .content-area {
    max-width: 1640px;
    padding: 26px 30px 54px;
}
.role-student .topbar-title h1 { color: #172c43; font-weight: 850; letter-spacing: -.025em; }
.role-student .topbar-title small { color: #2e6d9f; font-weight: 850; }
.role-student .avatar {
    background: linear-gradient(145deg,#dff1ff,#eef7ff);
    border-color: #cfe2f3;
    color: #175b91;
    box-shadow: 0 8px 20px rgba(27,96,151,.08);
}

.student-dashboard-modern {
    --student-blue:#146dcc;
    --student-blue-2:#1d95dc;
    --student-navy:#103a61;
    --student-ink:#172b43;
    --student-muted:#718195;
    --student-line:rgba(201,216,231,.82);
    --student-shadow:0 18px 46px rgba(32,72,110,.09);
    display:grid;
    gap:18px;
}
.student-welcome-panel {
    position:relative;
    overflow:hidden;
    min-height:228px;
    display:grid;
    grid-template-columns:minmax(0,1.5fr) minmax(330px,.75fr);
    gap:26px;
    align-items:center;
    padding:30px 32px;
    border:1px solid rgba(255,255,255,.42);
    border-radius:26px;
    background:
        radial-gradient(circle at 92% 22%, rgba(138,224,255,.34), transparent 24%),
        radial-gradient(circle at 70% 90%, rgba(111,99,255,.18), transparent 28%),
        linear-gradient(135deg,#0e4f8d 0%,#116db9 46%,#1ca6dc 100%);
    box-shadow:0 24px 55px rgba(16,79,141,.2);
}
.student-welcome-panel::before,
.student-welcome-panel::after {
    content:'';
    position:absolute;
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
    pointer-events:none;
}
.student-welcome-panel::before { width:360px;height:360px;right:-110px;top:-190px; }
.student-welcome-panel::after { width:240px;height:240px;right:220px;bottom:-190px; }
.student-welcome-copy,
.student-progress-panel { position:relative;z-index:1; }
.student-eyebrow {
    display:inline-flex;
    align-items:center;
    min-height:29px;
    padding:6px 11px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    background:rgba(255,255,255,.08);
    color:#d9f3ff;
    font-size:9px;
    font-weight:900;
    letter-spacing:.12em;
}
.student-welcome-copy h2 {
    max-width:760px;
    margin:16px 0 8px;
    color:#fff;
    font-size:clamp(30px,3vw,45px);
    line-height:1.08;
    letter-spacing:-.045em;
}
.student-welcome-copy h2 span { font-size:.8em; }
.student-welcome-copy p {
    max-width:760px;
    margin:0;
    color:rgba(240,249,255,.79);
    font-size:13px;
    line-height:1.72;
}
.student-welcome-actions { display:flex;flex-wrap:wrap;gap:10px;margin-top:23px; }
.student-button-light {
    color:#124a78;
    background:#fff;
    border-color:rgba(255,255,255,.88);
    box-shadow:0 12px 28px rgba(4,44,80,.16);
}
.student-button-light:hover { color:#0a385e;background:#f8fcff; }
.student-button-glass {
    color:#fff;
    background:rgba(255,255,255,.09);
    border-color:rgba(255,255,255,.28);
}
.student-button-glass:hover { color:#fff;background:rgba(255,255,255,.15); }
.student-progress-panel {
    min-height:166px;
    display:grid;
    grid-template-columns:140px minmax(0,1fr);
    gap:18px;
    align-items:center;
    padding:18px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:22px;
    background:rgba(3,44,79,.22);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter:blur(14px);
}
.student-progress-ring {
    width:126px;
    height:126px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:conic-gradient(#9cecff var(--student-progress), rgba(255,255,255,.14) 0);
    position:relative;
}
.student-progress-ring::before {
    content:'';
    position:absolute;
    width:96px;
    height:96px;
    border-radius:50%;
    background:linear-gradient(145deg,rgba(15,78,128,.96),rgba(17,105,174,.94));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.student-progress-ring > div { position:relative;z-index:1;text-align:center; }
.student-progress-ring strong { display:block;color:#fff;font-size:27px;line-height:1;font-weight:900; }
.student-progress-ring small { display:block;margin-top:6px;color:rgba(255,255,255,.68);font-size:9px;font-weight:700; }
.student-progress-notes { display:grid;gap:9px; }
.student-progress-notes span {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:9px;
    padding:10px 11px;
    border-radius:12px;
    background:rgba(255,255,255,.085);
}
.student-progress-notes b { color:#fff;font-size:16px; }
.student-progress-notes small { color:rgba(255,255,255,.7);font-size:9px;text-align:right; }

.student-metric-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:15px;
}
.student-metric-card {
    --metric:#176dcc;
    --metric-soft:#e8f2ff;
    position:relative;
    overflow:hidden;
    min-height:126px;
    display:flex;
    align-items:center;
    gap:15px;
    padding:19px;
    border:1px solid var(--student-line);
    border-radius:20px;
    background:rgba(255,255,255,.87);
    box-shadow:var(--student-shadow);
    backdrop-filter:blur(12px);
}
.student-metric-card::after {
    content:'';
    position:absolute;
    width:110px;height:110px;
    right:-45px;top:-55px;
    border-radius:50%;
    background:var(--metric-soft);
}
.student-metric-card.tone-blue { --metric:#176dcc;--metric-soft:#e6f1ff; }
.student-metric-card.tone-amber { --metric:#c97a0b;--metric-soft:#fff1d8; }
.student-metric-card.tone-green { --metric:#099a68;--metric-soft:#e3f8ef; }
.student-metric-card.tone-violet { --metric:#7246db;--metric-soft:#f0e9ff; }
.student-metric-icon {
    position:relative;z-index:1;
    width:50px;height:50px;
    flex:0 0 50px;
    display:grid;place-items:center;
    border-radius:15px;
    color:var(--metric);
    background:var(--metric-soft);
    font-size:21px;font-weight:900;
}
.student-metric-card > div:last-child { position:relative;z-index:1;min-width:0; }
.student-metric-card span { display:block;color:#64758a;font-size:10px;font-weight:800; }
.student-metric-card strong { display:block;margin-top:3px;color:var(--student-ink);font-size:30px;line-height:1;font-weight:900;letter-spacing:-.035em; }
.student-metric-card small { display:block;margin-top:8px;color:#8592a1;font-size:9px;line-height:1.45; }

.student-quick-section,
.student-glass-card {
    border:1px solid var(--student-line);
    border-radius:22px;
    background:rgba(255,255,255,.84);
    box-shadow:var(--student-shadow);
    backdrop-filter:blur(14px);
}
.student-quick-section { padding:22px; }
.student-section-heading,
.student-panel-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}
.student-section-heading { align-items:end;margin-bottom:16px; }
.student-section-heading span,
.student-panel-head span {
    display:block;
    color:#2576ba;
    font-size:9px;
    font-weight:900;
    letter-spacing:.12em;
}
.student-section-heading h3,
.student-panel-head h3 { margin:3px 0 0;color:var(--student-ink);font-size:18px;letter-spacing:-.025em; }
.student-section-heading > small { color:#7d8c9c;font-size:10px; }
.student-quick-grid {
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:11px;
}
.student-quick-grid a {
    min-height:108px;
    display:grid;
    align-content:center;
    gap:4px;
    padding:15px;
    color:#173852;
    border:1px solid #dce7f1;
    border-radius:16px;
    background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(245,250,255,.96));
    transition:.18s ease;
}
.student-quick-grid a:hover {
    transform:translateY(-3px);
    border-color:#b9d9f1;
    box-shadow:0 12px 28px rgba(24,85,134,.11);
}
.student-quick-grid i {
    width:35px;height:35px;
    display:grid;place-items:center;
    margin-bottom:5px;
    border-radius:11px;
    background:#eaf5ff;
    color:#1872bd;
    font-style:normal;
    font-size:17px;
    font-weight:900;
}
.student-quick-grid strong { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px; }
.student-quick-grid small { color:#8190a0;font-size:9px; }

.student-dashboard-grid {
    display:grid;
    grid-template-columns:minmax(0,1.65fr) minmax(340px,.85fr);
    gap:18px;
    align-items:start;
}
.student-glass-card { overflow:hidden; }
.student-panel-head {
    min-height:72px;
    padding:18px 20px;
    border-bottom:1px solid rgba(207,220,233,.78);
}
.student-panel-body { padding:16px 18px 18px; }
.student-side-stack { display:grid;gap:18px; }

.student-course-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}
.student-course-card {
    min-width:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    min-height:226px;
    border:1px solid #dce7f1;
    border-radius:18px;
    background:#fff;
    box-shadow:0 12px 26px rgba(23,67,105,.06);
}
.student-course-cover {
    min-height:62px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:14px 16px;
    color:#fff;
    background:linear-gradient(135deg,#0f4e86,#1882ca);
    position:relative;
    overflow:hidden;
}
.student-course-card:nth-child(3n+2) .student-course-cover { background:linear-gradient(135deg,#4454c5,#7756df); }
.student-course-card:nth-child(3n+3) .student-course-cover { background:linear-gradient(135deg,#087b76,#0ca68c); }
.student-course-cover::after {
    content:'';
    position:absolute;
    width:100px;height:100px;
    right:-30px;top:-54px;
    border-radius:50%;
    background:rgba(255,255,255,.12);
}
.student-course-cover span { position:relative;z-index:1;font-size:9px;font-weight:850;letter-spacing:.02em; }
.student-course-cover i { position:relative;z-index:1;font-style:normal;font-size:20px;opacity:.9; }
.student-course-body { flex:1;padding:15px 16px 11px; }
.student-course-body h4 {
    margin:0;
    display:-webkit-box;
    overflow:hidden;
    color:#17324d;
    font-size:14px;
    line-height:1.45;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}
.student-course-body p { margin:6px 0 0;color:#7e8b9b;font-size:9px; }
.student-course-meta { display:flex;flex-wrap:wrap;gap:7px;margin-top:12px; }
.student-course-meta span {
    padding:5px 8px;
    border-radius:999px;
    background:#eef6fd;
    color:#4f6f8d;
    font-size:8px;
    font-weight:800;
}
.student-course-foot { padding:0 16px 15px; }
.student-course-foot .button { width:100%; }

.student-task-list,
.student-announcement-list { display:grid; }
.student-task-row {
    display:grid;
    grid-template-columns:46px minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    padding:12px 0;
    color:inherit;
    border-bottom:1px solid #edf2f7;
}
.student-task-row:last-child,
.student-announcement-row:last-child { border-bottom:0; }
.student-task-date {
    width:44px;height:44px;
    display:grid;
    align-content:center;
    justify-items:center;
    border-radius:12px;
    background:#eaf5ff;
    color:#1768ab;
}
.student-task-date b { font-size:15px;line-height:1; }
.student-task-date small { margin-top:2px;font-size:8px;text-transform:uppercase; }
.student-task-copy { min-width:0; }
.student-task-copy strong,
.student-task-copy small { display:block; }
.student-task-copy strong { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#1b354e;font-size:10px; }
.student-task-copy small { margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8190a0;font-size:8px; }
.student-task-row .badge { font-size:8px;padding:4px 6px; }

.student-announcement-row {
    display:grid;
    grid-template-columns:36px minmax(0,1fr);
    align-items:start;
    gap:10px;
    padding:12px 0;
    color:inherit;
    border-bottom:1px solid #edf2f7;
}
.student-announcement-icon {
    width:34px;height:34px;
    display:grid;place-items:center;
    border-radius:10px;
    background:#eef6fd;
    color:#1f6dab;
    font-size:14px;
}
.student-announcement-row strong,
.student-announcement-row small { display:block; }
.student-announcement-row strong { color:#1a354f;font-size:10px;line-height:1.4; }
.student-announcement-row small {
    margin-top:4px;
    display:-webkit-box;
    overflow:hidden;
    color:#8391a0;
    font-size:8px;
    line-height:1.45;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}
.student-empty-state { padding:42px 20px;text-align:center;color:#76879a; }
.student-empty-state.compact { padding:28px 14px; }
.student-empty-icon {
    width:56px;height:56px;
    display:grid;place-items:center;
    margin:0 auto 12px;
    border-radius:17px;
    background:#edf6fd;
    color:#155e9e;
    font-size:24px;
}
.student-empty-state h3 { margin:0;color:#20364d;font-size:16px; }
.student-empty-state p { max-width:480px;margin:6px auto 15px;font-size:11px; }

@media (max-width:1280px) {
    .student-welcome-panel { grid-template-columns:minmax(0,1.2fr) minmax(310px,.8fr); }
    .student-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .student-quick-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:1060px) {
    .student-welcome-panel { grid-template-columns:1fr; }
    .student-progress-panel { max-width:560px; }
    .student-dashboard-grid { grid-template-columns:1fr; }
}
@media (max-width:900px) {
    .role-student .content-area { padding:22px 18px 44px; }
    .role-student .topbar { height:76px;padding:0 18px; }
}
@media (max-width:720px) {
    .student-dashboard-modern { gap:15px; }
    .student-welcome-panel { min-height:0;padding:25px 21px;border-radius:22px; }
    .student-welcome-copy h2 { font-size:30px; }
    .student-progress-panel { grid-template-columns:1fr;justify-items:center; }
    .student-progress-notes { width:100%;grid-template-columns:repeat(3,minmax(0,1fr)); }
    .student-progress-notes span { display:grid;justify-items:center;text-align:center; }
    .student-metric-grid { grid-template-columns:1fr; }
    .student-quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .student-section-heading { align-items:flex-start;flex-direction:column; }
    .student-course-grid { grid-template-columns:1fr; }
}
@media (max-width:480px) {
    .student-quick-grid { grid-template-columns:1fr; }
    .student-progress-notes { grid-template-columns:1fr; }
    .student-welcome-actions .button { width:100%; }
    .student-task-row { grid-template-columns:42px minmax(0,1fr); }
    .student-task-row .badge { grid-column:2;justify-self:start; }
}

/* ============================================================
   v1.4.41 — Unified Modern Top Navigation
   Admin, Kaprodi, Dosen, dan Mahasiswa menggunakan menu atas
   agar area kerja lebar penuh. Desktop = dropdown horizontal,
   mobile = panel menu responsif dari bagian atas.
   ============================================================ */
body.topnav-layout {
    --topnav-header-h: 74px;
    --topnav-menu-h: 58px;
    background:
        radial-gradient(circle at 8% 8%, rgba(30,111,185,.07), transparent 28%),
        radial-gradient(circle at 92% 12%, rgba(42,166,184,.06), transparent 25%),
        var(--canvas);
}
body.topnav-layout .app-shell-topnav { display: block; min-height: 100vh; }
body.topnav-layout .topnav-main-area { width: 100%; min-height: 100vh; margin-left: 0; }
body.topnav-layout .topnav-content-area {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 28px 32px 56px;
}

.app-top-header {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    box-shadow: 0 10px 30px rgba(10, 42, 72, .08);
}
.app-top-header-main {
    height: var(--topnav-header-h);
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid rgba(216,226,237,.9);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.app-top-header-inner {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(250px, auto) minmax(180px, 1fr) auto;
    align-items: center;
    gap: 24px;
    padding: 0 28px;
}
.app-top-brand {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--navy-2);
}
.app-top-brand:hover { color: var(--navy-2); }
.app-top-brand img,
.app-top-brand .brand-mark {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 12px;
    object-fit: contain;
    background: #fff;
    padding: 3px;
    box-shadow: 0 8px 22px rgba(16, 52, 86, .10);
}
.app-top-brand-text { min-width: 0; }
.app-top-brand-text strong,
.app-top-brand-text small { display: block; }
.app-top-brand-text strong {
    max-width: 290px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--navy-2);
    font-size: 15px;
    line-height: 1.2;
}
.app-top-brand-text small { margin-top: 3px; color: var(--muted); font-size: 10px; }

.app-page-context { min-width: 0; padding-left: 10px; }
.app-page-context small,
.app-page-context strong { display: block; }
.app-page-context small {
    color: #7a8aa0;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.app-page-context strong {
    margin-top: 2px;
    overflow: hidden;
    color: var(--ink);
    font-size: 18px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-user-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.app-user-meta { max-width: 250px; }
.app-user-meta strong,
.app-user-meta small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-menu-toggle { display: none; color: var(--navy); background: #f4f8fc; }

.app-role-nav {
    height: var(--topnav-menu-h);
    background: linear-gradient(135deg, #0b2b4a 0%, #123f6b 52%, #155586 100%);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.app-role-nav-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
    gap: 3px;
    padding: 0 24px;
}
.app-nav-link,
.app-nav-dropdown-toggle {
    position: relative;
    min-height: var(--topnav-menu-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border: 0;
    border-radius: 0;
    color: rgba(255,255,255,.82);
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease;
}
.app-nav-link:hover,
.app-nav-dropdown-toggle:hover,
.app-nav-dropdown:hover > .app-nav-dropdown-toggle,
.app-nav-dropdown.open > .app-nav-dropdown-toggle {
    color: #fff;
    background: rgba(255,255,255,.09);
}
.app-nav-link.active,
.app-nav-dropdown.active > .app-nav-dropdown-toggle {
    color: #fff;
    background: rgba(255,255,255,.10);
}
.app-nav-link.active::after,
.app-nav-dropdown.active > .app-nav-dropdown-toggle::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--gold);
}
.app-nav-icon { min-width: 20px; color: #d4efff; font-size: 17px; line-height: 1; text-align: center; }
.app-nav-chevron { margin-left: 2px; color: rgba(255,255,255,.55); font-size: 14px; transition: transform .18s ease; }
.app-nav-dropdown { position: relative; }
.app-nav-dropdown.open .app-nav-chevron { transform: rotate(180deg); }
.app-nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 140;
    width: 330px;
    display: none;
    gap: 4px;
    padding: 9px;
    border: 1px solid rgba(213,225,237,.95);
    border-radius: 16px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 22px 58px rgba(9, 35, 62, .22);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.app-nav-dropdown:hover > .app-nav-dropdown-menu,
.app-nav-dropdown:focus-within > .app-nav-dropdown-menu,
.app-nav-dropdown.open > .app-nav-dropdown-menu { display: grid; }
.app-nav-dropdown-link {
    min-width: 0;
    display: grid;
    grid-template-columns: 42px minmax(0,1fr);
    align-items: center;
    gap: 10px;
    padding: 10px;
    color: var(--ink);
    border-radius: 11px;
    transition: .16s ease;
}
.app-nav-dropdown-link:hover { color: var(--navy); background: #f0f6fc; transform: translateX(2px); }
.app-nav-dropdown-link.active {
    color: var(--navy);
    background: #e8f2fb;
    box-shadow: inset 3px 0 0 var(--gold);
}
.app-nav-dropdown-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid #dbe8f4;
    border-radius: 11px;
    background: #f5f9fd;
    color: var(--navy);
    font-size: 18px;
}
.app-nav-dropdown-link strong,
.app-nav-dropdown-link small { display: block; }
.app-nav-dropdown-link strong { font-size: 13px; line-height: 1.3; }
.app-nav-dropdown-link small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.app-nav-version {
    margin-left: auto;
    align-self: center;
    flex: 0 0 auto;
    padding: 5px 10px;
    color: rgba(255,255,255,.55);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .04em;
}
.app-menu-backdrop { display: none; }

/* Semua role memakai area kerja selebar layar; hilangkan offset sidebar lama. */
body.topnav-layout .sidebar { display: none !important; }
body.topnav-layout .main-area,
body.topnav-layout .admin-main-area-left { width: 100% !important; margin-left: 0 !important; }
body.topnav-layout .content-area,
body.topnav-layout .admin-content-left { max-width: none; margin-left: 0; margin-right: 0; }
body.topnav-layout .topbar,
body.topnav-layout .admin-topbar-left { display: none !important; }

@media (max-width: 1180px) {
    .app-top-header-inner { grid-template-columns: minmax(220px, auto) 1fr auto; gap: 14px; padding-inline: 20px; }
    .app-page-context { display: none; }
    .app-role-nav-inner { overflow-x: auto; overflow-y: visible; padding-inline: 18px; scrollbar-width: thin; }
    .app-nav-link, .app-nav-dropdown-toggle { flex: 0 0 auto; padding-inline: 13px; }
    .app-nav-version { flex: 0 0 auto; }
}

@media (max-width: 820px) {
    body.topnav-layout { --topnav-header-h: 66px; --topnav-menu-h: 0px; }
    .app-top-header-main { height: 66px; }
    .app-top-header-inner { display: flex; justify-content: space-between; gap: 10px; padding: 0 14px; }
    .app-top-brand { flex: 1 1 auto; min-width: 0; }
    .app-top-brand img, .app-top-brand .brand-mark { width: 40px; height: 40px; flex-basis: 40px; }
    .app-top-brand-text strong { max-width: 175px; font-size: 13px; }
    .app-top-brand-text small { font-size: 9px; }
    .app-user-actions { flex: 0 0 auto; gap: 7px; }
    .app-user-actions .avatar, .app-user-meta { display: none; }
    .app-menu-toggle { display: grid; order: -1; }
    .app-user-actions .button { min-height: 36px; padding-inline: 10px; font-size: 11px; }

    .app-role-nav {
        position: fixed;
        top: 66px;
        left: 10px;
        right: 10px;
        z-index: 130;
        height: auto;
        max-height: calc(100vh - 78px);
        display: none;
        overflow-y: auto;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 0 0 18px 18px;
        box-shadow: 0 24px 54px rgba(6, 27, 48, .28);
    }
    body.app-menu-open .app-role-nav { display: block; }
    .app-role-nav-inner {
        height: auto;
        min-height: 0;
        display: grid;
        gap: 4px;
        overflow: visible;
        padding: 10px 10px 16px;
    }
    .app-nav-link,
    .app-nav-dropdown-toggle {
        width: 100%;
        min-height: 46px;
        justify-content: flex-start;
        padding: 9px 12px;
        border-radius: 10px;
        font-size: 13px;
    }
    .app-nav-link.active::after,
    .app-nav-dropdown.active > .app-nav-dropdown-toggle::after {
        top: 9px;
        bottom: 9px;
        left: 0;
        right: auto;
        width: 3px;
        height: auto;
        border-radius: 0 3px 3px 0;
    }
    .app-nav-dropdown-toggle .app-nav-chevron { margin-left: auto; }
    .app-nav-dropdown-menu {
        position: static;
        width: auto;
        margin: 3px 4px 7px 28px;
        padding: 5px;
        border-color: rgba(255,255,255,.10);
        background: rgba(255,255,255,.07);
        box-shadow: none;
        backdrop-filter: none;
    }
    .app-nav-dropdown:hover > .app-nav-dropdown-menu,
    .app-nav-dropdown:focus-within > .app-nav-dropdown-menu { display: none; }
    .app-nav-dropdown.open > .app-nav-dropdown-menu { display: grid; }
    .app-nav-dropdown-link { color: rgba(255,255,255,.88); grid-template-columns: 34px 1fr; padding: 8px; }
    .app-nav-dropdown-link:hover,
    .app-nav-dropdown-link.active { color: #fff; background: rgba(255,255,255,.10); transform: none; }
    .app-nav-dropdown-link.active { box-shadow: inset 3px 0 0 var(--gold); }
    .app-nav-dropdown-icon { width: 34px; height: 34px; border-color: rgba(255,255,255,.10); background: rgba(255,255,255,.07); color: #d9efff; font-size: 15px; }
    .app-nav-dropdown-link strong { font-size: 11px; }
    .app-nav-dropdown-link small { color: rgba(255,255,255,.58); font-size: 9px; }
    .app-nav-version { margin: 8px 8px 0; justify-self: start; }
    .app-menu-backdrop {
        display: none;
        position: fixed;
        inset: 66px 0 0;
        z-index: 120;
        background: rgba(10, 27, 44, .48);
        backdrop-filter: blur(2px);
    }
    body.app-menu-open .app-menu-backdrop { display: block; }
    body.topnav-layout .topnav-content-area { padding: 20px 14px 42px; }
}

@media (max-width: 480px) {
    .app-top-brand-text strong { max-width: 125px; }
    .app-top-brand-text small { display: none; }
    .app-user-actions .button { padding-inline: 8px; }
}

/* =========================================================
   v1.4.42 — LOGIN MODERN GLASS UI
   ========================================================= */
.login42-page {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background: #edf4fb;
    color: #12243a;
}
.login42-page *, .login42-page *::before, .login42-page *::after { box-sizing: border-box; }
.login42-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background:
    radial-gradient(circle at 12% 10%, rgba(52,149,255,.16), transparent 28%),
    radial-gradient(circle at 88% 88%, rgba(41,198,170,.12), transparent 24%),
    linear-gradient(135deg, #eef6fd 0%, #f7fbff 42%, #eaf4fb 100%); }
.login42-grid { position: absolute; inset: 0; opacity: .28; background-image:
    linear-gradient(rgba(20,91,154,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,91,154,.045) 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(to bottom, #000 0, transparent 65%); }
.login42-glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(10px); }
.login42-glow-a { left: -200px; top: -200px; background: rgba(40,142,255,.16); }
.login42-glow-b { right: -180px; bottom: -260px; background: rgba(40,192,173,.13); }

.login42-shell { position: relative; z-index: 1; min-height: 100vh; width: min(1540px, calc(100% - 34px)); margin: 0 auto; padding: 28px 0; display: grid; grid-template-columns: minmax(520px,.92fr) minmax(640px,1.08fr); gap: 22px; }
.login42-auth, .login42-showcase { min-height: calc(100vh - 56px); border-radius: 32px; overflow: hidden; box-shadow: 0 30px 90px rgba(17,55,91,.14); }
.login42-auth { display: flex; flex-direction: column; padding: 26px 34px 24px; background: rgba(255,255,255,.94); border: 1px solid rgba(207,222,238,.9); backdrop-filter: blur(20px); }
.login42-auth-top { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.login42-brand { display: inline-flex; align-items: center; gap: 12px; color: #102c4a; min-width: 0; }
.login42-logo { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border-radius: 15px; background: #fff; border: 1px solid #d9e5f1; box-shadow: 0 10px 28px rgba(29,75,119,.12); overflow: hidden; }
.login42-logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.login42-logo-fallback { background: linear-gradient(135deg,#f4c45c,#ffdb8c); color: #10385c; font-weight: 900; font-size: 22px; }
.login42-brand-copy strong, .login42-brand-copy small { display: block; }
.login42-brand-copy strong { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 900; letter-spacing: -.01em; }
.login42-brand-copy small { margin-top: 2px; color: #74869a; font-size: 10px; }
.login42-home { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 8px 12px; border-radius: 11px; border: 1px solid #d7e2ee; background: #fff; color: #31465e; font-size: 11px; font-weight: 800; box-shadow: 0 8px 20px rgba(33,74,113,.06); }
.login42-home:hover { color: #0e5ca6; background: #f7fbff; transform: translateY(-1px); }
.login42-auth-content { width: min(100%, 560px); margin: auto; padding: 34px 0 8px; }
.login42-kicker { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 6px 11px; border-radius: 999px; background: #eaf4ff; border: 1px solid #d5e9fb; color: #0f5a99; font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.login42-kicker span { width: 7px; height: 7px; border-radius: 50%; background: #2b8ee9; box-shadow: 0 0 0 4px rgba(43,142,233,.12); }
.login42-auth h1 { margin: 18px 0 12px; color: #102b48; font-size: clamp(40px,4.1vw,58px); line-height: .99; letter-spacing: -.05em; }
.login42-lead { max-width: 520px; margin: 0 0 27px; color: #61758c; font-size: 14px; line-height: 1.75; }
.login42-alert { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 12px 14px; border-radius: 14px; font-size: 12px; border: 1px solid #d8e4ef; background: #f8fbfe; color: #31465c; }
.login42-alert-icon { width: 24px; height: 24px; flex: 0 0 24px; display: grid; place-items: center; border-radius: 8px; background: #eaf2fa; font-weight: 900; }
.login42-alert ul { margin: 4px 0 0; padding-left: 18px; }
.login42-alert-danger { border-color: #f0c7c3; background: #fff2f0; color: #9b281f; }
.login42-alert-danger .login42-alert-icon { background: #ffdcd8; color: #b42318; }
.login42-alert-success { border-color: #bce3c9; background: #effbf3; color: #196b39; }
.login42-alert-warning { border-color: #f2db9d; background: #fff9e8; color: #845b00; }
.login42-form { display: grid; gap: 17px; }
.login42-field { display: grid; gap: 7px; }
.login42-field > small { color: #8392a3; font-size: 9.5px; line-height: 1.45; }
.login42-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.login42-label-row label { color: #17334f; font-size: 11px; font-weight: 900; }
.login42-field-badge { color: #7790a7; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.login42-caps { color: #c27b00; font-size: 9px; font-weight: 800; }
.login42-control { min-height: 54px; display: flex; align-items: center; gap: 10px; padding: 5px 6px 5px 8px; border: 1px solid #cfdeec; border-radius: 15px; background: #fbfdff; transition: .16s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.login42-control:focus-within { border-color: #2d8fe7; box-shadow: 0 0 0 4px rgba(45,143,231,.11), 0 10px 25px rgba(31,94,151,.07); background: #fff; }
.login42-control-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 11px; background: #eaf4ff; color: #245a89; font-size: 10px; font-weight: 900; }
.login42-lock { letter-spacing: 1px; }
.login42-control input { width: 100%; min-width: 0; height: 42px; border: 0; outline: 0; background: transparent; color: #173049; font-size: 12px; }
.login42-control input::placeholder { color: #9aaabd; }
.login42-show { min-width: 68px; height: 38px; border: 0; border-radius: 10px; background: #e8f2fb; color: #173e64; font-size: 10px; font-weight: 900; cursor: pointer; }
.login42-show:hover { background: #dbeaf7; }
.login42-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: -2px; }
.login42-row a { color: #0d5591; font-size: 10.5px; font-weight: 900; }
.login42-remember { display: inline-flex; align-items: center; gap: 7px; color: #8795a5; font-size: 10px; font-weight: 600; }
.login42-remember input { width: 14px; height: 14px; }
.login42-submit { width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px 8px 18px; border: 0; border-radius: 15px; color: #fff; background: linear-gradient(100deg,#0d3d69 0%,#0c5fa6 55%,#118bd0 100%); box-shadow: 0 15px 34px rgba(17,95,160,.22); font-size: 12px; font-weight: 900; cursor: pointer; transition: .18s ease; }
.login42-submit:hover { transform: translateY(-1px); box-shadow: 0 18px 40px rgba(17,95,160,.27); }
.login42-submit:disabled { opacity: .7; cursor: wait; transform: none; }
.login42-submit-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: rgba(255,255,255,.13); font-size: 16px; }
.login42-role-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-top: 18px; padding: 10px; border: 1px solid #dce7f1; border-radius: 16px; background: linear-gradient(180deg,#fbfdff,#f6fafe); }
.login42-role-grid > div { min-width: 0; padding: 8px; border-radius: 12px; }
.login42-role-grid strong, .login42-role-grid small { display: block; }
.login42-role-grid strong { margin-top: 6px; color: #183553; font-size: 9.5px; }
.login42-role-grid small { margin-top: 2px; color: #8290a0; font-size: 7.5px; line-height: 1.25; }
.login42-role-dot { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; font-size: 9px; font-weight: 900; }
.role-student { color: #155dae; background: #e6f0ff; }
.role-lecturer { color: #138056; background: #e4f8ef; }
.role-head { color: #7142c8; background: #efe8ff; }
.role-admin { color: #bc6a0d; background: #fff1df; }
.login42-register { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 14px; border-radius: 15px; border: 1px solid #dbe7f1; background: rgba(249,252,255,.9); }
.login42-register span, .login42-register strong { display: block; }
.login42-register > div > span { color: #8997a7; font-size: 9px; }
.login42-register strong { margin-top: 2px; color: #233e58; font-size: 10px; }
.login42-register a, .login42-register-off { display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; min-height: 37px; padding: 7px 11px; border-radius: 10px; background: #e9f3fc; color: #12558f; font-size: 9.5px; font-weight: 900; white-space: nowrap; }
.login42-register a:hover { background: #dcecf9; }
.login42-auth-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; color: #99a5b2; font-size: 8px; }

.login42-showcase { position: relative; display: flex; flex-direction: column; padding: 34px 38px 30px; color: #fff; background:
    radial-gradient(circle at 92% 7%, rgba(74,181,255,.38), transparent 27%),
    radial-gradient(circle at 12% 90%, rgba(58,174,219,.20), transparent 26%),
    linear-gradient(145deg,#082e53 0%,#0a4679 45%,#127fc0 100%); border: 1px solid rgba(255,255,255,.08); }
.login42-showcase::before, .login42-showcase::after { content:""; position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.07); pointer-events:none; }
.login42-showcase::before { width: 460px; height: 460px; right: -170px; top: -190px; }
.login42-showcase::after { width: 390px; height: 390px; left: -190px; bottom: -210px; }
.login42-showcase-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.login42-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 31px; padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.19); background: rgba(255,255,255,.08); color: rgba(255,255,255,.9); font-size: 8px; font-weight: 900; letter-spacing: .15em; }
.login42-pill i, .login42-secure i, .login42-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #67e5a2; box-shadow: 0 0 0 4px rgba(103,229,162,.12); }
.login42-version { color: rgba(255,255,255,.62); font-size: 9px; font-weight: 800; }
.login42-showcase-copy { position: relative; z-index: 2; margin-top: clamp(55px,8vh,110px); max-width: 760px; }
.login42-eyebrow { color: #b8d9ef; font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.login42-showcase-copy h2 { margin: 15px 0 15px; max-width: 760px; color: #fff; font-size: clamp(46px,5vw,72px); line-height: .98; letter-spacing: -.045em; }
.login42-showcase-copy p { max-width: 700px; margin: 0; color: rgba(231,244,255,.78); font-size: 13px; line-height: 1.75; }
.login42-preview { position: relative; z-index: 2; margin-top: 34px; }
.login42-preview-window { overflow: hidden; border-radius: 22px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.93); box-shadow: 0 24px 70px rgba(0,20,41,.27); transform: perspective(1200px) rotateX(.8deg); }
.login42-preview-bar { height: 42px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 0 15px; color: #6c8095; background: rgba(247,250,253,.98); border-bottom: 1px solid #e2eaf2; font-size: 9px; font-weight: 800; }
.login42-preview-bar > b { justify-self: end; color: #98a7b5; letter-spacing: 2px; }
.login42-preview-dots { display: flex; gap: 5px; }
.login42-preview-dots i { width: 6px; height: 6px; border-radius: 50%; background: #d8e2eb; }
.login42-preview-body { min-height: 250px; display: grid; grid-template-columns: 150px 1fr; }
.login42-preview-nav { display: grid; align-content: start; gap: 7px; padding: 18px 12px; background: #0b365f; }
.login42-preview-nav strong, .login42-preview-nav span { display: block; padding: 9px 10px; border-radius: 9px; color: rgba(255,255,255,.65); font-size: 9px; }
.login42-preview-nav strong { color: #fff; background: linear-gradient(90deg,#176bb6,#2d90e1); }
.login42-preview-main { padding: 20px; background: linear-gradient(180deg,#f7fbff,#eef5fa); }
.login42-preview-welcome small, .login42-preview-welcome strong, .login42-preview-welcome span { display: block; }
.login42-preview-welcome small { color: #8396a9; font-size: 7px; font-weight: 900; letter-spacing: .12em; }
.login42-preview-welcome strong { margin-top: 4px; color: #173c61; font-size: 20px; }
.login42-preview-welcome span { margin-top: 2px; color: #7f91a4; font-size: 8px; }
.login42-preview-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 20px; }
.login42-preview-cards article { min-height: 74px; padding: 11px; border: 1px solid #dae7f2; border-radius: 13px; background: #fff; box-shadow: 0 8px 20px rgba(23,67,107,.06); }
.login42-preview-cards i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; margin-bottom: 7px; font-style: normal; font-size: 8px; font-weight: 900; }
.login42-preview-cards i.blue { color:#155dae; background:#e7f1ff; }
.login42-preview-cards i.green { color:#16815b; background:#e6f8ef; }
.login42-preview-cards i.purple { color:#7141c8; background:#f0eaff; }
.login42-preview-cards i.orange { color:#c06f11; background:#fff0dd; }
.login42-preview-cards strong, .login42-preview-cards span { display:block; }
.login42-preview-cards strong { color:#21415f; font-size:9px; }
.login42-preview-cards span { margin-top:2px; color:#8796a5; font-size:7px; }
.login42-floating-card { position: absolute; right: 20px; bottom: -18px; min-width: 235px; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 15px; background: #fff; box-shadow: 0 16px 40px rgba(5,35,63,.26); color: #21415f; }
.login42-floating-card div { min-width:0; flex:1; }
.login42-floating-card strong, .login42-floating-card small { display:block; }
.login42-floating-card strong { font-size:9px; }
.login42-floating-card small { color:#7c8d9c; font-size:7px; }
.login42-floating-card b { color:#15815d; font-size:8px; }
.login42-showcase-bottom { position: relative; z-index: 2; display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:52px; border-top:1px solid rgba(255,255,255,.14); }
.login42-mini-avatars { display:flex; }
.login42-mini-avatars span { width:28px; height:28px; display:grid; place-items:center; margin-left:-6px; border-radius:50%; border:2px solid rgba(9,58,101,.95); background:#eef7ff; color:#174b75; font-size:8px; font-weight:900; }
.login42-mini-avatars span:first-child { margin-left:0; }
.login42-showcase-bottom strong, .login42-showcase-bottom small { display:block; }
.login42-showcase-bottom strong { font-size:10px; color:#fff; }
.login42-showcase-bottom small { margin-top:2px; color:rgba(225,241,253,.62); font-size:7.5px; }
.login42-secure { margin-left:auto; display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.82); font-size:8px; font-weight:800; }

@media (max-width: 1180px) {
    .login42-shell { grid-template-columns: minmax(440px,.95fr) minmax(500px,1.05fr); width: min(100% - 24px, 1280px); gap: 14px; padding: 12px 0; }
    .login42-auth, .login42-showcase { min-height: calc(100vh - 24px); border-radius: 26px; }
    .login42-auth { padding: 24px; }
    .login42-auth-content { width:min(100%,520px); }
    .login42-showcase { padding: 28px; }
    .login42-showcase-copy h2 { font-size: 48px; }
    .login42-preview-body { grid-template-columns: 118px 1fr; }
}
@media (max-width: 940px) {
    .login42-shell { grid-template-columns: 1fr; width: min(100% - 24px, 760px); padding: 12px 0 24px; }
    .login42-auth, .login42-showcase { min-height: auto; }
    .login42-auth { padding: 24px 24px 20px; }
    .login42-auth-content { width: min(100%,610px); padding-top: 54px; }
    .login42-showcase { padding: 32px 28px; }
    .login42-showcase-copy { margin-top: 48px; }
    .login42-showcase-copy h2 { max-width: 650px; font-size: 48px; }
    .login42-showcase-bottom { margin-top: 54px; }
}
@media (max-width: 620px) {
    .login42-shell { width: 100%; padding: 0; gap: 0; }
    .login42-auth, .login42-showcase { border-radius: 0; box-shadow: none; border-left: 0; border-right: 0; }
    .login42-auth { padding: 20px 18px 24px; }
    .login42-logo { width:42px; height:42px; flex-basis:42px; border-radius:12px; }
    .login42-brand-copy strong { max-width: 165px; font-size: 12px; }
    .login42-brand-copy small { font-size: 8px; }
    .login42-home { min-height:34px; padding:6px 9px; font-size:9px; }
    .login42-auth-content { padding-top: 42px; }
    .login42-auth h1 { font-size: 40px; }
    .login42-lead { font-size: 12px; }
    .login42-role-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .login42-register { align-items:flex-start; flex-direction:column; }
    .login42-register a, .login42-register-off { width:100%; }
    .login42-auth-footer { align-items:flex-start; flex-direction:column; gap:4px; }
    .login42-showcase { padding: 28px 18px; }
    .login42-showcase-copy { margin-top: 40px; }
    .login42-showcase-copy h2 { font-size: 38px; }
    .login42-preview-body { grid-template-columns: 1fr; }
    .login42-preview-nav { grid-template-columns: repeat(3,1fr); gap:5px; padding:10px; }
    .login42-preview-nav strong, .login42-preview-nav span { padding:7px 6px; text-align:center; font-size:7px; }
    .login42-preview-cards { grid-template-columns: 1fr; }
    .login42-floating-card { position:relative; right:auto; bottom:auto; width:100%; margin-top:10px; }
    .login42-showcase-bottom { align-items:flex-start; flex-wrap:wrap; }
    .login42-secure { margin-left:0; }
}