/* Hero notices 2.16: bell, list panel and announcement popup. Uses the .hh tokens (home.css, dark.css). */
.hh .hh-bell{position:relative;display:grid;place-items:center;width:42px;height:42px;flex-shrink:0;border-radius:50%;color:var(--slate);background:rgba(20,20,20,.05);box-shadow:inset 0 0 0 1px var(--ring);transition:background-color .3s var(--ease),color .3s var(--ease),transform .45s var(--fluid)}
.hh .hh-bell:hover{color:var(--ink);background:rgba(20,20,20,.09)}
.hh .hh-bell:active{transform:scale(.92)}
.hh .hh-bell .ic{width:19px;height:19px}
.hh .hh-bell[aria-expanded="true"]{color:var(--ink);background:rgba(20,20,20,.1)}
.hh .hh-badge{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--red);color:#fff;font:700 10.5px/18px var(--f-body);text-align:center;box-shadow:0 0 0 2px var(--paper)}
.hh .hh-bell.ring .ic{animation:hn-ring .9s var(--ease) 1}
@keyframes hn-ring{0%,100%{transform:none}15%{transform:rotate(14deg)}30%{transform:rotate(-12deg)}45%{transform:rotate(8deg)}60%{transform:rotate(-4deg)}}
/* phones: the bell sits with the mode switch on the right, not next to the logo */
@media (max-width:860px){.hh .hh-island .hh-bell{margin-inline-start:auto}.hh .hh-island .hh-bell ~ .hh-mode{margin-inline-start:6px}}
html[data-theme="dark"] .hh .hh-bell{background:rgba(255,255,255,.06)}
html[data-theme="dark"] .hh .hh-bell:hover,html[data-theme="dark"] .hh .hh-bell[aria-expanded="true"]{background:rgba(255,255,255,.11)}

/* list panel */
.hh .hn-panel{position:fixed;z-index:9995;display:flex;flex-direction:column;max-height:min(72vh,560px);border-radius:24px;overflow:hidden;color:var(--ink);background:var(--sheet);border:1px solid var(--rule);box-shadow:0 1px 2px rgba(20,20,20,.06),0 30px 60px -28px rgba(20,20,20,.45);animation:hn-in .22s var(--ease) both;font:400 15px/1.5 var(--f-body)}
.hh .hn-panel.out{animation:hn-out .18s var(--ease) both}
@keyframes hn-in{from{opacity:0;transform:translateY(-6px) scale(.98)}}
@keyframes hn-out{to{opacity:0;transform:translateY(-6px) scale(.98)}}
.hh .hn-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 14px 12px 20px;border-bottom:1px solid var(--rule)}
.hh .hn-head b{font:800 17px/1.2 var(--f-display);letter-spacing:-.01em}
.hh .hn-x{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--slate)}
.hh .hn-x:hover{color:var(--ink);background:rgba(20,20,20,.06)}
.hh .hn-x .ic{width:16px;height:16px}
.hh .hn-body{overflow-y:auto;overscroll-behavior:contain}
.hh .hn-list{list-style:none;margin:0;padding:0}
.hh .hn-list li+li{border-top:1px solid var(--rule)}
.hh .hn-item{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;padding:14px 34px 14px 18px;color:var(--ink);transition:background-color .2s var(--ease)}
.hh a.hn-item:hover{background:var(--red-wash)}
.hh .hn-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.hh .hn-tx b{font:700 14.5px/1.35 var(--f-body)}
.hh .hn-tx span{font-size:13.5px;line-height:1.45;color:var(--slate);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hh .hn-tx small{margin-top:3px;font:500 11.5px var(--f-mono);color:var(--muted)}
.hh .hn-dot{position:absolute;top:20px;right:16px;width:8px;height:8px;border-radius:50%;background:var(--red)}
.hh .hn-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:var(--red);background:var(--red-wash)}
.hh .hn-ic .ic{width:19px;height:19px}
.hh .hn-ic.k-topup{color:var(--ok);background:rgba(11,138,95,.1)}
.hh .hn-ic.k-system{color:var(--slate);background:rgba(20,20,20,.06)}
.hh .hn-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:34px 24px 38px;text-align:center}
.hh .hn-empty b{margin-top:6px;font:700 15px var(--f-body)}
.hh .hn-empty span:last-child{max-width:28ch;font-size:13.5px;color:var(--slate)}

/* popup card */
.hh .hn-modal{position:fixed;inset:0;z-index:99990;display:grid;place-items:center;padding:20px;background:rgba(14,15,17,.42);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:hn-fade .25s var(--ease) both}
.hh .hn-modal.out{animation:hn-fade-out .2s var(--ease) both}
@keyframes hn-fade{from{opacity:0}}
@keyframes hn-fade-out{to{opacity:0}}
.hh .hn-card{width:min(100%,440px);display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:26px;border-radius:28px;color:var(--ink);background:var(--sheet);border:1px solid var(--rule);box-shadow:0 40px 80px -30px rgba(0,0,0,.55);animation:hn-up .38s var(--spring) both}
@keyframes hn-up{from{opacity:0;transform:translateY(16px) scale(.97)}}
.hh .hn-ic.big{width:48px;height:48px;border-radius:16px}
.hh .hn-ic.big .ic{width:24px;height:24px}
.hh .hn-card h2{margin:6px 0 0;font:800 clamp(1.35rem,4.5vw,1.65rem)/1.15 var(--f-display);letter-spacing:-.02em;text-wrap:balance}
.hh .hn-card p{color:var(--slate);font-size:15.5px;line-height:1.55}
.hh .hn-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
@media (max-width:600px){.hh .hn-acts{width:100%}.hh .hn-acts .hh-btn{flex:1 1 auto;justify-content:center}}
@media (prefers-reduced-motion:reduce){.hh .hn-panel,.hh .hn-modal,.hh .hn-card,.hh .hh-bell.ring .ic{animation:none!important}}