body.light-theme {
    --malam: #f4f1ea;
    --panel: #fffdf8;
    --garis: #d8cec0;
    --teks: #292326;
    --muted: #6f6560;
    --aksen: #9b6b16;
    --oranye: #9b3342;
    background: var(--malam) !important;
    color: var(--teks) !important;
}
body.light-theme::before { opacity: .35; }
body.light-theme::after { opacity: .35; }
body.light-theme input,
body.light-theme textarea,
body.light-theme select { color: var(--teks); background: rgba(255, 255, 255, .75); }
body.light-theme .info-card,
body.light-theme .choice-card,
body.light-theme .statistik-box,
body.light-theme .statistik-tabel,
body.light-theme .panel,
body.light-theme .kotak,
body.light-theme .box,
body.light-theme .bagian,
body.light-theme .section,
body.light-theme .stat-box,
body.light-theme .login-box,
body.light-theme .password-box { background: var(--panel); color: var(--teks); }
.notifications { margin: 0 0 24px; padding: 20px; border: 1px solid var(--garis); background: var(--panel); color: var(--teks); }
.notifications-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.notifications-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.notifications-heading h2 { margin: 0 0 4px; font-size: 18px; }
.notifications-count { color: var(--muted); font-size: 12px; }
.notifications-read-all { width: auto; padding: 8px 12px; border: 1px solid var(--aksen); background: transparent; color: var(--aksen); font: inherit; font-size: 12px; cursor: pointer; }
.notifications-read-all:disabled { cursor: wait; opacity: .6; }
.notifications-push-toggle { width: auto; padding: 8px 12px; border: 1px solid var(--aksen); background: transparent; color: var(--aksen); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.notifications-push-toggle:hover:not(:disabled) { background: var(--aksen); color: var(--malam); }
.notifications-push-toggle:disabled { cursor: not-allowed; opacity: .65; }
.notifications-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.notifications-item { padding: 12px; border: 1px solid var(--garis); background: rgba(0, 0, 0, .08); }
.notifications-item.belum-dibaca { border-left: 3px solid var(--aksen); }
.notifications-item strong { display: block; font-size: 14px; }
.notifications-item p { margin: 5px 0; color: var(--muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.notifications-item time { color: var(--muted); font-size: 11px; }
.notifications-feedback { min-height: 0; margin: 8px 0 0; color: var(--aksen); font-size: 12px; }
.notifications-feedback:empty { display: none; }
.notifications-push-feedback { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.notifications-push-feedback:empty { display: none; }
.theme-toggle { position: fixed; z-index: 20; right: 18px; bottom: 18px; display: inline-flex; width: auto !important; max-width: max-content; align-items: center; justify-content: center; gap: 7px; padding: 9px 12px; border: 1px solid var(--aksen, #e8c982); background: var(--panel, #211b1d); color: var(--teks, #fff9f0); font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; box-shadow: 0 8px 20px rgba(0, 0, 0, .22); }
.theme-toggle__icon { display: block; width: 18px; height: 18px; object-fit: contain; }
.theme-toggle__label { display: inline-block; }
.theme-toggle:hover { filter: brightness(1.1); }
@media (max-width: 520px) { .notifications-heading { align-items: flex-start; flex-direction: column; } .notifications-actions { justify-content: flex-start; } .theme-toggle { right: 12px; bottom: 12px; font-size: 11px; } .theme-toggle__icon { width: 16px; height: 16px; } }