[data-theme="amber"] {
    --du-bg:          #0d0c08;
    --du-surface:     #121008;
    --du-surface-alt: #1a1710;
    --du-border:      rgba(232,160,32,0.13);
    --du-accent:      #e8a020;
    --du-accent-dim:  rgba(232,160,32,0.09);
    --du-accent-mid:  rgba(232,160,32,0.18);
    --du-accent-str:  rgba(232,160,32,0.44);
    --du-fire:        #dc5032;
    --du-fire-dim:    rgba(220,80,50,0.10);
    --du-fire-mid:    rgba(220,80,50,0.18);
    --du-fire-str:    rgba(220,80,50,0.44);
    --du-green:       #5ccc6c;
    --du-muted:       #8a7e60;
    --du-body:        #e8dcc8;
    --du-heading:     #f5ede0;
    --du-aside-bg:    rgba(232,160,32,0.06);
    --du-aside-bdr:   rgba(232,160,32,0.28);
    }
    
    [data-theme="arctic"] {
    --du-bg:          #090e14;
    --du-surface:     #0f1822;
    --du-surface-alt: #162030;
    --du-border:      rgba(56,189,248,0.12);
    --du-accent:      #38bdf8;
    --du-accent-dim:  rgba(56,189,248,0.09);
    --du-accent-mid:  rgba(56,189,248,0.18);
    --du-accent-str:  rgba(56,189,248,0.44);
    --du-fire:        #f97316;
    --du-fire-dim:    rgba(249,115,22,0.10);
    --du-fire-mid:    rgba(249,115,22,0.18);
    --du-fire-str:    rgba(249,115,22,0.44);
    --du-green:       #34d399;
    --du-muted:       #6b8ba4;
    --du-body:        #bfd8ed;
    --du-heading:     #e8f4ff;
    --du-aside-bg:    rgba(56,189,248,0.05);
    --du-aside-bdr:   rgba(56,189,248,0.22);
    }
    
    [data-theme="dispatch"] {
    --du-bg:          #0b0f14;
    --du-surface:     #13181f;
    --du-surface-alt: #1b2230;
    --du-border:      rgba(77,184,176,0.11);
    --du-accent:      #4db8b0;
    --du-accent-dim:  rgba(77,184,176,0.09);
    --du-accent-mid:  rgba(77,184,176,0.17);
    --du-accent-str:  rgba(77,184,176,0.42);
    --du-fire:        #e05555;
    --du-fire-dim:    rgba(224,85,85,0.10);
    --du-fire-mid:    rgba(224,85,85,0.18);
    --du-fire-str:    rgba(224,85,85,0.44);
    --du-green:       #3dba7a;
    --du-muted:       #6b7f8f;
    --du-body:        #c5d4df;
    --du-heading:     #e2ecf4;
    --du-aside-bg:    rgba(77,184,176,0.05);
    --du-aside-bdr:   rgba(77,184,176,0.22);
    }
    
    [data-theme="ghost"] {
    --du-bg:          #e8e8e8;
    --du-surface:     #f0f0f0;
    --du-surface-alt: #e2e2e2;
    --du-border:      rgba(0,0,0,0.09);
    --du-accent:      #1d6feb;
    --du-accent-dim:  rgba(29,111,235,0.09);
    --du-accent-mid:  rgba(29,111,235,0.17);
    --du-accent-str:  rgba(29,111,235,0.40);
    --du-fire:        #d93535;
    --du-fire-dim:    rgba(217,53,53,0.09);
    --du-fire-mid:    rgba(217,53,53,0.17);
    --du-fire-str:    rgba(217,53,53,0.40);
    --du-green:       #1a8a4a;
    --du-muted:       #6b6b6b;
    --du-body:        #1a1a1a;
    --du-heading:     #0a0a0a;
    --du-aside-bg:    rgba(0,0,0,0.03);
    --du-aside-bdr:   rgba(0,0,0,0.13);
    }
    
    [data-theme="mono"] {
    --du-bg:          #0d0d0d;
    --du-surface:     #181818;
    --du-surface-alt: #222222;
    --du-border:      rgba(255,255,255,0.08);
    --du-accent:      #4f8ef7;
    --du-accent-dim:  rgba(79,142,247,0.10);
    --du-accent-mid:  rgba(79,142,247,0.18);
    --du-accent-str:  rgba(79,142,247,0.44);
    --du-fire:        #f25c5c;
    --du-fire-dim:    rgba(242,92,92,0.10);
    --du-fire-mid:    rgba(242,92,92,0.18);
    --du-fire-str:    rgba(242,92,92,0.44);
    --du-green:       #6fcf97;
    --du-muted:       #888888;
    --du-body:        #cccccc;
    --du-heading:     #f0f0f0;
    --du-aside-bg:    rgba(255,255,255,0.03);
    --du-aside-bdr:   rgba(255,255,255,0.13);
    }
    
    [data-theme="nightwatch"] {
    --du-bg:          #0c0e0d;
    --du-surface:     #111412;
    --du-surface-alt: #171a18;
    --du-border:      rgba(224,92,92,0.13);
    --du-accent:      #e05c5c;
    --du-accent-dim:  rgba(224,92,92,0.10);
    --du-accent-mid:  rgba(224,92,92,0.18);
    --du-accent-str:  rgba(224,92,92,0.45);
    --du-fire:        #e68c3c;
    --du-fire-dim:    rgba(230,140,60,0.12);
    --du-fire-mid:    rgba(230,140,60,0.20);
    --du-fire-str:    rgba(230,140,60,0.45);
    --du-green:       #4caf75;
    --du-muted:       #8a7a7a;
    --du-body:        #e8d5d5;
    --du-heading:     #f0e8e8;
    --du-aside-bg:    rgba(230,140,60,0.06);
    --du-aside-bdr:   rgba(230,140,60,0.32);
    }
    
    [data-theme="nightvision"] {
    --du-bg:          #080c08;
    --du-surface:     #0d120d;
    --du-surface-alt: #131a13;
    --du-border:      rgba(57,211,83,0.12);
    --du-accent:      #39d353;
    --du-accent-dim:  rgba(57,211,83,0.09);
    --du-accent-mid:  rgba(57,211,83,0.18);
    --du-accent-str:  rgba(57,211,83,0.44);
    --du-fire:        #a8d448;
    --du-fire-dim:    rgba(168,212,72,0.10);
    --du-fire-mid:    rgba(168,212,72,0.18);
    --du-fire-str:    rgba(168,212,72,0.44);
    --du-green:       #39d353;
    --du-muted:       #6b896b;
    --du-body:        #c8ddc8;
    --du-heading:     #e8f5e8;
    --du-aside-bg:    rgba(57,211,83,0.05);
    --du-aside-bdr:   rgba(57,211,83,0.25);
    }
    
    [data-theme="thermal"] {
    --du-bg:          #0a0812;
    --du-surface:     #100e18;
    --du-surface-alt: #181522;
    --du-border:      rgba(167,139,250,0.12);
    --du-accent:      #a78bfa;
    --du-accent-dim:  rgba(167,139,250,0.09);
    --du-accent-mid:  rgba(167,139,250,0.18);
    --du-accent-str:  rgba(167,139,250,0.44);
    --du-fire:        #fb923c;
    --du-fire-dim:    rgba(251,146,60,0.10);
    --du-fire-mid:    rgba(251,146,60,0.18);
    --du-fire-str:    rgba(251,146,60,0.44);
    --du-green:       #4ade80;
    --du-muted:       #7c6f9a;
    --du-body:        #d4cce8;
    --du-heading:     #ede8ff;
    --du-aside-bg:    rgba(167,139,250,0.05);
    --du-aside-bdr:   rgba(167,139,250,0.22);
    }
    
    *, *::before, *::after { box-sizing: border-box; }
    body { background: var(--du-bg); color: var(--du-body); font-size: 0.875rem; margin: 0; }
    
    .skip-link {
        position: absolute; top: -100%; left: 0;
        background: var(--du-accent); color: #fff;
        font-weight: 700; padding: 0.5rem 1.25rem;
        z-index: 9999; border-radius: 0 0 6px 0;
        text-decoration: none; font-size: 0.85rem;
    }
    .skip-link:focus { top: 0; }
    
    :focus-visible { outline: 3px solid var(--du-accent); outline-offset: 2px; border-radius: 4px; }
    :focus:not(:focus-visible) { outline: none; }
    
    @media (prefers-reduced-motion: reduce) {
        .live-dot, .wave-bar { animation: none !important; }
        .wave-bar { transform: scaleY(1) !important; }
    }
    
    .ducomm-topbar { background: var(--du-surface); border-bottom: 1px solid var(--du-border); }
    .live-dot {
        width: 9px; height: 9px; border-radius: 50%;
        background: var(--du-green);
        box-shadow: 0 0 0 3px rgba(111,207,151,0.2);
        animation: livepulse 2s infinite; flex-shrink: 0;
    }
    @keyframes livepulse {
        0%,100% { box-shadow: 0 0 0 3px rgba(111,207,151,0.2); }
        50%      { box-shadow: 0 0 0 7px rgba(111,207,151,0.05); }
    }
    .site-logo { font-size: 1rem; font-weight: 600; color: var(--du-heading); letter-spacing: 0.08em; text-transform: uppercase; }
    
    .kw-badge {
        font-size: 0.7rem;
        background: rgba(255,255,255,0.06);
        color: var(--du-body);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 20px; padding: 1px 9px; white-space: nowrap;
    }
    .kw-badge-fire {
        font-size: 0.7rem;
        background: rgba(255,255,255,0.06);
        color: var(--du-body);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 20px; padding: 1px 9px; white-space: nowrap;
    }
    
    .plain-text { background: var(--du-surface); border-bottom: 1px solid var(--du-border); }
    .plain-text h2 { text-align: center; font-size: 1rem; font-weight: 600; color: var(--du-heading); margin: 0; }
    .plain-text p.lead-copy { text-align: center; font-size: 0.8rem; color: var(--du-muted); margin: 0; line-height: 1.55; }
    
    .stat-card {
        background: var(--du-surface);
        border: 1px solid var(--du-border);
        border-radius: 8px; padding: 0.65rem 1rem;
    }
    .stat-card .stat-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--du-muted); }
    .stat-card .stat-val   { font-size: 1.4rem; font-weight: 600; color: var(--du-heading); line-height: 1.2; }
    .stat-card .stat-val.text-live { color: var(--du-green); }
    .stat-card .stat-sub   { font-size: 0.7rem; color: var(--du-muted); margin-top: 1px; }
    
    .feed-panel { background: var(--du-surface); border: 1px solid var(--du-border); border-radius: 8px; overflow: hidden; }
    .feed-panel .panel-header {
        background: var(--du-surface-alt);
        border-bottom: 1px solid var(--du-border);
        padding: 0.55rem 1rem;
        display: flex; align-items: center; justify-content: space-between;
    }
    .panel-title { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--du-muted); margin: 0; }
    
    .tx-row {
        display: grid;
        grid-template-columns: 48px 1fr auto;
        gap: 0.6rem; padding: 0.6rem 1rem;
        border-bottom: 1px solid var(--du-border);
        border-left: 2px solid transparent;
        align-items: center; cursor: pointer;
        transition: background 0.1s;
        width: 100%; background: transparent;
        text-align: left; color: inherit;
        -webkit-appearance: none;
    }
    .tx-row:last-child { border-bottom: none; }
    .tx-row:hover { background: rgba(255,255,255,0.03); }
    .tx-row:focus-visible { outline: 3px solid var(--du-accent); outline-offset: -3px; border-radius: 0; }
    .tx-row.tx-police[aria-pressed="true"] { background: var(--du-accent-dim); border-left-color: var(--du-accent); }
    .tx-row.tx-fire[aria-pressed="true"]   { background: var(--du-fire-dim);   border-left-color: var(--du-fire); }
    .tx-row[aria-pressed="true"] { background: var(--du-accent-dim); border-left-color: var(--du-accent); }
    
    .tx-left {
        display: flex; flex-direction: column;
        align-items: center; gap: 3px;
        width: 48px; flex-shrink: 0;
    }
    
    .tx-icon { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0; }
    .tx-icon.police { background: var(--du-accent-dim); color: var(--du-accent); }
    .tx-icon.fire   { background: var(--du-fire-dim);   color: var(--du-fire); }
    
    .type-label {
        font-size: 0.6rem; font-weight: 500;
        text-transform: uppercase; letter-spacing: 0.04em;
        white-space: nowrap;
    }
    .type-label.police { color: var(--du-accent); }
    .type-label.fire   { color: var(--du-fire); }
    
    .tx-channel  { font-size: 0.78rem; font-weight: 500; color: var(--du-heading); }
    .tx-desc-line { font-size: 0.7rem; color: var(--du-muted); margin-top: 2px; }
    .tx-desc     { font-size: 0.7rem;  color: var(--du-muted); margin-top: 1px; }
    .tx-time     { font-size: 0.7rem;  color: var(--du-muted); white-space: nowrap; }
    .tx-dur      { font-size: 0.65rem; color: var(--du-muted); }
    
    .tx-meta-row {
        display: flex; align-items: center;
        gap: 5px; margin-top: 3px;
    }

    .tx-transcript {
        display: flex;
        align-items: flex-start;
        gap: 5px;
        margin-top: 4px;
        color: var(--du-muted);
        font-style: italic;
        line-height: 1.4;
    }
    
    .tx-transcript .bi {
        color: var(--du-accent);
        opacity: 0.6;
        flex-shrink: 0;
        margin-top: 2px;
    }
    
    .tx-transcript span {
        color: var(--du-muted);
        opacity: 0.85;
        overflow: hidden;
        display: -webkit-box;
        /*-webkit-line-clamp: 2;*/
        -webkit-box-orient: vertical;
    }
    
    .tx-transcript.unavailable .bi {
        opacity: 0.25;
        color: var(--du-muted);
    }
    
    .tx-transcript.unavailable span {
        opacity: 0.4;
        font-style: italic;
    }
    
    .badge-tg {
        display: inline-block; font-size: 0.65rem;
        font-family: monospace; font-weight: 500;
        background: var(--du-surface-alt);
        color: var(--du-body);
        border: 1px solid rgba(255,255,255,0.15);
        border-radius: 4px; padding: 0 5px;
        white-space: nowrap; text-decoration: none;
    }
    .badge-tg:hover { border-color: var(--du-accent); text-decoration: underline; color: var(--du-accent); }
    
    .badge-freq {
        display: inline-block; font-size: 0.65rem;
        font-family: monospace; font-weight: 400;
        background: var(--du-surface-alt);
        color: var(--du-muted);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 4px; padding: 0 5px;
        white-space: nowrap;
    }
    
    .meta-sep { font-size: 0.65rem; color: var(--du-muted); opacity: 0.35; }
    
    .tx-meta { text-align: right; }
    
    .right-col {
        display: flex; flex-direction: column;
        align-items: flex-end; gap: 4px;
        min-width: 52px;
    }
    
    .tx-type-label {
        display: inline-block; font-size: 0.6rem; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.06em;
        padding: 1px 4px; border-radius: 3px; margin-top: 3px;
    }
    .tx-type-label.police { background: var(--du-accent-dim); color: var(--du-accent); }
    .tx-type-label.fire   { background: var(--du-fire-dim);   color: var(--du-fire); }
    
    .waveform { display: flex; align-items: center; gap: 2px; height: 16px; }
    .wave-bar { width: 3px; border-radius: 2px; background: var(--du-accent); animation: wave 0.6s ease-in-out infinite alternate; }
    .wave-bar:nth-child(1){ height: 4px; }
    .wave-bar:nth-child(2){ height: 10px; animation-delay: 0.10s; }
    .wave-bar:nth-child(3){ height: 14px; animation-delay: 0.20s; }
    .wave-bar:nth-child(4){ height: 8px;  animation-delay: 0.05s; }
    .wave-bar:nth-child(5){ height: 12px; animation-delay: 0.15s; }
    .wave-bar:nth-child(6){ height: 6px;  animation-delay: 0.25s; }
    @keyframes wave { from{ transform: scaleY(0.4); } to{ transform: scaleY(1); } }
    
    .waveform-placeholder { height: 16px; }
    
    .sidebar-panel { background: var(--du-surface); border: 1px solid var(--du-border); border-radius: 8px; overflow: hidden; }
    .sidebar-section { padding: 0.85rem 1rem; border-bottom: 1px solid var(--du-border); }
    .sidebar-section:last-child { border-bottom: none; }
    .sidebar-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--du-muted); margin-bottom: 0.6rem; display: block; }
    
    .on-air-badge { background: var(--du-fire); color: #fff; font-size: 0.6rem; font-weight: 700; padding: 1px 5px; border-radius: 3px; letter-spacing: 0.05em; }
    .player-wrap { background: var(--du-accent-dim); border: 1px solid var(--du-accent-mid); border-radius: 6px; padding: 0.6rem 0.75rem; }
    .btn-play-circle {
        width: 34px; height: 34px; border-radius: 50%;
        background: var(--du-accent); border: none; color: #fff;
        display: flex; align-items: center; justify-content: center;
        font-size: 0.9rem; cursor: pointer; flex-shrink: 0; position: relative;
    }
    .btn-play-circle::after { content: ''; position: absolute; inset: -5px; }
    .scrub-track { height: 3px; background: var(--du-accent-mid); border-radius: 2px; margin-top: 6px; cursor: pointer; }
    .scrub-fill  { width: 35%; height: 100%; background: var(--du-accent); border-radius: 2px; }
    .scrub-times { display: flex; justify-content: space-between; font-size: 0.65rem; color: var(--du-muted); margin-top: 2px; }
    .btn-volume  { padding: 4px 8px; border: 1px solid var(--du-border); border-radius: 5px; color: var(--du-muted); font-size: 0.75rem; background: none; cursor: pointer; }
    .btn-volume:hover { color: var(--du-body); }
    
    .autoplay-row { display: flex; align-items: center; justify-content: space-between; }
    .form-check-input:checked { background-color: var(--du-green); border-color: var(--du-green); }
    
    .activity-bar { display: flex; gap: 2px; align-items: flex-end; }
    .act-seg          { width: 4px; border-radius: 1px; background: rgba(255,255,255,0.08); }
    .act-seg.lit      { background: var(--du-accent); }
    .act-seg.fire-lit { background: var(--du-fire); }
    
    #agency_filters .btn-outline-dark { color: var(--du-muted); border-color: rgba(255,255,255,0.12); font-size: 0.7rem; }
    #agency_filters .btn-check:checked + .btn-outline-dark { background-color: var(--du-accent-dim); border-color: var(--du-accent-str); color: var(--du-accent); }
    #agency_filters .btn-outline-dark:hover { background-color: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.2); color: var(--du-body); }
    #type_filters .btn-outline-dark { color: var(--du-muted); border-color: rgba(255,255,255,0.12); font-size: 0.7rem; }
    #type_filters .btn-check:checked + .btn-outline-dark { background-color: var(--du-accent-dim); border-color: var(--du-accent-str); color: var(--du-accent); }
    #type_filters .btn-outline-dark:hover { background-color: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.2); color: var(--du-body); }
    
    .filter-pill { font-size: 0.7rem; border-radius: 20px; padding: 3px 12px; border: 1px solid rgba(255,255,255,0.12); color: var(--du-muted); background: transparent; cursor: pointer; transition: all 0.1s; }
    .filter-pill[aria-checked="true"], .filter-pill:hover { background: var(--du-accent-dim); border-color: var(--du-accent-str); color: var(--du-accent); }
    .filter-pill.fire-pill[aria-checked="true"] { background: var(--du-fire-dim); border-color: var(--du-fire-str); color: var(--du-fire); }
    
    .tg-link { display: flex; align-items: center; justify-content: space-between; padding: 0.3rem 0; border-bottom: 1px solid var(--du-border); font-size: 0.75rem; color: var(--du-accent); text-decoration: none; }
    .tg-link:last-child { border-bottom: none; }
    .tg-link:hover { text-decoration: underline; opacity: 0.85; }
    .tg-link .tg-num { font-size: 0.65rem; color: var(--du-muted); }
    
    .city-link { display: inline-block; font-size: 0.72rem; color: var(--du-accent); text-decoration: none; margin: 0 0.4rem 0.35rem 0; }
    .city-link:hover { text-decoration: underline; }
    
    .ducomm-footer { background: var(--du-surface); border-top: 1px solid var(--du-border); }
    .footer-heading { font-size: 0.75rem; font-weight: 600; color: var(--du-heading); margin-bottom: 0.5rem; }
    .footer-body    { font-size: 0.78rem; color: var(--du-muted); line-height: 1.6; }
    .footer-body a  { color: var(--du-accent); }
    .footer-body a:hover { text-decoration: underline; }
    .table { color: var(--du-muted); }
    .table td, .table th { border-color: var(--du-border); }
    
    .faq-item { border-bottom: 1px solid var(--du-border); }
    .faq-item:last-child { border-bottom: none; }
    .faq-btn { width: 100%; background: none; border: none; text-align: left; font-size: 0.78rem; font-weight: 500; color: var(--du-body); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
    .faq-btn:hover { color: var(--du-heading); }
    .faq-btn .faq-icon { color: var(--du-accent); font-size: 0.75rem; transition: transform 0.2s; flex-shrink: 0; }
    .faq-btn[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
    .faq-answer { font-size: 0.78rem; color: var(--du-muted); line-height: 1.55; padding: 0 0 0.6rem 0; margin: 0; }
    
    .form-select:focus {
        border-color: var(--du-accent);
        box-shadow: 0 0 0 0.25rem var(--du-accent-dim);
    }


    .city-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.3rem 0;
        border-bottom: 1px solid var(--du-border);
        font-size: 0.75rem;
        color: var(--du-muted);
        text-decoration: none;
    }
    .city-row:last-child { border-bottom: none; }
    .city-row:hover { color: var(--du-accent); }
    .city-row .bi { font-size: 0.6rem; opacity: 0.4; }
    .city-row:hover .bi { opacity: 1; }
    
    .city-scroll {
        max-height: 280px;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--du-border) transparent;
    }

    #transmissions {
        max-height: 65vh;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--du-border) transparent;
    }