.has-opinion-notifications > .header-right { margin-inline-start: auto; }
.opinion-notifications { position: relative; margin-inline-start: 16px; z-index: 20; }
.opinion-bell {
 position: relative;
 display: grid;
 place-items: center;
 width: 42px;
 height: 42px;
 border: 1px solid #cedace;
 border-radius: 50%;
 background: #fff;
 color: #234b3d;
 font-size: 18px;
}
.opinion-bell-count {
 position: absolute;
 top: -3px;
 right: -6px;
 min-width: 20px;
 min-height: 20px;
 padding: 2px 5px;
 border: 1px solid #fff;
 border-radius: 999px;
 background: #a12f2c;
 color: #fff;
 font-size: 12px;
 font-weight: 700;
 text-align: center;
 font-variant-numeric: tabular-nums;
}
.opinion-notification-panel {
 position: absolute;
 top: calc(100% + 8px);
 right: 0;
 width: min(22rem,calc(100vw - 32px));
 max-height: min(34rem,calc(100dvh - 70px));
 overflow: auto;
 padding: 14px;
 border: 1px solid #cddbcf;
 border-radius: 14px;
 background: #fff;
 color: var(--ink);
 box-shadow: 0 12px 32px #173e3030;
}
.opinion-notification-panel h2 { margin: 0 0 10px; font-size: 17px; }
.opinion-notification-status { margin: 0; font-size: 13px; color: #4d6252; }
.opinion-notification-status:not(:empty) { margin-bottom: 8px; }
.opinion-notification-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.opinion-notification-list button {
 display: grid;
 gap: 3px;
 width: 100%;
 min-width: 0;
 padding: 10px;
 border: 1px solid #e0e9df;
 border-radius: 8px;
 background: #f3f7f1;
 color: #234637;
 text-align: left;
 font-size: 13px;
 overflow-wrap: anywhere;
}
.opinion-notification-theme { font-weight: 600; }
.opinion-notification-preview { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.opinion-notification-list time { color: #516859; font-size: 11px; }
.opinion-notification-more { width: 100%; margin-top: 8px; }
#detail .opinion-detail { margin-top: 18px; }
#detail .opinion-detail h3 { margin: 0 0 8px; }
#detail [data-opinion-selected] { outline: 2px solid #507a64; outline-offset: 2px; }
@media (max-width: 760px) {
 main > header.has-opinion-notifications { display: contents; }
 main > header.has-opinion-notifications > span { display: none; }
 .opinion-notifications { position: absolute; top: 12px; right: 16px; margin: 0; }
}