.cc-notifications {
    --cc-notice-bg: var(--surface, #111);
    --cc-notice-border: var(--border, #2a2a2a);
    --cc-notice-text: var(--text, #d9ddd9);
    --cc-notice-muted: var(--soft, var(--text-dim, #a4aba5));
    --cc-notice-radius: 8px;
    display: flex; flex-direction: column; gap: 6px;
    flex: 0 0 auto; align-self: stretch; min-width: 0; min-height: 0; height: auto;
    max-height: min(220px, 28vh); overflow: auto; overscroll-behavior: contain;
    margin: 0 0 14px; padding: 0; text-align: left; scrollbar-width: thin;
}
.cc-notifications[data-theme="stats"] { --cc-notice-radius: var(--radius-sm, 8px); --cc-notice-muted: var(--text-dim); }
.cc-notifications[data-theme="wbc"] { --cc-notice-radius: 10px; }
.cc-notifications[data-theme="gta"] {
    --cc-notice-bg: #101210; --cc-notice-border: #222622; --cc-notice-text: #d9ddd9;
    --cc-notice-muted: #9aa29b; --cc-notice-radius: 6px;
    font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}
body[data-active-tab="jobs"] .cc-notifications { --cc-notice-bg: #0f1310; --cc-notice-border: #303832; --cc-notice-text: #eef2ee; }
body[data-active-tab="map"] .cc-notifications { --cc-notice-bg: #111512; --cc-notice-border: #29302a; --cc-notice-text: #dce0dc; }
body[data-active-tab="love"] .cc-notifications { --cc-notice-border: #232723; --cc-notice-text: #dadeda; }
.cc-notifications[hidden], .cc-notifications [hidden] { display: none !important; }
.cc-notifications .cc-notice {
    --cc-notice-accent: #84aee8; --cc-notice-tint: rgba(132,174,232,.05);
    box-sizing: border-box; display: flex; flex: 0 0 auto; align-items: flex-start; gap: 9px;
    width: 100%; min-width: 0; min-height: 0; height: auto; margin: 0; padding: 10px 12px;
    border: 1px solid var(--cc-notice-border); border-left: 2px solid var(--cc-notice-accent);
    border-radius: var(--cc-notice-radius);
    background: linear-gradient(var(--cc-notice-tint), var(--cc-notice-tint)), var(--cc-notice-bg);
    color: var(--cc-notice-text); font: inherit; font-size: 12px; line-height: 1.5; box-shadow: none;
}
.cc-notifications .cc-notice-icon { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 2px; color: var(--cc-notice-accent); }
.cc-notifications .cc-notice-content { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.cc-notifications .cc-notice-title { display: block; margin: 0 0 2px; color: var(--cc-notice-text); font-size: 12px; font-weight: 650; line-height: 1.5; }
.cc-notifications .cc-notice-message { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; color: var(--cc-notice-muted); white-space: pre-wrap; font: inherit; }
.cc-notifications .cc-notice-message.is-expanded { display: block; -webkit-line-clamp: unset; }
.cc-notifications .cc-notice-more { display: block; width: auto; min-height: 0; height: auto; margin: 4px 0 0; padding: 0; border: 0; background: none; color: var(--cc-notice-text); font: inherit; font-size: 10px; line-height: 1.5; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transform: none; box-shadow: none; }
.cc-notifications .cc-notice-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cc-notifications .cc-notice-action {
    box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    width: auto; min-width: 0; min-height: 28px; margin: 0; padding: 5px 9px;
    border: 1px solid var(--cc-notice-border); border-color: color-mix(in srgb, var(--cc-notice-accent) 55%, var(--cc-notice-border));
    border-radius: 5px; background: transparent; background: color-mix(in srgb, var(--cc-notice-accent) 12%, transparent);
    color: var(--cc-notice-text); font: inherit; font-size: 11px; line-height: 1.25; text-decoration: none;
    overflow-wrap: anywhere; cursor: pointer; box-shadow: none; transform: none;
}
.cc-notifications .cc-notice-action svg { flex: 0 0 14px; width: 14px; height: 14px; color: var(--cc-notice-accent); }
.cc-notifications .cc-notice-action:hover { border-color: var(--cc-notice-accent); background: rgba(127,127,127,.08); background: color-mix(in srgb, var(--cc-notice-accent) 18%, transparent); color: var(--cc-notice-text); }
.cc-notifications .cc-notice-action:focus-visible { outline: 1px solid var(--cc-notice-text); outline-offset: 2px; }
.cc-notifications .cc-notice-close { flex: 0 0 26px; width: 26px; height: 26px; min-height: 26px; margin: -4px -6px -4px 0; padding: 0; display: grid; place-items: center; border: 0; border-radius: 4px; background: transparent; color: var(--cc-notice-muted); cursor: pointer; box-shadow: none; transform: none; }
.cc-notifications .cc-notice-close svg { width: 13px; height: 13px; }
.cc-notifications .cc-notice-close:hover { color: var(--cc-notice-text); background: rgba(127,127,127,.1); }
.cc-notifications button:focus-visible { outline: 1px solid var(--cc-notice-text); outline-offset: 2px; }
.cc-notifications[data-theme="gta"] .cc-notice, .cc-notifications[data-theme="gta"] .cc-notice-title { font-size: 11px; }
@media (max-width: 780px) {
    .cc-notifications { max-height: min(240px, 36vh); gap: 5px; }
    .cc-notifications .cc-notice { padding: 9px 10px; gap: 7px; }
    .cc-notifications .cc-notice-action { min-height: 34px; padding: 7px 10px; }
}
@media (max-width: 520px) {
    .cc-notifications .cc-notice { position: relative; }
    .cc-notifications .cc-notice-dismissible { padding-right: 38px; }
    .cc-notifications .cc-notice-icon { display: none; }
    .cc-notifications .cc-notice-close { position: absolute; top: 7px; right: 7px; margin: 0; }
    .cc-notifications .cc-notice-actions { display: grid; grid-template-columns: 1fr; }
    .cc-notifications .cc-notice-action { width: 100%; }
}