:root {
    --bg: #f3f6f5;
    --surface: #ffffff;
    --surface-soft: #f8faf9;
    --surface-muted: #edf3f1;
    --text: #15231f;
    --muted: #66756f;
    --border: #dbe5e1;
    --primary: #145c4c;
    --primary-strong: #0d473a;
    --primary-soft: #e0f0eb;
    --accent: #d79a2b;
    --success: #13795b;
    --success-soft: #dcf5ea;
    --warning: #9a6510;
    --warning-soft: #fff1cf;
    --danger: #b23a3a;
    --danger-soft: #fde6e6;
    --info: #2563a7;
    --info-soft: #e3effc;
    --shadow-sm: 0 2px 12px rgba(23, 45, 38, .06);
    --shadow: 0 14px 36px rgba(23, 45, 38, .10);
    --radius-sm: 9px;
    --radius: 14px;
    --radius-lg: 22px;
    --sidebar-width: 278px;
    --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-strong); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
[hidden] { display: none !important; }

.app-shell { min-height: 100vh; }
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-width);
    background: #102e27;
    color: #fff;
    display: flex;
    flex-direction: column;
    z-index: 50;
    overflow-y: auto;
    border-right: 1px solid rgba(255,255,255,.06);
}
.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 20px 18px;
    position: sticky;
    top: 0;
    background: #102e27;
    z-index: 2;
}
.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; min-width: 0; }
.brand:hover { color: inherit; }
.brand img { width: 44px; height: 44px; border-radius: 12px; object-fit: contain; background: #fff; padding: 4px; flex: 0 0 auto; }
.brand span { display: flex; flex-direction: column; min-width: 0; }
.brand strong { font-size: 15px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand small { font-size: 11px; color: rgba(255,255,255,.65); margin-top: 3px; }
.sidebar-close { display: none; background: transparent; border: 0; color: #fff; font-size: 28px; }
.sidebar-nav { padding: 2px 14px 20px; flex: 1; }
.nav-section {
    color: rgba(255,255,255,.42);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 10px;
    font-weight: 800;
    padding: 21px 12px 8px;
}
.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,.77);
    padding: 11px 12px;
    border-radius: 10px;
    font-size: 13.5px;
    margin: 2px 0;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-link.active { color: #fff; background: rgba(80, 188, 151, .18); box-shadow: inset 3px 0 0 #65cda9; }
.nav-icon { width: 21px; height: 21px; display: grid; place-items: center; font-size: 18px; flex: 0 0 auto; }
.sidebar-footer { padding: 16px; border-top: 1px solid rgba(255,255,255,.08); }
.user-mini { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; min-width: 0; }
.user-mini > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.user-mini strong { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-mini small { font-size: 11px; color: rgba(255,255,255,.56); }

.main-area { min-height: 100vh; margin-left: var(--sidebar-width); }
.topbar {
    height: 82px;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 40;
}
.topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.topbar h1 { margin: 0; font-size: 20px; line-height: 1.25; letter-spacing: -.02em; }
.topbar p { margin: 3px 0 0; color: var(--muted); font-size: 11.5px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.menu-toggle { display: none; border: 0; background: var(--surface-muted); width: 42px; height: 42px; border-radius: 10px; font-size: 20px; color: var(--text); }
.icon-button {
    position: relative;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: #fff;
    color: var(--text);
    font-size: 17px;
}
.notification-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    border: 2px solid #fff;
}
.user-chip { display: inline-flex; align-items: center; gap: 8px; color: var(--text); padding: 5px 10px 5px 6px; border-radius: 12px; }
.user-chip:hover { background: var(--surface-muted); }
.content-area { padding: 28px 30px 46px; max-width: 1600px; margin: 0 auto; }

.avatar {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    background: #2b806a;
    color: #fff;
}
.avatar-sm { width: 32px; height: 32px; border-radius: 9px; font-size: 10px; }
.avatar-lg { width: 58px; height: 58px; border-radius: 16px; font-size: 18px; }

.page-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 22px; }
.page-heading h2 { margin: 0; font-size: 24px; letter-spacing: -.03em; }
.page-heading p { margin: 5px 0 0; color: var(--muted); font-size: 13px; max-width: 720px; }
.page-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }

.grid { display: grid; gap: 20px; }
.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-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.card-header { padding: 19px 21px 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--border); }
.card-header h3 { margin: 0; font-size: 15.5px; letter-spacing: -.015em; }
.card-header p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.card-body { padding: 21px; }
.card-footer { padding: 14px 21px; border-top: 1px solid var(--border); background: var(--surface-soft); border-radius: 0 0 var(--radius) var(--radius); }
.card-flat { box-shadow: none; }
.card-accent { border-top: 3px solid var(--primary); }

.stat-card { position: relative; overflow: hidden; padding: 19px; min-height: 132px; }
.stat-card::after { content: ""; position: absolute; width: 90px; height: 90px; border-radius: 50%; background: var(--primary-soft); top: -36px; right: -27px; opacity: .75; }
.stat-label { color: var(--muted); font-size: 12px; font-weight: 650; }
.stat-value { display: block; font-size: 30px; line-height: 1; margin: 12px 0 10px; letter-spacing: -.04em; }
.stat-meta { color: var(--muted); font-size: 11px; }
.stat-icon { position: absolute; z-index: 1; right: 18px; top: 17px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--primary-soft); color: var(--primary); font-size: 18px; }

.btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 15px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-weight: 720;
    font-size: 12.5px;
    line-height: 1;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
    white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { color: #fff; background: var(--primary); box-shadow: 0 5px 14px rgba(20,92,76,.18); }
.btn-primary:hover { color: #fff; background: var(--primary-strong); }
.btn-secondary { color: var(--primary); background: var(--primary-soft); border-color: #c5e3d9; }
.btn-secondary:hover { background: #d2ebe3; }
.btn-outline { color: var(--text); background: #fff; border-color: var(--border); }
.btn-outline:hover { color: var(--primary); border-color: #a9cbc0; background: var(--surface-soft); }
.btn-danger { color: #fff; background: var(--danger); }
.btn-danger:hover { color: #fff; background: #963030; }
.btn-warning { color: #5b3a00; background: #f6c663; }
.btn-success { color: #fff; background: var(--success); }
.btn-ghost { color: inherit; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.10); }
.btn-ghost:hover { color: #fff; background: rgba(255,255,255,.13); }
.btn-sm { min-height: 33px; padding: 7px 11px; font-size: 11.5px; border-radius: 8px; }
.btn-lg { min-height: 48px; padding: 12px 21px; font-size: 14px; border-radius: 12px; }
.btn-icon { width: 38px; height: 38px; padding: 0; }
.btn-block { width: 100%; }
button:disabled, .btn.disabled { opacity: .56; cursor: not-allowed; transform: none; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-group { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.form-group.full { grid-column: 1 / -1; }
.form-label { font-size: 12.5px; font-weight: 730; color: #243d36; }
.form-label .required { color: var(--danger); }
.form-control {
    width: 100%;
    min-height: 43px;
    border: 1px solid #cfdcd7;
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    padding: 9px 12px;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
textarea.form-control { min-height: 112px; resize: vertical; line-height: 1.55; }
.form-control:focus { border-color: #4c9d85; box-shadow: 0 0 0 3px rgba(76,157,133,.14); }
.form-control:disabled { background: var(--surface-muted); color: var(--muted); }
.form-text { color: var(--muted); font-size: 11px; line-height: 1.45; }
.form-error { color: var(--danger); font-size: 11px; }
.input-group { display: flex; align-items: stretch; }
.input-group .form-control { border-radius: 10px 0 0 10px; }
.input-group .btn { border-radius: 0 10px 10px 0; }
.checkbox, .radio { display: inline-flex; align-items: flex-start; gap: 9px; color: var(--text); font-size: 12.5px; cursor: pointer; }
.checkbox input, .radio input { margin-top: 3px; accent-color: var(--primary); }
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch-track { width: 44px; height: 24px; border-radius: 99px; background: #cbd7d2; padding: 3px; transition: background .2s; }
.switch-track::after { content: ""; display: block; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.18); transition: transform .2s; }
.switch input:checked + .switch-track { background: var(--primary); }
.switch input:checked + .switch-track::after { transform: translateX(20px); }
.switch-label { font-size: 12.5px; font-weight: 650; }
.form-actions { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 8px; }

.filter-bar { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; padding: 15px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 18px; }
.filter-bar .form-group { min-width: 160px; flex: 1; }
.filter-bar .form-group.search { flex: 2; min-width: 240px; }

.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.table th { text-align: left; padding: 11px 13px; color: #5d6d67; font-size: 10.5px; letter-spacing: .045em; text-transform: uppercase; background: #f6f9f8; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: 13px; border-bottom: 1px solid #e8eeec; vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #fbfdfc; }
.table .actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.table-title { display: flex; flex-direction: column; }
.table-title strong { font-size: 12.7px; }
.table-title small { color: var(--muted); margin-top: 2px; }
.table-empty { text-align: center; padding: 35px !important; color: var(--muted); }

.badge { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 4px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 780; white-space: nowrap; }
.badge-success { color: #0b6549; background: var(--success-soft); }
.badge-warning { color: #76500d; background: var(--warning-soft); }
.badge-danger { color: #9a2e2e; background: var(--danger-soft); }
.badge-info { color: #1f5790; background: var(--info-soft); }
.badge-neutral { color: #5d6b67; background: #edf1f0; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: currentColor; }

.alert { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 12px 15px; border-radius: 11px; margin-bottom: 16px; font-size: 12.5px; border: 1px solid transparent; box-shadow: var(--shadow-sm); }
.alert button { border: 0; background: transparent; font-size: 20px; line-height: 1; color: inherit; opacity: .6; }
.alert-success { color: #0d644b; background: #e4f6ee; border-color: #bfe8d7; }
.alert-warning { color: #74500e; background: #fff4d9; border-color: #f0daa6; }
.alert-error, .alert-danger { color: #8d2d2d; background: #fde9e9; border-color: #f2caca; }
.alert-info { color: #1f568c; background: #e8f2fc; border-color: #c8ddf4; }

.empty-state { text-align: center; padding: 48px 24px; color: var(--muted); }
.empty-state h3 { color: var(--text); margin: 10px 0 6px; font-size: 17px; }
.empty-state p { max-width: 480px; margin: 0 auto 18px; font-size: 12.5px; }
.empty-icon { width: 58px; height: 58px; margin: 0 auto; display: grid; place-items: center; border-radius: 18px; background: var(--primary-soft); color: var(--primary); font-size: 26px; }

.pagination { display: flex; justify-content: flex-end; gap: 5px; margin-top: 18px; }
.pagination a { min-width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--border); background: #fff; border-radius: 8px; font-size: 11px; color: var(--text); }
.pagination a.active { color: #fff; background: var(--primary); border-color: var(--primary); }

.progress { width: 100%; height: 8px; border-radius: 10px; background: #e4ebe8; overflow: hidden; }
.progress-bar { height: 100%; border-radius: inherit; background: var(--primary); transition: width .25s ease; }
.progress-meta { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 10.5px; color: var(--muted); }

.list { display: flex; flex-direction: column; }
.list-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.list-item:last-child { border-bottom: 0; }
.list-main { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
.list-main > div { min-width: 0; }
.list-main strong { display: block; font-size: 12.5px; }
.list-main p { margin: 3px 0 0; color: var(--muted); font-size: 11.5px; }
.list-meta { color: var(--muted); font-size: 10.5px; white-space: nowrap; }

.notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 12px; background: var(--surface-muted); border: 1px solid var(--border); }
.notice-icon { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center; background: #fff; color: var(--primary); }
.notice strong { display: block; font-size: 12.5px; }
.notice p { margin: 3px 0 0; color: var(--muted); font-size: 11.5px; }

/* Halaman publik */
.public-page { background: #f5f7f6; }
.public-header { height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1220px; margin: 0 auto; padding: 0 28px; }
.public-header .brand { color: var(--text); }
.public-header .brand small { color: var(--muted); }
.public-header nav { display: flex; align-items: center; gap: 22px; }
.public-header nav > a:not(.btn) { color: #475953; font-size: 13px; font-weight: 650; }
.public-main { min-height: calc(100vh - 158px); }
.public-footer { max-width: 1220px; margin: 40px auto 0; padding: 26px 28px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; color: var(--muted); }
.public-footer strong { color: var(--text); font-size: 13px; }
.public-footer p { margin: 2px 0 0; font-size: 11px; }
.public-footer small { font-size: 11px; }
.hero { max-width: 1220px; margin: 0 auto; padding: 70px 28px 54px; display: grid; grid-template-columns: 1.08fr .92fr; gap: 54px; align-items: center; }
.hero-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); background: var(--primary-soft); border: 1px solid #cbe5dd; border-radius: 99px; padding: 7px 11px; font-size: 11px; font-weight: 780; }
.hero h1 { margin: 18px 0 18px; font-size: clamp(38px, 5.3vw, 66px); line-height: 1.04; letter-spacing: -.055em; max-width: 760px; }
.hero h1 span { color: var(--primary); }
.hero p { margin: 0; color: #5d6e68; font-size: 16px; line-height: 1.72; max-width: 650px; }
.hero-actions { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 29px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 28px; color: var(--muted); font-size: 11.5px; }
.hero-points span::before { content: "✓"; color: var(--success); font-weight: 900; margin-right: 6px; }
.hero-visual { position: relative; min-height: 440px; }
.hero-panel { position: absolute; inset: 20px 0 0 35px; background: #123a31; border-radius: 30px; padding: 25px; color: #fff; box-shadow: 0 30px 70px rgba(17,54,45,.24); overflow: hidden; }
.hero-panel::before { content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%; right: -100px; top: -120px; background: rgba(76, 193, 151, .22); }
.hero-panel-top { display: flex; justify-content: space-between; align-items: center; position: relative; }
.hero-panel-top span { font-size: 12px; color: rgba(255,255,255,.65); }
.hero-dots { display: flex; gap: 6px; }
.hero-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.25); }
.hero-screen { position: relative; margin-top: 22px; background: #f8fbfa; border-radius: 18px; padding: 18px; color: var(--text); min-height: 310px; }
.hero-screen-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.hero-screen-head strong { font-size: 13px; }
.hero-screen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mock-card { background: #fff; border: 1px solid #e1e9e6; border-radius: 12px; padding: 13px; min-height: 85px; }
.mock-card small { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.mock-card strong { display: block; font-size: 19px; margin-top: 7px; }
.mock-video { grid-column: span 2; min-height: 132px; background: #1b2a26; border-radius: 13px; position: relative; overflow: hidden; display: grid; place-items: center; color: #fff; }
.mock-video .person { width: 62px; height: 62px; border-radius: 50%; background: #d5e6e0; color: #173d33; display: grid; place-items: center; font-weight: 900; font-size: 20px; }
.mock-video .local { position: absolute; right: 12px; bottom: 12px; width: 72px; height: 48px; border-radius: 9px; background: #417966; border: 2px solid rgba(255,255,255,.5); }
.mock-video .call-controls { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 6px; }
.mock-video .call-controls i { width: 25px; height: 25px; border-radius: 50%; background: rgba(255,255,255,.16); }
.floating-tag { position: absolute; z-index: 2; left: 0; bottom: 42px; padding: 12px 14px; border-radius: 13px; background: #fff; box-shadow: var(--shadow); font-size: 11px; font-weight: 740; color: var(--text); }
.floating-tag::before { content: "●"; color: #23a46f; margin-right: 7px; }
.features-section { max-width: 1220px; margin: 0 auto; padding: 42px 28px 70px; }
.section-heading { max-width: 650px; margin-bottom: 28px; }
.section-heading small { color: var(--primary); text-transform: uppercase; font-size: 10.5px; font-weight: 850; letter-spacing: .12em; }
.section-heading h2 { margin: 8px 0 8px; font-size: 31px; letter-spacing: -.04em; }
.section-heading p { color: var(--muted); margin: 0; font-size: 13.5px; }
.feature-card { padding: 22px; }
.feature-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 13px; background: var(--primary-soft); color: var(--primary); font-size: 19px; }
.feature-card h3 { margin: 17px 0 7px; font-size: 15px; }
.feature-card p { margin: 0; color: var(--muted); font-size: 12px; }
.auth-wrap { max-width: 1050px; margin: 35px auto; padding: 30px 28px; display: grid; grid-template-columns: .95fr 1.05fr; align-items: stretch; }
.auth-aside { background: #123a31; color: #fff; border-radius: 24px 0 0 24px; padding: 42px; display: flex; flex-direction: column; justify-content: space-between; min-height: 570px; position: relative; overflow: hidden; }
.auth-aside::after { content: ""; position: absolute; width: 330px; height: 330px; border-radius: 50%; background: rgba(91,203,164,.13); right: -170px; bottom: -140px; }
.auth-aside h2 { font-size: 32px; line-height: 1.15; letter-spacing: -.04em; margin: 20px 0 13px; }
.auth-aside p { color: rgba(255,255,255,.68); font-size: 13px; }
.auth-list { display: grid; gap: 13px; margin-top: 30px; }
.auth-list span { font-size: 12px; color: rgba(255,255,255,.84); }
.auth-list span::before { content: "✓"; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 9px; border-radius: 50%; background: rgba(93,209,169,.18); color: #84e0c1; }
.auth-form { background: #fff; border: 1px solid var(--border); border-left: 0; border-radius: 0 24px 24px 0; padding: 48px; }
.auth-form h1 { margin: 0; font-size: 26px; letter-spacing: -.04em; }
.auth-form > p { margin: 7px 0 25px; color: var(--muted); font-size: 12.5px; }
.auth-form .form-group { margin-bottom: 16px; }

/* Dashboard */
.dashboard-welcome { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 26px; margin-bottom: 21px; background: linear-gradient(110deg, #123a31, #1b6958); border-radius: var(--radius-lg); color: #fff; overflow: hidden; position: relative; }
.dashboard-welcome::after { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,.07); right: -100px; top: -145px; }
.dashboard-welcome h2 { margin: 0 0 5px; font-size: 22px; letter-spacing: -.03em; position: relative; z-index: 1; }
.dashboard-welcome p { margin: 0; color: rgba(255,255,255,.7); font-size: 12.5px; position: relative; z-index: 1; }
.dashboard-welcome .btn { position: relative; z-index: 1; background: #fff; color: var(--primary); }

.exam-list-card { padding: 18px; }
.exam-list-top { display: flex; justify-content: space-between; gap: 15px; align-items: flex-start; }
.exam-code { font-size: 10px; color: var(--primary); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.exam-list-card h3 { margin: 5px 0 7px; font-size: 15px; }
.exam-list-card p { margin: 0; color: var(--muted); font-size: 11.5px; }
.exam-meta { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin: 16px 0; padding: 12px; background: var(--surface-soft); border-radius: 10px; }
.exam-meta div { display: flex; flex-direction: column; }
.exam-meta small { color: var(--muted); font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; }
.exam-meta strong { font-size: 11.5px; margin-top: 3px; }
.exam-list-actions { display: flex; gap: 8px; }

/* Ujian peserta */
.exam-page { background: #edf2f0; }
.exam-page .sidebar, .exam-page .topbar { display: none; }
.exam-page .main-area { margin-left: 0; }
.exam-page .content-area { max-width: none; padding: 0; }
.exam-shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.exam-header { min-height: 78px; padding: 12px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30; }
.exam-header-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.exam-header-title img { width: 42px; height: 42px; border-radius: 11px; }
.exam-header-title strong { display: block; font-size: 13.5px; }
.exam-header-title small { display: block; color: var(--muted); font-size: 10.5px; margin-top: 2px; }
.exam-header-center { display: flex; align-items: center; gap: 18px; }
.exam-timer { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 11px; background: #102e27; color: #fff; }
.exam-timer small { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.65); }
.exam-timer strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.save-status { font-size: 11px; color: var(--muted); min-width: 92px; text-align: right; }
.save-status.saving { color: var(--warning); }
.save-status.saved { color: var(--success); }
.save-status.error { color: var(--danger); }
.exam-body { display: grid; grid-template-columns: 1fr 300px; gap: 18px; padding: 18px; max-width: 1500px; width: 100%; margin: 0 auto; }
.exam-main { min-width: 0; }
.question-card { min-height: calc(100vh - 114px); padding: 28px; display: flex; flex-direction: column; }
.question-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 17px; border-bottom: 1px solid var(--border); }
.question-number { display: flex; align-items: center; gap: 10px; }
.question-number span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--primary); color: #fff; font-weight: 850; }
.question-number strong { font-size: 13px; }
.question-number small { display: block; color: var(--muted); font-size: 10px; }
.question-text { padding: 25px 2px 18px; font-size: 15px; line-height: 1.75; white-space: pre-wrap; }
.options-list { display: grid; gap: 10px; margin-top: 5px; }
.option-item { display: flex; align-items: flex-start; gap: 11px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .16s, background .16s, transform .16s; }
.option-item:hover { border-color: #82b4a4; background: #f8fcfa; transform: translateY(-1px); }
.option-item input { position: absolute; opacity: 0; }
.option-letter { width: 31px; height: 31px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto; background: var(--surface-muted); border: 1px solid #d7e2de; font-size: 11.5px; font-weight: 850; }
.option-text { font-size: 13px; padding-top: 5px; white-space: pre-wrap; }
.option-item:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.option-item:has(input:checked) .option-letter { background: var(--primary); border-color: var(--primary); color: #fff; }
.essay-answer { min-height: 200px !important; }
.question-footer { margin-top: auto; padding-top: 25px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.exam-sidebar { display: flex; flex-direction: column; gap: 14px; }
.exam-sidebar .card { position: sticky; top: 96px; }
.question-palette { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.palette-button { aspect-ratio: 1; border-radius: 9px; border: 1px solid var(--border); background: #fff; color: var(--text); font-size: 11px; font-weight: 750; position: relative; }
.palette-button:hover { border-color: var(--primary); }
.palette-button.current { color: #fff; background: var(--primary); border-color: var(--primary); }
.palette-button.answered:not(.current) { color: var(--success); background: var(--success-soft); border-color: #a9dfc8; }
.palette-button.flagged::after { content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.palette-legend { display: grid; gap: 7px; margin-top: 13px; font-size: 10px; color: var(--muted); }
.palette-legend span { display: flex; align-items: center; gap: 7px; }
.legend-box { width: 15px; height: 15px; border-radius: 4px; border: 1px solid var(--border); background: #fff; }
.legend-box.answered { background: var(--success-soft); border-color: #a9dfc8; }
.legend-box.flagged { background: var(--warning-soft); border-color: #e3c572; }
.exam-participant-card { display: flex; gap: 10px; align-items: center; }
.exam-participant-card strong { display: block; font-size: 11.5px; }
.exam-participant-card small { display: block; color: var(--muted); font-size: 9.5px; }

/* Monitoring */
.monitor-toolbar { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.monitor-toolbar .form-group { min-width: 240px; }
.monitor-status { display: flex; align-items: center; gap: 6px; color: var(--success); font-size: 11px; }
.monitor-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(19,121,91,.12); }
.participant-cell { display: flex; align-items: center; gap: 10px; }
.participant-cell > div { min-width: 0; }
.participant-cell strong { display: block; }
.participant-cell small { color: var(--muted); }
.violation-count { display: inline-flex; align-items: center; gap: 5px; color: var(--danger); font-weight: 780; }

/* Call / WebRTC */
.call-directory { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.contact-card { padding: 17px; display: flex; flex-direction: column; gap: 15px; }
.contact-head { display: flex; gap: 11px; align-items: center; }
.contact-head > div { min-width: 0; }
.contact-head strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.contact-head small { color: var(--muted); font-size: 10.5px; }
.contact-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.online-indicator { width: 10px; height: 10px; border-radius: 50%; background: #a9b6b1; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--border); }
.online-indicator.online { background: #24a773; }
.call-page { background: #0c1714; }
.call-page .sidebar, .call-page .topbar { display: none; }
.call-page .main-area { margin-left: 0; }
.call-page .content-area { max-width: none; padding: 0; }
.call-room { min-height: 100vh; color: #fff; display: grid; grid-template-rows: auto 1fr auto; background: radial-gradient(circle at 50% 30%, #193e34, #0b1512 65%); }
.call-topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; }
.call-peer { display: flex; align-items: center; gap: 11px; }
.call-peer strong { display: block; font-size: 13px; }
.call-peer small { color: rgba(255,255,255,.55); font-size: 10.5px; }
.call-status { padding: 6px 10px; border-radius: 99px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.74); font-size: 10.5px; }
.video-stage { position: relative; width: min(1180px, calc(100% - 36px)); height: calc(100vh - 185px); min-height: 390px; margin: 0 auto; border-radius: 20px; background: #13231f; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.28); }
.video-stage video { width: 100%; height: 100%; object-fit: cover; background: #101b18; }
.video-stage.audio-mode video { display: none; }
.audio-avatar { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.audio-avatar .avatar { width: 110px; height: 110px; border-radius: 34px; font-size: 34px; margin: 0 auto 16px; }
.audio-avatar h2 { margin: 0; font-size: 23px; }
.audio-avatar p { margin: 6px 0 0; color: rgba(255,255,255,.55); font-size: 12px; }
.local-video { position: absolute; right: 18px; bottom: 18px; width: min(230px, 24vw); aspect-ratio: 4/3; border-radius: 14px; overflow: hidden; background: #233b34; border: 2px solid rgba(255,255,255,.35); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.local-video video { transform: scaleX(-1); }
.video-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.55); font-size: 12px; text-align: center; padding: 20px; }
.call-controls { display: flex; justify-content: center; align-items: center; gap: 11px; padding: 18px 20px 24px; }
.call-control { width: 51px; height: 51px; border-radius: 50%; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.10); color: #fff; display: grid; place-items: center; font-size: 18px; }
.call-control:hover { background: rgba(255,255,255,.17); }
.call-control.off { background: #fff; color: #182b25; }
.call-control.end { width: 61px; border-radius: 24px; background: #c83f42; border-color: #c83f42; }
.call-control.end:hover { background: #a92f32; }
.call-security-warning { position: absolute; left: 18px; top: 18px; max-width: 380px; padding: 10px 12px; background: rgba(170,42,42,.9); border-radius: 10px; font-size: 10.5px; z-index: 3; }
.incoming-call { position: fixed; z-index: 200; right: 22px; bottom: 22px; width: min(390px, calc(100vw - 30px)); background: #102e27; color: #fff; border-radius: 18px; padding: 18px; box-shadow: 0 22px 60px rgba(0,0,0,.28); }
.incoming-call-head { display: flex; gap: 11px; align-items: center; }
.incoming-call-head strong { display: block; font-size: 13px; }
.incoming-call-head small { display: block; color: rgba(255,255,255,.62); font-size: 10.5px; }
.incoming-call-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.incoming-call .btn-outline { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #fff; }

/* Pesan */
.chat-layout { display: grid; grid-template-columns: 300px 1fr; min-height: 650px; overflow: hidden; }
.chat-contacts { border-right: 1px solid var(--border); background: #fbfcfc; }
.chat-contacts-head { padding: 17px; border-bottom: 1px solid var(--border); }
.chat-contact-list { max-height: 590px; overflow-y: auto; }
.chat-contact { display: flex; align-items: center; gap: 10px; padding: 13px 15px; color: var(--text); border-bottom: 1px solid #edf1ef; }
.chat-contact:hover, .chat-contact.active { background: var(--primary-soft); }
.chat-contact > div { min-width: 0; }
.chat-contact strong { display: block; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-contact small { display: block; color: var(--muted); font-size: 9.5px; }
.chat-panel { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; }
.chat-header { padding: 15px 18px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); }
.chat-header .participant-cell strong { font-size: 12.5px; }
.chat-messages { padding: 20px; overflow-y: auto; background: #f5f8f7; display: flex; flex-direction: column; gap: 9px; }
.chat-bubble { max-width: 72%; padding: 10px 12px; border-radius: 13px 13px 13px 4px; background: #fff; border: 1px solid var(--border); font-size: 12px; box-shadow: 0 2px 7px rgba(15,36,30,.04); }
.chat-bubble.mine { align-self: flex-end; background: var(--primary); color: #fff; border-color: var(--primary); border-radius: 13px 13px 4px 13px; }
.chat-bubble small { display: block; margin-top: 5px; font-size: 9px; color: var(--muted); }
.chat-bubble.mine small { color: rgba(255,255,255,.62); text-align: right; }
.chat-compose { padding: 14px; border-top: 1px solid var(--border); display: flex; gap: 9px; background: #fff; }
.chat-compose textarea { min-height: 42px; max-height: 100px; resize: none; }

/* Detail hasil */
.score-hero { padding: 26px; background: #123a31; color: #fff; border-radius: var(--radius-lg); display: flex; justify-content: space-between; align-items: center; gap: 22px; }
.score-hero h2 { margin: 0; font-size: 22px; }
.score-hero p { margin: 5px 0 0; color: rgba(255,255,255,.66); font-size: 12px; }
.score-circle { width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#60c6a2 var(--score, 0%), rgba(255,255,255,.12) 0); position: relative; }
.score-circle::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #123a31; }
.score-circle strong { position: relative; z-index: 1; font-size: 27px; }
.answer-review { padding: 20px; }
.answer-review + .answer-review { border-top: 1px solid var(--border); }
.answer-review-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.answer-review-head strong { font-size: 12.5px; }
.answer-review .question-copy { white-space: pre-wrap; font-size: 13px; line-height: 1.65; }
.answer-box { margin-top: 12px; padding: 12px; border-radius: 10px; background: var(--surface-soft); font-size: 12px; white-space: pre-wrap; }
.answer-box.correct { background: var(--success-soft); color: #0b6349; }
.answer-box.wrong { background: var(--danger-soft); color: #8e3030; }

/* Utilitas */
.text-muted { color: var(--muted) !important; }
.text-danger { color: var(--danger) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-primary { color: var(--primary) !important; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.fw-bold { font-weight: 780; }
.small { font-size: 11px; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 8px !important; }
.mt-2 { margin-top: 16px !important; }
.mt-3 { margin-top: 24px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 8px !important; }
.mb-2 { margin-bottom: 16px !important; }
.mb-3 { margin-bottom: 24px !important; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 8px; }
.gap-2 { gap: 16px; }
.w-100 { width: 100%; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .93em; padding: 2px 5px; border-radius: 5px; background: #edf2f0; }
.divider { height: 1px; background: var(--border); margin: 18px 0; }
.sticky-actions { position: sticky; bottom: 0; z-index: 20; padding: 13px 0; background: linear-gradient(to top, var(--bg) 75%, transparent); }

@media print {
    .sidebar, .topbar, .page-actions, .filter-bar, .btn, .no-print { display: none !important; }
    .main-area { margin-left: 0 !important; }
    .content-area { padding: 0 !important; max-width: none !important; }
    body { background: #fff; }
    .card, .score-hero { box-shadow: none; break-inside: avoid; }
    .score-hero { background: #fff !important; color: #111 !important; border: 1px solid #ddd; }
    .score-hero p { color: #555 !important; }
    .score-circle { background: #fff; border: 8px solid #ddd; }
    .score-circle::before { background: #fff; }
}

@media (max-width: 1180px) {
    .grid-5 { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .call-directory { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .exam-body { grid-template-columns: 1fr 260px; }
}

@media (max-width: 980px) {
    .sidebar { transform: translateX(-100%); transition: transform .22s ease; box-shadow: 18px 0 50px rgba(0,0,0,.18); }
    .sidebar.open { transform: translateX(0); }
    .sidebar-close, .menu-toggle { display: grid; place-items: center; }
    .sidebar-overlay { position: fixed; inset: 0; z-index: 45; background: rgba(10,24,20,.48); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
    .sidebar-overlay.show { opacity: 1; pointer-events: auto; }
    .main-area { margin-left: 0; }
    .topbar { padding: 0 20px; }
    .content-area { padding: 23px 20px 38px; }
    .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .hero { grid-template-columns: 1fr; padding-top: 45px; }
    .hero-visual { min-height: 420px; max-width: 650px; width: 100%; margin: 0 auto; }
    .auth-wrap { grid-template-columns: 1fr; max-width: 660px; }
    .auth-aside { min-height: auto; border-radius: 22px 22px 0 0; padding: 32px; }
    .auth-form { border-left: 1px solid var(--border); border-top: 0; border-radius: 0 0 22px 22px; padding: 36px; }
    .exam-body { grid-template-columns: 1fr; }
    .exam-sidebar { order: -1; }
    .exam-sidebar .card { position: static; }
    .question-palette { grid-template-columns: repeat(10, 1fr); }
    .exam-participant-card, .palette-legend { display: none; }
    .chat-layout { grid-template-columns: 240px 1fr; }
}

@media (max-width: 720px) {
    .content-area { padding: 18px 14px 34px; }
    .topbar { height: 70px; padding: 0 14px; }
    .topbar h1 { font-size: 16px; }
    .topbar p, .user-chip > span:last-child { display: none; }
    .page-heading { flex-direction: column; align-items: stretch; }
    .page-actions { width: 100%; }
    .page-actions .btn { flex: 1; }
    .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
    .span-2, .span-3 { grid-column: auto; }
    .form-grid, .form-grid-3 { grid-template-columns: 1fr; }
    .form-group.full { grid-column: auto; }
    .filter-bar { align-items: stretch; }
    .filter-bar .form-group, .filter-bar .form-group.search { min-width: 100%; }
    .dashboard-welcome { align-items: flex-start; flex-direction: column; }
    .call-directory { grid-template-columns: 1fr; }
    .public-header { height: 68px; padding: 0 16px; }
    .public-header nav > a:not(.btn) { display: none; }
    .public-header .brand small { display: none; }
    .hero { padding: 42px 17px 34px; gap: 28px; }
    .hero h1 { font-size: 41px; }
    .hero p { font-size: 14px; }
    .hero-actions .btn { flex: 1; }
    .hero-visual { min-height: 365px; }
    .hero-panel { inset: 10px 0 0 10px; padding: 16px; border-radius: 22px; }
    .hero-screen { min-height: 285px; }
    .floating-tag { bottom: 10px; }
    .features-section { padding: 34px 17px 55px; }
    .public-footer { padding: 20px 17px; align-items: flex-start; flex-direction: column; gap: 12px; }
    .auth-wrap { margin: 5px auto; padding: 12px; }
    .auth-aside { display: none; }
    .auth-form { border: 1px solid var(--border); border-radius: 20px; padding: 28px 20px; }
    .exam-header { padding: 10px 12px; flex-wrap: wrap; }
    .exam-header-title { max-width: 52%; }
    .exam-header-title img { width: 36px; height: 36px; }
    .exam-header-center { margin-left: auto; }
    .save-status { display: none; }
    .exam-body { padding: 10px; gap: 10px; }
    .question-card { min-height: calc(100vh - 160px); padding: 17px; }
    .question-palette { grid-template-columns: repeat(7, 1fr); }
    .question-text { font-size: 14px; padding-top: 19px; }
    .option-item { padding: 11px; }
    .question-footer { flex-wrap: wrap; }
    .question-footer .btn { flex: 1; }
    .local-video { width: 31vw; min-width: 110px; right: 10px; bottom: 10px; }
    .video-stage { height: calc(100vh - 180px); width: calc(100% - 20px); border-radius: 15px; }
    .call-topbar { padding: 13px; }
    .call-controls { padding: 13px 10px 20px; }
    .chat-layout { grid-template-columns: 1fr; min-height: 700px; }
    .chat-contacts { border-right: 0; border-bottom: 1px solid var(--border); max-height: 220px; }
    .chat-contact-list { max-height: 160px; }
    .chat-bubble { max-width: 88%; }
    .score-hero { flex-direction: column; align-items: flex-start; }
}