:root,
[data-theme="dark"] {
  --bg-primary: #0f1115;
  --bg-card: #181b22;
  --bg-display: #080c0e;
  --text-primary: #e6edf3;
  --text-muted: #8b949e;
  --color-amber: #ffb800;
  --color-cyan: #00e5ff;
  --color-green: #2ecc71;
  --color-red: #ff334b;
  --border-color: #30363d;
  --bg-monitor: #1c2823;
  --border-monitor: #2b3a32;
  --bg-monitor-table: #0f1512;
  --bg-monitor-row-even: #131a16;
  --bg-monitor-row-hover: #1a251f;
  --bg-monitor-header: #141c17;
  --ptt-inactive: #2d333b;
  --ptt-active: #d62828;
  --vu-
  --vu-period: 5.142857px;
  --vu-tick-color: #334155;
}

[data-theme="light"],
.theme-light {
  --bg-primary: #eef2f6;
  --bg-card: #ffffff;
  --bg-display: #080c14; /* Authentic OLED/LCD dark display */
  --text-primary: #1f2328;
  --text-muted: #57606a;
  --color-amber: #d97706;
  --color-cyan: #0284c7;
  --color-green: #16a34a;
  --color-red: #dc2626;
  --border-color: #d0d7de;
  --bg-monitor: #f2f7f4;
  --border-monitor: #c8d8cf;
  --bg-monitor-table: #ffffff;
  --bg-monitor-row-even: #f8faf9;
  --bg-monitor-row-hover: #eef5f1;
  --bg-monitor-header: #e8f1ec;
  --ptt-inactive: #f0f2f5;
  --ptt-active: #dc2626;
  --vu-tick-color: #64748b;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  background-color: var(--bg-primary);
  background-image: url('/static/img/bg-pattern-night.jpg');
  background-repeat: repeat;
  background-position: 0 0;
  background-size: var(--bg-pattern-size, 450px 450px);
  background-attachment: fixed;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 20px 14px;
  user-select: none;
  -webkit-user-select: none;
  overflow-x: auto;
}

.app-dashboard {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20px;
  width: 100%;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
}

.radios-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  flex: 0 1 auto;
  min-width: 0;
}

@media (max-width: 768px) {
  body {
    padding: 5px 8px !important;
  }

  .app-dashboard {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 5px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .radios-grid {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 5px !important;
    box-sizing: border-box !important;
  }

  .radio-container:not(.collapsed),
  .radio-container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
  }
}

.radio-container {
  width: 436px;
  flex: 0 0 436px;
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  padding: 4px 5px 10px 5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  height: fit-content;
  align-self: flex-start;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.radio-container.active-hotspot {
  border-color: rgba(0, 229, 255, 0.65);
  box-shadow: 0 0 24px rgba(0, 229, 255, 0.22), 0 16px 40px rgba(0, 0, 0, 0.6);
}


/* Collapsed Hotspot State (Micro-Panel) */
.radio-container.collapsed {
  min-height: 0 !important;
  height: auto !important;
  width: max-content !important;
  width: -moz-max-content !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  padding: 4px 8px !important;
  gap: 0 !important;
  border-radius: 12px !important;
  border: 2px solid rgba(0, 229, 255, 0.7) !important;
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.18), 0 8px 24px rgba(0, 0, 0, 0.5) !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

.radio-container.collapsed > *:not(.radio-header) {
  display: none !important;
}

.radio-container.collapsed .radio-header {
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  border: none !important;
  display: block !important;
  overflow: visible !important;
}

.radio-container.collapsed .header-brand-row {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  max-width: none !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

.radio-container.collapsed .brand-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  min-width: max-content !important;
  max-width: none !important;
  width: auto !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.radio-container.collapsed .brand-logo-wrap,
.radio-container.collapsed .header-clocks,
.radio-container.collapsed .hotspot-delete-btn,
.radio-container.collapsed .fullscreen-toggle-btn:not(.android-exit-btn),
.radio-container.collapsed .header-transcribe-btn {
  display: none !important;
}

.radio-container.collapsed .hotspot-name-badge {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  line-height: 1.3 !important;
}

.radio-container.collapsed:not(.live-collapsed) .hotspot-name-badge,
.radio-container.collapsed:not(.live-collapsed) .hotspot-name-badge.is-online {
  background: #161b22 !important;
  border: 1px solid #30363d !important;
  color: #c9d1d9 !important;
  box-shadow: none !important;
}

/* Hotspot Collapse / Expand Button */
.hotspot-collapse-btn {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer;
  padding: 3px 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ff3b30;
  transition: transform 0.2s ease, color 0.15s ease, background 0.15s ease;
  border-radius: 6px;
  margin: 0 4px 0 0;
  flex: 0 0 auto;
  line-height: 1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.hotspot-collapse-btn:hover {
  color: #ff6b6b;
  background: rgba(255, 59, 48, 0.15) !important;
}

.hotspot-collapse-btn:active {
  transform: scale(0.92);
}

.hotspot-collapse-btn .collapse-icon {
  display: block;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
  pointer-events: none;
}

.radio-container.collapsed .hotspot-collapse-btn {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  margin: 0 4px 0 0 !important;
  padding: 3px 6px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  flex: 0 0 auto !important;
  color: #ff3b30 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

.radio-container.collapsed .hotspot-collapse-btn .collapse-icon {
  transform: rotate(-90deg) !important;
  stroke: #ff3b30 !important;
  stroke-width: 3.5 !important;
  pointer-events: none !important;
}

.hotspot-delete-btn {
  background: transparent;
  border: 1px solid rgba(248, 81, 73, 0.3);
  color: #ff7b72;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
  transition: all 0.15s ease;
}

.hotspot-delete-btn:hover {
  background: rgba(248, 81, 73, 0.25);
  border-color: #f85149;
  color: #fff;
}

/* Top Header */
.radio-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-bottom: none;
  padding: 2px 2px 0 2px;
}

/* Row 1: Brand & Version */
.header-brand-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 8px;
}

/* Day / Night Theme Toggle Button */
.theme-toggle-btn {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #ffd600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  flex-shrink: 0;
  margin-left: auto;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
  position: relative;
}

.theme-toggle-btn:hover {
  background: rgba(255, 214, 0, 0.16);
  border-color: rgba(255, 214, 0, 0.45);
  color: #ffe033;
  box-shadow: 0 0 8px rgba(255, 214, 0, 0.3);
}

.theme-toggle-btn:active {
  transform: scale(0.92);
}

.theme-toggle-btn .theme-icon {
  display: block;
  pointer-events: none;
}

/* Toggle icon display based on active theme */
[data-theme="light"] .theme-toggle-btn .icon-moon,
.theme-light .theme-toggle-btn .icon-moon {
  display: none !important;
}

[data-theme="light"] .theme-toggle-btn .icon-sun,
.theme-light .theme-toggle-btn .icon-sun {
  display: block !important;
}

:root:not([data-theme="light"]) .theme-toggle-btn .icon-moon,
[data-theme="dark"] .theme-toggle-btn .icon-moon {
  display: block !important;
}

:root:not([data-theme="light"]) .theme-toggle-btn .icon-sun,
[data-theme="dark"] .theme-toggle-btn .icon-sun {
  display: none !important;
}

.header-brand-row > .theme-toggle-btn {
  margin-left: auto;
}

.header-brand-row > .fullscreen-toggle-btn {
  margin-left: auto;
}

.header-brand-row > .theme-toggle-btn ~ .header-settings-btn,
.header-brand-row > .theme-toggle-btn ~ .fullscreen-toggle-btn,
.header-brand-row > .header-settings-btn ~ .fullscreen-toggle-btn {
  margin-left: 0;
}

/* Settings button displayed on all hotspot cards */
.radio-container .header-settings-btn {
  display: inline-flex;
}

.header-clocks {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background: rgba(0, 0, 0, 0.35);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  user-select: none;
  margin-left: auto;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.header-clock-line {
  display: flex;
  align-items: center;
  
  line-height: 1.25;
}

.header-clock-line .clock-label {
  color: var(--text-muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.header-clock-line .clock-val {
  color: var(--color-cyan);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Fullscreen Toggle Button */
.fullscreen-toggle-btn {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #8b949e;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
  user-select: none;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.fullscreen-toggle-btn:hover {
  background: rgba(56, 139, 253, 0.18);
  border-color: rgba(56, 139, 253, 0.45);
  color: #58a6ff;
}

.fullscreen-toggle-btn:active {
  transform: scale(0.92);
}

.fullscreen-toggle-btn.is-fullscreen {
  color: #2ea043;
  border-color: rgba(46, 160, 67, 0.45);
  background: rgba(46, 160, 67, 0.18);
  box-shadow: 0 0 6px rgba(46, 160, 67, 0.35);
}

.fullscreen-toggle-btn .fullscreen-icon {
  display: block;
  pointer-events: none;
}

/* Header Settings Button (Gear icon in card header) */
.header-settings-btn {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #8b949e;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
  position: relative;
}

.header-settings-btn:hover {
  background: rgba(56, 189, 248, 0.18);
  border-color: rgba(56, 189, 248, 0.45);
  color: #38bdf8;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.3);
}

.header-settings-btn:active {
  transform: scale(0.92);
}

.header-settings-btn .settings-icon {
  display: block;
  pointer-events: none;
  transition: transform 0.3s ease;
}

.header-settings-btn:hover .settings-icon {
  transform: rotate(45deg);
}

/* Android APK: exit button replacing fullscreen on main card */
.fullscreen-toggle-btn.android-exit-btn {
  color: #f85149;
  border-color: rgba(248, 81, 73, 0.4);
  background: rgba(248, 81, 73, 0.12);
}
.fullscreen-toggle-btn.android-exit-btn:hover,
.fullscreen-toggle-btn.android-exit-btn:active {
  background: rgba(248, 81, 73, 0.25);
  border-color: rgba(248, 81, 73, 0.6);
}

/* Hide fullscreen buttons in APK mode across all hotspot card modes */
html.is-apk-mode .fullscreen-toggle-btn:not(.android-exit-btn),
body.is-apk-mode .fullscreen-toggle-btn:not(.android-exit-btn),
.radio-container.collapsed .fullscreen-toggle-btn:not(.android-exit-btn) {
  display: none !important;
}

/* In APK mode: hide remember-me row as mobile app session is permanent */
html.is-apk-mode #authRememberRow,
body.is-apk-mode #authRememberRow {
  display: none !important;
}

/* Header Settings Gear: Only on first / primary hotspot and always visible */
.radio-container:not(#radioContainer):not(:first-of-type) .header-settings-btn {
  display: none !important;
}
#radioContainer .header-settings-btn,
.radio-container:first-of-type .header-settings-btn {
  display: inline-flex !important;
}
#radioContainer.collapsed .header-settings-btn,
.radio-container.collapsed:first-of-type .header-settings-btn {
  display: inline-flex !important;
}

/* Ensure Android exit button is always visible on first hotspot in APK mode (even when collapsed) */
body.is-apk-mode #radioContainer .android-exit-btn,
body.is-apk-mode .radio-container:first-of-type .android-exit-btn,
body.is-apk-mode #radioContainer.collapsed .android-exit-btn,
body.is-apk-mode .radio-container.collapsed:first-of-type .android-exit-btn {
  display: inline-flex !important;
}

/* Volume Up / Down -> PTT option: visible strictly in APK version */
#groupVolumeUpPtt,
#groupVolumeDownPtt {
  display: none !important;
}

html.is-apk-mode #groupVolumeUpPtt,
body.is-apk-mode #groupVolumeUpPtt,
html.is-apk-mode #groupVolumeDownPtt,
body.is-apk-mode #groupVolumeDownPtt {
  display: block !important;
}

/* Android settings checkboxes: always stacked vertically (block layout) */
#groupHapticFeedback,
#groupSyncSystemVolume {
  display: block !important;
}


.brand-title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 1.8px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  min-width: 0;
  flex: 1 1 auto;
}

.brand-logo-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: -12px;
  cursor: pointer;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-x pan-y;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.brand-logo-holding {
  opacity: 0.7;
  transform: scale(0.96);
}

.brand-logo-img {
  height: 16px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  display: block;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(255, 87, 34, 0.25));
  transition: transform 0.2s ease, filter 0.2s ease;
}

.brand-logo-img.brand-logo-light {
  display: none;
}

.brand-logo-wrap:hover .brand-logo-img,
.brand-logo-wrap:focus-visible .brand-logo-img,
.brand-title:hover .brand-logo-img {
  transform: scale(1.03);
  filter: drop-shadow(0 0 10px rgba(255, 87, 34, 0.45));
}

.brand-text {
  display: inline-flex;
  align-items: center;
  color: #f0f6fc;
  flex-shrink: 0;
}

.brand-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.brand-x-flag {
  width: 0.82em;
  height: 0.82em;
  vertical-align: -0.04em;
  display: inline-block;
  margin: 0 0.5px;
  filter: drop-shadow(0 0 6px rgba(0, 51, 160, 0.45));
  transition: transform 0.2s ease, filter 0.2s ease;
}

.brand-title:hover .brand-x-flag {
  transform: scale(1.08);
  filter: drop-shadow(0 0 8px rgba(88, 166, 255, 0.6));
}

.brand-accent {
  color: #ff5722;
  text-shadow: 0 0 12px rgba(255, 87, 34, 0.45);
}

.brand-badge {
  background: linear-gradient(135deg, #ff5722, #e64a19);
  color: #fff;
  font-size: 0.65rem;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 800;
  letter-spacing: 1.2px;
  box-shadow: 0 2px 8px rgba(255, 87, 34, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.15);
  white-space: nowrap;
}

.badge-about-ver {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  font-size: 0.58rem; /* Уменьшено на 2 пункта (было 0.70rem) */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: inline-block;
  vertical-align: middle;
}

.badge-about-date {
  background: rgba(88, 166, 255, 0.08);
  color: #58a6ff;
  font-size: 0.56rem; /* Уменьшено на 2 пункта (было 0.68rem) */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 500;
  border: 1px solid rgba(88, 166, 255, 0.22);
  display: inline-block;
  vertical-align: middle;
}

.badge-about-apk-ver,
.badge-about-apk-date {
  display: none;
}

body.is-apk-mode .badge-about-apk-ver,
body.is-apk-mode .badge-about-apk-date {
  display: inline-block;
}

.brand-version,
.hotspot-name-badge {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  font-size: 0.84rem; /* Увеличено на 2 пункта (было 0.70rem) */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
  display: inline-block;
  vertical-align: middle;
  line-height: 1.25;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

/* Green online state when link with GW + BM is active (uncollapsed or live-collapsed) */
.radio-container:not(.collapsed) .hotspot-name-badge.is-online,
.radio-container.collapsed.live-collapsed .hotspot-name-badge.is-online {
  background: #238636 !important;
  color: #ffffff !important;
  border-color: #2ea043 !important;
  box-shadow: 0 0 8px rgba(46, 160, 67, 0.45) !important;
}

.hotspot-name-badge:not(.is-online),
.radio-container.collapsed:not(.live-collapsed) .hotspot-name-badge,
.radio-container.collapsed:not(.live-collapsed) .hotspot-name-badge.is-online {
  background: #161b22 !important;
  color: var(--text-muted) !important;
  border-color: #30363d !important;
  box-shadow: none !important;
}

/* Row 2: Controls Toolbar */
.header-toolbar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.hotspot-select-wrapper {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

.header-hotspot-select {
  width: 100%;
  height: 36px;
  background-color: #238142 !important;
  background: #238142 !important;
  border: 1px solid #1c6634 !important;
  color: #ffffff !important;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0 10px;
  border-radius: 8px;
  cursor: pointer;
  outline: none;
  transition: all 0.2s;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  color-scheme: dark;
}

.header-hotspot-select:hover,
.header-hotspot-select:focus {
  border-color: #38d672 !important;
  background: #2a944d !important;
  color: #ffffff !important;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.header-log-btn {
  width: auto;
  padding: 0 10px;
  font-size: 0.8rem;
  font-weight: 600;
  
}

.icon-btn {
  background: #161b22;
  border: 2px solid var(--border-color);
  color: var(--text-muted);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.icon-btn:hover {
  color: #fff;
  border-color: #58a6ff;
  background: #1c2128;
}

/* BrandMeister Server Info Banner: Flag + Short Name + SVG Ping Sparkline + Ping Value */
.bm-info-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 44px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 4px 8px;
  box-sizing: border-box;
  user-select: none;
  flex: 0 0 auto;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bm-info-banner:hover {
  border-color: rgba(0, 229, 255, 0.4);
}

.bm-server-label-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  max-width: 140px;
  height: 28px;
  position: relative;
  cursor: pointer;
  padding: 1px 5px;
  border-radius: 6px;
  background: #238142 !important;
  border: 1px solid #1c6634 !important;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.bm-server-label-wrap:hover {
  background: #2a944d !important;
  border-color: #38d672 !important;
}

.bm-server-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.bm-server-flag .flag-badge {
  display: inline-flex;
  margin: 0;
  padding: 0;
}

.bm-server-flag .flag-svg,
.bm-server-flag img {
  width: 16px;
  height: 12px;
  border-radius: 2px;
  display: block;
}

.bm-server-name {
  font-size: 0.76rem;
  font-weight: 700;
  color: #ffffff !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 95px;
  line-height: 1.2;
}

.bm-server-dropdown-arrow {
  font-size: 0.65rem;
  color: #ffffff !important;
  flex-shrink: 0;
  line-height: 1;
  margin-left: -1px;
}

.bm-server-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 5;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

/* All dropdown menus (closed state / single row with selected item) */
select:not(.bm-server-select),
select.form-input,
.form-select,
.tts-quick-select,
.bm-preset-select,
.gw-hotspot-select,
.routing-select,
.bm-country-select,
.header-hotspot-select,
.onboarding-select,
.quick-contact-select,
#editHsMasterSelect,
#editHsSelect,
#optLanguage,
#optTtsEngine,
#optTtsModel,
#optTtsVoice,
#optTtsStyle,
#optTranscriberModel,
#optTranscriberTargetLang,
#adminNewRole,
#selOfflineTranscribeHotspot,
#contactsGwHotspotSelect,
#contactEditParentSelect,
#contactEditSlot,
#proposalHotspotSelect,
#directCallHsSelect {
  background-color: #238142 !important;
  background: #238142 !important;
  color: #ffffff !important;
  border: 1px solid #1c6634 !important;
  color-scheme: dark;
}

select:not(.bm-server-select):hover,
select.form-input:hover,
.form-select:hover,
.tts-quick-select:hover,
.bm-preset-select:hover,
.gw-hotspot-select:hover,
.routing-select:hover,
.header-hotspot-select:hover {
  background-color: #2a944d !important;
  background: #2a944d !important;
  border-color: #38d672 !important;
}

select:not(.bm-server-select):focus,
select.form-input:focus,
.form-select:focus,
.tts-quick-select:focus,
.bm-preset-select:focus,
.gw-hotspot-select:focus,
.routing-select:focus,
.header-hotspot-select:focus {
  background-color: #238142 !important;
  background: #238142 !important;
  border-color: #4ade80 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.3) !important;
}

select option,
select optgroup,
.bm-server-select option,
.bm-country-select option,
#editHsMasterSelect option,
.form-select option,
.tts-quick-select option,
.gw-hotspot-select option,
.routing-select option {
  background-color: #238142 !important;
  background: #238142 !important;
  color: #ffffff !important;
  padding: 6px 10px;
  font-size: 0.85rem;
}

select option:checked,
select option:hover,
select option:focus {
  background-color: #1b6433 !important;
  background: #1b6433 !important;
  color: #ffffff !important;
}

/* SVG Ping Sparkline Chart Container */
.bm-ping-chart-wrap {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 60px;
  height: 36px;
  position: relative;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 6px;
  padding: 1px 2px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-sizing: border-box;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.bm-ping-chart-wrap:hover {
  border-color: rgba(0, 229, 255, 0.35);
  background: rgba(0, 0, 0, 0.5);
}

.bm-ping-sparkline {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.sparkline-line {
  stroke-width: 1.6px;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 1.5px rgba(34, 197, 94, 0.45));
}

.sparkline-area {
  opacity: 0.95;
}

.sparkline-dot {
  filter: drop-shadow(0 0 3px #2ecc71);
  transition: cx 0.2s ease, cy 0.2s ease;
}

.bm-ping-scale-badge {
  position: absolute;
  left: 4px;
  top: 3px;
  right: auto;
  bottom: auto;
  font-size: 0.58rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  color: #8b949e;
  background: rgba(15, 17, 21, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  padding: 1px 4px;
  line-height: 1.1;
  pointer-events: auto;
  user-select: none;
  z-index: 5;
  opacity: 0.45;
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.bm-ping-scale-badge:hover {
  opacity: 1;
  color: #00e5ff;
  border-color: rgba(0, 229, 255, 0.7);
  background: #0f1115;
  box-shadow: 0 0 6px rgba(0, 229, 255, 0.25);
}

.bm-ping-tooltip {
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  background: #161b22;
  color: #e6edf3;
  border: 1px solid #30363d;
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 0.68rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 30;
}

.bm-ping-tooltip.visible {
  opacity: 1;
  visibility: visible;
}

.bm-banner-ping {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  line-height: 1.15;
  flex-shrink: 0;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  min-width: 50px;
  transition: opacity 0.15s ease, transform 0.1s ease;
}

.bm-banner-ping:hover {
  opacity: 0.88;
}

.bm-banner-ping:active {
  transform: scale(0.96);
}

.bm-banner-ping .ping-val-row {
  font-size: 0.80rem;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: #3fb950;
  line-height: 1.1;
  transition: color 0.2s ease;
}

.bm-banner-ping .ping-val-row.ping-good {
  color: #3fb950;
}

.bm-banner-ping .ping-val-row.ping-warn {
  color: #d29922;
}

.bm-banner-ping .ping-val-row.ping-poor {
  color: #f85149;
}

.bm-banner-ping .loss-val-row {
  font-size: 0.80rem; /* такой же как у пинга */
  font-weight: 700; /* такой же жирный как у пинга */
  letter-spacing: -0.2px;
  color: #79c0ff; /* чуть светлей-ярче в том же цветовом тоне */
  line-height: 1.1;
  transition: color 0.2s ease;
}

.bm-banner-ping .loss-val-row.loss-warn {
  color: #e3b341;
}

.bm-banner-ping .loss-val-row.loss-poor {
  color: #f85149;
}

/* Sparkline Chart Mode Badge: BM vs GW (Client <-> ProxDMR) */
.bm-ping-mode-badge {
  position: absolute;
  right: 4px;
  top: 3px;
  font-size: 0.56rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  color: #2ecc71;
  background: rgba(15, 17, 21, 0.45);
  border: 1px solid rgba(46, 204, 113, 0.4);
  border-radius: 3px;
  padding: 1px 4px;
  line-height: 1.1;
  pointer-events: auto;
  user-select: none;
  z-index: 5;
  opacity: 0.65;
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.bm-ping-chart-wrap:hover .bm-ping-mode-badge {
  opacity: 1;
}

.bm-ping-mode-badge.mode-client {
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.45);
  background: rgba(15, 17, 21, 0.55);
}

.bm-ping-chart-wrap {
  cursor: pointer;
}

/* OLED / LCD Display Screen */
.radio-screen {
  background: var(--bg-display);
  border: 3px solid #1f6feb;
  border-radius: 10px;
  padding: 4px !important;
  display: flex;
  flex-direction: column;
  gap: 4px !important;
  /* 3D Sunken / Recessed effect: dark inset shadows top-left, subtle light bottom-right */
  box-shadow:
    inset 3px 3px 8px rgba(0, 0, 0, 0.7),
    inset 1px 1px 3px rgba(0, 0, 0, 0.5),
    inset -2px -2px 6px rgba(255, 255, 255, 0.04),
    0 0 10px rgba(31, 111, 235, 0.35);
  position: relative;
  overflow: visible !important;
  z-index: 60;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.radio-screen::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(31, 111, 235, 0.8), transparent);
}

/* Dual Station Clock Bar: LOC (left) & UTC (right) on top of OLED screen */
.screen-clock-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1px 2px 0 2px !important;
  margin: 0 !important;
  border-bottom: none !important;
  user-select: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  line-height: 1.2;
}

.screen-clock-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  padding: 1px 5px;
  border-radius: 4px;
  transition: all 0.15s ease;
  user-select: none;
  border: 1px solid transparent;
  flex-shrink: 0;
}

.screen-clock-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.screen-clock-item.active {
  background: rgba(0, 229, 255, 0.16);
  border-color: rgba(0, 229, 255, 0.55);
  box-shadow: 0 0 6px rgba(0, 229, 255, 0.35);
}

.screen-clock-item .clock-label {
  color: var(--text-muted);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: color 0.15s ease;
}

.screen-clock-item.active .clock-label {
  color: #ffffff;
}

.screen-clock-item .clock-val {
  color: var(--color-cyan);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-shadow: 0 0 4px rgba(0, 229, 255, 0.35);
  transition: all 0.15s ease;
}

.screen-clock-item.active .clock-val {
  color: #00f0ff;
  text-shadow: 0 0 6px rgba(0, 240, 255, 0.7);
}

.screen-clock-item:not(.active) {
  opacity: 0.72;
}

.screen-clock-item:not(.active):hover {
  opacity: 1;
}

/* Header Dual VU Meter between LOC & UTC clocks */
.screen-clock-vu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 60px;
  margin: 0 8px;
  user-select: none;
}

.clock-vu-track {
  position: relative;
  width: 100%;
  height: 7px;
  min-height: 7px;
  max-height: 7px;
  background-color: #1c2534;
  border: none !important;
  border-radius: 0;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: none !important;
  outline: none !important;
  -webkit-mask-image: repeating-linear-gradient(to right, #000 0px, #000 5px, transparent 5px, transparent 7px);
  mask-image: repeating-linear-gradient(to right, #000 0px, #000 5px, transparent 5px, transparent 7px);
}

.clock-vu-track::after {
  display: none !important;
}

.clock-vu-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 100%;
  transition: width 0.04s linear;
  z-index: 1;
}

.clock-vu-fill.vu-fill-ts1 {
  background-color: #00dbf7;
  box-shadow: none;
}

.clock-vu-fill.vu-fill-ts2 {
  background-color: #f98700;
  box-shadow: none;
}

.clock-vu-peak {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  margin-left: -1px;
  background-color: #ffffff;
  box-shadow: 0 0 3px #ffffff;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.clock-vu-peak.vu-peak-overload {
  background-color: #ff3860;
  box-shadow: 0 0 4px #ff3860;
}

/* Light mode for header clock VU meter */
[data-theme="light"] .clock-vu-track {
  background-color: #cbd5e1 !important;
  border: none !important;
  box-shadow: none !important;
}

[data-theme="light"] .clock-vu-track::after {
  display: none !important;
}

[data-theme="light"] .clock-vu-fill.vu-fill-ts1 {
  background-color: #0284c7;
  box-shadow: none;
}

[data-theme="light"] .clock-vu-fill.vu-fill-ts2 {
  background-color: #ea580c;
  box-shadow: none;
}

[data-theme="light"] .clock-vu-peak {
  background-color: #0f172a;
  box-shadow: 0 0 2px rgba(15, 23, 42, 0.6);
}

[data-theme="light"] .clock-vu-peak.vu-peak-overload {
  background-color: #dc2626;
  box-shadow: 0 0 4px rgba(220, 38, 38, 0.85);
}


/* Disconnected from BM: match volume regulator desaturated state */
.card-bm-disconnected .radio-screen,
.radio-container.card-bm-disconnected .radio-screen,
.card-bm-disconnected .ptt-button,
.card-bm-disconnected .quick-tg-box {
  border-color: #485260 !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.7) !important;
}

.card-bm-disconnected .radio-screen::before,
.radio-container.card-bm-disconnected .radio-screen::before {
  background: linear-gradient(90deg, transparent, rgba(140, 150, 160, 0.4), transparent) !important;
}

.screen-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: monospace;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  line-height: 20px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.rtt-display {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-family: monospace;
  opacity: 0.85;
}

.mode-badge {
  font-weight: bold;
  font-size: 0.70rem;
  height: 18px;
  line-height: 18px;
  width: 84px;
  min-width: 84px;
  max-width: 84px;
  padding: 0 4px;
  box-sizing: border-box;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 4px;
}

.mode-standby { background: #21262d; color: #8b949e; }
.mode-tx { background: var(--color-red); color: #fff; animation: blink 0.8s infinite; }
.mode-rx { background: var(--color-green); color: #000; animation: blink 0.8s infinite; }

@keyframes blink {
  50% { opacity: 0.5; }
}

.screen-main {
  text-align: center;
  padding: 4px 0;
}

.tg-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 1px;
}

.tg-number {
  font-size: 2.2rem;
  font-family: "Courier New", Courier, monospace;
  font-weight: 900;
  color: var(--color-amber);
  text-shadow: 0 0 10px rgba(255, 184, 0, 0.3);
  letter-spacing: 2px;
}

.tg-name {
  font-size: 0.95rem;
  color: var(--color-cyan);
  font-weight: 600;
}

.screen-bottom-bar {
  display: flex;
  flex-direction: column;
  border-top: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.screen-status-list {
  display: flex;
  flex-direction: column;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  min-width: 0;
}

.screen-status-main {
  display: flex;
  flex-direction: column;
  
  min-width: 0;
  width: 100%;
}

/* Line 1: Status badges on left, Mic loop & AGC on right */
.status-badges-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  flex-wrap: nowrap;
  height: 20px;
}

.status-badges-group {
  display: inline-flex;
  align-items: center;
  
  flex-shrink: 0;
  height: 20px;
}

.status-badge-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  border-radius: 4px;
  width: 74px;
  flex: 0 0 74px;
  box-sizing: border-box;
  transition: transform 0.1s ease, filter 0.15s ease;
}

.status-badge-item:hover {
  transform: translateY(-1px);
  filter: brightness(1.2);
}

.status-badge-item:active {
  transform: scale(0.96);
}

/* Checkboxes group on right: Mic loop on left, AGC on right */
.status-toggles-group {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  height: 20px;
  white-space: nowrap;
}

.status-toggles-group .toggle-control {
  margin: 0;
  display: inline-flex;
  align-items: center;
  
  cursor: pointer;
  user-select: none;
  font-size: 0.74rem;
  color: var(--text-muted, #8b949e);
  transition: color 0.15s ease;
  width: auto;
  height: 20px;
  line-height: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

.status-toggles-group .toggle-control:hover {
  color: var(--text-primary, #e6edf3);
}

.status-toggles-group .toggle-control input[type="checkbox"] {
  cursor: pointer;
  accent-color: #58a6ff;
  transform: scale(1.1);
  margin: 0;
}

/* TS1/2 Audio Mode 3-state Toggle Badge Button */
.status-badge-item.ts-audio-mode-btn {
  width: auto;
  min-width: 88px;
  flex: 0 0 auto;
  cursor: pointer;
  user-select: none;
  height: 20px;
}

.ts-audio-mode-badge {
  font-family: var(--font-mono, monospace);
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0.1px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.25;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  user-select: none;
  height: 18px;
  box-sizing: border-box;
}

/* Solo: Cyan / sky blue highlight */
.ts-audio-mode-badge.ts-mode-solo {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.5);
  box-shadow: 0 0 5px rgba(56, 189, 248, 0.25);
}

/* Doubl: Violet / purple highlight */
.ts-audio-mode-badge.ts-mode-doubl {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  border-color: rgba(168, 85, 247, 0.5);
  box-shadow: 0 0 5px rgba(168, 85, 247, 0.25);
}

/* Auto: Green / emerald highlight */
.ts-audio-mode-badge.ts-mode-auto {
  background: rgba(46, 204, 113, 0.12);
  color: #2ecc71;
  border-color: rgba(46, 204, 113, 0.5);
  box-shadow: 0 0 5px rgba(46, 204, 113, 0.25);
}

.status-badge-item.ts-audio-mode-btn:hover .ts-audio-mode-badge {
  filter: brightness(1.25);
  transform: translateY(-1px);
}

.status-badge-item.ts-audio-mode-btn:active .ts-audio-mode-badge {
  transform: scale(0.96);
}

/* Line 2: 3 Action Pairs (DSD-FME, Audio RX, Audio TX with Mini-Preset Dropdowns) */
.status-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding-top: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

.status-actions-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 6px;
  height: 22px;
  overflow: visible !important;
}

.control-pair-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  height: 22px;
  border-radius: 4px;
  overflow: visible !important;
  /* 3D Raised control pair effect */
  box-shadow:
    -1px -1px 2px rgba(255, 255, 255, 0.05),
    1px 1px 3px rgba(0, 0, 0, 0.4);
}

.control-pair-btn.open {
  z-index: 1200 !important;
}

.btn-action-trigger {
  flex: 1 1 auto;
  min-width: 0;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  padding: 0 6px;
  border-radius: 4px 0 0 4px;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: all 0.15s ease;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-action-icon {
  font-size: 0.72rem;
  line-height: 1;
  flex-shrink: 0;
}

.btn-action-label {
  font-size: 0.66rem;
  letter-spacing: 0.2px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preset-dropdown-wrapper {
  position: relative !important;
  overflow: visible !important;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.btn-mini-preset {
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 5px;
  border-radius: 0 4px 4px 0;
  border-left: none !important;
  font-size: 0.68rem;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: all 0.15s ease;
}

.btn-mini-preset .mini-preset-caret {
  font-size: 0.58rem;
  line-height: 1;
  opacity: 0.8;
  margin-left: 1px;
}

/* 1. DSD-FME Pair Accent (ambe+ RX: #0d3c68) */
.dsd-pair .btn-action-trigger {
  background: #0d3c68;
  border: 1px solid #092c4d;
  color: #ffffff;
}
.dsd-pair .btn-action-trigger:hover {
  background: #134e85;
  border-color: #0d3c68;
  color: #ffffff;
}
.dsd-pair .btn-mini-preset {
  background: #0b3359;
  border: 1px solid #092c4d;
  color: #ffffff;
}
.dsd-pair .btn-mini-preset:hover,
.dsd-pair .btn-mini-preset.active {
  background: #082642;
  border-color: #061c31;
  color: #ffffff;
}

/* 2. Audio RX Pair Accent (Audio RX: #0d6527) */
.audio-rx-pair .btn-action-trigger {
  background: #0d6527;
  border: 1px solid #0a4e1e;
  color: #ffffff;
}
.audio-rx-pair .btn-action-trigger:hover {
  background: #127e32;
  border-color: #0d6527;
  color: #ffffff;
}
.audio-rx-pair .btn-mini-preset {
  background: #0b5722;
  border: 1px solid #0a4e1e;
  color: #ffffff;
}
.audio-rx-pair .btn-mini-preset:hover,
.audio-rx-pair .btn-mini-preset.active {
  background: #083e18;
  border-color: #062c11;
  color: #ffffff;
}

/* 3. Audio TX Pair Accent (Audio TX: #66120e) */
.audio-tx-pair .btn-action-trigger {
  background: #66120e;
  border: 1px solid #4f0e0b;
  color: #ffffff;
}
.audio-tx-pair .btn-action-trigger:hover {
  background: #7f1813;
  border-color: #66120e;
  color: #ffffff;
}
.audio-tx-pair .btn-mini-preset {
  background: #58100c;
  border: 1px solid #4f0e0b;
  color: #ffffff;
}
.audio-tx-pair .btn-mini-preset:hover,
.audio-tx-pair .btn-mini-preset.active {
  background: #3f0c09;
  border-color: #2c0806;
  color: #ffffff;
}

/* Dropdown Menu for Presets (Unfolds upwards as a compact button column) */
.preset-dropdown-wrapper {
  position: relative !important;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  overflow: visible !important;
}

.control-pair-btn.open .btn-mini-preset .mini-preset-caret {
  transform: rotate(180deg);
  display: inline-block;
}

.mini-preset-menu {
  display: none !important;
  position: absolute !important;
  bottom: calc(100% + 4px) !important;
  top: auto !important;
  right: 0 !important;
  left: auto !important;
  transform: none !important;
  min-width: 36px !important;
  width: auto !important;
  background: #238142 !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65) !important;
  padding: 3px !important;
  z-index: 1250 !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.mini-preset-menu.show {
  display: flex !important;
  animation: menuFadeInUp 0.15s ease-out;
}

@keyframes menuFadeInUp {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mini-preset-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  padding: 0 4px !important;
  height: 22px !important;
  min-width: 30px !important;
  border-radius: 4px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: all 0.15s ease !important;
  user-select: none !important;
  white-space: nowrap !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.mini-preset-name {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-weight: 700;
  line-height: 1;
}

/* DSD Menu Items */
.dsd-menu .mini-preset-item:hover {
  background: rgba(31, 111, 235, 0.25) !important;
  color: #58a6ff !important;
  border-color: rgba(88, 166, 255, 0.4) !important;
}
.dsd-menu .mini-preset-item.active {
  background: #1f6feb !important;
  color: #ffffff !important;
  border-color: #58a6ff !important;
  box-shadow: 0 0 6px rgba(31, 111, 235, 0.6) !important;
}

/* Audio RX Menu Items */
.audio-rx-menu .mini-preset-item:hover {
  background: rgba(46, 160, 67, 0.25) !important;
  color: #3fb950 !important;
  border-color: rgba(46, 160, 67, 0.4) !important;
}
.audio-rx-menu .mini-preset-item.active {
  background: #238636 !important;
  color: #ffffff !important;
  border-color: #3fb950 !important;
  box-shadow: 0 0 6px rgba(46, 160, 67, 0.6) !important;
}

/* Audio TX Menu Items */
.audio-tx-menu .mini-preset-item:hover {
  background: rgba(248, 81, 73, 0.25) !important;
  color: #f85149 !important;
  border-color: rgba(248, 81, 73, 0.4) !important;
}
.audio-tx-menu .mini-preset-item.active {
  background: #da3633 !important;
  color: #ffffff !important;
  border-color: #f85149 !important;
  box-shadow: 0 0 6px rgba(218, 54, 51, 0.6) !important;
}

/* Modal preset buttons */
.btn-audio-rx-preset,
.btn-audio-tx-preset {
  background: rgba(33, 38, 45, 0.85);
  border: 1px solid rgba(88, 166, 255, 0.25);
  color: #c9d1d9;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  padding: 2px 8px;
  height: 24px;
  min-width: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.btn-audio-rx-preset:hover,
.btn-audio-rx-preset.active {
  background: #238636;
  border-color: #3fb950;
  color: #ffffff;
  box-shadow: 0 0 6px rgba(46, 160, 67, 0.45);
}

.btn-audio-tx-preset:hover,
.btn-audio-tx-preset.active {
  background: #da3633;
  border-color: #f85149;
  color: #ffffff;
  box-shadow: 0 0 6px rgba(248, 81, 73, 0.45);
}
.status-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 1px 4px;
  border-radius: 4px;
  min-width: 0;
  line-height: 1.25;
  transition: all 0.15s ease;
}

.status-row.status-interactive,
.status-row[role="button"] {
  cursor: pointer;
  user-select: none;
}

.status-row:hover:not(:has(.toggle-control:hover)) {
  background: rgba(255, 255, 255, 0.04);
}

.status-row:active:not(:has(.toggle-control:active)) {
  transform: scale(0.99);
}

.status-badge, .bm-badge {
  font-family: var(--font-mono, monospace);
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 3px;
  border-radius: 3px;
  letter-spacing: 0.2px;
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  line-height: 1.25;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

/* Offline state: subtle, neat, unobtrusive */
.status-badge.status-offline, .bm-badge.bm-offline {
  background: rgba(255, 255, 255, 0.04);
  color: #8b949e;
  border-color: rgba(255, 255, 255, 0.12);
}

.status-row:hover:not(:has(.toggle-control:hover)) .status-badge.status-offline,
.status-row:hover:not(:has(.toggle-control:hover)) .bm-badge.bm-offline,
.status-badge-item:hover .status-badge.status-offline,
.status-badge-item:hover .bm-badge.bm-offline {
  background: rgba(255, 255, 255, 0.08);
  color: #e6edf3;
  border-color: rgba(255, 255, 255, 0.25);
}

/* Online state: slender, crisp green border, subtle glow, no bulky height */
.status-badge.status-online, .bm-badge.bm-online {
  background: rgba(46, 204, 113, 0.08);
  color: var(--color-green);
  border-color: rgba(46, 204, 113, 0.4);
  box-shadow: 0 0 5px rgba(46, 204, 113, 0.2);
}

.status-row:hover:not(:has(.toggle-control:hover)) .status-badge.status-online,
.status-row:hover:not(:has(.toggle-control:hover)) .bm-badge.bm-online,
.status-badge-item:hover .status-badge.status-online,
.status-badge-item:hover .bm-badge.bm-online {
  background: rgba(46, 204, 113, 0.16);
  border-color: #3fe082;
  box-shadow: 0 0 8px rgba(46, 204, 113, 0.45);
}

/* Connecting state: gentle amber blink */
.status-badge.status-connecting, .bm-badge.bm-connecting {
  background: rgba(255, 184, 0, 0.1);
  color: var(--color-amber);
  border-color: rgba(255, 184, 0, 0.45);
  animation: blink 1s infinite;
  font-size: 0.58rem;
  letter-spacing: -0.2px;
}

/* Error/Auth Failed state */
.status-badge.status-error, .bm-badge.bm-error {
  background: rgba(255, 51, 75, 0.1);
  color: var(--color-red);
  border-color: rgba(255, 51, 75, 0.45);
  font-size: 0.58rem;
  letter-spacing: -0.2px;
}

.status-comment, .bm-detail-text {
  font-family: var(--font-mono, monospace);
  font-size: 0.65rem;
  color: #8b949e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
  transition: color 0.15s ease;
  min-width: 0;
  flex: 1 1 auto;
}

.status-row:hover:not(:has(.toggle-control:hover)) .status-comment,
.status-row:hover:not(:has(.toggle-control:hover)) .bm-detail-text,
.status-row:hover:not(:has(.toggle-control:hover)) .gw-detail-text,
.status-row:hover:not(:has(.toggle-control:hover)) .api-detail-text {
  color: #e6edf3;
}

.screen-bottom-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
}

.screen-clock {
  font-family: "Courier New", monospace;
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

/* Audio VU Meter (Transceiver Segmented Bar) */
.vu-meter-container {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(0, 0, 0, 0.35);
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid #21262d;
}

.vu-meter-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: monospace;
}

.vu-meter-label strong {
  color: var(--color-green);
}

.vu-meter-bar {
  height: 12px;
  background: #111418;
  border: 1px solid #30363d;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  position: relative;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8);
}

.vu-meter-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, 
    #2ea043 0%, 
    #2ea043 65%, 
    #d29922 80%, 
    #f85149 100%
  );
  box-shadow: 0 0 10px rgba(46, 160, 67, 0.4);
  transition: width 0.05s linear;
}

/* Transceiver LED segmented scale lines */
.vu-meter-bar::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent var(--vu-gap, 4px),
    var(--vu-tick-color, #334155) var(--vu-gap, 4px),
    var(--vu-tick-color, #334155) var(--vu-period, 5.142857px)
  );
  pointer-events: none;
  z-index: 3;
}

/* Transceiver Middle Row: OLED Display + Vertical Volume Slider Strip */
.transceiver-middle-row {
  display: flex;
  align-items: stretch;
  gap: 3px;
  width: 100%;
  flex: 0 0 auto;
  height: auto;
}

.transceiver-middle-row .radio-screen {
  flex: 1 1 auto;
  min-width: 0;
  height: auto;
}

.vertical-volume-strip {
  flex: 0 0 38px;
  width: 38px;
  background: #0d2818;
  background: linear-gradient(180deg, #0e291b 0%, #06150c 100%);
  border: 2px solid #1f6feb;
  border-radius: 10px;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 8px rgba(31, 111, 235, 0.25);
  padding: 4px 2px 4px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  position: relative;
  overflow: hidden;
  user-select: none;
  height: auto;
  min-height: 0;
  box-sizing: border-box;
  transition: filter 0.35s ease, opacity 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.vertical-volume-strip::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(46, 160, 67, 0.8), transparent);
}

/* Disconnected from BM: desaturate all elements of the volume control */
.vertical-volume-strip.bm-disconnected,
.card-bm-disconnected .vertical-volume-strip {
  filter: grayscale(100%) opacity(0.55);
  border-color: #485260 !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.7) !important;
}

.vertical-volume-strip.bm-disconnected::before,
.card-bm-disconnected .vertical-volume-strip::before {
  background: linear-gradient(90deg, transparent, rgba(140, 150, 160, 0.4), transparent);
}

.volume-val-v {
  font-family: var(--font-mono, monospace);
  font-size: 0.65rem;
  font-weight: 700;
  color: #ff9800;
  text-align: center;
  line-height: 1;
  flex: 0 0 auto;
}

.volume-slider-v-wrap {
  flex: 1 1 0;
  min-height: 24px;
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 0 4px 0;
  margin: 1px 0;
  box-sizing: border-box;
}

/* Outer dimmer guide track (slightly wider) */
.volume-slider-v-wrap::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 6px;
  width: 12px;
  background: #0d131c;
  border: 1px solid rgba(255, 107, 43, 0.45);
  border-radius: 6px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.75);
  pointer-events: none;
  z-index: 1;
}

/* Central bright orange column (fills dynamically from bottom up to circle/thumb, dark above) */
.volume-slider-v-wrap::after {
  content: "";
  position: absolute;
  bottom: 8px;
  height: calc((100% - 14px) * var(--vol-ratio, 0.6));
  max-height: calc(100% - 14px);
  width: 6px;
  background: #ff6b2b;
  border-radius: 3px;
  box-shadow: 0 0 6px rgba(255, 107, 43, 0.75);
  pointer-events: none;
  z-index: 2;
  transition: height 0.04s ease, background 0.35s ease, box-shadow 0.35s ease;
}

.vertical-volume-strip.bm-disconnected .volume-slider-v-wrap::after,
.card-bm-disconnected .volume-slider-v-wrap::after {
  background: #6e7681;
  box-shadow: none;
}

.vertical-volume-strip.bm-disconnected .volume-slider-v-wrap::before,
.card-bm-disconnected .volume-slider-v-wrap::before {
  border-color: #6e7681;
}

/* Vertical slider for all modern engines (Blink, Gecko, WebKit) */
.volume-slider-v {
  -webkit-appearance: slider-vertical;
  appearance: slider-vertical;
  writing-mode: vertical-lr;
  direction: rtl;
  width: 22px;
  position: absolute;
  top: 4px;
  bottom: 6px;
  height: calc(100% - 10px);
  max-height: calc(100% - 10px);
  margin: 0 auto;
  cursor: pointer;
  accent-color: #ff6b2b;
  background: transparent;
  z-index: 3;
}

.volume-slider-v::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ff6b2b;
  border: none;
  box-shadow: 0 0 8px rgba(255, 107, 43, 0.95);
  cursor: pointer;
}

.volume-slider-v::-webkit-slider-runnable-track {
  background: transparent !important;
  border: none !important;
}

.volume-slider-v::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ff6b2b;
  border: none;
  box-shadow: 0 0 8px rgba(255, 107, 43, 0.95);
  cursor: pointer;
}

.volume-slider-v::-moz-range-track {
  background: transparent !important;
  border: none !important;
}

.volume-slider-v::-moz-range-progress {
  background: transparent !important;
  border: none !important;
}

.vertical-volume-strip.bm-disconnected .volume-slider-v::-webkit-slider-thumb,
.card-bm-disconnected .volume-slider-v::-webkit-slider-thumb,
.vertical-volume-strip.bm-disconnected .volume-slider-v::-moz-range-thumb,
.card-bm-disconnected .volume-slider-v::-moz-range-thumb {
  background: #6e7681;
  box-shadow: none;
}

.volume-icon-v {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(0, 214, 62, 0.14);
  border: 1px solid rgba(0, 214, 62, 0.45);
  color: #00e676;
  transition: all 0.2s ease;
  line-height: 1;
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 0;
  margin: 0 auto;
  overflow: hidden;
}

.volume-icon-v:hover {
  background: rgba(0, 214, 62, 0.28);
  border-color: #00ff4b;
  color: #69f0ae;
  transform: scale(1.06);
}

.volume-icon-v:active {
  transform: scale(0.95);
}

.volume-icon-v .speaker-svg {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
  pointer-events: none;
}

.volume-icon-v.muted-channel {
  background: rgba(244, 67, 54, 0.22);
  border-color: rgba(244, 67, 54, 0.6);
  color: #ff5252;
}

.volume-icon-v.muted-channel:hover {
  background: rgba(244, 67, 54, 0.35);
  border-color: #ff5252;
}

.volume-icon-v.muted-global {
  background: rgba(213, 0, 0, 0.4);
  border-color: #ff1744;
  color: #ffffff;
  box-shadow: 0 0 8px rgba(255, 23, 68, 0.6);
}

.volume-icon-v.muted-global:hover {
  background: rgba(213, 0, 0, 0.6);
  border-color: #ff5252;
}

.volume-icon-v.muted-ptt {
  background: rgba(213, 0, 0, 0.35);
  border-color: #ff1744;
  color: #ffffff;
  box-shadow: 0 0 6px rgba(255, 23, 68, 0.4);
}

/* Hotspot Settings Button inside Vertical Volume Strip */
.volume-strip-settings-btn {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  flex: 0 0 auto;
  box-sizing: border-box;
  margin: 0 auto;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
  position: relative;
}

.volume-strip-settings-btn:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: rgba(56, 189, 248, 0.55);
  color: #38bdf8;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.35);
  transform: scale(1.05);
}

.volume-strip-settings-btn:active {
  transform: scale(0.93);
}

.volume-strip-settings-btn .settings-icon {
  width: 16px;
  height: 16px;
  display: block;
  pointer-events: none;
  transition: transform 0.3s ease;
}

.volume-strip-settings-btn:hover .settings-icon {
  transform: rotate(45deg);
}

.vertical-volume-strip.bm-disconnected .volume-strip-settings-btn,
.card-bm-disconnected .volume-strip-settings-btn {
  color: #64748b;
  border-color: rgba(255, 255, 255, 0.08);
}

.volume-strip-settings-btn.has-update-badge::after,
.header-settings-btn.has-update-badge::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 6px;
  height: 6px;
  background: #ff9800;
  border-radius: 50%;
  box-shadow: 0 0 6px #ff9800;
  animation: pulseBadge 1.8s infinite ease-in-out;
}

/* Quick TG Selection Buttons */
.tg-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.section-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
}

.tg-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.tg-btn {
  background: #21262d;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 8px 4px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.15s;
}

.tg-btn.active {
  background: #388bfd33;
  border-color: #58a6ff;
  color: #58a6ff;
}

.tg-btn:active {
  transform: scale(0.96);
}

.custom-tg-row {
  display: flex;
  gap: 8px;
}

.custom-tg-input {
  flex: 1;
  background: #21262d;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: #fff;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-family: monospace;
}

.custom-tg-input:focus {
  outline: none;
  border-color: var(--color-cyan);
}

.btn-secondary {
  background: #30363d;
  border: 2px solid var(--border-color);
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

/* PTT Button Section */
.ptt-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-top: -1px;
  padding: 0;
}

.ptt-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 6px;
  width: 100%;
}

.ptt-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-width: 0;
  align-items: stretch;
}

.ptt-side-left {
  align-items: stretch;
}

.ptt-side-right {
  align-items: stretch;
}

/* Quick TG Direct Dial (Быстрый набор TG на передачу - зеленая зона) */
.quick-tg-box {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 45px !important;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  
  box-sizing: border-box !important;
  background: #161b22;
  border: 2px solid #1f6feb;
  border-radius: 8px;
  padding: 4px 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 8px rgba(31, 111, 235, 0.25);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.quick-tg-box:focus-within {
  border-color: #58a6ff;
  box-shadow: 0 0 8px rgba(88, 166, 255, 0.25);
}

.ptt-side .quick-tg-box,
.ptt-side-left .quick-tg-box,
.quick-actions-row .quick-tg-box,
.bm-tg-actions-row .quick-tg-box {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 45px !important;
  flex: 0 0 45px;
  margin: 0;
}

.quick-tg-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 33px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-amber);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.90rem;
  font-weight: 700;
  padding: 0 4px;
  line-height: 33px;
  letter-spacing: 0.5px;
}

.quick-tg-input::placeholder {
  color: #6e7681;
  font-size: 0.76rem;
  font-weight: 600;
}

.btn-quick-tg-apply {
  flex: 0 0 auto;
  height: 33px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: #238636;
  border: 1px solid rgba(46, 160, 67, 0.6);
  border-radius: 6px;
  color: #ffffff;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  white-space: nowrap;
}

.btn-quick-tg-apply:hover {
  background: #2ea043;
  box-shadow: 0 2px 6px rgba(46, 160, 67, 0.3);
}

.btn-quick-tg-apply:active {
  transform: scale(0.95);
}

/* Requirement 4: Hotspot, Log and Setting styled in the EXACT same design as BM TG buttons */
.btn-ptt-side-tall {
  width: 100%;
  height: 75px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-sizing: border-box;
  background: #161b22;
  border: 2px solid #30363d;
  border-radius: 8px;
  color: #e6edf3;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.btn-ptt-side-tall:hover {
  background: #21262d;
  border-color: #58a6ff;
  color: #58a6ff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(88, 166, 255, 0.15);
}

.btn-ptt-side-tall:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.btn-ptt-side-tall .ptt-side-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.btn-ptt-side-tall .ptt-side-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.btn-ptt-side-half {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 45px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box !important;
  background: #161b22;
  border: 2px solid #30363d;
  border-radius: 8px;
  color: #e6edf3;
  font-family: inherit;
  font-size: 0.80rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  /* 3D Raised button effect */
  box-shadow:
    -1px -1px 3px rgba(255, 255, 255, 0.06),
    2px 2px 5px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}

.btn-ptt-side-half:hover {
  background: #21262d;
  border-color: #58a6ff;
  color: #58a6ff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(88, 166, 255, 0.15);
}

.btn-ptt-side-half:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.btn-ptt-side-half.active {
  background: rgba(88, 166, 255, 0.2);
  border-color: #58a6ff;
  color: #58a6ff;
}

.btn-ptt-side-half .ptt-side-icon {
  font-size: 1.05rem;
  line-height: 1;
}

.btn-ptt-side-half .ptt-side-label {
  font-size: 0.80rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1.1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* PTT Button with large bold TS & TG info, and small description below */
.ptt-button {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 96px !important;
  border-radius: 12px;
  background: radial-gradient(circle, #383e4a 0%, #21262d 100%);
  border: 3px solid #1f6feb;
  color: #c9d1d9;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  /* 3D Raised PTT button effect */
  box-shadow:
    -2px -2px 6px rgba(255, 255, 255, 0.07),
    3px 3px 8px rgba(0, 0, 0, 0.55),
    0 0 12px rgba(31, 111, 235, 0.35),
    0 8px 24px rgba(0, 0, 0, 0.5),
    inset 0 2px 4px rgba(255, 255, 255, 0.1);
  transition: all 0.15s ease-in-out;
  touch-action: none;
  flex-shrink: 0;
  padding: 4px 6px;
  box-sizing: border-box !important;
}

.ptt-button * {
  pointer-events: none;
}

.ptt-button .ptt-top-row,
.ptt-button .ptt-center-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 1px;
  box-sizing: border-box;
}

.ptt-button .ptt-title-row {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  line-height: 1;
  margin: 0;
  pointer-events: none;
  z-index: 2;
}

.ptt-button .ptt-title {
  font-size: 1.50rem;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  text-align: center;
}

.ptt-button .ptt-slots-subrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 8px;
  box-sizing: border-box;
  margin-top: auto;
  margin-bottom: 2px;
}

.ptt-button .ptt-slot-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1;
  color: #8b949e;
  text-align: center;
  user-select: none;
  box-sizing: border-box;
  pointer-events: none;
  opacity: 0.85;
  transition: color 0.15s ease, text-shadow 0.15s ease, opacity 0.15s ease;
}

.ptt-button .ptt-slot-badge.ptt-slot-ts1 {
  text-align: left;
}

.ptt-button .ptt-slot-badge.ptt-slot-ts2 {
  text-align: right;
}

.ptt-button.hover-slot-1 .ptt-slot-badge.ptt-slot-ts1 {
  color: #ffffff;
  opacity: 1;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}

.ptt-button.hover-slot-2 .ptt-slot-badge.ptt-slot-ts2 {
  color: #ffffff;
  opacity: 1;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}

.ptt-button .ptt-slot-badge.slot-selected {
  color: #58a6ff;
  font-weight: 800;
  opacity: 1;
  text-shadow: 0 0 6px rgba(88, 166, 255, 0.7);
}

[data-theme="light"] .ptt-button .ptt-slot-badge.slot-selected {
  color: #1f6feb;
  font-weight: 800;
  opacity: 1;
  text-shadow: 0 0 6px rgba(31, 111, 235, 0.4);
}

.ptt-button .ptt-target-info {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.2px;
  line-height: 1.1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: right;
  width: 100%;
  padding: 0 8px 0 36px;
  box-sizing: border-box;
  margin: 0;
}

.ptt-button .ptt-target-info.is-id,
.ptt-target-info.is-id {
  color: #ffffff !important;
}

.ptt-button .ptt-target-info.is-id .dmr-id-text,
.ptt-target-info.is-id .dmr-id-text,
.ptt-button .ptt-target-info .dmr-id-text {
  color: #9ff8bf !important;
}

.ptt-button .ptt-target-info.is-tg,
.ptt-target-info.is-tg {
  color: #ffffff !important;
}

.ptt-button .ptt-target-desc {
  font-size: 0.60rem;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  padding: 0 1px;
  box-sizing: border-box;
  text-align: center;
  width: 100%;
  min-height: 11px;
  margin: 0;
}

.ptt-button .ptt-target-desc:empty {
  visibility: hidden;
}

.ptt-button .ptt-hint {
  font-size: 0.55rem;
  letter-spacing: 0;
  font-weight: normal;
  color: var(--text-muted);
}

.ptt-button.active {
  background: radial-gradient(circle, #e63946 0%, #b71c1c 100%);
  border-color: #ff5252;
  color: #ffffff;
  transform: scale(0.96);
  box-shadow: 0 0 30px rgba(230, 57, 70, 0.7), inset 0 4px 8px rgba(0, 0, 0, 0.4);
}

.ptt-button.active .ptt-slot-badge {
  color: rgba(255, 255, 255, 0.45);
}

.ptt-button.active.tx-slot-1 .ptt-slot-badge.ptt-slot-ts1,
.ptt-button.active.tx-slot-2 .ptt-slot-badge.ptt-slot-ts2 {
  color: #ffffff;
  font-weight: 800;
  opacity: 1;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.85), 0 1px 2px rgba(0, 0, 0, 0.9);
}

.ptt-button.active .ptt-target-info {
  color: #ffffff;
}

.ptt-button.active .ptt-target-info.is-id {
  color: #ffffff !important;
}

.ptt-button.active .ptt-target-info.is-id .dmr-id-text {
  color: #9ff8bf !important;
}

.ptt-button.active .ptt-target-desc {
  color: #ffcdd2;
}

.ptt-footer-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
}

/* Settings Modal */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(5px);
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 16px;
}

.modal.active {
  display: flex;
}

#contactEditModal.active {
  z-index: 1200;
}

.auth-modal.active {
  z-index: 9999;
  backdrop-filter: blur(12px);
}
body.auth-locked > *:not(.auth-modal) {
  pointer-events: none;
  filter: blur(3px);
  user-select: none;
}

.modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  max-width: 440px;
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
  max-height: 92vh;
  overflow-y: auto;
}

/* Standard Modal Header Layout (Title left, Close button top-right) */
.modal-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px;
  width: 100% !important;
  box-sizing: border-box;
}

.modal-header .icon-btn {
  margin-left: auto;
  flex-shrink: 0;
}

#settingsModal .modal-content {
  max-width: 660px;
  width: 100%;
  padding: 0 !important;
  max-height: 92vh;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  gap: 0 !important;
}

/* ── Settings Window Save Confirmation Glow Pulse (1s smooth rise & decay) ── */
@keyframes modalSaveSuccessPulse {
  0% {
    border-color: var(--border-color, rgba(255, 255, 255, 0.15));
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7),
                0 0 0 0 rgba(63, 185, 80, 0),
                0 0 0 0 rgba(63, 185, 80, 0),
                inset 0 0 0 0 rgba(63, 185, 80, 0);
  }
  30% {
    border-color: #3fb950;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7),
                0 0 0 3px rgba(63, 185, 80, 0.95),
                0 0 24px rgba(63, 185, 80, 0.7),
                0 0 45px rgba(63, 185, 80, 0.35),
                inset 0 0 16px rgba(63, 185, 80, 0.25);
  }
  60% {
    border-color: #3fb950;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7),
                0 0 0 2px rgba(63, 185, 80, 0.7),
                0 0 16px rgba(63, 185, 80, 0.45),
                0 0 28px rgba(63, 185, 80, 0.2),
                inset 0 0 10px rgba(63, 185, 80, 0.15);
  }
  100% {
    border-color: var(--border-color, rgba(255, 255, 255, 0.15));
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7),
                0 0 0 0 rgba(63, 185, 80, 0),
                0 0 0 0 rgba(63, 185, 80, 0),
                inset 0 0 0 0 rgba(63, 185, 80, 0);
  }
}

.modal-save-pulse {
  will-change: box-shadow, border-color;
  animation: modalSaveSuccessPulse 1s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

#settingsModal .settings-modal-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 8px;
  padding: 6px 10px 0 10px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-card);
  flex-shrink: 0 !important;
  z-index: 10;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-sizing: border-box;
}

#settingsModal .settings-modal-header .modal-tabs {
  flex: 1;
  min-width: 0;
  border-bottom: none !important;
  margin-bottom: -1px;
  display: flex !important;
  align-items: flex-end;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

#settingsModal .settings-modal-header .modal-tabs::-webkit-scrollbar {
  display: none;
}

#settingsModal .settings-modal-header #closeSettingsBtn {
  flex-shrink: 0;
  margin-bottom: 4px;
}

#settingsModal .settings-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 9px 10px 18px 10px;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
}

.tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  padding: 8px 14px 10px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0 !important;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
  user-select: none;
}

.tab-btn:hover {
  color: var(--text-primary, #e6edf3);
}

.tab-btn.active {
  color: #58a6ff;
  border-bottom-color: #58a6ff;
}

.tab-content {
  display: none;
  flex-direction: column;
  gap: 12px;
}

.tab-content.active {
  display: flex;
}

/* Account Subtabs Navigation */
.account-subtabs-nav {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 8px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.account-subtab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #8b949e;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.account-subtab-btn:hover {
  color: #c9d1d9;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.15);
}

.account-subtab-btn.active {
  color: #58a6ff;
  background: rgba(56, 139, 253, 0.15);
  border-color: rgba(56, 139, 253, 0.45);
}

[data-theme="light"] .account-subtabs-nav {
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .account-subtab-btn {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  color: #57606a;
}

[data-theme="light"] .account-subtab-btn:hover {
  color: #24292f;
  background: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .account-subtab-btn.active {
  color: #0969da;
  background: rgba(9, 105, 218, 0.12);
  border-color: rgba(9, 105, 218, 0.35);
}

.account-subtab-content {
  display: none;
  flex-direction: column;
}

.account-subtab-content.active {
  display: flex;
}

/* Password Visibility Toggle Button */
.password-toggle-btn {
  position: absolute;
  right: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: #8b949e;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  user-select: none;
  opacity: 0.7;
  transition: opacity 0.15s ease, transform 0.1s ease;
}

.password-toggle-btn:hover {
  opacity: 1;
  color: #c9d1d9;
}

.password-toggle-btn:active {
  transform: scale(0.92);
}

/* ── Gemini API Keys & TTS Collapsible Frames ─────────────────────────── */
.apikeys-frame {
  border: 1px solid rgba(56, 139, 253, 0.35);
  border-radius: 10px;
  margin-bottom: 16px;
  overflow: hidden;
  background: #12365a;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.apikeys-frame:not(.collapsed) {
  border-color: rgba(88, 166, 255, 0.55);
  background: #12365a;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(88, 166, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.apikeys-frame-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  cursor: pointer;
  user-select: none;
  background: linear-gradient(180deg, rgba(30, 58, 102, 0.6) 0%, rgba(20, 42, 78, 0.6) 100%);
  border-bottom: 1px solid rgba(56, 139, 253, 0.35);
  transition: background 0.15s ease, border-color 0.15s ease;
  min-height: 38px;
}

.apikeys-frame-header:hover {
  background: linear-gradient(180deg, rgba(38, 72, 128, 0.75) 0%, rgba(28, 54, 98, 0.75) 100%);
}

.apikeys-frame.collapsed .apikeys-frame-header {
  border-bottom: none;
}

.apikeys-frame-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #79c0ff;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.apikeys-frame-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.apikeys-get-key-link {
  font-size: 0.72rem;
  color: #79c0ff;
  text-decoration: none;
  opacity: 0.85;
  white-space: nowrap;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.apikeys-get-key-link:hover {
  opacity: 1;
  text-decoration: underline;
  color: #a5d6ff;
}

.btn-apikey-test {
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 5px;
  border: 1px solid rgba(63, 185, 80, 0.5);
  background: rgba(63, 185, 80, 0.14);
  color: #3fb950;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.btn-apikey-test:hover {
  background: rgba(63, 185, 80, 0.28);
  border-color: #3fb950;
}
.btn-apikey-test:active { transform: scale(0.95); }
.btn-apikey-test:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.apikeys-chevron {
  font-size: 0.7rem;
  color: #8b949e;
  transition: transform 0.2s ease, color 0.2s ease;
  display: inline-block;
}
.apikeys-frame.collapsed .apikeys-chevron { transform: rotate(-90deg); }

.apikeys-frame-body {
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #12365a;
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.35);
}

.apikeys-frame-body .form-hint {
  color: rgba(255, 255, 255, 0.75);
}
.apikeys-frame.collapsed .apikeys-frame-body {
  display: none;
}

.apikeys-frame-body input[type="range"] {
  accent-color: #58a6ff;
}

/* ── Light Theme: Gemini API Keys & TTS Collapsible Frames ──────────────── */
[data-theme="light"] .apikeys-frame {
  border: 1px solid #b6d3f7;
  border-radius: 10px;
  background: #edf4fe;
  box-shadow: 0 2px 10px rgba(9, 105, 218, 0.08), inset 0 1px 0 #ffffff;
}

[data-theme="light"] .apikeys-frame:not(.collapsed) {
  border-color: #549bf5;
  background: #ebf3fd;
  box-shadow: 0 4px 18px rgba(9, 105, 218, 0.14), 0 0 0 1px rgba(9, 105, 218, 0.22), inset 0 1px 0 #ffffff;
}

[data-theme="light"] .apikeys-frame-header {
  background: linear-gradient(180deg, #dcebfa 0%, #d0e4f8 100%);
  border-bottom: 1px solid #b6d3f7;
}

[data-theme="light"] .apikeys-frame-header:hover {
  background: linear-gradient(180deg, #d2e4f7 0%, #c4dbf4 100%);
}

[data-theme="light"] .apikeys-frame.collapsed .apikeys-frame-header {
  border-bottom: none;
}

[data-theme="light"] .apikeys-frame-title {
  color: #0969da;
}

[data-theme="light"] .apikeys-chevron {
  color: #445063;
}

[data-theme="light"] .apikeys-get-key-link {
  color: #0969da;
  font-weight: 600;
}

[data-theme="light"] .apikeys-get-key-link:hover {
  color: #0550ae;
}

[data-theme="light"] .apikeys-frame-body {
  background: #f4f8fe;
  box-shadow: inset 0 2px 6px rgba(9, 105, 218, 0.06);
}

[data-theme="light"] .apikeys-frame-body .form-input,
[data-theme="light"] .apikeys-frame-body .apikey-name,
[data-theme="light"] .apikeys-frame-body .apikey-input:not(.key-status-ok):not(.key-status-fail):not(.key-status-disabled) {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .apikeys-frame-body .form-input:focus,
[data-theme="light"] .apikeys-frame-body .apikey-name:focus,
[data-theme="light"] .apikeys-frame-body .apikey-input:not(.key-status-ok):not(.key-status-fail):not(.key-status-disabled):focus {
  border-color: #0969da !important;
  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.15) !important;
}

[data-theme="light"] .apikeys-frame-body label {
  color: #0f172a !important;
}

[data-theme="light"] .apikeys-frame-body .form-hint {
  color: #57606a !important;
}

[data-theme="light"] .apikeys-frame-body input[type="range"] {
  accent-color: #0969da;
}

[data-theme="light"] .apikeys-frame-body input[type="checkbox"] {
  accent-color: #0969da;
}

[data-theme="light"] .apikeys-eye-btn {
  color: #64748b;
}

[data-theme="light"] .apikeys-eye-btn:hover {
  color: #0f172a;
}

[data-theme="light"] .btn-apikey-test {
  border-color: rgba(46, 160, 67, 0.6);
  background: rgba(46, 160, 67, 0.12);
  color: #1a7f37;
}

[data-theme="light"] .btn-apikey-test:hover {
  background: rgba(46, 160, 67, 0.22);
  border-color: #1a7f37;
}

.apikey-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.apikey-row-paid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  background: rgba(114, 18, 48, 0.28);
  border: 1px solid rgba(225, 29, 72, 0.45);
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 6px;
  margin-bottom: 4px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.apikey-row-paid:hover {
  background: rgba(114, 18, 48, 0.36);
  border-color: rgba(225, 29, 72, 0.6);
}

.apikey-row-paid .apikey-cb {
  order: 1;
}

.apikey-row-paid .apikey-paid-label {
  order: 2;
  flex: 1 1 calc(100% - 30px);
  font-size: 0.76rem;
  color: #fda4af;
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  margin: 0;
  user-select: none;
}

.apikey-row-paid .apikey-input-wrap {
  order: 3;
  flex: 1 1 100%;
  width: 100%;
}

.apikey-cb-paid {
  accent-color: #e11d48;
}

[data-theme="light"] .apikey-row-paid {
  background: rgba(225, 29, 72, 0.08);
  border-color: rgba(225, 29, 72, 0.35);
}

[data-theme="light"] .apikey-row-paid:hover {
  background: rgba(225, 29, 72, 0.12);
  border-color: rgba(225, 29, 72, 0.5);
}

[data-theme="light"] .apikey-row-paid .apikey-paid-label {
  color: #9f1239;
}

.apikey-cb {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: #58a6ff;
}

.apikey-name {
  flex: 0 0 25%;
  width: 25%;
  font-size: 0.78rem;
  padding: 4px 6px;
  height: 28px;
  box-sizing: border-box;
  font-family: inherit;
  color: var(--text-secondary);
  min-width: 0;
}

.apikey-input-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

.apikey-input-wrap .apikey-input {
  width: 100%;
  font-family: ui-monospace, monospace;
  font-size: 0.80rem;
  padding: 4px 30px 4px 8px;
  height: 28px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* Status colours applied via JS */
.apikey-input.key-status-ok {
  border-color: #3fb950 !important;
  box-shadow: 0 0 0 1.5px rgba(63, 185, 80, 0.45), 0 0 8px rgba(63, 185, 80, 0.4) !important;
  background: rgba(63, 185, 80, 0.08) !important;
}
.apikey-input.key-status-fail {
  border-color: #f85149 !important;
  box-shadow: 0 0 0 1.5px rgba(248, 81, 73, 0.45), 0 0 8px rgba(248, 81, 73, 0.4) !important;
  background: rgba(248, 81, 73, 0.08) !important;
}
.apikey-input.key-status-disabled {
  border-color: #444c56 !important;
  box-shadow: none !important;
  background: rgba(68, 76, 86, 0.15) !important;
  color: #6e7681 !important;
}

/* Light theme status colours */
[data-theme="light"] .apikey-input.key-status-ok,
[data-theme="light"] .apikeys-frame-body .apikey-input.key-status-ok {
  border-color: #1a7f37 !important;
  box-shadow: 0 0 0 2px rgba(26, 127, 55, 0.45), 0 0 8px rgba(26, 127, 55, 0.3) !important;
  background: #edfcf2 !important;
  color: #0f172a !important;
}
[data-theme="light"] .apikey-input.key-status-fail,
[data-theme="light"] .apikeys-frame-body .apikey-input.key-status-fail {
  border-color: #cf222e !important;
  box-shadow: 0 0 0 2px rgba(207, 34, 46, 0.45), 0 0 8px rgba(207, 34, 46, 0.3) !important;
  background: #ffebe9 !important;
  color: #0f172a !important;
}
[data-theme="light"] .apikey-input.key-status-disabled,
[data-theme="light"] .apikeys-frame-body .apikey-input.key-status-disabled {
  border-color: #cbd5e1 !important;
  box-shadow: none !important;
  background: #f1f5f9 !important;
  color: #94a3b8 !important;
}

[data-theme="light"] .apikey-input.key-status-ok:focus,
[data-theme="light"] .apikeys-frame-body .apikey-input.key-status-ok:focus {
  border-color: #1a7f37 !important;
  box-shadow: 0 0 0 3px rgba(26, 127, 55, 0.45) !important;
}
[data-theme="light"] .apikey-input.key-status-fail:focus,
[data-theme="light"] .apikeys-frame-body .apikey-input.key-status-fail:focus {
  border-color: #cf222e !important;
  box-shadow: 0 0 0 3px rgba(207, 34, 46, 0.45) !important;
}

.apikey-eye-btn {
  position: absolute;
  right: 4px;
  background: none;
  border: none;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 2px;
  line-height: 1;
  transition: opacity 0.15s;
}
.apikey-eye-btn:hover { opacity: 0.8; }

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.form-group-row {
  display: flex;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.form-group-row .form-group {
  min-width: 0;
}

.form-group label {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.form-input {
  background: #21262d;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 12px;
  color: #fff;
  font-size: 0.9rem;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.form-input::placeholder,
.form-input::-webkit-input-placeholder,
.form-input::-moz-placeholder,
.form-input:-ms-input-placeholder,
input::placeholder,
textarea::placeholder {
  color: #485058 !important;
  opacity: 1 !important;
}

.form-input:focus {
  outline: none;
  border-color: #58a6ff;
}

.form-hint {
  font-size: 0.7rem;
  color: #636b76;
  line-height: 1.3;
}

.form-hint-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-top: 5px;
}

.form-hint-row .form-hint {
  flex: 1;
  margin-top: 0;
  line-height: 1.35;
}

.form-hint-row .btn-help-inline {
  flex-shrink: 0;
  white-space: nowrap;
  margin-top: 1px;
}

.form-label-with-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-label-with-action label {
  margin-bottom: 0;
}

.btn-help-inline {
  background: rgba(0, 229, 255, 0.1);
  border: 1px solid rgba(0, 229, 255, 0.3);
  color: var(--color-cyan);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  
  transition: all 0.2s ease;
}

.btn-help-inline:hover {
  background: rgba(0, 229, 255, 0.22);
  border-color: var(--color-cyan);
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.35);
}

.bm-help-card {
  margin-top: 8px;
  background: #161b22;
  border: 1px solid #30363d;
  border-left: 3px solid var(--color-cyan);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 0.78rem;
  color: #c9d1d9;
  animation: fadeIn 0.2s ease;
}

.bm-help-card.hidden {
  display: none !important;
}

.bm-help-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #f0f6fc;
  font-size: 0.8rem;
  margin-bottom: 8px;
}

.btn-close-help {
  background: transparent;
  border: none;
  color: #8b949e;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0 4px;
  line-height: 1;
}

.btn-close-help:hover {
  color: #f0f6fc;
}

.bm-help-body ol {
  margin: 0;
  padding-left: 18px;
  line-height: 1.5;
}

.bm-help-body li {
  margin-bottom: 4px;
}

.bm-help-link {
  color: var(--color-cyan);
  text-decoration: underline;
  font-weight: 600;
}

.bm-help-link:hover {
  color: #58a6ff;
}

.bm-help-note {
  margin-top: 8px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  font-size: 0.72rem;
  color: #8b949e;
  line-height: 1.4;
}

.form-group-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-primary);
  margin-top: 4px;
}

.attenuation-val-badge {
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--color-cyan, #00e5ff);
  background: rgba(0, 229, 255, 0.12);
  border: 1px solid rgba(0, 229, 255, 0.3);
  padding: 2px 10px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.form-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: #21262d;
  border-radius: 3px;
  outline: none;
  border: 1px solid #30363d;
}

.form-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-cyan, #00e5ff);
  cursor: pointer;
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
  transition: transform 0.12s ease;
}

.form-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.form-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-cyan, #00e5ff);
  cursor: pointer;
  border: none;
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
}

.bm-quick-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.btn-bm-connect {
  flex: 2;
  background: #238636;
  color: #fff;
  border: 1px solid #2ea043;
  border-radius: 8px;
  padding: 10px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-bm-connect:hover {
  background: #2ea043;
}

.btn-bm-disconnect {
  flex: 1;
  background: #21262d;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 10px;
  font-weight: bold;
  cursor: pointer;
}

.btn-bm-disconnect:hover {
  color: var(--color-red);
  border-color: var(--color-red);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--border-color);
  padding-top: 12px;
}

.btn-primary {
  background: #1f6feb;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: bold;
  cursor: pointer;
  width: 100%;
}

.btn-primary:hover {
  background: #388bfd;
}

.btn-danger {
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: bold;
  cursor: pointer;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.18s ease;
  user-select: none;
}

.btn-danger:hover {
  background: #ef4444;
  color: #fff;
}

.btn-danger:active {
  background: #b91c1c;
  transform: translateY(1px);
}

  /* --- Duplex VFO & Multi-Hotspot Styles --- */
  
  /* VFO Rows (Dual Watch TS1 + TS2) */
  .vfo-row {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 8px 56px 8px 10px;
    border: 1.5px solid #444c56;
    border-radius: 8px;
    /* 3D Raised / Elevated effect: light highlight top-left, dark shadow bottom-right */
    box-shadow:
      -2px -2px 5px rgba(255, 255, 255, 0.06),
      2px 2px 6px rgba(0, 0, 0, 0.5),
      0 4px 10px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.07);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    overflow: hidden;
  }

  .vfo-row:not(.is-maximized) {
    box-sizing: border-box;
    height: 106px;
    min-height: 106px;
    max-height: 106px;
  }

  /* Mode background mask: strictly at the very bottom (z-index: -1) */
  .vfo-row::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, #22272e 0%, #1c2128 100%);
    z-index: -1;
    transition: background 0.15s ease;
    pointer-events: none;
  }
  
  .vfo-row:hover::before {
    background: linear-gradient(180deg, #2d333b 0%, #22272e 100%);
  }
  
  .vfo-row:hover {
    border-color: #00ff4b;
    box-shadow: 0 0 12px rgba(0, 255, 75, 0.3);
  }
  
  .vfo-ptt-dot {
    display: none !important;
  }

  /* VFO Stereo Pan Toggle Button (L / R / L+R) - Transferred to Mute button */
  .vfo-pan-btn {
    display: none !important;
    position: absolute;
    top: 7px;
    right: 24px;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 18px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border-radius: 4px;
    background: rgba(22, 27, 34, 0.85);
    border: 1px solid rgba(88, 166, 255, 0.35);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    align-items: center;
    justify-content: center;
    gap: 0.5px;
    cursor: pointer;
    z-index: 6;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  }

  .vfo-pan-btn:hover {
    background: rgba(30, 40, 55, 0.95);
    border-color: rgba(88, 166, 255, 0.6);
  }

  .vfo-pan-btn:active {
    transform: scale(0.95);
  }

  .vfo-pan-btn .pan-l {
    color: #00d63e;
    font-size: 0.78rem;
    font-weight: 700;
  }

  .vfo-pan-btn .pan-r {
    color: #00b0ff;
    font-size: 0.78rem;
    font-weight: 700;
  }

  /* Single letter mode (only L or only R): +2 пункта (0.88rem / 14px), centered */
  .vfo-pan-btn.pan-state-l .pan-l,
  .vfo-pan-btn.pan-state-l .pan-single,
  .vfo-pan-btn .pan-l.pan-single {
    font-size: 0.88rem;
    font-weight: 800;
    color: #00d63e !important;
  }

  .vfo-pan-btn.pan-state-r .pan-r,
  .vfo-pan-btn.pan-state-r .pan-single,
  .vfo-pan-btn .pan-r.pan-single {
    font-size: 0.88rem;
    font-weight: 800;
    color: #00b0ff !important;
  }

  .vfo-pan-btn .pan-sep {
    color: #8b949e;
    font-size: 0.72rem;
    margin: 0 0.5px;
    font-weight: 500;
  }

  /* Pan state L: green accent border */
  .vfo-pan-btn.pan-state-l {
    border-color: rgba(0, 214, 62, 0.6);
  }
  .vfo-pan-btn.pan-state-l:hover {
    border-color: #00ff4b;
    background: rgba(0, 32, 12, 0.7);
  }

  /* Pan state R: blue accent border */
  .vfo-pan-btn.pan-state-r {
    border-color: rgba(0, 176, 255, 0.6);
  }
  .vfo-pan-btn.pan-state-r:hover {
    border-color: #38bdf8;
    background: rgba(0, 28, 50, 0.7);
  }

  /* Pan state LR: default subtle blue border */
  .vfo-pan-btn.pan-state-lr {
    border-color: rgba(88, 166, 255, 0.35);
  }
  
  .vfo-row.active-ptt-vfo {
    /* No persistent green border in standby - active slot indicator removed */
  }
  
  /* Active RX: Balanced rich green at the very bottom, matched with TX brightness */
  .vfo-row.vfo-rx-active::before {
    background: linear-gradient(180deg, #1c5b2b 0%, #12421f 100%) !important;
  }

  .vfo-row.vfo-rx-active {
    border-color: #00ff4b !important;
    box-shadow: 0 0 16px rgba(0, 255, 75, 0.45) !important;
  }
  
  /* Active TX: Balanced rich crimson at the very bottom, crisp outer glow */
  .vfo-row.vfo-tx-active::before {
    background: linear-gradient(180deg, #591515 0%, #360c0c 100%) !important;
  }

  .vfo-row.vfo-tx-active {
    border-color: #ff3838 !important;
    box-shadow: 0 0 16px rgba(255, 56, 56, 0.45) !important;
  }
  
  /* Un-wrap inner grid if present */
  .vfo-body-grid {
    display: contents;
  }

  /* Corner Badge (Option B): Triangle in top-left corner of VFO frame */
  .vfo-corner-badge {
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 3px 0 0 5px !important;
    box-sizing: border-box !important;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important;
    font-size: 1.08rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    color: #ffffff !important;
    cursor: pointer !important;
    z-index: 5 !important;
    user-select: none !important;
    transition: filter 0.15s ease, transform 0.15s ease !important;
  }

  .vfo-ts1-row .vfo-corner-badge {
    background-color: #00dbf7;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  }

  .vfo-ts1-row .vfo-corner-badge:hover {
    filter: brightness(1.25);
  }

  .vfo-ts2-row .vfo-corner-badge {
    background-color: #f98700;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  }

  .vfo-ts2-row .vfo-corner-badge:hover {
    filter: brightness(1.25);
  }

  /* Light Theme: digits 1 and 2 in corner badges are black */
  [data-theme="light"] .vfo-corner-badge,
  [data-theme="light"] .vfo-ts1-row .vfo-corner-badge,
  [data-theme="light"] .vfo-ts2-row .vfo-corner-badge {
    color: #000000 !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.45) !important;
  }

  [data-theme="light"] .vfo-ts1-row .vfo-corner-badge:hover,
  [data-theme="light"] .vfo-ts2-row .vfo-corner-badge:hover {
    filter: brightness(1.15);
  }

  /* Active TS (someone speaking / transmitting):
     - Dark theme: 0.8 Hz pulse dipping into dark tones (brightness(0.28))
     - Light theme: smooth pulse from original color to almost white and back
  */
  @keyframes vfo-corner-badge-pulse {
    0%, 100% {
      filter: brightness(1);
    }
    50% {
      filter: brightness(0.28);
    }
  }

  @keyframes vfo-ts1-corner-pulse-light {
    0%, 100% {
      background-color: #00dbf7;
    }
    50% {
      background-color: #f2fdff;
    }
  }

  @keyframes vfo-ts2-corner-pulse-light {
    0%, 100% {
      background-color: #f98700;
    }
    50% {
      background-color: #fff7ee;
    }
  }

  .vfo-row.vfo-rx-active .vfo-corner-badge,
  .vfo-row.vfo-tx-active .vfo-corner-badge {
    animation: vfo-corner-badge-pulse 1.25s ease-in-out infinite !important;
  }

  [data-theme="light"] .vfo-row.vfo-ts1-row.vfo-rx-active .vfo-corner-badge,
  [data-theme="light"] .vfo-row.vfo-ts1-row.vfo-tx-active .vfo-corner-badge,
  [data-theme="light"] .vfo-ts1-row.vfo-rx-active .vfo-corner-badge,
  [data-theme="light"] .vfo-ts1-row.vfo-tx-active .vfo-corner-badge {
    filter: none !important;
    animation: vfo-ts1-corner-pulse-light 1.25s ease-in-out infinite !important;
  }

  [data-theme="light"] .vfo-row.vfo-ts2-row.vfo-rx-active .vfo-corner-badge,
  [data-theme="light"] .vfo-row.vfo-ts2-row.vfo-tx-active .vfo-corner-badge,
  [data-theme="light"] .vfo-ts2-row.vfo-rx-active .vfo-corner-badge,
  [data-theme="light"] .vfo-ts2-row.vfo-tx-active .vfo-corner-badge {
    filter: none !important;
    animation: vfo-ts2-corner-pulse-light 1.25s ease-in-out infinite !important;
  }

  /* Right column mute button (aligned under TXT and RUS badges: top: 73px, right: 8px, equal 26px height) */
  .vfo-mute-btn {
    position: absolute;
    top: 73px;
    right: 8px;
    width: 45px !important;
    min-width: 45px !important;
    max-width: 45px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    border-radius: 6px !important;
    background: #09130d;
    border: 1.5px solid #00c853;
    color: #ffffff;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    justify-items: center !important;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0 3px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    z-index: 6;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation !important;
  }

  .vfo-mute-btn:hover {
    background: #0d1e13;
    border-color: #00ff4b;
    box-shadow: 0 0 8px rgba(0, 252, 129, 0.35);
  }

  .vfo-mute-btn:active,
  .vfo-mute-btn.vfo-mute-pressing {
    transform: scale(0.93);
    box-shadow: 0 0 10px rgba(0, 252, 129, 0.5);
  }

  .vfo-mute-btn.muted {
    background: #180909;
    border-color: #ff3838;
    color: #ff6b6b;
  }

  .vfo-mute-btn.muted:hover {
    background: #230d0d;
    border-color: #ff5252;
    box-shadow: 0 0 8px rgba(255, 56, 56, 0.35);
  }

  .vfo-mute-speaker-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    line-height: 1 !important;
    height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    transition: transform 0.1s ease;
  }

  .vfo-pan-tag {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -0.3px;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
    user-select: none;
    -webkit-user-select: none;
    transition: color 0.15s ease, opacity 0.15s ease, text-shadow 0.15s ease;
  }

  .vfo-pan-tag.tag-l {
    color: #00fc81 !important;
  }

  .vfo-pan-tag.tag-l.active {
    color: #00fc81 !important;
    text-shadow: 0 0 5px rgba(0, 252, 129, 0.7) !important;
    opacity: 1 !important;
  }

  .vfo-pan-tag.tag-l.inactive {
    color: #484f58 !important;
    opacity: 0.35 !important;
    text-shadow: none !important;
  }

  .vfo-pan-tag.tag-r {
    color: #00e5ff !important;
  }

  .vfo-pan-tag.tag-r.active {
    color: #00e5ff !important;
    text-shadow: 0 0 5px rgba(0, 229, 255, 0.7) !important;
    opacity: 1 !important;
  }

  .vfo-pan-tag.tag-r.inactive {
    color: #484f58 !important;
    opacity: 0.35 !important;
    text-shadow: none !important;
  }
  
  .vfo-center-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 100%;
    padding-right: 0;
    min-width: 0;
    width: 100%;
    position: relative;
    z-index: 2;
  }
  
  .vfo-caller-row, .vfo-tg-row {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .vfo-caller-row {
    padding-left: 32px; /* Shift past 36px corner triangle indicator */
    height: 25px;
    line-height: 25px;
  }

  .vfo-tg-row {
    padding-left: 32px; /* Aligned with caller flag */
    height: 22px;
    line-height: 22px;
  }
  
  .vfo-caller-row .vfo-flag, .vfo-tg-row .vfo-flag {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .vfo-tg-row .vfo-flag {
    transform: scale(0.85);
  }
  
  .flag-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 16px;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.9rem;
  }
  
  .flag-badge svg,
  .flag-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .vfo-caller-call {
    font-size: 1.08rem; /* Increased by another 2pt */
    font-weight: 700;
    color: #ffffff; 
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  }
  
  .vfo-caller-id {
    font-size: 0.88rem;
    font-weight: 600;
    color: #9ff8bf;
    opacity: 1;
    flex-shrink: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
    display: inline-block;
    padding: 0;
    border-radius: 0;
    background: none;
    border: none;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    transition: color 0.15s ease;
  }

  .vfo-caller-id:hover {
    color: #ffffff;
  }

  .vfo-caller-id:active {
    opacity: 0.7;
  }

  .vfo-caller-call[data-radio-id] {
    cursor: pointer;
    transition: color 0.15s ease;
  }
  .vfo-caller-call[data-radio-id]:hover {
    color: #ffffff;
    text-decoration: underline;
  }

  .vfo-caller-country {
    font-size: 0.88rem;
    font-weight: 600;
    color: #ffd074;
    opacity: 1;
    flex-shrink: 0;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  }

  .vfo-caller-id:empty,
  .vfo-caller-country:empty {
    display: none !important;
  }

  /* Caller subrow: Second line under callsign with ID and Country */
  .vfo-caller-subrow {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 20px;
    padding-left: 64px; /* Indent past the 32px offset + 24px flag + 8px gap */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 20px;
  }

  .vfo-caller-subrow:empty {
    display: none !important;
  }

  .vfo-caller-subrow .vfo-caller-id,
  .vfo-caller-subrow .ts-caller-id {
    flex-shrink: 0;
  }

  .vfo-caller-subrow .vfo-caller-country,
  .vfo-caller-subrow .ts-caller-country {
    flex-shrink: 0;
  }

  .vfo-row:not(.is-maximized) .vfo-caller-call {
    min-width: 0;
    flex-shrink: 1;
  }
  
  .vfo-tg-text {
    font-size: 0.82rem;
    font-weight: 600;
    color: #ffffff; 
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
    cursor: pointer;
  }

  .vfo-tg-desc,
  .ts-tg-desc {
    font-size: 0.92rem;
    font-weight: 700;
    color: #ffffff;
    vertical-align: middle;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  }

  .vfo-tg-desc:empty,
  .ts-tg-desc:empty {
    display: none !important;
  }

  .vfo-tg-pill,
  .ts-tg-pill {
    display: inline-block;
    vertical-align: middle;
    font-size: 0.84rem;
    font-weight: 700;
    color: #ffffff;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    transition: all 0.15s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  }

  .vfo-tg-pill:hover,
  .ts-tg-pill:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
    color: #ffffff;
    transform: translateY(-1px);
  }

  .vfo-tg-pill:active,
  .ts-tg-pill:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.55);
  }

  .vfo-tg-pill.is-id,
  .ts-tg-pill.is-id {
    color: #ffffff !important;
    background: rgba(159, 248, 191, 0.12) !important;
    border-color: rgba(159, 248, 191, 0.35) !important;
  }

  @keyframes ptt-target-select-flash {
    0% { transform: scale(1); filter: brightness(1); }
    35% { transform: scale(1.08); filter: brightness(1.7); box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); }
    100% { transform: scale(1); filter: brightness(1); }
  }

  .target-selected-pulse {
    animation: ptt-target-select-flash 0.4s ease-out !important;
  }

  @keyframes mem-cleared-shake {
    0% { transform: scale(1); border-color: #f85149; background: rgba(248, 81, 73, 0.25); }
    20% { transform: scale(0.93) translateX(-3px); }
    40% { transform: scale(0.95) translateX(3px); }
    60% { transform: scale(0.98) translateX(-2px); border-color: #f85149; }
    80% { transform: scale(1) translateX(1px); }
    100% { transform: scale(1); }
  }

  .mem-cleared-flash {
    animation: mem-cleared-shake 0.45s ease-out !important;
  }

  /* Long Press Visual Feedback: Glowing circle for 0.8s with non-linear ease-out curve */
  .long-press-ring {
    position: fixed;
    pointer-events: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    margin-left: -30px;
    margin-top: -30px;
    border: 3px solid #00f0ff;
    box-shadow: 0 0 16px #00f0ff, inset 0 0 10px rgba(0, 240, 255, 0.5);
    background: radial-gradient(circle, rgba(0, 240, 255, 0.25) 0%, rgba(0, 240, 255, 0.06) 60%, transparent 100%);
    z-index: 999999;
    animation: long-press-circle-flash 0.8s cubic-bezier(0.01, 0.96, 0.06, 1) forwards;
  }

  @keyframes long-press-circle-flash {
    0% {
      transform: scale(0.08);
      opacity: 1;
      border-color: #ffffff;
      box-shadow: 0 0 25px #ffffff, 0 0 35px #00f0ff;
    }
    20% {
      opacity: 0.75;
      border-color: #00f0ff;
      box-shadow: 0 0 18px #00f0ff, inset 0 0 10px rgba(0, 240, 255, 0.6);
    }
    50% {
      opacity: 0.45;
      border-color: rgba(0, 240, 255, 0.7);
      box-shadow: 0 0 12px rgba(0, 240, 255, 0.4), inset 0 0 6px rgba(0, 240, 255, 0.25);
    }
    80% {
      opacity: 0.20;
      border-color: rgba(0, 240, 255, 0.3);
      box-shadow: 0 0 8px rgba(0, 240, 255, 0.15);
    }
    100% {
      transform: scale(1.73);
      opacity: 0;
      border-color: rgba(0, 240, 255, 0);
      box-shadow: 0 0 15px rgba(0, 240, 255, 0);
    }
  }

  /* High-contrast crisp typography during Active RX */
  .vfo-row.vfo-rx-active .vfo-caller-call {
    color: #ffffff !important;
    filter: none !important;
    opacity: 1 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  }
  .vfo-row.vfo-rx-active .vfo-caller-id {
    color: #9ff8bf !important;
    filter: none !important;
    opacity: 1 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
    border-color: rgba(159, 248, 191, 0.6) !important;
    background: rgba(159, 248, 191, 0.22) !important;
  }
  .vfo-row.vfo-rx-active .vfo-caller-country {
    color: #79c0ff !important;
    filter: none !important;
    opacity: 1 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
  }
  .vfo-row.vfo-rx-active .vfo-tg-text {
    color: #ffffff !important;
    filter: none !important;
    opacity: 1 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
  }
  .vfo-row.vfo-rx-active .vfo-tg-desc,
  .vfo-row.vfo-rx-active .ts-tg-desc {
    color: #ffffff !important;
    filter: none !important;
    opacity: 1 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  }
  .vfo-row.vfo-rx-active .vfo-tg-pill,
  .vfo-row.vfo-rx-active .ts-tg-pill {
    color: #ffffff !important;
    filter: none !important;
    opacity: 1 !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
    background: rgba(255, 255, 255, 0.18) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
  }
  .vfo-row.vfo-rx-active .vfo-tg-pill.is-id,
  .vfo-row.vfo-rx-active .ts-tg-pill.is-id {
    color: #ffffff !important;
    border-color: rgba(159, 248, 191, 0.6) !important;
    background: rgba(159, 248, 191, 0.22) !important;
  }
  .vfo-row.vfo-rx-active .vfo-flag {
    filter: none !important;
    opacity: 1 !important;
  }

  /* High-contrast crisp typography during Active TX */
  .vfo-row.vfo-tx-active .vfo-caller-call {
    color: #ffffff !important;
    filter: none !important;
    opacity: 1 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  }
  .vfo-row.vfo-tx-active .vfo-tg-text {
    color: #ffffff !important;
    filter: none !important;
    opacity: 1 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
  }
  .vfo-row.vfo-tx-active .vfo-tg-desc,
  .vfo-row.vfo-tx-active .ts-tg-desc {
    color: #ffffff !important;
    filter: none !important;
    opacity: 1 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  }
  .vfo-row.vfo-tx-active .vfo-tg-pill,
  .vfo-row.vfo-tx-active .ts-tg-pill {
    color: #ffffff !important;
    filter: none !important;
    opacity: 1 !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
    background: rgba(255, 255, 255, 0.18) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
  }
  .vfo-row.vfo-tx-active .vfo-tg-pill.is-id,
  .vfo-row.vfo-tx-active .ts-tg-pill.is-id {
    color: #ffffff !important;
    border-color: rgba(159, 248, 191, 0.6) !important;
    background: rgba(159, 248, 191, 0.22) !important;
  }
  .vfo-row.vfo-tx-active .vfo-flag {
    filter: none !important;
    opacity: 1 !important;
  }
  
  .vfo-vu-bar {
    display: none !important;
  }
  
  .vfo-vu-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, 
      #2ea043 0%, 
      #2ea043 65%, 
      #d29922 80%, 
      #f85149 100%
    );
    box-shadow: 0 0 6px rgba(46, 160, 67, 0.4);
    transition: width 0.05s linear;
  }

  .vfo-vu-peak {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background-color: #ffffff;
    box-shadow: 0 0 3px #ffffff, 0 0 5px rgba(255, 255, 255, 0.8);
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  .vfo-vu-peak.vu-peak-overload {
    background-color: #ff4d4f;
    box-shadow: 0 0 4px #ff4d4f, 0 0 8px rgba(255, 77, 79, 0.9);
  }
  
  .vfo-vu-bar::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent var(--vu-gap, 4px),
      var(--vu-tick-color, #334155) var(--vu-gap, 4px),
      var(--vu-tick-color, #334155) var(--vu-period, 5.142857px)
    );
    pointer-events: none;
    z-index: 3;
  }
  
  .vfo-tx-tag, .vfo-rx-tag { display: none !important; }

  /* AI Speech Transcriber & Teleprompter Caption Box */
  .vfo-caption-box {
    grid-area: vu;
    height: 28px;
    min-height: 28px;
    max-height: 28px;
    line-height: 14px;
    font-size: 11px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 500;
    overflow: hidden;
    position: relative;
    border-radius: 4px;
    padding: 0 6px;
    margin-right: 26px; /* Reserves space for vertical VU meter (16px + 5px right + 5px gap) */
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
    color: #e6edf3;
    display: none;
    z-index: 2;
    cursor: default;
    user-select: text;
  }

  .vfo-caption-stream {
    width: 100%;
    margin: 0;
    padding: 0;
    word-break: break-word;
    white-space: pre-wrap;
  }

  .vfo-caption-entry {
    margin-bottom: 6px;
    line-height: 15px;
  }

  .vfo-caption-entry:last-child {
    margin-bottom: 0;
  }

  .vfo-caption-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 4px 1px 3px;
    margin-right: 3px;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.28);
    border-radius: 3px;
    vertical-align: middle;
    line-height: 13px;
    white-space: nowrap;
    user-select: text;
  }

  .vfo-caption-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
  }

  .vfo-caption-badge .flag-badge {
    width: 15px;
    height: 10px;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    vertical-align: middle;
  }

  .vfo-caption-badge .flag-badge img.flag-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .vfo-caption-badge .flag-badge.flag-global svg {
    width: 9px;
    height: 9px;
  }

  .vfo-caption-icon {
    font-size: 10px;
    line-height: 1;
    display: inline-block;
    vertical-align: 0;
  }

  .vfo-caption-callsign {
    font-weight: 800 !important;
    color: #38bdf8;
    letter-spacing: 0.3px;
    font-size: 10.5px;
  }

  .vfo-caption-text {
    user-select: text;
  }

  .vfo-caption-stream:empty::before {
    content: "🎙️ Ожидание речи...";
    opacity: 0.35;
    font-style: italic;
    font-size: 10.5px;
    line-height: 28px;
    display: block;
  }

  /* Original Spoken Language / AI Toggle Badge (top: 7px, right: 8px, equal 26px height) */
  .vfo-lang-badge {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 45px !important;
    min-width: 45px !important;
    max-width: 45px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    padding: 0 2px !important;
    box-sizing: border-box !important;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 0.72rem;
    line-height: 1;
    background: #282e37 !important;
    border: 1px solid #4a5462 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    color: #8b949e !important;
    z-index: 6;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  }

  /* When Transcribe is OFF: icon is greyed-out monochrome, text is dimmed */
  .vfo-lang-badge:not(.transcribe-on) .lang-icon-mic {
    filter: grayscale(100%) opacity(0.5) !important;
  }
  .vfo-lang-badge:not(.transcribe-on) .lang-code-text {
    opacity: 0.65;
  }

  .vfo-lang-badge:hover {
    background: #343c48 !important;
    border-color: #647182 !important;
    color: #c9d1d9 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
  }

  .vfo-lang-badge:not(.transcribe-on):hover .lang-icon-mic {
    filter: grayscale(100%) opacity(0.75) !important;
  }
  .vfo-lang-badge:not(.transcribe-on):hover .lang-code-text {
    opacity: 0.9;
  }

  .vfo-lang-badge:active {
    transform: scale(0.94);
  }

  .vfo-row.has-transcribe .vfo-lang-badge,
  .vfo-lang-badge.transcribe-on {
    display: inline-flex;
    background: #00e5ff !important;
    border: 1px solid #ffffff !important;
    color: #001824 !important;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.9), 0 1px 3px rgba(0, 0, 0, 0.4) !important;
  }

  .vfo-row.has-transcribe .vfo-lang-badge:hover,
  .vfo-lang-badge.transcribe-on:hover {
    background: #33ebff !important;
    border-color: #ffffff !important;
    color: #000000 !important;
    box-shadow: 0 0 14px rgba(0, 229, 255, 1) !important;
  }

  .vfo-row.has-transcribe .vfo-lang-badge .lang-icon-mic,
  .vfo-lang-badge.transcribe-on .lang-icon-mic,
  .vfo-lang-badge.has-lang .lang-icon-mic {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7)) !important;
  }

  .vfo-row.has-transcribe .vfo-lang-badge .lang-code-text,
  .vfo-lang-badge.transcribe-on .lang-code-text,
  .vfo-lang-badge.has-lang .lang-code-text {
    color: #00121c !important;
    font-weight: 800;
  }

  .vfo-row.has-transcribe .vfo-lang-badge.has-lang,
  .vfo-lang-badge.has-lang {
    background: #00f0ff !important;
    border: 1px solid #ffffff !important;
    box-shadow: 0 0 12px rgba(0, 240, 255, 1), 0 1px 4px rgba(0, 0, 0, 0.5) !important;
  }

  .vfo-lang-badge .lang-icon-mic {
    font-size: 0.65rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
  }

  .vfo-lang-badge .lang-code-text {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: -0.2px;
    line-height: 1;
    text-transform: uppercase;
  }

  /* Gemini API Error Blinking (5 cycles at 1 Hz: 500ms ON / 500ms OFF) */
  @keyframes vfo-ai-error-blink-dark {
    0%, 49.9% {
      background-color: #ff2222;
      color: #000000;
      border-color: #ff0000;
      box-shadow: 0 0 10px rgba(255, 34, 34, 0.85);
      font-weight: 900;
    }
    50%, 100% {
      background-color: #282e37;
      color: #8b949e;
      border-color: #4a5462;
      box-shadow: none;
      font-weight: 800;
    }
  }

  .vfo-lang-badge.ai-error-blink {
    animation: vfo-ai-error-blink-dark 1s linear 5 !important;
  }

  .vfo-lang-badge.has-ai-error {
    border-color: #ff4d4f !important;
    color: #ff7875 !important;
    background: #3c1618 !important;
  }

  /* --- TXT Badge Long-Press & Transcriber Model Picker --- */
  .vfo-lang-badge.vfo-lang-pressing {
    transform: scale(0.90) !important;
    box-shadow: 0 0 12px rgba(0, 229, 255, 1), inset 0 0 4px rgba(0, 229, 255, 0.5) !important;
    border-color: #00e5ff !important;
    color: #00e5ff !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease !important;
  }

  [data-theme="light"] .vfo-lang-badge.vfo-lang-pressing {
    box-shadow: 0 0 12px rgba(2, 132, 199, 1), inset 0 0 4px rgba(2, 132, 199, 0.5) !important;
    border-color: #0284c7 !important;
    color: #0284c7 !important;
  }

  .vfo-lang-badge.has-ai-error .lang-code-text,
  .vfo-lang-badge.ai-error-blink .lang-code-text,
  .vfo-lang-badge.vfo-lang-pressing .lang-code-text {
    color: inherit !important;
  }

  /* VFO TTS Speech Synthesis Toggle Badge (under TXT badge, top: 40px, right: 8px, equal 26px height) */
  .vfo-tts-badge {
    position: absolute;
    top: 40px;
    right: 8px;
    width: 45px !important;
    min-width: 45px !important;
    max-width: 45px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    padding: 0 2px !important;
    box-sizing: border-box !important;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: #282e37 !important;
    border: 1px solid #4a5462 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    color: #8b949e !important;
    z-index: 6;
    cursor: pointer;
    user-select: none;
    font-size: 0.72rem;
    line-height: 1;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  }

  /* When TTS is OFF: icons are fully greyed-out monochrome, code is dimmed */
  .vfo-tts-badge:not(.tts-on) .tts-icon-spk {
    filter: grayscale(100%) opacity(0.5) !important;
  }
  .vfo-tts-badge:not(.tts-on) .tts-lang-code {
    opacity: 0.65;
  }

  .vfo-tts-badge:hover {
    background: #343c48 !important;
    border-color: #647182 !important;
    color: #c9d1d9 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
  }

  .vfo-tts-badge:not(.tts-on):hover .tts-icon-spk {
    filter: grayscale(100%) opacity(0.75) !important;
  }
  .vfo-tts-badge:not(.tts-on):hover .tts-lang-code {
    opacity: 0.9;
  }

  .vfo-tts-badge:active {
    transform: scale(0.94);
  }

  .vfo-tts-badge.tts-on {
    display: inline-flex;
    background: #00e5ff !important;
    border: 1px solid #ffffff !important;
    color: #001824 !important;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.9), 0 1px 3px rgba(0, 0, 0, 0.4) !important;
  }

  .vfo-tts-badge.tts-on:hover {
    background: #33ebff !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 14px rgba(0, 229, 255, 1) !important;
  }

  .vfo-tts-badge.tts-on .tts-icon-spk {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7)) !important;
  }
  .vfo-tts-badge.tts-on .tts-lang-code {
    color: #001824 !important;
    font-weight: 800;
  }

  .vfo-tts-badge.tts-speaking {
    background: #00ffff !important;
    border-color: #ffffff !important;
    animation: vfo-tts-pulse 0.8s infinite alternate ease-in-out !important;
  }

  @keyframes vfo-tts-pulse {
    0% {
      transform: scale(1);
      box-shadow: 0 0 8px rgba(0, 229, 255, 0.8);
    }
    100% {
      transform: scale(1.08);
      box-shadow: 0 0 18px rgba(0, 240, 255, 1), 0 0 24px rgba(0, 229, 255, 0.8);
    }
  }

  .vfo-tts-badge .tts-icon-spk {
    font-size: 0.65rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
  }

  .vfo-tts-badge .tts-lang-code {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: -0.2px;
    line-height: 1;
    text-transform: uppercase;
  }

  .transcriber-model-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 10005;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: modelPickerFadeIn 0.15s ease-out;
  }

  .transcriber-model-picker-overlay.closing {
    animation: modelPickerFadeOut 0.15s ease-in forwards;
  }

  .transcriber-model-picker-popup {
    position: fixed;
    width: 324px;
    max-width: calc(100vw - 20px);
    background: var(--bg-card, #181b22);
    border: 1px solid var(--border-color, #30363d);
    border-radius: 10px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 10006;
    animation: modelPickerPopIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
  }

  .model-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.22);
    border-bottom: 1px solid var(--border-color, #30363d);
  }

  .model-picker-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.80rem;
    font-weight: 700;
    color: var(--text-primary, #e6edf3);
    letter-spacing: 0.2px;
  }

  .model-picker-icon {
    font-size: 0.95rem;
    line-height: 1;
  }

  .model-picker-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted, #8b949e);
    border-radius: 4px;
    padding: 2px 6px;
    transition: color 0.12s ease, background 0.12s ease;
  }

  .model-picker-close:hover {
    color: var(--text-primary, #ffffff);
    background: rgba(255, 255, 255, 0.1);
  }

  .model-picker-list {
    display: flex;
    flex-direction: column;
    padding: 4px 0;
    max-height: 380px;
    overflow-y: auto;
  }

  .model-picker-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.12s ease, border-left-color 0.12s ease;
    user-select: none;
    -webkit-user-select: none;
    border-left: 3px solid transparent;
  }

  .model-picker-item:hover {
    background: rgba(56, 189, 248, 0.08);
  }

  .model-picker-item.active {
    background: rgba(56, 189, 248, 0.14);
    border-left-color: #38bdf8;
  }

  .model-picker-radio {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid #484f58;
    margin-top: 2px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    background: rgba(0, 0, 0, 0.2);
  }

  .model-picker-item.active .model-picker-radio {
    border-color: #38bdf8;
    background: #0284c7;
    box-shadow: 0 0 6px rgba(56, 189, 248, 0.6);
  }

  .model-picker-check {
    display: none;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
  }

  .model-picker-item.active .model-picker-check {
    display: block;
  }

  .model-picker-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .model-picker-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }

  .model-picker-name {
    font-size: 0.80rem;
    font-weight: 600;
    color: var(--text-primary, #e6edf3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .model-picker-item.active .model-picker-name {
    color: #38bdf8;
  }

  .model-picker-badge {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 9999px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .model-picker-badge.badge-recommended {
    background: rgba(14, 165, 233, 0.2);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.4);
  }

  .model-picker-badge.badge-fast {
    background: rgba(168, 85, 247, 0.2);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.4);
  }

  .model-picker-badge.badge-new {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.4);
  }

  .model-picker-badge.badge-pro {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.4);
  }

  .model-picker-badge.badge-auto {
    background: rgba(100, 116, 139, 0.2);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.4);
  }

  .model-picker-badge.badge-default {
    background: rgba(100, 116, 139, 0.15);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.3);
  }

  .model-picker-desc {
    font-size: 0.70rem;
    color: var(--text-muted, #8b949e);
    line-height: 1.25;
  }

  /* Light theme overrides */
  [data-theme="light"] .transcriber-model-picker-popup {
    background: #ffffff;
    border-color: #d0d7de;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.05);
  }

  [data-theme="light"] .model-picker-header {
    background: #f6f8fa;
    border-bottom-color: #d0d7de;
  }

  [data-theme="light"] .model-picker-title {
    color: #1f2328;
  }

  [data-theme="light"] .model-picker-item:hover {
    background: rgba(2, 132, 199, 0.08);
  }

  [data-theme="light"] .model-picker-item.active {
    background: rgba(2, 132, 199, 0.12);
    border-left-color: #0284c7;
  }

  [data-theme="light"] .model-picker-name {
    color: #1f2328;
  }

  [data-theme="light"] .model-picker-item.active .model-picker-name {
    color: #0284c7;
  }

  [data-theme="light"] .model-picker-item.active .model-picker-radio {
    border-color: #0284c7;
    background: #0284c7;
  }

  [data-theme="light"] .model-picker-desc {
    color: #57606a;
  }

  @keyframes modelPickerFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes modelPickerFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
  }
  @keyframes modelPickerPopIn {
    from { opacity: 0; transform: scale(0.94) translateY(-6px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
  }

  /* --- TTS Badge Long-Press & Quick Settings Popover --- */
  .vfo-tts-badge.vfo-tts-pressing {
    transform: scale(0.90) !important;
    box-shadow: 0 0 10px rgba(0, 176, 255, 0.8), inset 0 0 4px rgba(0, 176, 255, 0.5) !important;
    border-color: #00b0ff !important;
    color: #00e5ff !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease !important;
  }

  [data-theme="light"] .vfo-tts-badge.vfo-tts-pressing {
    box-shadow: 0 0 10px rgba(2, 132, 199, 0.8), inset 0 0 4px rgba(2, 132, 199, 0.5) !important;
    border-color: #0284c7 !important;
    color: #0284c7 !important;
  }

  .tts-quick-settings-overlay {
    position: fixed;
    inset: 0;
    z-index: 10005;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: modelPickerFadeIn 0.15s ease-out;
  }

  .tts-quick-settings-overlay.closing {
    animation: modelPickerFadeOut 0.15s ease-in forwards;
  }

  .tts-quick-settings-popup {
    position: fixed;
    width: 330px;
    max-width: calc(100vw - 20px);
    background: var(--bg-card, #181b22);
    border: 1px solid var(--border-color, #30363d);
    border-radius: 10px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 10006;
    animation: modelPickerPopIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
  }

  .tts-quick-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.22);
    border-bottom: 1px solid var(--border-color, #30363d);
  }

  .tts-quick-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary, #e6edf3);
    letter-spacing: 0.2px;
  }

  .tts-quick-icon {
    font-size: 0.95rem;
    line-height: 1;
  }

  .tts-quick-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted, #8b949e);
    border-radius: 4px;
    padding: 2px 6px;
    transition: color 0.12s ease, background 0.12s ease;
  }

  .tts-quick-close:hover {
    color: var(--text-primary, #ffffff);
    background: rgba(255, 255, 255, 0.1);
  }

  .tts-quick-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px 3px 12px;
    max-height: 440px;
    overflow-y: auto;
  }

  .tts-quick-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .tts-quick-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .tts-quick-label {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-primary, #e6edf3);
  }

  .tts-quick-val {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--accent-color, #00b0ff);
    font-family: monospace;
  }

  .tts-quick-select {
    width: 100%;
    background-color: #238142 !important;
    background: #238142 !important;
    color: #ffffff !important;
    border: 1px solid #1c6634 !important;
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 0.76rem;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
    color-scheme: dark;
  }

  .tts-quick-select:hover {
    background: #2a944d !important;
    border-color: #38d672 !important;
  }

  .tts-quick-select:focus {
    border-color: #4ade80 !important;
  }

  .tts-quick-range {
    width: 100%;
    cursor: pointer;
    accent-color: #00b0ff;
    height: 4px;
    margin: 4px 0;
  }

  .tts-quick-checkboxes-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    margin-top: 3px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .tts-quick-cb-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 0.80rem;
    font-weight: 500;
    color: var(--text-primary, #e6edf3);
    margin: 0;
    line-height: 1.3;
  }

  .tts-quick-cb-label input[type="checkbox"] {
    cursor: pointer;
    accent-color: #00b0ff;
    width: 15px;
    height: 15px;
    margin: 0;
  }

  .tts-quick-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 12px;
    background: rgba(0, 0, 0, 0.18);
    border-top: 1px solid var(--border-color, #30363d);
  }

  .btn-tts-quick-test {
    background: rgba(0, 176, 255, 0.15);
    border: 1px solid rgba(0, 176, 255, 0.4);
    color: #80e5ff;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
  }

  .btn-tts-quick-test:hover {
    background: rgba(0, 176, 255, 0.25);
    border-color: #00b0ff;
    color: #ffffff;
  }

  .btn-tts-quick-save {
    background: #00b0ff;
    border: 1px solid #00b0ff;
    color: #ffffff;
    padding: 4px 12px;
    border-radius: 5px;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
  }

  .btn-tts-quick-save:hover {
    background: #0091ea;
    border-color: #0091ea;
  }

  /* Light theme overrides */
  [data-theme="light"] .tts-quick-settings-popup {
    background: #ffffff;
    border-color: #d0d7de;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.05);
  }

  [data-theme="light"] .tts-quick-header {
    background: #f6f8fa;
    border-bottom-color: #d0d7de;
  }

  [data-theme="light"] .tts-quick-title {
    color: #1f2328;
  }

  [data-theme="light"] .tts-quick-footer {
    background: #f6f8fa;
    border-top-color: #d0d7de;
  }

  [data-theme="light"] .tts-quick-select {
    background-color: #238142 !important;
    background: #238142 !important;
    color: #ffffff !important;
    border: 1px solid #1c6634 !important;
    color-scheme: dark;
  }

  [data-theme="light"] .btn-tts-quick-test {
    background: rgba(2, 132, 199, 0.1);
    border-color: rgba(2, 132, 199, 0.35);
    color: #0284c7;
  }

  [data-theme="light"] .btn-tts-quick-save {
    background: #0284c7;
    border-color: #0284c7;
  }


  /* Vertical VU Meter (under PTT dot on the right) */
  .vfo-vu-vert-bar {
    position: absolute;
    right: 5px;
    top: 25px;
    bottom: 4px;
    width: 16px;
    height: auto; /* Extends from top of AI button to the very bottom */
    border-radius: 2px;
    background-color: #161e28;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.9);
    overflow: hidden;
    display: none;
    z-index: 4;
  }

  .vfo-vu-vert-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent var(--vu-gap, 4px),
      var(--vu-tick-color, #334155) var(--vu-gap, 4px),
      var(--vu-tick-color, #334155) var(--vu-period, 5.142857px)
    );
    pointer-events: none;
    z-index: 3;
  }

  .vfo-vu-vert-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(0deg,
      #2ea043 0%,
      #2ea043 65%,
      #d29922 80%,
      #f85149 100%
    );
    box-shadow: 0 0 6px rgba(46, 160, 67, 0.4);
    transition: height 0.05s linear;
  }

  .vfo-vu-vert-peak {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    margin-bottom: -1px;
    background-color: #ffffff;
    box-shadow: 0 0 3px #ffffff, 0 0 5px rgba(255, 255, 255, 0.8);
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  .vfo-vu-vert-peak.vu-peak-overload {
    background-color: #ff4d4f;
    box-shadow: 0 0 4px #ff4d4f, 0 0 8px rgba(255, 77, 79, 0.9);
  }

/* --- Option B: Fullscreen Single-Slot Expanded Transcription Mode --- */

  /* Dual-watch standard mode: caption box hidden */
  .vfo-row:not(.has-transcribe) .vfo-caption-box {
    display: none !important;
  }

  /* 1. Hide the inactive slot completely in transcribe mode */
  .radio-container.transcribe-ts1-only .vfo-ts2-row,
  .radio-container.transcribe-ts2-only .vfo-ts1-row,
  .vfo-hidden-by-max {
    display: none !important;
  }

  /* 2. Active slot expands to 100% of VFO area (216px total) */
  .radio-container.transcribe-ts1-only .vfo-ts1-row,
  .radio-container.transcribe-ts2-only .vfo-ts2-row {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    height: 216px !important;
    min-height: 216px !important;
    max-height: 216px !important;
    flex: 0 0 216px !important;
    padding: 6px 8px 6px 8px !important;
    overflow: hidden !important;
  }

  /* 3. Header Strip: Only Callsign and Name (Hide ID, Country and TG) */
  .radio-container.transcribe-ts1-only .vfo-ts1-row .vfo-center-col,
  .radio-container.transcribe-ts2-only .vfo-ts2-row .vfo-center-col {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    margin: 0 0 5px 0 !important;
    padding: 0 52px 0 34px !important; /* 34px clears 36px corner triangle, 52px clears action buttons */
    box-sizing: border-box !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .radio-container.transcribe-ts1-only .vfo-ts1-row .vfo-caller-row,
  .radio-container.transcribe-ts2-only .vfo-ts2-row .vfo-caller-row {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 26px !important;
    line-height: 26px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  .radio-container.transcribe-ts1-only .vfo-ts1-row .vfo-caller-call,
  .radio-container.transcribe-ts2-only .vfo-ts2-row .vfo-caller-call {
    font-size: 0.94rem !important; /* Reduced by 3 points specifically in transcribe/TTS mode */
    font-weight: 700 !important;
    color: #ffffff !important;
    max-width: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 26px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85) !important;
  }

  /* In transcribe/TTS modes, hide ID, Country, and TalkGroup completely */
  .radio-container.transcribe-ts1-only .vfo-ts1-row .vfo-caller-subrow,
  .radio-container.transcribe-ts2-only .vfo-ts2-row .vfo-caller-subrow,
  .radio-container.transcribe-ts1-only .vfo-ts1-row .vfo-tg-row,
  .radio-container.transcribe-ts2-only .vfo-ts2-row .vfo-tg-row {
    display: none !important;
  }

  /* 4. Action Buttons in Transcribe Mode */
  .radio-container.has-transcribe-mode .vfo-lang-badge {
    display: inline-flex !important;
  }
  .radio-container.has-transcribe-mode .vfo-vu-vert-bar,
  .radio-container.has-transcribe-mode .vfo-vu-bar {
    display: none !important;
  }

  /* 5. Expanded Caption Box (Speech & Translation Text Area) */
  .radio-container.transcribe-ts1-only .vfo-ts1-row .vfo-caption-box,
  .radio-container.transcribe-ts2-only .vfo-ts2-row .vfo-caption-box {
    display: block !important;
    height: 173px !important;
    min-height: 173px !important;
    max-height: 173px !important;
    width: calc(100% - 50px) !important; /* Dedicated right gutter for action buttons */
    margin: 0 !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    background: rgba(0, 0, 0, 0.45) !important;
    border: 1.5px solid rgba(0, 229, 255, 0.32) !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7) !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(0, 217, 255, 0.4) transparent !important;
    font-size: 10px !important; /* Reduced by 3 points */
    line-height: 14px !important;
    user-select: text !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* TS2 Warm Orange Border Accent matching slot indicator */
  .radio-container.transcribe-ts2-only .vfo-ts2-row .vfo-caption-box {
    border-color: rgba(249, 135, 0, 0.38) !important;
    scrollbar-color: rgba(249, 135, 0, 0.4) transparent !important;
  }

  .radio-container.transcribe-ts1-only .vfo-ts1-row .vfo-caption-stream:empty::before,
  .radio-container.transcribe-ts2-only .vfo-ts2-row .vfo-caption-stream:empty::before {
    content: "🎙️ Ожидание речи..." !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    min-height: 155px !important;
    color: #6e7681 !important;
    font-size: 10px !important; /* Reduced by 3 points */
    font-style: italic !important;
  }

  .radio-container.has-transcribe-mode .vfo-caption-entry {
    margin-bottom: 5px;
    line-height: 14px;
    font-size: 10px; /* Reduced by 3 points */
  }
  .radio-container.has-transcribe-mode .vfo-caption-badge {
    font-size: 9px; /* Reduced by 2-3 points */
    padding: 1px 4px;
  }
  .radio-container.has-transcribe-mode .vfo-caption-callsign {
    font-size: 9.5px; /* Reduced by 2.5-3 points */
  }

  .vfo-caption-box::-webkit-scrollbar {
    width: 5px;
  }
  .vfo-caption-box::-webkit-scrollbar-track {
    background: transparent;
  }
  .vfo-caption-box::-webkit-scrollbar-thumb {
    background: rgba(0, 217, 255, 0.3);
    border-radius: 2px;
  }
  .vfo-caption-box::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 217, 255, 0.65);
  }
  .radio-container.transcribe-ts2-only .vfo-ts2-row .vfo-caption-box::-webkit-scrollbar-thumb {
    background: rgba(249, 135, 0, 0.35);
  }
  .radio-container.transcribe-ts2-only .vfo-ts2-row .vfo-caption-box::-webkit-scrollbar-thumb:hover {
    background: rgba(249, 135, 0, 0.7);
  }

  /* Callsign Highlight in Speech Transcriber */
  .vfo-call-tag {
    color: #ffd166;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-shadow: 0 0 6px rgba(255, 209, 102, 0.45);
    display: inline-block;
  }

/* Hotspot Cards in Settings */
.hotspot-cards-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: calc(92vh - 170px);
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}

.hotspot-card {
  background: #161b22;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 4px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border 0.15s;
}

.hotspot-card.active-card {
  border-color: var(--color-cyan);
}

.hotspot-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hotspot-card-title {
  font-weight: bold;
  font-size: 0.9rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
}

.hotspot-card-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: monospace;
}

.hotspot-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.btn-card-action {
  background: #21262d;
  border: 2px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.72rem;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-card-action:hover {
  background: #30363d;
  color: #fff;
}

.btn-card-action.danger:hover {
  background: rgba(255, 51, 75, 0.2);
  border-color: var(--color-red);
  color: var(--color-red);
}

.btn-card-action.primary {
  background: rgba(46, 204, 113, 0.15);
  border-color: var(--color-green);
  color: var(--color-green);
}

/* When slot is muted, sound is off, but text on screen remains 100% crisp and clear */
.vfo-row.muted-vfo .vfo-tg-text,
.vfo-row.muted-vfo .vfo-caller-call,
.vfo-row.muted-vfo .vfo-caller-id,
.vfo-row.muted-vfo .vfo-caller-country {
  opacity: 1 !important;
}

.header-log-btn {
  font-size: 0.78rem;
  font-weight: 600;
  width: auto !important;
  padding: 0 10px;
  
  transition: all 0.2s ease;
}

.header-log-btn.active {
  background: #ff5722 !important;
  border-color: #ff5722 !important;
  color: #fff !important;
  box-shadow: 0 0 12px rgba(255, 87, 34, 0.4);
}

.icon-btn.small {
  width: 28px;
  height: 28px;
  font-size: 0.8rem;
  border-radius: 6px;
}

/* =========================================================
   BrandMeister Realtime Live Activity Monitor (Integrated)
   ========================================================= */
.live-monitor-container {
  width: 436px;
  min-width: 436px;
  max-width: 436px;
  flex: 0 0 436px;
  background: var(--bg-monitor, #1c2823);
  border: 2px solid var(--border-monitor, #2b3a32);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  padding: 12px 3px 8px 3px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 540px;
  height: calc(100vh - 40px);
  max-height: calc(100vh - 40px);
  box-sizing: border-box;
  align-self: flex-start;
  position: sticky;
  top: 20px;
}

.live-monitor-container.hidden {
  display: none !important;
}

.live-monitor-container.pc-height-hotspot {
  min-height: 0 !important;
  height: var(--desktop-log-height, auto) !important;
  max-height: var(--desktop-log-height, none) !important;
}

@media (max-width: 768px) {
  .radio-container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 1 auto;
    box-sizing: border-box !important;
  }
  .live-monitor-container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
    height: var(--mobile-log-height, calc(100vh - 290px)) !important;
    min-height: 0 !important;
    max-height: var(--mobile-log-height, none) !important;
    box-sizing: border-box !important;
    position: static !important;
    border-radius: 14px !important;
    padding: 8px 4px 6px 4px !important;
    overflow-x: hidden !important;
  }

  /* Hotspot Card in Compact Mode (When Log is Open on Mobile) */
  .radio-container.hotspot-compact-mode {
    padding: 6px 8px 8px 8px !important;
    gap: 4px !important;
    border-color: rgba(0, 229, 255, 0.45) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
  }

  .radio-container.hotspot-compact-mode .radio-header {
    padding: 0 2px !important;
    margin-bottom: 2px !important;
  }

  .radio-container.hotspot-compact-mode .header-brand-row {
    font-size: 0.85rem !important;
  }
  .fullscreen-toggle-btn,
  .header-settings-btn {
    width: 26px !important;
    height: 26px !important;
  }

  /* VFO action buttons mobile shifts: TXT top: 5px, TTS top: 27px */
  .vfo-pan-btn {
    display: none !important;
  }
  .vfo-ptt-dot {
    top: 1px !important;
  }
  .vfo-lang-badge {
    top: 7px !important;
    height: 26px !important;
  }
  .vfo-tts-badge {
    top: 40px !important;
    height: 26px !important;
  }

  /* Responsive volume strip (40px width, widened frame, larger controls) */
  .vertical-volume-strip {
    flex: 0 0 40px !important;
    width: 40px !important;
    padding: 4px 1px 4px 1px !important;
    border-radius: 9px !important;
    align-items: center !important;
    gap: 2px !important;
  }

  .volume-val-v {
    font-size: 0.65rem !important;
  }

  .volume-slider-v-wrap {
    min-height: 20px !important;
    padding: 2px 0 !important;
    margin: 1px 0 !important;
  }

  .volume-slider-v-wrap::before {
    width: 16px !important;
    border-radius: 8px !important;
  }

  .volume-slider-v-wrap::after {
    width: 8px !important;
    border-radius: 4px !important;
  }

  .volume-slider-v {
    width: 28px !important;
  }

  .volume-slider-v::-webkit-slider-thumb {
    width: 18px !important;
    height: 18px !important;
  }

  .volume-slider-v::-moz-range-thumb {
    width: 18px !important;
    height: 18px !important;
  }

  .volume-icon-v {
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    align-self: center !important;
    box-sizing: border-box !important;
  }

  .volume-icon-v .speaker-svg {
    width: 20px !important;
    height: 20px !important;
    margin: 0 auto !important;
  }

  .vertical-volume-strip .volume-strip-settings-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    margin: 1px auto 0 auto !important;
    align-self: center !important;
  }

  .vertical-volume-strip .volume-strip-settings-btn .settings-icon {
    width: 18px !important;
    height: 18px !important;
    margin: 0 auto !important;
  }

  .radio-container .brand-title {
    font-size: 1.12rem !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  .brand-logo-img {
    height: 15px !important;
    width: auto !important;
    max-width: 100px !important;
    object-fit: contain !important;
  }

  .radio-container .brand-version,
  .radio-container .hotspot-name-badge {
    max-width: 95px !important;
    padding: 2px 6px !important;
    font-size: 0.8rem !important; /* Увеличено на 2 пункта (было 0.68rem) */
  }

  .radio-container.hotspot-compact-mode .bm-info-banner {
    display: flex !important;
    height: 40px !important;
    padding: 2px 6px !important;
    margin-bottom: 2px !important;
  }

  .radio-container.hotspot-compact-mode .transceiver-middle-row {
    gap: 6px !important;
    margin-bottom: 2px !important;
  }

  .radio-container.hotspot-compact-mode .radio-screen {
    padding: 5px 6px 4px 6px !important;
    gap: 3px !important;
  }

  .radio-container.hotspot-compact-mode .screen-clock-bar {
    padding: 0 1px 2px 1px !important;
  }

  .radio-container.hotspot-compact-mode .screen-clock-item .clock-label {
    font-size: 0.58rem !important;
  }

  .radio-container.hotspot-compact-mode .screen-clock-item .clock-val {
    font-size: 0.66rem !important;
  }

  .radio-container.hotspot-compact-mode .screen-top-bar {
    padding-bottom: 2px !important;
    font-size: 0.65rem !important;
  }

  .radio-container.hotspot-compact-mode .screen-bottom-bar {
    display: none !important;
  }

  .radio-container.hotspot-compact-mode .quick-actions-row {
    display: none !important;
  }

  .radio-container.hotspot-compact-mode .ptt-section,
  .radio-container.hotspot-compact-mode .quick-mem-bar {
    display: none !important;
  }


  .live-monitor-header {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 0 0 5px 0 !important;
    gap: 3px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .live-monitor-title {
    display: flex !important;
    order: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    flex-shrink: 0 !important;
  }

  .live-monitor-title .live-pulse-dot,
  .live-monitor-title .live-title-text {
    display: none !important;
  }

  .live-search-bar {
    order: 1 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
  }

  .log-search-input {
    height: 26px !important;
    padding: 3px 6px !important;
    font-size: 0.72rem !important;
    border-radius: 6px !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #logCountBadge,
  .log-count-badge {
    order: 2 !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 6px !important;
    font-size: 0.68rem !important;
    height: 22px !important;
    min-height: 22px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 0 6px rgba(255, 87, 34, 0.4) !important;
  }

  .live-monitor-actions {
    order: 3 !important;
    margin-left: 0 !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  #openRecordingsBtn,
  .log-recordings-btn {
    display: inline-flex !important;
    height: 24px !important;
    width: auto !important;
    min-width: 0 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  .cassette-btn-img,
  .player-btn-img {
    height: 24px !important;
    width: auto !important;
    display: block !important;
  }

  #logTranscriptionSummaryBtn,
  .log-tx-summary-btn {
    display: inline-flex !important;
    height: 24px !important;
    width: auto !important;
    min-width: 0 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  .log-tx-summary-img {
    height: 24px !important;
    width: auto !important;
    display: block !important;
  }

  #logHeightToggleBtn,
  .log-height-toggle-btn {
    display: inline-flex !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  .log-filter-bar {
    display: flex !important;
    gap: 2px !important;
    flex-shrink: 0 !important;
  }

  .log-filter-btn[data-filter="1"],
  .log-filter-btn[data-filter="2"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    min-width: 26px !important;
    height: 24px !important;
    padding: 0 !important;
    font-size: 0.64rem !important;
    font-weight: 800 !important;
    border-radius: 5px !important;
    box-sizing: border-box !important;
  }

  .log-filter-ts-cycle-btn {
    display: inline-flex !important;
    height: 24px !important;
    width: auto !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }

  .log-filter-ts-cycle-img {
    height: 24px !important;
    width: auto !important;
    display: block !important;
  }

  #closeLogBtn {
    display: inline-flex !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }

  .log-hotspot-tabs {
    display: none !important;
  }
}

.live-monitor-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
  padding: 2px 4px 10px 4px;
  gap: 8px;
}

.live-monitor-title {
  order: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 1.05rem;
  color: #fff;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.live-pulse-dot {
  width: 10px;
  height: 10px;
  background: #2ecc71;
  border-radius: 50%;
  box-shadow: 0 0 10px #2ecc71;
  animation: live-pulse 1.4s infinite;
  flex-shrink: 0;
  position: relative;
}

.live-pulse-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(46, 204, 113, 0.7);
  animation: live-pulse-ring 1.4s infinite;
  will-change: transform, opacity;
}

@keyframes live-pulse {
  0% { transform: scale(0.95); }
  70% { transform: scale(1.15); }
  100% { transform: scale(0.95); }
}

@keyframes live-pulse-ring {
  0% { transform: scale(1); opacity: 0.7; }
  70% { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}

.live-title-text {
  color: #f0f6fc;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
}

.log-count-badge {
  background: #ff5722;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 6px rgba(255, 87, 34, 0.4);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0 6px;
  border-radius: 4px;
  margin-left: 0;
  vertical-align: middle;
  line-height: 1;
  letter-spacing: 0.5px;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  min-height: 22px;
  box-sizing: border-box;
  transition: all 0.15s ease;
}

.live-monitor-actions {
  order: 2;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.live-monitor-actions > button,
.live-monitor-actions > .log-recordings-btn,
.live-monitor-actions > .log-filter-ts-cycle-btn,
.live-monitor-actions > .log-tx-summary-btn,
.live-monitor-actions > .log-height-toggle-btn,
.live-monitor-actions > #closeLogBtn {
  margin: 0 !important;
  vertical-align: middle;
}

/* 1. Cassette Player Toggle Button (Exact 1:1 image representation from cassete.png) */
.log-recordings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  height: 30px;
  width: auto;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s ease, filter 0.15s ease;
  box-sizing: border-box;
  line-height: 1;
}

.log-recordings-btn:hover {
  filter: brightness(1.15);
  transform: scale(1.04);
}

.log-recordings-btn:active {
  transform: scale(0.96);
}

.log-recordings-btn.active {
  filter: none !important;
}

.cassette-btn-img,
.player-btn-img {
  height: 30px;
  width: auto;
  display: block;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}

/* 2. Transcription Summary Toggle Button (TXT_Off / TXT_On) */
.log-tx-summary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 30px;
  width: auto;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s ease, filter 0.15s ease;
  box-sizing: border-box;
  line-height: 1;
}

.log-tx-summary-btn:hover {
  filter: brightness(1.18);
  transform: scale(1.05);
}

.log-tx-summary-btn:active {
  transform: scale(0.95);
}

.log-tx-summary-img {
  height: 30px;
  width: auto;
  display: block;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  user-select: none;
  -webkit-user-drag: none;
}

/* 3. Screen Mode Toggle Button */
.log-height-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #161b22;
  border: 1px solid #30363d;
  color: var(--text-muted);
  border-radius: 6px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  flex-shrink: 0;
  box-sizing: border-box;
}

.log-height-toggle-btn:hover {
  border-color: #58a6ff;
  color: #fff;
  background: #21262d;
}

/* 4 & 5. Filter TS1 & TS2 Buttons */
.log-filter-bar {
  display: contents;
}

@supports not (display: contents) {
  .log-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: none;
  }
}

.log-filter-btn {
  background: #161b22;
  border: 1px solid #30363d;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  width: 34px;
  min-width: 34px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-sizing: border-box;
  flex-shrink: 0;
}

.log-filter-btn:hover {
  border-color: #58a6ff;
  color: #fff;
}

.log-filter-btn.active {
  background: #ff5722 !important;
  border-color: #ff5722 !important;
  color: #fff !important;
}

/* TS Cycle Button (Bu1+2, Bu1, Bu2) */
.log-filter-ts-cycle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  height: 30px;
  width: auto;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s ease, filter 0.15s ease;
  box-sizing: border-box;
  line-height: 1;
}

.log-filter-ts-cycle-btn:hover {
  filter: brightness(1.18);
  transform: scale(1.05);
}

.log-filter-ts-cycle-btn:active {
  transform: scale(0.95);
}

.log-filter-ts-cycle-img {
  height: 30px;
  width: auto;
  display: block;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  user-select: none;
  -webkit-user-drag: none;
}

/* 6. Close Button */
#closeLogBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #161b22;
  border: 1px solid #30363d;
  color: var(--text-muted);
  border-radius: 6px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
  box-sizing: border-box;
}

#closeLogBtn:hover {
  border-color: #58a6ff;
  color: #fff;
  background: #21262d;
}

.log-height-toggle-btn.is-screen-mode .icon-to-screen {
  display: none !important;
}

.log-height-toggle-btn.is-screen-mode .icon-to-hotspot {
  display: block !important;
}

.log-height-toggle-btn.is-hotspot-mode {
  border-color: rgba(0, 229, 255, 0.5);
  color: #00e5ff;
  background: rgba(0, 229, 255, 0.08);
}

.log-height-toggle-btn.is-hotspot-mode .icon-to-hotspot {
  display: none !important;
}

.log-height-toggle-btn.is-hotspot-mode .icon-to-screen {
  display: block !important;
}

@media (max-width: 768px) {
  .log-height-toggle-btn {
    display: inline-flex !important;
  }
}

.log-hotspot-tabs {
  display: none !important;
}

.log-hs-tab-btn {
  background: #161b22;
  border: 1px solid #30363d;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.log-hs-tab-btn:hover {
  border-color: var(--color-cyan);
  color: #fff;
}

.log-hs-tab-btn.active {
  background: rgba(0, 229, 255, 0.15);
  border-color: var(--color-cyan);
  color: var(--color-cyan);
  box-shadow: 0 0 6px rgba(0, 229, 255, 0.2);
}

.log-hs-badge {
  font-size: 0.65rem;
  font-weight: 700;
  background: rgba(0, 229, 255, 0.12);
  color: var(--color-cyan);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 5px;
  display: inline-block;
  vertical-align: middle;
}

.live-search-bar {
  order: 3;
  width: 100%;
  flex: 1 0 100%;
  margin-top: 2px;
}

.log-search-input {
  width: 100%;
  background: var(--bg-monitor-table, #141c18);
  border: 1px solid var(--border-monitor, #2b3a32);
  border-radius: 8px;
  color: #e6edf3;
  font-size: 0.8rem;
  padding: 8px 12px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

.log-search-input:focus {
  border-color: #2ecc71;
  background: var(--bg-monitor-row-hover, #19241e);
}

body.is-apk-mode .live-monitor-header {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  padding: 0 0 6px 0 !important;
  gap: 4px !important;
}

body.is-apk-mode .live-monitor-title {
  display: flex !important;
  order: 2 !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  flex-shrink: 0 !important;
}

body.is-apk-mode .live-monitor-title .live-pulse-dot,
body.is-apk-mode .live-monitor-title .live-title-text {
  display: none !important;
}

body.is-apk-mode .live-search-bar {
  order: 1 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
}

body.is-apk-mode .log-search-input {
  height: 28px !important;
  padding: 4px 8px !important;
  font-size: 0.74rem !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
}

body.is-apk-mode #logCountBadge,
body.is-apk-mode .log-count-badge {
  order: 2 !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 6px !important;
  font-size: 0.68rem !important;
  height: 22px !important;
  min-height: 22px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 0 6px rgba(255, 87, 34, 0.4) !important;
}

body.is-apk-mode .live-monitor-actions {
  order: 3 !important;
  margin-left: 0 !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
}

body.is-apk-mode #openRecordingsBtn,
body.is-apk-mode .log-recordings-btn {
  display: inline-flex !important;
  height: 26px !important;
  width: auto !important;
  min-width: 0 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

body.is-apk-mode .cassette-btn-img,
body.is-apk-mode .player-btn-img {
  height: 26px !important;
  width: auto !important;
  display: block !important;
}

body.is-apk-mode #logTranscriptionSummaryBtn,
body.is-apk-mode .log-tx-summary-btn {
  display: inline-flex !important;
  height: 26px !important;
  width: auto !important;
  min-width: 0 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

body.is-apk-mode .log-tx-summary-img {
  height: 26px !important;
  width: auto !important;
  display: block !important;
}

body.is-apk-mode #logHeightToggleBtn,
body.is-apk-mode .log-height-toggle-btn {
  display: inline-flex !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

body.is-apk-mode .log-filter-bar {
  display: flex !important;
  gap: 3px !important;
  flex-shrink: 0 !important;
}

body.is-apk-mode .log-filter-btn[data-filter="1"],
body.is-apk-mode .log-filter-btn[data-filter="2"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 28px !important;
  padding: 0 !important;
  font-size: 0.70rem !important;
  font-weight: 800 !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
}

body.is-apk-mode .log-filter-ts-cycle-btn {
  display: inline-flex !important;
  height: 26px !important;
  width: auto !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

body.is-apk-mode .log-filter-ts-cycle-img {
  height: 26px !important;
  width: auto !important;
  display: block !important;
}

body.is-apk-mode #closeLogBtn {
  display: inline-flex !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

body.is-apk-mode .log-hotspot-tabs {
  display: none !important;
}

.live-table-scroll-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--border-monitor, #2b3a32);
  border-radius: 8px;
  background: var(--bg-monitor-table, #0f1512);
  box-sizing: border-box;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.live-table-scroll-wrap::-webkit-scrollbar {
  height: 6px;
}
.live-table-scroll-wrap::-webkit-scrollbar-track {
  background: var(--bg-monitor-table, #0f1512);
  border-radius: 3px;
}
.live-table-scroll-wrap::-webkit-scrollbar-thumb {
  background: #30363d;
  border-radius: 3px;
  cursor: grab;
}
.live-table-scroll-wrap::-webkit-scrollbar-thumb:hover,
.live-table-scroll-wrap::-webkit-scrollbar-thumb:active {
  background: #ff5722;
}

.live-table-content {
  min-width: 320px;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  box-sizing: border-box;
}

.live-table-header {
  display: grid;
  grid-template-columns: minmax(120px, 150px) minmax(70px, 1fr) 42px 20px 84px;
  gap: 5px;
  padding: 4px 6px;
  box-sizing: border-box;
  background: var(--bg-monitor-header, #141c17);
  border-bottom: 1px solid var(--border-monitor, #2b3a32);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  min-width: 320px;
}

.live-table-header .col-slot {
  text-align: center;
}

.live-table-header .col-play {
  text-align: center;
}

.live-table-header .col-dur {
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  box-sizing: border-box;
}

.live-activity-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  min-width: 320px;
}

.live-activity-list::-webkit-scrollbar {
  width: 5px;
}
.live-activity-list::-webkit-scrollbar-track {
  background: var(--bg-monitor-table, #0f1512);
}
.live-activity-list::-webkit-scrollbar-thumb {
  background: #30363d;
  border-radius: 2px;
}

.log-empty-msg {
  color: var(--text-muted);
  font-size: 0.8rem;
  text-align: center;
  padding: 40px 10px;
}

/* 24-Hour Transcription Summary View (Replaces Live Activity Table) */
.log-tx-summary-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--border-monitor, #2b3a32);
  border-radius: 8px;
  background: var(--bg-monitor-table, #0f1512);
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  user-select: text;
  -webkit-user-select: text;
  transition: box-shadow 0.2s ease;
}

.log-tx-summary-wrap.is-holding {
  box-shadow: inset 0 0 0 2px #ff5722, 0 0 15px rgba(255, 87, 34, 0.35);
  animation: pulse-holding 0.6s ease infinite alternate;
}

@keyframes pulse-holding {
  0% { transform: scale(1); }
  100% { transform: scale(0.995); }
}

.log-tx-summary-topbar {
  display: flex;
  align-items: center;
  padding: 3px 6px;
  background: var(--bg-monitor-header, #141c17);
  border-bottom: 1px solid var(--border-monitor, #2b3a32);
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
}

.log-tx-summary-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
  flex-wrap: nowrap;
}

.log-tx-summary-count {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted, #8b949e);
  margin: 0;
  white-space: nowrap;
  user-select: none;
  flex-shrink: 0;
  line-height: 1.2;
}

.log-tx-summary-time-badge {
  font-size: 0.64rem;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
  margin-left: auto;
  height: 20px;
  box-sizing: border-box;
}

.log-tx-summary-time-badge.is-loc {
  background: rgba(46, 204, 113, 0.15);
  color: #2ecc71;
  border: 1px solid rgba(46, 204, 113, 0.5);
}

.log-tx-summary-time-badge.is-utc {
  background: rgba(0, 229, 255, 0.15);
  color: #00e5ff;
  border: 1px solid rgba(0, 229, 255, 0.5);
}

.log-tx-summary-time-badge:hover {
  filter: brightness(1.2);
  transform: scale(1.05);
}

.btn-tts-tx-summary {
  background: #161b22;
  border: 1px solid #238636;
  color: #3fb950;
  font-size: 0.69rem;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  height: 22px;
  line-height: 1.1;
  box-sizing: border-box;
  white-space: nowrap;
}

.btn-tts-tx-summary:hover {
  background: #238636;
  color: #ffffff;
  border-color: #2ea043;
}

.btn-tts-tx-summary:active,
.btn-tts-tx-summary.vfo-tts-pressing {
  transform: scale(0.94) !important;
  box-shadow: 0 0 10px rgba(46, 160, 67, 0.8), inset 0 0 4px rgba(46, 160, 67, 0.5) !important;
  border-color: #2ea043 !important;
}

.btn-tts-tx-summary.is-reading {
  background: #b62324;
  border-color: #da3633;
  color: #ffffff;
  box-shadow: 0 0 8px rgba(218, 54, 51, 0.4);
}

.btn-tts-tx-summary.is-reading:hover {
  background: #da3633;
}

.log-tx-summary-controls .log-sort-header-btn,
.log-tx-summary-controls #btnSortTxSummary {
  height: 20px !important;
  min-height: 20px !important;
  width: 24px !important;
  min-width: 24px !important;
}

.btn-copy-tx-summary {
  background: #161b22;
  border: 1px solid #30363d;
  color: #ffffff;
  font-size: 0.69rem;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  user-select: none;
  flex-shrink: 0;
  height: 22px;
  line-height: 1.1;
  box-sizing: border-box;
  white-space: nowrap;
}

.btn-copy-tx-summary:hover {
  border-color: #58a6ff;
  color: #58a6ff;
  background: #21262d;
}

.btn-close-tx-summary {
  background: transparent;
  border: 1px solid #30363d;
  color: var(--text-muted, #8b949e);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  box-sizing: border-box;
  line-height: 1;
}

.btn-close-tx-summary:hover {
  border-color: #f85149;
  color: #f85149;
  background: rgba(248, 81, 73, 0.1);
}

@media (max-width: 480px) {
  .log-tx-summary-topbar {
    padding: 2px 4px;
  }
  .log-tx-summary-controls {
    gap: 3px;
  }
  .btn-tts-tx-summary,
  .btn-copy-tx-summary {
    font-size: 0.65rem;
    padding: 2px 4px;
    height: 20px;
  }
  .log-tx-summary-controls .log-sort-header-btn,
  .log-tx-summary-controls #btnSortTxSummary {
    height: 18px !important;
    min-height: 18px !important;
    width: 20px !important;
    min-width: 20px !important;
  }
  .log-tx-summary-count {
    font-size: 0.63rem;
  }
  .log-tx-summary-time-badge {
    font-size: 0.60rem;
    padding: 1px 3px;
    height: 18px;
  }
  .btn-close-tx-summary {
    font-size: 0.70rem;
    padding: 1px 4px;
    min-width: 18px;
    height: 18px;
  }
}

@media (max-width: 360px) {
  .log-tx-summary-topbar {
    padding: 2px 3px;
  }
  .log-tx-summary-controls {
    gap: 2px;
  }
  .btn-tts-tx-summary,
  .btn-copy-tx-summary {
    font-size: 0.62rem;
    padding: 1px 3px;
    height: 19px;
  }
  .log-tx-summary-count {
    font-size: 0.60rem;
  }
}

.log-tx-summary-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 7px;
  outline: none;
}

.log-tx-summary-body::-webkit-scrollbar {
  width: 6px;
}
.log-tx-summary-body::-webkit-scrollbar-track {
  background: #0d1015;
}
.log-tx-summary-body::-webkit-scrollbar-thumb {
  background: #30363d;
  border-radius: 3px;
}
.log-tx-summary-body::-webkit-scrollbar-thumb:hover {
  background: #ff5722;
}

.tx-summary-item {
  background: #101319;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-left: 3px solid #58a6ff;
  border-radius: 5px;
  padding: 5px 8px;
  box-sizing: border-box;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.tx-summary-item:hover {
  background: #161b24;
}

.tx-summary-item.is-selected {
  border: 1px solid rgba(245, 158, 11, 0.5) !important;
  border-left: 4px solid #f59e0b !important;
  background: rgba(245, 158, 11, 0.25) !important;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.35), inset 0 0 8px rgba(245, 158, 11, 0.15) !important;
}

.tx-summary-item.is-selected .tx-summary-text {
  color: #ffffff !important;
  font-weight: 500;
}

@keyframes tx-reading-pulse-dark {
  0%, 100% {
    background-color: rgba(0, 229, 255, 0.20);
    border-color: rgba(0, 229, 255, 0.45);
    border-left-color: #00bcd4;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.28), inset 0 0 6px rgba(0, 229, 255, 0.12);
  }
  50% {
    background-color: rgba(0, 229, 255, 0.38);
    border-color: rgba(0, 229, 255, 0.85);
    border-left-color: #38f4ff;
    box-shadow: 0 0 24px rgba(0, 229, 255, 0.65), inset 0 0 14px rgba(0, 229, 255, 0.28);
  }
}

.tx-summary-item.is-reading {
  border: 1px solid rgba(0, 229, 255, 0.55);
  border-left: 4px solid #00e5ff;
  background-color: rgba(0, 229, 255, 0.25);
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.4), inset 0 0 10px rgba(0, 229, 255, 0.18);
  transition: none !important;
  animation: tx-reading-pulse-dark 1.5s infinite ease-in-out !important;
}

.tx-summary-item.is-reading:hover {
  animation: tx-reading-pulse-dark 1.5s infinite ease-in-out !important;
}

.tx-summary-item.is-reading .tx-summary-text {
  color: #ffffff !important;
  font-weight: 500;
}

.tx-summary-item.is-reading .tx-summary-time::before {
  content: "🔊 ";
  color: #00e5ff;
}

.tx-summary-item-header {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 3px;
  flex-wrap: wrap;
}

.tx-summary-time {
  font-family: monospace;
  color: #58a6ff;
  font-weight: 600;
  font-size: 0.72rem;
  cursor: pointer;
  padding: 0 3px;
  border-radius: 3px;
  transition: all 0.15s ease;
  user-select: none;
}

.tx-summary-time:hover {
  color: #79c0ff;
  background: rgba(88, 166, 255, 0.18);
}

.tx-summary-station {
  font-weight: 700;
  color: #e6edf3;
  display: inline-flex;
  align-items: center;
  
}

.tx-summary-tg {
  font-size: 0.68rem;
  color: var(--color-cyan, #00e5ff);
  font-weight: 600;
}

.tx-summary-lang-badge {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 1.5px 6px;
  border-radius: 4px;
  background: #238636 !important;
  color: #ffffff !important;
  border: 1px solid rgba(46, 160, 67, 0.4);
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.tx-summary-text {
  font-size: 0.8rem;
  line-height: 1.4;
  color: #d1d5db;
  word-break: break-word;
}

.log-tx-summary-empty {
  text-align: center;
  padding: 35px 12px;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.log-tx-summary-hint {
  padding: 4px 8px;
  background: var(--bg-monitor-header, #141c17);
  border-top: 1px solid var(--border-monitor, #2b3a32);
  font-size: 0.66rem;
  color: var(--text-muted);
  text-align: center;
  flex-shrink: 0;
  opacity: 0.85;
  user-select: none;
}

/* Call Row (Table item) - 5 Columns, 2 Lines, Compact height */
.live-call-row {
  display: grid;
  grid-template-columns: minmax(120px, 150px) minmax(70px, 1fr) 42px 20px 84px;
  align-items: center;
  gap: 5px;
  padding: 1.5px 6px;
  min-height: 29px;
  font-size: 0.70rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.035);
  background: var(--bg-monitor-table, #0f1512);
  box-sizing: border-box;
  transition: background 0.1s ease;
  min-width: 320px;
}

.live-call-row:nth-child(even) {
  background: var(--bg-monitor-row-even, #131a16);
}

.live-call-row:hover {
  background: var(--bg-monitor-row-hover, #1a251f);
}

.live-call-row.active-call {
  background: rgba(255, 87, 34, 0.12) !important;
  border-left: 3px solid #ff5722;
  padding-left: 0px !important;
}

/* Active playback row in History list - brighter, distinct visibility */
.live-call-row.is-playing-rec:not(.row-blink-highlight) {
  background: rgba(46, 204, 113, 0.24) !important;
  border-left: 4px solid #2ecc71 !important;
  padding-left: 3px !important;
  box-shadow: inset 0 0 0 1px rgba(46, 204, 113, 0.42), 0 0 8px rgba(46, 204, 113, 0.18);
}
.live-call-row.is-playing-rec:not(.row-blink-highlight):hover {
  background: rgba(46, 204, 113, 0.32) !important;
}

/* 1.3 Hz row highlight blink (3 cycles upon player activation without autoplay) */
@keyframes rec-row-blink-dark {
  0%, 100% {
    background-color: rgba(46, 204, 113, 0.24);
    border-left-color: #2ecc71;
    box-shadow: inset 0 0 0 1px rgba(46, 204, 113, 0.42), 0 0 8px rgba(46, 204, 113, 0.18);
  }
  50% {
    background-color: transparent;
    border-left-color: transparent;
    box-shadow: none;
  }
}

.live-call-row.row-blink-highlight {
  border-left-width: 4px !important;
  border-left-style: solid !important;
  padding-left: 3px !important;
  animation: rec-row-blink-dark 0.7692s ease-in-out 3;
}

/* User Outgoing TX Call Rows in Activity Log */
.live-call-row.is-tx-row:not(.is-playing-rec) {
  background: rgba(230, 57, 70, 0.10) !important;
  border-left: 3px solid rgba(230, 57, 70, 0.70) !important;
  padding-left: 0px !important;
}

.live-call-row.is-tx-row:nth-child(even) {
  background: rgba(230, 57, 70, 0.15) !important;
}

.live-call-row.is-tx-row:hover {
  background: rgba(230, 57, 70, 0.24) !important;
}

.live-call-row.is-tx-row.active-call,
.live-call-row.is-tx-row.active-tx-call {
  background: rgba(255, 51, 68, 0.24) !important;
  border-left: 3px solid #ff3344 !important;
  box-shadow: inset 0 0 14px rgba(255, 51, 68, 0.30) !important;
  padding-left: 0px !important;
  animation: tx-row-pulse 1.6s infinite ease-in-out;
}

@keyframes tx-row-pulse {
  0%, 100% {
    background-color: rgba(255, 51, 68, 0.20);
    box-shadow: inset 0 0 10px rgba(255, 51, 68, 0.25);
  }
  50% {
    background-color: rgba(255, 51, 68, 0.34);
    box-shadow: inset 0 0 18px rgba(255, 51, 68, 0.45);
  }
}

.log-tx-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  height: 15px;
  font-size: 0.60rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.5px;
  border-radius: 3px;
  background: #ff3344;
  color: #ffffff;
  box-shadow: 0 0 6px rgba(255, 51, 68, 0.6);
  margin-right: 5px;
  vertical-align: middle;
  flex-shrink: 0;
}

.is-tx-row .station-flag {
  font-size: 0.9rem;
  filter: drop-shadow(0 0 4px rgba(255, 77, 94, 0.8));
}

.is-tx-row .duration-text {
  color: #ff7b88;
  font-weight: 600;
}

.is-tx-row .live-duration-tick {
  color: #ff3344;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(255, 51, 68, 0.6);
}

.is-tx-row .cell-time,
.is-tx-row .cell-time-mobile {
  color: #e0a3aa;
}

.cell-station {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.station-flag {
  font-size: 0.95rem;
  line-height: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.station-flag .flag-badge {
  width: 20px;
  height: 13px;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.station-flag.has-transcription {
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.station-flag.has-transcription:hover {
  filter: drop-shadow(0 0 4px rgba(0, 230, 118, 0.9));
}

/* Green capsule marker for entries with saved transcription text */
.log-text-marker {
  display: inline-block;
  width: 3.5px;
  height: 13px;
  border-radius: 2px;
  background: #00e676;
  box-shadow: 0 0 6px rgba(0, 230, 118, 0.85);
  margin-left: -3px;
  margin-right: 1px;
  flex-shrink: 0;
  cursor: pointer;
  vertical-align: middle;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.log-text-marker:hover {
  background: #00ff88;
  box-shadow: 0 0 9px rgba(0, 255, 136, 1);
  transform: scaleY(1.2);
}

.station-text-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  line-height: 1.15;
}

.station-name-line {
  font-size: 0.72rem;
  font-weight: 600;
  color: #f0f6fc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.15;
}

.station-sub-line {
  font-size: 0.68rem;
  color: var(--text-muted, #8b949e);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.1;
}

.station-sub-line .dmr-id-text {
  font-weight: 600;
}

.station-sub-line .station-country {
  color: var(--text-muted, #8b949e);
  opacity: 0.85;
}

.station-text {
  font-size: 0.73rem;
  font-weight: 600;
  color: #f0f6fc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.station-id-mute {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: normal;
}

[data-theme="dark"] .dmr-id-text,
[data-theme="dark"] .station-text .dmr-id-text,
[data-theme="dark"] .station-sub-line .dmr-id-text,
[data-theme="dark"] .station-text-mobile .dmr-id-text,
[data-theme="dark"] .cell-station .dmr-id-text,
[data-theme="dark"] .vfo-caller-id .dmr-id-text,
[data-theme="dark"] .vfo-row.vfo-rx-active .vfo-caller-id .dmr-id-text,
[data-theme="dark"] .search-result-card .dmr-id-text,
[data-theme="dark"] #callCustomNumber {
  color: #9ff8bf !important;
  font-weight: 600;
}

.cell-tg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  line-height: 1.15;
}

.tg-line-top {
  display: flex;
  align-items: center;
  
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  line-height: 1.15;
}

.tg-line-sub {
  font-size: 0.68rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
}

.tg-line-sub .tg-desc-text {
  font-size: inherit;
  color: inherit;
}

.tg-desc-none {
  color: var(--text-muted);
  opacity: 0.5;
}

.cell-tg .tg-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.cell-tg .tg-flag .flag-badge {
  width: 16px;
  height: 11px;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.cell-tg .tg-flag .flag-badge img.flag-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cell-tg .tg-flag .flag-badge.flag-global svg {
  width: 12px;
  height: 12px;
}

.tg-desc-text {
  color: #94a3b8;
  font-size: 0.69rem;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tg-plain-link {
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
  flex-shrink: 0;
}

.tg-plain-link:hover {
  text-decoration: underline;
  color: #ffffff;
}

.tg-plain-link.is-id {
  color: #9ff8bf !important;
}

.tg-plain-link.is-tg {
  color: #ffffff !important;
}

.cell-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.70rem;
  font-weight: 700;
  white-space: nowrap;
  text-align: center;
}

.slot-text-ts1 {
  color: #00e5ff;
}

.slot-text-ts2 {
  color: #ff9800;
}

.cell-play {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  text-align: center;
}

.cell-duration {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  line-height: 1.15;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.dur-line-top {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffffff !important;
  white-space: nowrap;
  line-height: 1.15;
}

.col-head.col-dur {
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease;
}

.col-head.col-dur:hover {
  color: #ffffff !important;
}

.col-head.col-dur:hover .log-col-dur-mode-badge {
  filter: brightness(1.25);
  box-shadow: 0 0 6px rgba(0, 229, 255, 0.4);
}

.log-col-dur-mode-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0 6px;
  border-radius: 4px;
  margin-left: 0;
  vertical-align: middle;
  line-height: 1;
  letter-spacing: 0.5px;
  user-select: none;
  cursor: pointer;
  transition: all 0.15s ease;
  height: 22px;
  min-height: 22px;
  box-sizing: border-box;
}

.log-col-dur-mode-badge.is-loc {
  background: rgba(46, 160, 67, 0.28);
  color: #3fb950;
  border: 1px solid rgba(46, 160, 67, 0.75);
  box-shadow: 0 0 6px rgba(46, 160, 67, 0.3);
}

.log-col-dur-mode-badge.is-utc {
  background: rgba(0, 229, 255, 0.22);
  color: #00e5ff;
  border: 1px solid rgba(0, 229, 255, 0.75);
  text-shadow: 0 0 4px rgba(0, 229, 255, 0.5);
  box-shadow: 0 0 6px rgba(0, 229, 255, 0.3);
}

.log-col-dur-mode-badge:hover {
  filter: brightness(1.25);
  transform: translateY(-1px);
}

.log-col-dur-mode-badge:active {
  transform: scale(0.96);
}

.dur-line-sub {
  font-size: 0.68rem;
  color: var(--text-muted, #8b949e);
  white-space: nowrap;
  line-height: 1.1;
  opacity: 0.85;
  cursor: pointer;
  transition: all 0.15s ease;
  border-radius: 3px;
  padding: 0 2px;
}

.dur-line-sub:hover {
  color: var(--color-cyan, #00e5ff) !important;
  opacity: 1;
  background: rgba(0, 229, 255, 0.12);
  text-shadow: 0 0 5px rgba(0, 229, 255, 0.5);
}

.is-tx-row .dur-line-sub,
.is-tx-row .station-sub-line {
  color: #e0a3aa;
}

.duration-active {
  color: #ff334b;
  font-weight: 700;
  animation: blink 1s infinite;
}

.duration-text,
.cell-duration .duration-text,
.dur-line-top .duration-text {
  color: #ffffff !important;
}

.cell-time {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.70rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Dual Layout: Table layout preserved across Desktop and Mobile with horizontal scroll */
.live-row-desktop {
  display: contents;
}

.live-row-mobile {
  display: none !important;
}

/* Live Call Log Transcription line */
.live-row-transcription {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 6px 3px 6px;
  margin: 1px 0 2px 0;
  background: rgba(0, 217, 255, 0.04);
  border-left: 2px solid rgba(0, 217, 255, 0.45);
  border-radius: 0 3px 3px 0;
  font-size: 0.70rem;
  line-height: 1.25;
  color: #c9d1d9;
  word-break: break-word;
}

.live-transcribe-badge {
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  height: 13px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 2px;
  background: rgba(0, 217, 255, 0.15);
  color: #00e5ff;
  border: 1px solid rgba(0, 217, 255, 0.35);
  flex-shrink: 0;
  user-select: none;
}

.live-transcribe-text {
  flex: 1;
  font-style: normal;
  color: #e6edf3;
}

.live-transcribe-text call,
.live-transcribe-text .vfo-call-tag {
  color: #58a6ff;
  font-weight: 700;
}

/* Call Log Transcription Hint / Popover */
.log-tx-popover {
  position: fixed;
  z-index: 999999;
  max-width: 360px;
  min-width: 240px;
  background: rgba(18, 22, 29, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 230, 118, 0.45);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 14px rgba(0, 230, 118, 0.22);
  padding: 9px 12px 11px 12px;
  color: #e6edf3;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  box-sizing: border-box;
  user-select: text;
  -webkit-user-select: text;
}

.log-tx-popover.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.log-tx-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.log-tx-popover-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.log-tx-popover-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 5px;
  height: 14px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  border-radius: 3px;
  background: rgba(0, 230, 118, 0.16);
  color: #00e676;
  border: 1px solid rgba(0, 230, 118, 0.45);
  flex-shrink: 0;
}

.log-tx-popover-station {
  font-size: 0.76rem;
  font-weight: 700;
  color: #f0f6fc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-tx-popover-tg {
  font-size: 0.68rem;
  font-weight: 600;
  color: #8b949e;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  margin-left: auto;
  flex-shrink: 0;
}

.log-tx-popover-close {
  background: transparent;
  border: none;
  color: #8b949e;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.12s ease, background-color 0.12s ease;
  flex-shrink: 0;
  margin-left: 4px;
}

.log-tx-popover-close:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

.log-tx-popover-body {
  font-size: 0.78rem;
  line-height: 1.42;
  color: #d8e2ec;
  max-height: 220px;
  overflow-y: auto;
  word-break: break-word;
  scrollbar-width: thin;
}

.log-tx-popover-body call,
.log-tx-popover-body .vfo-call-tag {
  color: #ffd166;
  font-weight: 700;
  background: rgba(255, 209, 102, 0.14);
  padding: 0 3px;
  border-radius: 2px;
}

@media (max-width: 768px) {
  .live-table-scroll-wrap {
    overflow-x: hidden !important;
  }

  .live-table-content,
  .live-activity-list {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .live-table-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.72fr) 30px 18px 76px !important;
    gap: 3px !important;
    padding: 3px 2px !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .live-call-row {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.72fr) 30px 18px 76px !important;
    gap: 3px !important;
    padding: 1.5px 2px !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .live-table-header .col-slot,
  .live-call-row .cell-slot {
    font-size: 0.64rem !important;
    text-align: center !important;
    padding: 0 !important;
  }

  .live-table-header .col-dur {
    font-size: 0.56rem !important;
    line-height: 1.05 !important;
    text-align: right !important;
    white-space: normal !important;
    word-break: break-word !important;
    padding-right: 1px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 3px !important;
  }

  .live-call-row .cell-duration {
    font-size: 0.62rem !important;
    line-height: 1.12 !important;
    text-align: right !important;
    min-width: 76px !important;
    width: 76px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding-right: 1px !important;
  }

  .live-call-row .dur-line-top {
    font-size: 0.62rem !important;
    white-space: nowrap !important;
    justify-content: flex-end !important;
  }

  .live-call-row .dur-line-sub {
    font-size: 0.58rem !important;
    white-space: nowrap !important;
  }

  .live-call-row .log-play-btn {
    font-size: 13px !important;
    width: 16px !important;
    height: 16px !important;
  }

  .log-hotspot-tabs {
    display: none !important;
  }

  .live-row-desktop {
    display: contents !important;
  }

  .live-row-mobile {
    display: none !important;
  }

  /* Audio Player Panel on Mobile */
  .live-player-panel {
    margin: 2px 0 6px 0 !important;
    padding: 4px 6px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .live-player-top {
    gap: 4px !important;
  }
  .live-player-callsign {
    font-size: 0.95rem !important;
  }
  .live-player-name {
    max-width: 90px !important;
    font-size: 0.72rem !important;
  }
  .rec-tg-badge, .rec-slot-badge, .rec-time-badge {
    font-size: 0.68rem !important;
    padding: 1px 4px !important;
  }
  .live-player-controls-row {
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  .rec-tools-group {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin-right: 0 !important;
  }
  .rec-player-col {
    flex: 0 0 auto !important;
    width: max-content !important;
    margin-left: auto !important;
    gap: 4px !important;
  }
  .rec-transport-group {
    gap: 4px !important;
    width: 100% !important;
  }
  .rec-ctrl-btn svg {
    width: 30px !important;
    height: 30px !important;
  }
  .rec-ctrl-btn.btn-playpause svg {
    width: 36px !important;
    height: 36px !important;
  }
  .rec-tool-btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }
  .rec-tool-btn svg {
    width: 16px !important;
    height: 16px !important;
  }
  .rec-solo-btn, .rec-solo-btn .rec-solo-text {
    font-size: 20px !important;
  }
  .rec-transcribe-btn svg {
    width: 12px !important;
    height: 12px !important;
  }
  .rec-speed-pill {
    padding: 1px 5px !important;
    font-size: 0.68rem !important;
  }
  .rec-quota-text {
    font-size: 0.68rem !important;
  }
}

@media (max-width: 365px) {
  .live-table-header,
  .live-call-row {
    grid-template-columns: minmax(0, 0.98fr) minmax(0, 0.68fr) 28px 15px 68px !important;
    gap: 2px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  .live-call-row .cell-duration {
    min-width: 68px !important;
    width: 68px !important;
    font-size: 0.58rem !important;
  }

  .live-call-row .dur-line-top {
    font-size: 0.58rem !important;
  }

  .live-call-row .dur-line-sub {
    font-size: 0.54rem !important;
  }
}

  .live-row-mobile .station-flag {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }

  .live-row-mobile .station-flag .flag-badge {
    width: 16px;
    height: 11px;
  }

  .station-text-mobile {
    font-size: 0.72rem;
    font-weight: 700;
    color: #f0f6fc;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-tg-pill {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    padding: 1px 5px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1.2;
    transition: all 0.15s ease;
    font-family: inherit;
  }

  .mobile-tg-pill .tg-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
  }

  .mobile-tg-pill .tg-flag .flag-badge {
    width: 14px;
    height: 10px;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
  }

  .mobile-tg-pill .tg-flag .flag-badge img.flag-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .mobile-tg-pill .tg-flag .flag-badge.flag-global svg {
    width: 10px;
    height: 10px;
  }

  .mobile-tg-pill.is-id {
    color: #9ff8bf !important;
    background: rgba(159, 248, 191, 0.12) !important;
    border-color: rgba(159, 248, 191, 0.4) !important;
  }

  .mobile-tg-pill.is-tg {
    color: #ffffff !important;
  }

  .mobile-tg-pill:hover, .mobile-tg-pill:active {
    background: rgba(255, 255, 255, 0.25);
    border-color: #ffffff;
    transform: scale(0.98);
  }

  .mobile-tg-pill.is-id:hover, .mobile-tg-pill.is-id:active {
    background: rgba(159, 248, 191, 0.25) !important;
    border-color: #9ff8bf !important;
  }

  .mobile-duration {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.68rem;
    color: #c9d1d9;
    flex-shrink: 0;
    text-align: right;
    min-width: 36px;
    white-space: nowrap;
  }

  .cell-time-mobile {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.68rem;
    color: var(--text-muted, #8b949e);
    flex-shrink: 0;
    text-align: right;
    white-space: nowrap;
  }

/* ==========================================================================
   BrandMeister TalkGroups Actions & Dedicated Static TG Modal
   ========================================================================== */

.bm-tg-actions-row {
  display: flex;
  align-items: center;
  gap: 3px;
  width: 100%;
  margin: 0;
  flex: 0 0 auto;
}

.btn-bm-action {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  height: 30px !important;
  padding: 0 4px;
  box-sizing: border-box !important;
  background: #161b22;
  border: 2px solid #30363d;
  border-radius: 8px;
  color: #e6edf3;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  /* 3D Raised button effect */
  box-shadow:
    -1px -1px 3px rgba(255, 255, 255, 0.06),
    2px 2px 5px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}

.btn-bm-action.btn-bm-reset {
  flex: 1;
}

.btn-bm-dynamic-reset .bm-action-label {
  font-size: 0.71rem;
  letter-spacing: 0px;
}

.btn-bm-static-edit .bm-action-label {
  font-size: 0.69rem;
  letter-spacing: -0.15px;
}

.btn-bm-action:hover {
  background: #21262d;
  border-color: #58a6ff;
  color: #58a6ff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(88, 166, 255, 0.15);
}

.btn-bm-action:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.btn-bm-action.btn-bm-reset:hover {
  border-color: #f85149;
  color: #ff7b72;
  box-shadow: 0 4px 10px rgba(248, 81, 73, 0.15);
}

.bm-action-icon {
  font-size: 0.95rem;
  line-height: 1;
}

.bm-action-label {
  white-space: nowrap;
}

.hidden {
  display: none !important;
}

/* Dedicated Static TG Modal Dialog - Full Height */
#bmTgStaticModal {
  padding: 10px;
  box-sizing: border-box;
}

.bm-tg-modal-content {
  max-width: 860px;
  width: 100%;
  height: calc(100vh - 20px);
  height: calc(100dvh - 20px);
  max-height: calc(100dvh - 20px);
  overflow: hidden;
  gap: 10px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.bm-tg-modal-content .modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  flex-shrink: 0 !important;
  margin-bottom: 2px !important;
}

.bm-modal-title-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

#closeBmTgModalBtn {
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

.bm-modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #58a6ff;
  display: flex;
  align-items: center;
  gap: 6px;
}

.bm-modal-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bm-device-badge {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.72rem;
  padding: 2px 7px;
  background: rgba(56, 139, 253, 0.12);
  border: 1px solid rgba(56, 139, 253, 0.3);
  border-radius: 4px;
  color: #79c0ff;
}

.btn-icon-subtle {
  background: transparent;
  border: 1px solid #30363d;
  color: var(--text-muted);
  border-radius: 4px;
  padding: 1px 5px;
  cursor: pointer;
  font-size: 0.75rem;
  transition: all 0.15s ease;
}

.btn-icon-subtle:hover {
  background: #21262d;
  color: #58a6ff;
  border-color: #58a6ff;
}

.bm-modal-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(56, 139, 253, 0.08);
  border: 1px solid rgba(56, 139, 253, 0.25);
  border-radius: 8px;
  color: #79c0ff;
  font-size: 0.78rem;
}

.bm-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(88, 166, 255, 0.3);
  border-top-color: #58a6ff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.bm-modal-alert {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  line-height: 1.4;
}

.bm-modal-alert.alert-error {
  background: rgba(248, 81, 73, 0.15);
  border: 1px solid #f85149;
  color: #ff7b72;
}

.bm-modal-alert.alert-success {
  background: rgba(46, 160, 67, 0.15);
  border: 1px solid #2ea043;
  color: #3fb950;
}

/* Two-Slot Grid (TS1 / TS2) */
.bm-slots-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
}

@media (max-width: 580px) {
  .bm-slots-grid {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
}

.bm-slot-col {
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
}

.bm-slot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 6px;
  border-bottom: 1px solid #21262d;
  flex-shrink: 0;
}

.bm-slot-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bm-slot-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bm-slot-badge.ts1-badge {
  background: linear-gradient(180deg, #00e5ff 0%, #00a8cc 100%) !important;
  border: 1px solid #00e5ff !important;
  color: #04141f !important;
  font-weight: 800 !important;
}

.bm-slot-badge.ts2-badge {
  background: linear-gradient(180deg, #ff9800 0%, #e65100 100%) !important;
  border: 1px solid #ff9800 !important;
  color: #1a0800 !important;
  font-weight: 800 !important;
}

.bm-slot-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: #e6edf3;
}

.bm-slot-count {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.bm-slot-bulk-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.74rem;
  background: #161b22;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #21262d;
  flex-shrink: 0;
}

.bm-checkbox-label {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  user-select: none;
  color: #8b949e;
}

.bm-checkbox-label input[type="checkbox"] {
  accent-color: #58a6ff;
  cursor: pointer;
}

.btn-bulk-del {
  padding: 3px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  background: #da3633;
  color: #ffffff;
  border: 1px solid rgba(248, 81, 73, 0.4);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.btn-bulk-del:hover:not(.disabled) {
  background: #b62324;
}

.btn-bulk-del.disabled {
  opacity: 0.35;
  pointer-events: none;
}

.bm-static-list {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 3px 1px;
}

.bm-empty-msg {
  color: var(--text-muted);
  font-size: 0.75rem;
  text-align: center;
  padding: 24px 8px;
  font-style: italic;
}

.bm-static-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.bm-static-item:hover {
  background: #1c2128;
  border-color: #484f58;
}

.bm-static-item.item-selected {
  border-color: #58a6ff;
  background: rgba(56, 139, 253, 0.1);
}

.bm-static-left {
  display: flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  flex: 1;
}

.bm-static-left input[type="checkbox"] {
  accent-color: #58a6ff;
  cursor: pointer;
  flex-shrink: 0;
}

.bm-tg-num {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.8rem;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  flex-shrink: 0;
}

.bm-tg-name {
  font-size: 0.72rem;
  color: #8b949e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-del-single {
  background: transparent;
  border: none;
  color: #8b949e;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 0.75rem;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.btn-del-single:hover {
  color: #ff7b72;
  background: rgba(248, 81, 73, 0.15);
}

.bm-add-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid #21262d;
}

.bm-add-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #8b949e;
}

.bm-add-manual-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.bm-add-preset-row {
  display: none !important;
}

.bm-tg-input {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  font-size: 0.75rem;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #c9d1d9;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}

.bm-tg-input:focus {
  border-color: #58a6ff;
}

.bm-preset-select {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  font-size: 0.75rem;
  background: #238142 !important;
  border: 1px solid #1c6634 !important;
  border-radius: 6px;
  color: #ffffff !important;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
  color-scheme: dark;
}

.bm-preset-select:hover {
  background: #2a944d !important;
  border-color: #38d672 !important;
}

.bm-preset-select:focus {
  border-color: #4ade80 !important;
}

.btn-bm-add,
.btn-bm-add-preset {
  padding: 5px 10px;
  min-width: 82px;
  font-size: 0.74rem;
  font-weight: 600;
  background: #238636;
  border: 1px solid rgba(46, 160, 67, 0.4);
  border-radius: 6px;
  color: #ffffff;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  text-align: center;
  transition: all 0.15s ease;
}

.btn-bm-add:hover,
.btn-bm-add-preset:hover {
  background: #2ea043;
}

.btn-bm-add-preset {
  background: #1f6feb;
  border-color: rgba(56, 139, 253, 0.4);
}

.btn-bm-add-preset:hover {
  background: #388bfd;
}

.bm-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid #30363d;
  margin-top: 2px;
  flex-shrink: 0;
}

.bm-status-msg {
  font-size: 0.74rem;
  color: var(--text-muted);
}

/* File Import & Export Row & Buttons */
.bm-add-file-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}

.btn-bm-file-btn,
.btn-bm-file-import {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  padding: 5px 8px;
  font-size: 0.73rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
  transition: all 0.15s ease;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}

.btn-bm-file-import {
  color: #7ee787;
  background: rgba(46, 160, 67, 0.08);
  border: 1px dashed rgba(46, 160, 67, 0.45);
}

.btn-bm-file-import:hover {
  background: rgba(46, 160, 67, 0.18);
  border-color: #3fb950;
  color: #a6f3a6;
  box-shadow: 0 2px 8px rgba(46, 160, 67, 0.15);
}

.btn-bm-file-export {
  color: #58a6ff;
  background: rgba(56, 139, 253, 0.08);
  border: 1px dashed rgba(56, 139, 253, 0.45);
}

.btn-bm-file-export:hover {
  background: rgba(56, 139, 253, 0.18);
  border-color: #388bfd;
  color: #a5d6ff;
  box-shadow: 0 2px 8px rgba(56, 139, 253, 0.15);
}

[data-theme="light"] .btn-bm-file-import {
  color: #1a7f37;
  background: rgba(46, 160, 67, 0.08);
  border-color: rgba(46, 160, 67, 0.4);
}

[data-theme="light"] .btn-bm-file-import:hover {
  background: rgba(46, 160, 67, 0.16);
  border-color: #1a7f37;
  color: #116329;
}

[data-theme="light"] .btn-bm-file-export {
  color: #0969da;
  background: rgba(9, 105, 218, 0.08);
  border-color: rgba(9, 105, 218, 0.4);
}

[data-theme="light"] .btn-bm-file-export:hover {
  background: rgba(9, 105, 218, 0.16);
  border-color: #0969da;
  color: #0550ae;
}

/* File Import Confirmation Modal */
.bm-confirm-content {
  max-width: 520px;
  width: 100%;
  gap: 12px;
  padding: 18px 22px;
  border-radius: 14px;
}

.bm-file-stat-summary {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  
  font-size: 0.8rem;
}

.bm-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bm-stat-label {
  color: var(--text-muted);
}

.bm-stat-val {
  font-weight: 600;
  color: #e6edf3;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.bm-stat-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 4px 0;
}

.bm-stat-card {
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 8px 4px;
  text-align: center;
}

.bm-stat-card.card-highlight {
  border-color: #2ea043;
  background: rgba(46, 160, 67, 0.1);
}

.bm-stat-num {
  font-size: 1.15rem;
  font-weight: 700;
  color: #58a6ff;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.card-highlight .bm-stat-num {
  color: #3fb950;
}

.bm-stat-desc {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.bm-confirm-preview-wrap {
  display: flex;
  flex-direction: column;
  
  margin-top: 2px;
}

.bm-preview-title {
  font-size: 0.76rem;
  color: var(--text-muted);
  font-weight: 600;
}

.bm-preview-list {
  max-height: 120px;
  overflow-y: auto;
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 6px;
  padding: 6px;
  display: flex;
  flex-wrap: wrap;
  
}

.bm-preview-badge {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.72rem;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 4px;
  padding: 2px 6px;
  color: #79c0ff;
}

.bm-confirm-prompt {
  font-size: 0.88rem;
  font-weight: 600;
  color: #e6edf3;
  text-align: center;
  padding: 8px 0 2px 0;
}

.bm-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid #21262d;
}

.btn-success {
  background: #238636 !important;
  border-color: #2ea043 !important;
  color: #ffffff !important;
}

.btn-success:hover {
  background: #2ea043 !important;
}

/* Header BM Upload Background Task Indicator */
.header-bm-upload-indicator {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  flex-shrink: 0;
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
  animation: bmUploadPulse 1.6s ease-in-out infinite;
  box-sizing: border-box;
  overflow: hidden;
}

.header-bm-upload-indicator:hover {
  transform: scale(1.08);
  filter: brightness(1.15);
  box-shadow: 0 0 8px rgba(78, 220, 110, 0.6);
}

.header-bm-upload-indicator:active {
  transform: scale(0.94);
}

.header-bm-upload-indicator .bm-upload-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
  pointer-events: none;
  border-radius: 6px;
}

.header-bm-upload-indicator .bm-upload-percent {
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, "Segoe UI", Roboto, monospace;
  font-size: 10px;
  font-weight: 800;
  color: #a9ffad;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  letter-spacing: -0.4px;
}

@keyframes bmUploadPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 3px rgba(46, 160, 67, 0.4);
  }
  50% {
    opacity: 0.72;
    transform: scale(0.96);
    box-shadow: 0 0 9px rgba(60, 225, 100, 0.85);
  }
}

/* Header TTS Voice Upload Background Task Indicator */
.header-tts-upload-indicator {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  flex-shrink: 0;
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
  animation: ttsUploadPulse 1.6s ease-in-out infinite;
  box-sizing: border-box;
  overflow: hidden;
  margin-left: 2px;
}

.header-tts-upload-indicator:hover {
  transform: scale(1.08);
  filter: brightness(1.15);
  box-shadow: 0 0 8px rgba(78, 180, 255, 0.6);
}

.header-tts-upload-indicator:active {
  transform: scale(0.94);
}

.header-tts-upload-indicator .tts-upload-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
  pointer-events: none;
  border-radius: 6px;
}

.header-tts-upload-indicator .tts-upload-percent {
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, "Segoe UI", Roboto, monospace;
  font-size: 10px;
  font-weight: 800;
  color: #a9ffad;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 3px rgba(0, 0, 0, 0.95);
  pointer-events: none;
  letter-spacing: -0.4px;
}

@keyframes ttsUploadPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 3px rgba(78, 180, 255, 0.4);
  }
  50% {
    opacity: 0.72;
    transform: scale(0.96);
    box-shadow: 0 0 9px rgba(88, 200, 255, 0.85);
  }
}

/* BM Background Import Progress Card */
.bm-import-progress-card {
  background: linear-gradient(180deg, #161b22 0%, #0d1117 100%);
  border: 1px solid rgba(88, 166, 255, 0.4);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  animation: fadeIn 0.2s ease-in;
}

.bm-import-progress-card.hidden {
  display: none !important;
}

.bm-import-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.bm-import-progress-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #e6edf3;
}

.bm-import-title-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  animation: bmUploadPulse 1.8s ease-in-out infinite;
}

.bm-import-progress-percent {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.9rem;
  font-weight: 700;
  color: #58a6ff;
}

.bm-import-bar-track {
  width: 100%;
  height: 8px;
  background: #21262d;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

.bm-import-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #1f6feb 0%, #58a6ff 50%, #3fb950 100%);
  border-radius: 4px;
  transition: width 0.25s ease;
}

.bm-import-progress-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.74rem;
  color: #8b949e;
}

.bm-import-meta-item {
  display: inline-flex;
  align-items: center;
}

.bm-import-meta-item.is-error {
  color: #ff7b72;
  font-weight: 600;
}

.bm-import-progress-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 2px;
}

.btn-bm-secondary {
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 5px;
  color: #c9d1d9;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-bm-secondary:hover {
  background: #30363d;
  color: #ffffff;
  border-color: #8b949e;
}

.btn-bm-danger {
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(248, 81, 73, 0.15);
  border: 1px solid rgba(248, 81, 73, 0.4);
  border-radius: 5px;
  color: #ff7b72;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-bm-danger:hover {
  background: #da3633;
  color: #ffffff;
  border-color: #f85149;
}

/* TX Target Buttons (TG TX Use & Call ID) - Requirement 1: EXACT same height (36px) and style as BM TG buttons */
.tx-target-actions-row {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 0;
  width: 100%;
  flex: 0 0 auto;
}

.btn-tx-target {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 60px !important;
  padding: 0 6px;
  box-sizing: border-box;
  background: #161b22;
  border: 2px solid #30363d;
  border-radius: 8px;
  color: #e6edf3;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  /* 3D Raised button effect */
  box-shadow:
    -1px -1px 3px rgba(255, 255, 255, 0.06),
    2px 2px 5px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}

.btn-tx-target .tx-target-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.btn-tx-target .tx-target-label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.btn-tg-use {
  border-color: rgba(56, 189, 248, 0.4);
}

.btn-tg-use:hover {
  border-color: #38bdf8;
  color: #38bdf8;
  background: #21262d;
  box-shadow: 0 4px 10px rgba(56, 189, 248, 0.2);
  transform: translateY(-1px);
}

.btn-tg-use:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.btn-call-id {
  border-color: rgba(234, 179, 8, 0.4);
}

.btn-call-id:hover {
  border-color: #eab308;
  color: #fde047;
  background: #21262d;
  box-shadow: 0 4px 10px rgba(234, 179, 8, 0.2);
  transform: translateY(-1px);
}

.btn-call-id:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.btn-tx-target:active {
  transform: scale(0.98);
}

/* Split 3-Segment Button: TG--Manage--ID */
.btn-srch-tg-id {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 45px !important;
  padding: 0 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 2px !important;
  overflow: hidden;
  background: #161b22;
  border: 2px solid #30363d;
  border-radius: 8px;
  font-family: inherit;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  box-sizing: border-box !important;
  box-shadow:
    -1px -1px 3px rgba(255, 255, 255, 0.06),
    2px 2px 5px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.btn-srch-tg-id:hover {
  border-color: #58a6ff;
  box-shadow: 0 4px 10px rgba(88, 166, 255, 0.15);
}

.btn-srch-tg-id .srch-split-seg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  padding: 0 3px;
  border-radius: 5px;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
  cursor: pointer;
  flex: 1 1 0;
  min-width: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.btn-srch-tg-id .srch-split-seg:active {
  transform: scale(0.94);
}

.btn-srch-tg-id .srch-txt-tg {
  color: #38bdf8 !important; /* Голубой / Cyan для TalkGroup */
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.2px;
  pointer-events: none;
}

.btn-srch-tg-id .srch-seg-sep {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.66rem;
  font-weight: 700;
  user-select: none;
  pointer-events: none;
  flex: 0 0 auto;
  line-height: 1;
}

.btn-srch-tg-id .srch-txt-manage {
  color: #4ade80 !important; /* Зеленый / Green для Управления TG BM */
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1px;
  pointer-events: none;
}

.btn-srch-tg-id .srch-txt-id {
  color: #facc15 !important; /* Желтый / Yellow для Call ID */
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.2px;
  pointer-events: none;
}

.btn-srch-tg-id .srch-seg-tg:hover {
  background: rgba(56, 189, 248, 0.18);
}
.btn-srch-tg-id .srch-seg-tg:hover .srch-txt-tg {
  color: #7dd3fc !important;
}

.btn-srch-tg-id .srch-seg-manage:hover {
  background: rgba(74, 222, 128, 0.18);
}
.btn-srch-tg-id .srch-seg-manage:hover .srch-txt-manage {
  color: #86efac !important;
}

.btn-srch-tg-id .srch-seg-id:hover {
  background: rgba(250, 204, 21, 0.18);
}
.btn-srch-tg-id .srch-seg-id:hover .srch-txt-id {
  color: #fef08a !important;
}

/* PTT Side Top Row: Settings (square gear) + Contacts */
.ptt-side-top-row {
  display: flex !important;
  align-items: stretch !important;
  gap: 5px !important;
  width: 100% !important;
  height: 45px !important;
  min-width: 0 !important;
}

.ptt-side-top-row .btn-settings {
  flex: 0 0 45px !important;
  width: 45px !important;
  max-width: 45px !important;
  min-width: 42px !important;
  height: 45px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-color: #3884e8 !important;
  position: relative !important;
  border-radius: 8px !important;
  background: #4b99fd !important;
  border: 2px solid #3884e8 !important;
  color: #ffffff;
  cursor: pointer;
  box-sizing: border-box !important;
  transition: all 0.15s ease;
  user-select: none;
  box-shadow:
    -1px -1px 3px rgba(255, 255, 255, 0.15),
    2px 2px 5px rgba(0, 0, 0, 0.35),
    0 2px 8px rgba(75, 153, 253, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.ptt-side-top-row .btn-settings:hover {
  border-color: #70b5ff !important;
  background: #5ea6fd !important;
  box-shadow: 0 4px 12px rgba(75, 153, 253, 0.45) !important;
  transform: translateY(-1px);
}

.ptt-side-top-row .btn-settings:active {
  background: #3b8bfd !important;
  transform: translateY(1px);
}

.ptt-side-top-row .btn-settings .settings-icon {
  width: 22px;
  height: 22px;
  stroke: #ffffff;
  transition: stroke 0.15s ease, transform 0.25s ease;
  pointer-events: none;
}

.ptt-side-top-row .btn-settings:hover .settings-icon {
  stroke: #ffffff;
  transform: rotate(45deg);
}

.ptt-side-top-row .btn-settings.has-update-badge::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  background: #ff9800;
  border-radius: 50%;
  box-shadow: 0 0 6px #ff9800;
  animation: pulseBadge 1.8s infinite ease-in-out;
}

.ptt-side-top-row .btn-my-contacts {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 45px !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
}

.ptt-side-top-row .btn-my-contacts .ptt-side-label {
  font-size: 0.78rem;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

/* Settings Button in Quick Actions */
.btn-tx-target.btn-settings {
  border-color: rgba(139, 148, 158, 0.4);
}
.btn-tx-target.btn-settings:hover {
  border-color: #58a6ff;
  color: #58a6ff;
  background: #21262d;
  box-shadow: 0 4px 10px rgba(88, 166, 255, 0.18);
  transform: translateY(-1px);
}

/* Log Button in PTT Side Right */
.btn-ptt-side-half.btn-log-drawer {
  border-color: rgba(139, 148, 158, 0.4);
}
.btn-ptt-side-half.btn-log-drawer:hover {
  border-color: #a5d6ff;
  color: #a5d6ff;
  background: #21262d;
  box-shadow: 0 4px 10px rgba(165, 214, 255, 0.18);
  transform: translateY(-1px);
}
.btn-ptt-side-half.btn-log-drawer.active {
  border-color: #3fb950 !important;
  color: #3fb950 !important;
  background: rgba(63, 185, 80, 0.15) !important;
}
.btn-ptt-side-half.btn-log-drawer.active:hover {
  border-color: #3fb950 !important;
  color: #3fb950 !important;
}

/* Backward compatibility for quick log */
.btn-log-quick {
  border-color: rgba(139, 148, 158, 0.4);
}
.btn-log-quick:hover {
  border-color: #a5d6ff;
  color: #a5d6ff;
  background: #21262d;
  box-shadow: 0 4px 10px rgba(165, 214, 255, 0.18);
  transform: translateY(-1px);
}
.btn-log-quick.active {
  border-color: #3fb950 !important;
  color: #3fb950 !important;
  background: rgba(63, 185, 80, 0.12) !important;
}

/* My Contacts Button in PTT Side Right */
.btn-my-contacts {
  border-color: rgba(245, 158, 11, 0.4) !important;
}
.btn-my-contacts:hover {
  border-color: #f59e0b !important;
  color: #fbbf24 !important;
  box-shadow: 0 3px 8px rgba(245, 158, 11, 0.2) !important;
}

/* BM TG Management Button in PTT Side Left */
.ptt-side-left .btn-bm-static-edit {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  color: #38bdf8 !important;
  padding: 0 4px !important;
  height: 30px !important;
  box-sizing: border-box !important;
}
.ptt-side-left .btn-bm-static-edit:hover {
  border-color: #38bdf8 !important;
  color: #7dd3fc !important;
  box-shadow: 0 3px 8px rgba(56, 189, 248, 0.2) !important;
}
.ptt-side-left .btn-bm-static-edit .bm-action-label {
  font-size: 0.72rem !important;
  letter-spacing: -0.2px !important;
  white-space: nowrap !important;
  text-align: center !important;
  line-height: 1 !important;
}

/* Search TG / ID Modal Header (Tabs left, Close button top-right) */
.search-modal-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  flex-shrink: 0 !important;
  margin-bottom: 6px !important;
}

.search-modal-header .modal-title-group {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  
}

#closeSearchTgIdModalBtn {
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

/* Search TG / ID Modal Tabs */
.search-modal-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.search-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  background: #21262d;
  border: 1px solid #30363d;
  color: #8b949e;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.search-tab-btn:hover {
  color: #e6edf3;
  border-color: #58a6ff;
}

.search-tab-btn.active {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
  color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
}

.search-tab-btn[data-tab="id"].active {
  background: rgba(251, 191, 36, 0.15);
  border-color: #fbbf24;
  color: #fbbf24;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.25);
}

.search-tab-header-extra {
  display: flex;
  flex-direction: column;
  
}

/* ==========================================================================
   My Contacts (DMR Phonebook) Styles
   ========================================================================== */

/* PC / Desktop styles (min-width: 769px) */
@media (min-width: 769px) {
  #myContactsModal.modal {
    padding: 20px;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
  }

  .contacts-modal-content,
  #myContactsModal .contacts-modal-content {
    max-width: 720px;
    width: 96%;
    min-height: 75vh;
    min-height: 75dvh;
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    height: auto;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
  }
}

/* Mobile & Touch full-screen adaptation (max-width: 768px, or touch devices) */
@media (max-width: 768px), (pointer: coarse) and (max-width: 900px) {
  #myContactsModal.modal,
  #myContactsModal.modal.active {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    background: #0d1117 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    z-index: 1000 !important;
  }

  #myContactsModal .modal-content,
  #myContactsModal .contacts-modal-content,
  #myContactsModal.modal .modal-content,
  #myContactsModal.modal .contacts-modal-content,
  .contacts-modal-content {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    width: 100% !important;
    max-width: 100vw !important;
    max-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    background: #0d1117 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  #myContactsModal .contacts-modal-header {
    border-radius: 0 !important;
    padding: max(10px, env(safe-area-inset-top)) 14px 6px 14px !important;
    border-bottom: 1px solid #21262d !important;
    flex-shrink: 0 !important;
    background: #161b22 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #myContactsModal .contacts-modal-header h3 {
    font-size: 1.15rem !important;
  }

  #myContactsModal .contacts-toolbar-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #myContactsModal .contacts-top-right {
    order: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  #myContactsModal .btn-new-folder,
  #myContactsModal .btn-new-contact {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    justify-content: center !important;
    height: 36px !important;
    padding: 4px 8px !important;
    font-size: 0.92rem !important;
    text-align: center !important;
  }

  #myContactsModal .contacts-search-bar-row {
    order: 2 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 36px !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
  }

  #myContactsModal .contacts-modal-body {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
  }

  #myContactsModal .contacts-tree-container {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  #myContactsModal .contacts-modal-footer {
    border-radius: 0 !important;
    padding: 8px 12px max(10px, env(safe-area-inset-bottom)) 12px !important;
    gap: 6px !important;
    margin-top: auto !important;
    flex-shrink: 0 !important;
    background: #161b22 !important;
    border-top: 1px solid #21262d !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  [data-theme="light"] #myContactsModal.modal,
  [data-theme="light"] #myContactsModal .contacts-modal-content {
    background: #ffffff !important;
  }
  [data-theme="light"] #myContactsModal .contacts-modal-header,
  [data-theme="light"] #myContactsModal .contacts-modal-footer {
    background: #f6f8fa !important;
    border-color: #d0d7de !important;
  }
}

/* APK standalone mode support */
html.is-apk-mode #myContactsModal.modal,
html.is-apk-mode #myContactsModal .modal-content,
html.is-apk-mode #myContactsModal .contacts-modal-content {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.contacts-modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px 4px 14px !important;
  border-bottom: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#myContactsModal .modal-header h3 {
  font-size: 1.05rem !important;
}

.contacts-toolbar-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 6px !important;
}

.contacts-search-bar-row {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 32px !important;
  box-sizing: border-box !important;
  margin-bottom: 0 !important;
  padding: 0 10px !important;
  display: flex !important;
  align-items: center !important;
}

.contacts-search-bar-row .search-main-input {
  height: 100% !important;
  padding: 0 !important;
  font-size: 0.98rem !important;
}

.contacts-search-bar-row .search-bar-icon {
  font-size: 1.02rem !important;
  margin-right: 6px !important;
}

.contacts-search-bar-row .btn-clear-search {
  padding: 0 4px !important;
  line-height: 1 !important;
  font-size: 0.95rem !important;
}

.contacts-top-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-new-folder {
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  background: #21262d !important;
  color: #c9d1d9 !important;
  border: 1px solid #30363d !important;
  transition: all 0.15s ease !important;
  cursor: pointer;
}

.btn-new-folder:hover {
  background: #30363d !important;
  color: #f0f6fc !important;
  border-color: #8b949e !important;
  transform: translateY(-1px);
}

.btn-new-folder:active {
  transform: translateY(1px);
}

.btn-new-contact {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  padding: 5px 14px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  background: #1f6feb !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 6px rgba(31, 111, 235, 0.35) !important;
  transition: all 0.15s ease !important;
  cursor: pointer;
}

.btn-new-contact:hover {
  background: #388bfd !important;
  box-shadow: 0 0 10px rgba(56, 139, 253, 0.5) !important;
  transform: translateY(-1px);
}

.btn-new-contact:active {
  transform: translateY(1px);
}

.contacts-modal-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 10px 16px !important;
  border-top: 1px solid #30363d !important;
  background: #161b22 !important;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.contacts-footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.contacts-modal-footer #btnCloseMyContactsModalBottom {
  padding: 5px 16px !important;
  height: 32px !important;
  font-size: 0.94rem !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
}

.badge-contacts-count {
  font-size: 0.86rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
}

.btn-contacts-gw-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #e6edf3;
  font-size: 0.90rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-contacts-gw-toggle:hover {
  border-color: #58a6ff;
  color: #58a6ff;
  background: #161b22;
}

.gw-channel-name {
  color: #FF6700 !important;
  font-weight: 700;
}

.btn-contact-action {
  font-size: 0.92rem !important;
  padding: 5px 12px !important;
}

.btn-icon-square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #c9d1d9;
  cursor: pointer;
  font-size: 1.05rem;
  transition: all 0.15s ease;
}

.btn-icon-square:hover {
  background: #30363d;
  color: #fff;
  border-color: #58a6ff;
}

/* Contacts Gateway Dropdown Panel */
.contacts-gateway-panel {
  background: #161b22;
  border-top: 1px solid #30363d;
  border-bottom: 1px solid #30363d;
  padding: 10px 16px;
  animation: slideDownFade 0.2s ease;
}

.gw-panel-header {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
}

.gw-panel-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: #58a6ff;
}

.gw-panel-desc {
  font-size: 0.85rem;
  color: #8b949e;
}

.gw-panel-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gw-ctrl-group {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.94rem;
  color: #c9d1d9;
}

.gw-hotspot-select {
  padding: 5px 9px;
  font-size: 0.92rem;
  background-color: #238142 !important;
  background: #238142 !important;
  border: 1px solid #1c6634 !important;
  color: #ffffff !important;
  border-radius: 5px;
  color-scheme: dark;
}

.slot-toggle-group {
  display: inline-flex;
  border: 1px solid #30363d;
  border-radius: 5px;
  overflow: hidden;
}

.btn-slot-toggle {
  padding: 4px 10px;
  font-size: 0.88rem;
  font-weight: 700;
  background: #21262d;
  color: #8b949e;
  border: none;
  cursor: pointer;
  transition: all 0.12s ease;
}

.btn-slot-toggle.active {
  background: #238636;
  color: #fff;
}

.btn-save-contacts-gw {
  width: auto !important;
  height: 32px !important;
  padding: 4px 18px !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  margin-left: auto !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  cursor: pointer;
  background: #1f6feb !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  transition: all 0.15s ease !important;
}

.btn-save-contacts-gw:hover {
  background: #388bfd !important;
  box-shadow: 0 0 8px rgba(56, 139, 253, 0.4) !important;
  transform: translateY(-1px);
}

.btn-save-contacts-gw:active {
  transform: translateY(1px);
}

/* Contacts Tree View Container */
.contacts-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 14px 10px 14px !important;
}

.contacts-tree-container {
  margin-top: 4px !important;
  display: flex;
  flex-direction: column;
  gap: 3px !important;
}

/* Tree Nodes */
.tree-node-item {
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  transition: background 0.12s ease;
}

.tree-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 6px !important;
  border-radius: 4px;
  user-select: none;
  transition: all 0.12s ease;
}

.tree-row:hover {
  background: rgba(110, 118, 129, 0.12);
}

.tree-row-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.tree-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 0.68rem;
  color: #8b949e;
  cursor: pointer;
  transition: transform 0.18s ease;
}

.tree-node-item.collapsed > .tree-row .tree-chevron {
  transform: rotate(-90deg);
}

.tree-node-item.collapsed > .tree-children-container {
  display: none !important;
}

.tree-folder-icon {
  font-size: 0.95rem;
  line-height: 1;
}

.tree-folder-title {
  font-weight: 600;
  font-size: 0.86rem;
  color: #e6edf3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-folder-badge {
  font-size: 0.68rem;
  color: #8b949e;
  background: #21262d;
  padding: 1px 5px;
  border-radius: 6px;
  line-height: 1.2;
}

.tree-contact-icon {
  font-size: 0.92rem;
  line-height: 1;
}

.tree-contact-main {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.tree-contact-target {
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.2px;
}

.tree-contact-target.target-tg {
  color: #38bdf8;
}

.tree-contact-target.target-person {
  color: #fbbf24;
}

.tree-contact-target.target-repeater {
  color: #34d399;
}

.tree-contact-name {
  font-size: 0.80rem;
  color: #c9d1d9;
}

.tree-contact-city {
  font-size: 0.70rem;
  color: #8b949e;
  background: rgba(110, 118, 129, 0.15);
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.2;
}

.tree-contact-slot-pill {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  background: #1f6feb;
  color: #fff;
  line-height: 1.2;
}

.tree-row-actions {
  display: flex;
  align-items: center;
  gap: 3px;
  opacity: 0.4;
  transition: opacity 0.15s ease;
}

.tree-row:hover .tree-row-actions {
  opacity: 1;
}

.btn-tree-action {
  background: none;
  border: none;
  padding: 2px 4px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.76rem;
  color: #8b949e;
  line-height: 1;
  transition: all 0.12s ease;
}

.btn-tree-action:hover {
  background: #30363d;
  color: #e6edf3;
}

.btn-tree-action.action-call:hover {
  background: rgba(46, 160, 67, 0.25);
  color: #3fb950;
}

.btn-tree-action.action-del:hover {
  background: rgba(248, 81, 73, 0.2);
  color: #ff7b72;
}

.tree-children-container {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 14px;
  border-left: 1px dashed rgba(110, 118, 129, 0.25);
  margin-left: 6px;
  margin-top: 1px;
  margin-bottom: 1px;
}

/* Edit Contact Modal */
.contact-edit-modal-content {
  max-width: 520px;
  width: 95%;
}

.contact-edit-modal-content .modal-header,
.call-proposal-modal-content .modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid #30363d !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.contact-edit-modal-content .modal-header .icon-btn,
.call-proposal-modal-content .modal-header .icon-btn {
  font-size: 1.1rem !important;
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  border: none !important;
  color: #8b949e !important;
  cursor: pointer !important;
  border-radius: 4px !important;
  padding: 0 !important;
  transition: all 0.15s ease !important;
}

.contact-edit-modal-content .modal-header .icon-btn:hover,
.call-proposal-modal-content .modal-header .icon-btn:hover {
  background: #30363d !important;
  color: #f0f6fc !important;
}

.contact-edit-body {
  padding: 14px 16px;
  max-height: 75vh;
  overflow-y: auto;
}

.contact-type-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  gap: 6px;
  margin-top: 5px;
}

.type-opt {
  cursor: pointer;
}

.type-opt input[type="radio"] {
  display: none;
}

.type-opt-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 6px;
  border-radius: 6px;
  background: #21262d;
  border: 1px solid #30363d;
  color: #8b949e;
  font-size: 0.78rem;
  font-weight: 600;
  transition: all 0.12s ease;
  user-select: none;
}

.type-opt input[type="radio"]:checked + .type-opt-box {
  background: rgba(88, 166, 255, 0.18);
  border-color: #58a6ff;
  color: #58a6ff;
  box-shadow: 0 0 8px rgba(88, 166, 255, 0.25);
}

.req-star {
  color: #f85149;
}

/* Call Proposal Modal */
.call-proposal-modal-content {
  max-width: 440px;
  width: 94%;
}

.call-proposal-body {
  padding: 16px;
}

.proposal-card-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  margin-bottom: 14px;
}

.proposal-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.15);
  border: 2px solid #38bdf8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.proposal-hero-details {
  flex: 1;
  min-width: 0;
}

.proposal-hero-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.proposal-hero-meta {
  font-size: 0.82rem;
  color: #38bdf8;
  font-weight: 600;
  margin-top: 2px;
}

.proposal-hero-desc {
  font-size: 0.75rem;
  color: #8b949e;
  margin-top: 2px;
}

.proposal-routing-box {
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 12px;
}

.routing-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #8b949e;
  margin-bottom: 8px;
}

.routing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.routing-field {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #c9d1d9;
}

.routing-select {
  padding: 4px 8px;
  font-size: 0.8rem;
  background-color: #238142 !important;
  background: #238142 !important;
  border: 1px solid #1c6634 !important;
  color: #ffffff !important;
  border-radius: 5px;
  color-scheme: dark;
}

.proposal-slot-buttons {
  display: inline-flex;
  border: 1px solid #30363d;
  border-radius: 5px;
  overflow: hidden;
}

.btn-proposal-slot {
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  background: #21262d;
  color: #8b949e;
  border: none;
  cursor: pointer;
  transition: all 0.12s ease;
}

.btn-proposal-slot.active {
  background: #1f6feb;
  color: #fff;
}

.proposal-modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 16px;
}

.proposal-btn-apply {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.proposal-btn-ptt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #238636 !important;
  border-color: #2ea043 !important;
}

.proposal-btn-ptt:hover {
  background: #2ea043 !important;
}

/* TX Target Modal & Search Styles */
.tx-target-modal {
  max-width: 660px;
  width: 95%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

.modal-title-with-badge {
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-title-with-badge h3 {
  font-size: 0.95rem;
  margin: 0;
  white-space: nowrap;
}

.about-modal-header .modal-title-with-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.badge-active-slot,
#tgModalActiveTs,
#callModalActiveTs {
  display: none !important;
}

#tgFooterHint,
#callFooterHint,
.search-tg-id-modal-content .modal-footer-hint {
  display: none !important;
}

.search-tg-id-modal-content .modal-footer {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

.modal-db-stats-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 3px 0;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.db-stat-pill {
  display: inline-flex;
  align-items: center;
  
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 0.74rem;
  color: #8b949e;
  line-height: 1.35;
  white-space: nowrap;
}

.db-stat-pill strong {
  color: #58a6ff;
  font-weight: 600;
}

.db-stat-sep {
  opacity: 0.45;
  margin: 0 4px;
  user-select: none;
}

.db-stat-icon {
  font-size: 0.8rem;
  opacity: 0.9;
}

.db-stat-delta {
  font-size: 0.72rem;
  font-weight: 600;
  margin-left: 2px;
  display: inline-block;
  vertical-align: baseline;
  letter-spacing: 0.01em;
}

.db-stat-delta.delta-positive {
  color: #3fb950;
}

.db-stat-delta.delta-negative {
  color: #f85149;
}

.db-stat-delta.delta-neutral {
  color: #8b949e;
  opacity: 0.75;
}

.search-bar-row {
  position: relative;
  display: flex;
  align-items: center;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 4px 10px;
  margin-bottom: 8px;
}

.search-bar-row:focus-within {
  border-color: #58a6ff;
  box-shadow: 0 0 8px rgba(88, 166, 255, 0.3);
}

.search-bar-icon {
  font-size: 1rem;
  color: #8b949e;
  margin-right: 8px;
}

.search-main-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #f0f6fc;
  font-size: 0.95rem;
  padding: 8px 0;
  outline: none;
  font-family: inherit;
}

.btn-clear-search {
  background: transparent;
  border: none;
  color: #8b949e;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.btn-clear-search:hover {
  color: #f85149;
}

.quick-chips-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.quick-chips-label {
  font-size: 0.75rem;
  color: #8b949e;
  font-weight: 600;
}

.quick-chip {
  background: #161b22;
  border: 1px solid #30363d;
  color: #c9d1d9;
  border-radius: 14px;
  padding: 3px 10px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.quick-chip:hover {
  background: #21262d;
  border-color: #58a6ff;
  color: #58a6ff;
}

.search-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: #8b949e;
  margin-bottom: 8px;
  padding: 0 2px;
}

.search-results-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
}

.search-result-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.search-result-card:hover {
  background: #21262d;
  border-color: #58a6ff;
  transform: translateX(2px);
}

.search-result-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.card-badge-id {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-weight: 800;
  font-size: 0.88rem;
  padding: 4px 8px;
  border-radius: 6px;
  min-width: 80px;
  text-align: center;
}

.card-badge-tg {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid #38bdf8;
  color: #38bdf8;
}

.card-badge-call {
  background: rgba(234, 179, 8, 0.15);
  border: 1px solid #eab308;
  color: #fde047;
}

[data-theme="light"] .card-badge-call,
.theme-light .card-badge-call,
[data-theme="light"] .card-badge-id.card-badge-call,
.theme-light .card-badge-id.card-badge-call {
  background: #fef3c7 !important;
  border: 1.5px solid #b45309 !important;
  color: #78350f !important;
  font-weight: 800 !important;
}

[data-theme="light"] .card-badge-tg,
.theme-light .card-badge-tg,
[data-theme="light"] .card-badge-id.card-badge-tg,
.theme-light .card-badge-id.card-badge-tg {
  background: #e0f2fe !important;
  border: 1.5px solid #0284c7 !important;
  color: #075985 !important;
  font-weight: 800 !important;
}

.card-info-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.card-primary-title {
  font-size: 0.80rem;
  font-weight: 600;
  color: #f0f6fc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-callsign-highlight {
  color: #facc15 !important;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.card-id-wrapper {
  font-size: 0.74rem;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.card-secondary-details {
  font-size: 0.74rem;
  color: #8b949e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-select-action {
  font-size: 0.8rem;
  font-weight: 600;
  color: #58a6ff;
  display: flex;
  align-items: center;
  
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(88, 166, 255, 0.1);
  border: 1px solid transparent;
}

.search-result-card:hover .card-select-action {
  background: #1f6feb;
  color: #ffffff;
}

.card-actions-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-card-bm-info {
  font-size: 0.78rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-card-bm-info:hover {
  background: #0284c7;
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
  transform: translateY(-1px);
}

.btn-card-bm-info:active {
  transform: translateY(0);
}

.custom-id-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #1f2937;
  border: 1px dashed #38bdf8;
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 8px;
}

.custom-card-icon {
  font-size: 1.3rem;
  color: #38bdf8;
}

.custom-card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.custom-card-title {
  font-size: 0.92rem;
  color: #e6edf3;
}

.custom-card-desc {
  font-size: 0.78rem;
  color: #8b949e;
}

/* Bottom Toggles Row (AGC & Loopback) */
.bottom-toggles-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
  margin-top: 7px;
  gap: 8px;
  user-select: none;
}

.toggle-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.status-row .toggle-control {
  margin: 0;
  padding: 0 2px 0 4px;
  width: 70px;
  box-sizing: border-box;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  cursor: pointer;
}

.toggle-control input[type="checkbox"] {
  cursor: pointer;
  accent-color: #58a6ff;
  transform: scale(1.15);
}

.toggle-control:hover {
  color: var(--text-primary);
}

.toggle-control .toggle-text {
  font-weight: 500;
}

/* Hotspot Switcher Tabs in Live Monitor Drawer */
.log-hotspot-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border-color, #30363d);
  background: rgba(13, 17, 23, 0.4);
  scrollbar-width: thin;
}

.log-hotspot-tabs::-webkit-scrollbar {
  height: 4px;
}
.log-hotspot-tabs::-webkit-scrollbar-thumb {
  background: var(--border-color, #30363d);
  border-radius: 2px;
}

.log-hs-tab-btn {
  background: #21262d;
  color: var(--text-muted, #8b949e);
  border: 1px solid var(--border-color, #30363d);
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  user-select: none;
}

.log-hs-tab-btn:hover {
  color: var(--text-primary, #e6edf3);
  border-color: #58a6ff;
}

.log-hs-tab-btn.active {
  background: #1f6feb;
  color: #ffffff;
  border-color: #58a6ff;
  font-weight: 600;
  box-shadow: 0 0 8px rgba(31, 111, 235, 0.4);
}

/* DSD-FME & Audio DSP Modal Styles */
.dsdfme-modal-content {
  max-width: 540px;
  width: 92%;
  max-height: 90vh;
  overflow-y: auto;
}

.badge-dsdfme-ver {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  font-size: 0.72rem;
  font-family: monospace;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(56, 189, 248, 0.3);
  margin-left: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}

.dsdfme-section {
  background: rgba(22, 27, 34, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px 14px;
}

.dsdfme-section-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #58a6ff;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dsdfme-field {
  margin-bottom: 12px;
}

.dsdfme-field:last-child {
  margin-bottom: 0;
}

.dsdfme-field-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.dsdfme-label {
  font-size: 0.82rem;
  color: var(--text-primary);
  margin: 0;
  cursor: pointer;
}

.dsdfme-val-badge {
  background: #1f6feb;
  color: #ffffff;
  font-family: monospace;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}

.dsdfme-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-primary);
  cursor: pointer;
}

.dsdfme-checkbox-label input[type="checkbox"] {
  margin-top: 3px;
  cursor: pointer;
  accent-color: #58a6ff;
  transform: scale(1.15);
}

.dsdfme-toggle-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(13, 17, 23, 0.6);
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.dsdfme-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #c9d1d9;
  cursor: pointer;
  user-select: none;
}

.dsdfme-toggle-btn input[type="radio"] {
  cursor: pointer;
  accent-color: #58a6ff;
}

/* Equalizer 3-Column Grid */
.eq-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 560px) {
  .eq-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.eq-col {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.eq-col-header,
.audio-field-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  min-width: 0;
}

.eq-band-title,
.audio-label {
  font-size: 0.74rem;
  font-weight: 600;
  color: #e6edf3;
  margin-bottom: 0;
  cursor: default;
}

.eq-val-badge,
.audio-val-badge {
  background: #1f6feb;
  color: #ffffff;
  font-family: monospace;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  min-width: 24px;
  text-align: center;
}

.eq-slider {
  width: 100%;
  cursor: pointer;
}

/* DSD-FME Presets Panel */
.dsdfme-presets-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(13, 17, 23, 0.75);
  border: 1px solid rgba(88, 166, 255, 0.2);
  border-radius: 8px;
  padding: 7px 12px;
  margin-bottom: 14px;
}

.dsdfme-presets-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.dsdfme-presets-title {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-muted, #8b949e);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dsdfme-presets-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.btn-dsdfme-preset {
  background: #21262d;
  color: #c9d1d9;
  border: 1px solid #30363d;
  border-radius: 5px;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  padding: 2px 8px;
  min-width: 32px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.btn-dsdfme-preset:hover {
  background: #30363d;
  color: #fff;
  border-color: #58a6ff;
  transform: translateY(-1px);
}

.btn-dsdfme-preset.active {
  background: #1f6feb;
  color: #ffffff;
  border-color: #58a6ff;
  box-shadow: 0 0 8px rgba(31, 111, 235, 0.45);
}

.btn-preset-save {
  background: rgba(33, 38, 45, 0.9);
  color: #58a6ff;
  border: 1px solid rgba(88, 166, 255, 0.35);
  border-radius: 5px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 10px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  user-select: none;
}

.btn-preset-save:hover {
  background: rgba(88, 166, 255, 0.15);
  border-color: #58a6ff;
  color: #ffffff;
  transform: translateY(-1px);
}

.btn-preset-save.saved-flash {
  background: rgba(46, 160, 67, 0.25) !important;
  border-color: #3fb950 !important;
  color: #3fb950 !important;
}

/* DSD-FME Modal Footer & Symmetrical Action Buttons */
.dsdfme-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.dsdfme-modal-footer .btn-dsdfme-footer {
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 8px;
  box-sizing: border-box;
  white-space: nowrap;
  line-height: 1;
  margin: 0;
}

#btnResetDsdfmeDefaults.btn-dsdfme-footer {
  flex: 0 0 auto;
  padding: 0 18px;
  background: #21262d;
  border: 1px solid #30363d;
  color: #c9d1d9;
  transition: all 0.15s ease;
}

#btnResetDsdfmeDefaults.btn-dsdfme-footer:hover {
  background: #30363d;
  border-color: #8b949e;
  color: #ffffff;
}

#btnCloseDsdfmeBottom.btn-dsdfme-footer {
  flex: 1 1 auto;
  padding: 0 20px;
  background: #1f6feb;
  color: #ffffff;
  border: 1px solid rgba(88, 166, 255, 0.4);
  font-weight: 700;
  width: auto;
  transition: all 0.15s ease;
}

#btnCloseDsdfmeBottom.btn-dsdfme-footer:hover {
  background: #388bfd;
}

/* ==========================================================================
   About ProxDMR & Open Source Credits Modal
   ========================================================================== */
.about-modal-content {
  max-width: 580px;
  width: 95%;
  max-height: 88vh;
  background: var(--bg-card, #161b22);
  border: 1px solid rgba(0, 229, 255, 0.35);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 24px rgba(0, 229, 255, 0.15);
  overflow: hidden;
}

.about-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 6px;
}

.about-app-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  margin-right: 2px;
}

.about-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.about-timer-pill {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffaa00;
  background: rgba(255, 170, 0, 0.12);
  border: 1px solid rgba(255, 170, 0, 0.35);
  padding: 3px 9px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  
  user-select: none;
  box-shadow: 0 0 8px rgba(255, 170, 0, 0.2);
}

.about-timer-icon {
  font-size: 0.82rem;
  line-height: 1;
}

.about-modal-body {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 4px;
}

/* Custom sleek scrollbar for about body */
.about-modal-body::-webkit-scrollbar {
  width: 6px;
}
.about-modal-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
.about-modal-body::-webkit-scrollbar-thumb {
  background: #30363d;
  border-radius: 3px;
}
.about-modal-body::-webkit-scrollbar-thumb:hover {
  background: #58a6ff;
}

/* Author Profile Card */
.about-author-card {
  background: linear-gradient(135deg, rgba(22, 27, 34, 0.95) 0%, rgba(30, 36, 46, 0.95) 100%);
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.about-avatar-wrap {
  width: 78px;
  height: 78px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2.5px solid var(--color-cyan, #00e5ff);
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.45);
  overflow: hidden;
  background: #0d1117;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-author-info {
  display: flex;
  flex-direction: column;
  
  min-width: 0;
  flex: 1;
}

.about-author-header-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.about-author-name {
  font-size: 0.96rem; /* уменьшено на 2 пункта */
  font-weight: 400; /* убран bold */
  color: #ffffff;
  letter-spacing: 0.2px;
  line-height: 1.2;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.about-author-prefix {
  font-size: 0.72rem;
  font-weight: 400;
  color: #8b949e;
  letter-spacing: 0.2px;
  text-transform: lowercase;
}

.about-callsign-badge {
  background: linear-gradient(180deg, #ffaa00 0%, #d48800 100%);
  color: #0d1117;
  font-weight: 800;
  font-size: 0.76rem;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  padding: 2px 7px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  letter-spacing: 0.5px;
}

.about-made-in {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
}

.about-made-arm {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  color: #ffaa00;
  letter-spacing: 0.2px;
  line-height: 1.25;
}

.about-flag-am {
  width: 19px;
  height: 13px;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: inline-flex;
  vertical-align: middle;
  flex-shrink: 0;
}

.about-email-container {
  display: inline-flex;
  align-items: center;
}

.btn-reveal-email {
  background: rgba(0, 229, 255, 0.12);
  border: 1px solid rgba(0, 229, 255, 0.4);
  color: var(--color-cyan, #00e5ff);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  line-height: 1.2;
  white-space: nowrap;
}

.btn-reveal-email:hover {
  background: rgba(0, 229, 255, 0.25);
  border-color: var(--color-cyan, #00e5ff);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
  transform: translateY(-1px);
}

/* Green copied state with single blink */
.btn-reveal-email.copied {
  background: rgba(46, 204, 113, 0.22) !important;
  border-color: #2ea043 !important;
  color: #3fb950 !important;
  box-shadow: 0 0 10px rgba(46, 204, 113, 0.4) !important;
  transform: none !important;
  cursor: pointer;
  animation: emailBlinkOnce 1.8s ease-in-out 1 forwards;
}

.btn-reveal-email.copied:hover {
  background: rgba(46, 204, 113, 0.3) !important;
  border-color: #3fb950 !important;
}

@keyframes emailBlinkOnce {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 0.2;
  }
  80%, 100% {
    opacity: 1;
  }
}

.about-email-img-box {
  display: inline-flex;
  align-items: center;
  background: rgba(13, 17, 23, 0.85);
  border: 1px solid rgba(0, 229, 255, 0.35);
  border-radius: 5px;
  padding: 2px 8px;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.25);
}

.about-email-img {
  height: 20px;
  width: auto;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* Credits Section */
.about-credits-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.about-credits-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #f0f6fc;
  margin: 0;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.about-credits-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
}

.about-credits-list::-webkit-scrollbar {
  width: 5px;
}
.about-credits-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
.about-credits-list::-webkit-scrollbar-thumb {
  background: #30363d;
  border-radius: 3px;
}
.about-credits-list::-webkit-scrollbar-thumb:hover {
  background: #58a6ff;
}

.about-credit-card {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: all 0.15s ease;
}

.about-credit-card:hover {
  background: #1c2128;
  border-color: rgba(88, 166, 255, 0.5);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.about-credit-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.about-lib-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: #58a6ff;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.about-lib-link {
  font-size: 0.73rem;
  color: var(--color-cyan, #00e5ff);
  text-decoration: none;
  border-bottom: 1px dashed rgba(0, 229, 255, 0.4);
  transition: all 0.15s ease;
}

.about-lib-link:hover {
  color: #79c0ff;
  border-bottom-style: solid;
}

.about-credit-author {
  font-size: 0.76rem;
  font-weight: 600;
  color: #c9d1d9;
}

.about-credit-desc {
  font-size: 0.73rem;
  color: #8b949e;
  line-height: 1.35;
}

/* Auto-close Progress Bar */
.about-timer-progress-track {
  height: 3px;
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}

.about-timer-progress-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #ffaa00, #00e5ff);
  transition: width 1s linear;
}

/* Modal Footer */
.about-modal-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 12px;
  margin-top: 6px;
}

.about-modal-footer .btn-primary {
  width: 100%;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
}

/* Make logo and brand title interactable */
.brand-logo-wrap,
.brand-title {
  cursor: pointer;
  user-select: none;
}

/* Audio Modal (RX / TX DSP) Styles */
.audio-modal-content {
  max-width: 640px;
  width: 92%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}

.badge-audio-mode {
  background: rgba(0, 229, 255, 0.15);
  color: #00e5ff;
  font-size: 0.72rem;
  font-family: monospace;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(0, 229, 255, 0.35);
  margin-left: 8px;
}

.audio-tabs-nav {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0 4px 10px 4px;
  margin-bottom: 14px;
}

.audio-tab-btn {
  flex: 1;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  user-select: none;
}

/* RX Tab (Green tint) */
.audio-tab-btn[data-tab="rx"] {
  background: rgba(10, 24, 15, 0.9);
  border: 1px solid rgba(46, 160, 67, 0.25);
  color: #7ee787;
  opacity: 0.88;
}

.audio-tab-btn[data-tab="rx"]:hover {
  background: rgba(18, 42, 26, 0.95);
  border-color: rgba(46, 160, 67, 0.5);
  color: #aff5b4;
  opacity: 1;
}

.audio-tab-btn[data-tab="rx"].active {
  background: rgba(46, 160, 67, 0.32);
  border-color: #3fb950;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(46, 160, 67, 0.35);
  opacity: 1;
}

/* TX Tab (Red tint) */
.audio-tab-btn[data-tab="tx"] {
  background: rgba(26, 10, 12, 0.9);
  border: 1px solid rgba(248, 81, 73, 0.25);
  color: #ff7b72;
  opacity: 0.88;
}

.audio-tab-btn[data-tab="tx"]:hover {
  background: rgba(45, 16, 20, 0.95);
  border-color: rgba(248, 81, 73, 0.5);
  color: #ffa198;
  opacity: 1;
}

.audio-tab-btn[data-tab="tx"].active {
  background: rgba(248, 81, 73, 0.32);
  border-color: #f85149;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(248, 81, 73, 0.35);
  opacity: 1;
}

.audio-modal-body {
  overflow-y: auto;
  padding-right: 4px;
  max-height: calc(90vh - 160px);
}

/* Audio Presets Panel (P1 - P4) */
.audio-presets-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(13, 17, 23, 0.75);
  border: 1px solid rgba(0, 229, 255, 0.25);
  border-radius: 8px;
  padding: 7px 12px;
  margin-bottom: 14px;
}

.audio-presets-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.audio-presets-title {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-muted, #8b949e);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.audio-presets-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.btn-audio-preset {
  background: #21262d;
  color: #c9d1d9;
  border: 1px solid #30363d;
  border-radius: 5px;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  padding: 2px 8px;
  min-width: 32px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.btn-audio-preset:hover {
  background: #30363d;
  color: #fff;
  border-color: #00e5ff;
  transform: translateY(-1px);
}

.btn-audio-preset.active {
  background: #008ba3;
  color: #ffffff;
  border-color: #00e5ff;
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.45);
}

.btn-audio-save-preset {
  color: #00e5ff;
  border-color: rgba(0, 229, 255, 0.35);
}

.btn-audio-save-preset:hover {
  background: rgba(0, 229, 255, 0.15);
  border-color: #00e5ff;
  color: #ffffff;
  transform: translateY(-1px);
}

.audio-section {
  background: rgba(22, 27, 34, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px 14px;
}

.audio-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.audio-section-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #58a6ff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.audio-val-badge {
  background: #1f6feb;
  color: #ffffff;
  font-family: monospace;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  min-width: 24px;
  text-align: center;
}

.badge-agc-active {
  background: rgba(0, 229, 255, 0.2);
  color: #00e5ff;
  border: 1px solid rgba(0, 229, 255, 0.4);
}

.btn-audio-action-sm {
  background: rgba(33, 38, 45, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #8b949e;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-audio-action-sm:hover {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border-color: #38bdf8;
}

/* AGC Profiles and Sliders */
.agc-profiles-container {
  margin-top: 6px;
}

.agc-profiles-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #8b949e;
  margin-bottom: 6px;
}

.agc-profiles-bar,
.agc-profiles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
}

@media (max-width: 520px) {
  .agc-profiles-bar,
  .agc-profiles-grid {
    grid-template-columns: repeat(4, 1fr);
    
  }
}

.btn-agc-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #21262d;
  border: 1px solid #38414e;
  border-radius: 6px;
  padding: 8px 6px;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
  color: #f0f6fc !important; /* Crisp high-contrast readable text */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

@media (max-width: 520px) {
  .btn-agc-profile {
    padding: 6px 2px;
    font-size: 0.68rem;
  }
}

.btn-agc-profile:hover {
  background: #30363d;
  border-color: #58a6ff;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.btn-agc-profile.active {
  background: rgba(0, 229, 255, 0.22) !important;
  border-color: #00e5ff !important;
  color: #00e5ff !important;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
}

.agc-prof-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: #f0f6fc;
}

.btn-agc-profile.active .agc-prof-name {
  color: #00e5ff;
}

.agc-prof-range {
  font-size: 0.68rem;
  font-family: monospace;
  color: #8b949e;
  margin-top: 2px;
}

.btn-agc-profile.active .agc-prof-range {
  color: #79c0ff;
}

.btn-profile-highlight {
  border-color: rgba(255, 170, 0, 0.4);
}

.btn-profile-highlight:hover {
  border-color: #ffaa00;
}

.btn-profile-highlight.active {
  border-color: #ffaa00;
  background: rgba(255, 170, 0, 0.18);
  box-shadow: 0 0 8px rgba(255, 170, 0, 0.35);
}

.btn-profile-highlight.active .agc-prof-name {
  color: #ffaa00;
}

.agc-sliders-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 560px) {
  .agc-sliders-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.agc-slider-col {
  background: rgba(13, 17, 23, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 8px 10px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.agc-col-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  min-width: 0;
}

.agc-band-title {
  font-size: 0.72rem;
  font-weight: 600;
  color: #e6edf3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agc-val-badge {
  font-family: monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: #00e5ff;
  white-space: nowrap;
  flex-shrink: 0;
}

.agc-slider-col .slider-container {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  width: 100%;
}

.agc-slider-col .form-slider {
  flex: 1 1 0%;
  min-width: 0;
  width: 100%;
  cursor: pointer;
}

.agc-slider-col .slider-limit-label {
  font-size: 0.68rem;
  color: #8b949e;
  font-family: monospace;
  flex-shrink: 0;
  user-select: none;
}

/* TX Reserved Tab Styles */
.tx-reserved-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px 16px;
  background: rgba(22, 27, 34, 0.65);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 8px;
}

.tx-reserved-icon {
  font-size: 2.2rem;
  margin-bottom: 10px;
}

.tx-reserved-title {
  font-size: 1rem;
  font-weight: 700;
  color: #e6edf3;
  margin: 0 0 6px 0;
}

.tx-reserved-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #ffaa00;
  background: rgba(255, 170, 0, 0.15);
  border: 1px solid rgba(255, 170, 0, 0.3);
  border-radius: 12px;
  padding: 2px 10px;
  margin-bottom: 12px;
}

.tx-reserved-desc {
  font-size: 0.8rem;
  color: #8b949e;
  max-width: 440px;
  line-height: 1.4;
  margin: 0 0 16px 0;
}

.tx-features-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 480px;
}

@media (max-width: 460px) {
  .tx-features-preview-grid {
    grid-template-columns: 1fr;
  }
}

.tx-preview-card {
  background: rgba(13, 17, 23, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 4px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  
}

.tx-card-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.tx-preview-card strong {
  font-size: 0.78rem;
  color: #c9d1d9;
}

.tx-preview-card small {
  font-size: 0.68rem;
  color: #8b949e;
  line-height: 1.25;
}

.audio-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 12px;
  margin-top: 14px;
}

.btn-audio-footer {
  min-width: 120px;
}




/* ==========================================================
   BRANDMEISTER TALKGROUPS MODAL — TABS & DYNAMIC TG STYLES
   ========================================================== */

/* Tabs Navigation */
.bm-tabs-nav {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid #30363d;
  padding-bottom: 8px;
  margin-bottom: 4px;
  flex-shrink: 0;
}

.bm-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #8b949e;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.bm-tab-btn:hover {
  color: #c9d1d9;
  background: rgba(255, 255, 255, 0.05);
}

.bm-tab-btn.active {
  color: #58a6ff;
  background: rgba(56, 139, 253, 0.12);
  border-color: rgba(56, 139, 253, 0.35);
}

.bm-tab-icon {
  font-size: 0.85rem;
  line-height: 1;
}

.bm-tab-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #8b949e;
}

.bm-tab-btn.active .bm-tab-badge {
  background: rgba(56, 139, 253, 0.25);
  color: #79c0ff;
}

/* Tab Content Visibility */
.bm-tab-content {
  display: none;
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
  flex-direction: column;
}

.bm-tab-content.active {
  display: flex;
}

/* Mobile Slot Switcher (TS1 / TS2) */
.bm-mobile-slot-switcher {
  display: none;
  gap: 8px;
  margin-bottom: 6px;
  flex-shrink: 0;
}

.bm-mobile-slot-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 10px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #8b949e;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.bm-mobile-slot-btn.active {
  border-color: #58a6ff;
  background: rgba(56, 139, 253, 0.15);
  color: #ffffff;
}

.bm-mobile-slot-btn[data-mobile-slot="1"].active {
  border-color: #00e5ff !important;
  background: rgba(0, 229, 255, 0.15) !important;
  color: #ffffff !important;
}

.bm-mobile-slot-btn[data-mobile-slot="2"].active {
  border-color: #ff9800 !important;
  background: rgba(255, 152, 0, 0.15) !important;
  color: #ffffff !important;
}

.bm-mobile-slot-count {
  font-size: 0.72rem;
  opacity: 0.85;
}

/* Dynamic Tab Top Bar - removed per user request */
.bm-dyn-top-bar {
  display: none !important;
}

.bm-dyn-header-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 200px;
}

.bm-dyn-header-title {
  font-size: 0.84rem;
  font-weight: 600;
  color: #e6edf3;
}

.bm-dyn-header-hint {
  font-size: 0.7rem;
  color: #8b949e;
  line-height: 1.3;
}

/* Dynamic Drop All Button */
.btn-bm-drop-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(248, 81, 73, 0.15);
  border: 1px solid #f85149;
  border-radius: 6px;
  color: #ff7b72;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.btn-bm-drop-all:hover:not(:disabled) {
  background: #f85149;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(248, 81, 73, 0.35);
}

.btn-bm-drop-all:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Slot Header Drop Button */
.bm-dyn-slot-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-drop-slot-dyn {
  padding: 2px 7px;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(248, 81, 73, 0.1);
  border: 1px solid rgba(248, 81, 73, 0.35);
  border-radius: 4px;
  color: #ff7b72;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-drop-slot-dyn:hover:not(:disabled) {
  background: rgba(248, 81, 73, 0.25);
  border-color: #f85149;
  color: #ffffff;
}

.btn-drop-slot-dyn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Dynamic TG Item */
.bm-dyn-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.bm-dyn-item:hover {
  background: #1c2128;
  border-color: #484f58;
}

.bm-dyn-left {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  flex: 1;
}

.bm-dyn-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  background: rgba(56, 139, 253, 0.2);
  color: #79c0ff;
  flex-shrink: 0;
}

.btn-dyn-tune {
  padding: 3px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(31, 111, 235, 0.15);
  border: 1px solid rgba(31, 111, 235, 0.4);
  border-radius: 4px;
  color: #79c0ff;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.btn-dyn-tune:hover {
  background: #1f6feb;
  color: #ffffff;
}

/* ==========================================================
   SMARTPHONE / MOBILE RESPONSIVE ADAPTATION (<= 600px)
   Reduces fonts & UI elements up to 2x for full usability
   ========================================================== */
@media (max-width: 600px) {
  /* BrandMeister banner mobile scaling */
  .bm-info-banner {
    height: 40px !important;
    padding: 2px 6px !important;
    gap: 5px !important;
  }
  .bm-server-label-wrap {
    max-width: 120px !important;
    height: 26px !important;
    padding: 1px 4px !important;
  }
  .bm-server-name {
    font-size: 0.70rem !important;
    max-width: 75px !important;
  }
  .bm-ping-chart-wrap {
    height: 34px !important;
  }
  .bm-banner-ping {
    min-width: 44px !important;
  }
  .bm-banner-ping .ping-val-row {
    font-size: 0.72rem !important;
  }
  .bm-banner-ping .loss-val-row {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
  }

  /* Make quick actions row always visible on mobile */
  .radio-container.hotspot-compact-mode .quick-actions-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    padding: 2px 4px !important;
  }

  .quick-actions-row {
    gap: 4px !important;
  }

  .quick-actions-row .btn-quick-action,
  .quick-actions-row .btn-bm-tg-static {
    height: 24px !important;
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
  }

  /* BM TG Modal Mobile Layout */
  .bm-tg-modal-content {
    padding: 8px 10px !important;
    gap: 6px !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  .bm-modal-title {
    font-size: 0.85rem !important;
  }

  .bm-tabs-nav {
    gap: 4px !important;
    padding-bottom: 4px !important;
  }

  .bm-tab-btn {
    padding: 4px 8px !important;
    font-size: 0.72rem !important;
  }

  /* Show mobile slot switcher on small screens */
  .bm-mobile-slot-switcher {
    display: flex !important;
  }

  /* Show only active slot column to prevent infinite vertical scrolling */
  .bm-slots-grid {
    grid-template-columns: 1fr !important;
    overflow-y: hidden !important;
  }

  .bm-slots-grid .bm-slot-col {
    display: none !important;
    padding: 8px !important;
    gap: 6px !important;
  }

  .bm-slots-grid .bm-slot-col.mobile-active {
    display: flex !important;
  }

  .bm-slot-name {
    font-size: 0.75rem !important;
  }

  .bm-slot-count {
    font-size: 0.65rem !important;
  }

  .bm-tg-num {
    font-size: 0.72rem !important;
  }

  .bm-tg-name {
    font-size: 0.65rem !important;
  }

  .btn-del-single {
    font-size: 0.68rem !important;
    padding: 1px 4px !important;
  }

  .bm-tg-input,
  .bm-preset-select {
    padding: 3px 6px !important;
    font-size: 0.68rem !important;
    height: 26px !important;
  }

  .btn-bm-add,
  .btn-bm-add-preset {
    padding: 3px 8px !important;
    font-size: 0.68rem !important;
    min-width: 60px !important;
    height: 26px !important;
  }

  .btn-bm-file-btn,
  .btn-bm-file-import,
  .btn-bm-file-export {
    padding: 3px 5px !important;
    font-size: 0.68rem !important;
  }

  .bm-dyn-top-bar {
    padding: 6px 8px !important;
    margin-bottom: 6px !important;
    gap: 6px !important;
  }

  .bm-dyn-header-title {
    font-size: 0.75rem !important;
  }

  .bm-dyn-header-hint {
    font-size: 0.62rem !important;
  }

  .btn-bm-drop-all {
    padding: 4px 8px !important;
    font-size: 0.7rem !important;
  }

  .btn-drop-slot-dyn {
    padding: 1px 5px !important;
    font-size: 0.65rem !important;
  }

  .btn-dyn-tune {
    padding: 2px 6px !important;
    font-size: 0.65rem !important;
  }

  .bm-modal-footer {
    padding-top: 6px !important;
  }

  .bm-status-msg {
    font-size: 0.65rem !important;
  }

  /* ==========================================================
     MOBILE MODAL SYSTEM (DSD-FME, Audio DSP, Settings, TG, CallID, About, Log)
     Eliminates excessive margins/frames and reduces element scale by ~25%
     ========================================================== */
  .modal {
    padding: 6px 4px !important;
    align-items: center !important;
  }

  .modal-content,
  .dsdfme-modal-content,
  .audio-modal-content,
  .about-modal-content,
  #tgtxModal .modal-content,
  #callIdModal .modal-content,
  #bmTgModal .modal-content,
  #callidModal .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 8px !important;
    border-radius: 10px !important;
    gap: 8px !important;
    max-height: 96vh !important;
    box-sizing: border-box !important;
  }

  /* Modal Headers & Titles */
  .modal-header,
  .search-modal-header,
  .bm-tg-modal-content .modal-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding-bottom: 4px !important;
    margin-bottom: 2px !important;
    box-sizing: border-box !important;
  }
  .modal-header h3 {
    font-size: 0.80rem !important;
  }
  .modal-title-with-badge {
    gap: 4px !important;
  }
  .badge-dsdfme-ver,
  .badge-audio-mode {
    font-size: 0.60rem !important;
    padding: 1px 5px !important;
    margin-left: 4px !important;
  }
  .badge-about-ver,
  .badge-about-date {
    font-size: 0.50rem !important;
    padding: 1px 4px !important;
    margin-left: 2px !important;
  }
  .modal-header .icon-btn,
  #closeBmTgModalBtn,
  #closeSearchTgIdModalBtn {
    font-size: 0.95rem !important;
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }

  /* Modal Body & Sections (DSD-FME & Audio DSP) */
  .dsdfme-modal-body,
  .audio-modal-body {
    gap: 7px !important;
    max-height: calc(96vh - 90px) !important;
  }

  .dsdfme-section,
  .audio-section {
    padding: 7px 6px !important;
    border-radius: 6px !important;
    margin-bottom: 6px !important;
  }

  .dsdfme-section-title,
  .audio-section-title {
    font-size: 0.70rem !important;
    margin-bottom: 5px !important;
    letter-spacing: 0.2px !important;
  }

  .dsdfme-field {
    margin-bottom: 7px !important;
  }

  .dsdfme-field-header,
  .audio-section-header {
    margin-bottom: 3px !important;
  }

  .dsdfme-label,
  .dsdfme-field strong,
  .audio-section label {
    font-size: 0.70rem !important;
  }

  .dsdfme-val-badge,
  .audio-val-badge {
    font-size: 0.62rem !important;
    padding: 1px 5px !important;
    min-width: 18px !important;
    border-radius: 5px !important;
  }

  .form-hint,
  .dsdfme-field small,
  .audio-section small {
    font-size: 0.62rem !important;
    line-height: 1.25 !important;
    margin-top: 2px !important;
  }

  /* Presets Bar in DSD-FME & Audio Modals */
  .dsdfme-presets-panel,
  .audio-presets-panel {
    padding: 4px 6px !important;
    margin-bottom: 7px !important;
    gap: 4px !important;
    border-radius: 6px !important;
  }

  .dsdfme-presets-title,
  .audio-presets-title {
    font-size: 0.64rem !important;
    letter-spacing: 0.2px !important;
  }

  .dsdfme-presets-group,
  .audio-presets-group {
    gap: 3px !important;
  }

  .btn-dsdfme-preset,
  .btn-audio-preset {
    font-size: 0.68rem !important;
    min-width: 25px !important;
    height: 22px !important;
    padding: 1px 4px !important;
    border-radius: 4px !important;
  }

  .btn-preset-save,
  .btn-audio-save-preset {
    font-size: 0.65rem !important;
    height: 22px !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
    gap: 3px !important;
  }

  .btn-preset-save-icon {
    font-size: 0.70rem !important;
  }

  .slider-container {
    gap: 5px !important;
    margin-top: 2px !important;
  }

  .slider-limit-label {
    font-size: 0.62rem !important;
    min-width: 14px !important;
  }

  .form-slider {
    height: 4px !important;
  }

  .dsdfme-radio-option,
  .dsdfme-checkbox-label {
    font-size: 0.70rem !important;
    padding: 2px 0 !important;
    gap: 4px !important;
  }

  .dsdfme-modal-footer,
  .modal-footer {
    padding-top: 6px !important;
    gap: 6px !important;
  }

  .btn-dsdfme-footer,
  .modal-footer .btn-primary,
  .modal-footer .btn-secondary {
    font-size: 0.72rem !important;
    height: 28px !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
  }

  /* Audio Tabs */
  .audio-tabs-nav {
    gap: 3px !important;
    margin-bottom: 6px !important;
  }

  .audio-tab-btn {
    padding: 4px 8px !important;
    font-size: 0.72rem !important;
  }

  /* Settings Modal (#settingsModal) */
  #settingsModal .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 10px !important;
    max-height: 96vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }

  #settingsModal .settings-modal-header {
    padding: 6px 10px 0 10px !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    gap: 6px !important;
  }

  #settingsModal .settings-modal-header #closeSettingsBtn {
    margin-bottom: 5px !important;
  }

  #settingsModal .settings-modal-body {
    padding: 10px 10px 16px 10px !important;
  }

  .modal-tabs {
    display: flex !important;
    gap: 4px !important;
    border-bottom-width: 1px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    flex-shrink: 0 !important;
    min-height: 36px !important;
  }

  .tab-btn {
    padding: 6px 10px 8px 10px !important;
    font-size: 0.76rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    margin-bottom: -1px !important;
  }

  .tab-content {
    gap: 7px !important;
  }
  .hotspot-cards-list {
    max-height: calc(96vh - 130px) !important;
  }

  .form-group {
    gap: 2px !important;
    min-width: 0 !important;
  }

  .form-group label {
    font-size: 0.69rem !important;
  }

  .form-input {
    padding: 3px 6px !important;
    font-size: 0.76rem !important;
    height: 28px !important;
    border-radius: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .form-group-row {
    display: flex !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .form-group-row .form-group {
    min-width: 0 !important;
    width: 100% !important;
  }

  .form-group-row .form-input {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* TG Search & Call ID Modals */
  .tgtx-modal-content,
  .callid-modal-content {
    padding: 8px 8px !important;
    gap: 7px !important;
  }

  .search-input-wrap .search-input {
    height: 28px !important;
    font-size: 0.76rem !important;
    padding: 3px 6px !important;
  }

  .quick-chips-row {
    gap: 3px !important;
    margin-bottom: 4px !important;
  }

  .chip-btn {
    font-size: 0.62rem !important;
    padding: 1px 5px !important;
    height: 20px !important;
  }

  .results-table-wrap th,
  .results-table-wrap td {
    padding: 3px 5px !important;
    font-size: 0.67rem !important;
  }

  /* ==========================================================
     MAIN TRANSCEIVER CARD MOBILE OPTIMIZATION
     Compacts volume strip, status badges, and presets row
     ========================================================== */
  .radio-container:not(.collapsed) {
    width: 100% !important;
    max-width: 100% !important;
    padding: 4px 4px 8px 4px !important;
    box-sizing: border-box !important;
  }

  /* Mobile volume strip (widened by 1/3 from 30px to 40px for touch & clarity) */
  .vertical-volume-strip {
    flex: 0 0 40px !important;
    width: 40px !important;
    padding: 4px 1px 4px 1px !important;
    border-radius: 9px !important;
    align-items: center !important;
    gap: 2px !important;
  }

  .volume-val-v {
    font-size: 0.65rem !important;
  }

  /* Slider frame widened by 1/3 (outer track 12px -> 16px, fill bar 6px -> 8px) */
  .volume-slider-v-wrap {
    min-height: 20px !important;
    padding: 2px 0 !important;
    margin: 1px 0 !important;
  }

  .volume-slider-v-wrap::before {
    width: 16px !important;
    border-radius: 8px !important;
  }

  .volume-slider-v-wrap::after {
    width: 8px !important;
    border-radius: 4px !important;
  }

  .volume-slider-v {
    width: 28px !important;
  }

  .volume-slider-v::-webkit-slider-thumb {
    width: 18px !important;
    height: 18px !important;
  }

  .volume-slider-v::-moz-range-thumb {
    width: 18px !important;
    height: 18px !important;
  }

  /* Speaker mute toggle enlarged to match new frame width (22px -> 32px, SVG 15px -> 20px) */
  .volume-icon-v {
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    align-self: center !important;
    box-sizing: border-box !important;
  }

  .volume-icon-v .speaker-svg {
    width: 20px !important;
    height: 20px !important;
    margin: 0 auto !important;
  }

  /* Settings button inside volume strip on mobile */
  .vertical-volume-strip .volume-strip-settings-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    margin: 1px auto 0 auto !important;
    align-self: center !important;
  }

  .vertical-volume-strip .volume-strip-settings-btn .settings-icon {
    width: 18px !important;
    height: 18px !important;
    margin: 0 auto !important;
  }

  .radio-screen {
    padding: 5px 6px 4px 6px !important;
    gap: 4px !important;
    min-width: 0 !important;
  }

  .screen-clock-bar {
    padding: 0 1px 2px 1px !important;
  }

  .screen-clock-item .clock-label {
    font-size: 0.58rem !important;
  }

  .screen-clock-item .clock-val {
    font-size: 0.68rem !important;
  }

  /* Screen Top Bar */
  .screen-top-bar {
    gap: 3px !important;
    margin-bottom: 2px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    line-height: 18px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .mode-badge {
    font-size: 0.58rem !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    height: 16px !important;
    line-height: 16px !important;
    padding: 0 2px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .callsign-display {
    font-size: 0.80rem !important;
  }

  .dmr-id-display,
  .rtt-display {
    font-size: 0.62rem !important;
  }

  /* ==========================================================
     VFO Rows (TS1, TS2): +25% Height for Smartphone Screens
     Standard dual-watch mode: 106px * 1.25 = 133px
     Transcribe expanded mode: 216px * 1.25 = 270px
     ========================================================== */

  /* 1. Standard Dual-Watch Mode on Smartphone (133px height = +25%) */
  .vfo-row {
    position: relative !important;
    isolation: isolate !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    padding: 6px 54px 6px 10px !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
  }

  .vfo-row:not(.has-transcribe) {
    height: 133px !important;
    min-height: 133px !important;
    max-height: 133px !important;
    flex: 0 0 133px !important;
  }

  .vfo-center-col {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    min-height: 100% !important;
    padding: 2px 0 !important;
    box-sizing: border-box !important;
  }

  /* Callsign row: top line - shifted 20px left */
  .vfo-caller-row {
    padding-left: 14px !important;
    height: 28px !important;
    line-height: 28px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .vfo-caller-call,
  .ts-caller-call {
    font-size: 1.25rem !important;
    line-height: 28px !important;
    font-weight: 700 !important;
  }

  /* Subrow (ID + Country): middle line - shifted 20px left and 12px up */
  .vfo-caller-subrow {
    position: relative !important;
    top: -12px !important;
    padding-left: 44px !important;
    height: 24px !important;
    line-height: 24px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .vfo-caller-id,
  .ts-caller-id,
  .vfo-caller-country,
  .ts-caller-country {
    font-size: 0.98rem !important;
    line-height: 24px !important;
    font-weight: 600 !important;
  }

  /* TalkGroup row: bottom line - shifted 20px left and 12px up */
  .vfo-tg-row {
    position: relative !important;
    top: -12px !important;
    padding-left: 14px !important;
    height: 26px !important;
    line-height: 26px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .vfo-tg-text,
  .vfo-tg-desc,
  .ts-tg-desc {
    font-size: 0.84rem !important;
    line-height: 26px !important;
  }

  .vfo-tg-pill,
  .ts-tg-pill {
    font-size: 0.80rem !important;
    padding: 1px 5px !important;
  }

  /* Action buttons column on right in 133px smartphone frame */
  .vfo-pan-btn {
    display: none !important;
  }
  .vfo-ptt-dot {
    display: none !important;
  }

  .vfo-corner-badge {
    width: 34px !important;
    height: 34px !important;
    font-size: 1.05rem !important;
    padding: 3px 0 0 4px !important;
  }

  .vfo-lang-badge {
    top: 7px !important;
    right: 6px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    font-size: 0.74rem !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
  }

  .vfo-tts-badge {
    top: 49px !important;
    right: 6px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    font-size: 0.74rem !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
  }

  .vfo-mute-btn {
    top: 91px !important;
    right: 6px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    border-radius: 7px !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    justify-items: center !important;
    padding: 0 2px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    touch-action: manipulation !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  .vfo-mute-speaker-wrap {
    font-size: 17px !important;
    height: 18px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
  }

  .vfo-pan-tag {
    font-size: 12px !important;
    line-height: 1 !important;
    padding: 0 !important;
    pointer-events: none !important;
  }

  /* 2. Expanded Transcribe / TTS Mode on Smartphone (270px height = +25%) */
  .radio-container.transcribe-ts1-only .vfo-ts2-row,
  .radio-container.transcribe-ts2-only .vfo-ts1-row {
    display: none !important;
  }

  .radio-container.transcribe-ts1-only .vfo-ts1-row,
  .radio-container.transcribe-ts2-only .vfo-ts2-row {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    height: 270px !important;
    min-height: 270px !important;
    max-height: 270px !important;
    flex: 0 0 270px !important;
    padding: 6px 8px 6px 8px !important;
    overflow: hidden !important;
  }

  .radio-container.transcribe-ts1-only .vfo-ts1-row .vfo-center-col,
  .radio-container.transcribe-ts2-only .vfo-ts2-row .vfo-center-col {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    margin: 0 0 4px 0 !important;
    padding: 0 50px 0 34px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .radio-container.transcribe-ts1-only .vfo-ts1-row .vfo-caller-row,
  .radio-container.transcribe-ts2-only .vfo-ts2-row .vfo-caller-row {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 26px !important;
    line-height: 26px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  .radio-container.transcribe-ts1-only .vfo-ts1-row .vfo-caller-call,
  .radio-container.transcribe-ts2-only .vfo-ts2-row .vfo-caller-call,
  .radio-container.transcribe-ts1-only .vfo-ts1-row .ts-caller-call,
  .radio-container.transcribe-ts2-only .vfo-ts2-row .ts-caller-call {
    font-size: 1.12rem !important;
    line-height: 26px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    max-width: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .radio-container.transcribe-ts1-only .vfo-ts1-row .vfo-caller-subrow,
  .radio-container.transcribe-ts2-only .vfo-ts2-row .vfo-caller-subrow,
  .radio-container.transcribe-ts1-only .vfo-ts1-row .vfo-tg-row,
  .radio-container.transcribe-ts2-only .vfo-ts2-row .vfo-tg-row {
    display: none !important;
  }

  /* Caption box on Smartphone: 228px high (+25% expansion), shifted 5px left, 10px wider */
  .radio-container.transcribe-ts1-only .vfo-ts1-row .vfo-caption-box,
  .radio-container.transcribe-ts2-only .vfo-ts2-row .vfo-caption-box {
    display: block !important;
    height: 228px !important;
    min-height: 228px !important;
    max-height: 228px !important;
    width: calc(100% - 38px) !important;
    margin: 0 0 0 -5px !important;
    padding: 6px 8px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    line-height: 15px !important;
  }

  .radio-container.transcribe-ts1-only .vfo-ts1-row .vfo-caption-stream:empty::before,
  .radio-container.transcribe-ts2-only .vfo-ts2-row .vfo-caption-stream:empty::before {
    min-height: 205px !important;
    font-size: 11px !important;
  }

  /* Line 1: Status Badges (GW, BM, API) + Checkboxes (Mic loop, AGC) */
  .status-badges-row {
    gap: 2px !important;
    height: 18px !important;
    margin-bottom: 2px !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
  }

  .status-badges-group {
    gap: 2px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
  }

  .status-badge-item {
    width: 63px !important;
    flex: 0 0 63px !important;
  }

  .status-badge,
  .bm-badge {
    font-size: 0.54rem !important;
    padding: 1px 2px !important;
    height: 16px !important;
    line-height: 14px !important;
  }

  .status-toggles-group {
    gap: 3px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
  }

  .status-toggles-group .toggle-control {
    font-size: 0.58rem !important;
    gap: 2px !important;
    height: 18px !important;
    line-height: 18px !important;
  }

  .status-toggles-group .toggle-control input[type="checkbox"] {
    transform: scale(0.85) !important;
    margin: 0 !important;
  }

  /* Line 2: 3 Action Pairs on Mobile */
  .status-actions-row {
    width: 100% !important;
    overflow: visible !important;
    padding-top: 1px !important;
  }

  .status-actions-group {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 3px !important;
    height: 19px !important;
    flex-wrap: nowrap !important;
  }

  .control-pair-btn {
    height: 19px !important;
  }

  .btn-action-trigger {
    height: 19px !important;
    font-size: 0.66rem !important; /* Увеличено на 2 пункта (было 0.54rem) */
    padding: 0 3px !important;
    gap: 2px !important;
  }

  .btn-action-icon {
    font-size: 0.72rem !important; /* Увеличено на 2 пункта (было 0.60rem) */
  }

  .btn-action-label {
    font-size: 0.66rem !important; /* Увеличено на 2 пункта (было 0.54rem) */
    letter-spacing: -0.2px !important;
  }

  .btn-mini-preset {
    height: 19px !important;
    font-size: 0.68rem !important; /* Увеличено на 2 пункта (было 0.56rem) */
    padding: 0 3px !important;
  }
  /* Quick Action Buttons (BM TG, Search TG, Call ID) */
  .bm-tg-actions-row {
    gap: 2px !important;
  }

  .btn-bm-action,
  .btn-tx-target {
    height: 28px !important;
    font-size: 0.66rem !important;
    padding: 0 3px !important;
    border-radius: 5px !important;
  }

  .btn-bm-static-edit .bm-action-label {
    font-size: 0.61rem !important;
    letter-spacing: -0.25px !important;
  }

  /* PTT Section: 3 equal columns, 45px side buttons (2 per side), 96px PTT */
  .ptt-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 4px !important;
    width: 100% !important;
  }

  .ptt-side,
  .ptt-side-left,
  .ptt-side-right {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: stretch !important;
  }

  .quick-tg-box {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 45px !important;
    flex: 0 0 45px !important;
    padding: 4px 6px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }

  .quick-tg-input {
    font-size: 0.88rem !important;
    height: 33px !important;
    line-height: 33px !important;
  }

  .btn-quick-tg-apply {
    height: 33px !important;
    font-size: 0.74rem !important;
    padding: 0 6px !important;
    border-radius: 6px !important;
  }

  .quick-actions-row .quick-tg-box,
  .bm-tg-actions-row .quick-tg-box {
    height: 45px !important;
  }

  .btn-ptt-side-half {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 45px !important;
    font-size: 0.78rem !important;
    padding: 2px 4px !important;
    border-radius: 8px !important;
    gap: 5px !important;
    box-sizing: border-box !important;
  }

  .ptt-side-top-row {
    height: 45px !important;
    gap: 4px !important;
  }
  .ptt-side-top-row .btn-settings {
    flex: 0 0 42px !important;
    width: 42px !important;
    max-width: 42px !important;
    min-width: 40px !important;
    height: 45px !important;
  }
  .ptt-side-top-row .btn-settings .settings-icon {
    width: 20px !important;
    height: 20px !important;
  }
  .ptt-side-top-row .btn-my-contacts {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 45px !important;
    padding: 0 2px !important;
  }
  .ptt-side-top-row .btn-my-contacts .ptt-side-label {
    font-size: 0.72rem !important;
    letter-spacing: -0.3px !important;
  }

  .btn-srch-tg-id {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 45px !important;
    font-size: 0.74rem !important;
    padding: 0 3px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }

  .btn-srch-tg-id .srch-split-seg {
    height: 35px !important;
  }

  .ptt-side-icon {
    font-size: 1.0rem !important;
  }

  .ptt-button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 96px !important;
    padding: 4px 4px !important;
    border-radius: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }

  .ptt-title {
    font-size: 1.44rem !important;
  }

  .ptt-target-info {
    font-size: 0.74rem !important;
    padding-right: 4px !important;
  }

  .ptt-slots-subrow {
    padding: 0 4px !important;
  }

  .ptt-slot-badge {
    font-size: 0.62rem !important;
    min-width: 0 !important;
    max-width: none !important;
    letter-spacing: 0 !important;
    padding: 0 !important;
  }

  .ptt-target-desc {
    font-size: 0.58rem !important;
    max-width: calc(100% - 2px) !important;
    padding: 0 1px !important;
    box-sizing: border-box !important;
    min-height: 11px !important;
  }
}

/* ==========================================================
   HOTSPOT COLLAPSED STATE (MICRO-PANEL) - GLOBAL PRIORITY OVERRIDE
   ========================================================== */
.radio-container.collapsed,
.radio-container.collapsed.hotspot-compact-mode {
  min-height: 0 !important;
  height: auto !important;
  width: max-content !important;
  width: -moz-max-content !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  padding: 4px 8px !important;
  gap: 0 !important;
  border-radius: 12px !important;
  border: 2px solid rgba(0, 229, 255, 0.7) !important;
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.18), 0 8px 20px rgba(0, 0, 0, 0.5) !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
  white-space: nowrap !important;
}

.radio-container.collapsed:hover {
  border-color: #00e5ff !important;
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.35), 0 8px 20px rgba(0, 0, 0, 0.5) !important;
}

.radio-container.collapsed:active {
  transform: scale(0.97);
}

.radio-container.collapsed > *:not(.radio-header),
.radio-container.collapsed .quick-actions-row,
.radio-container.collapsed .transceiver-middle-row,
.radio-container.collapsed .ptt-section,
.radio-container.collapsed .bm-info-banner,
.radio-container.collapsed .live-activity-list,
.radio-container.collapsed .brand-logo-wrap,
.radio-container.collapsed .header-clocks,
.radio-container.collapsed .hotspot-delete-btn,
.radio-container.collapsed .fullscreen-toggle-btn:not(.android-exit-btn),
.radio-container.collapsed .header-transcribe-btn {
  display: none !important;
}

.radio-container.collapsed .radio-header {
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  border: none !important;
  display: block !important;
  overflow: visible !important;
}

.radio-container.collapsed .header-brand-row {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  max-width: none !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

.radio-container.collapsed .brand-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  min-width: max-content !important;
  max-width: none !important;
  width: auto !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.radio-container.collapsed .hotspot-name-badge {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 6px !important;
  padding: 2px 7px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  line-height: 1.3 !important;
}

.radio-container.collapsed:not(.live-collapsed) .hotspot-name-badge,
.radio-container.collapsed:not(.live-collapsed) .hotspot-name-badge.is-online {
  background: #161b22 !important;
  border: 1px solid #30363d !important;
  color: #c9d1d9 !important;
  box-shadow: none !important;
}

.radio-container.collapsed .hotspot-collapse-btn {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  margin: 0 2px 0 0 !important;
  padding: 3px 6px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  flex: 0 0 auto !important;
  color: #ff3b30 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

.radio-container.collapsed .hotspot-collapse-btn .collapse-icon {
  transform: rotate(-90deg) !important;
  stroke: #ff3b30 !important;
  stroke-width: 3.5 !important;
  pointer-events: none !important;
}

.radio-container.collapsed .theme-toggle-btn,
.radio-container.collapsed .header-rec-btn,
.radio-container.collapsed .header-settings-btn {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
}

/* Live Collapsed Hotspot State (Hotspot running in background, UI micro-panel) */
.radio-container.collapsed.live-collapsed,
.radio-container.collapsed.live-collapsed.hotspot-compact-mode {
  border: 2px solid rgba(0, 230, 118, 0.85) !important;
  box-shadow: 0 0 16px rgba(0, 230, 118, 0.28), 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

.radio-container.collapsed.live-collapsed .hotspot-collapse-btn {
  color: #00e676 !important;
}

.radio-container.collapsed.live-collapsed .hotspot-collapse-btn .collapse-icon {
  stroke: #00e676 !important;
}

.radio-container.collapsed.live-collapsed .hotspot-name-badge.is-online {
  background: #238636 !important;
  color: #ffffff !important;
  border-color: #2ea043 !important;
  box-shadow: 0 0 8px rgba(46, 160, 67, 0.45) !important;
}

.radio-container.collapsed.live-collapsed .hotspot-name-badge:not(.is-online) {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--text-muted) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
}

/* Smartphone adaptation: Full-width collapsed hotspot micro-panels (browser & APK) */
@media (max-width: 768px), (pointer: coarse) and (max-height: 520px) {
  .radio-container.collapsed,
  .radio-container.collapsed.hotspot-compact-mode,
  .radio-container.collapsed.live-collapsed {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 6px 10px !important;
    margin: 0 !important;
    white-space: normal !important;
  }

  .radio-container.collapsed .radio-header {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .radio-container.collapsed .header-brand-row {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    box-sizing: border-box !important;
    gap: 8px !important;
    white-space: nowrap !important;
  }

  .radio-container.collapsed .brand-title {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .radio-container.collapsed .hotspot-name-badge {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }
}





/* ==========================================================================
   PORTRAIT ORIENTATION LOCK & MOBILE SHIELD
   ========================================================================== */
#orientationShield {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(10, 13, 18, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

/* Activated ONLY on mobile devices / phones in landscape mode */
@media screen and (orientation: landscape) and (max-height: 520px) {
  body:not(.allow-landscape) #orientationShield {
    display: flex !important;
  }
}

.orientation-shield-box {
  max-width: 360px;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 14px;
  padding: 24px 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), 0 0 24px rgba(0, 229, 255, 0.1);
  animation: shieldBoxPop 0.25s ease-out;
}

@keyframes shieldBoxPop {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.orientation-shield-icon-wrap {
  position: relative;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.orientation-shield-svg {
  color: #00e5ff;
  animation: phoneRotateAnim 2.4s infinite ease-in-out;
}

.orientation-shield-arrow {
  position: absolute;
  top: -2px;
  right: -6px;
  color: #ff6b2b;
  animation: arrowSpinAnim 2.4s infinite ease-in-out;
}

@keyframes phoneRotateAnim {
  0%, 25% {
    transform: rotate(90deg);
  }
  55%, 75% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}

@keyframes arrowSpinAnim {
  0%, 25% {
    transform: rotate(0deg);
    opacity: 0.6;
  }
  55%, 75% {
    transform: rotate(-90deg);
    opacity: 1;
  }
  100% {
    transform: rotate(0deg);
    opacity: 0.6;
  }
}

.orientation-shield-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #f0f6fc;
}

.orientation-shield-desc {
  font-size: 0.85rem;
  color: #8b949e;
  line-height: 1.4;
  margin-bottom: 4px;
}

.btn-orientation-dismiss {
  background: transparent;
  border: 1px solid #30363d;
  color: #8b949e;
  font-size: 0.78rem;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-orientation-dismiss:hover {
  background: #21262d;
  color: #c9d1d9;
  border-color: #8b949e;
}

/* Android APK Download Banner (Web version on Android devices) */
.android-apk-banner {
  background: linear-gradient(135deg, rgba(31, 111, 235, 0.18) 0%, rgba(56, 139, 253, 0.12) 100%);
  border: 1px solid rgba(56, 139, 253, 0.4);
  border-radius: 10px;
  margin: 10px 12px 14px 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  animation: slideDownBanner 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 100;
}

@keyframes slideDownBanner {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.apk-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  flex-wrap: wrap;
}

.apk-banner-lead {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 220px;
}

.apk-banner-icon {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}

.apk-banner-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.apk-banner-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #58a6ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.apk-banner-sub {
  font-size: 0.74rem;
  color: #8b949e;
  line-height: 1.3;
}

.apk-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-apk-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: #238636;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
}

.btn-apk-download:hover,
.btn-apk-download:active {
  background: #2ea043;
  transform: translateY(-1px);
}

.btn-apk-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #8b949e;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: color 0.15s ease, background 0.15s ease;
}

.btn-apk-close:hover {
  color: #c9d1d9;
  background: rgba(255, 255, 255, 0.08);
}

/* ==========================================================
   QUICK ASSIGN TG/ID MODAL (LONG-PRESS ON ID / TG)
   ========================================================== */
#quickAssignModal.modal {
  padding: 12px;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  box-sizing: border-box;
}

@media (max-height: 600px) {
  #quickAssignModal.modal,
  #tgIdActionMenuModal.modal,
  #quickMemPickerModal.modal,
  #directCallModal.modal {
    align-items: flex-start;
  }
}

#tgIdActionMenuModal.modal,
#quickMemPickerModal.modal,
#directCallModal.modal {
  z-index: 1150 !important;
}

.tg-action-tile > *,
.icon-btn > * {
  pointer-events: none;
}

/* ==========================================================================
   TG / DMR ID Modular Action Subsystem
   ========================================================================== */

/* 1. Mini-Menu Action Picker Modal */
.tg-action-menu-card {
  max-width: 440px;
  width: 94%;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 24px rgba(0, 229, 255, 0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: auto;
  animation: popIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.tg-action-menu-header {
  flex-shrink: 0;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #161b22;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  box-sizing: border-box;
}

.tg-action-target-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.tg-action-menu-body {
  padding: 12px 14px;
  overflow-y: auto;
  max-height: calc(85vh - 110px);
  box-sizing: border-box;
}

.tg-action-tiles-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tg-action-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(22, 27, 34, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: all 0.18s ease;
  font-family: inherit;
  box-sizing: border-box;
  position: relative;
}

.tg-action-tile:hover {
  background: #21262d;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.tg-action-tile:active {
  transform: translateY(0);
}

.tile-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

.tg-action-tile:hover .tile-icon-box {
  transform: scale(1.1);
}

.tile-text-box {
  flex: 1;
  min-width: 0;
}

.tile-title {
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 2px;
  color: #f0f6fc;
}

.tile-desc {
  font-size: 0.72rem;
  color: #8b949e;
  line-height: 1.3;
}

.tile-chevron {
  font-size: 0.88rem;
  color: #8b949e;
  transition: all 0.18s ease;
  flex-shrink: 0;
}

.tg-action-tile:hover .tile-chevron {
  color: #ffffff;
  transform: translateX(3px);
}

/* Specific Tile Styling Accents */
.tile-contacts {
  border-left: 3px solid #22c55e;
}
.tile-contacts .tile-icon-box {
  background: rgba(34, 197, 94, 0.15);
}
.tile-contacts:hover {
  border-color: #22c55e;
}
.tile-contacts:hover .tile-title {
  color: #4ade80;
}

.tile-ptt {
  border-left: 3px solid #f59e0b;
}
.tile-ptt .tile-icon-box {
  background: rgba(245, 158, 11, 0.15);
}
.tile-ptt:hover {
  border-color: #f59e0b;
}
.tile-ptt:hover .tile-title {
  color: #fbbf24;
}

.tile-memory {
  border-left: 3px solid #a855f7;
}
.tile-memory .tile-icon-box {
  background: rgba(168, 85, 247, 0.15);
}
.tile-memory:hover {
  border-color: #a855f7;
}
.tile-memory:hover .tile-title {
  color: #c084fc;
}

.tile-direct {
  border-left: 3px solid #00e5ff;
}
.tile-direct .tile-icon-box {
  background: rgba(0, 229, 255, 0.15);
}
.tile-direct:hover {
  border-color: #00e5ff;
}
.tile-direct:hover .tile-title {
  color: #00e5ff;
}

.tile-info {
  border-left: 3px solid #38bdf8;
}
.tile-info .tile-icon-box {
  background: rgba(56, 189, 248, 0.15);
}
.tile-info:hover {
  border-color: #38bdf8;
}
.tile-info:hover .tile-title {
  color: #38bdf8;
}

.tg-action-menu-footer {
  padding: 10px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: flex-end;
  background: #161b22;
}

/* 2. Quick Memory Picker Modal */
.quick-mem-picker-card {
  max-width: 480px;
  width: 94%;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(168, 85, 247, 0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: auto;
  animation: popIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.quick-mem-picker-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quick-mem-picker-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.quick-mem-picker-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #c084fc;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.quick-mem-picker-hint {
  font-size: 0.75rem;
  color: #8b949e;
}

/* 3. Direct Call Modal */
.direct-call-card {
  max-width: 480px;
  width: 94%;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 229, 255, 0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: auto;
  animation: popIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.direct-call-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.direct-call-routing-panel {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  background: rgba(22, 27, 34, 0.75);
  border: 1px solid rgba(0, 229, 255, 0.25);
  border-radius: 8px;
  padding: 12px;
}

.direct-call-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 4px 12px;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 8px;
  font-size: 0.75rem;
  color: #c9d1d9;
  line-height: 1.35;
}

.direct-call-note-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.direct-call-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #161b22;
}

.quick-assign-modal {
  max-width: 520px;
  width: 94%;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75), 0 0 20px rgba(0, 240, 255, 0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: auto;
  transition: width 0.22s cubic-bezier(0.16, 1, 0.3, 1), max-width 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
  .quick-assign-modal {
    max-width: 780px;
    width: 780px;
  }
}

.quick-assign-modal .modal-header {
  flex-shrink: 0;
  padding: 12px 18px 10px;
  border-bottom: 1px solid #21262d;
  background: #161b22;
  box-sizing: border-box;
  z-index: 2;
}

.quick-assign-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quick-assign-body::-webkit-scrollbar,
.bm-pills-scroll-box::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.quick-assign-body::-webkit-scrollbar-track,
.bm-pills-scroll-box::-webkit-scrollbar-track {
  background: rgba(13, 17, 23, 0.5);
  border-radius: 3px;
}

.quick-assign-body::-webkit-scrollbar-thumb,
.bm-pills-scroll-box::-webkit-scrollbar-thumb {
  background: #30363d;
  border-radius: 3px;
}

.quick-assign-body::-webkit-scrollbar-thumb:hover,
.bm-pills-scroll-box::-webkit-scrollbar-thumb:hover {
  background: #58a6ff;
}

.quick-assign-target-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.quick-assign-target-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.quick-assign-target-pill.is-id {
  color: #ffffff !important;
  background: rgba(159, 248, 191, 0.16) !important;
  border-color: rgba(159, 248, 191, 0.5) !important;
}

.quick-assign-target-pill.is-id .dmr-id-text {
  color: #9ff8bf !important;
}

.quick-assign-target-pill.is-tg {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

.quick-assign-target-name {
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 600;
}

.quick-assign-instruction {
  font-size: 0.84rem;
  color: #8b949e;
  margin-bottom: 12px;
}

.quick-assign-routing-panel {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(56, 189, 248, 0.06);
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-left: 3.5px solid #38bdf8 !important;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0;
  box-sizing: border-box;
}

.quick-assign-routing-panel .gw-ctrl-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.94rem;
  color: #c9d1d9;
}

.quick-assign-routing-panel .gw-ctrl-group label,
.quick-assign-routing-panel label {
  color: #38bdf8;
  font-weight: 700;
}

.quick-assign-routing-panel .gw-hotspot-select {
  padding: 5px 10px;
  font-size: 0.92rem;
  background: #0d1117;
  border: 1px solid #30363d;
  color: #e6edf3;
  border-radius: 6px;
  min-width: 140px;
}

.quick-assign-routing-panel .btn-save-contacts-gw {
  margin-left: auto !important;
}

@media (max-width: 600px) {
  .quick-assign-routing-panel {
    gap: 8px;
    padding: 8px 10px;
  }
  .quick-assign-routing-panel .gw-ctrl-group {
    font-size: 0.88rem;
    gap: 6px;
  }
  .quick-assign-routing-panel .gw-hotspot-select {
    min-width: 110px;
    font-size: 0.88rem;
    padding: 4px 8px;
  }
}

.quick-assign-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
  padding-right: 2px;
  flex-shrink: 0;
}

.quick-assign-hs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 9px;
  transition: border-color 0.18s, background 0.18s;
}

.quick-assign-hs-row:hover {
  border-color: #388bfd;
  background: #121720;
}

.quick-assign-hs-row.is-active {
  border-color: rgba(56, 139, 253, 0.6);
  background: rgba(56, 139, 253, 0.08);
}

.quick-assign-hs-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.quick-assign-hs-status {
  font-size: 0.72rem;
  line-height: 1;
  flex-shrink: 0;
}

.quick-assign-hs-status.online {
  color: #238636;
  text-shadow: 0 0 6px rgba(35, 134, 54, 0.7);
}

.quick-assign-hs-status.offline {
  color: #484f58;
}

.quick-assign-hs-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.quick-assign-hs-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: #e6edf3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quick-assign-hs-sub {
  font-size: 0.74rem;
  color: #8b949e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quick-assign-hs-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: 12px;
}

.btn-quick-assign-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  height: 36px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  user-select: none;
}

.btn-quick-assign-slot.btn-ts1 {
  background: rgba(56, 139, 253, 0.14);
  border-color: rgba(56, 139, 253, 0.4);
  color: #58a6ff;
}

.btn-quick-assign-slot.btn-ts1:hover {
  background: #1f6feb;
  color: #ffffff;
  border-color: #58a6ff;
  box-shadow: 0 0 12px rgba(56, 139, 253, 0.5);
}

.btn-quick-assign-slot.btn-ts2 {
  background: rgba(35, 134, 54, 0.16);
  border-color: rgba(35, 134, 54, 0.45);
  color: #3fb950;
}

.btn-quick-assign-slot.btn-ts2:hover {
  background: #238636;
  color: #ffffff;
  border-color: #3fb950;
  box-shadow: 0 0 12px rgba(63, 185, 80, 0.5);
}

.btn-quick-assign-slot:active {
  transform: scale(0.95);
}

.quick-assign-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  border-top: 1px solid #21262d;
  background: #161b22;
  box-sizing: border-box;
  z-index: 2;
}

.quick-assign-footer .modal-footer-hint {
  font-size: 0.75rem;
  color: #8b949e;
  line-height: 1.35;
  text-align: left;
  flex: 1;
}

/* Quick Memory Section M1 - M5 */
.quick-mem-section {
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-left: 3.5px solid #f59e0b !important;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0;
  box-sizing: border-box;
}

.quick-mem-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.quick-mem-icon {
  font-size: 0.9rem;
}

.quick-mem-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #fbbf24;
  white-space: nowrap;
}

.quick-mem-hs-select-wrap {
  display: flex;
  align-items: center;
  
  flex-wrap: wrap;
}

.btn-quick-mem-hs-tab {
  background: #161b22;
  border: 1px solid #30363d;
  color: #8b949e;
  font-size: 0.70rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.2;
  user-select: none;
}

.btn-quick-mem-hs-tab:hover {
  border-color: #ff6700;
  color: #c9d1d9;
}

.btn-quick-mem-hs-tab.active {
  background: rgba(255, 103, 0, 0.18);
  border-color: #ff6700;
  color: #ff6700;
  font-weight: 700;
  box-shadow: 0 0 8px rgba(255, 103, 0, 0.25);
}

.quick-mem-hint {
  font-size: 0.72rem;
  color: rgba(251, 191, 36, 0.75);
  margin-left: auto;
  white-space: nowrap;
}

.quick-mem-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.btn-quick-mem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 3px 2px;
  background: rgba(13, 17, 23, 0.7);
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.btn-quick-mem:hover {
  background: rgba(245, 158, 11, 0.15);
  border-color: #f59e0b;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
  transform: translateY(-1px);
}

.btn-quick-mem:active {
  transform: scale(0.94);
}

.btn-quick-mem-label {
  font-size: 0.82rem;
  font-weight: 800;
  color: #ff6700;
  line-height: 1.1;
}

.btn-quick-mem-val {
  font-size: 0.58rem;
  font-weight: 600;
  color: #8b949e;
  line-height: 1;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.btn-quick-mem.has-data {
  border-color: rgba(255, 103, 0, 0.45);
  background: rgba(255, 103, 0, 0.05);
}

.btn-quick-mem.has-data .btn-quick-mem-val {
  color: #ffd074;
}

.btn-cancel-quick-assign {
  min-width: 90px;
  height: 36px;
  padding: 0 16px;
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #c9d1d9;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  flex-shrink: 0;
}

.btn-cancel-quick-assign:hover {
  background: #30363d;
  color: #ffffff;
  border-color: #f85149;
  box-shadow: 0 0 8px rgba(248, 81, 73, 0.25);
}

.btn-cancel-quick-assign:active {
  transform: scale(0.96);
}

/* ==========================================================
   QUICK ASSIGN MODAL: CONTACT INTEGRATION SECTION
   ========================================================== */
.quick-contact-section {
  background: rgba(168, 85, 247, 0.06);
  border: 1px solid rgba(168, 85, 247, 0.28);
  border-left: 3.5px solid #a855f7 !important;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0;
  box-sizing: border-box;
}

.quick-contact-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.quick-contact-title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.quick-contact-icon {
  font-size: 0.90rem;
}

.quick-contact-title {
  font-size: 0.80rem;
  font-weight: 700;
  color: #c084fc;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.quick-contact-badge {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  line-height: 1.2;
}

.quick-contact-badge.is-saved {
  background: rgba(46, 160, 67, 0.2);
  color: #3fb950;
  border: 1px solid rgba(46, 160, 67, 0.4);
}

.quick-contact-badge.is-new {
  background: rgba(255, 103, 0, 0.15);
  color: #ff6700;
  border: 1px solid rgba(255, 103, 0, 0.35);
}

.quick-contact-hint {
  font-size: 0.72rem;
  color: rgba(192, 132, 252, 0.75);
  white-space: nowrap;
}

/* Already in contacts state */
.quick-contact-exists-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 10px;
  background: rgba(46, 160, 67, 0.1);
  border: 1px solid rgba(46, 160, 67, 0.3);
  border-radius: 6px;
  min-height: 32px;
  box-sizing: border-box;
}

.quick-contact-exists-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: #c9d1d9;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-contact-check {
  color: #3fb950;
  font-weight: 800;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.quick-contact-exists-msg strong {
  color: #58a6ff;
  font-weight: 600;
}

.quick-contact-folder-pill {
  font-size: 0.72rem;
  background: #21262d;
  color: #8b949e;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 4px;
}

.btn-quick-contact-edit {
  padding: 3px 9px;
  font-size: 0.78rem;
  background: #21262d;
  border: 1px solid #30363d;
  color: #c9d1d9;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.btn-quick-contact-edit:hover {
  border-color: #58a6ff;
  color: #58a6ff;
  background: #30363d;
}

/* Quick Add Form state */
.quick-contact-add-box {
  display: block;
}

.quick-contact-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.quick-contact-input-col {
  min-width: 0;
}

.quick-contact-input-col.col-name {
  flex: 2 1 150px;
}

.quick-contact-input-col.col-callsign {
  flex: 1 1 85px;
  max-width: 110px;
}

.quick-contact-input-col.col-folder {
  flex: 1.5 1 130px;
}

.quick-contact-input {
  width: 100%;
  height: 30px;
  padding: 3px 8px;
  font-size: 0.82rem;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #e6edf3;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.quick-contact-input:focus {
  border-color: #ff6700;
  outline: none;
}

.quick-contact-input.uppercase {
  text-transform: uppercase;
}

.quick-contact-select {
  width: 100%;
  height: 30px;
  padding: 3px 6px;
  font-size: 0.80rem;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #e6edf3;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color 0.15s;
}

.quick-contact-select:focus {
  border-color: #ff6700;
  outline: none;
}

.quick-contact-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.btn-quick-contact-add {
  height: 30px;
  padding: 0 10px;
  font-size: 0.80rem;
  font-weight: 600;
  background: #238636;
  border: 1px solid #2ea043;
  border-radius: 6px;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  
  white-space: nowrap;
  transition: all 0.15s ease;
}

.btn-quick-contact-add:hover {
  background: #2ea043;
  box-shadow: 0 0 8px rgba(46, 160, 67, 0.4);
}

.btn-quick-contact-add:active {
  transform: scale(0.96);
}

.btn-quick-contact-full {
  height: 30px;
  width: 30px;
  padding: 0;
  font-size: 0.95rem;
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #8b949e;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.btn-quick-contact-full:hover {
  border-color: #8b949e;
  color: #c9d1d9;
  background: #30363d;
}

@media (max-width: 600px) {
  .quick-contact-row {
    gap: 6px;
  }
  .quick-contact-input-col.col-name {
    flex: 1 1 100%;
  }
  .quick-contact-input-col.col-callsign {
    flex: 1 1 calc(50% - 3px);
    max-width: none;
  }
  .quick-contact-input-col.col-folder {
    flex: 1 1 calc(50% - 3px);
  }
  .quick-contact-actions {
    width: 100%;
    margin-top: 2px;
  }
  .btn-quick-contact-add {
    flex: 1;
    justify-content: center;
  }
}

/* ==========================================================
   QUICK MEMORY BUTTONS BAR (M1 - M5) ON TRANSCEIVER CARD
   ========================================================== */
.quick-mem-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  
  width: 100%;
  margin-top: 6px;
  box-sizing: border-box;
}

.btn-card-mem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 3px 2px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  min-width: 0;
  overflow: hidden;
}

.btn-card-mem:hover {
  background: #21262d;
  border-color: #ff6700;
  box-shadow: 0 0 8px rgba(255, 103, 0, 0.35);
  transform: translateY(-1px);
}

.btn-card-mem:active {
  transform: scale(0.95);
}

.btn-card-mem-top,
.btn-quick-mem-top {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}

.btn-card-mem-top .mem-tag,
.btn-quick-mem-top .mem-tag {
  font-size: 0.72rem;
  font-weight: 800;
  color: #ff6700; /* Xiaomi orange */
}

.btn-card-mem-top .mem-id,
.btn-quick-mem-top .mem-id {
  font-size: 0.72rem;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-card-mem.is-id .mem-id,
.btn-quick-mem.is-id .mem-id,
.btn-card-mem-top .mem-id.is-id,
.btn-quick-mem-top .mem-id.is-id {
  color: #9ff8bf !important;
}

.btn-card-mem.is-tg .mem-id,
.btn-quick-mem.is-tg .mem-id,
.btn-card-mem-top .mem-id.is-tg,
.btn-quick-mem-top .mem-id.is-tg {
  color: #ffffff !important;
}

.btn-card-mem-desc,
.btn-quick-mem-desc {
  font-size: 0.58rem;
  font-weight: 500;
  color: #8b949e; /* светло-серый */
  line-height: 1.1;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: center;
}

.btn-card-mem.has-data {
  border-color: rgba(255, 103, 0, 0.4);
  background: #0f141c;
}

.btn-card-mem.has-data:hover {
  border-color: #ff6700;
  background: #181e28;
}

.radio-container.collapsed .quick-mem-bar {
  display: none !important;
}

@media (max-width: 480px) {
  html, body {
    background-size: 380px 380px;
  }
  .quick-mem-bar {
    gap: 2px;
    margin-top: 4px;
  }
  .btn-card-mem {
    min-height: 32px;
    padding: 2px 1px;
    border-radius: 4px;
  }
  .btn-card-mem-top .mem-tag {
    font-size: 0.65rem;
  }
  .btn-card-mem-top .mem-id {
    font-size: 0.65rem;
  }
  .btn-card-mem-desc {
    font-size: 0.52rem;
  }
  .bg-selection-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .bg-option-preview {
    height: 46px;
  }
  .bg-option-title {
    font-size: 0.72rem;
  }
}

/* Background Wallpaper Selection in Settings */
.bg-selection-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 6px;
}

.bg-option-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  position: relative;
  user-select: none;
}

.bg-option-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 103, 0, 0.5);
}

.bg-option-card input[type="radio"] {
  position: absolute;
  top: 6px;
  right: 6px;
  accent-color: #ff6700;
  cursor: pointer;
  width: 14px;
  height: 14px;
}

.bg-option-card.active,
.bg-option-card:has(input[type="radio"]:checked) {
  border-color: #ff6700;
  background: rgba(255, 103, 0, 0.08);
  box-shadow: 0 0 10px rgba(255, 103, 0, 0.2);
}

.bg-option-preview {
  width: 100%;
  height: 50px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg-preview-pattern {
  background: #0f1115 url('/static/img/bg-pattern-night.jpg') repeat center center;
  background-size: 140px;
  cursor: pointer;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pattern-picker-icon {
  font-size: 1.1rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
  pointer-events: none;
  transition: transform 0.18s ease;
  z-index: 2;
}

.bg-preview-pattern:hover .pattern-picker-icon,
.bg-option-card:hover .pattern-picker-icon {
  transform: scale(1.22);
}

.bg-preview-pattern1 {
  background: #0f1115 url('/static/img/bg-pattern-night.jpg') repeat center center;
  background-size: 140px;
}

.bg-preview-pattern2 {
  background: #f4f6f8 url('/static/img/bg-pattern-day.jpg') repeat center center;
  background-size: 140px;
}

.bg-preview-color {
  background-color: #0f1115;
  cursor: pointer;
}

.bg-preview-color input[type="color"] {
  opacity: 0;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border: none;
}

.bg-option-title {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.2;
}

.bg-custom-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.btn-bg-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.btn-bg-upload {
  background: rgba(56, 139, 253, 0.15);
  border: 1px solid rgba(56, 139, 253, 0.45);
  color: #58a6ff;
  flex: 1;
}

.btn-bg-upload:hover {
  background: rgba(56, 139, 253, 0.25);
  border-color: #58a6ff;
}

.btn-bg-upload:active {
  transform: scale(0.98);
}

.btn-bg-reset {
  background: rgba(248, 81, 73, 0.12);
  border: 1px solid rgba(248, 81, 73, 0.35);
  color: #f85149;
}

.btn-bg-reset:hover {
  background: rgba(248, 81, 73, 0.22);
  border-color: #f85149;
}

.btn-bg-reset:active {
  transform: scale(0.98);
}

/* Background Wallpaper Pattern Scale Controls */
.bg-scale-control {
  margin-top: 10px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.bg-scale-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.bg-scale-title {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
}

.bg-scale-value {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
}

.bg-scale-presets {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.btn-scale-preset {
  flex: 1;
  min-width: 65px;
  padding: 4px 6px;
  font-size: 0.75rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.btn-scale-preset:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
  border-color: #0969da;
}

.btn-scale-preset.active {
  background: #0969da;
  border-color: #0969da;
  color: #ffffff;
  font-weight: 600;
}

[data-theme="light"] .bg-scale-control {
  background: #f8fafc !important;
  border-color: #d0d7de !important;
}

[data-theme="light"] .bg-scale-title {
  color: #57606a !important;
}

[data-theme="light"] .bg-scale-value {
  color: #1f2328 !important;
}

[data-theme="light"] .btn-scale-preset {
  background: #ffffff !important;
  border-color: #d0d7de !important;
  color: #57606a !important;
}

[data-theme="light"] .btn-scale-preset:hover {
  background: #f3f4f6 !important;
  border-color: #0969da !important;
  color: #0969da !important;
}

[data-theme="light"] .btn-scale-preset.active {
  background: #0969da !important;
  border-color: #0969da !important;
  color: #ffffff !important;
}

/* ==========================================================
   BRANDMEISTER INFO EXTENSION (LONG-PRESS MODAL & VIEWER)
   ========================================================== */

/* 1. Quick Assign Modal: BrandMeister INFO Section (Direct Inline Summary) */
.quick-bm-info-section {
  background: rgba(34, 197, 94, 0.05);
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-left: 3.5px solid #22c55e !important;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0;
  box-sizing: border-box;
}

.quick-bm-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.quick-bm-info-title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.quick-bm-info-icon {
  font-size: 0.95rem;
}

.quick-bm-info-title {
  font-size: 0.80rem;
  font-weight: 700;
  color: #4ade80;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.quick-bm-info-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.quick-bm-info-hint {
  font-size: 0.70rem;
  color: rgba(74, 222, 128, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-refresh-bm-summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 5px;
  color: #8b949e;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.btn-refresh-bm-summary:hover {
  color: #4ade80;
  border-color: #4ade80;
  background: rgba(34, 197, 94, 0.15);
}

.btn-refresh-bm-summary:active {
  transform: rotate(180deg);
}

.btn-refresh-bm-summary.is-loading svg {
  animation: bmSpin 0.9s linear infinite;
}

@keyframes bmSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Quick BM Summary Body */
.quick-bm-summary-body {
  min-height: 48px;
  box-sizing: border-box;
}

.bm-summary-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 8px;
  font-size: 0.76rem;
  color: #8b949e;
}

.bm-summary-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(88, 166, 255, 0.25);
  border-top-color: #58a6ff;
  border-radius: 50%;
  animation: bmSpin 0.8s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}

.bm-summary-empty {
  padding: 4px 12px;
  background: rgba(22, 27, 34, 0.6);
  border: 1px dashed #30363d;
  border-radius: 6px;
  font-size: 0.76rem;
  color: #8b949e;
  text-align: center;
}

.bm-summary-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Lead row for Call ID */
.bm-id-lead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(31, 111, 235, 0.08);
  border: 1px solid rgba(56, 139, 253, 0.25);
  border-radius: 6px;
}

.bm-callsign-badge {
  font-size: 0.96rem;
  font-weight: 800;
  color: #58a6ff;
  letter-spacing: 0.5px;
}

.bm-id-badge {
  font-size: 0.76rem;
  font-weight: 700;
  color: #9ff8bf;
  font-family: monospace;
  background: rgba(159, 248, 191, 0.1);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid rgba(159, 248, 191, 0.25);
}

.bm-user-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: #e6edf3;
}

.bm-user-loc {
  font-size: 0.72rem;
  color: #8b949e;
  margin-left: auto;
  white-space: nowrap;
}

/* Sub-sections inside BM Summary */
.bm-summary-section {
  display: flex;
  flex-direction: column;
  
}

.bm-summary-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.70rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #8b949e;
  letter-spacing: 0.3px;
}

.bm-summary-count {
  font-size: 0.68rem;
  color: #58a6ff;
}

/* Devices Chips Grid */
.bm-device-chips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 6px 8px;
  width: 100%;
}

.bm-device-chip {
  display: flex;
  flex-direction: column;
  padding: 6px 10px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
  font-size: 0.72rem;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.bm-device-chip:hover {
  border-color: rgba(56, 139, 253, 0.5);
  background: #1c2128;
}

.bm-chip-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.bm-chip-id-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  color: #e6edf3;
  font-family: monospace;
  font-size: 0.76rem;
  flex-shrink: 0;
}

.bm-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.bm-chip-dot.online {
  background: #3fb950;
  box-shadow: 0 0 6px #3fb950;
}

.bm-chip-dot.offline {
  background: #6e7681;
}

.bm-chip-master {
  color: #58a6ff;
  font-weight: 700;
  font-size: 0.68rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.bm-chip-details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.64rem;
  color: #8b949e;
  min-width: 0;
}

.bm-chip-hw {
  font-size: 0.63rem;
  color: #8b949e;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

.bm-chip-freq {
  color: #7ee787;
  font-family: monospace;
  font-weight: 600;
  font-size: 0.66rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Static talkgroup slots grid */
.bm-static-slots-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: 100%;
}

.quick-assign-modal.is-wide-modal .bm-static-slots-grid.has-both-slots {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.bm-slot-box {
  display: flex;
  flex-direction: column;
  
  background: rgba(13, 17, 23, 0.45);
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 6px 8px;
  min-width: 0;
  box-sizing: border-box;
}

.bm-slot-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(48, 54, 61, 0.6);
}

.bm-slot-box-title {
  display: flex;
  align-items: center;
  gap: 5px;
}

.bm-slot-badge {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(56, 139, 253, 0.18);
  border: 1px solid rgba(56, 139, 253, 0.4);
  color: #58a6ff;
  letter-spacing: 0.3px;
}

.bm-slot-badge.ts2 {
  background: rgba(255, 103, 0, 0.18);
  border-color: rgba(255, 103, 0, 0.4);
  color: #ffa657;
}

.bm-slot-count {
  font-size: 0.68rem;
  color: #8b949e;
  font-family: monospace;
}

.bm-pills-scroll-box {
  max-height: 180px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 2px;
}

/* Static talkgroup pills row */
.bm-pills-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  
}

.bm-slot-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #8b949e;
  margin-right: 2px;
}

.bm-mini-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.70rem;
  font-weight: 700;
  background: rgba(56, 139, 253, 0.12);
  border: 1px solid rgba(56, 139, 253, 0.32);
  color: #58a6ff;
}

.bm-mini-pill.ts2 {
  background: rgba(255, 103, 0, 0.12);
  border-color: rgba(255, 103, 0, 0.32);
  color: #ffa657;
}

.bm-mini-pill.is-active-target {
  background: rgba(255, 103, 0, 0.3) !important;
  border-color: #ff6700 !important;
  color: #ffffff !important;
  box-shadow: 0 0 8px rgba(255, 103, 0, 0.5) !important;
  font-weight: 800;
}

/* TG ID View Specifics */
.bm-tg-lead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(56, 139, 253, 0.08);
  border: 1px solid rgba(56, 139, 253, 0.25);
  border-radius: 6px;
}

.bm-tg-pill-lg {
  font-size: 0.92rem;
  font-weight: 800;
  color: #ff6700;
  letter-spacing: 0.4px;
}

.bm-tg-official-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: #e6edf3;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bm-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

.bm-badge-reg {
  background: rgba(46, 160, 67, 0.15);
  border: 1px solid rgba(46, 160, 67, 0.4);
  color: #3fb950;
}

.bm-badge-unreg {
  background: rgba(110, 118, 129, 0.15);
  border: 1px solid rgba(110, 118, 129, 0.35);
  color: #8b949e;
}

.bm-badge-sub {
  background: rgba(46, 160, 67, 0.18);
  border: 1px solid rgba(46, 160, 67, 0.5);
  color: #3fb950;
}

.bm-badge-notsub {
  background: rgba(210, 153, 34, 0.15);
  border: 1px solid rgba(210, 153, 34, 0.4);
  color: #d29922;
}

/* Hotspot Subscription & 1-Click Action Box */
.bm-hs-sub-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 7px 10px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
}

.bm-hs-sub-info {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.bm-hs-label {
  font-size: 0.72rem;
  color: #8b949e;
}

.bm-hs-name {
  font-size: 0.76rem;
  font-weight: 700;
  color: #c9d1d9;
}

.bm-action-btn-group {
  display: flex;
  align-items: center;
  gap: 5px;
}

.btn-bm-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  height: 26px;
  padding: 0 9px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  white-space: nowrap;
}

.btn-bm-act-add {
  background: rgba(56, 139, 253, 0.15);
  border: 1px solid rgba(56, 139, 253, 0.4);
  color: #58a6ff;
}

.btn-bm-act-add:hover {
  background: rgba(56, 139, 253, 0.3);
  border-color: #58a6ff;
  color: #ffffff;
  box-shadow: 0 0 8px rgba(56, 139, 253, 0.4);
}

.btn-bm-act-del {
  background: rgba(248, 81, 73, 0.15);
  border: 1px solid rgba(248, 81, 73, 0.4);
  color: #f85149;
}

.btn-bm-act-del:hover {
  background: rgba(248, 81, 73, 0.3);
  border-color: #f85149;
  color: #ffffff;
  box-shadow: 0 0 8px rgba(248, 81, 73, 0.4);
}

.btn-bm-act:active {
  transform: scale(0.95);
}

.btn-bm-act:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.bm-info-tg-pill.is-target-tg {
  background: rgba(255, 103, 0, 0.28) !important;
  border-color: #ff6700 !important;
  color: #ffffff !important;
  box-shadow: 0 0 10px rgba(255, 103, 0, 0.65) !important;
  font-weight: 800 !important;
  transform: scale(1.05);
}

.btn-bm-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  min-height: 48px;
  position: relative;
  overflow: hidden;
}

.btn-bm-info:hover:not(:disabled):not(.disabled) {
  background: rgba(56, 139, 253, 0.12);
  border-color: #58a6ff;
  box-shadow: 0 0 12px rgba(56, 139, 253, 0.35);
  transform: translateY(-1px);
}

.btn-bm-info:active:not(:disabled):not(.disabled) {
  transform: scale(0.97);
}

.btn-bm-info:disabled,
.btn-bm-info.disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  filter: grayscale(1) !important;
  pointer-events: none !important;
  border-color: #21262d !important;
  background: #0d1117 !important;
  box-shadow: none !important;
  transform: none !important;
}

.btn-bm-info:disabled .bm-info-btn-title,
.btn-bm-info.disabled .bm-info-btn-title {
  color: #6e7681 !important;
}

.btn-bm-info:disabled .bm-info-btn-sub,
.btn-bm-info.disabled .bm-info-btn-sub {
  color: #484f58 !important;
}

.bm-info-btn-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  line-height: 1;
}

.bm-info-btn-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.bm-info-btn-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #e6edf3;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bm-info-btn-sub {
  font-size: 0.65rem;
  color: #8b949e;
  line-height: 1.15;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 2. BrandMeister INFO Modal Viewer */
.bm-info-modal-content {
  max-width: 680px;
  width: 94%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: #11141a;
  border: 1px solid #30363d;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7);
  border-radius: 10px;
}

.bm-info-modal-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px;
  border-bottom: 1px solid #21262d;
  padding: 14px 18px;
  box-sizing: border-box;
  width: 100%;
}

.bm-info-modal-header .modal-title-group {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  
}

.bm-info-modal-header .modal-subtitle,
.modal-subtitle {
  font-size: 0.78rem;
  color: #8b949e;
  margin: 2px 0 0 0;
  line-height: 1.35;
  display: block;
}

.bm-info-modal-header .icon-btn {
  flex-shrink: 0;
  margin-left: auto;
  align-self: flex-start;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #c9d1d9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.15s ease;
}

.bm-info-modal-header .icon-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
}

.bm-info-badge-row {
  display: flex;
  align-items: center;
  margin-top: 7px;
  min-width: 0;
  width: 100%;
}

.bm-info-target-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 8px;
  background: rgba(56, 139, 253, 0.16);
  border: 1px solid rgba(56, 139, 253, 0.38);
  color: #58a6ff;
  margin-left: 0;
  max-width: 100%;
  box-sizing: border-box;
  line-height: 1.35;
  word-break: break-word;
}

.bm-info-target-badge.is-green {
  background: rgba(159, 248, 191, 0.14);
  border-color: rgba(159, 248, 191, 0.38);
  color: #9ff8bf;
}

.bm-info-target-badge.is-white {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #e6edf3;
}

.bm-info-modal-body {
  overflow-y: auto;
  padding: 14px 16px;
  max-height: 68vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bm-info-tabs-bar {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid #30363d;
  padding-bottom: 8px;
  margin-bottom: 4px;
}

.bm-info-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #8b949e;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.bm-info-tab:hover {
  background: rgba(88, 166, 255, 0.1);
  color: #c9d1d9;
  border-color: rgba(88, 166, 255, 0.25);
}

.bm-info-tab.active {
  background: rgba(88, 166, 255, 0.16);
  color: #58a6ff;
  border-color: #58a6ff;
  box-shadow: 0 0 10px rgba(88, 166, 255, 0.25);
}

.bm-info-tab svg {
  stroke: currentColor;
  flex-shrink: 0;
}

.bm-info-pane {
  display: none;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.bm-info-pane.active,
.bm-info-pane:not(.hidden) {
  display: flex;
}

.bm-info-pane.hidden {
  display: none !important;
}

.bm-info-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 16px;
  gap: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed #30363d;
  border-radius: 10px;
  margin: 8px 0;
}

.bm-info-empty .bm-empty-icon {
  font-size: 2.2rem;
  line-height: 1;
}

.bm-info-empty .bm-empty-title {
  font-size: 1rem;
  font-weight: 700;
  color: #c9d1d9;
}

.bm-info-empty .bm-empty-text {
  font-size: 0.84rem;
  color: #8b949e;
  max-width: 440px;
  line-height: 1.45;
}

.bm-info-cards-flow {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.bm-info-state-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 16px;
  text-align: center;
  gap: 12px;
}

.bm-info-spinner {
  font-size: 2.2rem;
  animation: bmPulse 1.2s infinite ease-in-out;
}

@keyframes bmPulse {
  0%, 100% { opacity: 0.5; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.1); }
}

.bm-info-loading-text {
  font-size: 0.95rem;
  color: #c9d1d9;
  font-weight: 600;
}

.bm-info-loading-sub {
  font-size: 0.74rem;
  color: #8b949e;
  font-family: monospace;
  word-break: break-all;
  max-width: 500px;
}

.bm-info-error-icon {
  font-size: 2.2rem;
}

.bm-info-error-title {
  font-size: 1rem;
  font-weight: 700;
  color: #f85149;
}

.bm-info-error-msg {
  font-size: 0.84rem;
  color: #8b949e;
  max-width: 480px;
  line-height: 1.4;
}

.bm-info-cards-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bm-info-card {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 12px 14px;
}

.bm-info-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(48, 54, 61, 0.7);
}

.bm-info-card-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: #58a6ff;
  display: flex;
  align-items: center;
  gap: 6px;
}

.bm-info-card-badge {
  font-size: 0.70rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  text-transform: uppercase;
}

.bm-info-badge-online {
  background: rgba(46, 160, 67, 0.2);
  border: 1px solid rgba(46, 160, 67, 0.5);
  color: #3fb950;
}

.bm-info-badge-offline {
  background: rgba(248, 81, 73, 0.2);
  border: 1px solid rgba(248, 81, 73, 0.5);
  color: #f85149;
}

.bm-info-props-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 14px;
}

.bm-info-prop-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bm-info-prop-label {
  font-size: 0.67rem;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-weight: 600;
}

.bm-info-prop-val {
  font-size: 0.84rem;
  color: #e6edf3;
  font-weight: 600;
  word-break: break-all;
}

.bm-info-prop-val.highlight {
  color: #ff6700;
}

.bm-info-prop-val.dmr-green {
  color: #9ff8bf;
}

.bm-info-prop-val.blue {
  color: #58a6ff;
}

.bm-info-tg-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}

.bm-info-tg-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(56, 139, 253, 0.14);
  border: 1px solid rgba(56, 139, 253, 0.35);
  color: #58a6ff;
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 0.72rem;
  font-weight: 600;
}

.bm-info-tg-pill.ts2-pill {
  background: rgba(255, 103, 0, 0.12);
  border-color: rgba(255, 103, 0, 0.35);
  color: #ffa657;
}

.bm-info-devices-wrap {
  overflow-x: auto;
  border: 1px solid #30363d;
  border-radius: 6px;
}

.bm-info-devices-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  min-width: 480px;
}

.bm-info-devices-table th {
  text-align: left;
  padding: 7px 10px;
  background: #0d1117;
  color: #8b949e;
  border-bottom: 1px solid #30363d;
  font-size: 0.69rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.bm-info-devices-table td {
  padding: 7px 10px;
  border-bottom: 1px solid rgba(48, 54, 61, 0.5);
  color: #c9d1d9;
}

.bm-info-devices-table tr:hover td {
  background: rgba(56, 139, 253, 0.07);
}

/* BM Device Timeslot Status Badges in Info Modal Table */
.bm-device-slots {
  display: inline-flex;
  align-items: center;
  
  white-space: nowrap;
  vertical-align: middle;
}

.bm-device-slot-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  user-select: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.bm-device-slot-pill.is-online {
  background: rgba(0, 38, 15, 0.75);
  border: 1px solid rgba(0, 214, 62, 0.5);
  color: #00ff4b;
}

.bm-device-slot-pill.is-offline {
  background: rgba(38, 12, 12, 0.75);
  border: 1px solid rgba(255, 77, 77, 0.45);
  color: #ff6b6b;
}

/* BM Repeater Technical Parameters & Location Section */
.bm-repeater-tech-section {
  margin-top: 14px;
  border-top: 1px solid rgba(48, 54, 61, 0.6);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bm-tech-section-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #58a6ff;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.bm-repeater-tech-card {
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 4px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.bm-tech-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(48, 54, 61, 0.6);
  flex-wrap: wrap;
}

.bm-tech-dev-badge {
  display: inline-flex;
  align-items: center;
  
  font-size: 0.82rem;
}

.bm-tech-hw-label {
  font-size: 0.74rem;
  font-weight: normal;
  color: #8b949e;
}

.bm-tech-status-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: #58a6ff;
  background: rgba(56, 139, 253, 0.15);
  border: 1px solid rgba(56, 139, 253, 0.35);
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.bm-tech-props-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 14px;
}

.bm-tech-desc-box {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid rgba(48, 54, 61, 0.4);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.bm-tech-desc-text {
  font-size: 0.78rem;
  color: #c9d1d9;
  line-height: 1.45;
  white-space: pre-line;
  word-break: break-word;
}

.bm-map-link {
  font-size: 0.72rem;
  font-weight: 700;
  color: #58a6ff;
  background: rgba(56, 139, 253, 0.15);
  border: 1px solid rgba(56, 139, 253, 0.35);
  padding: 2px 6px;
  border-radius: 4px;
  text-decoration: none;
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: all 0.15s ease;
}

.bm-map-link:hover {
  background: rgba(56, 139, 253, 0.3);
  text-decoration: underline;
}

.bm-web-link {
  color: #58a6ff;
  text-decoration: none;
  word-break: break-all;
}

.bm-web-link:hover {
  text-decoration: underline;
  color: #79c0ff;
}

.bm-user-date,
.bm-user-lastheard {
  font-size: 0.71rem;
  font-weight: 600;
  color: #8b949e;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.bm-info-cross-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255, 166, 0, 0.12);
  border: 1px solid rgba(255, 166, 0, 0.35);
  border-radius: 8px;
  padding: 10px 14px;
  color: #ffc107;
  font-size: 0.82rem;
  line-height: 1.45;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.bm-note-icon {
  font-size: 1.2rem;
  line-height: 1;
  flex-shrink: 0;
}

.bm-note-text {
  flex: 1;
}

.bm-info-action-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(35, 134, 54, 0.08);
  border-color: rgba(46, 160, 67, 0.4);
}

.bm-info-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.btn-bm-action-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #21262d;
  color: #c9d1d9;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  flex: 1 1 auto;
  min-width: 140px;
}

.btn-bm-action-secondary:hover {
  background: #30363d;
  color: #ffffff;
  border-color: #58a6ff;
  box-shadow: 0 0 8px rgba(88, 166, 255, 0.25);
}

.btn-bm-direct-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 18px;
  font-size: 0.92rem;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid #2ea043;
  background: #238636;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.btn-bm-direct-call:hover {
  background: #2ea043;
  border-color: #3fb950;
  box-shadow: 0 0 12px rgba(46, 160, 67, 0.5);
  transform: translateY(-1px);
}

.btn-bm-direct-call:active {
  transform: translateY(0);
}

.bm-info-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid #21262d;
  background: #13171e;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  box-sizing: border-box;
}

.bm-info-modal-footer .btn-bm-info-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 120px;
  height: 40px;
  padding: 0 18px;
  background: #1c2128;
  border: 1px solid rgba(88, 166, 255, 0.45);
  border-radius: 8px;
  color: #58a6ff;
  font-size: 0.90rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}

.bm-info-modal-footer .btn-bm-info-back .bm-back-icon {
  stroke: #58a6ff;
  flex-shrink: 0;
  transition: transform 0.2s ease, stroke 0.2s ease;
}

.bm-info-modal-footer .btn-bm-info-back:hover {
  background: #232933;
  border-color: #58a6ff;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(88, 166, 255, 0.35);
}

.bm-info-modal-footer .btn-bm-info-back:hover .bm-back-icon {
  stroke: #ffffff;
  transform: translateX(-2px);
}

.bm-info-modal-footer .btn-bm-info-back:active {
  transform: scale(0.97);
}

.bm-info-modal-footer .btn-bm-info-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 130px;
  height: 40px;
  padding: 0 24px;
  background: #1f6feb;
  border: 1px solid #388bfd;
  border-radius: 8px;
  color: #ffffff;
  font-size: 0.90rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(31, 111, 235, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}

.bm-info-modal-footer .btn-bm-info-close:hover {
  background: #388bfd;
  border-color: #58a6ff;
  box-shadow: 0 0 14px rgba(56, 139, 253, 0.55);
}

.bm-info-modal-footer .btn-bm-info-close:active {
  transform: scale(0.97);
}

@media (max-width: 480px) {
  .quick-bm-info-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .btn-bm-info {
    min-height: 42px;
    padding: 6px 8px;
  }
  .bm-info-props-grid {
    grid-template-columns: 1fr;
  }
  .bm-info-modal-footer {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    justify-content: space-between !important;
  }
  .bm-info-modal-footer .btn-bm-info-back,
  .bm-info-modal-footer .btn-bm-info-close {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 42px !important;
    font-size: 0.88rem !important;
    padding: 0 10px !important;
  }
}

/* =========================================================
   Theme Background Mode Switcher Tabs (Dark / Light)
   ========================================================= */
.theme-bg-mode-tabs {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 2px;
  gap: 3px;
  user-select: none;
}

.theme-bg-tab {
  background: transparent;
  border: none;
  padding: 4px 10px;
  font-size: 0.76rem;
  font-weight: 700;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
  user-select: none;
}

.theme-bg-tab:hover {
  color: var(--text-primary);
}

.theme-bg-tab.active {
  background: #30363d;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* =========================================================
   Light Theme (Day Mode) Complementary Ergonomic Palette
   ========================================================= */
[data-theme="light"],
.theme-light {
  color-scheme: light;
}

/* Chassis, Hotspot Cards & Panels */
[data-theme="light"] .radio-container {
  background: #ffffff;
  border-color: #d0d7de;
  box-shadow: 0 8px 24px rgba(140, 149, 159, 0.22), 0 1px 3px rgba(27, 31, 36, 0.08);
}

[data-theme="light"] .radio-container.active-hotspot {
  border-color: #0284c7;
  box-shadow: 0 0 18px rgba(2, 132, 199, 0.22), 0 10px 30px rgba(140, 149, 159, 0.25);
}

[data-theme="light"] .radio-container.collapsed {
  background: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.15) !important;
}

[data-theme="light"] .radio-container.collapsed:not(.live-collapsed) .hotspot-name-badge {
  background: #f3f4f6 !important;
  border-color: #d0d7de !important;
  color: #1f2328 !important;
}

[data-theme="light"] .radio-container.collapsed.live-collapsed {
  border-color: #10b981 !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25) !important;
}

[data-theme="light"] .radio-container.collapsed.live-collapsed .hotspot-collapse-btn {
  color: #059669 !important;
}

[data-theme="light"] .radio-container.collapsed.live-collapsed .hotspot-collapse-btn .collapse-icon {
  stroke: #059669 !important;
}

[data-theme="light"] .hotspot-name-badge {
  background: #f3f4f6 !important;
  border-color: #d0d7de !important;
  color: #1f2328 !important;
}

/* Header Buttons & Clocks */
[data-theme="light"] .header-clocks {
  background: #f6f8fa;
  border-color: #d0d7de;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .header-clock-line .clock-label {
  color: #57606a;
}

[data-theme="light"] .header-clock-line .clock-val {
  color: #0284c7;
}

[data-theme="light"] .fullscreen-toggle-btn {
  background: #f3f4f6;
  border-color: #d0d7de;
  color: #57606a;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .fullscreen-toggle-btn:hover {
  background: #e5e7eb;
  border-color: #0284c7;
  color: #0284c7;
}

[data-theme="light"] .fullscreen-toggle-btn.is-fullscreen {
  color: #16a34a;
  border-color: rgba(22, 163, 74, 0.5);
  background: rgba(22, 163, 74, 0.14);
}

[data-theme="light"] .header-settings-btn,
.theme-light .header-settings-btn {
  background: #f3f4f6;
  border-color: #d0d7de;
  color: #57606a;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .header-settings-btn:hover,
.theme-light .header-settings-btn:hover {
  background: #e5e7eb;
  border-color: #0284c7;
  color: #0284c7;
}

[data-theme="light"] .theme-toggle-btn {
  background: #f3f4f6;
  border-color: #d0d7de;
  color: #d97706;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .theme-toggle-btn:hover {
  background: #e5e7eb;
  border-color: #d97706;
  color: #b45309;
  box-shadow: 0 0 8px rgba(217, 119, 6, 0.25);
}

/* Brand Logo Switching (Dark / Light) */
[data-theme="light"] .brand-logo-img.brand-logo-dark {
  display: none !important;
}
[data-theme="light"] .brand-logo-img.brand-logo-light {
  display: block !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.12));
}

/* BM Server Info Banner & Ping Chart in Light Mode */
[data-theme="light"] .bm-info-banner {
  background: #f8fafc;
  border-color: #d0d7de;
}

[data-theme="light"] .bm-server-label-wrap {
  background: #238142 !important;
  border: 1px solid #1c6634 !important;
  color: #ffffff !important;
}

[data-theme="light"] .bm-server-label-wrap:hover {
  background: #2a944d !important;
  border-color: #38d672 !important;
}

[data-theme="light"] .bm-server-name {
  color: #ffffff !important;
}

[data-theme="light"] .bm-server-dropdown-arrow {
  color: #ffffff !important;
}

[data-theme="light"] .bm-server-select {
  background: transparent !important;
  border-color: transparent !important;
  color: transparent !important;
}

/* Ping Chart Wrap (White Background, Clean Border) */
[data-theme="light"] .bm-ping-chart-wrap {
  background: #ffffff !important;
  border: 1px solid #d0d7de !important;
  box-shadow: inset 0 1px 2px rgba(27, 31, 36, 0.04);
}

[data-theme="light"] .bm-ping-chart-wrap:hover {
  border-color: #0969da !important;
  background: #ffffff !important;
}

[data-theme="light"] .bm-ping-scale-badge {
  color: #475569 !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  opacity: 1 !important;
}

[data-theme="light"] .bm-ping-scale-badge:hover {
  color: #0969da !important;
  background: #ffffff !important;
  border-color: #0969da !important;
}

[data-theme="light"] .bm-ping-mode-badge,
[data-theme="light"] .bm-ping-mode-badge.mode-bm {
  color: #15803d !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  opacity: 1 !important;
}

[data-theme="light"] .bm-ping-mode-badge.mode-client {
  color: #0969da !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  opacity: 1 !important;
}

[data-theme="light"] .bm-ping-chart-wrap:hover .bm-ping-mode-badge {
  opacity: 1 !important;
  border-color: #94a3b8 !important;
}

[data-theme="light"] .bm-ping-tooltip {
  background: #ffffff !important;
  color: #1f2328 !important;
  border: 1px solid #d0d7de !important;
  box-shadow: 0 4px 12px rgba(27, 31, 36, 0.12) !important;
}

/* Main Display Screen: Complete Conversion to Light Theme */
[data-theme="light"] .radio-screen {
  background: #ffffff !important;
  border: 3px solid #cbd5e1 !important;
  /* 3D Sunken / Recessed effect for light theme */
  box-shadow:
    inset 3px 3px 7px rgba(0, 0, 0, 0.10),
    inset 1px 1px 3px rgba(0, 0, 0, 0.06),
    inset -2px -2px 5px rgba(255, 255, 255, 0.7),
    0 1px 4px rgba(140, 149, 159, 0.10) !important;
}

/* Screen Clock Bar in Light Theme */
[data-theme="light"] .screen-clock-bar {
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .screen-clock-item .clock-label {
  color: #57606a !important;
}
[data-theme="light"] .screen-clock-item .clock-val {
  color: #0284c7 !important;
  text-shadow: none !important;
}

/* Screen Top Bar */
[data-theme="light"] .screen-top-bar {
  color: #57606a !important;
}
[data-theme="light"] .callsign-display {
  color: #0f172a !important;
  text-shadow: none !important;
}
[data-theme="light"] .dmr-id-display {
  color: #475569 !important;
  text-shadow: none !important;
}
[data-theme="light"] .rtt-display {
  color: #64748b !important;
  text-shadow: none !important;
}
[data-theme="light"] .mode-standby {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}
[data-theme="light"] .mode-tx {
  background: #f1f5f9 !important;
  color: #b91c1c !important;
  border: 1px solid #cbd5e1 !important;
}
[data-theme="light"] .mode-rx {
  background: #f1f5f9 !important;
  color: #15803d !important;
  border: 1px solid #cbd5e1 !important;
}

/* VFO Rows (Dual Watch TS1 + TS2) in Light Mode */
[data-theme="light"] .vfo-row {
  border-color: #d0d7de !important;
  /* 3D Raised TS card effect for light theme */
  box-shadow:
    -2px -2px 4px rgba(255, 255, 255, 0.8),
    2px 2px 5px rgba(27, 31, 36, 0.12),
    0 2px 6px rgba(27, 31, 36, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
[data-theme="light"] .vfo-row::before {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
}
[data-theme="light"] .vfo-row:hover::before {
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%) !important;
}
[data-theme="light"] .vfo-row:hover {
  border-color: #0284c7 !important;
  box-shadow: 0 0 10px rgba(2, 132, 199, 0.2) !important;
}
[data-theme="light"] .vfo-row.active-ptt-vfo {
  border-color: #0284c7 !important;
  box-shadow: 0 0 12px rgba(2, 132, 199, 0.25) !important;
}
[data-theme="light"] .vfo-mute-btn {
  background: #dcfce7 !important;
  border: 1.5px solid #86efac !important;
  color: #15803d !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .vfo-mute-btn:hover {
  background: #bbf7d0 !important;
  border-color: #22c55e !important;
  color: #166534 !important;
}
[data-theme="light"] .vfo-mute-btn.muted {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #dc2626 !important;
}
[data-theme="light"] .vfo-mute-btn.muted:hover {
  background: #fecaca !important;
  border-color: #ef4444 !important;
  color: #b91c1c !important;
}

[data-theme="light"] .vfo-pan-tag.tag-l {
  color: #15803d !important;
}
[data-theme="light"] .vfo-pan-tag.tag-l.inactive {
  color: #94a3b8 !important;
}
[data-theme="light"] .vfo-pan-tag.tag-r {
  color: #0284c7 !important;
}
[data-theme="light"] .vfo-pan-tag.tag-r.inactive {
  color: #94a3b8 !important;
}

/* Light theme for VFO Stereo Pan Toggle */
[data-theme="light"] .vfo-pan-btn {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
  font-size: 0.78rem !important;
}

[data-theme="light"] .vfo-pan-btn:hover {
  background: #ffffff !important;
  border-color: #0284c7 !important;
}

[data-theme="light"] .vfo-pan-btn .pan-l {
  color: #009926 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
}

[data-theme="light"] .vfo-pan-btn .pan-r {
  color: #0284c7 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
}

[data-theme="light"] .vfo-pan-btn .pan-sep {
  color: #1f2328 !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
}

/* Single letter mode (only L or only R): +2 пункта (0.88rem / 14px), centered */
[data-theme="light"] .vfo-pan-btn.pan-state-l .pan-l,
[data-theme="light"] .vfo-pan-btn.pan-state-l .pan-single,
[data-theme="light"] .vfo-pan-btn .pan-l.pan-single {
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  color: #009926 !important;
}

[data-theme="light"] .vfo-pan-btn.pan-state-r .pan-r,
[data-theme="light"] .vfo-pan-btn.pan-state-r .pan-single,
[data-theme="light"] .vfo-pan-btn .pan-r.pan-single {
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  color: #0284c7 !important;
}

[data-theme="light"] .vfo-pan-btn.pan-state-l {
  border-color: rgba(0, 153, 38, 0.5) !important;
  background: #f0fdf4 !important;
}

[data-theme="light"] .vfo-pan-btn.pan-state-r {
  border-color: rgba(2, 132, 199, 0.5) !important;
  background: #f0f9ff !important;
}

[data-theme="light"] .vfo-pan-btn.pan-state-lr {
  border-color: #cbd5e1 !important;
}

/* VFO Typography (Zero White Text) */
[data-theme="light"] .vfo-caller-call {
  color: #0f172a !important;
  text-shadow: none !important;
}
[data-theme="light"] .vfo-caller-call[data-radio-id]:hover {
  color: #0284c7 !important;
}
[data-theme="light"] .vfo-caller-id,
[data-theme="light"] .ts-caller-id,
[data-theme="light"] .vfo-caller-id .dmr-id-text,
[data-theme="light"] .ts-caller-id .dmr-id-text {
  color: #064e3b !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}
[data-theme="light"] .vfo-caller-id,
[data-theme="light"] .ts-caller-id {
  background: rgba(6, 78, 59, 0.08) !important;
  border-color: rgba(6, 78, 59, 0.35) !important;
}
[data-theme="light"] .vfo-caller-id:hover,
[data-theme="light"] .ts-caller-id:hover {
  background: rgba(6, 78, 59, 0.18) !important;
  border-color: #064e3b !important;
  color: #022c22 !important;
  box-shadow: 0 0 6px rgba(6, 78, 59, 0.3) !important;
}
[data-theme="light"] .vfo-caller-country {
  color: #b45309 !important;
  text-shadow: none !important;
}
[data-theme="light"] .vfo-tg-text {
  color: #1f2328 !important;
  text-shadow: none !important;
}
[data-theme="light"] .vfo-tg-desc,
[data-theme="light"] .ts-tg-desc {
  color: #475569 !important;
  text-shadow: none !important;
}
[data-theme="light"] .vfo-tg-pill,
[data-theme="light"] .ts-tg-pill {
  color: #c2410c !important;
  background: #ffedd5 !important;
  border-color: #fdba74 !important;
  text-shadow: none !important;
}
[data-theme="light"] .vfo-tg-pill:hover,
[data-theme="light"] .ts-tg-pill:hover {
  background: #fed7aa !important;
  border-color: #fb923c !important;
  color: #9a3412 !important;
  box-shadow: 0 0 6px rgba(194, 65, 12, 0.3) !important;
}
[data-theme="light"] .vfo-tg-pill.is-id,
[data-theme="light"] .ts-tg-pill.is-id,
[data-theme="light"] .vfo-tg-pill.is-id .dmr-id-text,
[data-theme="light"] .ts-tg-pill.is-id .dmr-id-text {
  color: #064e3b !important;
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  text-shadow: none !important;
  font-weight: 700 !important;
}
[data-theme="light"] .vfo-tg-pill.is-id:hover,
[data-theme="light"] .ts-tg-pill.is-id:hover {
  background: #d1fae5 !important;
  border-color: #6ee7b7 !important;
  color: #022c22 !important;
}

/* Active RX in Light Mode */
[data-theme="light"] .vfo-row.vfo-rx-active::before {
  background: linear-gradient(180deg, #dcfce7 0%, #bbf7d0 100%) !important;
}
[data-theme="light"] .vfo-row.vfo-rx-active {
  border-color: #16a34a !important;
  box-shadow: 0 0 14px rgba(22, 163, 74, 0.3) !important;
}
[data-theme="light"] .vfo-row.vfo-rx-active .vfo-caller-call {
  color: #064e3b !important;
  text-shadow: none !important;
}
[data-theme="light"] .vfo-row.vfo-rx-active .vfo-caller-id,
[data-theme="light"] .vfo-row.vfo-rx-active .ts-caller-id,
[data-theme="light"] .vfo-row.vfo-rx-active .vfo-caller-id .dmr-id-text,
[data-theme="light"] .vfo-row.vfo-rx-active .ts-caller-id .dmr-id-text {
  color: #064e3b !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}
[data-theme="light"] .vfo-row.vfo-rx-active .vfo-caller-id,
[data-theme="light"] .vfo-row.vfo-rx-active .ts-caller-id {
  background: rgba(6, 78, 59, 0.15) !important;
  border-color: rgba(6, 78, 59, 0.45) !important;
}
[data-theme="light"] .vfo-row.vfo-rx-active .vfo-caller-country {
  color: #92400e !important;
  text-shadow: none !important;
}
[data-theme="light"] .vfo-row.vfo-rx-active .vfo-tg-text {
  color: #064e3b !important;
  text-shadow: none !important;
}
[data-theme="light"] .vfo-row.vfo-rx-active .vfo-tg-desc,
[data-theme="light"] .vfo-row.vfo-rx-active .ts-tg-desc {
  color: #047857 !important;
  text-shadow: none !important;
}
[data-theme="light"] .vfo-row.vfo-rx-active .vfo-tg-pill,
[data-theme="light"] .vfo-row.vfo-rx-active .ts-tg-pill {
  color: #9a3412 !important;
  background: #ffedd5 !important;
  border-color: #f97316 !important;
  text-shadow: none !important;
}
[data-theme="light"] .vfo-row.vfo-rx-active .vfo-tg-pill.is-id,
[data-theme="light"] .vfo-row.vfo-rx-active .ts-tg-pill.is-id {
  color: #065f46 !important;
  background: #ecfdf5 !important;
  border-color: #10b981 !important;
  text-shadow: none !important;
}

/* Active TX in Light Mode */
[data-theme="light"] .vfo-row.vfo-tx-active::before {
  background: linear-gradient(180deg, #fee2e2 0%, #fecaca 100%) !important;
}
[data-theme="light"] .vfo-row.vfo-tx-active {
  border-color: #ef4444 !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.3) !important;
}
[data-theme="light"] .vfo-row.vfo-tx-active .vfo-caller-call {
  color: #7f1d1d !important;
  text-shadow: none !important;
}
[data-theme="light"] .vfo-row.vfo-tx-active .vfo-tg-text {
  color: #7f1d1d !important;
  text-shadow: none !important;
}
[data-theme="light"] .vfo-row.vfo-tx-active .vfo-tg-desc,
[data-theme="light"] .vfo-row.vfo-tx-active .ts-tg-desc {
  color: #991b1b !important;
  text-shadow: none !important;
}
[data-theme="light"] .vfo-row.vfo-tx-active .vfo-tg-pill,
[data-theme="light"] .vfo-row.vfo-tx-active .ts-tg-pill {
  color: #7f1d1d !important;
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: #ef4444 !important;
  text-shadow: none !important;
}
[data-theme="light"] .vfo-row.vfo-tx-active .vfo-tg-pill.is-id,
[data-theme="light"] .vfo-row.vfo-tx-active .ts-tg-pill.is-id {
  color: #065f46 !important;
  background: #ecfdf5 !important;
  border-color: #10b981 !important;
  text-shadow: none !important;
}

/* VU Bar in Light Mode */
[data-theme="light"] .vfo-vu-bar {
  background-color: #e2e8f0 !important;
  background-image: none !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .vfo-vu-bar::after,
[data-theme="light"] .vu-meter-bar::after {
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent var(--vu-gap, 4px),
    var(--vu-tick-color, #64748b) var(--vu-gap, 4px),
    var(--vu-tick-color, #64748b) var(--vu-period, 5.142857px)
  ) !important;
}

/* AI Speech Transcriber in Light Mode */
[data-theme="light"] .vfo-caption-box {
  background: rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08) !important;
  color: #0f172a !important;
  font-weight: 600 !important;
  scrollbar-color: rgba(2, 132, 199, 0.35) transparent;
}

[data-theme="light"] .vfo-caption-box::-webkit-scrollbar-thumb {
  background: rgba(2, 132, 199, 0.3);
}

[data-theme="light"] .vfo-caption-box::-webkit-scrollbar-thumb:hover {
  background: rgba(2, 132, 199, 0.6);
}

[data-theme="light"] .vfo-caption-box.is-holding {
  box-shadow: inset 0 0 0 1.5px #0284c7, 0 0 10px rgba(2, 132, 199, 0.4) !important;
  border-color: rgba(2, 132, 199, 0.7) !important;
}

[data-theme="light"] .vfo-caption-stream:empty::before {
  color: #64748b !important;
  opacity: 0.7 !important;
}

[data-theme="light"] .vfo-call-tag {
  color: #b45309 !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

[data-theme="light"] .vfo-caption-badge {
  background: rgba(2, 132, 199, 0.1) !important;
  border-color: rgba(2, 132, 199, 0.28) !important;
}

[data-theme="light"] .vfo-caption-badge .flag-badge {
  border-color: rgba(0, 0, 0, 0.2) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .vfo-caption-callsign {
  color: #0284c7 !important;
}

[data-theme="light"] .vfo-lang-badge {
  background: #e2e8f0 !important;
  border: 1px solid #94a3b8 !important;
  color: #64748b !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .vfo-lang-badge:not(.transcribe-on) .lang-icon-mic {
  filter: grayscale(100%) opacity(0.5) !important;
}
[data-theme="light"] .vfo-lang-badge:not(.transcribe-on) .lang-code-text {
  opacity: 0.65;
}

[data-theme="light"] .vfo-lang-badge:hover {
  background: #cbd5e1 !important;
  border-color: #64748b !important;
  color: #334155 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] .vfo-lang-badge:not(.transcribe-on):hover .lang-icon-mic {
  filter: grayscale(100%) opacity(0.75) !important;
}
[data-theme="light"] .vfo-lang-badge:not(.transcribe-on):hover .lang-code-text {
  opacity: 0.9;
}

[data-theme="light"] .vfo-row.has-transcribe .vfo-lang-badge,
[data-theme="light"] .vfo-lang-badge.transcribe-on {
  background: #00c8f5 !important;
  border: 1px solid #ffffff !important;
  color: #002233 !important;
  box-shadow: 0 0 10px rgba(0, 200, 245, 0.85), 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="light"] .vfo-row.has-transcribe .vfo-lang-badge:hover,
[data-theme="light"] .vfo-lang-badge.transcribe-on:hover {
  background: #38d8ff !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 14px rgba(0, 200, 245, 1) !important;
}

[data-theme="light"] .vfo-row.has-transcribe .vfo-lang-badge .lang-icon-mic,
[data-theme="light"] .vfo-lang-badge.transcribe-on .lang-icon-mic,
[data-theme="light"] .vfo-lang-badge.has-lang .lang-icon-mic {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7)) !important;
}

[data-theme="light"] .vfo-row.has-transcribe .vfo-lang-badge .lang-code-text,
[data-theme="light"] .vfo-lang-badge.transcribe-on .lang-code-text,
[data-theme="light"] .vfo-lang-badge.has-lang .lang-code-text {
  color: #001c2b !important;
  font-weight: 800;
}

[data-theme="light"] .vfo-row.has-transcribe .vfo-lang-badge.has-lang,
[data-theme="light"] .vfo-lang-badge.has-lang {
  background: #00d4ff !important;
  border: 1px solid #ffffff !important;
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.95), 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="light"] .vfo-tts-badge {
  background: #e2e8f0 !important;
  border: 1px solid #94a3b8 !important;
  color: #64748b !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .vfo-tts-badge:not(.tts-on) .tts-icon-spk {
  filter: grayscale(100%) opacity(0.5) !important;
}
[data-theme="light"] .vfo-tts-badge:not(.tts-on) .tts-lang-code {
  opacity: 0.65;
}

[data-theme="light"] .vfo-tts-badge:hover {
  background: #cbd5e1 !important;
  border-color: #64748b !important;
  color: #334155 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] .vfo-tts-badge:not(.tts-on):hover .tts-icon-spk {
  filter: grayscale(100%) opacity(0.75) !important;
}
[data-theme="light"] .vfo-tts-badge:not(.tts-on):hover .tts-lang-code {
  opacity: 0.9;
}

[data-theme="light"] .vfo-tts-badge.tts-on {
  background: #00c8f5 !important;
  border: 1px solid #ffffff !important;
  color: #002233 !important;
  box-shadow: 0 0 10px rgba(0, 200, 245, 0.85), 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="light"] .vfo-tts-badge.tts-on:hover {
  background: #38d8ff !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 14px rgba(0, 200, 245, 1) !important;
}

[data-theme="light"] .vfo-tts-badge.tts-on .tts-icon-spk {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7)) !important;
}
[data-theme="light"] .vfo-tts-badge.tts-on .tts-lang-code {
  color: #002233 !important;
  font-weight: 800;
}

@keyframes vfo-ai-error-blink-light {
  0%, 49.9% {
    background-color: #ff2222;
    color: #000000;
    border-color: #ff0000;
    box-shadow: 0 0 10px rgba(255, 34, 34, 0.85);
    font-weight: 900;
  }
  50%, 100% {
    background-color: rgba(255, 255, 255, 0.92);
    color: #64748b;
    border-color: #cbd5e1;
    box-shadow: none;
    font-weight: 800;
  }
}

[data-theme="light"] .vfo-lang-badge.ai-error-blink {
  animation: vfo-ai-error-blink-light 1s linear 5 !important;
}

[data-theme="light"] .vfo-lang-badge.has-ai-error {
  border-color: #dc2626 !important;
  color: #dc2626 !important;
  background: #fef2f2 !important;
}


[data-theme="light"] .vfo-vu-vert-bar {
  background-color: #e2e8f0 !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .vfo-vu-vert-bar::after {
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent var(--vu-gap, 4px),
    var(--vu-tick-color, #64748b) var(--vu-gap, 4px),
    var(--vu-tick-color, #64748b) var(--vu-period, 5.142857px)
  ) !important;
}

[data-theme="light"] .vfo-vu-peak,
[data-theme="light"] .vfo-vu-vert-peak {
  background-color: #0f172a !important;
  box-shadow: 0 0 2px rgba(15, 23, 42, 0.6) !important;
}

[data-theme="light"] .vfo-vu-peak.vu-peak-overload,
[data-theme="light"] .vfo-vu-vert-peak.vu-peak-overload {
  background-color: #dc2626 !important;
  box-shadow: 0 0 4px rgba(220, 38, 38, 0.85) !important;
}

/* Screen Bottom Bar in Light Mode */
[data-theme="light"] .screen-bottom-bar {
  border-top: 1px solid #e2e8f0 !important;
}
[data-theme="light"] .status-badge.status-online,
[data-theme="light"] .status-badge.bm-online,
[data-theme="light"] .bm-badge.bm-online {
  background: #f1f5f9 !important;
  color: #15803d !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: none !important;
}

[data-theme="light"] .status-badge.status-offline,
[data-theme="light"] .status-badge.bm-offline,
[data-theme="light"] .bm-badge.bm-offline {
  background: #f1f5f9 !important;
  color: #b91c1c !important;
  border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .status-badge.status-connecting,
[data-theme="light"] .status-badge.bm-connecting,
[data-theme="light"] .bm-badge.bm-connecting {
  background: #f1f5f9 !important;
  color: #b45309 !important;
  border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .status-badge.status-error,
[data-theme="light"] .status-badge.bm-error,
[data-theme="light"] .bm-badge.bm-error {
  background: #f1f5f9 !important;
  color: #b91c1c !important;
  border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .status-badge.bm-standby,
[data-theme="light"] .bm-badge.bm-standby {
  background: #f1f5f9 !important;
  color: #b45309 !important;
  border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .status-badge-item:hover .status-badge,
[data-theme="light"] .status-badge-item:hover .bm-badge {
  border-color: #94a3b8 !important;
}

[data-theme="light"] .toggle-control .toggle-text {
  color: #475569 !important;
}

/* 3 Action Pairs: DSD-FME, Audio RX, Audio TX (Light Theme: ambe+ RX #97c6f2, Audio RX #96f1b1, Audio TX #f19a96) */
[data-theme="light"] .control-pair-btn {
  box-shadow: 0 1px 2px rgba(27, 31, 36, 0.08) !important;
}

/* 1. DSD-FME Pair: #97c6f2 */
[data-theme="light"] .dsd-pair .btn-action-trigger {
  background: #97c6f2 !important;
  border: 1px solid #72b0ea !important;
  color: #000000 !important;
}
[data-theme="light"] .dsd-pair .btn-action-trigger:hover {
  background: #7bb7ee !important;
  border-color: #559ee4 !important;
  color: #000000 !important;
}
[data-theme="light"] .dsd-pair .btn-action-trigger:active {
  background: #64a6e8 !important;
  color: #000000 !important;
}
[data-theme="light"] .dsd-pair .btn-mini-preset {
  background: #84bbf0 !important;
  border: 1px solid #72b0ea !important;
  border-left: 1px solid rgba(0, 0, 0, 0.15) !important;
  color: #000000 !important;
}
[data-theme="light"] .dsd-pair .btn-mini-preset:hover,
[data-theme="light"] .dsd-pair .btn-mini-preset.active,
[data-theme="light"] .control-pair-btn.dsd-pair.open .btn-mini-preset {
  background: #6eafee !important;
  color: #000000 !important;
  border-color: #559ee4 !important;
}

/* 2. Audio RX Pair: #96f1b1 */
[data-theme="light"] .audio-rx-pair .btn-action-trigger {
  background: #96f1b1 !important;
  border: 1px solid #6edc8f !important;
  color: #000000 !important;
}
[data-theme="light"] .audio-rx-pair .btn-action-trigger:hover {
  background: #7beaa0 !important;
  border-color: #52ce79 !important;
  color: #000000 !important;
}
[data-theme="light"] .audio-rx-pair .btn-action-trigger:active {
  background: #66e08d !important;
  color: #000000 !important;
}
[data-theme="light"] .audio-rx-pair .btn-mini-preset {
  background: #7fe89f !important;
  border: 1px solid #6edc8f !important;
  border-left: 1px solid rgba(0, 0, 0, 0.15) !important;
  color: #000000 !important;
}
[data-theme="light"] .audio-rx-pair .btn-mini-preset:hover,
[data-theme="light"] .audio-rx-pair .btn-mini-preset.active,
[data-theme="light"] .control-pair-btn.audio-rx-pair.open .btn-mini-preset {
  background: #6fe092 !important;
  color: #000000 !important;
  border-color: #52ce79 !important;
}

/* 3. Audio TX Pair: #f19a96 */
[data-theme="light"] .audio-tx-pair .btn-action-trigger {
  background: #f19a96 !important;
  border: 1px solid #e77d78 !important;
  color: #000000 !important;
}
[data-theme="light"] .audio-tx-pair .btn-action-trigger:hover {
  background: #ed827d !important;
  border-color: #df645e !important;
  color: #000000 !important;
}
[data-theme="light"] .audio-tx-pair .btn-action-trigger:active {
  background: #e56d68 !important;
  color: #000000 !important;
}
[data-theme="light"] .audio-tx-pair .btn-mini-preset {
  background: #ea8580 !important;
  border: 1px solid #e77d78 !important;
  border-left: 1px solid rgba(0, 0, 0, 0.15) !important;
  color: #000000 !important;
}
[data-theme="light"] .audio-tx-pair .btn-mini-preset:hover,
[data-theme="light"] .audio-tx-pair .btn-mini-preset.active,
[data-theme="light"] .control-pair-btn.audio-tx-pair.open .btn-mini-preset {
  background: #e2716c !important;
  color: #000000 !important;
  border-color: #df645e !important;
}

/* Preset dropdown menu in Light Mode */
[data-theme="light"] .mini-preset-menu {
  background: #238142 !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  box-shadow: 0 8px 24px rgba(27, 31, 36, 0.25) !important;
}
[data-theme="light"] .mini-preset-item {
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
}
[data-theme="light"] .dsd-menu .mini-preset-item:hover {
  background: #eff6ff !important;
  border-color: #72b0ea !important;
  color: #000000 !important;
}
[data-theme="light"] .dsd-menu .mini-preset-item.active {
  background: #97c6f2 !important;
  color: #000000 !important;
  border-color: #72b0ea !important;
}
[data-theme="light"] .audio-rx-menu .mini-preset-item:hover {
  background: #f0fdf4 !important;
  border-color: #6edc8f !important;
  color: #000000 !important;
}
[data-theme="light"] .audio-rx-menu .mini-preset-item.active {
  background: #96f1b1 !important;
  color: #000000 !important;
  border-color: #6edc8f !important;
}
[data-theme="light"] .audio-tx-menu .mini-preset-item:hover {
  background: #fef2f2 !important;
  border-color: #e77d78 !important;
  color: #000000 !important;
}
[data-theme="light"] .audio-tx-menu .mini-preset-item.active {
  background: #f19a96 !important;
  color: #000000 !important;
  border-color: #e77d78 !important;
}

/* Vertical Volume Strip in Light Mode */
[data-theme="light"] .vertical-volume-strip {
  background: linear-gradient(180deg, #f0fdf4 0%, #e2e8f0 100%) !important;
  border: 2px solid #86efac !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(34, 197, 94, 0.15) !important;
}
[data-theme="light"] .vertical-volume-strip::before {
  background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.6), transparent) !important;
}
[data-theme="light"] .volume-val-v {
  color: #ea580c !important;
}
[data-theme="light"] .volume-slider-v-wrap::before {
  background: rgba(255, 107, 43, 0.12) !important;
  border-color: rgba(255, 107, 43, 0.35) !important;
}
[data-theme="light"] .volume-slider-v-wrap::after {
  background: #ea580c !important;
  box-shadow: 0 0 4px rgba(234, 88, 12, 0.3) !important;
}

/* Light theme for Vertical Volume Mute Button */
[data-theme="light"] .volume-icon-v {
  background: #dcfce7 !important;
  border: 1.5px solid #86efac !important;
  color: #15803d !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .volume-icon-v:hover {
  background: #bbf7d0 !important;
  border-color: #22c55e !important;
  color: #166534 !important;
  transform: scale(1.08);
}
[data-theme="light"] .volume-icon-v.muted-channel,
[data-theme="light"] .volume-icon-v.muted-global,
[data-theme="light"] .volume-icon-v.muted-ptt {
  background: #fee2e2 !important;
  border: 1.5px solid #fca5a5 !important;
  color: #dc2626 !important;
  box-shadow: none !important;
}
[data-theme="light"] .volume-icon-v.muted-channel:hover,
[data-theme="light"] .volume-icon-v.muted-global:hover,
[data-theme="light"] .volume-icon-v.muted-ptt:hover {
  background: #fecaca !important;
  border-color: #ef4444 !important;
  color: #b91c1c !important;
}

/* Light theme for Volume Strip Settings Button */
[data-theme="light"] .volume-strip-settings-btn {
  background: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #475569 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .volume-strip-settings-btn:hover {
  background: #e2e8f0 !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
}

/* Quick Action Buttons (BM TG, Search TG, Call ID) in Light Mode */
[data-theme="light"] .quick-actions-row,
[data-theme="light"] .bm-tg-actions-row {
  margin-top: 4px;
}

[data-theme="light"] .btn-bm-action,
[data-theme="light"] .btn-tx-target {
  background: #ffffff !important;
  border: 2px solid #d0d7de !important;
  color: #1f2328 !important;
  box-shadow: 0 2px 5px rgba(27, 31, 36, 0.06) !important;
}

[data-theme="light"] .btn-bm-action .bm-action-label,
[data-theme="light"] .btn-tx-target .tx-target-label {
  color: inherit !important;
}

[data-theme="light"] .btn-tx-target .tx-target-icon {
  color: inherit !important;
}

/* 1. BM TG Button (Blue theme) */
[data-theme="light"] .btn-bm-action,
[data-theme="light"] .btn-bm-static-edit {
  border-color: rgba(9, 105, 218, 0.4) !important;
  color: #0969da !important;
}

[data-theme="light"] .btn-bm-action:hover,
[data-theme="light"] .btn-bm-static-edit:hover {
  background: #f0f7ff !important;
  border-color: #0969da !important;
  color: #0550ae !important;
  box-shadow: 0 4px 10px rgba(9, 105, 218, 0.18) !important;
  transform: translateY(-1px) !important;
}

/* 2. Search TG Button (Cyan / Sky theme) */
[data-theme="light"] .btn-tx-target.btn-tg-use {
  border-color: rgba(2, 132, 199, 0.45) !important;
  color: #0284c7 !important;
}

[data-theme="light"] .btn-tx-target.btn-tg-use:hover {
  background: #f0f9ff !important;
  border-color: #0284c7 !important;
  color: #0369a1 !important;
  box-shadow: 0 4px 10px rgba(2, 132, 199, 0.2) !important;
  transform: translateY(-1px) !important;
}

/* 3. Call ID Button (Amber / Warm Ochre theme) */
[data-theme="light"] .btn-tx-target.btn-call-id {
  border-color: rgba(217, 119, 6, 0.45) !important;
  color: #b45309 !important;
}

[data-theme="light"] .btn-tx-target.btn-call-id:hover {
  background: #fffbeb !important;
  border-color: #d97706 !important;
  color: #92400e !important;
  box-shadow: 0 4px 10px rgba(217, 119, 6, 0.2) !important;
  transform: translateY(-1px) !important;
}

[data-theme="light"] .btn-new-contact {
  background: #0969da !important;
  color: #ffffff !important;
  border-color: #0969da !important;
  box-shadow: 0 2px 5px rgba(9, 105, 218, 0.3) !important;
}
[data-theme="light"] .btn-new-contact:hover {
  background: #0550ae !important;
  box-shadow: 0 4px 10px rgba(9, 105, 218, 0.4) !important;
}

/* Light theme for Split TG--Manage--ID */
[data-theme="light"] .btn-srch-tg-id,
.theme-light .btn-srch-tg-id {
  background: #ffffff !important;
  border-color: #d0d7de !important;
  box-shadow: 0 1px 3px rgba(27, 31, 36, 0.08), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
[data-theme="light"] .btn-srch-tg-id:hover,
.theme-light .btn-srch-tg-id:hover {
  border-color: #0969da !important;
  box-shadow: 0 2px 6px rgba(9, 105, 218, 0.15) !important;
}
[data-theme="light"] .btn-srch-tg-id .srch-txt-tg,
.theme-light .btn-srch-tg-id .srch-txt-tg {
  color: #0284c7 !important;
}
[data-theme="light"] .btn-srch-tg-id .srch-seg-sep,
.theme-light .btn-srch-tg-id .srch-seg-sep {
  color: #8c959f !important;
}
[data-theme="light"] .btn-srch-tg-id .srch-txt-manage,
.theme-light .btn-srch-tg-id .srch-txt-manage {
  color: #16a34a !important;
}
[data-theme="light"] .btn-srch-tg-id .srch-txt-id,
.theme-light .btn-srch-tg-id .srch-txt-id {
  color: #d97706 !important;
}
[data-theme="light"] .btn-srch-tg-id .srch-seg-tg:hover,
.theme-light .btn-srch-tg-id .srch-seg-tg:hover {
  background: #f0f9ff !important;
}
[data-theme="light"] .btn-srch-tg-id .srch-seg-manage:hover,
.theme-light .btn-srch-tg-id .srch-seg-manage:hover {
  background: #f0fdf4 !important;
}
[data-theme="light"] .btn-srch-tg-id .srch-seg-id:hover,
.theme-light .btn-srch-tg-id .srch-seg-id:hover {
  background: #fffbeb !important;
}
[data-theme="light"] .ptt-side-top-row .btn-settings {
  background: #4b99fd !important;
  border-color: #3884e8 !important;
  color: #ffffff !important;
}
[data-theme="light"] .ptt-side-top-row .btn-settings:hover {
  background: #5ea6fd !important;
  color: #ffffff !important;
  border-color: #70b5ff !important;
  box-shadow: 0 3px 8px rgba(75, 153, 253, 0.35) !important;
}
[data-theme="light"] .ptt-side-top-row .btn-settings .settings-icon {
  stroke: #ffffff !important;
}
[data-theme="light"] .ptt-side-top-row .btn-settings:hover .settings-icon {
  stroke: #ffffff !important;
  transform: rotate(45deg);
}

[data-theme="light"] .btn-tx-target.btn-settings {
  border-color: #d0d7de !important;
  color: #57606a !important;
}
[data-theme="light"] .btn-tx-target.btn-settings:hover {
  background: #f6f8fa !important;
  color: #1f2328 !important;
  border-color: #0969da !important;
}
[data-theme="light"] .btn-ptt-side-half.btn-log-drawer {
  border-color: #d0d7de !important;
  color: #57606a !important;
}
[data-theme="light"] .btn-ptt-side-half.btn-log-drawer:hover {
  background: #f6f8fa !important;
  color: #1f2328 !important;
  border-color: #0969da !important;
}
[data-theme="light"] .btn-ptt-side-half.btn-log-drawer.active {
  background: #dafbe1 !important;
  color: #1a7f37 !important;
  border-color: #2da44e !important;
}
[data-theme="light"] .btn-log-quick {
  border-color: #d0d7de !important;
  color: #57606a !important;
}
[data-theme="light"] .btn-log-quick:hover {
  background: #f6f8fa !important;
  color: #1f2328 !important;
  border-color: #0969da !important;
}
[data-theme="light"] .btn-log-quick.active {
  background: #dafbe1 !important;
  color: #1a7f37 !important;
  border-color: #2da44e !important;
}
[data-theme="light"] .btn-my-contacts {
  border-color: rgba(217, 119, 6, 0.45) !important;
  color: #b45309 !important;
}
[data-theme="light"] .btn-my-contacts:hover {
  background: #fffbeb !important;
  border-color: #d97706 !important;
  color: #92400e !important;
}
[data-theme="light"] .contacts-modal-content,
[data-theme="light"] .contact-edit-modal-content,
[data-theme="light"] .call-proposal-modal-content {
  background: #ffffff !important;
  color: #1f2328 !important;
  border-color: #d0d7de !important;
}
[data-theme="light"] .contacts-gateway-panel,
[data-theme="light"] .proposal-card-hero,
[data-theme="light"] .proposal-routing-box {
  background: #f6f8fa !important;
  border-color: #d0d7de !important;
}

[data-theme="light"] .quick-assign-routing-panel {
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  border-left: 3.5px solid #0284c7 !important;
}
[data-theme="light"] .tree-row:hover {
  background: rgba(208, 215, 222, 0.4) !important;
}
[data-theme="light"] .tree-folder-title,
[data-theme="light"] .proposal-hero-name {
  color: #1f2328 !important;
}
[data-theme="light"] .tree-contact-name {
  color: #57606a !important;
}
[data-theme="light"] .type-opt-box {
  background: #f6f8fa !important;
  border-color: #d0d7de !important;
  color: #57606a !important;
}
[data-theme="light"] .type-opt input[type="radio"]:checked + .type-opt-box {
  background: #e7f2ff !important;
  border-color: #0969da !important;
  color: #0969da !important;
}
[data-theme="light"] .btn-new-folder {
  background: #f6f8fa !important;
  color: #24292f !important;
  border-color: #d0d7de !important;
}
[data-theme="light"] .btn-new-folder:hover {
  background: #f3f4f6 !important;
  border-color: #0969da !important;
  color: #0969da !important;
}
[data-theme="light"] .contacts-modal-footer {
  background: #f6f8fa !important;
  border-top-color: #d0d7de !important;
}
[data-theme="light"] .contact-edit-modal-content .modal-header,
[data-theme="light"] .call-proposal-modal-content .modal-header {
  border-bottom-color: #d0d7de !important;
}
[data-theme="light"] .contact-edit-modal-content .modal-header .icon-btn:hover,
[data-theme="light"] .call-proposal-modal-content .modal-header .icon-btn:hover {
  background: #e1e4e8 !important;
  color: #24292f !important;
}

/* Tree Folder Badge in Light Mode */
[data-theme="light"] .tree-folder-badge {
  background: #eef2f6 !important;
  color: #475569 !important;
  border: 1px solid #d0d7de !important;
}

/* Contacts Bottom Toolbar Buttons in Light Mode */
[data-theme="light"] .btn-contacts-gw-toggle {
  background: #ffffff !important;
  border-color: #d0d7de !important;
  color: #1f2328 !important;
}

[data-theme="light"] .btn-contacts-gw-toggle:hover {
  background: #f3f4f6 !important;
  border-color: #0969da !important;
  color: #0969da !important;
}

[data-theme="light"] .btn-icon-square {
  background: #ffffff !important;
  border-color: #d0d7de !important;
  color: #57606a !important;
}

[data-theme="light"] .btn-icon-square:hover {
  background: #f3f4f6 !important;
  border-color: #0969da !important;
  color: #1f2328 !important;
}

[data-theme="light"] .btn-tree-action:hover {
  background: #e1e4e8 !important;
  color: #1f2328 !important;
}

/* Hotspot & Slot Routing Panel Controls in Light Mode */
[data-theme="light"] .contacts-gateway-panel .gw-ctrl-group,
[data-theme="light"] .contacts-gateway-panel label {
  color: #1f2328 !important;
}

[data-theme="light"] .quick-assign-routing-panel .gw-ctrl-group,
[data-theme="light"] .quick-assign-routing-panel label {
  color: #0284c7 !important;
  font-weight: 700 !important;
}

[data-theme="light"] .gw-hotspot-select,
[data-theme="light"] select.gw-hotspot-select,
[data-theme="light"] #quickAssignHsSelect,
[data-theme="light"] #contactsGwHotspotSelect {
  background-color: #238142 !important;
  background: #238142 !important;
  border: 1px solid #1c6634 !important;
  color: #ffffff !important;
  color-scheme: dark;
}

[data-theme="light"] .gw-hotspot-select:hover,
[data-theme="light"] select.gw-hotspot-select:hover,
[data-theme="light"] #quickAssignHsSelect:hover,
[data-theme="light"] #contactsGwHotspotSelect:hover {
  background-color: #2a944d !important;
  background: #2a944d !important;
  border-color: #38d672 !important;
}

[data-theme="light"] .gw-hotspot-select:focus,
[data-theme="light"] select.gw-hotspot-select:focus,
[data-theme="light"] #quickAssignHsSelect:focus,
[data-theme="light"] #contactsGwHotspotSelect:focus {
  background-color: #238142 !important;
  background: #238142 !important;
  border-color: #4ade80 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.3) !important;
}

[data-theme="light"] .slot-toggle-group {
  border-color: #d0d7de !important;
  background: #eef2f6 !important;
}

[data-theme="light"] .btn-slot-toggle {
  background: #f6f8fa !important;
  color: #57606a !important;
  border: none !important;
}

[data-theme="light"] .btn-slot-toggle:hover {
  background: #eef2f6 !important;
  color: #1f2328 !important;
}

[data-theme="light"] .btn-slot-toggle.active {
  background: #1f883d !important;
  color: #ffffff !important;
}

/* Unified Search TG / Call ID Modal Tabs in Light Mode */
[data-theme="light"] .search-tab-btn {
  background: #f6f8fa !important;
  border-color: #d0d7de !important;
  color: #57606a !important;
}

[data-theme="light"] .search-tab-btn:hover {
  background: #f3f4f6 !important;
  border-color: #0969da !important;
  color: #1f2328 !important;
}

[data-theme="light"] .search-tab-btn.active {
  background: #e7f2ff !important;
  border-color: #0969da !important;
  color: #0969da !important;
  box-shadow: 0 1px 3px rgba(9, 105, 218, 0.15) !important;
}

[data-theme="light"] .search-tab-btn[data-tab="id"].active {
  background: #fff8c5 !important;
  border-color: #d4a72c !important;
  color: #9a6700 !important;
  box-shadow: 0 1px 3px rgba(212, 167, 44, 0.15) !important;
}

/* Active Pressed States */
[data-theme="light"] .btn-bm-action:active,
[data-theme="light"] .btn-bm-static-edit:active,
[data-theme="light"] .btn-tx-target:active {
  transform: translateY(1px) scale(0.98) !important;
  box-shadow: 0 1px 3px rgba(27, 31, 36, 0.12) !important;
}

/* PTT Button */
[data-theme="light"] .ptt-button {
  background: radial-gradient(circle, #ffffff 0%, #eaedf1 100%);
  border: 3px solid #cbd5e1;
  color: #1e293b;
  box-shadow: 0 8px 20px rgba(140, 149, 159, 0.35), inset 0 2px 4px rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .ptt-button .ptt-title {
  color: #0f172a;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .ptt-button .ptt-target-info {
  color: #ff6700;
  text-shadow: none;
}

[data-theme="light"] .ptt-button .ptt-target-info.is-tg {
  color: #ff6700 !important;
}

[data-theme="light"] .ptt-button .ptt-target-info.is-id .dmr-id-text,
[data-theme="light"] .ptt-button .ptt-target-info .dmr-id-text {
  color: #09825d !important;
}

[data-theme="light"] .ptt-button .ptt-target-desc {
  color: #64748b;
}

[data-theme="light"] .ptt-button .ptt-slot-badge {
  color: #64748b;
  opacity: 0.85;
}

[data-theme="light"] .ptt-button.hover-slot-1 .ptt-slot-badge.ptt-slot-ts1,
[data-theme="light"] .ptt-button.hover-slot-2 .ptt-slot-badge.ptt-slot-ts2 {
  color: #1e293b;
  opacity: 1;
}

[data-theme="light"] .ptt-button.active {
  background: radial-gradient(circle, #ef4444 0%, #b91c1c 100%) !important;
  border-color: #f87171 !important;
  color: #ffffff !important;
  box-shadow: 0 0 30px rgba(239, 68, 68, 0.7), inset 0 4px 8px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="light"] .ptt-button.active .ptt-title {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

[data-theme="light"] .ptt-button.active .ptt-slot-badge {
  color: rgba(255, 255, 255, 0.45) !important;
}

[data-theme="light"] .ptt-button.active.tx-slot-1 .ptt-slot-badge.ptt-slot-ts1,
[data-theme="light"] .ptt-button.active.tx-slot-2 .ptt-slot-badge.ptt-slot-ts2 {
  color: #ffffff !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.85) !important;
}

/* Side Buttons & Controls */
[data-theme="light"] .btn-ptt-side-half,
[data-theme="light"] .btn-ptt-side-tall {
  background: #f8fafc;
  border-color: #d0d7de;
  color: #1f2328;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .btn-ptt-side-half:hover,
[data-theme="light"] .btn-ptt-side-tall:hover {
  background: #eef2f6;
  border-color: #0284c7;
  color: #0284c7;
  box-shadow: 0 4px 10px rgba(2, 132, 199, 0.15);
}

[data-theme="light"] .quick-tg-box {
  background: #f8fafc;
  border-color: #d0d7de;
}

[data-theme="light"] .quick-tg-box:focus-within {
  border-color: #0284c7;
}

[data-theme="light"] .quick-tg-input {
  color: #d97706;
}

[data-theme="light"] .quick-tg-input::placeholder {
  color: #94a3b8;
}

[data-theme="light"] .btn-quick-tg-apply {
  background: #dcfce7 !important;
  border: 1.5px solid #86efac !important;
  color: #15803d !important;
}

[data-theme="light"] .btn-quick-tg-apply:hover {
  background: #bbf7d0 !important;
  border-color: #22c55e !important;
  color: #14532d !important;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.25) !important;
}

[data-theme="light"] .btn-quick-tg-apply:active {
  transform: scale(0.95) !important;
}

/* Memory Buttons M1 - M5 (Guaranteed Zero White Text) */
[data-theme="light"] .btn-card-mem,
[data-theme="light"] .btn-quick-mem {
  background: #ffffff !important;
  border-color: #d0d7de !important;
  color: #1f2328 !important;
  box-shadow: 0 1px 2px rgba(27, 31, 36, 0.04) !important;
}

[data-theme="light"] .btn-card-mem:hover,
[data-theme="light"] .btn-quick-mem:hover {
  background: #f6f8fa !important;
  border-color: #ff6700 !important;
  box-shadow: 0 0 8px rgba(255, 103, 0, 0.25) !important;
}

[data-theme="light"] .btn-card-mem.has-data,
[data-theme="light"] .btn-quick-mem.has-data {
  background: #ffffff !important;
  border-color: rgba(255, 103, 0, 0.55) !important;
}

[data-theme="light"] .btn-card-mem.has-data:hover,
[data-theme="light"] .btn-quick-mem.has-data:hover {
  background: #fff7ed !important;
  border-color: #ff6700 !important;
}

[data-theme="light"] .btn-card-mem-top .mem-tag,
[data-theme="light"] .btn-quick-mem-top .mem-tag {
  color: #ea580c !important;
}

/* Strict No White Text on mem-id */
[data-theme="light"] .btn-card-mem-top .mem-id,
[data-theme="light"] .btn-quick-mem-top .mem-id,
[data-theme="light"] .btn-card-mem.is-tg .mem-id,
[data-theme="light"] .btn-quick-mem.is-tg .mem-id,
[data-theme="light"] .btn-card-mem-top .mem-id.is-tg,
[data-theme="light"] .btn-quick-mem-top .mem-id.is-tg {
  color: #1f2328 !important;
  text-shadow: none !important;
}

[data-theme="light"] .btn-card-mem.is-id .mem-id,
[data-theme="light"] .btn-quick-mem.is-id .mem-id,
[data-theme="light"] .btn-card-mem-top .mem-id.is-id,
[data-theme="light"] .btn-quick-mem-top .mem-id.is-id,
[data-theme="light"] .btn-card-mem-top .mem-id .dmr-id-text,
[data-theme="light"] .btn-quick-mem-top .mem-id .dmr-id-text,
[data-theme="light"] .btn-card-mem .dmr-id-text,
[data-theme="light"] .btn-quick-mem .dmr-id-text {
  color: #09825d !important;
  text-shadow: none !important;
}

[data-theme="light"] .btn-card-mem-desc,
[data-theme="light"] .btn-quick-mem-desc {
  color: #57606a !important;
}

/* Live Activity Monitor */
[data-theme="light"] .live-monitor-container {
  background: var(--bg-monitor, #f2f7f4);
  border-color: var(--border-monitor, #c8d8cf);
  box-shadow: 0 10px 30px rgba(140, 149, 159, 0.2);
}

[data-theme="light"] .live-title-text {
  color: #1f2328;
}

[data-theme="light"] .log-filter-btn {
  background: #f3f4f6;
  border-color: #d0d7de;
  color: #57606a;
}

[data-theme="light"] .log-filter-btn:hover {
  border-color: #0284c7;
  color: #0284c7;
}

[data-theme="light"] .log-filter-btn.active {
  background: #ff5722;
  border-color: #ff5722;
  color: #fff;
}

[data-theme="light"] .log-hs-tab-btn {
  background: #f3f4f6;
  border-color: #d0d7de;
  color: #57606a;
}

[data-theme="light"] .log-hs-tab-btn:hover {
  border-color: #0284c7;
  color: #0284c7;
}

[data-theme="light"] .log-hs-tab-btn.active {
  background: rgba(2, 132, 199, 0.12);
  border-color: #0284c7;
  color: #0284c7;
}

[data-theme="light"] .log-search-input {
  background: var(--bg-monitor-table, #ffffff);
  border-color: var(--border-monitor, #c8d8cf);
  color: #1f2328;
}

[data-theme="light"] .log-search-input:focus {
  background: #ffffff;
  border-color: #0284c7;
}

[data-theme="light"] .live-table-header {
  background: var(--bg-monitor-header, #e8f1ec);
  border-bottom-color: var(--border-monitor, #c8d8cf);
  color: #64748b;
}

[data-theme="light"] .live-table-scroll-wrap {
  background: var(--bg-monitor-table, #ffffff);
  border-color: var(--border-monitor, #c8d8cf);
}

[data-theme="light"] .live-table-scroll-wrap::-webkit-scrollbar-track {
  background: #f1f5f9;
}

[data-theme="light"] .live-table-scroll-wrap::-webkit-scrollbar-thumb {
  background: #cbd5e1;
}

[data-theme="light"] .live-table-scroll-wrap::-webkit-scrollbar-thumb:hover,
[data-theme="light"] .live-table-scroll-wrap::-webkit-scrollbar-thumb:active {
  background: #ff6700;
}

[data-theme="light"] .live-activity-list {
  background: transparent;
  border: none;
}

[data-theme="light"] .live-call-row {
  background: var(--bg-monitor-table, #ffffff);
  border-bottom-color: #f1f5f9;
  color: #1f2328;
}

[data-theme="light"] .live-call-row:nth-child(even) {
  background: var(--bg-monitor-row-even, #f8faf9);
}

[data-theme="light"] .live-call-row:hover {
  background: var(--bg-monitor-row-hover, #eef5f1);
}

[data-theme="light"] .live-call-row.active-call {
  background: rgba(255, 103, 0, 0.10) !important;
  border-left-color: #ff6700;
  padding-left: 0px !important;
}

[data-theme="light"] .live-call-row.is-playing-rec:not(.row-blink-highlight) {
  background: #cbf4dc !important;
  border-left: 4px solid #10b981 !important;
  padding-left: 3px !important;
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.35);
}
[data-theme="light"] .live-call-row.is-playing-rec:not(.row-blink-highlight):hover {
  background: #bbf0d4 !important;
}

@keyframes rec-row-blink-light {
  0%, 100% {
    background-color: #cbf4dc;
    border-left-color: #10b981;
    box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.35);
  }
  50% {
    background-color: transparent;
    border-left-color: transparent;
    box-shadow: none;
  }
}

[data-theme="light"] .live-call-row.row-blink-highlight {
  border-left-width: 4px !important;
  border-left-style: solid !important;
  padding-left: 3px !important;
  animation: rec-row-blink-light 0.7692s ease-in-out 3;
}

[data-theme="light"] .live-call-row.is-tx-row:not(.is-playing-rec) {
  background: rgba(239, 68, 68, 0.08) !important;
  border-left-color: #ef4444 !important;
  padding-left: 0px !important;
}

[data-theme="light"] .live-call-row.is-tx-row:nth-child(even) {
  background: rgba(239, 68, 68, 0.12) !important;
}

[data-theme="light"] .live-call-row.is-tx-row:hover {
  background: rgba(239, 68, 68, 0.18) !important;
}

[data-theme="light"] .tg-desc-text {
  color: #475569 !important;
  font-weight: 600;
}

[data-theme="light"] .live-call-row .station-name-line,
[data-theme="light"] .live-call-row .station-text {
  color: #1f2328;
}

[data-theme="light"] .live-call-row .station-sub-line {
  color: #64748b;
}

[data-theme="light"] .live-call-row .station-sub-line .dmr-id-text,
[data-theme="light"] .live-call-row .station-text .dmr-id-text,
[data-theme="light"] .live-call-row .dmr-id-text {
  color: #09825d !important;
}

[data-theme="light"] .live-call-row .station-country {
  color: #64748b;
}

[data-theme="light"] .live-call-row .tg-line-top .tg-plain-link.is-tg {
  color: #1f2328 !important;
}

[data-theme="light"] .live-call-row .tg-line-top .tg-plain-link.is-id {
  color: #09825d !important;
}

[data-theme="light"] .live-call-row .tg-line-sub {
  color: #475569;
}

[data-theme="light"] .live-call-row .cell-tg .tg-flag .flag-badge,
[data-theme="light"] .mobile-tg-pill .tg-flag .flag-badge {
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .live-call-row .dur-line-top,
[data-theme="light"] .live-call-row .duration-text,
[data-theme="light"] .live-call-row .cell-duration .duration-text {
  color: #1f2328 !important;
}

[data-theme="light"] .live-call-row .dur-line-sub {
  color: #64748b;
}

[data-theme="light"] .live-call-row .cell-dur,
[data-theme="light"] .live-call-row .cell-time {
  color: #64748b;
}

[data-theme="light"] .live-row-transcription {
  background: rgba(2, 132, 199, 0.05);
  border-left-color: rgba(2, 132, 199, 0.55);
  color: #334155;
}

[data-theme="light"] .live-transcribe-badge {
  background: rgba(2, 132, 199, 0.12);
  color: #0284c7;
  border-color: rgba(2, 132, 199, 0.35);
}

[data-theme="light"] .live-transcribe-text {
  color: #0f172a;
}

[data-theme="light"] .log-text-marker {
  background: #16a34a;
  box-shadow: 0 0 5px rgba(22, 163, 74, 0.7);
}

[data-theme="light"] .log-text-marker:hover {
  background: #15803d;
  box-shadow: 0 0 7px rgba(21, 128, 61, 0.85);
}

[data-theme="light"] .station-flag.has-transcription:hover {
  filter: drop-shadow(0 0 3px rgba(22, 163, 74, 0.85));
}

[data-theme="light"] .log-tx-popover {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(22, 163, 74, 0.45);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16), 0 0 12px rgba(22, 163, 74, 0.18);
  color: #1f2328;
}

[data-theme="light"] .log-tx-popover-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .log-tx-popover-badge {
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
  border-color: rgba(22, 163, 74, 0.35);
}

[data-theme="light"] .log-tx-popover-station {
  color: #1f2328;
}

[data-theme="light"] .log-tx-popover-tg {
  color: #57606a;
}

[data-theme="light"] .log-tx-popover-close {
  color: #57606a;
}

[data-theme="light"] .log-tx-popover-close:hover {
  color: #1f2328;
  background: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .log-tx-popover-body {
  color: #24292f;
}

[data-theme="light"] .log-tx-popover-body call,
[data-theme="light"] .log-tx-popover-body .vfo-call-tag {
  color: #b45309;
  background: rgba(217, 119, 6, 0.12);
}

[data-theme="light"] .log-recordings-btn {
  background: transparent !important;
  border: none !important;
}

[data-theme="light"] .log-tx-summary-btn,
[data-theme="light"] .log-tx-summary-btn:hover,
[data-theme="light"] .log-tx-summary-btn.active {
  background: transparent !important;
  border: none !important;
}

[data-theme="light"] .log-recordings-btn:hover {
  background: transparent !important;
  border: none !important;
}

[data-theme="light"] .log-tx-summary-wrap {
  background: #ffffff;
  border-color: #d0d7de;
}

[data-theme="light"] .log-tx-summary-topbar {
  background: #f1f5f9;
  border-bottom-color: #d0d7de;
}

[data-theme="light"] .log-tx-summary-count {
  color: #57606a;
}

[data-theme="light"] .log-tx-summary-time-badge.is-loc {
  background: #dcfce7;
  border-color: #86efac;
  color: #15803d;
}

[data-theme="light"] .log-tx-summary-time-badge.is-utc {
  background: #e0f2fe;
  border-color: #7dd3fc;
  color: #0369a1;
}


[data-theme="light"] .btn-copy-tx-summary {
  background: #f3f4f6;
  border-color: #d0d7de;
  color: #1f2328;
}

[data-theme="light"] .btn-copy-tx-summary:hover {
  background: #ffffff;
  border-color: #0284c7;
  color: #0284c7;
}

[data-theme="light"] .btn-tts-tx-summary {
  background: #f0fdf4;
  border-color: #86efac;
  color: #166534;
}

[data-theme="light"] .btn-tts-tx-summary:hover {
  background: #16a34a;
  color: #ffffff;
}

[data-theme="light"] .btn-tts-tx-summary:active,
[data-theme="light"] .btn-tts-tx-summary.vfo-tts-pressing {
  box-shadow: 0 0 10px rgba(22, 163, 74, 0.8), inset 0 0 4px rgba(22, 163, 74, 0.5) !important;
  border-color: #16a34a !important;
}

[data-theme="light"] .btn-tts-tx-summary.is-reading {
  background: #dc2626;
  border-color: #b91c1c;
  color: #ffffff;
}

[data-theme="light"] .btn-close-tx-summary {
  background: transparent;
  border-color: #d0d7de;
  color: #57606a;
}

[data-theme="light"] .btn-close-tx-summary:hover {
  border-color: #ef4444;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

[data-theme="light"] .log-tx-summary-body::-webkit-scrollbar-track {
  background: #f1f5f9;
}

[data-theme="light"] .log-tx-summary-body::-webkit-scrollbar-thumb {
  background: #cbd5e1;
}

[data-theme="light"] .log-tx-summary-body::-webkit-scrollbar-thumb:hover {
  background: #ff6700;
}

[data-theme="light"] .tx-summary-item {
  background: #f8fafc;
  border-color: #e2e8f0;
  border-left-color: #0284c7;
}

[data-theme="light"] .tx-summary-item:hover {
  background: #f1f5f9;
}

[data-theme="light"] .tx-summary-item.is-selected {
  border: 1px solid rgba(217, 119, 6, 0.5) !important;
  border-left: 4px solid #d97706 !important;
  background: rgba(217, 119, 6, 0.20) !important;
  box-shadow: 0 0 10px rgba(217, 119, 6, 0.25), inset 0 0 6px rgba(217, 119, 6, 0.10) !important;
}

[data-theme="light"] .tx-summary-item.is-selected .tx-summary-text {
  color: #0f172a !important;
  font-weight: 500;
}

@keyframes tx-reading-pulse-light {
  0%, 100% {
    background-color: rgba(2, 132, 199, 0.15);
    border-color: rgba(2, 132, 199, 0.38);
    border-left-color: #0284c7;
    box-shadow: 0 0 8px rgba(2, 132, 199, 0.20), inset 0 0 5px rgba(2, 132, 199, 0.08);
  }
  50% {
    background-color: rgba(2, 132, 199, 0.34);
    border-color: rgba(2, 132, 199, 0.78);
    border-left-color: #0284c7;
    box-shadow: 0 0 18px rgba(2, 132, 199, 0.48), inset 0 0 12px rgba(2, 132, 199, 0.20);
  }
}

[data-theme="light"] .tx-summary-item.is-reading {
  border: 1px solid rgba(2, 132, 199, 0.5);
  border-left: 4px solid #0284c7;
  background-color: rgba(2, 132, 199, 0.22);
  box-shadow: 0 0 12px rgba(2, 132, 199, 0.3), inset 0 0 8px rgba(2, 132, 199, 0.12);
  transition: none !important;
  animation: tx-reading-pulse-light 1.5s infinite ease-in-out !important;
}

[data-theme="light"] .tx-summary-item.is-reading:hover {
  animation: tx-reading-pulse-light 1.5s infinite ease-in-out !important;
}

[data-theme="light"] .tx-summary-item.is-reading .tx-summary-text {
  color: #0f172a !important;
  font-weight: 500;
}

[data-theme="light"] .tx-summary-item.is-reading .tx-summary-time::before {
  color: #0284c7;
}

[data-theme="light"] .tx-summary-time {
  color: #0284c7;
}

[data-theme="light"] .tx-summary-station {
  color: #1f2328;
}

[data-theme="light"] .tx-summary-text {
  color: #24292f;
}

[data-theme="light"] .tx-summary-lang-badge {
  background: #dcfce7 !important;
  color: #0e622d !important;
  border: 1px solid rgba(14, 98, 45, 0.25) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .log-tx-summary-hint {
  background: #f1f5f9;
  border-top-color: #d0d7de;
  color: #57606a;
}

/* Modals & Settings */
[data-theme="light"] .modal-content {
  background: #ffffff;
  border-color: #d0d7de;
  box-shadow: 0 20px 40px rgba(27, 31, 36, 0.2);
  color: #1f2328;
}

[data-theme="light"] .modal-header,
[data-theme="light"] #settingsModal .settings-modal-header {
  border-bottom-color: #d0d7de;
  background: #ffffff;
}

[data-theme="light"] .modal-title {
  color: #1f2328;
}

[data-theme="light"] .modal-tabs {
  border-bottom-color: #d0d7de;
}

[data-theme="light"] .tab-btn {
  color: #57606a;
}

[data-theme="light"] .tab-btn:hover {
  color: #1f2328;
}

[data-theme="light"] .tab-btn.active {
  color: #0969da;
  border-bottom-color: #0969da;
}

[data-theme="light"] .form-input {
  background: #f8fafc;
  border-color: #d0d7de;
  color: #1f2328;
}

[data-theme="light"] .form-input:focus {
  background: #ffffff;
  border-color: #0969da;
}

[data-theme="light"] .form-hint {
  color: #57606a;
}

[data-theme="light"] .hotspots-table th {
  background: #f6f8fa;
  color: #57606a;
  border-color: #d0d7de;
}

[data-theme="light"] .hotspots-table td {
  border-color: #d0d7de;
  color: #1f2328;
}

/* Quick Assign / Modular Action Modals */
[data-theme="light"] .tg-action-menu-card,
[data-theme="light"] .quick-mem-picker-card,
[data-theme="light"] .direct-call-card,
[data-theme="light"] .quick-assign-modal {
  background: #ffffff !important;
  border-color: #d0d7de !important;
  box-shadow: 0 16px 40px rgba(27, 31, 36, 0.2), 0 0 20px rgba(2, 132, 199, 0.12) !important;
}

[data-theme="light"] .tg-action-menu-header,
[data-theme="light"] .tg-action-menu-footer,
[data-theme="light"] .direct-call-footer {
  background: #f6f8fa !important;
  border-color: #d0d7de !important;
}

[data-theme="light"] .tg-action-tile {
  background: #f8fafc !important;
  border-color: #d0d7de !important;
}

[data-theme="light"] .tg-action-tile:hover {
  background: #eef2f6 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .tile-title {
  color: #1f2328 !important;
}

[data-theme="light"] .tile-desc {
  color: #57606a !important;
}

[data-theme="light"] .tile-chevron {
  color: #57606a !important;
}

[data-theme="light"] .tg-action-tile:hover .tile-chevron {
  color: #1f2328 !important;
}

[data-theme="light"] .direct-call-routing-panel {
  background: #f6f8fa !important;
  border-color: #0969da !important;
}

[data-theme="light"] .direct-call-note {
  background: #f0f7ff !important;
  border-color: #b6e3ff !important;
  color: #1f2328 !important;
}

[data-theme="light"] .quick-mem-picker-label {
  color: #8250df !important;
}

[data-theme="light"] .quick-mem-picker-hint {
  color: #57606a !important;
}

[data-theme="light"] .quick-assign-modal {
  background: #ffffff;
  border-color: #d0d7de;
  box-shadow: 0 16px 40px rgba(27, 31, 36, 0.2), 0 0 20px rgba(2, 132, 199, 0.12);
}

[data-theme="light"] .quick-assign-modal .modal-header {
  background: #f6f8fa;
  border-bottom-color: #d0d7de;
}

[data-theme="light"] .quick-assign-footer {
  background: #f6f8fa;
  border-top-color: #d0d7de;
}

[data-theme="light"] .btn-cancel-quick-assign {
  background: #ffffff;
  border-color: #d0d7de;
  color: #57606a;
}

[data-theme="light"] .btn-cancel-quick-assign:hover {
  background: #f3f4f6;
  color: #1f2328;
}

[data-theme="light"] .quick-assign-row {
  background: #f8fafc;
  border-color: #d0d7de;
  color: #1f2328;
}

[data-theme="light"] .quick-assign-row:hover {
  background: #f1f5f9;
  border-color: #0969da;
}

[data-theme="light"] .btn-refresh-bm-summary {
  background: #f1f5f9 !important;
  border: 1px solid #d0d7de !important;
  color: #57606a !important;
}

[data-theme="light"] .btn-refresh-bm-summary:hover {
  background: #dcfce7 !important;
  border-color: #16a34a !important;
  color: #16a34a !important;
}

[data-theme="light"] .bm-device-chip,
.theme-light .bm-device-chip {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .bm-device-chip:hover,
.theme-light .bm-device-chip:hover {
  background: #f8fafc !important;
  border-color: #0969da !important;
  box-shadow: 0 2px 8px rgba(9, 105, 218, 0.12) !important;
}

[data-theme="light"] .bm-chip-id-wrap,
.theme-light .bm-chip-id-wrap,
[data-theme="light"] .bm-chip-id-wrap span,
.theme-light .bm-chip-id-wrap span {
  color: #0f172a !important;
  font-weight: 800 !important;
}

[data-theme="light"] .bm-chip-master,
.theme-light .bm-chip-master {
  color: #0969da !important;
  font-weight: 700 !important;
}

[data-theme="light"] .bm-chip-hw,
.theme-light .bm-chip-hw {
  color: #334155 !important;
  font-weight: 600 !important;
}

[data-theme="light"] .bm-chip-freq,
.theme-light .bm-chip-freq {
  color: #15803d !important;
  font-weight: 700 !important;
}

[data-theme="light"] .bm-chip-dot.online,
.theme-light .bm-chip-dot.online {
  background: #16a34a !important;
  box-shadow: 0 0 4px rgba(22, 163, 74, 0.6) !important;
}

[data-theme="light"] .bm-chip-dot.offline,
.theme-light .bm-chip-dot.offline {
  background: #94a3b8 !important;
}

[data-theme="light"] .bm-id-lead,
.theme-light .bm-id-lead {
  background: #f0f7ff !important;
  border: 1px solid #bae6fd !important;
}

[data-theme="light"] .bm-callsign-badge,
.theme-light .bm-callsign-badge {
  color: #0369a1 !important;
  font-weight: 800 !important;
}

[data-theme="light"] .bm-id-badge,
.theme-light .bm-id-badge {
  color: #14532d !important;
  background: #dcfce7 !important;
  border: 1px solid #86efac !important;
  font-weight: 800 !important;
}

[data-theme="light"] .bm-user-name,
.theme-light .bm-user-name {
  color: #0f172a !important;
  font-weight: 700 !important;
}

[data-theme="light"] .bm-user-loc,
.theme-light .bm-user-loc {
  color: #475569 !important;
  font-weight: 600 !important;
}

[data-theme="light"] .bm-slot-box {
  background: #ffffff;
  border-color: #d0d7de;
}

[data-theme="light"] .bm-slot-title {
  color: #57606a;
  border-bottom-color: #e1e4e8;
}

[data-theme="light"] .bm-mini-pill {
  background: #f1f5f9;
  border-color: #d0d7de;
  color: #1f2328;
}

[data-theme="light"] .bm-mini-pill.is-active-target {
  background: #ffedd5 !important;
  border-color: #ff6700 !important;
  color: #c2410c !important;
  box-shadow: 0 0 6px rgba(255, 103, 0, 0.3) !important;
}

/* Activity Log and Modal Links (Strictly Zero White Text) */
[data-theme="light"] .tg-plain-link {
  color: #1f2328 !important;
}
[data-theme="light"] .tg-plain-link.is-tg {
  color: #c2410c !important;
}
[data-theme="light"] .tg-plain-link.is-id {
  color: #09825d !important;
}
[data-theme="light"] .tg-plain-link:hover {
  color: #ea580c !important;
}
[data-theme="light"] .bm-tg-num {
  color: #c2410c !important;
}
[data-theme="light"] .bm-tg-name {
  color: #57606a !important;
}
[data-theme="light"] .btn-del-single {
  color: #57606a !important;
}
[data-theme="light"] .btn-del-single:hover {
  color: #ef4444 !important;
}

/* Quick Assign Target Pill & Instruction */
[data-theme="light"] .quick-assign-target-name {
  color: #1f2328 !important;
}
[data-theme="light"] .quick-assign-instruction {
  color: #57606a !important;
}
[data-theme="light"] .quick-assign-target-pill {
  background: #f1f5f9 !important;
  border-color: #d0d7de !important;
  color: #1f2328 !important;
  text-shadow: none !important;
}
[data-theme="light"] .quick-assign-target-pill.is-id {
  color: #09825d !important;
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  text-shadow: none !important;
}
[data-theme="light"] .quick-assign-target-pill.is-id .dmr-id-text {
  color: #09825d !important;
}
[data-theme="light"] .quick-assign-target-pill.is-tg {
  color: #c2410c !important;
  background: #ffedd5 !important;
  border-color: #fdba74 !important;
  text-shadow: none !important;
}
[data-theme="light"] .quick-assign-target-pill.is-tg .dmr-id-text {
  color: #c2410c !important;
}

/* Quick Assign Modal Contact Section in Light Mode */
[data-theme="light"] .quick-contact-section {
  background: #faf5ff !important;
  border: 1px solid #e9d5ff !important;
  border-left: 3.5px solid #9333ea !important;
}

[data-theme="light"] .quick-contact-title {
  color: #7e22ce !important;
  font-weight: 700 !important;
}

[data-theme="light"] .quick-contact-hint {
  color: #6b21a8 !important;
}

[data-theme="light"] .quick-contact-input,
[data-theme="light"] .quick-contact-select {
  background: #ffffff !important;
  border-color: #d8b4fe !important;
  color: #1f2328 !important;
}

[data-theme="light"] .quick-contact-exists-box {
  background: rgba(46, 160, 67, 0.08);
  border-color: rgba(46, 160, 67, 0.25);
}

[data-theme="light"] .quick-contact-exists-info {
  color: #24292f;
}

[data-theme="light"] .btn-quick-contact-edit {
  background: #f6f8fa;
  border-color: #d0d7de;
  color: #24292f;
}

[data-theme="light"] .btn-quick-contact-full {
  background: #f6f8fa;
  border-color: #d0d7de;
  color: #57606a;
}

/* Wallpaper Mode Tabs & Option Cards in Light Mode */
[data-theme="light"] .theme-bg-mode-tabs {
  background: #eef2f6;
  border-color: #d0d7de;
}

[data-theme="light"] .theme-bg-tab.active {
  background: #ffffff;
  color: #1f2328;
  box-shadow: 0 1px 3px rgba(27, 31, 36, 0.12);
}

[data-theme="light"] .bg-option-card {
  background: #f8fafc;
  border-color: #d0d7de;
  color: #1f2328;
}

[data-theme="light"] .bg-option-card:hover {
  background: #f1f5f9;
  border-color: #0969da;
}

[data-theme="light"] .bg-option-card.active {
  border-color: #0969da;
  background: #f0f7ff;
  box-shadow: 0 0 10px rgba(9, 105, 218, 0.2);
}

[data-theme="light"] .bg-option-title {
  color: #1f2328;
}

[data-theme="light"] .btn-bg-upload {
  background: #f0f7ff;
  border-color: #0969da;
  color: #0969da;
}

[data-theme="light"] .btn-bg-upload:hover {
  background: #ddf4ff;
}

[data-theme="light"] .btn-bg-reset {
  background: #ffebe9;
  border-color: #cf222e;
  color: #cf222e;
}

[data-theme="light"] .btn-bg-reset:hover {
  background: #ffe0e0;
}

/* =========================================================
   Light Theme Comprehensive Component Polish (v0.31)
   Modal controls, Hotspot cards, Country Select, BM INFO,
   Quick Assign, Search results, Secondary Buttons
   ========================================================= */

/* 1. Modal Close Buttons & General Icon Buttons */
[data-theme="light"] .icon-btn,
[data-theme="light"] .modal-header .icon-btn,
[data-theme="light"] .btn-close-help,
[data-theme="light"] #closeSettingsBtn,
[data-theme="light"] #closeBmTgModalBtn,
[data-theme="light"] #btnCloseBmInfoModalTop,
[data-theme="light"] #btnCloseBmInfoModalBottom,
[data-theme="light"] #btnCloseAboutModalTop,
[data-theme="light"] #btnCloseAboutModalBottom,
[data-theme="light"] #btnCloseDsdfmeTop,
[data-theme="light"] #btnCloseDsdfmeBottom,
[data-theme="light"] .btn-bm-info-close {
  background: #f6f8fa !important;
  border: 1px solid #d0d7de !important;
  color: #57606a !important;
  box-shadow: 0 1px 2px rgba(27, 31, 36, 0.04) !important;
}

[data-theme="light"] .icon-btn:hover,
[data-theme="light"] .modal-header .icon-btn:hover,
[data-theme="light"] .btn-close-help:hover,
[data-theme="light"] #closeSettingsBtn:hover,
[data-theme="light"] #closeBmTgModalBtn:hover,
[data-theme="light"] #btnCloseBmInfoModalTop:hover,
[data-theme="light"] #btnCloseAboutModalTop:hover,
[data-theme="light"] #btnCloseDsdfmeTop:hover {
  background: #eef2f6 !important;
  border-color: #0969da !important;
  color: #0969da !important;
}

/* 2. Secondary & Utility Action Buttons */
[data-theme="light"] .btn-secondary,
[data-theme="light"] .modal-footer .btn-secondary {
  background: #f6f8fa !important;
  border: 1px solid #d0d7de !important;
  color: #1f2328 !important;
  box-shadow: 0 1px 2px rgba(27, 31, 36, 0.06) !important;
}

[data-theme="light"] .btn-secondary:hover,
[data-theme="light"] .modal-footer .btn-secondary:hover {
  background: #eef2f6 !important;
  border-color: #0969da !important;
  color: #0969da !important;
}

/* Hotspots Tab Toolbar Action Buttons */
#btnAddNewHotspot {
  color: #4884FF !important;
  border-color: rgba(72, 132, 255, 0.4) !important;
  background: rgba(72, 132, 255, 0.1) !important;
}

#btnAddNewHotspot:hover:not(:disabled) {
  background: rgba(72, 132, 255, 0.2) !important;
  border-color: rgba(72, 132, 255, 0.65) !important;
  color: #6da2ff !important;
}

#btnDeleteCurrentHotspot {
  color: #FFD231 !important;
  border-color: rgba(255, 210, 49, 0.4) !important;
  background: rgba(255, 210, 49, 0.1) !important;
}

#btnDeleteCurrentHotspot:hover:not(:disabled) {
  background: rgba(255, 210, 49, 0.2) !important;
  border-color: rgba(255, 210, 49, 0.65) !important;
  color: #ffe066 !important;
}

[data-theme="light"] #btnAddNewHotspot {
  color: #1a64f0 !important;
  border-color: rgba(26, 100, 240, 0.45) !important;
  background: rgba(72, 132, 255, 0.12) !important;
}

[data-theme="light"] #btnAddNewHotspot:hover:not(:disabled) {
  background: rgba(72, 132, 255, 0.22) !important;
  border-color: rgba(26, 100, 240, 0.7) !important;
  color: #0b4ec7 !important;
}

[data-theme="light"] #btnDeleteCurrentHotspot {
  color: #b58900 !important;
  border-color: rgba(181, 137, 0, 0.45) !important;
  background: rgba(255, 210, 49, 0.15) !important;
}

[data-theme="light"] #btnDeleteCurrentHotspot:hover:not(:disabled) {
  background: rgba(255, 210, 49, 0.25) !important;
  border-color: rgba(181, 137, 0, 0.7) !important;
  color: #8c6a00 !important;
}

/* 3. Settings Modal — Hotspot Management Cards & Actions */
[data-theme="light"] .hotspot-cards-list {
  background: transparent !important;
}

[data-theme="light"] .hotspot-card {
  background: #ffffff !important;
  border: 1px solid #d0d7de !important;
  box-shadow: 0 1px 3px rgba(27, 31, 36, 0.08) !important;
}

[data-theme="light"] .hotspot-card.active-card {
  border-color: #0284c7 !important;
  box-shadow: 0 0 12px rgba(2, 132, 199, 0.18) !important;
}

[data-theme="light"] .hotspot-card-title {
  color: #1f2328 !important;
}

[data-theme="light"] .hotspot-card-meta {
  color: #57606a !important;
}

[data-theme="light"] .btn-card-action {
  background: #f6f8fa !important;
  border: 1px solid #d0d7de !important;
  color: #1f2328 !important;
  box-shadow: 0 1px 2px rgba(27, 31, 36, 0.04) !important;
}

[data-theme="light"] .btn-card-action:hover {
  background: #eef2f6 !important;
  border-color: #0969da !important;
  color: #0969da !important;
}

[data-theme="light"] .btn-card-action.primary {
  background: #ecfdf5 !important;
  border-color: #86efac !important;
  color: #15803d !important;
}

[data-theme="light"] .btn-card-action.primary:hover {
  background: #dcfce7 !important;
  border-color: #22c55e !important;
  color: #14532d !important;
}

[data-theme="light"] .btn-card-action.danger {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #dc2626 !important;
}

[data-theme="light"] .btn-card-action.danger:hover {
  background: #fee2e2 !important;
  border-color: #ef4444 !important;
  color: #b91c1c !important;
}

/* 4. Settings Modal — Hotspot Parameters & Country Select */
[data-theme="light"] select:not(.bm-server-select),
[data-theme="light"] select.form-input,
[data-theme="light"] .form-select,
[data-theme="light"] .tts-quick-select,
[data-theme="light"] .bm-preset-select,
[data-theme="light"] .gw-hotspot-select,
[data-theme="light"] .routing-select,
[data-theme="light"] .bm-country-select,
[data-theme="light"] .header-hotspot-select,
[data-theme="light"] .onboarding-select,
[data-theme="light"] .quick-contact-select,
[data-theme="light"] #editHsMasterSelect,
[data-theme="light"] #editHsSelect,
[data-theme="light"] #optLanguage,
[data-theme="light"] #optTtsEngine,
[data-theme="light"] #optTtsModel,
[data-theme="light"] #optTtsVoice,
[data-theme="light"] #optTtsStyle,
[data-theme="light"] #optTranscriberModel,
[data-theme="light"] #optTranscriberTargetLang,
[data-theme="light"] #adminNewRole,
[data-theme="light"] #selOfflineTranscribeHotspot,
[data-theme="light"] #contactsGwHotspotSelect,
[data-theme="light"] #contactEditParentSelect,
[data-theme="light"] #contactEditSlot,
[data-theme="light"] #proposalHotspotSelect,
[data-theme="light"] #directCallHsSelect {
  background-color: #238142 !important;
  background: #238142 !important;
  border: 1px solid #1c6634 !important;
  color: #ffffff !important;
  color-scheme: dark;
}

[data-theme="light"] select:not(.bm-server-select):hover,
[data-theme="light"] select.form-input:hover,
[data-theme="light"] .form-select:hover,
[data-theme="light"] .tts-quick-select:hover,
[data-theme="light"] .bm-preset-select:hover,
[data-theme="light"] .gw-hotspot-select:hover,
[data-theme="light"] .routing-select:hover,
[data-theme="light"] .header-hotspot-select:hover {
  background-color: #2a944d !important;
  background: #2a944d !important;
  border-color: #38d672 !important;
}

[data-theme="light"] select:not(.bm-server-select):focus,
[data-theme="light"] select.form-input:focus,
[data-theme="light"] .form-select:focus,
[data-theme="light"] .tts-quick-select:focus,
[data-theme="light"] .bm-preset-select:focus,
[data-theme="light"] .gw-hotspot-select:focus,
[data-theme="light"] .routing-select:focus,
[data-theme="light"] .header-hotspot-select:focus {
  background-color: #238142 !important;
  background: #238142 !important;
  border-color: #4ade80 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.3) !important;
}

[data-theme="light"] select option,
[data-theme="light"] select optgroup,
[data-theme="light"] #editHsMasterSelect option,
[data-theme="light"] .bm-country-select option,
[data-theme="light"] .bm-server-select option,
[data-theme="light"] .form-select option,
[data-theme="light"] .tts-quick-select option,
[data-theme="light"] .gw-hotspot-select option,
[data-theme="light"] .routing-select option {
  background-color: #238142 !important;
  background: #238142 !important;
  color: #ffffff !important;
}

[data-theme="light"] select option:checked,
[data-theme="light"] select option:hover,
[data-theme="light"] select option:focus {
  background-color: #1b6433 !important;
  background: #1b6433 !important;
  color: #ffffff !important;
}

[data-theme="light"] .bm-help-card {
  background: #f8fafc !important;
  border: 1px solid #d0d7de !important;
  color: #1f2328 !important;
}

[data-theme="light"] .bm-help-header {
  border-bottom-color: #d0d7de !important;
  color: #1f2328 !important;
}

[data-theme="light"] .bm-help-note {
  background: #f0f7ff !important;
  border: 1px solid #bae6fd !important;
  color: #0369a1 !important;
}

[data-theme="light"] .btn-help-inline {
  background: #f0f7ff !important;
  border: 1px solid rgba(9, 105, 218, 0.4) !important;
  color: #0969da !important;
}

[data-theme="light"] .btn-help-inline:hover {
  background: #ddf4ff !important;
}

/* 5. Quick Assign Modal — Hotspot Rows, Slots & Memory Tabs */
[data-theme="light"] .quick-assign-hs-row {
  background: #ffffff !important;
  border: 1px solid #d0d7de !important;
  box-shadow: 0 1px 3px rgba(27, 31, 36, 0.04) !important;
}

[data-theme="light"] .quick-assign-hs-row:hover {
  border-color: #0969da !important;
  background: #f6f8fa !important;
}

[data-theme="light"] .quick-assign-hs-row.is-active {
  border-color: #0969da !important;
  background: #eff6ff !important;
  box-shadow: 0 0 10px rgba(9, 105, 218, 0.16) !important;
}

[data-theme="light"] .quick-assign-hs-name {
  color: #1f2328 !important;
}

[data-theme="light"] .quick-assign-hs-sub {
  color: #57606a !important;
}

[data-theme="light"] .btn-quick-assign-slot.btn-ts1 {
  background: #eff6ff !important;
  border-color: rgba(9, 105, 218, 0.35) !important;
  color: #0969da !important;
}

[data-theme="light"] .btn-quick-assign-slot.btn-ts1:hover {
  background: #0969da !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(9, 105, 218, 0.3) !important;
}

[data-theme="light"] .btn-quick-assign-slot.btn-ts2 {
  background: #f0fdf4 !important;
  border-color: rgba(21, 128, 61, 0.35) !important;
  color: #15803d !important;
}

[data-theme="light"] .btn-quick-assign-slot.btn-ts2:hover {
  background: #16a34a !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3) !important;
}

[data-theme="light"] .quick-mem-section {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  border-left: 3.5px solid #d97706 !important;
}

[data-theme="light"] .quick-mem-title {
  color: #b45309 !important;
  font-weight: 700 !important;
}

[data-theme="light"] .quick-mem-hint {
  color: #92400e !important;
}

[data-theme="light"] .btn-quick-mem-hs-tab {
  background: #fef3c7 !important;
  border: 1px solid #fde68a !important;
  color: #92400e !important;
}

[data-theme="light"] .btn-quick-mem-hs-tab:hover {
  border-color: #d97706 !important;
  color: #78350f !important;
  background: #fde68a !important;
}

[data-theme="light"] .btn-quick-mem-hs-tab.active {
  background: #f59e0b !important;
  border-color: #d97706 !important;
  color: #ffffff !important;
}

/* 6. Quick Assign Modal — Inline BM INFO Card */
[data-theme="light"] .quick-bm-info-section {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  border-left: 3.5px solid #16a34a !important;
}

[data-theme="light"] .quick-bm-info-title {
  color: #15803d !important;
  font-weight: 700 !important;
}

[data-theme="light"] .quick-bm-info-hint {
  color: #166534 !important;
}

[data-theme="light"] .bm-summary-card {
  background: #ffffff !important;
  border: 1px solid #d0d7de !important;
  box-shadow: 0 1px 3px rgba(27, 31, 36, 0.06) !important;
}

[data-theme="light"] .bm-tg-official-name {
  color: #1f2328 !important;
}

[data-theme="light"] .bm-badge-reg {
  background: #dcfce7 !important;
  border: 1px solid #86efac !important;
  color: #15803d !important;
}

[data-theme="light"] .bm-badge-unreg {
  background: #f1f5f9 !important;
  border: 1px solid #d0d7de !important;
  color: #57606a !important;
}

[data-theme="light"] .bm-hs-sub-box {
  background: #f8fafc !important;
  border: 1px solid #d0d7de !important;
}

[data-theme="light"] .bm-hs-label {
  color: #57606a !important;
}

[data-theme="light"] .bm-hs-name {
  color: #1f2328 !important;
}

[data-theme="light"] .bm-badge-notsub {
  background: #fef3c7 !important;
  border-color: #fcd34d !important;
  color: #b45309 !important;
}

[data-theme="light"] .bm-badge-sub {
  background: #dcfce7 !important;
  border-color: #86efac !important;
  color: #15803d !important;
}

[data-theme="light"] .btn-bm-act-add {
  background: #eff6ff !important;
  border: 1px solid #0969da !important;
  color: #0969da !important;
}

[data-theme="light"] .btn-bm-act-add:hover {
  background: #dbeafe !important;
  color: #044289 !important;
}

[data-theme="light"] .btn-bm-act-del {
  background: #fef2f2 !important;
  border: 1px solid #ef4444 !important;
  color: #b91c1c !important;
}

[data-theme="light"] .btn-bm-act-del:hover {
  background: #fee2e2 !important;
  color: #991b1b !important;
}

[data-theme="light"] .bm-summary-subhead,
.theme-light .bm-summary-subhead {
  color: #334155 !important;
  font-weight: 800 !important;
}

[data-theme="light"] .bm-summary-count,
.theme-light .bm-summary-count {
  color: #0969da !important;
  font-weight: 700 !important;
}

[data-theme="light"] .bm-slot-box {
  background: #ffffff !important;
  border: 1px solid #d0d7de !important;
}

[data-theme="light"] .bm-slot-box-header {
  border-bottom-color: #e1e4e8 !important;
}

[data-theme="light"] .bm-slot-box-title {
  color: #1f2328 !important;
}

[data-theme="light"] .btn-bm-info {
  background: #ffffff !important;
  border: 1px solid #d0d7de !important;
  box-shadow: 0 1px 3px rgba(27, 31, 36, 0.06) !important;
}

[data-theme="light"] .btn-bm-info:hover:not(:disabled):not(.disabled) {
  background: #eff6ff !important;
  border-color: #0969da !important;
  color: #0969da !important;
  box-shadow: 0 2px 8px rgba(9, 105, 218, 0.15) !important;
}

[data-theme="light"] .bm-info-btn-title {
  color: #1f2328 !important;
}

[data-theme="light"] .bm-info-btn-sub {
  color: #57606a !important;
}

/* 7. BM Static TalkGroups Manager Modal */
[data-theme="light"] .bm-modal-title {
  color: #0969da !important;
}

[data-theme="light"] .bm-device-badge {
  background: #eff6ff !important;
  border: 1px solid #bae6fd !important;
  color: #0284c7 !important;
}

[data-theme="light"] .btn-icon-subtle {
  background: #f6f8fa !important;
  border: 1px solid #d0d7de !important;
  color: #57606a !important;
}

[data-theme="light"] .btn-icon-subtle:hover {
  background: #eef2f6 !important;
  border-color: #0969da !important;
  color: #0969da !important;
}

[data-theme="light"] .bm-tabs-nav {
  border-bottom-color: #d0d7de !important;
}

[data-theme="light"] .bm-tab-btn {
  color: #57606a !important;
}

[data-theme="light"] .bm-tab-btn:hover {
  color: #1f2328 !important;
  background: #f3f4f6 !important;
}

[data-theme="light"] .bm-tab-btn.active {
  color: #0969da !important;
  background: #eff6ff !important;
  border-color: #bae6fd !important;
}

[data-theme="light"] .bm-tab-badge {
  background: #e2e8f0 !important;
  color: #475569 !important;
}

[data-theme="light"] .bm-mobile-slot-btn {
  background: #f6f8fa !important;
  border: 1px solid #d0d7de !important;
  color: #57606a !important;
}

[data-theme="light"] .bm-mobile-slot-btn.active {
  background: #eff6ff !important;
  border-color: #0969da !important;
  color: #0969da !important;
}

[data-theme="light"] .bm-mobile-slot-btn[data-mobile-slot="1"].active {
  background: rgba(0, 196, 230, 0.12) !important;
  border-color: #0092b3 !important;
  color: #04141f !important;
}

[data-theme="light"] .bm-mobile-slot-btn[data-mobile-slot="2"].active {
  background: rgba(255, 152, 0, 0.12) !important;
  border-color: #e65100 !important;
  color: #1a0800 !important;
}

[data-theme="light"] .bm-slot-col {
  background: #ffffff !important;
  border: 1px solid #d0d7de !important;
  box-shadow: 0 1px 3px rgba(27, 31, 36, 0.06) !important;
}

[data-theme="light"] .bm-slot-header {
  border-bottom-color: #e1e4e8 !important;
}

[data-theme="light"] .bm-slot-name {
  color: #1f2328 !important;
}

[data-theme="light"] .bm-slot-count {
  color: #57606a !important;
}

[data-theme="light"] .bm-slot-bulk-bar {
  background: #f8fafc !important;
  border: 1px solid #d0d7de !important;
  color: #57606a !important;
}

[data-theme="light"] .btn-bulk-del {
  background: #fef2f2 !important;
  border: 1px solid #fca5a5 !important;
  color: #dc2626 !important;
}

[data-theme="light"] .btn-bulk-del:hover:not(.disabled) {
  background: #fee2e2 !important;
  color: #b91c1c !important;
}

[data-theme="light"] .bm-static-item {
  background: #ffffff !important;
  border: 1px solid #d0d7de !important;
  box-shadow: 0 1px 2px rgba(27, 31, 36, 0.04) !important;
}

[data-theme="light"] .bm-static-item:hover {
  background: #f6f8fa !important;
  border-color: #0969da !important;
}

[data-theme="light"] .bm-static-item.item-selected {
  background: #eff6ff !important;
  border-color: #0969da !important;
}

[data-theme="light"] .bm-static-item .bm-tg-num {
  color: #c2410c !important;
}

[data-theme="light"] .bm-static-item .bm-tg-name {
  color: #57606a !important;
}

[data-theme="light"] .bm-add-section {
  border-top-color: #e1e4e8 !important;
}

[data-theme="light"] .bm-add-label {
  color: #57606a !important;
}

[data-theme="light"] .bm-tg-input {
  background: #ffffff !important;
  border: 1px solid #d0d7de !important;
  color: #1f2328 !important;
}

[data-theme="light"] .bm-preset-select {
  background-color: #238142 !important;
  background: #238142 !important;
  border: 1px solid #1c6634 !important;
  color: #ffffff !important;
  color-scheme: dark;
}

[data-theme="light"] .bm-preset-select:hover {
  background: #2a944d !important;
  border-color: #38d672 !important;
}

[data-theme="light"] .bm-preset-select:focus {
  border-color: #4ade80 !important;
}

[data-theme="light"] .bm-tg-input:focus,
[data-theme="light"] .bm-preset-select:focus {
  border-color: #0969da !important;
}

[data-theme="light"] .btn-bm-add,
[data-theme="light"] .btn-bm-add-preset {
  background: #16a34a !important;
  border-color: #15803d !important;
  color: #ffffff !important;
}

[data-theme="light"] .btn-bm-add:hover,
[data-theme="light"] .btn-bm-add-preset:hover {
  background: #15803d !important;
}

[data-theme="light"] .bm-file-stat-summary {
  background: #f8fafc !important;
  border: 1px solid #d0d7de !important;
}

[data-theme="light"] .bm-stat-card {
  background: #ffffff !important;
  border: 1px solid #d0d7de !important;
  color: #1f2328 !important;
}

[data-theme="light"] .bm-preview-list {
  background: #f8fafc !important;
  border: 1px solid #d0d7de !important;
  color: #1f2328 !important;
}

[data-theme="light"] .bm-modal-loading {
  background: #eff6ff !important;
  border: 1px solid #bae6fd !important;
  color: #0284c7 !important;
}

/* 8. BM Extended Info Modal (bmInfoModal) */
[data-theme="light"] .bm-info-modal-header {
  border-bottom-color: #d0d7de !important;
}

[data-theme="light"] #bmInfoModalTitle {
  color: #0969da !important;
}

[data-theme="light"] .bm-info-target-badge {
  background: #eff6ff !important;
  border: 1px solid #bae6fd !important;
  color: #0284c7 !important;
}

[data-theme="light"] .bm-info-target-badge.is-green {
  background: #e6fcf5 !important;
  border-color: #86efac !important;
  color: #15803d !important;
}

[data-theme="light"] .bm-info-target-badge.is-white {
  background: #f6f8fa !important;
  border-color: #d0d7de !important;
  color: #1f2328 !important;
}

[data-theme="light"] .bm-info-tabs-bar {
  border-bottom-color: #d0d7de !important;
}

[data-theme="light"] .bm-info-tab {
  background: #f6f8fa !important;
  border: 1px solid #d0d7de !important;
  color: #57606a !important;
}

[data-theme="light"] .bm-info-tab:hover {
  background: #eff6ff !important;
  color: #0969da !important;
  border-color: #93c5fd !important;
}

[data-theme="light"] .bm-info-tab.active {
  background: #eff6ff !important;
  color: #0969da !important;
  border-color: #0969da !important;
  box-shadow: 0 1px 3px rgba(9, 105, 218, 0.2) !important;
}

[data-theme="light"] .bm-info-empty {
  background: #f6f8fa !important;
  border-color: #d0d7de !important;
}

[data-theme="light"] .bm-info-empty .bm-empty-title {
  color: #1f2328 !important;
}

[data-theme="light"] .bm-info-empty .bm-empty-text {
  color: #57606a !important;
}

[data-theme="light"] .bm-info-card {
  background: #ffffff !important;
  border: 1px solid #d0d7de !important;
  box-shadow: 0 1px 3px rgba(27, 31, 36, 0.06) !important;
}

[data-theme="light"] .bm-info-card-header {
  border-bottom-color: #e1e4e8 !important;
}

[data-theme="light"] .bm-info-card-title {
  color: #0969da !important;
}

[data-theme="light"] .bm-info-prop-label {
  color: #64748b !important;
}

[data-theme="light"] .bm-info-prop-val {
  color: #1f2328 !important;
}

[data-theme="light"] .bm-info-devices-wrap {
  border: 1px solid #d0d7de !important;
}

[data-theme="light"] .bm-info-devices-table th {
  background: #f6f8fa !important;
  color: #57606a !important;
  border-bottom: 1px solid #d0d7de !important;
}

[data-theme="light"] .bm-info-devices-table td {
  border-bottom: 1px solid #e1e4e8 !important;
  color: #1f2328 !important;
}

[data-theme="light"] .bm-device-slot-pill.is-online {
  background: #f0fdf4 !important;
  border: 1px solid #86efac !important;
  color: #16a34a !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .bm-device-slot-pill.is-offline {
  background: #fef2f2 !important;
  border: 1px solid #fca5a5 !important;
  color: #dc2626 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .bm-repeater-tech-section {
  border-top-color: #d0d7de !important;
}

[data-theme="light"] .bm-tech-section-title {
  color: #0969da !important;
}

[data-theme="light"] .bm-repeater-tech-card {
  background: #ffffff !important;
  border-color: #d0d7de !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .bm-tech-card-header {
  border-bottom-color: #e1e4e8 !important;
}

[data-theme="light"] .bm-tech-hw-label {
  color: #57606a !important;
}

[data-theme="light"] .bm-tech-status-badge {
  color: #0969da !important;
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
}

[data-theme="light"] .bm-tech-desc-box {
  border-top-color: #e1e4e8 !important;
}

[data-theme="light"] .bm-tech-desc-text {
  color: #1f2328 !important;
}

[data-theme="light"] .bm-map-link {
  color: #1d4ed8 !important;
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
}

[data-theme="light"] .bm-map-link:hover {
  background: #dbeafe !important;
}

[data-theme="light"] .bm-web-link {
  color: #0969da !important;
}

[data-theme="light"] .bm-web-link:hover {
  color: #0550ae !important;
}

[data-theme="light"] .bm-info-cross-note {
  background: #fff8e6 !important;
  border-color: #ffd580 !important;
  color: #925400 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .btn-bm-action-secondary {
  background: #f6f8fa !important;
  color: #24292f !important;
  border-color: #d0d7de !important;
}

[data-theme="light"] .btn-bm-action-secondary:hover {
  background: #eaeef2 !important;
  border-color: #0969da !important;
  color: #0969da !important;
}

[data-theme="light"] .bm-info-modal-footer {
  border-top-color: #d0d7de !important;
  background: #f6f8fa !important;
}

[data-theme="light"] .bm-info-modal-footer .btn-bm-info-back {
  background: #ffffff !important;
  border: 1px solid #d0d7de !important;
  color: #1f2328 !important;
}

[data-theme="light"] .bm-info-modal-footer .btn-bm-info-back:hover {
  background: #f3f4f6 !important;
  color: #0969da !important;
  border-color: #0969da !important;
}

/* 9. Search Modals (tgTxUseModal & callIdModal) */
[data-theme="light"] .quick-chips-label {
  color: #57606a !important;
}

[data-theme="light"] .quick-chip {
  background: #f1f5f9 !important;
  border: 1px solid #d0d7de !important;
  color: #1f2328 !important;
}

[data-theme="light"] .quick-chip:hover {
  background: #e2e8f0 !important;
  border-color: #0969da !important;
  color: #0969da !important;
}

[data-theme="light"] .search-meta-row {
  color: #475569 !important;
}

[data-theme="light"] .search-result-card {
  background: #ffffff !important;
  border: 1px solid #d0d7de !important;
  box-shadow: 0 1px 3px rgba(27, 31, 36, 0.04) !important;
}

[data-theme="light"] .search-result-card:hover {
  background: #f6f8fa !important;
  border-color: #0969da !important;
}

[data-theme="light"] .card-badge-call,
.theme-light .card-badge-call,
[data-theme="light"] .card-badge-id.card-badge-call,
.theme-light .card-badge-id.card-badge-call,
[data-theme="light"] #callIdModal .card-badge-call,
.theme-light #callIdModal .card-badge-call {
  background: #fef3c7 !important;
  border: 1.5px solid #b45309 !important;
  color: #78350f !important;
  font-weight: 800 !important;
}

[data-theme="light"] .card-badge-tg,
.theme-light .card-badge-tg,
[data-theme="light"] .card-badge-id.card-badge-tg,
.theme-light .card-badge-id.card-badge-tg,
[data-theme="light"] #tgtxModal .card-badge-tg,
.theme-light #tgtxModal .card-badge-tg {
  background: #e0f2fe !important;
  border: 1.5px solid #0284c7 !important;
  color: #075985 !important;
  font-weight: 800 !important;
}

[data-theme="light"] .dmr-id-text,
.theme-light .dmr-id-text,
[data-theme="light"] .search-result-card .dmr-id-text,
.theme-light .search-result-card .dmr-id-text,
[data-theme="light"] #callCustomNumber,
.theme-light #callCustomNumber,
[data-theme="light"] #callIdModal .dmr-id-text,
.theme-light #callIdModal .dmr-id-text {
  color: #14532d !important;
  font-weight: 700 !important;
}

[data-theme="light"] .card-id-wrapper,
.theme-light .card-id-wrapper {
  color: #334155 !important;
  font-weight: 600 !important;
}

[data-theme="light"] .card-primary-title {
  color: #1f2328 !important;
}

[data-theme="light"] .card-secondary-details {
  color: #475569 !important;
}

[data-theme="light"] .card-select-action {
  background: #eff6ff !important;
  border-color: #bae6fd !important;
  color: #0969da !important;
}

[data-theme="light"] .search-result-card:hover .card-select-action {
  background: #0969da !important;
  color: #ffffff !important;
}

[data-theme="light"] .btn-card-bm-info,
.theme-light .btn-card-bm-info {
  background: #eff6ff !important;
  border: 1px solid #93c5fd !important;
  color: #0369a1 !important;
  box-shadow: none !important;
}

[data-theme="light"] .btn-card-bm-info:hover,
.theme-light .btn-card-bm-info:hover {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3) !important;
}

[data-theme="light"] .bm-info-action-card,
.theme-light .bm-info-action-card {
  background: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
}

[data-theme="light"] .btn-bm-direct-call,
.theme-light .btn-bm-direct-call {
  background: #16a34a !important;
  border-color: #15803d !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(22, 163, 74, 0.25) !important;
}

[data-theme="light"] .btn-bm-direct-call:hover,
.theme-light .btn-bm-direct-call:hover {
  background: #15803d !important;
  border-color: #166534 !important;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.4) !important;
}

[data-theme="light"] .modal-db-stats-bar,
.theme-light .modal-db-stats-bar {
  background: transparent !important;
  border: none !important;
}

[data-theme="light"] .db-stat-pill,
.theme-light .db-stat-pill {
  background: #ffffff !important;
  border: 1px solid #d0d7de !important;
  color: #475569 !important;
}

[data-theme="light"] .db-stat-pill strong,
.theme-light .db-stat-pill strong {
  color: #0969da !important;
  font-weight: 700 !important;
}

[data-theme="light"] .db-stat-delta.delta-positive,
.theme-light .db-stat-delta.delta-positive {
  color: #1a7f37 !important;
}

[data-theme="light"] .db-stat-delta.delta-negative,
.theme-light .db-stat-delta.delta-negative {
  color: #cf222e !important;
}

[data-theme="light"] .db-stat-delta.delta-neutral,
.theme-light .db-stat-delta.delta-neutral {
  color: #57606a !important;
}

[data-theme="light"] .card-callsign-highlight,
.theme-light .card-callsign-highlight {
  color: #b45309 !important;
  font-weight: 800 !important;
}

/* 10. About Modal (Light Theme) */
[data-theme="light"] .about-modal-content {
  background: #ffffff !important;
  border-color: #d0d7de !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2), 0 0 24px rgba(9, 105, 218, 0.08) !important;
}

[data-theme="light"] .about-modal-header {
  border-bottom: 1px solid #d0d7de !important;
}

[data-theme="light"] .about-modal-header h3 {
  color: #0f172a !important;
  font-weight: 700 !important;
}

[data-theme="light"] #closeAboutBtn {
  color: #57606a !important;
}

[data-theme="light"] #closeAboutBtn:hover {
  color: #0f172a !important;
  background: #f0f2f5 !important;
}

[data-theme="light"] .badge-about-ver,
[data-theme="light"] .badge-about-apk-ver {
  background: #f0f2f5 !important;
  color: #475569 !important;
  border: 1px solid #d0d7de !important;
}

[data-theme="light"] .badge-about-date,
[data-theme="light"] .badge-about-apk-date {
  background: rgba(9, 105, 218, 0.08) !important;
  color: #0969da !important;
  border: 1px solid rgba(9, 105, 218, 0.28) !important;
}

/* Author Profile Card */
[data-theme="light"] .about-author-card {
  background: #f8fafc !important;
  border: 1px solid #d0d7de !important;
  box-shadow: 0 1px 4px rgba(27, 31, 36, 0.06) !important;
}

[data-theme="light"] .about-avatar-wrap {
  background: #ffffff !important;
  border-color: #0969da !important;
  box-shadow: 0 0 12px rgba(9, 105, 218, 0.25) !important;
}

[data-theme="light"] .about-author-name {
  color: #0f172a !important;
  font-weight: 600 !important;
}

[data-theme="light"] .about-author-prefix {
  color: #475569 !important;
  font-weight: 500 !important;
}

[data-theme="light"] .about-made-arm {
  color: #b45309 !important;
  font-weight: 700 !important;
}


[data-theme="light"] .about-flag-am {
  border-color: rgba(0, 0, 0, 0.15) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] .btn-reveal-email {
  background: rgba(9, 105, 218, 0.08) !important;
  border: 1px solid rgba(9, 105, 218, 0.35) !important;
  color: #0969da !important;
}

[data-theme="light"] .btn-reveal-email:hover {
  background: rgba(9, 105, 218, 0.16) !important;
  border-color: #0969da !important;
  box-shadow: 0 0 8px rgba(9, 105, 218, 0.25) !important;
}

[data-theme="light"] .about-email-img-box {
  background: #ffffff !important;
  border: 1px solid #d0d7de !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}

/* Credits Section */
[data-theme="light"] .about-credits-title {
  color: #0f172a !important;
  font-weight: 700 !important;
  border-bottom: 1px solid #d0d7de !important;
}

[data-theme="light"] .about-credit-card {
  background: #ffffff !important;
  border: 1px solid #d0d7de !important;
  box-shadow: 0 1px 3px rgba(27, 31, 36, 0.06) !important;
}

[data-theme="light"] .about-credit-card:hover {
  background: #f8fafc !important;
  border-color: #0969da !important;
  box-shadow: 0 2px 8px rgba(9, 105, 218, 0.12) !important;
}

[data-theme="light"] .about-lib-name {
  color: #0969da !important;
  font-weight: 700 !important;
}

[data-theme="light"] .about-lib-link {
  color: #0969da !important;
  border-bottom-color: rgba(9, 105, 218, 0.4) !important;
}

[data-theme="light"] .about-lib-link:hover {
  color: #0550ae !important;
  border-bottom-style: solid !important;
}

[data-theme="light"] .about-credit-author {
  color: #0f172a !important;
  font-weight: 600 !important;
}

[data-theme="light"] .about-credit-desc {
  color: #334155 !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

/* Scrollbars & Footer */
[data-theme="light"] .about-credits-list::-webkit-scrollbar-track,
[data-theme="light"] .about-modal-body::-webkit-scrollbar-track {
  background: #f0f2f5 !important;
}

[data-theme="light"] .about-credits-list::-webkit-scrollbar-thumb,
[data-theme="light"] .about-modal-body::-webkit-scrollbar-thumb {
  background: #d0d7de !important;
}

[data-theme="light"] .about-credits-list::-webkit-scrollbar-thumb:hover,
[data-theme="light"] .about-modal-body::-webkit-scrollbar-thumb:hover {
  background: #afb8c1 !important;
}

[data-theme="light"] .about-timer-progress-track {
  background: #e2e8f0 !important;
}

[data-theme="light"] .about-modal-footer {
  border-top: 1px solid #d0d7de !important;
  background: #f6f8fa !important;
}


/* 11. Presets and Audio Controls */
[data-theme="light"] .btn-dsdfme-preset,
[data-theme="light"] .btn-audio-preset,
[data-theme="light"] .btn-agc-profile {
  background: #f6f8fa !important;
  border: 1px solid #d0d7de !important;
  color: #1f2328 !important;
}

[data-theme="light"] .btn-dsdfme-preset:hover,
[data-theme="light"] .btn-audio-preset:hover,
[data-theme="light"] .btn-agc-profile:hover {
  background: #eef2f6 !important;
  border-color: #0969da !important;
  color: #0969da !important;
}

[data-theme="light"] .btn-dsdfme-preset.active,
[data-theme="light"] .btn-audio-preset.active,
[data-theme="light"] .btn-agc-profile.active {
  background: #eff6ff !important;
  border-color: #0969da !important;
  color: #0969da !important;
  box-shadow: 0 0 8px rgba(9, 105, 218, 0.2) !important;
}

/* 12. Orientation Shield Button & Header Controls */
[data-theme="light"] .btn-orientation-dismiss:hover {
  background: #eef2f6 !important;
  color: #1f2328 !important;
  border-color: #0969da !important;
}

[data-theme="light"] .header-settings-btn {
  background: #f6f8fa !important;
  border-color: #d0d7de !important;
  color: #57606a !important;
}

[data-theme="light"] .header-settings-btn:hover {
  background: #eef2f6 !important;
  border-color: #0969da !important;
  color: #0969da !important;
}

[data-theme="light"] .header-hotspot-select {
  background-color: #238142 !important;
  background: #238142 !important;
  border: 1px solid #1c6634 !important;
  color: #ffffff !important;
  color-scheme: dark;
}

[data-theme="light"] .form-group-checkbox {
  border-top-color: #e1e4e8 !important;
  color: #1f2328 !important;
}

[data-theme="light"] .form-group-checkbox strong {
  color: #1f2328 !important;
}

[data-theme="light"] .form-group label {
  color: #1f2328 !important;
}

/* Base styling for slider limit labels */
.slider-limit-label {
  font-size: 0.72rem;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  color: var(--text-muted, #8b949e);
  flex-shrink: 0;
  user-select: none;
}

/* =========================================================
   Light Theme Audio & Modal Components Expansion (v0.35)
   DSD-FME Vocoder, Audio RX & TX DSP, Dynamic TG, Search Bar
   ========================================================= */

/* 1. Dynamic TG Tab in BM Modal */
[data-theme="light"] .bm-dyn-top-bar {
  background: #f8fafc !important;
  border: 1px solid #d0d7de !important;
}

[data-theme="light"] .bm-dyn-header-title {
  color: #1f2328 !important;
}

[data-theme="light"] .bm-dyn-header-hint {
  color: #57606a !important;
}

[data-theme="light"] .btn-bm-drop-all {
  background: #fef2f2 !important;
  border: 1px solid #fca5a5 !important;
  color: #dc2626 !important;
}

[data-theme="light"] .btn-bm-drop-all:hover:not(:disabled) {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25) !important;
}

[data-theme="light"] .btn-drop-slot-dyn {
  background: #fef2f2 !important;
  border: 1px solid #fca5a5 !important;
  color: #dc2626 !important;
}

[data-theme="light"] .btn-drop-slot-dyn:hover {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
}

[data-theme="light"] .bm-dyn-list .bm-empty-msg {
  color: #57606a !important;
}

/* 2. Search Modals Input Bar (TG TX Use & Call ID) */
[data-theme="light"] .search-bar-row {
  background: #ffffff !important;
  border: 1px solid #d0d7de !important;
  box-shadow: 0 1px 2px rgba(27, 31, 36, 0.04) !important;
}

[data-theme="light"] .search-bar-row:focus-within {
  border-color: #0969da !important;
  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.15) !important;
}

[data-theme="light"] .search-main-input {
  color: #1f2328 !important;
}

[data-theme="light"] .search-main-input::placeholder {
  color: #8c959f !important;
}

[data-theme="light"] .search-bar-icon {
  color: #57606a !important;
}

[data-theme="light"] .btn-clear-search {
  color: #8c959f !important;
}

[data-theme="light"] .btn-clear-search:hover {
  color: #cf222e !important;
}

[data-theme="light"] .custom-id-card {
  background: #f8fafc !important;
  border: 1px solid #d0d7de !important;
}

[data-theme="light"] .custom-card-title {
  color: #1f2328 !important;
}

[data-theme="light"] .custom-card-desc {
  color: #57606a !important;
}

/* 3. DSD-FME Vocoder Modal */
[data-theme="light"] .badge-dsdfme-ver {
  background: #eff6ff !important;
  border: 1px solid #bae6fd !important;
  color: #0284c7 !important;
}

[data-theme="light"] .dsdfme-presets-panel {
  background: #f6f8fa !important;
  border: 1px solid #d0d7de !important;
}

[data-theme="light"] .dsdfme-presets-title {
  color: #57606a !important;
}

[data-theme="light"] .btn-preset-save,
[data-theme="light"] .btn-audio-save-preset {
  background: #ffffff !important;
  border: 1px solid #d0d7de !important;
  color: #0969da !important;
}

[data-theme="light"] .btn-preset-save:hover,
[data-theme="light"] .btn-audio-save-preset:hover {
  background: #eff6ff !important;
  border-color: #0969da !important;
  color: #0969da !important;
}

[data-theme="light"] .btn-preset-save.saved-flash {
  background: #dcfce7 !important;
  border-color: #86efac !important;
  color: #15803d !important;
}

[data-theme="light"] .dsdfme-section {
  background: #ffffff !important;
  border: 1px solid #d0d7de !important;
  box-shadow: 0 1px 3px rgba(27, 31, 36, 0.04) !important;
}

[data-theme="light"] .dsdfme-section-title {
  color: #0969da !important;
}

[data-theme="light"] .dsdfme-label,
[data-theme="light"] .dsdfme-field strong {
  color: #1f2328 !important;
}

[data-theme="light"] .dsdfme-checkbox-label {
  color: #1f2328 !important;
}

[data-theme="light"] .dsdfme-checkbox-label strong {
  color: #1f2328 !important;
}

[data-theme="light"] .dsdfme-val-badge {
  background: #0969da !important;
  color: #ffffff !important;
}

[data-theme="light"] .dsdfme-field small,
[data-theme="light"] .form-hint {
  color: #57606a !important;
}

[data-theme="light"] .slider-limit-label {
  color: #57606a !important;
}

[data-theme="light"] .dsdfme-toggle-group {
  background: #f8fafc !important;
  border: 1px solid #d0d7de !important;
}

[data-theme="light"] .dsdfme-toggle-btn {
  color: #1f2328 !important;
}

[data-theme="light"] .dsdfme-toggle-btn input[type="radio"] {
  accent-color: #0969da !important;
}

[data-theme="light"] .dsdfme-modal-footer {
  border-top-color: #d0d7de !important;
}

/* 4. Audio RX & TX DSP Modals */
[data-theme="light"] #audioRxModal .badge-audio-mode {
  background: #ecfdf5 !important;
  color: #15803d !important;
  border: 1px solid #86efac !important;
}

[data-theme="light"] #audioTxModal .badge-audio-mode {
  background: #fef2f2 !important;
  color: #dc2626 !important;
  border: 1px solid #fca5a5 !important;
}

[data-theme="light"] .audio-presets-panel {
  background: #f6f8fa !important;
  border: 1px solid #d0d7de !important;
}

[data-theme="light"] .audio-presets-title {
  color: #57606a !important;
}

[data-theme="light"] .btn-audio-rx-preset,
[data-theme="light"] .btn-audio-tx-preset {
  background: #ffffff !important;
  border: 1px solid #d0d7de !important;
  color: #1f2328 !important;
}

[data-theme="light"] .btn-audio-rx-preset:hover,
[data-theme="light"] .btn-audio-tx-preset:hover {
  background: #eef2f6 !important;
  border-color: #0969da !important;
  color: #0969da !important;
}

[data-theme="light"] .btn-audio-rx-preset.active,
[data-theme="light"] .btn-audio-tx-preset.active {
  background: #eff6ff !important;
  border-color: #0969da !important;
  color: #0969da !important;
  box-shadow: 0 0 8px rgba(9, 105, 218, 0.2) !important;
}

[data-theme="light"] .audio-section {
  background: #ffffff !important;
  border: 1px solid #d0d7de !important;
  box-shadow: 0 1px 3px rgba(27, 31, 36, 0.04) !important;
}

[data-theme="light"] .audio-section-header {
  border-bottom-color: #e1e4e8 !important;
}

[data-theme="light"] .audio-section-title {
  color: #0969da !important;
}

[data-theme="light"] .audio-val-badge {
  background: #0969da !important;
  color: #ffffff !important;
}

[data-theme="light"] .audio-section label,
[data-theme="light"] .audio-label {
  color: #1f2328 !important;
}

[data-theme="light"] .audio-section small,
[data-theme="light"] .audio-section .form-hint {
  color: #57606a !important;
}

[data-theme="light"] .audio-checkbox-label {
  color: #1f2328 !important;
}

[data-theme="light"] .audio-checkbox-label strong {
  color: #1f2328 !important;
}

[data-theme="light"] #badgeAgcProfile {
  background: #0969da !important;
  color: #ffffff !important;
}

[data-theme="light"] .eq-col {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

[data-theme="light"] .eq-band-title {
  color: #1f2328 !important;
}

[data-theme="light"] .eq-val-badge {
  background: #0969da !important;
  color: #ffffff !important;
}

[data-theme="light"] .btn-audio-action-sm {
  background: #f6f8fa !important;
  border: 1px solid #d0d7de !important;
  color: #57606a !important;
}

[data-theme="light"] .btn-audio-action-sm:hover {
  background: #eef2f6 !important;
  border-color: #0969da !important;
  color: #0969da !important;
}

[data-theme="light"] .audio-modal-footer {
  border-top-color: #d0d7de !important;
}

/* 5. Sliders (range inputs) in Light Theme */
[data-theme="light"] .form-slider {
  background: #e2e8f0 !important;
  border: 1px solid #d0d7de !important;
}

[data-theme="light"] .form-slider::-webkit-slider-thumb {
  background: #0969da !important;
  box-shadow: 0 0 6px rgba(9, 105, 218, 0.4) !important;
}

[data-theme="light"] .form-slider::-moz-range-thumb {
  background: #0969da !important;
  box-shadow: 0 0 6px rgba(9, 105, 218, 0.4) !important;
}

/* 6. Live Log Controls in Light Theme */
[data-theme="light"] .log-height-toggle-btn {
  background: #f6f8fa !important;
  border: 1px solid #d0d7de !important;
  color: #57606a !important;
}

[data-theme="light"] .log-height-toggle-btn:hover {
  background: #eef2f6 !important;
  border-color: #0969da !important;
  color: #0969da !important;
}

[data-theme="light"] .log-height-toggle-btn.is-hotspot-mode {
  border-color: #0969da !important;
  color: #0969da !important;
  background: #eff6ff !important;
}

/* 8. File Import Confirmation Modal */
[data-theme="light"] .bm-preview-title,
[data-theme="light"] .bm-confirm-prompt {
  color: #1f2328 !important;
}

[data-theme="light"] .bm-stat-label {
  color: #57606a !important;
}

[data-theme="light"] .bm-stat-val,
[data-theme="light"] .bm-stat-num {
  color: #1f2328 !important;
}

[data-theme="light"] .bm-stat-desc {
  color: #57606a !important;
}

[data-theme="light"] .bm-confirm-actions {
  border-top-color: #d0d7de !important;
}

/* 9. Settings Modal Action Buttons, BM Info Badges & Warn Loss (Light Theme High Contrast) */
[data-theme="light"] .settings-action-block,
[data-theme="light"] .settings-exit-block,
[data-theme="light"] .settings-apk-block,
[data-theme="light"] .settings-server-block {
  border-top-color: #d0d7de !important;
}

[data-theme="light"] .settings-apk-title {
  color: #0969da !important;
}

[data-theme="light"] .settings-server-title {
  color: #92400e !important;
}

[data-theme="light"] .btn-server-restart,
[data-theme="light"] #btnRestartServer {
  background: #fef3c7 !important;
  border: 1px solid #d97706 !important;
  color: #92400e !important;
}

[data-theme="light"] .btn-server-restart:hover,
[data-theme="light"] #btnRestartServer:hover {
  background: #fde68a !important;
  border-color: #b45309 !important;
  color: #78350f !important;
}

[data-theme="light"] .btn-app-exit,
[data-theme="light"] #btnExitApp {
  background: #fee2e2 !important;
  border: 1px solid #ef4444 !important;
  color: #b91c1c !important;
}

[data-theme="light"] .btn-app-exit:hover,
[data-theme="light"] #btnExitApp:hover {
  background: #fecaca !important;
  border-color: #dc2626 !important;
  color: #991b1b !important;
}

[data-theme="light"] .bm-info-badge-online {
  background: #dcfce7 !important;
  border: 1px solid #22c55e !important;
  color: #15803d !important;
}

[data-theme="light"] .bm-info-badge-offline {
  background: #fee2e2 !important;
  border: 1px solid #ef4444 !important;
  color: #b91c1c !important;
}

[data-theme="light"] .bm-banner-ping .loss-val-row.loss-warn {
  color: #b45309 !important;
}

/* ==========================================================================
   BrandMeister Server Benchmark / Ping Test Modal & Button
   ========================================================================== */

.btn-bm-benchmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 38px;
  margin-top: 24px;
  padding: 0 14px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border: 1px solid #3b82f6;
  border-radius: 8px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
  transition: all 0.2s ease;
}

.btn-bm-benchmark:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  border-color: #60a5fa;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
}

.btn-bm-benchmark:active {
  transform: translateY(0);
}

.btn-bm-benchmark .btn-icon {
  font-size: 14px;
  filter: drop-shadow(0 0 4px rgba(250, 204, 21, 0.6));
}

/* Modal Content Size */
.bm-bench-modal-content {
  max-width: 680px;
  width: 95%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.bm-bench-body {
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Benchmark Progress Card */
.bm-bench-progress-card {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bm-bench-progress-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.bm-bench-cur-label {
  color: var(--text-muted, #94a3b8);
  font-weight: 500;
}

.bm-bench-counter {
  font-weight: 700;
  color: #38bdf8;
  font-variant-numeric: tabular-nums;
}

/* Current Server Card */
.bm-bench-server-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.bm-bench-server-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.bm-bench-server-flag {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}

.bm-bench-server-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.bm-bench-server-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main, #f8fafc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bm-bench-live-stats {
  display: flex;
  gap: 14px;
  align-items: center;
}

.bm-bench-stat-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.bm-bench-stat-label {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bm-bench-stat-val {
  font-size: 16px;
  font-weight: 700;
  color: #22c55e;
  font-variant-numeric: tabular-nums;
}

/* Progress bar */
.bm-bench-bar-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bm-bench-bar-track {
  flex: 1;
  height: 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  overflow: hidden;
}

.bm-bench-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #10b981);
  border-radius: 5px;
  transition: width 0.2s ease;
}

.bm-bench-bar-percent {
  font-size: 13px;
  font-weight: 700;
  color: #38bdf8;
  width: 42px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Controls */
.bm-bench-card-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.bm-bench-card-actions button {
  flex: 1;
  height: 40px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.18s ease;
  user-select: none;
  box-sizing: border-box;
  text-decoration: none;
}

.bm-bench-card-actions button .btn-icon {
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#btnBmBenchStart {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  border: 1px solid rgba(56, 189, 248, 0.4);
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35);
}

#btnBmBenchStart:hover {
  background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 100%);
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(2, 132, 199, 0.45);
}

#btnBmBenchStart:active {
  background: #0284c7;
  transform: translateY(1px);
}

#btnBmBenchStop {
  background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(239, 68, 68, 0.5) !important;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.35) !important;
}

#btnBmBenchStop:hover {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 8px rgba(239, 68, 68, 0.45) !important;
}

#btnBmBenchStop:active {
  background: #991b1b !important;
  transform: translateY(1px);
}

/* Results section */
.bm-bench-results-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bm-bench-results-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.bm-bench-results-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main, #f1f5f9);
}

.bm-bench-results-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.bm-bench-results-hint {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
}

/* Table */
.bm-bench-table-wrapper {
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.4);
}

.bm-bench-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.bm-bench-table thead {
  position: sticky;
  top: 0;
  background: #1e293b;
  z-index: 2;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.bm-bench-table th {
  padding: 8px 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #94a3b8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 600;
}

.bm-bench-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: middle;
}

.bm-bench-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

.bm-bench-table tbody tr.bench-current-active {
  background: rgba(59, 130, 246, 0.12);
  border-left: 3px solid #3b82f6;
}

.bm-bench-empty-cell {
  text-align: center;
  padding: 28px !important;
  color: var(--text-muted, #94a3b8);
  font-style: italic;
}

/* Rank badges */
.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}

.rank-badge.rank-1 {
  background: #fef08a;
  color: #854d0e;
  border: 1px solid #eab308;
}

.rank-badge.rank-2 {
  background: #e2e8f0;
  color: #475569;
  border: 1px solid #cbd5e1;
}

.rank-badge.rank-3 {
  background: #fed7aa;
  color: #9a3412;
  border: 1px solid #f97316;
}

.rank-badge.rank-other {
  color: var(--text-muted, #94a3b8);
}

/* Server cell */
.bench-server-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bench-server-flag {
  font-size: 16px;
  line-height: 1;
}

.bench-server-label {
  font-weight: 500;
  color: var(--text-main, #f8fafc);
}

.bench-current-tag {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.4);
  margin-left: 6px;
}

/* Ping & Loss pills */
.bench-ping-pill {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.bench-ping-pill.ping-fast {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.bench-ping-pill.ping-good {
  background: rgba(14, 165, 233, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(14, 165, 233, 0.3);
}

.bench-ping-pill.ping-fair {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.bench-ping-pill.ping-slow {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.bench-ping-pill.ping-dead {
  background: rgba(148, 163, 184, 0.1);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.bench-loss-pill {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.bench-loss-pill.loss-zero {
  color: var(--text-muted, #94a3b8);
}

.bench-loss-pill.loss-bad {
  color: #f87171;
  font-weight: 600;
}

/* Select button */
.btn-bench-select {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: #60a5fa;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-bench-select:hover:not(:disabled) {
  background: #2563eb;
  color: #ffffff;
  border-color: #3b82f6;
}

.btn-bench-select:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-bench-select.is-selected {
  background: #10b981;
  color: #ffffff;
  border-color: #059669;
  cursor: default;
}

/* Light Theme overrides */
[data-theme="light"] .btn-bm-benchmark {
  background: linear-gradient(135deg, #0969da, #0550ae) !important;
  border-color: #0969da !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(9, 105, 218, 0.2) !important;
}

[data-theme="light"] .btn-bm-benchmark:hover {
  background: linear-gradient(135deg, #0550ae, #033d8b) !important;
}

[data-theme="light"] .bm-bench-progress-card {
  background: #f8fafc !important;
  border: 1px solid #d0d7de !important;
}

[data-theme="light"] .bm-bench-cur-label {
  color: #57606a !important;
}

[data-theme="light"] .bm-bench-counter {
  color: #0969da !important;
}

[data-theme="light"] .bm-bench-server-card {
  background: #ffffff !important;
  border: 1px solid #d0d7de !important;
  box-shadow: 0 1px 3px rgba(27, 31, 36, 0.04) !important;
}

[data-theme="light"] .bm-bench-server-name {
  color: #1f2328 !important;
}

[data-theme="light"] .bm-bench-stat-label {
  color: #57606a !important;
}

[data-theme="light"] .bm-bench-stat-val {
  color: #166534 !important;
}

[data-theme="light"] .bm-bench-bar-track {
  background: #e1e4e8 !important;
}

[data-theme="light"] .bm-bench-bar-percent {
  color: #0969da !important;
}

[data-theme="light"] #btnBmBenchStart {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 2px 5px rgba(2, 132, 199, 0.25) !important;
}

[data-theme="light"] #btnBmBenchStop {
  background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  border-color: #b91c1c !important;
  box-shadow: 0 2px 5px rgba(220, 38, 38, 0.25) !important;
}

[data-theme="light"] #btnBmBenchStop:hover {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
  border-color: #ef4444 !important;
}

[data-theme="light"] .bm-bench-results-title {
  color: #1f2328 !important;
}

[data-theme="light"] .bm-bench-results-badge {
  background: #eff6ff !important;
  color: #0969da !important;
  border-color: #bfdbfe !important;
}

[data-theme="light"] .bm-bench-results-hint {
  color: #57606a !important;
}

[data-theme="light"] .bm-bench-table-wrapper {
  background: #ffffff !important;
  border: 1px solid #d0d7de !important;
}

[data-theme="light"] .bm-bench-table thead {
  background: #f6f8fa !important;
}

[data-theme="light"] .bm-bench-table th {
  color: #57606a !important;
  border-bottom: 1px solid #d0d7de !important;
}

[data-theme="light"] .bm-bench-table td {
  border-bottom: 1px solid #eaeef2 !important;
}

[data-theme="light"] .bm-bench-table tbody tr:hover {
  background: #f6f8fa !important;
}

[data-theme="light"] .bm-bench-table tbody tr.bench-current-active {
  background: #eff6ff !important;
  border-left-color: #0969da !important;
}

[data-theme="light"] .bench-server-label {
  color: #1f2328 !important;
}

[data-theme="light"] .bm-bench-empty-cell {
  color: #57606a !important;
}

[data-theme="light"] .bench-ping-pill.ping-fast {
  background: #dcfce7 !important;
  color: #15803d !important;
  border-color: #86efac !important;
}

[data-theme="light"] .bench-ping-pill.ping-good {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  border-color: #7dd3fc !important;
}

[data-theme="light"] .bench-ping-pill.ping-fair {
  background: #fef3c7 !important;
  color: #b45309 !important;
  border-color: #fde68a !important;
}

[data-theme="light"] .bench-ping-pill.ping-slow {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  border-color: #fca5a5 !important;
}

[data-theme="light"] .bench-ping-pill.ping-dead {
  background: #f1f5f9 !important;
  color: #64748b !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .btn-bench-select {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #0969da !important;
}

[data-theme="light"] .btn-bench-select:hover:not(:disabled) {
  background: #0969da !important;
  color: #ffffff !important;
  border-color: #0969da !important;
}

/* Hotspot Card Auto-tune TG BM Checkbox & Lock Icon */
.hs-lock-icon {
  margin-left: 6px;
  font-size: 0.95em;
  vertical-align: middle;
  cursor: help;
  display: inline-block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.hs-card-autotg-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  margin-left: auto;
  color: var(--text-primary, #c9d1d9);
  padding: 3px 6px;
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease;
}

.hs-card-autotg-label:hover {
  background: rgba(88, 166, 255, 0.08);
}

.hs-card-autotg-label input[type="checkbox"] {
  cursor: pointer;
  width: 15px;
  height: 15px;
  accent-color: #58a6ff;
  margin: 0;
}

[data-theme="light"] .hs-card-autotg-label {
  color: #24292f;
}

[data-theme="light"] .hs-card-autotg-label:hover {
  background: rgba(9, 105, 218, 0.08);
}

/* ── BLE PTT ────────────────────────────────────────────── */

.ble-ptt-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  transition: background 0.25s, color 0.25s;
}

.ble-ptt-status-disconnected {
  background: rgba(255, 255, 255, 0.07);
  color: #8b949e;
}

.ble-ptt-status-scanning {
  background: rgba(88, 166, 255, 0.15);
  color: #58a6ff;
}

.ble-ptt-status-connecting {
  background: rgba(255, 170, 0, 0.15);
  color: #ffaa00;
  animation: blePttBlink 0.9s ease-in-out infinite;
}

.ble-ptt-status-connected {
  background: rgba(35, 134, 54, 0.2);
  color: #56d364;
}

.ble-ptt-status-configured {
  background: rgba(35, 134, 54, 0.25);
  color: #3fb950;
  border: 1px solid rgba(63, 185, 80, 0.3);
}

@keyframes blePttBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* Scan list */
.ble-scan-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  margin-bottom: 5px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  flex-wrap: nowrap;
}

.ble-scan-name {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ble-scan-addr {
  font-size: 0.72rem;
  color: #8b949e;
  white-space: nowrap;
  font-family: monospace;
}

.ble-scan-empty {
  text-align: center;
  padding: 12px;
  color: #8b949e;
  font-size: 0.83rem;
}

/* Device card */
.ble-device-card {
  padding: 8px 12px;
  background: rgba(35, 134, 54, 0.1);
  border: 1px solid rgba(63, 185, 80, 0.2);
  border-radius: 8px;
}

/* Buttons */
.btn-xs-primary {
  padding: 4px 12px;
  border-radius: 5px;
  border: none;
  background: #238636;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s;
}
.btn-xs-primary:hover { background: #2ea043; }

.btn-xs-danger {
  padding: 3px 9px;
  border-radius: 5px;
  border: none;
  background: rgba(218, 54, 51, 0.2);
  color: #f85149;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s;
}
.btn-xs-danger:hover { background: rgba(218, 54, 51, 0.38); }

/* Light theme overrides */
[data-theme="light"] .ble-scan-item {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.09);
}
[data-theme="light"] .ble-scan-name { color: #24292f; }
[data-theme="light"] .ble-scan-addr { color: #57606a; }
[data-theme="light"] .ble-device-card {
  background: rgba(35, 134, 54, 0.07);
  border-color: rgba(35, 134, 54, 0.25);
}
[data-theme="light"] .ble-ptt-status-disconnected {
  background: rgba(0,0,0,0.06);
  color: #57606a;
}

/* APK Update Button States */
.btn-apk-update-disabled {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #8b949e !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  opacity: 0.6 !important;
  box-shadow: none !important;
}
[data-theme="light"] .btn-apk-update-disabled {
  background: #f1f3f5 !important;
  border: 1px solid #d0d7de !important;
  color: #8c959f !important;
}

.btn-apk-update-active {
  background: #238636 !important;
  border: 1px solid #2ea043 !important;
  color: #ffffff !important;
  cursor: pointer !important;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(35, 134, 54, 0.35) !important;
}
.btn-apk-update-active:hover {
  background: #2ea043 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   AUDIO RECORDER & FULL-FEATURED PLAYER SYSTEM
   ═══════════════════════════════════════════════════════════════════ */

/* Header Hotspot REC Button (3-state letter R indicator & toggle) */
.header-rec-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  border-radius: 6px;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.1s ease, box-shadow 0.18s ease;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  flex-shrink: 0;
  line-height: 1;
}

.header-rec-btn:active {
  transform: scale(0.92);
}

.header-rec-btn .rec-timer {
  display: none !important;
}

/* 1. ВЫКЛЮЧЕНО: буква R серая, запись не производится */
.header-rec-btn.rec-off,
.header-rec-btn:not(.rec-standby):not(.recording) {
  background: rgba(120, 130, 140, 0.08);
  border: 1px solid rgba(130, 140, 150, 0.25);
  color: #808a93;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}
.header-rec-btn.rec-off:hover,
.header-rec-btn:not(.rec-standby):not(.recording):hover {
  background: rgba(140, 150, 160, 0.16);
  border-color: rgba(160, 170, 180, 0.45);
  color: #adb5bd;
}

/* 2. АВТОЗАПИСЬ ВКЛЮЧЕНА (ОЖИДАНИЕ): буква R темно-красная, потока нет */
.header-rec-btn.rec-standby {
  background: rgba(40, 10, 10, 0.5);
  border: 1px solid rgba(139, 0, 0, 0.55);
  color: #8b0000;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
.header-rec-btn.rec-standby:hover {
  background: rgba(60, 15, 15, 0.65);
  border-color: rgba(175, 20, 20, 0.75);
  color: #aa1818;
}

/* 3. ЗАПИСЬ ИДЕТ: буква R белая, фон мерцающий ярко-красный */
.header-rec-btn.recording {
  color: #ffffff !important;
  background: #dc2626;
  border-color: #ef4444;
  animation: rec-r-pulse 1.3s infinite ease-in-out;
}
.header-rec-btn.recording .rec-letter {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

@keyframes rec-r-pulse {
  0%, 100% {
    color: #ffffff;
    border-color: rgba(239, 68, 68, 0.7);
    background: rgba(185, 28, 28, 0.85);
    box-shadow: 0 0 6px rgba(220, 38, 38, 0.45);
  }
  50% {
    color: #ffffff;
    border-color: rgba(254, 202, 202, 0.95);
    background: rgba(239, 68, 68, 1);
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.9), inset 0 0 5px rgba(255, 255, 255, 0.35);
  }
}

/* Light Theme overrides */
[data-theme="light"] .header-rec-btn.rec-off,
[data-theme="light"] .header-rec-btn:not(.rec-standby):not(.recording) {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.18);
  color: #768390;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .header-rec-btn.rec-off:hover,
[data-theme="light"] .header-rec-btn:not(.rec-standby):not(.recording):hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.3);
  color: #444c56;
}

[data-theme="light"] .header-rec-btn.rec-standby {
  background: rgba(139, 0, 0, 0.08);
  border-color: rgba(139, 0, 0, 0.35);
  color: #8b0000;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .header-rec-btn.rec-standby:hover {
  background: rgba(139, 0, 0, 0.15);
  border-color: rgba(139, 0, 0, 0.55);
  color: #a81c1c;
}

[data-theme="light"] .header-rec-btn.recording {
  color: #ffffff !important;
  background: #dc2626;
  border-color: #b91c1c;
  animation: rec-r-pulse-light 1.3s infinite ease-in-out;
}
[data-theme="light"] .header-rec-btn.recording .rec-letter {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
@keyframes rec-r-pulse-light {
  0%, 100% {
    color: #ffffff;
    border-color: rgba(220, 38, 38, 0.8);
    background: rgba(220, 38, 38, 0.9);
    box-shadow: 0 0 6px rgba(220, 38, 38, 0.45);
  }
  50% {
    color: #ffffff;
    border-color: rgba(255, 100, 100, 1);
    background: rgba(245, 50, 50, 1);
    box-shadow: 0 0 16px rgba(245, 50, 50, 0.85), inset 0 0 5px rgba(255, 255, 255, 0.35);
  }
}

/* Log Action Buttons: Tape (Cassette) & Transcript (Scroll) */
.log-recordings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent !important;
  border: none !important;
}

.log-recordings-btn .cassette-btn-img,
.log-recordings-btn .player-btn-img {
  height: 30px !important;
  max-height: 30px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain;
  display: block;
  pointer-events: none;
  image-rendering: -webkit-optimize-contrast;
}

.log-tx-summary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent !important;
  border: none !important;
}

.log-tx-summary-btn .log-tx-summary-img {
  height: 30px !important;
  max-height: 30px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain;
  display: block;
  pointer-events: none;
  image-rendering: -webkit-optimize-contrast;
}

/* Last Heard table inline play button (Log_PLAY icon) */
.log-play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 4px !important;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
  margin: 0 auto;
  vertical-align: middle;
  padding: 0;
  outline: none;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.log-play-btn img.log-play-img {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
  border-radius: 4px;
  pointer-events: none;
}
.log-play-btn:hover {
  transform: scale(1.18);
  filter: brightness(1.15);
}
.log-play-btn.playing {
  animation: pulse-play-icon 1.2s infinite ease-in-out;
  filter: drop-shadow(0 0 5px #00e5ff);
}
@keyframes pulse-play-icon {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.65; transform: scale(1.18); }
}

/* =========================================================
   Live Monitor Inline Audio Player Panel
   Positioned directly under logHotspotTabs (at the red line),
   smoothly pushes down the Last Heard table below it.
   ========================================================= */
.live-player-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 2px 4px 6px 4px;
  padding: 4px 12px;
  background: var(--bg-monitor-table, #0f1512);
  border: 1px solid var(--border-monitor, #28372f);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  flex-shrink: 0;
  transition: all 0.2s ease;
  animation: expandPlayerPanel 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes expandPlayerPanel {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

[data-theme="light"] .live-player-panel {
  background: var(--bg-monitor, #f2f7f4);
  border-color: var(--border-monitor, #c8d8cf);
  box-shadow: 0 4px 16px rgba(140, 149, 159, 0.15);
}

.live-player-card {
  display: flex;
  flex-direction: column;
  
}

/* Top bar: station info + meta */
.live-player-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.live-player-station-info {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.live-player-flag {
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.live-player-callsign {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-amber, #ffb800);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.live-player-name {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.live-player-meta-info {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.live-player-close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.95rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  line-height: 1;
  transition: all 0.15s ease;
  margin-left: 2px;
}
.live-player-close-btn:hover {
  background: rgba(248, 81, 73, 0.15);
  color: #f85149;
}

/* Scrubber row */
.live-player-scrubber-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.live-player-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 38px;
}
.live-player-time.current {
  text-align: right;
  color: #2ecc71;
}
.live-player-time.total {
  text-align: left;
}

/* Controls row: strictly single line containing both tools and playback buttons */
.live-player-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  padding: 2px 0;
  width: 100%;
  box-sizing: border-box;
}

/* Tools Cluster (Left): 6 buttons evenly filling the freed-up area */
.rec-tools-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  margin-right: 0;
}
.rec-tool-btn {
  width: 100%;
  min-width: 0;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted, #8b949e);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  padding: 0;
  box-sizing: border-box;
}
.rec-tool-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}
.rec-tool-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-primary, #ffffff);
  border-color: rgba(255, 255, 255, 0.25);
}
.rec-tool-btn.danger:hover {
  background: rgba(248, 81, 73, 0.18);
  color: #f85149;
  border-color: rgba(248, 81, 73, 0.4);
}
[data-theme="light"] .rec-tool-btn {
  border-color: #d0d7de;
  background: #ffffff;
  color: #57606a;
}
[data-theme="light"] .rec-tool-btn:hover {
  background: #f3f4f6;
  color: #24292f;
}

/* Solo (S) Button - Amber active state */
.rec-solo-btn {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 800;
  font-size: 24px;
  line-height: 1;
  user-select: none;
  transition: all 0.18s ease;
}
.rec-solo-btn .rec-solo-text {
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 0.2px;
}
.rec-solo-btn.active {
  background: rgba(243, 156, 18, 0.18) !important;
  border-color: #f39c12 !important;
  color: #f39c12 !important;
  box-shadow: 0 0 8px rgba(243, 156, 18, 0.35);
}
.rec-solo-btn.active:hover {
  background: rgba(243, 156, 18, 0.30) !important;
  color: #ffb800 !important;
}
.rec-solo-btn.is-soloing {
  background: #f39c12 !important;
  color: #0f1115 !important;
  border-color: #f39c12 !important;
  box-shadow: 0 0 12px rgba(243, 156, 18, 0.65);
  animation: solo-pulse 1.4s infinite ease-in-out;
}
@keyframes solo-pulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(243, 156, 18, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 16px rgba(243, 156, 18, 0.85);
    transform: scale(1.05);
  }
}
[data-theme="light"] .rec-solo-btn.active {
  background: rgba(217, 119, 6, 0.12) !important;
  border-color: #d97706 !important;
  color: #b45309 !important;
}
[data-theme="light"] .rec-solo-btn.is-soloing {
  background: #d97706 !important;
  color: #ffffff !important;
  border-color: #d97706 !important;
}

/* Transcribe (T) Button - style matches "S" (rec-solo-btn) */
.rec-transcribe-btn {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 800;
  font-size: 11px;
  line-height: 1;
  user-select: none;
  transition: all 0.18s ease;
}
.rec-transcribe-btn svg {
  width: 14px;
  height: 14px;
  display: block;
}
.rec-transcribe-btn.active,
.rec-transcribe-btn.is-transcribing {
  background: rgba(14, 165, 233, 0.22) !important;
  border-color: #0ea5e9 !important;
  color: #38bdf8 !important;
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.45);
}
.rec-transcribe-btn.is-transcribing {
  animation: transcribe-pulse 1.4s infinite ease-in-out;
}
@keyframes transcribe-pulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(14, 165, 233, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.85);
    transform: scale(1.05);
  }
}
[data-theme="light"] .rec-transcribe-btn.active,
[data-theme="light"] .rec-transcribe-btn.is-transcribing {
  background: rgba(2, 132, 199, 0.14) !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
}

/* Player TTS Translate & Synthesize button (.rec-tts-btn) */
.rec-tts-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 1px 2px;
  line-height: 1;
  user-select: none;
  cursor: pointer;
  transition: all 0.15s ease;
}
.rec-tts-btn .rec-tts-spk {
  font-size: 11px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rec-tts-btn .rec-tts-lang {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: -0.2px;
  line-height: 1;
  text-transform: uppercase;
}
.rec-tts-btn:active,
.rec-tts-btn.vfo-tts-pressing {
  transform: scale(0.90) !important;
  box-shadow: 0 0 10px rgba(0, 176, 255, 0.8), inset 0 0 4px rgba(0, 176, 255, 0.5) !important;
  border-color: #00b0ff !important;
  color: #00e5ff !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}
.rec-tts-btn.tts-speaking {
  background: #00ffff !important;
  border-color: #ffffff !important;
  color: #001824 !important;
  animation: vfo-tts-pulse 0.8s infinite alternate ease-in-out !important;
}
.rec-tts-btn.tts-speaking .rec-tts-lang {
  color: #001824 !important;
  font-weight: 900;
}
[data-theme="light"] .rec-tts-btn {
  border-color: #d0d7de;
  background: #ffffff;
  color: #57606a;
}
[data-theme="light"] .rec-tts-btn:hover {
  background: #f3f4f6;
  color: #24292f;
}
[data-theme="light"] .rec-tts-btn:active,
[data-theme="light"] .rec-tts-btn.vfo-tts-pressing {
  box-shadow: 0 0 10px rgba(2, 132, 199, 0.8), inset 0 0 4px rgba(2, 132, 199, 0.5) !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
}
[data-theme="light"] .rec-tts-btn.tts-speaking {
  background: #00c8f5 !important;
  border-color: #ffffff !important;
  color: #002233 !important;
}
[data-theme="light"] .rec-tts-btn.tts-speaking .rec-tts-lang {
  color: #002233 !important;
  font-weight: 900;
}


/* Header Offline Transcribe Button (blinking blue "t" indicator & toggle) */
.header-transcribe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  border-radius: 6px;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.1s ease, box-shadow 0.18s ease;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  flex-shrink: 0;
  line-height: 1;
  background: rgba(14, 165, 233, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.50);
  color: #38bdf8;
}
.header-transcribe-btn:active {
  transform: scale(0.92);
}
.header-transcribe-btn .transcribe-letter {
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  text-transform: lowercase;
}
.header-transcribe-btn.transcribing {
  animation: transcribe-t-pulse 1.8s infinite ease-in-out;
}
@keyframes transcribe-t-pulse {
  0%, 100% {
    color: rgba(56, 189, 248, 0.50);
    border-color: rgba(56, 189, 248, 0.40);
    background: rgba(14, 165, 233, 0.12);
    box-shadow: 0 0 3px rgba(14, 165, 233, 0.25);
  }
  50% {
    color: rgba(224, 242, 254, 1);
    border-color: rgba(56, 189, 248, 0.95);
    background: rgba(14, 165, 233, 0.35);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.65);
  }
}
[data-theme="light"] .header-transcribe-btn {
  background: rgba(2, 132, 199, 0.10);
  border-color: rgba(2, 132, 199, 0.40);
  color: #0284c7;
}
[data-theme="light"] .header-transcribe-btn.transcribing {
  animation: transcribe-t-pulse-light 1.8s infinite ease-in-out;
}
@keyframes transcribe-t-pulse-light {
  0%, 100% {
    color: rgba(2, 132, 199, 0.60);
    border-color: rgba(2, 132, 199, 0.45);
    background: rgba(14, 165, 233, 0.08);
    box-shadow: 0 0 3px rgba(2, 132, 199, 0.15);
  }
  50% {
    color: #0369a1;
    border-color: rgba(2, 132, 199, 0.95);
    background: rgba(14, 165, 233, 0.25);
    box-shadow: 0 0 10px rgba(2, 132, 199, 0.45);
  }
}

.rec-player-col {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: max-content;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  margin-left: auto;
}
.rec-transport-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  width: 100%;
}
.rec-ctrl-btn {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: transform 0.12s ease, opacity 0.12s ease;
  line-height: 0;
}
.rec-ctrl-btn:hover {
  transform: scale(1.08);
}
.rec-ctrl-btn:active {
  transform: scale(0.95);
}
.rec-ctrl-btn svg {
  width: 36px;
  height: 36px;
  display: block;
}
.rec-ctrl-btn.btn-playpause svg {
  width: 44px;
  height: 44px;
}

/* Transport Buttons: Colored circles per palette, WHITE inner icons */
.player-btn-icon {
  fill: #ffffff !important;
  transition: fill 0.15s ease;
}

/* -10s and +10s : Cyan / Turquoise (#1dd3c4) */
.rec-ctrl-btn.btn-back10 .player-btn-circle,
.rec-ctrl-btn.btn-fwd10 .player-btn-circle {
  fill: #0a94b7;
}
.rec-ctrl-btn.btn-back10:hover .player-btn-circle,
.rec-ctrl-btn.btn-fwd10:hover .player-btn-circle {
  fill: #19add1;
}

/* << (Prev) and >> (Next) : Coral / Soft Red (#ff5c5c) */
.rec-ctrl-btn.btn-prev .player-btn-circle,
.rec-ctrl-btn.btn-next .player-btn-circle {
  fill: #ff5c5c;
}
.rec-ctrl-btn.btn-prev:hover .player-btn-circle,
.rec-ctrl-btn.btn-next:hover .player-btn-circle {
  fill: #ff7575;
}

/* Play ▶ : Vibrant Green (#35e100) */
.rec-ctrl-btn.btn-playpause .icon-play .player-btn-circle {
  fill: #35e100;
}
.rec-ctrl-btn.btn-playpause:hover .icon-play .player-btn-circle {
  fill: #4cf219;
}

/* Pause || : Purple (#B307DC) */
.rec-ctrl-btn.btn-playpause .icon-pause .player-btn-circle {
  fill: #B307DC;
}
.rec-ctrl-btn.btn-playpause:hover .icon-pause .player-btn-circle {
  fill: #cb1be8;
}

/* Segmented Scrubber (Line 2) */
.rec-segmented-bar {
  position: relative;
  width: 100%;
  height: 14px;
  border-radius: 4px;
  overflow: hidden;
  isolation: isolate;
  background: #141d18;
  cursor: pointer;
  user-select: none;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .rec-segmented-bar {
  background: #dde5e0;
  border-color: #c0d0c6;
}
.rec-segmented-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.rec-segmented-fill {
  display: none !important;
}

/* Footer row (Line 4): Quota and Speeds */
.live-player-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
[data-theme="light"] .live-player-footer-row {
  border-top-color: rgba(0, 0, 0, 0.06);
}
.rec-quota-info {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.rec-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(248, 81, 73, 0.12);
  border: 1px solid rgba(248, 81, 73, 0.35);
  color: #f85149;
  border-radius: 8px;
  padding: 3px 9px;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.2;
  user-select: none;
  transition: all 0.15s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.rec-clear-btn:hover {
  background: rgba(248, 81, 73, 0.22);
  border-color: rgba(248, 81, 73, 0.6);
  color: #ff7b72;
}
.rec-clear-btn:active {
  transform: scale(0.96);
}
[data-theme="light"] .rec-clear-btn {
  background: #ffebe9;
  border-color: rgba(207, 34, 46, 0.35);
  color: #cf222e;
}
[data-theme="light"] .rec-clear-btn:hover {
  background: #ffcecb;
  border-color: rgba(207, 34, 46, 0.6);
  color: #a40e26;
}
.rec-quota-bar {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-height: 22px;
  align-items: center;
  background: #0d283c;
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 8px;
  padding: 2px 8px;
  overflow: hidden;
  box-sizing: border-box;
  user-select: none;
  cursor: default;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45);
  transition: border-color 0.15s ease, background 0.15s ease;
  margin: 0;
}
[data-theme="light"] .rec-quota-bar {
  background: #d4eaf7;
  border-color: rgba(2, 132, 199, 0.35);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}
.rec-quota-bar:hover {
  border-color: rgba(56, 189, 248, 0.7);
  background: #0f2e46;
}
[data-theme="light"] .rec-quota-bar:hover {
  border-color: rgba(2, 132, 199, 0.6);
  background: #c5e3f5;
}
.rec-quota-text {
  position: relative;
  z-index: 2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.74rem;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  line-height: 1.2;
  pointer-events: none;
}
[data-theme="light"] .rec-quota-text {
  color: #0c4a6e;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.85);
}
.rec-quota-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
  overflow: hidden;
  transition: width 0.35s ease;
  pointer-events: none;
  z-index: 1;
}
[data-theme="light"] .rec-quota-fill {
  background: linear-gradient(90deg, #059669 0%, #10b981 100%);
}
.rec-quota-text-filled {
  display: none !important;
}
.rec-speed-group {
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 4px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .rec-speed-group {
  background: #ffffff;
  border-color: #d0d7de;
}
.rec-speed-pill {
  background: transparent;
  border: none;
  color: var(--text-muted, #8b949e);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.rec-speed-pill:hover {
  color: var(--text-primary, #ffffff);
  background: rgba(255, 255, 255, 0.08);
}
.rec-speed-pill.active {
  background: var(--color-cyan, #00d2d3) !important;
  color: #0f1115 !important;
  font-weight: 800;
}

/* Audio Recording Settings Modal */
.rec-settings-modal .modal-content {
  border-radius: 12px;
}
.rec-toggle-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #00d2d3;
}
.rec-text-input, .rec-number-input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-color, #30363d);
  color: var(--text-primary, #ffffff);
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.15s ease;
}
.rec-text-input:focus, .rec-number-input:focus {
  border-color: #00d2d3;
}
[data-theme="light"] .rec-text-input, [data-theme="light"] .rec-number-input {
  background: #ffffff;
  border-color: #d0d7de;
  color: #24292f;
}
.rec-btn-ok {
  background: #00d2d3;
  border: 1px solid #00b4b5;
  color: #0b0e14;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.rec-btn-ok:hover {
  background: #00e5ff;
  box-shadow: 0 2px 8px rgba(0, 210, 211, 0.4);
}
.rec-settings-modal .rec-clear-btn {
  padding: 4px 10px;
  font-size: 0.8rem;
  border-radius: 6px;
  vertical-align: middle;
}

/* Offline Transcribe Confirmation Modal */
.offline-transcribe-modal-content {
  max-width: 380px !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65) !important;
}

.offline-transcribe-chk-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  transition: background 0.15s ease, border-color 0.15s ease;
}

.offline-transcribe-chk-label:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(46, 204, 113, 0.35);
}

[data-theme="light"] .offline-transcribe-chk-label {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .offline-transcribe-chk-label:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(16, 185, 129, 0.35);
}





/* Global Playlist Scrubber (Line 3) */
.global-playlist-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.global-playlist-bar {
  flex: 1;
  min-width: 0;
  height: 6px;
  border-radius: 2px;
  background: #0f172a;
  border: 1px solid rgba(0, 123, 255, 0.4);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.global-playlist-fill {
  height: 100%;
  width: 0%;
  background-color: #007bff;
  transition: width 0.15s linear;
}
[data-theme='light'] .global-playlist-bar {
  background: #e2e8f0;
  border-color: rgba(0, 123, 255, 0.3);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.global-playlist-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  color: #38bdf8;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.5px;
  user-select: none;
  flex-shrink: 0;
  text-align: right;
  min-width: 38px;
}
[data-theme='light'] .global-playlist-time {
  color: #0284c7;
}


/* PTT Lock */
.ptt-button {
  position: relative; /* Ensure the lock can be positioned absolute inside */
}

/* Red flashing halo when PTT is pressed while locked */
.ptt-button.ptt-locked-blink {
  border-color: #ef4444 !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.95), inset 0 0 10px rgba(239, 68, 68, 0.6) !important;
  transition: border-color 0.08s ease, box-shadow 0.08s ease !important;
}

.ptt-lock-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 48px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 4px;
  padding-left: 4px;
  color: #4f5a6c; /* matched grey from user example */
  opacity: 0.7;
  transition: color 0.15s ease, opacity 0.15s ease, filter 0.15s ease;
  pointer-events: auto;
}

.ptt-lock-icon:hover {
  opacity: 1;
}

.ptt-lock-icon.locked {
  color: #ac0000 !important; /* matched red from user example */
  opacity: 1 !important;
  filter: drop-shadow(0 0 3px rgba(172, 0, 0, 0.7)) !important;
}

.ptt-lock-icon.lock-pressing {
  transform: scale(1.22) !important;
  color: #ff9800 !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 6px rgba(255, 152, 0, 0.8)) !important;
  transition: transform 0.12s ease, color 0.12s ease, filter 0.12s ease !important;
}

.ptt-lock-icon svg {
  pointer-events: none;
  width: 19px;
  height: 23px;
}

.rec-speed-menu,
[data-theme="light"] .rec-speed-menu {
  background: #238142 !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5) !important;
}

.rec-speed-menu-btn {
  background: transparent;
  border: none;
  color: #ffffff !important;
  padding: 6px 14px;
  cursor: pointer;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.1s ease;
}
.rec-speed-menu-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}
.rec-speed-menu-btn.active {
  color: #ffffff !important;
  background: rgba(0, 0, 0, 0.28) !important;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.35) !important;
}

/* Column Header Sort Direction Button (Compact) */
#recSortBtn,
#btnSortTxSummary,
.log-sort-header-btn,
.log-sort-col-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 22px !important;
  min-height: 22px !important;
  width: 26px !important;
  min-width: 26px !important;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0 !important;
  margin: 0;
  flex-shrink: 0 !important;
  box-sizing: border-box;
  vertical-align: middle;
}

/* Direction 1: DESC (Arrow pointing up ↑, newest first) - Vibrant deep red */
#recSortBtn.is-desc,
#btnSortTxSummary.is-desc,
.log-sort-header-btn.is-desc,
.log-sort-col-btn.is-desc,
#recSortBtn:not(.is-asc):not(.active),
#btnSortTxSummary:not(.is-asc):not(.active),
.log-sort-header-btn:not(.is-asc):not(.active),
.log-sort-col-btn:not(.is-asc):not(.active) {
  background: rgba(185, 28, 28, 0.35) !important;
  border: 1px solid #ef4444 !important;
  color: #ff8585 !important;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.45) !important;
}

#recSortBtn.is-desc:hover,
#btnSortTxSummary.is-desc:hover,
.log-sort-header-btn.is-desc:hover,
.log-sort-col-btn.is-desc:hover,
#recSortBtn:not(.is-asc):not(.active):hover,
#btnSortTxSummary:not(.is-asc):not(.active):hover,
.log-sort-header-btn:not(.is-asc):not(.active):hover,
.log-sort-col-btn:not(.is-asc):not(.active):hover {
  background: rgba(220, 38, 38, 0.5) !important;
  border-color: #f87171 !important;
  color: #ffffff !important;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.7) !important;
}

/* Direction 2: ASC (Arrow pointing down ↓, oldest first) - Vibrant deep blue */
#recSortBtn.is-asc,
#btnSortTxSummary.is-asc,
.log-sort-header-btn.is-asc,
.log-sort-col-btn.is-asc,
#recSortBtn.active,
#btnSortTxSummary.active,
.log-sort-header-btn.active,
.log-sort-col-btn.active {
  background: rgba(29, 78, 216, 0.35) !important;
  border: 1px solid #3b82f6 !important;
  color: #93c5fd !important;
  box-shadow: 0 0 6px rgba(59, 130, 246, 0.45) !important;
}

#recSortBtn.is-asc:hover,
#btnSortTxSummary.is-asc:hover,
.log-sort-header-btn.is-asc:hover,
.log-sort-col-btn.is-asc:hover,
#recSortBtn.active:hover,
#btnSortTxSummary.active:hover,
.log-sort-header-btn.active:hover,
.log-sort-col-btn.active:hover {
  background: rgba(37, 99, 235, 0.5) !important;
  border-color: #60a5fa !important;
  color: #ffffff !important;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.7) !important;
}

.log-sort-header-btn svg,
.log-sort-col-btn svg {
  display: block;
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease;
}

@media (max-width: 768px) {
  #recSortBtn,
  .log-sort-header-btn,
  .log-sort-col-btn {
    width: 24px !important;
    min-width: 24px !important;
    height: 21px !important;
    min-height: 21px !important;
  }
  .log-sort-header-btn svg,
  .log-sort-col-btn svg {
    width: 11px;
    height: 11px;
  }
  .log-col-dur-mode-badge {
    font-size: 0.64rem !important;
    padding: 0 5px !important;
    height: 21px !important;
    min-height: 21px !important;
  }
}

@media (max-width: 365px) {
  #recSortBtn,
  .log-sort-header-btn,
  .log-sort-col-btn {
    width: 22px !important;
    min-width: 22px !important;
    height: 19px !important;
    min-height: 19px !important;
  }
  .log-col-dur-mode-badge {
    height: 19px !important;
    min-height: 19px !important;
    font-size: 0.58rem !important;
    padding: 0 4px !important;
  }
}

body.is-apk-mode #recSortBtn,
body.is-apk-mode .log-sort-header-btn,
body.is-apk-mode .log-sort-col-btn {
  height: 21px !important;
  min-height: 21px !important;
  width: 24px !important;
  min-width: 24px !important;
}

body.is-apk-mode .log-col-dur-mode-badge {
  height: 21px !important;
  min-height: 21px !important;
}

[data-theme="light"] #recSortBtn.is-desc,
[data-theme="light"] #btnSortTxSummary.is-desc,
[data-theme="light"] .log-sort-header-btn.is-desc,
[data-theme="light"] .log-sort-col-btn.is-desc,
[data-theme="light"] #recSortBtn:not(.is-asc):not(.active),
[data-theme="light"] #btnSortTxSummary:not(.is-asc):not(.active),
[data-theme="light"] .log-sort-header-btn:not(.is-asc):not(.active),
[data-theme="light"] .log-sort-col-btn:not(.is-asc):not(.active) {
  background: #fee2e2 !important;
  border-color: #ef4444 !important;
  color: #dc2626 !important;
  box-shadow: 0 0 4px rgba(220, 38, 38, 0.25) !important;
}

[data-theme="light"] #recSortBtn.is-desc:hover,
[data-theme="light"] #btnSortTxSummary.is-desc:hover,
[data-theme="light"] .log-sort-header-btn.is-desc:hover,
[data-theme="light"] .log-sort-col-btn.is-desc:hover {
  background: #fecaca !important;
  border-color: #b91c1c !important;
  color: #991b1b !important;
}

[data-theme="light"] #recSortBtn.is-asc,
[data-theme="light"] #btnSortTxSummary.is-asc,
[data-theme="light"] .log-sort-header-btn.is-asc,
[data-theme="light"] .log-sort-col-btn.is-asc,
[data-theme="light"] #recSortBtn.active,
[data-theme="light"] #btnSortTxSummary.active,
[data-theme="light"] .log-sort-header-btn.active,
[data-theme="light"] .log-sort-col-btn.active {
  background: #dbeafe !important;
  border-color: #2563eb !important;
  color: #1d4ed8 !important;
  box-shadow: 0 0 4px rgba(37, 99, 235, 0.25) !important;
}

[data-theme="light"] #recSortBtn.is-asc:hover,
[data-theme="light"] #btnSortTxSummary.is-asc:hover,
[data-theme="light"] .log-sort-header-btn.is-asc:hover,
[data-theme="light"] .log-sort-col-btn.is-asc:hover {
  background: #bfdbfe !important;
  border-color: #1d4ed8 !important;
  color: #1e40af !important;
}

.badge-apk-only {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
  display: inline-block;
  line-height: 1.4;
}

/* =========================================================
   BrandMeister Log Multiple & Range Batch Selection Styles
   ========================================================= */

/* Selected Row Highlighting (20% transparent yellow, subtle golden outline) */
.live-call-row.is-selected {
  background-color: rgba(234, 179, 8, 0.20) !important;
  border-left: 3px solid #eab308 !important;
  box-shadow: inset 0 0 0 1px rgba(234, 179, 8, 0.35);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.live-call-row.is-selected:hover {
  background-color: rgba(234, 179, 8, 0.28) !important;
}

/* Green Checkmark Badge right on top of Correspondent Flag / TX Icon */
.live-call-row.is-selected .station-flag,
.live-call-row.is-selected .tx-mic-icon {
  position: relative;
}

.live-call-row.is-selected .station-flag::after,
.live-call-row.is-selected .tx-mic-icon::after {
  content: "✔";
  position: absolute;
  top: -3px;
  right: -3px;
  background: #10b981;
  color: #ffffff;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  z-index: 5;
  border: 1px solid #064e3b;
  pointer-events: none;
}

/* Light Theme Selected Row */
[data-theme="light"] .live-call-row.is-selected {
  background-color: rgba(234, 179, 8, 0.22) !important;
  border-left: 3px solid #ca8a04 !important;
  box-shadow: inset 0 0 0 1px rgba(202, 138, 4, 0.45);
}

[data-theme="light"] .live-call-row.is-selected:hover {
  background-color: rgba(234, 179, 8, 0.30) !important;
}

[data-theme="light"] .live-call-row.is-selected .station-flag::after,
[data-theme="light"] .live-call-row.is-selected .tx-mic-icon::after {
  background: #059669;
  border-color: #047857;
}

/* Top Toolbar for Log Batch Selection */
.log-selection-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  margin: 0 4px 4px 4px;
  background: rgba(26, 34, 29, 0.95);
  border: 1px solid rgba(234, 179, 8, 0.40);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  animation: fadeInSelectionBar 0.18s ease-out;
  box-sizing: border-box;
}

@keyframes fadeInSelectionBar {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.log-selection-toolbar .sel-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #facc15;
}

.log-selection-toolbar .sel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: #10b981;
  color: #ffffff;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 900;
}

.log-selection-toolbar .sel-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.log-selection-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 24px;
  padding: 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.12s ease;
  line-height: 1;
}

.log-selection-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(234, 179, 8, 0.5);
  color: #ffffff;
}

.log-selection-btn.active {
  background: #eab308;
  color: #0f172a;
  border-color: #ca8a04;
  box-shadow: 0 0 6px rgba(234, 179, 8, 0.5);
}

.log-selection-btn.btn-close-sel {
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.3);
  font-size: 0.8rem;
  padding: 0 6px;
}

.log-selection-btn.btn-close-sel:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ffffff;
}

[data-theme="light"] .log-selection-toolbar {
  background: #fefce8;
  border-color: rgba(202, 138, 4, 0.5);
  box-shadow: 0 2px 8px rgba(161, 98, 7, 0.15);
}

[data-theme="light"] .log-selection-toolbar .sel-count-badge {
  color: #854d0e;
}

[data-theme="light"] .log-selection-btn {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #334155;
}

[data-theme="light"] .log-selection-btn:hover {
  background: #f1f5f9;
  border-color: #ca8a04;
  color: #0f172a;
}

[data-theme="light"] .log-selection-btn.active {
  background: #ca8a04;
  color: #ffffff;
  border-color: #a16207;
}

/* Mini Floating Action Menu (Used when Audio Player is closed) - VERTICAL */
.log-mini-context-menu {
  position: fixed;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 5px;
  min-width: 145px;
  background: #238142 !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 9px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 2px 8px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: logMiniMenuPop 0.14s ease-out;
}

@keyframes logMiniMenuPop {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.log-menu-action-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  height: 30px;
  padding: 0 10px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s ease;
  user-select: none;
  width: 100%;
  box-sizing: border-box;
}

.log-menu-action-btn:hover {
  transform: translateY(-1px);
}

.log-menu-action-btn .menu-icon {
  font-size: 0.95rem;
  width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.log-menu-action-btn .menu-text {
  flex: 1;
  text-align: left;
}

.log-menu-action-btn.btn-menu-delete {
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.4);
}

.log-menu-action-btn.btn-menu-delete:hover {
  background: rgba(239, 68, 68, 0.28);
  color: #ffffff;
}

.log-menu-action-btn.btn-menu-download {
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.4);
}

.log-menu-action-btn.btn-menu-download:hover {
  background: rgba(59, 130, 246, 0.28);
  color: #ffffff;
}

.log-menu-action-btn.btn-menu-transcribe {
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.4);
}

.log-menu-action-btn.btn-menu-transcribe:hover {
  background: rgba(16, 185, 129, 0.28);
  color: #ffffff;
}

.log-menu-action-btn.btn-menu-cancel {
  color: #94a3b8;
  border-color: rgba(148, 163, 184, 0.28);
  margin-top: 2px;
}

.log-menu-action-btn.btn-menu-cancel:hover {
  background: rgba(148, 163, 184, 0.22);
  color: #f8fafc;
}

.log-mini-context-menu .log-menu-badge {
  display: none !important;
}

.log-menu-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eab308;
  color: #0f172a;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 8px;
  line-height: 1;
  margin-left: auto;
}

[data-theme="light"] .log-mini-context-menu {
  background: #238142 !important;
  border: 1px solid rgba(0, 0, 0, 0.25) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] .log-menu-action-btn {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}

/* Inline Audio Player Tools - Group Batch Action Styling */
.rec-tool-btn.has-batch-active {
  position: relative !important;
  border-color: rgba(234, 179, 8, 0.8) !important;
  color: #facc15 !important;
  background: rgba(234, 179, 8, 0.18) !important;
}

.rec-tool-btn.has-batch-active.danger {
  border-color: rgba(239, 68, 68, 0.8) !important;
  color: #fca5a5 !important;
  background: rgba(239, 68, 68, 0.22) !important;
}

.batch-count-pill {
  position: absolute;
  top: -4px;
  right: -5px;
  background: #eab308;
  color: #0f172a;
  font-size: 0.58rem;
  font-weight: 800;
  padding: 0.5px 3.5px;
  border-radius: 8px;
  line-height: 1.2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

/* --- TOT (Time-Out Timer / Transmit of TX) Configuration & Countdown Badge --- */
.mode-badge.mode-tx {
  width: auto !important;
  min-width: 84px !important;
  max-width: 106px !important;
  padding: 0 5px !important;
  font-size: 0.68rem !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.15px !important;
}

@media (max-width: 480px) {
  .mode-badge.mode-tx {
    font-size: 0.58rem !important;
    min-width: 72px !important;
    max-width: 90px !important;
    padding: 0 3px !important;
  }
}

.tot-config-overlay {
  position: fixed;
  inset: 0;
  z-index: 10010;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modelPickerFadeIn 0.15s ease-out;
}

.tot-config-overlay.closing {
  animation: modelPickerFadeOut 0.15s ease-in forwards;
}

.tot-config-popup {
  position: relative;
  width: 320px;
  max-width: calc(100vw - 28px);
  background: var(--bg-card, #161b22);
  border: 1px solid var(--border-color, #30363d);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modelPickerPopIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.tot-config-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid var(--border-color, #30363d);
}

.tot-config-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary, #e6edf3);
}

.tot-config-icon {
  font-size: 1.05rem;
  line-height: 1;
}

.tot-config-close {
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted, #8b949e);
  border-radius: 4px;
  padding: 2px 6px;
  transition: color 0.12s ease, background 0.12s ease;
}

.tot-config-close:hover {
  color: var(--text-primary, #ffffff);
  background: rgba(255, 255, 255, 0.1);
}

.tot-config-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tot-config-desc {
  font-size: 0.78rem;
  color: var(--text-muted, #8b949e);
  line-height: 1.35;
}

.tot-slider-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tot-slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tot-slider-track-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tot-range-slider {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: #30363d;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  margin: 6px 0;
  transition: background 0.15s ease;
}

.tot-range-slider:focus {
  background: #38414a;
}

.tot-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #58a6ff;
  cursor: pointer;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  transition: transform 0.12s ease, background-color 0.12s ease;
}

.tot-range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  background: #79c0ff;
}

.tot-range-slider::-webkit-slider-thumb:active {
  transform: scale(1.2);
  background: #1f6feb;
}

.tot-range-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #58a6ff;
  cursor: pointer;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  transition: transform 0.12s ease, background-color 0.12s ease;
}

.tot-range-slider::-moz-range-thumb:hover {
  transform: scale(1.15);
  background: #79c0ff;
}

.tot-value-display {
  min-width: 68px;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 700;
  color: #58a6ff;
  background: rgba(88, 166, 255, 0.12);
  border: 1px solid rgba(88, 166, 255, 0.28);
  border-radius: 6px;
  padding: 5px 8px;
  font-family: monospace, inherit;
  white-space: nowrap;
  box-sizing: border-box;
}

.tot-slider-scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted, #8b949e);
  line-height: 1;
}

.tot-presets-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.tot-preset-btn {
  background: #21262d;
  border: 1px solid #30363d;
  color: #c9d1d9;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 0;
  text-align: center;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s ease;
  white-space: nowrap;
}

.tot-preset-btn:hover {
  background: #30363d;
  color: #ffffff;
  border-color: #8b949e;
}

.tot-preset-btn.active {
  background: rgba(35, 134, 54, 0.25);
  border-color: #2ea043;
  color: #3fb950;
  font-weight: 700;
}

.tot-config-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid var(--border-color, #30363d);
}

.btn-tot-cancel {
  background: #21262d;
  border: 1px solid #30363d;
  color: #c9d1d9;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
}

.btn-tot-cancel:hover {
  background: #30363d;
  color: #ffffff;
}

.btn-tot-save {
  background: #238636;
  border: 1px solid rgba(240, 246, 252, 0.1);
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
}

.btn-tot-save:hover {
  background: #2ea043;
}

/* Light theme overrides */
[data-theme="light"] .tot-config-popup {
  background: #ffffff;
  border-color: #d0d7de;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .tot-config-header {
  background: #f6f8fa;
  border-bottom-color: #d0d7de;
}

[data-theme="light"] .tot-config-title {
  color: #1f2328;
}

[data-theme="light"] .tot-config-desc {
  color: #57606a;
}

[data-theme="light"] .tot-range-slider {
  background: #d0d7de;
}

[data-theme="light"] .tot-range-slider:focus {
  background: #afb8c1;
}

[data-theme="light"] .tot-range-slider::-webkit-slider-thumb {
  background: #0969da;
  border-color: #ffffff;
}

[data-theme="light"] .tot-range-slider::-moz-range-thumb {
  background: #0969da;
  border-color: #ffffff;
}

[data-theme="light"] .tot-value-display {
  background: #ddf4ff;
  border-color: #54aeff;
  color: #0969da;
}

[data-theme="light"] .tot-slider-scale {
  color: #57606a;
}

[data-theme="light"] .tot-preset-btn {
  background: #f6f8fa;
  border-color: #d0d7de;
  color: #24292f;
}

[data-theme="light"] .tot-preset-btn:hover {
  background: #eaeef2;
}

[data-theme="light"] .tot-preset-btn.active {
  background: #dafbe1;
  border-color: #1a7f37;
  color: #1a7f37;
}

[data-theme="light"] .tot-config-footer {
  background: #f6f8fa;
  border-top-color: #d0d7de;
}

[data-theme="light"] .btn-tot-cancel {
  background: #f6f8fa;
  border-color: #d0d7de;
  color: #24292f;
}

/* PTT Mode Container (Hold / Toggle) */
.ptt-mode-container {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--border-color, #30363d);
  border-radius: 6px;
}

.ptt-mode-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-primary, #e6edf3);
  white-space: nowrap;
}

.ptt-mode-options {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.ptt-mode-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  font-size: 0.80rem;
  font-weight: 500;
  color: #c9d1d9;
  transition: color 0.12s ease;
}

.ptt-mode-opt:hover {
  color: #ffffff;
}

.ptt-mode-chk {
  width: 16px;
  height: 16px;
  accent-color: #238636;
  cursor: pointer;
  margin: 0;
}

.ptt-config-divider {
  height: 1px;
  background: var(--border-color, #30363d);
  margin: 2px 0;
  opacity: 0.6;
}

[data-theme="light"] .ptt-mode-container {
  background: #f6f8fa;
  border-color: #d0d7de;
}

[data-theme="light"] .ptt-mode-title {
  color: #1f2328;
}

[data-theme="light"] .ptt-mode-opt {
  color: #24292f;
}

[data-theme="light"] .ptt-mode-opt:hover {
  color: #0969da;
}

[data-theme="light"] .ptt-config-divider {
  background: #d0d7de;
}

/* ==========================================================================
   First-Run Onboarding Setup Wizard Styles
   ========================================================================== */
.onboarding-modal {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 14, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 16px;
  box-sizing: border-box;
}

.onboarding-content {
  max-width: 520px;
  width: 100%;
  background: #181b20;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.65), 0 0 24px rgba(72, 132, 255, 0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: onboardingFadeIn 0.25s ease-out;
}

@keyframes onboardingFadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.onboarding-header {
  padding: 24px 24px 18px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.onboarding-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.15rem;
  color: #4884ff;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.onboarding-title {
  margin: 0 0 6px;
  font-size: 1.3rem;
  font-weight: 700;
  color: #ffffff;
}

.onboarding-subtitle {
  margin: 0 0 16px;
  font-size: 0.88rem;
  color: #9ca3af;
}

.onboarding-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}

.stepper-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #6b7280;
  font-size: 0.82rem;
  font-weight: 600;
}

.stepper-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #2a2e37;
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.stepper-item.active .stepper-circle {
  background: #4884ff;
  color: #fff;
  border-color: #4884ff;
  box-shadow: 0 0 12px rgba(72, 132, 255, 0.5);
}

.stepper-item.active {
  color: #4884ff;
}

.stepper-item.completed .stepper-circle {
  background: #10b981;
  color: #fff;
  border-color: #10b981;
}

.stepper-item.completed {
  color: #10b981;
}

.stepper-line {
  width: 32px;
  height: 2px;
  background: #2a2e37;
  transition: background 0.2s ease;
}

.stepper-line.completed {
  background: #10b981;
}

.onboarding-pane {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.onboarding-pane-header h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: #f3f4f6;
}

.onboarding-pane-sub {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: #9ca3af;
  line-height: 1.4;
}

.onboarding-lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin: 6px 0 12px;
}

.onboarding-lang-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #20242c;
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.onboarding-lang-card:hover {
  background: #282e38;
  border-color: rgba(72, 132, 255, 0.4);
  transform: translateY(-1px);
}

.onboarding-lang-card.selected {
  background: rgba(72, 132, 255, 0.15);
  border-color: #4884ff;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(72, 132, 255, 0.25);
}

.onboarding-lang-flag {
  width: 22px;
  height: 16px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
}

.onboarding-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.onboarding-form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.onboarding-form-group label {
  font-size: 0.84rem;
  font-weight: 600;
  color: #d1d5db;
}

.onboarding-input {
  width: 100%;
  padding: 9px 12px;
  border-radius: 6px;
  border: 1px solid #4a5568;
  background: #20242c;
  color: #fff;
  font-size: 0.95rem;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

.onboarding-input:focus {
  outline: none;
  border-color: #4884ff;
  box-shadow: 0 0 0 2px rgba(72, 132, 255, 0.2);
}

.onboarding-field-hint {
  font-size: 0.76rem;
  color: #9ca3af;
}

.onboarding-error-box {
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  font-size: 0.84rem;
  line-height: 1.4;
}

.onboarding-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  gap: 10px;
}

.onboarding-btn {
  padding: 10px 22px;
  font-size: 0.92rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.onboarding-btn-launch {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: #059669 !important;
  color: #fff !important;
}

.onboarding-btn-launch:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
}

/* Light Theme Adaptations */
[data-theme="light"] .onboarding-modal {
  background: rgba(240, 242, 245, 0.9);
}

[data-theme="light"] .onboarding-content {
  background: #ffffff;
  border-color: #d0d7de;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .onboarding-header {
  border-bottom-color: #e5e7eb;
  background: #f9fafb;
}

[data-theme="light"] .onboarding-title {
  color: #111827;
}

[data-theme="light"] .onboarding-subtitle {
  color: #6b7280;
}

[data-theme="light"] .stepper-circle {
  background: #e5e7eb;
  color: #4b5563;
  border-color: #d1d5db;
}

[data-theme="light"] .onboarding-pane-header h3 {
  color: #111827;
}

[data-theme="light"] .onboarding-lang-card {
  background: #f3f4f6;
  border-color: #e5e7eb;
  color: #1f2937;
}

[data-theme="light"] .onboarding-lang-card:hover {
  background: #e5e7eb;
}

[data-theme="light"] .onboarding-lang-card.selected {
  background: rgba(72, 132, 255, 0.12);
  border-color: #4884ff;
  color: #1e40af;
}

[data-theme="light"] .onboarding-input {
  background: #ffffff;
  border-color: #d1d5db;
  color: #111827;
}

[data-theme="light"] .onboarding-footer {
  border-top-color: #e5e7eb;
}

/* --- SWL (Listen-Only) Mode Styles --- */
.vfo-swl-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: rgba(88, 166, 255, 0.15);
  border: 1px solid rgba(88, 166, 255, 0.45);
  color: #58a6ff;
  user-select: none;
}

.account-swl-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(88, 166, 255, 0.15);
  border: 1px solid rgba(88, 166, 255, 0.4);
  color: #58a6ff;
  vertical-align: middle;
}

.account-role-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  vertical-align: middle;
}

body.is-swl-mode .ptt-button,
.ptt-button.swl-disabled {
  opacity: 0.65 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.25);
  position: relative;
}

body.is-swl-mode .ptt-button::after,
.ptt-button.swl-disabled::after {
  content: '🎧 SWL';
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #58a6ff;
  background: rgba(0, 0, 0, 0.6);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid rgba(88, 166, 255, 0.4);
  pointer-events: none;
  z-index: 5;
}

[data-theme="light"] .vfo-swl-badge {
  background: rgba(30, 64, 175, 0.12);
  border-color: rgba(30, 64, 175, 0.35);
  color: #1e40af;
}

[data-theme="light"] .account-swl-badge {
  background: rgba(30, 64, 175, 0.1);
  border-color: rgba(30, 64, 175, 0.3);
  color: #1e40af;
}