.fx-t-topbar4 { position: relative; z-index: 50; }

.tb4 {
  background: var(--tb-bg); color: var(--tb-text);
  border-bottom: 1px solid var(--tb-border);
  font-family: var(--tb-font); font-size: var(--tb-size);
}
.tb4-inner { display: flex; align-items: center; gap: 28px; min-height: var(--tb-height); }
.tb4-brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.tb4-logo { height: var(--tb-logo-h); width: auto; }
.tb4-name { font-family: var(--fx-font-heading); font-weight: 800; font-size: 1.35em; letter-spacing: -.02em; }

.tb4-nav { flex: 1; display: flex; }
.tb4-nav-center .tb4-nav { justify-content: center; }
.tb4-nav-right .tb4-nav { justify-content: flex-end; }
.tb4-menu { display: flex; gap: 4px; }
.tb4-menu > li { position: relative; }
.tb4-menu a {
  display: block; padding: 10px 14px; border-radius: 999px; text-decoration: none;
  font-weight: var(--tb-weight); letter-spacing: var(--tb-tracking); opacity: .78;
  transition: opacity .15s, background-color .15s;
}
.tb4-menu a:hover { opacity: 1; background: color-mix(in srgb, var(--tb-text) 8%, transparent); }
.tb4-menu a[aria-current="page"] { opacity: 1; color: var(--tb-text); box-shadow: inset 0 -2px 0 var(--tb-accent); border-radius: 0; }
.tb4-sub {
  position: absolute; top: 100%; left: 0; min-width: 220px; padding: 8px;
  background: var(--tb-bg); border: 1px solid color-mix(in srgb, var(--tb-text) 12%, transparent); border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0,0,0,.25); opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s ease;
}
.tb4-menu li:hover > .tb4-sub, .tb4-menu li:focus-within > .tb4-sub { opacity: 1; visibility: visible; transform: none; }
.tb4-sub a { border-radius: 8px; }

.tb4-live { display: flex; align-items: center; gap: 14px; flex: none; }
.tb4-onair { display: inline-flex; align-items: center; gap: 8px; font-size: .82em; max-width: 240px; }
.tb4-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tb-accent); box-shadow: 0 0 0 0 var(--tb-accent); animation: tb4-pulse 1.8s infinite; flex: none; }
.tb4-onair-label { font-family: var(--fx-font-accent); text-transform: uppercase; letter-spacing: .14em; font-size: .85em; color: var(--tb-accent); }
.tb4-onair-show { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
@keyframes tb4-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tb-accent) 60%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.tb4-listen {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px;
  background: var(--tb-btn-bg); color: var(--tb-btn-text); border-radius: var(--tb-btn-radius);
  font-weight: 600; font-size: .9em; text-decoration: none; white-space: nowrap; transition: transform .15s, filter .15s;
}
.tb4-listen:hover { filter: brightness(1.08); transform: translateY(-1px); }
.tb4-listen-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--tb-btn-text) 18%, transparent); }
.tb4-listen .i-pause, .tb4-listen.is-playing .i-play { display: none; }
.tb4-listen.is-playing .i-pause { display: block; }

.tb4-burger { display: none; background: none; border: 0; color: var(--tb-text); padding: 8px; cursor: pointer; }
.tb4-burger .i-close, .tb4.is-open .tb4-burger .i-open { display: none; }
.tb4.is-open .tb4-burger .i-close { display: block; }

@media (max-width: 1240px) {
  .tb4-onair { display: none; }
}
@media (max-width: 1040px) {
  .tb4-menu a { padding: 10px 9px; }
  .tb4-inner { gap: 16px; }
}
@media (max-width: 860px) {
  .tb4-inner { gap: 12px; }
  .tb4-burger { display: block; }
  .tb4-nav {
    position: absolute; left: 0; right: 0; top: 100%; display: none;
    background: var(--tb-bg); border-top: 1px solid color-mix(in srgb, var(--tb-text) 10%, transparent);
    padding: 12px 20px 24px; box-shadow: 0 24px 40px rgba(0,0,0,.25);
  }
  .tb4.is-open .tb4-nav { display: block; }
  .tb4-menu { flex-direction: column; gap: 2px; }
  .tb4-menu a { padding: 14px 4px; border-radius: 0; font-size: 1.1em; border-bottom: 1px solid color-mix(in srgb, var(--tb-text) 8%, transparent); }
  .tb4-menu a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--tb-accent); padding-left: 14px; }
  .tb4-sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 0 16px; }
  .tb4-live { margin-left: auto; }
}
@media (max-width: 480px) {
  .tb4-listen { padding: 6px; }
  .tb4-listen > span:last-child { display: none; }
}