/* Caytopia: digital (DAB-style) radio UI. Backlight: island aquamarine + amber. Owned by radio.js. */
.nlr { --lcd: #5af0d0; --lcd-dim: rgba(90, 240, 208, .085); --amb: #ffb347; --sc: #5af0d0; --sc2: #ffb347; --bz1: #2a2f36; --bz2: #14171b;
  position: relative; display: block; color: #dfe9ee; font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; -webkit-tap-highlight-color: transparent; user-select: none; }
.nlr * { box-sizing: border-box; }
.nlr-body { position: relative; padding: 12px; border-radius: 20px; background:
    linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 22%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    linear-gradient(180deg, var(--bz1), var(--bz2));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 -2px 6px rgba(0, 0, 0, .55) inset, 0 10px 26px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .7); }
.nlr-glass { position: relative; border-radius: 12px; padding: 3px; background: linear-gradient(180deg, #05070a, #0b0e12); box-shadow: 0 2px 6px rgba(0, 0, 0, .8) inset, 0 1px 0 rgba(255, 255, 255, .1); }
.nlr-glass::after { content: ""; position: absolute; inset: 3px; border-radius: 10px; pointer-events: none; z-index: 3;
  background: linear-gradient(162deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .03) 38%, rgba(255, 255, 255, 0) 39%), radial-gradient(120% 90% at 50% 120%, rgba(90, 240, 208, .07), rgba(0, 0, 0, 0) 60%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .05) inset, 0 0 14px rgba(0, 0, 0, .6) inset; }
.nlr-lcd { position: relative; border-radius: 10px; padding: 9px 11px 8px; overflow: hidden; color: var(--lcd);
  background: radial-gradient(130% 120% at 50% 0%, #0f2a2c 0%, #071418 55%, #040b0e 100%); transition: filter .4s; }
.nlr-lcd::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, rgba(0, 0, 0, 0) 1px 3px); opacity: .5; z-index: 2; }
.nlr:not(.nlr-on) .nlr-lcd { filter: saturate(.55) brightness(.62); }
.nlr-top { display: flex; align-items: center; gap: 5px; height: 15px; font: 700 8.5px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .08em; }
.nlr-badge { padding: 2px 4px 1px; border-radius: 3px; border: 1px solid currentColor; opacity: .38; }
.nlr-band, .nlr-src { opacity: .9; } .nlr-src { color: var(--amb); }
.nlr.nlr-on .nlr-tp, .nlr[data-state="live"] .nlr-st { opacity: .95; }
.nlr-sig { margin-left: auto; display: flex; align-items: flex-end; gap: 2px; height: 11px; }
.nlr-sig i { display: block; width: 3px; border-radius: 1px; background: var(--lcd-dim); } .nlr-sig i:nth-child(1) { height: 3px } .nlr-sig i:nth-child(2) { height: 5px } .nlr-sig i:nth-child(3) { height: 7px } .nlr-sig i:nth-child(4) { height: 9px } .nlr-sig i:nth-child(5) { height: 11px }
.nlr-sig i.on { background: var(--lcd); box-shadow: 0 0 5px var(--lcd); }
.nlr-main { display: flex; align-items: flex-end; gap: 12px; margin: 5px 0 3px; }
.nlr-freq { display: flex; align-items: flex-end; gap: 2px; height: 46px; filter: drop-shadow(0 0 7px rgba(90, 240, 208, .55)); }
.nlr-dg { width: 26px; height: 42px; } .nlr-dg .on { fill: var(--lcd); } .nlr-dg .off { fill: var(--lcd-dim); }
.nlr-dp { width: 5px; height: 5px; margin: 0 2px 4px; background: var(--lcd); border-radius: 1px; align-self: flex-end; }
.nlr-ps { display: flex; margin-left: auto; padding-bottom: 3px; font: 700 15px/1 "VT323", ui-monospace, "SF Mono", Menlo, monospace; color: var(--amb); text-shadow: 0 0 8px rgba(255, 179, 71, .65); letter-spacing: 0; }
.nlr-ps u { text-decoration: none; display: block; width: 11px; height: 18px; line-height: 18px; text-align: center; margin: 0 1px; border-radius: 2px; background: rgba(255, 179, 71, .06); font-size: 15px; }
.nlr-rt { height: 15px; overflow: hidden; white-space: nowrap; position: relative; font: 500 11px/15px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; color: rgba(190, 255, 240, .9);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); border-top: 1px solid rgba(90, 240, 208, .14); padding-top: 1px; }
.nlr-rt-t { display: inline-block; padding-left: 100%; animation: nlr-scroll var(--dur, 14s) linear infinite; text-shadow: 0 0 6px rgba(90, 240, 208, .45); }
@keyframes nlr-scroll { to { transform: translateX(-100%); } }
.nlr-eq { display: block; width: 100%; height: 40px; margin-top: 5px; image-rendering: pixelated; }
.nlr[data-state="offline"] .nlr-rt { color: #ffb347; } .nlr[data-state="offline"] .nlr-freq { animation: nlr-flick .9s steps(2) infinite; }
@keyframes nlr-flick { 50% { opacity: .55; } }
.nlr[data-state="tuning"] .nlr-freq { animation: nlr-flick .5s steps(2) infinite; }

.nlr-ctl { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.nlr-btn { appearance: none; border: 0; width: 46px; height: 40px; border-radius: 12px; color: #cfe1e8; display: grid; place-items: center; cursor: pointer;
  background: linear-gradient(180deg, #3b424b, #1f242a); box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 -2px 3px rgba(0, 0, 0, .5) inset, 0 3px 6px rgba(0, 0, 0, .5), 0 0 0 1px #0a0c0e; transition: transform .08s, box-shadow .08s; }
.nlr-btn:active { transform: translateY(1px); box-shadow: 0 2px 5px rgba(0, 0, 0, .8) inset, 0 0 0 1px #0a0c0e; }
.nlr-btn svg { width: 22px; height: 22px; } .nlr-pw { color: var(--amb); }
.nlr.nlr-on .nlr-pw { color: #1b1305; background: linear-gradient(180deg, #ffc66e, #e48f1d); box-shadow: 0 0 14px rgba(255, 179, 71, .45), 0 1px 0 rgba(255, 255, 255, .5) inset, 0 3px 6px rgba(0, 0, 0, .5), 0 0 0 1px #3a2204; }
.nlr-vol { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
.nlr-mute { appearance: none; border: 0; background: none; color: var(--lcd); width: 32px; height: 36px; padding: 0; cursor: pointer; opacity: .85; } .nlr-mute svg { width: 22px; height: 22px; }
.nlr-muted .nlr-mute { color: var(--amb); }
.nlr-vslot { position: relative; flex: 1; height: 30px; min-width: 60px; }
.nlr-vleds { position: absolute; inset: 6px 0; display: grid; grid-template-columns: repeat(16, 1fr); gap: 2px; pointer-events: none; align-items: end; }
.nlr-vleds i { display: block; background: rgba(90, 240, 208, .13); border-radius: 1px; } .nlr-vleds i.on { background: var(--lcd); box-shadow: 0 0 5px rgba(90, 240, 208, .7); }
.nlr-vleds i:nth-child(n) { height: calc(30% + var(--n, 0) * 1%); }
.nlr-vleds i:nth-child(1) { height: 22% } .nlr-vleds i:nth-child(2) { height: 27% } .nlr-vleds i:nth-child(3) { height: 32% } .nlr-vleds i:nth-child(4) { height: 37% } .nlr-vleds i:nth-child(5) { height: 42% } .nlr-vleds i:nth-child(6) { height: 47% } .nlr-vleds i:nth-child(7) { height: 52% } .nlr-vleds i:nth-child(8) { height: 57% } .nlr-vleds i:nth-child(9) { height: 62% } .nlr-vleds i:nth-child(10) { height: 67% } .nlr-vleds i:nth-child(11) { height: 72% } .nlr-vleds i:nth-child(12) { height: 78% } .nlr-vleds i:nth-child(13) { height: 84% } .nlr-vleds i:nth-child(14) { height: 90% } .nlr-vleds i:nth-child(15) { height: 95% } .nlr-vleds i:nth-child(16) { height: 100% }
.nlr-vleds i:nth-child(n+14).on { background: var(--amb); box-shadow: 0 0 5px rgba(255, 179, 71, .7); }
.nlr-vr { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; touch-action: none; }

.nlr-pres { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin-top: 11px; }
.nlr-pre { appearance: none; border: 0; cursor: pointer; padding: 6px 0 5px; border-radius: 10px; color: #b9ccd4; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0;
  background: linear-gradient(180deg, #343a42, #1b1f24); box-shadow: 0 1px 0 rgba(255, 255, 255, .16) inset, 0 -2px 3px rgba(0, 0, 0, .5) inset, 0 3px 5px rgba(0, 0, 0, .5), 0 0 0 1px #0a0c0e; }
.nlr-pre b { font: 700 15px/1 ui-monospace, Menlo, monospace; } .nlr-pre small { font: 600 7.5px/1.1 ui-monospace, Menlo, monospace; letter-spacing: .04em; opacity: .75; max-width: 100%; overflow: hidden; text-overflow: clip; white-space: nowrap; }
.nlr-pre.on { color: #04211c; background: linear-gradient(180deg, #8ff7e0, #35c9ac); box-shadow: 0 0 14px rgba(90, 240, 208, .45), 0 1px 0 rgba(255, 255, 255, .6) inset, 0 3px 5px rgba(0, 0, 0, .5), 0 0 0 1px #0a3a31; }
.nlr-pre:active { transform: translateY(1px); }

.nlr-list { margin-top: 12px; border-radius: 16px; overflow: hidden; background: rgba(10, 14, 18, .72); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset; }
.nlr-row { appearance: none; border: 0; width: 100%; display: flex; align-items: center; gap: 11px; padding: 10px 12px; text-align: left; cursor: pointer; background: none; color: inherit; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.nlr-row:last-child { border-bottom: 0; } .nlr-row:active { background: rgba(255, 255, 255, .06); }
.nlr-row.on { background: linear-gradient(90deg, rgba(90, 240, 208, .13), rgba(90, 240, 208, 0)); }
.nlr-chip { flex: none; width: 46px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #101418; background: linear-gradient(135deg, var(--c), var(--c2)); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 -2px 3px rgba(0, 0, 0, .25) inset, 0 2px 5px rgba(0, 0, 0, .4); }
.nlr-chip b { font: 800 13px/1 ui-monospace, Menlo, monospace; letter-spacing: -.02em; }
.nlr-nm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .nlr-nm b { font: 600 14px/1.15 -apple-system, system-ui, sans-serif; color: #eef6f8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nlr-nm small { font: 400 11px/1.2 -apple-system, system-ui, sans-serif; color: #8ea3ad; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nlr-stt { flex: none; font: 700 9px/1 ui-monospace, Menlo, monospace; letter-spacing: .08em; padding: 4px 6px 3px; border-radius: 5px; color: #6fe3c8; border: 1px solid rgba(111, 227, 200, .4); }
.nlr-stt.off { color: #ffb347; border-color: rgba(255, 179, 71, .4); } .nlr-stt.on { color: #04211c; background: #5af0d0; border-color: #5af0d0; box-shadow: 0 0 8px rgba(90, 240, 208, .6); }
.nlr-foot { margin: 9px 4px 2px; font: 500 10.5px/1.3 -apple-system, system-ui, sans-serif; color: #7f949e; text-align: center; }

/* phone Radio app: sits in the phone's dark/light screens */
.nlr-full { margin: 4px 0 8px; }
@media (max-width: 420px) {
  .nlr-body { padding: 9px; border-radius: 17px; } .nlr-dg { width: 22px; height: 36px; } .nlr-freq { height: 40px; }
  .nlr-ps u { width: 9px; } .nlr-ps { font-size: 13px; } .nlr-ctl { gap: 7px; } .nlr-btn { width: 42px; }
  .nlr-pres { gap: 5px; } .nlr-pre small { font-size: 6.5px; }
}

/* car HUD strip */
.nlr-carwrap { width: 100%; max-width: 470px; align-self: stretch; pointer-events: auto; }
.nlr-compact .nlr-body { padding: 6px; border-radius: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.nlr-compact .nlr-glass { padding: 2px; border-radius: 9px; } .nlr-compact .nlr-glass::after { inset: 2px; border-radius: 7px; }
.nlr-compact .nlr-lcd { padding: 4px 8px 4px; border-radius: 7px; display: grid; grid-template-columns: auto 1fr 46px; grid-template-areas: "f ps eq" "f rt eq"; column-gap: 8px; align-items: center; }
.nlr-compact .nlr-top { display: none; } .nlr-compact .nlr-main { display: contents; }
.nlr-compact .nlr-freq { grid-area: f; height: 24px; gap: 1px; filter: drop-shadow(0 0 5px rgba(90, 240, 208, .5)); } .nlr-compact .nlr-dg { width: 13px; height: 22px; } .nlr-compact .nlr-dp { width: 3px; height: 3px; margin: 0 1px 2px; }
.nlr-compact .nlr-ps { grid-area: ps; margin: 0; padding: 0; font-size: 11px; } .nlr-compact .nlr-ps u { width: 8px; height: 12px; line-height: 12px; font-size: 11px; }
.nlr-compact .nlr-rt { grid-area: rt; height: 12px; line-height: 12px; font-size: 9px; border: 0; padding: 0; }
.nlr-compact .nlr-eq { grid-area: eq; width: 46px; height: 24px; margin: 0; }
.nlr-compact .nlr-ctl { margin: 0; gap: 4px; } .nlr-compact .nlr-btn { width: 32px; height: 30px; border-radius: 9px; } .nlr-compact .nlr-btn svg { width: 17px; height: 17px; }
.nlr-compact .nlr-pw { display: none; } .nlr-compact .nlr-vol { display: none; }
html.nl-phone .nlr-carwrap { max-width: none; }
@media (prefers-reduced-motion: reduce) { .nlr-rt-t { animation-duration: 40s; } .nlr-freq { animation: none !important; } }