/* Functional additions to the existing menu; original style.css is unchanged. */
.cat-menu { overflow-y: auto; justify-content: safe center; }
.cat-menu-grid { flex-shrink: 0; }
.cat-item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cat-count { font: .65rem var(--font); opacity: .65; font-variant-numeric: tabular-nums; }
.cat-cameras-title { margin-top: 20px; color: rgba(255,255,255,.75); font: .72rem var(--serif); }
.cat-cameras-hint { margin: 7px 0 10px; color: rgba(255,255,255,.45); font: .62rem/1.6 var(--font); }
.cat-camera-list { overflow-y: auto; flex-shrink: 0; max-height: 24vh; scrollbar-width: thin; scrollbar-color: #444 transparent; }
.cat-camera { display: block; width: 100%; background: none; border: 0; padding: 9px 0; text-align: left; color: rgba(255,255,255,.7); cursor: pointer; }
.cat-camera:hover, .cat-camera[aria-current="true"] { color: #fff; }
.cat-camera-name { display: block; font: .72rem/1.4 var(--serif); overflow-wrap: anywhere; }
.cat-camera-detail { display: block; margin-top: 3px; font: .6rem/1.5 var(--font); color: rgba(255,255,255,.45); }
.cat-item:focus-visible, .cat-camera:focus-visible { outline: 1px solid rgba(255,255,255,.7); outline-offset: 2px; }
#golden-status { position: absolute; top: 1px; left: 12px; right: 12px; text-align: center; color: rgba(255,255,255,.65); font: .62rem/1.4 var(--font); pointer-events: none; }
.camera-empty { position: absolute; top: 50%; left: 24px; right: 24px; transform: translateY(-50%); max-width: 460px; margin: auto; text-align: center; color: rgba(255,255,255,.6); font: .95rem/1.8 var(--serif); }