/* =================================================================
 * Passlord — Notification center (Lot 2)
 * Charte 2026 — aligné sur passlord_responsive.css.
 * Mode sombre via body.dark .* (cohérent avec le projet).
 * =================================================================
 */

/* ---------- Anchor + dropdown panel ---------------------------- */
.passlord-notif-anchor {
    position: relative;
    display: inline-flex;
}

.passlord-notif-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: -8px;
    z-index: 80;
    width: 420px;
    max-width: calc(100vw - 24px);
    background: #ffffff;
    border: 1px solid #e8e2d0;
    border-radius: 18px;
    box-shadow: 0 24px 60px -16px rgba(15, 37, 66, 0.28),
                0 2px 6px rgba(15, 37, 66, 0.06);
    overflow: hidden;
    color: #0f2542;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    animation: passlordNotifIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.passlord-notif-panel[hidden] { display: none; }

@keyframes passlordNotifIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

.passlord-notif-panel::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 22px;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-left: 1px solid #e8e2d0;
    border-top: 1px solid #e8e2d0;
    transform: rotate(45deg);
}

/* ---------- Head / title / actions ----------------------------- */
.passlord-notif-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 16px 18px 10px;
    border-bottom: 1px solid #efead9;
    position: relative;
}

.passlord-notif-panel__title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.passlord-notif-panel__title-text {
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.01em;
}

.passlord-notif-panel__badge {
    background: #ffcb05;
    color: #0f2542;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 999px;
}
.passlord-notif-panel__badge[hidden] { display: none; }

.passlord-notif-panel__actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

.passlord-notif-panel__icon-btn {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #4a5a75;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    padding: 0;
}
.passlord-notif-panel__icon-btn:hover {
    background: #faf7ee;
    color: #0f2542;
}
.passlord-notif-panel__icon-btn svg {
    width: 16px;
    height: 16px;
}

/* ---------- Tabs ----------------------------------------------- */
.passlord-notif-panel__tabs {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
    border-bottom: 1px solid #efead9;
    overflow-x: auto;
    scrollbar-width: none;
}
.passlord-notif-panel__tabs::-webkit-scrollbar { display: none; }

.passlord-notif-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-weight: 600;
    font-size: 13px;
    color: #4a5a75;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
}
.passlord-notif-tab:hover { background: #faf7ee; }
.passlord-notif-tab.is-on { background: #0f2542; color: #faf7ee; }

.passlord-notif-tab__count {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 10.5px;
    font-weight: 700;
    color: #4a5a75;
    background: rgba(15, 37, 66, 0.08);
    padding: 1px 6px;
    border-radius: 999px;
}
.passlord-notif-tab.is-on .passlord-notif-tab__count {
    background: #ffcb05;
    color: #0f2542;
}

/* ---------- List ----------------------------------------------- */
.passlord-notif-panel__body {
    max-height: 500px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #b6bfce transparent;
}

.passlord-notif-panel__loading,
.passlord-notif-panel__empty {
    padding: 40px 20px;
    text-align: center;
    color: #8593ab;
    font-size: 13px;
}
.passlord-notif-panel__loading[hidden],
.passlord-notif-panel__empty[hidden] { display: none; }

.passlord-notif-panel__empty-ill {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #fff7d6;
    border: 2px dashed #ffb800;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    color: #0f2542;
}
.passlord-notif-panel__empty-ill svg { width: 36px; height: 36px; }
.passlord-notif-panel__empty h4 {
    font-size: 16px;
    margin: 0 0 4px;
    letter-spacing: -0.01em;
    color: #0f2542;
}
.passlord-notif-panel__empty p {
    color: #4a5a75;
    font-size: 13px;
    max-width: 260px;
    margin: 0 auto;
}

.passlord-notif-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.passlord-notif-item {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 12px;
    align-items: start;
    padding: 12px 18px;
    border-bottom: 1px solid #efead9;
    cursor: pointer;
    transition: background 0.12s;
}
.passlord-notif-item:last-child { border-bottom: 0; }
.passlord-notif-item:hover { background: #faf7ee; }
.passlord-notif-item.is-unread {
    background: rgba(37, 99, 235, 0.05);
    position: relative;
}
.passlord-notif-item.is-unread:hover { background: rgba(37, 99, 235, 0.09); }
.passlord-notif-item.is-unread::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}

.passlord-notif-item__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1f3a6e, #14224a);
    color: #ffffff;
    font-weight: 800;
    font-size: 14px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.passlord-notif-item__avatar--c0 { background: linear-gradient(135deg, #ff7a6b, #d9395a); }
.passlord-notif-item__avatar--c1 { background: linear-gradient(135deg, #56c7ff, #1f86e0); }
.passlord-notif-item__avatar--c2 { background: linear-gradient(135deg, #3ecf8e, #0b6b46); }
.passlord-notif-item__avatar--c3 { background: linear-gradient(135deg, #a78bfa, #6d28d9); }
.passlord-notif-item__avatar--c4 { background: linear-gradient(135deg, #ffcb05, #ff9d00); color: #0f2542; }

.passlord-notif-item__body {
    min-width: 0;
}

.passlord-notif-item__txt {
    font-size: 13.5px;
    line-height: 1.4;
    color: #4a5a75;
    word-wrap: break-word;
}
.passlord-notif-item__txt b { color: #0f2542; font-weight: 700; }
.passlord-notif-item__ref { color: #1f3a6e; font-weight: 600; }

.passlord-notif-item__when {
    margin-top: 5px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    color: #8593ab;
}

/* ---------- Foot ---------------------------------------------- */
.passlord-notif-panel__foot {
    padding: 11px 16px;
    border-top: 1px solid #efead9;
    background: #faf7ee;
    text-align: center;
}
.passlord-notif-panel__foot a {
    color: #1f3a6e;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}
.passlord-notif-panel__foot a:hover { color: #0f2542; }

/* =================================================================
 * Page complète /services/passlord/notifications.php
 * ================================================================= */
.passlord-notif-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 16px 60px;
}

.passlord-notif-page__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.passlord-notif-page__head h1 {
    margin: 0;
    font-size: 36px;
    letter-spacing: -0.03em;
    color: #0f2542;
}
.passlord-notif-page__head p {
    color: #4a5a75;
    margin: 8px 0 0;
    font-size: 15px;
}

.passlord-notif-page__actions {
    display: flex;
    gap: 8px;
}

.passlord-notif-page__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid #e8e2d0;
    background: #ffffff;
    color: #0f2542;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
}
.passlord-notif-page__btn:hover { background: #faf7ee; }
.passlord-notif-page__btn--primary { background: #0f2542; color: #faf7ee; border-color: #0f2542; }
.passlord-notif-page__btn--primary:hover { background: #1f3a6e; }
.passlord-notif-page__btn svg { width: 14px; height: 14px; }

.passlord-notif-page__filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}
.passlord-notif-page__filter {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 12px;
    border: 0;
    background: transparent;
    font-weight: 600;
    font-size: 14px;
    color: #4a5a75;
    cursor: pointer;
    font-family: inherit;
}
.passlord-notif-page__filter:hover { background: #faf7ee; }
.passlord-notif-page__filter.is-on { background: #0f2542; color: #faf7ee; }
.passlord-notif-page__filter .ct {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    color: #4a5a75;
    background: rgba(15, 37, 66, 0.08);
    padding: 1px 7px;
    border-radius: 999px;
}
.passlord-notif-page__filter.is-on .ct { color: #0f2542; background: #ffcb05; }

.passlord-notif-page__list-card {
    background: #ffffff;
    border: 1px solid #e8e2d0;
    border-radius: 18px;
    overflow: hidden;
}
.passlord-notif-page__list-card .passlord-notif-list { padding: 0; }
.passlord-notif-page__list-card .passlord-notif-item { padding: 16px 22px; }

.passlord-notif-page__loading {
    padding: 56px 24px;
    text-align: center;
    color: #8593ab;
    font-size: 13.5px;
}
.passlord-notif-page__loading[hidden] { display: none; }

.passlord-notif-page__empty {
    padding: 64px 28px 56px;
    text-align: center;
}
.passlord-notif-page__empty[hidden] { display: none; }
.passlord-notif-page__empty-ill {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: #fff7d6;
    border: 2px dashed #ffb800;
    display: grid;
    place-items: center;
    margin: 0 auto 22px;
    color: #0f2542;
}
.passlord-notif-page__empty-ill svg { width: 48px; height: 48px; }
.passlord-notif-page__empty h4 {
    font-size: 22px;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
    color: #0f2542;
    font-weight: 700;
}
.passlord-notif-page__empty p {
    color: #4a5a75;
    font-size: 14px;
    line-height: 1.55;
    max-width: 360px;
    margin: 0 auto;
}

/* =================================================================
 * Page préférences /services/passlord/notifications/preferences.php
 * ================================================================= */
.passlord-prefs {
    background: #ffffff;
    border: 1px solid #e8e2d0;
    border-radius: 18px;
    overflow: hidden;
}

.passlord-prefs__master {
    padding: 18px 24px;
    background: rgba(255, 203, 5, 0.14);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid #efead9;
    flex-wrap: wrap;
}
.passlord-prefs__master h4 {
    margin: 0;
    font-size: 16px;
    color: #0f2542;
}
.passlord-prefs__master p {
    margin: 4px 0 0;
    color: #4a5a75;
    font-size: 13.5px;
}

.passlord-prefs__matrix-head {
    display: grid;
    grid-template-columns: 1fr 80px 80px 80px;
    gap: 12px;
    padding: 14px 24px;
    border-bottom: 1px solid #efead9;
    background: #faf7ee;
}
.passlord-prefs__matrix-head .ch {
    text-align: center;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8593ab;
}
.passlord-prefs__matrix-head .ch svg {
    display: block;
    margin: 0 auto 4px;
    width: 18px;
    height: 18px;
    color: #4a5a75;
}

.passlord-prefs__cat {
    border-bottom: 1px solid #efead9;
}
.passlord-prefs__cat:last-of-type { border-bottom: 0; }
.passlord-prefs__cat h4 {
    padding: 16px 24px 4px;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8593ab;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.passlord-prefs__row {
    display: grid;
    grid-template-columns: 1fr 80px 80px 80px;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
}
.passlord-prefs__row:hover { background: rgba(255, 203, 5, 0.04); }
.passlord-prefs__row .info {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}
.passlord-prefs__row .info .ttl {
    font-weight: 600;
    font-size: 14.5px;
    color: #0f2542;
}
.passlord-prefs__row .info .desc {
    color: #8593ab;
    font-size: 12.5px;
    margin-top: 2px;
}
.passlord-prefs__row .chcell {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.passlord-prefs__row .chcell--coming::after {
    content: "BIENTÔT";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #8593ab;
}

/* Toggle switch */
.passlord-prefs__toggle {
    appearance: none;
    -webkit-appearance: none;
    width: 44px;
    height: 26px;
    border-radius: 999px;
    background: #b6bfce;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    margin: 0;
    border: 0;
}
.passlord-prefs__toggle::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.passlord-prefs__toggle:checked { background: #16a34a; }
.passlord-prefs__toggle:checked::before { transform: translateX(18px); }
.passlord-prefs__toggle:disabled { opacity: 0.4; cursor: not-allowed; }
.passlord-prefs__toggle.passlord-prefs__toggle--big { width: 52px; height: 30px; }
.passlord-prefs__toggle.passlord-prefs__toggle--big::before { width: 24px; height: 24px; top: 3px; left: 3px; }
.passlord-prefs__toggle.passlord-prefs__toggle--big:checked::before { transform: translateX(22px); }

.passlord-prefs__freq {
    padding: 18px 24px;
    border-top: 1px solid #efead9;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}
.passlord-prefs__freq-copy h5 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
}
.passlord-prefs__freq-copy p {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: #8593ab;
}

.passlord-prefs__seg {
    display: inline-flex;
    gap: 0;
    background: #faf7ee;
    border: 1px solid #e8e2d0;
    border-radius: 999px;
    padding: 3px;
    flex-wrap: wrap;
}
.passlord-prefs__seg button {
    border: 0;
    background: transparent;
    padding: 7px 14px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 12.5px;
    color: #4a5a75;
    cursor: pointer;
    font-family: inherit;
}
.passlord-prefs__seg button.is-on { background: #0f2542; color: #faf7ee; }

.passlord-prefs__quiet {
    padding: 22px 24px;
    background: #14224a;
    color: #faf7ee;
    border-top: 1px solid #efead9;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}
.passlord-prefs__quiet h5 {
    margin: 0;
    font-size: 16px;
    color: #faf7ee;
}
.passlord-prefs__quiet p {
    color: rgba(250, 247, 238, 0.75);
    font-size: 13.5px;
    margin: 4px 0 0;
}
.passlord-prefs__quiet .time-inputs {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.passlord-prefs__quiet input[type="time"] {
    background: rgba(250, 247, 238, 0.14);
    border: 1px solid rgba(250, 247, 238, 0.28);
    color: #faf7ee;
    border-radius: 8px;
    padding: 7px 12px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 700;
}

.passlord-prefs__savebar {
    padding: 16px 24px;
    border-top: 1px solid #efead9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.passlord-prefs__savebar .status {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: #8593ab;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.passlord-prefs__savebar .status .pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.25);
}

/* =================================================================
 * Friend requests widget (profile page, self-mode)
 * ================================================================= */
.pp-friend-requests {
    background: #ffffff;
    border: 1px solid #e8e2d0;
    border-radius: 18px;
    padding: 20px 24px;
    margin: 24px 0;
}
.pp-friend-requests[hidden] { display: none; }

.pp-friend-requests__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.pp-friend-requests__head h3 {
    margin: 0;
    font-size: 16px;
    color: #0f2542;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.01em;
}
.pp-friend-requests__count {
    background: #ffcb05;
    color: #0f2542;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.04em;
}
.pp-friend-requests__head p {
    margin: 0;
    color: #4a5a75;
    font-size: 13px;
}

.pp-friend-requests__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pp-friend-request-item {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    background: #faf7ee;
    border: 1px solid #efead9;
    border-radius: 12px;
}
.pp-friend-request-item__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1f3a6e, #14224a);
    color: #ffffff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 13px;
}
.pp-friend-request-item__name {
    font-weight: 600;
    color: #0f2542;
    font-size: 14px;
}
.pp-friend-request-item__when {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    color: #8593ab;
    margin-top: 2px;
}
.pp-friend-request-item__actions {
    display: flex;
    gap: 6px;
}
.pp-friend-request-btn {
    border: 0;
    padding: 7px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12.5px;
    cursor: pointer;
    font-family: inherit;
}
.pp-friend-request-btn--accept {
    background: #ffcb05;
    color: #0f2542;
    box-shadow: 0 2px 0 #ffb800;
}
.pp-friend-request-btn--accept:hover { transform: translateY(-1px); box-shadow: 0 3px 0 #ffb800; }
.pp-friend-request-btn--decline {
    background: #ffffff;
    color: #4a5a75;
    border: 1px solid #e8e2d0;
}
.pp-friend-request-btn--decline:hover { background: #faf7ee; }
.pp-friend-request-btn[disabled] { opacity: 0.5; cursor: progress; }

body.dark .pp-friend-requests {
    background: #121c36;
    border-color: #22304f;
}
body.dark .pp-friend-requests__head h3 { color: #f2eddc; }
body.dark .pp-friend-requests__head p { color: #bcc8de; }
body.dark .pp-friend-request-item {
    background: #0f1830;
    border-color: #1a2645;
}
body.dark .pp-friend-request-item__name { color: #f2eddc; }
body.dark .pp-friend-request-item__when { color: #8a99b5; }
body.dark .pp-friend-request-btn--decline { background: #121c36; color: #bcc8de; border-color: #22304f; }

/* =================================================================
 * Mode sombre — body.dark
 * ================================================================= */
body.dark .passlord-notif-panel {
    background: #121c36;
    border-color: #22304f;
    color: #f2eddc;
}
body.dark .passlord-notif-panel::before {
    background: #121c36;
    border-color: #22304f;
}
body.dark .passlord-notif-panel__head { border-bottom-color: #1a2645; }
body.dark .passlord-notif-panel__title-text { color: #f2eddc; }
body.dark .passlord-notif-panel__icon-btn { color: #bcc8de; }
body.dark .passlord-notif-panel__icon-btn:hover { background: #1a2645; color: #f2eddc; }
body.dark .passlord-notif-panel__tabs { border-bottom-color: #1a2645; }
body.dark .passlord-notif-tab { color: #bcc8de; }
body.dark .passlord-notif-tab:hover { background: #1a2645; }
body.dark .passlord-notif-tab.is-on { background: #f2eddc; color: #121c36; }
body.dark .passlord-notif-tab__count { background: rgba(242, 237, 220, 0.1); color: #bcc8de; }
body.dark .passlord-notif-item { border-bottom-color: #1a2645; }
body.dark .passlord-notif-item:hover { background: #1a2645; }
body.dark .passlord-notif-item.is-unread { background: rgba(37, 99, 235, 0.12); }
body.dark .passlord-notif-item__txt { color: #bcc8de; }
body.dark .passlord-notif-item__txt b { color: #f2eddc; }
body.dark .passlord-notif-panel__foot { background: #0f1830; border-top-color: #1a2645; }
body.dark .passlord-notif-panel__foot a { color: #93c5fd; }

body.dark .passlord-notif-page__head h1 { color: #f2eddc; }
body.dark .passlord-notif-page__head p { color: #bcc8de; }
body.dark .passlord-notif-page__btn { background: #121c36; color: #f2eddc; border-color: #22304f; }
body.dark .passlord-notif-page__btn:hover { background: #1a2645; }
body.dark .passlord-notif-page__btn--primary { background: #f2eddc; color: #0f1830; border-color: #f2eddc; }
body.dark .passlord-notif-page__filter { color: #bcc8de; }
body.dark .passlord-notif-page__filter:hover { background: #1a2645; }
body.dark .passlord-notif-page__filter.is-on { background: #f2eddc; color: #0f1830; }
body.dark .passlord-notif-page__list-card { background: #121c36; border-color: #22304f; }
body.dark .passlord-notif-page__loading { color: #8a99b5; }
body.dark .passlord-notif-page__empty h4 { color: #f2eddc; }
body.dark .passlord-notif-page__empty p { color: #bcc8de; }
body.dark .passlord-notif-page__empty-ill {
    background: rgba(255, 203, 5, 0.12);
    border-color: rgba(255, 184, 0, 0.65);
    color: #f2eddc;
}
body.dark .passlord-notif-panel__empty h4 { color: #f2eddc; }
body.dark .passlord-notif-panel__empty p { color: #bcc8de; }
body.dark .passlord-notif-panel__empty-ill {
    background: rgba(255, 203, 5, 0.12);
    border-color: rgba(255, 184, 0, 0.65);
    color: #f2eddc;
}

body.dark .passlord-prefs { background: #121c36; border-color: #22304f; }
body.dark .passlord-prefs__master { background: rgba(255, 203, 5, 0.10); }
body.dark .passlord-prefs__master h4,
body.dark .passlord-prefs__row .info .ttl,
body.dark .passlord-prefs__freq-copy h5 { color: #f2eddc; }
body.dark .passlord-prefs__row .info .desc,
body.dark .passlord-prefs__freq-copy p,
body.dark .passlord-prefs__cat h4 { color: #8a99b5; }
body.dark .passlord-prefs__row:hover { background: rgba(255, 203, 5, 0.06); }
body.dark .passlord-prefs__matrix-head { background: #0f1830; border-bottom-color: #1a2645; }
body.dark .passlord-prefs__cat { border-bottom-color: #1a2645; }
body.dark .passlord-prefs__seg { background: #0f1830; border-color: #22304f; }
body.dark .passlord-prefs__seg button { color: #bcc8de; }
body.dark .passlord-prefs__seg button.is-on { background: #f2eddc; color: #0f1830; }
body.dark .passlord-prefs__savebar { border-top-color: #1a2645; }

/* =================================================================
 * Responsive
 * ================================================================= */
@media (max-width: 600px) {
    .passlord-notif-panel {
        position: fixed;
        top: 70px;
        right: 8px;
        left: 8px;
        width: auto;
        max-width: none;
    }
    .passlord-notif-panel::before { display: none; }

    .passlord-prefs__matrix-head,
    .passlord-prefs__row {
        grid-template-columns: 1fr 60px 60px 60px;
        gap: 6px;
        padding: 14px 16px;
    }
}