:root {
  --notification-green: #17362C;
  --notification-paper: #F3EEE5;
  --notification-gold: #A37E43;
}

.notification-mailbox-control { position:relative; display:inline-flex; align-items:center; }
.notification-mailbox-trigger { width:48px; height:48px; padding:0; display:inline-grid; place-items:center; border:1px solid rgba(163,126,67,.28); border-radius:16px; background:var(--notification-paper); cursor:pointer; }
.notification-mailbox-trigger img { width:38px; height:38px; object-fit:contain; }
.notification-mailbox-trigger:hover { border-color:var(--notification-gold); }
.notification-mailbox-trigger:focus-visible, .notification-close:focus-visible, .notification-item:focus-visible, .notification-view-all:focus-visible, .notifications-filters button:focus-visible, .notification-back:focus-visible, .notifications-load-more:focus-visible { outline:3px solid rgba(163,126,67,.35); outline-offset:3px; }
.notification-popover { position:fixed; z-index:240; top:50%; left:50%; right:auto; width:min(620px, calc(100vw - 40px)); max-height:min(720px, calc(100vh - 72px)); overflow:auto; transform:translate(-50%,-50%); border:1px solid rgba(163,126,67,.34); border-radius:24px; background:var(--notification-paper); color:var(--notification-green); box-shadow:0 28px 76px rgba(10,31,24,.34); }
.notification-popover-head { display:flex; align-items:start; justify-content:space-between; gap:16px; padding:18px 18px 14px; border-bottom:1px solid rgba(23,54,44,.12); }
.notification-popover-head span, .notifications-page-head p { display:block; color:var(--notification-gold); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.notification-popover-head strong { display:block; margin-top:3px; font-family:Georgia, serif; font-size:22px; }
.notification-close { width:34px; height:34px; border:0; background:transparent; color:var(--notification-green); font-size:26px; line-height:1; cursor:pointer; }
.notification-preview-list { max-height:390px; overflow:auto; }
.notification-popover-empty { margin:0; padding:24px 18px; color:rgba(23,54,44,.72); line-height:1.55; }
.notification-item { width:100%; display:grid; gap:5px; padding:15px 18px; border:0; border-bottom:1px solid rgba(23,54,44,.1); background:transparent; color:var(--notification-green); text-align:left; cursor:pointer; }
.notification-item:hover { background:rgba(163,126,67,.08); }
.notification-item.is-unread { background:rgba(163,126,67,.09); }
.notification-item-meta, .notification-detail-meta { display:flex; align-items:center; flex-wrap:wrap; gap:7px; color:rgba(23,54,44,.68); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.notification-priority { color:var(--notification-gold); }
.notification-item-title { font-family:Georgia, serif; font-size:17px; font-weight:700; line-height:1.25; }
.notification-item-body { color:rgba(23,54,44,.76); font-size:14px; line-height:1.55; }
.notification-item-date { color:rgba(23,54,44,.58); font-size:12px; }
.notification-view-all, .notification-back, .notifications-load-more { width:100%; padding:14px 18px; border:0; background:var(--notification-green); color:var(--notification-paper); font:inherit; font-weight:800; cursor:pointer; }
.notifications-page { max-width:980px; margin:0 auto; padding:16px 0 36px; color:var(--notification-green); }
.notifications-page-head { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:20px; padding:26px 28px; border:1px solid rgba(163,126,67,.25); border-radius:24px; background:var(--notification-paper); }
.notifications-page-head h1 { margin:3px 0 0; font-family:Georgia, serif; font-size:clamp(30px, 4vw, 44px); line-height:1; }
.notifications-filters { display:inline-flex; gap:4px; padding:4px; border:1px solid rgba(23,54,44,.15); border-radius:14px; background:rgba(255,255,255,.4); }
.notifications-filters button { border:0; border-radius:10px; padding:9px 12px; background:transparent; color:var(--notification-green); font:inherit; font-weight:800; cursor:pointer; }
.notifications-filters button.active { background:var(--notification-green); color:var(--notification-paper); }
.notifications-list { overflow:hidden; border:1px solid rgba(163,126,67,.25); border-radius:22px; background:var(--notification-paper); }
.notifications-list .notification-item { padding:19px 22px; }
.notifications-empty, .notifications-message { min-height:290px; display:grid; place-content:center; justify-items:center; padding:32px; border:1px solid rgba(163,126,67,.25); border-radius:22px; background:var(--notification-paper); text-align:center; }
.notifications-empty img { width:112px; height:112px; object-fit:contain; }
.notifications-empty h2 { margin:12px 0 6px; font-family:Georgia, serif; font-size:27px; }
.notifications-empty p, .notifications-message p { max-width:38ch; margin:0; color:rgba(23,54,44,.72); line-height:1.6; }
.notifications-message { gap:16px; }
.notifications-load-more { width:auto; min-width:190px; display:block; margin:18px auto 0; border-radius:14px; }
.notification-detail { padding:30px; border:1px solid rgba(163,126,67,.25); border-radius:24px; background:var(--notification-paper); }
.notification-back { width:auto; margin-bottom:28px; border-radius:12px; }
.notification-detail-meta time { margin-left:auto; font-weight:600; letter-spacing:0; text-transform:none; }
.notification-detail h1 { margin:16px 0 14px; font-family:Georgia, serif; font-size:clamp(30px, 5vw, 48px); line-height:1.08; }
.notification-detail > p { max-width:72ch; color:rgba(23,54,44,.84); font-size:17px; line-height:1.75; }
.notification-detail-actions { display:flex; align-items:center; gap:12px; margin-top:28px; }
.notification-delete{border:1px solid rgba(135,69,59,.45);border-radius:10px;background:transparent;color:#87453b;padding:9px 12px;font:inherit;font-weight:700;cursor:pointer}
.notifications-list,.notification-detail,.notification-popover,.notifications-page-head{box-shadow:0 12px 28px rgba(23,54,44,.07)}
.notification-item{border-color:rgba(163,126,67,.22)}
.notification-item-row{display:flex;border-bottom:1px solid rgba(23,54,44,.1)}
.notification-item-row .notification-item{flex:1;border:0}
.notification-delete-list{align-self:center;margin:10px;border:1px solid rgba(135,69,59,.38);border-radius:9px;background:transparent;color:#87453b;padding:7px 10px;font:inherit;font-weight:800;cursor:pointer}
.notification-read-label { color:rgba(23,54,44,.7); font-size:14px; font-weight:800; }
.settings-notifications-access { background:linear-gradient(135deg, rgba(255,255,255,.7), rgba(237,229,213,.76)); }
.settings-section-eyebrow { margin-bottom:5px; color:var(--notification-gold); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.settings-notifications-unread { color:var(--notification-gold); font-size:13px; font-weight:800; }

  .notifications-mobile-sheet { position:fixed; z-index:260; inset:0; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(10,25,20,.54); }
.notifications-mobile-sheet[hidden] { display:none; }
  .notifications-mobile-sheet-card { width:min(100%,520px); max-height:82vh; overflow:auto; border:1px solid rgba(163,126,67,.34); border-radius:24px; background:var(--notification-paper); box-shadow:0 24px 64px rgba(10,31,24,.3); }
.notifications-mobile-sheet-card .notification-popover-head { padding-top:22px; }

@media (max-width:760px) {
  #appRoot .notification-mailbox-control { position:absolute; z-index:72; top:78px; right:15px; }
  .notification-mailbox-trigger { width:58px; height:58px; border-radius:999px; }
  .notification-mailbox-trigger img { width:46px; height:46px; }
  .notification-popover { display:none; }
  .notifications-page { padding:6px 0 88px; }
  .notifications-page-head { display:block; padding:22px 18px; border-radius:20px; }
  .notifications-filters { margin-top:18px; }
  .notifications-list .notification-item { padding:17px; }
  .notification-detail { padding:21px 18px; border-radius:20px; }
  .notification-detail-meta time { width:100%; margin-left:0; }
}