.header-user,.reader-user { display: flex; align-items: center; gap: 12px; }
.axe-notifications { position: relative; display: inline-flex; align-items: center; flex: none; }
.axe-button { position: relative; padding: 4px 9px; border: 1px solid #a77b42; border-radius: 5px; color: #f4dbad; background: #342417; font: inherit; font-size: 1.5rem; line-height: 1.25; cursor: pointer; }
.axe-button:hover,.axe-button:focus-visible { outline: 2px solid #d7aa6a; outline-offset: 2px; }
.axe-count { position: absolute; top: -7px; right: -9px; min-width: 22px; height: 22px; padding: 1px 4px; border-radius: 12px; background: #b4743f; color: #160e08; border: 1px solid #f4d9a6; font: bold .75rem/18px Georgia,serif; text-align: center; }
.axe-count[hidden],.axe-panel[hidden] { display: none; }
.axe-panel { position: absolute; z-index: 1000; top: calc(100% + 12px); right: 0; width: min(360px,90vw); max-height: min(420px,70dvh); display: flex; flex-direction: column; border: 1px solid #936a3c; border-radius: 8px; background: #1b140f; box-shadow: 0 12px 35px #000b; color: #eddbc1; font: 1rem Georgia,serif; }
.axe-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; border-bottom: 1px solid #624729; }.axe-panel-head button { border: 0; background: none; color: #d9b983; cursor: pointer; font: inherit; font-size: .9rem; }.axe-panel-head button:hover { text-decoration: underline; }
.axe-list { overflow-y: auto; }.axe-item { display: block; padding: 12px 14px; border-bottom: 1px solid #493522; color: #d6c2a4; text-decoration: none; line-height: 1.35; }.axe-item.unread { background: #392716; color: #fff0d6; }.axe-item:hover { background: #4a321c; }.axe-item small { display: block; margin-top: 5px; color: #bba181; font-size: .8rem; }.axe-empty { padding: 16px; color: #bba181; }
@media(max-width:650px){.axe-panel { right: -35px; }.site-header { flex-wrap: wrap; }.site-header .header-user { margin-left: auto; }}

.axe-username { color: #dcc397; text-decoration: none; white-space: nowrap; }.axe-username:hover { text-decoration: underline; }

.axe-art { display: block; width: 34px; height: 34px; object-fit: contain; }
.axe-button { padding: 3px 7px; }