.parking-announcements {
    --color-ink: #102f5c;
    --color-muted: #536a80;
    --color-paper: #fff;
    --color-soft: #eef3f8;
    --color-line: #dce7f0;
    --color-accent: #a66b00;
    --color-shadow: #102f5c26;
    position: relative;
    margin-inline-start: auto;
    margin-inline-end: 16px;
    color: var(--color-ink);
}
.parking-announcements [hidden] { display: none !important; }
.parking-announcements button { font: inherit; cursor: pointer; }
.parking-announcements button:focus-visible,
.parking-announcements a:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 4px; }
.parking-announcements-bell {
    position: relative;
    width: 48px;
    height: 48px;
    border: 1px solid var(--color-line);
    border-radius: 50%;
    background: var(--color-paper);
    color: var(--color-ink);
    font-size: 1.25rem !important;
}
.parking-announcements-count {
    position: absolute;
    top: 0;
    right: -4px;
    min-width: 24px;
    padding: 0 4px;
    border-radius: 16px;
    background: var(--color-ink);
    color: var(--color-paper);
    font-size: .75rem;
    font-weight: 800;
    line-height: 24px;
}
.parking-announcements-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1100;
    width: min(400px, calc(100vw - 32px));
    padding: 24px;
    border: 1px solid var(--color-line);
    border-radius: 16px;
    background: var(--color-paper);
    box-shadow: 0 8px 32px var(--color-shadow);
    text-align: left;
}
.parking-announcements-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.parking-announcements-heading h2 { margin: 0; font-size: 1.125rem; font-weight: 800; }
.parking-announcements-heading button,
[data-announcement-toast-close] { margin-left: auto; border: 0; background: transparent; color: var(--color-ink); min-width: 32px; min-height: 32px; }
.parking-announcements-panel p { margin: 8px 0; color: var(--color-muted); }
.parking-announcements-list {
    display: grid;
    gap: 8px;
    max-height: min(55vh, 480px);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}
.parking-announcements-list li a {
    display: grid;
    gap: 4px;
    padding: 16px;
    border-radius: 8px;
    background: var(--color-soft);
    color: var(--color-ink);
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
}
.parking-announcements-list li.is-read a { background: var(--color-paper); border: 1px solid var(--color-line); }
.parking-announcements-list strong { font-size: .9rem; }
.parking-announcements-list span { font-size: .8rem; color: var(--color-muted); }
.parking-announcements-list small { color: var(--color-accent); font-weight: 800; }
.parking-announcements-read-all,
[data-announcement-retry], [data-announcement-toast-open] {
    border: 0;
    padding: 8px 0;
    background: transparent;
    color: var(--color-ink);
    text-decoration: underline;
    font-weight: 800;
}
.parking-announcements-toast {
    position: fixed;
    z-index: 1090;
    top: 96px;
    right: max(24px, calc((100vw - var(--portal-content-max-width, 100vw)) / 2));
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: min(400px, calc(100vw - 32px));
    padding: 24px;
    border: 1px solid var(--color-line);
    border-radius: 16px;
    background: var(--color-paper);
    box-shadow: 0 8px 32px var(--color-shadow);
}
.parking-announcements-toast > i { margin-top: 4px; font-size: 1.25rem; }
.parking-announcements-toast strong,
.parking-announcements-toast span { display: block; }
.parking-announcements-toast span { margin-top: 8px; color: var(--color-muted); font-size: .85rem; }
@media (max-width: 1199px) {
    .parking-announcements-panel { position: fixed; top: 80px; left: auto; right: 16px; max-height: calc(100dvh - 96px); overflow-y: auto; }
    .parking-announcements-toast { right: 16px; }
}