/* bell.css - W-0312 Studio header tasks and notifications. Uses each page's own colour tokens; no side borders. */
.kw-bell { position: relative; margin-left: auto; font: 400 15px/1.45 "Inter", system-ui, sans-serif; }
.kw-bell * { box-sizing: border-box; }
.kw-bell span, .kw-bell em { margin: 0; }
.kw-bell-btn { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line, #e3e8ee);
  background: var(--card, #fff); color: var(--ink, #1c2530); cursor: pointer; padding: 0; }
.kw-bell-btn:hover { background: var(--accent-soft, #f6e7ec); }
.kw-bell-btn:focus-visible, .kw-bell-item:focus-visible, .kw-bell-all:focus-visible { outline: 3px solid var(--accent, #a13b5c); outline-offset: 2px; }
.kw-bell-ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kw-bell-badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--accent, #a13b5c);
  color: #fff; font: 700 .72rem/20px "Inter", sans-serif; text-align: center; box-shadow: 0 0 0 2px var(--card, #fff); }
.kw-bell-badge[hidden] { display: none; }
.kw-bell-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; width: min(380px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow: auto;
  background: var(--card, #fff); color: var(--ink, #1c2530); border: 1px solid var(--line, #e3e8ee); border-radius: 14px; box-shadow: 0 12px 32px rgba(28, 37, 48, .16); }
.kw-bell-top { display: flex; align-items: center; gap: .5rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line, #e3e8ee); position: sticky; top: 0; background: inherit; }
.kw-bell-title { font: 700 1rem/1.2 "Montserrat", sans-serif; color: var(--ink, #1c2530); }
.kw-bell-demo { font: 600 .7rem/1 "Inter", sans-serif; font-style: normal; text-transform: uppercase; letter-spacing: .06em; padding: .25rem .45rem; border-radius: 6px;
  background: var(--accent-soft, #f6e7ec); color: var(--accent-ink, #7d2d47); }
.kw-bell-all { margin-left: auto; background: none; border: 0; color: var(--accent-ink, #7d2d47); font: 600 .85rem/1 "Inter", sans-serif; cursor: pointer; padding: .4rem; }
.kw-bell-all[disabled] { color: var(--muted, #5b6b7b); cursor: default; }
.kw-bell-sec { padding: .4rem 0 .6rem; }
.kw-bell-h { margin: .5rem 1rem .3rem; font: 600 .74rem/1 "Inter", sans-serif; text-transform: uppercase; letter-spacing: .07em; color: var(--muted, #5b6b7b); }
.kw-bell-empty { margin: .2rem 1rem .4rem; color: var(--muted, #5b6b7b); font-size: .9rem; }
.kw-bell-list { list-style: none; margin: 0; padding: 0; }
.kw-bell-item { display: flex; align-items: flex-start; gap: .7rem; padding: .6rem 1rem; color: inherit; text-decoration: none; }
.kw-bell-item:hover { background: var(--band, #f6f8fa); }
.kw-bell-i { flex: none; width: 32px; height: 32px; padding: 6px; border-radius: 9px; background: var(--accent-soft, #f6e7ec); fill: none; stroke: var(--accent-ink, #7d2d47);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kw-i-stop { background: var(--stop-soft, #fdecea); stroke: var(--stop, #b42318); }
.kw-i-ok { background: var(--ok-soft, #e8f5ec); stroke: var(--ok, #0a7d33); }
.kw-bell-txt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.kw-bell-txt strong { font: 600 .92rem/1.3 "Inter", sans-serif; color: var(--ink, #1c2530); }
.kw-bell-txt small { font-size: .8rem; color: var(--muted, #5b6b7b); }
.kw-bell-item:not(.is-new) strong { font-weight: 500; }
.kw-bell-dot { flex: none; width: 9px; height: 9px; margin: .45rem 0 0 auto; border-radius: 50%; background: var(--accent, #a13b5c); }