/* Notifications V26: uses the same cards, reading layout, and variable palette as other tabs. */
.hm-notification-page,.hm-notification-detail{width:100%;max-width:1160px;margin-inline:auto}
.hm-notice-heading{gap:12px}.hm-notice-total{font-size:12px;font-weight:750;padding:8px 12px;border:1px solid var(--border,#e2e8f0);border-radius:9px;white-space:nowrap}
.hm-notice-list{background:var(--card-bg,var(--panel,#fff));border:1px solid var(--border,#e5eaf2);border-radius:15px;overflow:hidden;box-shadow:0 4px 18px rgba(9,31,61,.04)}
.hm-notice-item{padding:17px 20px;text-decoration:none;color:inherit;display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--border,#e8edf3);transition:background .16s ease}
.hm-notice-item:last-child{border-bottom:0}.hm-notice-item:hover{background:rgba(68,112,218,.055)}.hm-notice-item.is-unread{background:rgba(64,113,210,.045)}
.hm-notice-item-icon{flex:0 0 43px;width:43px;height:43px;display:grid;place-items:center;border-radius:12px}.hm-notice-general{background:rgba(68,95,210,.12);color:#5770d8}.hm-notice-login{background:rgba(241,148,34,.15);color:#dd8322}
.hm-notice-item-copy{display:flex;flex-direction:column;gap:7px;min-width:0;flex:1}.hm-notice-item-top{display:flex;gap:14px;align-items:baseline;justify-content:space-between}.hm-notice-item-top strong{font-size:14px;overflow-wrap:anywhere}.hm-notice-item-top small{font-size:11px;color:var(--text-muted,#8290a2);white-space:nowrap}.hm-notice-excerpt{font-size:12px;opacity:.75;overflow-wrap:anywhere}.hm-notice-item-foot{font-size:11px;color:var(--text-muted,#8091a1);display:flex;gap:10px;align-items:center}.hm-notice-new{font-size:10px;border-radius:7px;background:#2f65d9;color:#fff;padding:3px 7px;font-weight:750}.hm-notice-chevron{opacity:.4}.hm-notice-empty{padding:42px 20px;text-align:center;display:flex;justify-content:center;align-items:center;gap:9px}
.hm-notice-reading{max-width:100%;min-height:200px}.hm-notice-reading-meta{display:flex;gap:15px;align-items:center;color:var(--text-muted,#748398);font-size:12px;margin:6px 0 18px}.hm-notice-tag{font-size:11px;font-weight:800;letter-spacing:.05em;color:#4e6ed5;background:rgba(78,110,213,.11);padding:7px 10px;border-radius:7px}.hm-notice-article-text{line-height:1.9;white-space:normal;overflow-wrap:anywhere;font-size:14px}
.hm-notice-device-info{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:23px 0}.hm-notice-device-info>div{border:1px solid var(--border,#e5eaf2);background:rgba(116,131,161,.055);border-radius:10px;padding:13px}.hm-notice-device-info dt{font-size:11px;opacity:.65;margin-bottom:8px}.hm-notice-device-info dd{font-size:13px;font-weight:650;margin:0;overflow-wrap:anywhere}.hm-notice-security-note{border-radius:10px;background:rgba(241,148,34,.09);padding:14px;display:flex;gap:9px;align-items:center;line-height:1.7;font-size:12px;margin:14px 0}.hm-notice-security-note .site-icon{flex:0 0 20px}.hm-notice-action{display:inline-flex;align-items:center;gap:8px;min-height:38px;margin-top:10px}
html[data-hm-theme="dark"] .hm-notice-list{background:#192537}html[data-hm-theme="dark"] .hm-notice-item.is-unread{background:rgba(80,131,235,.09)}
@media(max-width:640px){.hm-notice-item{padding:14px 11px;gap:10px}.hm-notice-item-icon{width:35px;height:35px;flex-basis:35px;border-radius:9px}.hm-notice-item-top{flex-wrap:wrap;gap:4px}.hm-notice-item-top strong{font-size:12px}.hm-notice-device-info{grid-template-columns:1fr}.hm-notice-total{display:none}}

/* V32 - compact Facebook-like notification typography. Only the detailed notice uses a page. */
body.hm-body .hm-notice-toolbar-wrap{position:relative}
.hm-notification-popover[hidden]{display:none!important}
.hm-notification-popover{box-sizing:border-box;position:fixed;z-index:10010;display:flex;flex-direction:column;width:min(360px,calc(100vw - 24px));max-width:calc(100vw - 24px);overflow:hidden;background:var(--card-bg,#fff);color:var(--text,#111827);border:1px solid rgba(0,0,0,.08);border-radius:18px;box-shadow:0 12px 28px rgba(0,0,0,.2),0 2px 4px rgba(0,0,0,.1);font-family:var(--hm-facebook-font,inherit);text-align:left}
.hm-notification-popover-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:13px 16px 5px}
.hm-notification-popover-head h2{font-size:18px;font-weight:700;line-height:1.15;margin:0;letter-spacing:-.03em;color:inherit}
.hm-notification-popover-close{display:grid;place-items:center;width:36px;height:36px;min-width:36px;padding:0;cursor:pointer;color:inherit;background:#e4e6eb;border:0;border-radius:50%}
.hm-notification-popover-close:hover{background:#d8dadf}
.hm-notification-popover-tabs{display:flex;align-items:center;gap:8px;padding:4px 16px 10px;flex:none}
.hm-notification-popover-tabs button{border:0;border-radius:999px;background:transparent;color:inherit;min-height:32px;padding:5px 12px;font-size:13px;font-weight:600;cursor:pointer}
.hm-notification-popover-tabs button.is-active{background:#e7f3ff;color:#1877f2}
.hm-notification-popover-tabs button:hover:not(.is-active){background:#f0f2f5}
.hm-notification-popover-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px 6px}
.hm-notification-popover-section-head h3{margin:0;font-size:16px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.hm-notification-popover-section-head a{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 10px;border-radius:8px;text-decoration:none;color:#1877f2;font-size:13px;font-weight:500}
.hm-notification-popover-section-head a:hover{background:#f0f2f5}
.hm-notification-popover-feed{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;min-height:110px;flex:1;padding:0 8px 10px;scrollbar-width:thin}
.hm-notification-popover-feed-inner{display:flex;flex-direction:column;gap:1px}
.hm-bell-item{display:grid;grid-template-columns:54px minmax(0,1fr) 12px;align-items:center;gap:10px;position:relative;min-height:64px;padding:7px 8px;border-radius:12px;text-decoration:none;color:inherit;transition:background .13s ease}
.hm-bell-item:hover,.hm-bell-item:focus-visible{background:#f2f2f2;text-decoration:none}
.hm-bell-avatar-wrap{position:relative;display:block;width:54px;height:54px;flex:0 0 54px}
.hm-bell-avatar{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;overflow:hidden;background:linear-gradient(145deg,#dfe9f7,#bacde8);color:#285192;font-size:18px;font-weight:700;text-transform:uppercase;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.hm-bell-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.hm-bell-badge{position:absolute;right:-2px;bottom:-2px;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:3px solid var(--card-bg,#fff);box-shadow:0 1px 2px rgba(0,0,0,.18)}
.hm-bell-badge svg{width:12px;height:12px}
.hm-bell-badge.is-general{background:#1877f2;color:#fff}
.hm-bell-badge.is-security{background:#65676b;color:#fff}
.hm-bell-item-body{display:flex;flex-direction:column;min-width:0;gap:3px;align-self:stretch;justify-content:center}
.hm-bell-item-line{display:block;font-size:13px;line-height:1.3;color:inherit;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.hm-bell-item-title{font-weight:700}
.hm-bell-item-excerpt{font-weight:400}
.hm-bell-item-time{font-size:11px;color:#1877f2;font-weight:600}
.hm-bell-item-unread{display:block;justify-self:end;align-self:center;flex:0 0 10px;width:10px;height:10px;border-radius:50%;background:#1877f2}
.hm-bell-feedback{display:flex;min-height:140px;padding:19px 16px;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#65676b;text-align:center;font-size:13px}
.hm-bell-feedback p{margin:0}.hm-bell-feedback svg{opacity:.7}
.hm-notification-popover-foot{border-top:0;padding:6px 16px 14px;text-align:center;flex:none}
.hm-notification-popover-foot a{display:flex;align-items:center;justify-content:center;text-decoration:none;color:#050505;background:#e4e6eb;font-size:14px;font-weight:600;min-height:38px;padding:0 14px;border-radius:10px}
.hm-notification-popover-foot a .site-icon{display:none}
.hm-notification-popover-foot a:hover{background:#d8dadf}
.hm-notification-popover :is(a,button):focus-visible{outline:2px solid #3473e8;outline-offset:2px}
html[data-hm-theme="dark"] .hm-notification-popover{background:#242526;border-color:#3a3b3c;color:#e4e6eb;box-shadow:0 12px 28px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.38)}
html[data-hm-theme="dark"] .hm-notification-popover-close{background:#3a3b3c}
html[data-hm-theme="dark"] .hm-notification-popover-close:hover{background:#4e4f50}
html[data-hm-theme="dark"] .hm-notification-popover-tabs button.is-active{background:rgba(24,119,242,.24);color:#8cbcff}
html[data-hm-theme="dark"] .hm-notification-popover-tabs button:hover:not(.is-active),html[data-hm-theme="dark"] .hm-notification-popover-section-head a:hover,html[data-hm-theme="dark"] .hm-bell-item:hover,html[data-hm-theme="dark"] .hm-bell-item:focus-visible{background:#3a3b3c}
html[data-hm-theme="dark"] .hm-bell-item-time{color:#8cbcff}
html[data-hm-theme="dark"] .hm-bell-item-unread{background:#4e9cff}
html[data-hm-theme="dark"] .hm-bell-feedback{color:#b0b3b8}
html[data-hm-theme="dark"] .hm-bell-badge{border-color:#242526}
html[data-hm-theme="dark"] .hm-notification-popover-foot a{background:#3a3b3c;color:#e4e6eb}
html[data-hm-theme="dark"] .hm-notification-popover-foot a:hover{background:#4e4f50}
@media(max-width:600px){.hm-notification-popover{border-radius:16px;width:min(100vw - 16px,360px)}.hm-notification-popover-head{padding:12px 14px 5px}.hm-notification-popover-head h2{font-size:17px}.hm-notification-popover-tabs{padding-inline:14px}.hm-notification-popover-section-head{padding-inline:14px}.hm-bell-item{grid-template-columns:50px minmax(0,1fr) 10px;gap:9px;padding:7px 6px}.hm-bell-avatar-wrap,.hm-bell-avatar{width:50px;height:50px;flex-basis:50px}.hm-bell-item-line{font-size:13px}.hm-notification-popover-foot{padding-inline:14px}}
@media(prefers-reduced-motion:reduce){.hm-bell-item{transition:none}}

/* V33: only the title inside the bell popover is reduced. */
body.hm-body #hm-notification-popover .hm-notification-popover-head > h2{font-size:18px!important;line-height:1.2!important}
@media(max-width:600px){body.hm-body #hm-notification-popover .hm-notification-popover-head > h2{font-size:17px!important}}