/* Bootstrap 4.5.2 CSS Reset - Replaced removed Bootstrap CSS */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Modern Dark Theme CSS Variables */
:root {
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #3a3a3a;
  --bg-hover: #454545;
  --text-primary: #ffffff;
  --text-secondary: #b0b0b0;
  --border-color: rgba(255, 255, 255, 0.1);
  --border-color-strong: rgba(255, 255, 255, 0.2);
  --accent-blue: #4a9eff;
  --accent-blue-dark: #2979ff;
  --accent-red: #f44336;
  --accent-red-dark: #d32f2f;
  --accent-green: #4caf50;
  --accent-green-dark: #388e3c;
  --accent-orange: #ff9800;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
}

/* Bootstrap 4.5.2 default typography */
html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Bootstrap 4.5.2 additional normalize styles */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

input[type='radio']:checked:after {
    width: 12px;
    height: 12px;
    border-radius: 5px;
    top: -6px;
    left: 0px;
    position: relative;
    background-color: black;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid white;
}
.modradio:checked:after {
  width: 12px;
  height: 12px;
  border-radius: 5px;
  top: -6px;
  left: 0px;
  position: relative;
  background-color: black;
  content: '';
  display: inline-block;
  visibility: visible;
  border: 2px solid white;
}
.voulme-slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  /* width: calc(100% - 72px); */
  width: calc(100% - 35px);
  height: 20px;
  padding: 0;
  /* border-radius: 2px; */
  outline: none;
  cursor: pointer;
  margin-top: 3px;
  border-radius: 20px;
}
/*Chrome thumb*/
.voulme-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  /* -webkit-border-radius: 5px; */
  /*16x16px adjusted to be same as 14x14px on moz*/
  height: 20px;
  width: 2px;
  /* border-radius: 5px; */
  background: rgb(30, 30, 30);
  /* border: 1px solid #c5c5c5; */
}
/*Mozilla thumb*/
.voulme-slider::-moz-range-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  /* -moz-border-radius: 5px; */
  height: 20px;
  width: 1px;
  /* border-radius: 5px; */
  background: rgb(30, 30, 30);
  /* border: 1px solid #c5c5c5; */
}
/*IE & Edge input*/
.voulme-slider::-ms-track {
  width: calc(100% - 35px);
  height: 20px;
  /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
  background: transparent;
  /*leave room for the larger thumb to overflow with a transparent border */
  border-color: transparent;
  border-width: 2px 0;
  /*remove default tick marks*/
  color: transparent;
}
/*IE & Edge thumb*/
.voulme-slider::-ms-thumb {
  height: 20px;
  width: 1px;
  /* border-radius: 5px; */
  background: rgb(30, 30, 30);
  /* border: 1px solid #c5c5c5; */
}
/*IE & Edge left side*/
.voulme-slider::-ms-fill-lower {
  background: rgb(51, 102, 153);
  /* border-radius: 2px; */
}
/*IE & Edge right side*/
.voulme-slider::-ms-fill-upper {
  background: rgb(30, 30, 30);
  border-radius: 2px;
}
/*IE disable tooltip*/
.voulme-slider::-ms-tooltip {
  display: none;
}

table { text-align: center; border-collapse: collapse;  width: calc(100% - 10px); margin: 5px; border-color: white; border-style: solid; border-width: 1px; color: white;}
th, td { font-size: 18px; transition: .4s ease-in; }
th { color: black; }
tr {background: rgb(24, 24, 24); }
tr:first-child {background: rgb(196, 196, 196); }
tr:nth-child(even) { background: rgb(49, 49, 49); }
td:empty {background: rgb(49, 49, 49); }
tr:hover:not(#firstrow), tr:hover td:empty {background: rgb(93, 99, 44); pointer-events: visible;}
.row-drag-over {  border-bottom: thick double #32a1ce; }

/* Modern Header Bar */
#header-bar {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%) !important;
  border-bottom: 2px solid var(--border-color) !important;
  box-shadow: var(--shadow-md) !important;
  min-height: 65px !important;
}

#menu-button {
  font-size: 0 !important;
  cursor: pointer !important;
  padding: 10px 12px !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%) !important;
  color: var(--text-primary) !important;
  transition: all var(--transition-base) !important;
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  position: relative;
  text-indent: -9999px;
  overflow: hidden;
}

/* Hamburger menu bars - three horizontal lines */
#menu-button::before,
#menu-button::after {
  content: '';
  display: block;
  width: 24px;
  height: 2.5px;
  background-color: var(--text-primary);
  border-radius: 2px;
  transition: all var(--transition-base);
  position: absolute;
}

#menu-button::before {
  top: 13px;
  box-shadow: 0 8px 0 var(--text-primary); /* Creates the middle bar */
}

#menu-button::after {
  bottom: 13px;
}

#menu-button:hover {
  background: var(--bg-hover) !important;
  border-color: var(--accent-blue) !important;
  box-shadow: var(--shadow-sm) !important;
}

#menu-button:hover::before,
#menu-button:hover::after,
#menu-button:hover::before {
  background-color: var(--accent-blue);
}

#menu-button:hover::before {
  box-shadow: 0 8px 0 var(--accent-blue);
}

#menu-button:active {
  transform: scale(0.95);
}

#goLiveState {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  max-width: 100% !important;
  justify-content: center !important;
}

/* Show live icon when goLive is active */
#goLiveStateIcon {
  background: transparent !important;
  border: none !important;
  object-fit: contain !important;
  filter: none !important;
  opacity: 1 !important;
}

#goLiveStateIcon[src]:not([src=""]) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#subject {
  font-size: 1.3rem !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
  line-height: 1.4 !important;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  padding: 8px 22px !important;
  border: 2px solid var(--border-color) !important;
  border-radius: 50px !important;
  background: var(--bg-secondary) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--transition-base) !important;
  display: inline-block !important;
}

#subject:hover {
  border-color: var(--accent-blue) !important;
  background: var(--bg-tertiary) !important;
  box-shadow: var(--shadow-md) !important;
}

#logo-image {
  height: 50px !important;
  width: auto !important;
  cursor: pointer !important;
  border-radius: var(--radius-sm) !important;
  transition: all var(--transition-base) !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

#logo-image:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

/* Modern PlaylistView Table Headings - Only styling the header row */
#playlistview thead {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  border-bottom: 2px solid var(--border-color);
}

#playlistview #firstrow {
  background: transparent !important;
}

#playlistview th {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  padding: 12px 16px !important;
  text-align: left !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border-color);
  background: transparent !important;
  position: relative;
  transition: all var(--transition-base);
}

#playlistview th:hover {
  background: var(--bg-hover) !important;
  color: var(--accent-blue) !important;
}

/* Alternating row colors for better visibility */
#playlistview tbody tr {
  background: var(--bg-secondary);
  transition: background-color var(--transition-fast);
}

#playlistview tbody tr:nth-child(even) {
  background: var(--bg-tertiary);
}

#playlistview tbody tr:hover {
  background: var(--bg-hover) !important;
}

#playlistview tbody td {
  padding: 12px 16px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
  transition: background-color var(--transition-fast);
}

#playlistview tbody tr:hover td {
  background: var(--bg-hover) !important;
}

/* Simple dark mode scrollbar for playlist container */
#playlist-container::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

#playlist-container::-webkit-scrollbar-track {
  background: #1a1a1a;
}

#playlist-container::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 6px;
}

#playlist-container::-webkit-scrollbar-thumb:hover {
  background: #777;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 7; /* Sit on top */
    padding-top: 60px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.7); /* Dark overlay */
    backdrop-filter: blur(4px);
  }
  
  /* Library Modal Specific Styling */
  #newtrack.modal {
    overflow: hidden !important;
  }
  
  /* 1/17/26 WP - Library modal when playlist is loaded (opens to right) */
  #newtrack.modal[style*="right: 0"] {
    background-color: transparent !important;
    backdrop-filter: none !important;
    width: 600px !important;
    max-width: 40vw !important;
  }
  
  #newtrack.modal[style*="right: 0"] .modal-content-new {
    height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  
  #newtrack .modal-content-new {
    position: relative !important;
    overflow: hidden !important;
  }
  
  /* Test 3: Allow modal-content-new to scroll on mobile */
  @media (max-width: 600px) {
    #newtrack .modal-content-new {
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      touch-action: pan-y !important;
    }
  }
  
  #newtrack .modal-content-new > div:nth-of-type(2) {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%) !important;
    color: var(--text-primary) !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    padding: 6px 60px 6px 20px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    border-bottom: 2px solid var(--border-color) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    width: 100% !important;
  }
  
  #newtrack > .modal-content-new > div:nth-of-type(2) {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    padding: 20px !important;
    flex: 1;
    overflow-y: auto;
    height: calc(100% - 34px) !important; /* Account for header (32px height + 2px border) */
    box-sizing: border-box;
  }

  /* WP 032926 — main library body (gray panel): flex child min-width so inner scrollport can show horizontal bar */
  #newtrack .modal-content-new > div:nth-child(3) {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Test 1: Allow touch scrolling on modal content */
  @media (max-width: 600px) {
    #newtrack > .modal-content-new > div:nth-of-type(2) {
      touch-action: pan-y !important;
      overflow-y: scroll !important; /* Test 2: Force scroll instead of auto */
      -webkit-overflow-scrolling: touch !important; /* Test 2: iOS momentum scrolling */
    }
  }
  
  /* Library Search and Controls */
  #searchtext {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    transition: all var(--transition-base) !important;
    box-shadow: var(--shadow-sm) !important;
  }
  
  #searchtext:focus {
    outline: none !important;
    border-color: var(--accent-blue) !important;
    box-shadow: var(--shadow-md) !important;
    background: var(--bg-tertiary) !important;
  }
  
  #searchtext::placeholder {
    color: var(--text-secondary);
  }
  
  #categoryList {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 40px 12px 16px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: all var(--transition-base) !important;
    box-shadow: var(--shadow-sm) !important;
    min-height: 44px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
  }
  
  #categoryList:focus {
    outline: none !important;
    border-color: var(--accent-blue) !important;
    box-shadow: var(--shadow-md) !important;
    background: var(--bg-tertiary) !important;
  }
  
  /* General rule for all select elements with appearance: none to show dropdown arrow */
  select[style*="appearance: none"],
  select[style*="-webkit-appearance: none"],
  select[style*="-moz-appearance: none"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 40px !important;
  }
  
  #categoryList option {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    font-size: 16px !important;
    padding: 10px !important;
  }
  
  #categoryList option:checked,
  #categoryList option:selected {
    background: var(--accent-blue) !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
  }
  
  /* Library Search Button */
  #newtrack button[onclick="searchTrack()"] {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    padding: 10px 16px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all var(--transition-base) !important;
    box-shadow: var(--shadow-sm) !important;
  }
  
  /* Stats Button - allow JavaScript to control background color */
  #newtrack button[onclick="toggleStats()"],
  #newtrack #statsButton {
    color: white !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    padding: 8px 12px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all var(--transition-base) !important;
    box-shadow: var(--shadow-sm) !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    /* Allow inline width to be set, don't force auto */
    box-sizing: border-box !important;
    /* Default to darker gray when untoggled - but allow JavaScript to override */
    background: rgb(100, 100, 100);
  }
  
  /* Stats button when blue (toggled/active) - must be more specific */
  #newtrack #statsButton[style*="#1A73E8"] {
    background: #1A73E8 !important;
    color: white !important;
  }
  
  /* Stats button when gray (untoggled/inactive) */
  #newtrack #statsButton[style*="linear-gradient"],
  #newtrack #statsButton[style*="rgb(100, 100, 100)"],
  #newtrack #statsButton[style*="rgb(100,100,100)"] {
    background: rgb(100, 100, 100) !important;
    color: white !important;
  }
  
  #newtrack button[onclick="searchTrack()"]:hover {
    background: var(--bg-hover) !important;
    border-color: var(--accent-blue) !important;
    color: var(--accent-blue) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-1px);
  }
  
  /* Stats button hover - preserve background color set by JavaScript */
  #newtrack button[onclick="toggleStats()"]:hover,
  #newtrack #statsButton:hover {
    border-color: var(--accent-blue) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-1px);
    /* Don't override background - let JavaScript color show through */
  }
  
  #newtrack button[onclick="searchTrack()"]:active,
  #newtrack button[onclick="toggleStats()"]:active {
    transform: translateY(0);
  }
  
  /* ========== WP 032926 — Library results: horizontal scroll, table width, flex min-width, column borders ========== */
  /* Library Table Container */
  #selectnewtrack {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    padding: 10px !important;
    box-shadow: var(--shadow-sm) !important;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* WP 032926 — scrollport for wide library grid */
  /* WP 050126 — left-align table within scrollport (no implicit centering) */
  #newtracklist-scroll {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    text-align: left;
  }

  /* WP 032926 */
  #selectnewtrack > div {
    background: var(--bg-secondary) !important;
    border-radius: var(--radius-sm) !important;
    min-width: 0;
    max-width: 100%;
  }

  /* WP 032926 — min-width fills scrollport; width max-content keeps cols 4+ visible (horizontal scroll). */
  /* WP 050126 — cap Name via <col> !important below (beats inline pct from masterlibrary.js); left margin only */
  #newtracklist {
    width: max-content;
    min-width: 100%;
    margin-left: 0;
    margin-right: auto;
    table-layout: fixed;
    border-collapse: collapse;
    background: var(--bg-secondary);
    box-sizing: border-box;
  }
  
  #newtracklist th {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%) !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
    text-align: left !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-color);
    cursor: pointer;
    transition: all var(--transition-base);
  }
  
  #newtracklist th:hover {
    background: var(--bg-hover) !important;
    color: var(--accent-blue) !important;
  }
  
  /* WP 050126 — global `table { text-align: center }` affects this grid; headers use <td>, not <th> */
  #newtracklist td {
    padding: 4px 16px !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    transition: background-color var(--transition-fast);
    text-align: left !important;
    /* WP 032926 — clip with nowrap from masterlibrary.js (avoid table expanding) */
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* WP 050126 — cap Name (inline JS col widths are %; !important clamps first col so row doesn’t widen; Intro/Length stay narrow) */
  /* WP 050126 — Name col; ~15% wider than prior clamp(168px, 42vw, 440px) */
  #newtracklist col:first-child {
    width: clamp(193px, 49vw, 505px) !important;
  }

  #newtracklist col:nth-child(2) {
    width: 5rem !important;
  }

  #newtracklist col:nth-child(3) {
    width: 6.5rem !important;
  }

  #newtracklist td:first-child {
    max-width: 0;
  }

  /* WP 032926 — vertical rules between columns (header row uses td) */
  #newtracklist td:not(:last-child) {
    border-right: 1px solid var(--border-color);
  }
  
  #newtracklist tr {
    background: var(--bg-secondary);
  }
  
  #newtracklist tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02); /* Slight overlay for subtle differentiation */
  }
  
  #newtracklist tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.02) !important;
  }
  
  #newtracklist tr:hover {
    background: var(--bg-hover) !important;
  }
  
  #newtracklist tr:hover td {
    background: var(--bg-hover) !important;
  }
  
  /* Selected rows - override odd/even styling */
  #newtracklist tr[style*="background-color: rgb(26, 115, 232)"],
  #newtracklist tr[style*="background-color:#1A73E8"],
  #newtracklist tr[style*="background-color: #1A73E8"] {
    background: #1A73E8 !important;
  }
  
  #newtracklist tr[style*="background-color: rgb(26, 115, 232)"] td,
  #newtracklist tr[style*="background-color:#1A73E8"] td,
  #newtracklist tr[style*="background-color: #1A73E8"] td {
    background: #1A73E8 !important;
    color: #ffffff !important; /* White text for better contrast on blue background */
  }
  
  /* History Label */
  #historyLabel {
    color: var(--text-primary) !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    margin: 20px 0 10px 0 !important;
    text-align: center !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  /* Played Graph Table */
	#playedgraph{
	  width: 99%;
	  border-collapse: collapse;
	  table-layout: fixed;
	}

  
  /* Insert Track Button */
  #newtrack button[onclick="insertTrackClicked()"] {
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-dark) 100%) !important;
    color: var(--text-primary) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: 14px 20px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    cursor: pointer;
    transition: all var(--transition-base) !important;
    box-shadow: var(--shadow-md) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 10px 5px 5px 5px !important;
  }
  
  #newtrack button[onclick="insertTrackClicked()"]:hover {
    background: linear-gradient(135deg, var(--accent-blue-dark) 0%, var(--accent-blue) 100%) !important;
    box-shadow: var(--shadow-lg) !important;
    transform: translateY(-2px);
  }
  
  #newtrack button[onclick="insertTrackClicked()"]:active {
    transform: translateY(0);
  }
  
  /* Form Class Modernization */
  .formclass {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
  }
  
  /* GoLive Player Modernization */
  #streamdiv {
    background: var(--bg-primary) !important;
    border: 2px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 10px !important;
    display: none !important; /* Hidden by default, shown when goLive is active */
    align-items: stretch !important;
    gap: 10px !important;
    height: 120px !important;
    width: 100% !important;
  }
  
  /* Show streamdiv when goLive is active (set by JavaScript) */
  #streamdiv[style*="display: flex"],
  #streamdiv[style*="display:flex"] {
    display: flex !important;
    align-items: stretch !important;
  }
  
  #player {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-md) !important;
    margin: 0 !important;
    padding: 12px !important;
    display: flex !important;
    align-items: stretch !important;
    color: var(--text-primary) !important;
    flex: 1 1 auto !important;
    cursor: pointer;
    transition: all var(--transition-base);
    height: 100% !important;
    min-height: 100px !important;
    box-sizing: border-box !important;
  }
  
  #player:hover {
    border-color: var(--accent-blue) !important;
    box-shadow: var(--shadow-lg) !important;
    transform: translateY(-1px);
  }
  
  /* Target the div containing PlayerArtist/PlayerTitle (now second child after VU meter canvas) */
  #player > div:nth-child(2) {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
    width: 70% !important;
    min-width: 0;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 12px !important;
    border: none !important;
    overflow: visible !important;
  }
  
  /* Also keep first-child for backwards compatibility when VU meter is hidden */
  #player > div:first-child:not(canvas) {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
    width: 70% !important;
    min-width: 0;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 12px !important;
    border: none !important;
    overflow: visible !important;
  }
  
  /* Modern blue active song background when goLive is active - applied to title/artist container */
  #streamdiv[style*="display: flex"] #PlayerTitleArtistContainer,
  #streamdiv[style*="display:flex"] #PlayerTitleArtistContainer,
  #streamdiv[style*="display: flex"] #player > div:nth-child(3):not(#PlayerBacktimingBox),
  #streamdiv[style*="display:flex"] #player > div:nth-child(3):not(#PlayerBacktimingBox),
  #streamdiv[style*="display: flex"] #player > div:first-child:not(canvas):not(img):not(#PlayerBacktimingBox),
  #streamdiv[style*="display:flex"] #player > div:first-child:not(canvas):not(img):not(#PlayerBacktimingBox) {
    background: linear-gradient(135deg, rgba(74, 158, 255, 0.25) 0%, rgba(41, 121, 255, 0.35) 100%) !important;
    background-size: 200% 200% !important;
    animation: gradientShift 3s ease infinite !important;
    border-radius: 12px !important;
    box-shadow: 0 0 15px rgba(74, 158, 255, 0.2), 
                0 2px 8px rgba(74, 158, 255, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(74, 158, 255, 0.3) !important;
    padding: 12px 18px !important;
    margin: 0 !important;
    position: relative !important;
    overflow: visible !important;
    z-index: 1 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
  }
  
  /* Ensure backtiming box keeps dark background */
  #PlayerBacktimingBox {
    background: rgba(0,0,0,0.3) !important;
  }
  
  
  #PlayerArtist {
    color: var(--text-secondary) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    text-align: center !important;
    margin-bottom: 6px !important;
    text-overflow: ellipsis;
    overflow: visible !important;
    white-space: normal !important;
    word-wrap: break-word;
    display: block !important;
  }
  
  /* Artist styling when goLive is active */
  #streamdiv[style*="display: flex"] #PlayerArtist,
  #streamdiv[style*="display:flex"] #PlayerArtist {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
  }
  
  /* Hide placeholder text when empty */
  #PlayerArtist:empty,
  #PlayerTitle:empty {
    display: none !important;
  }
  
  #PlayerTitle {
    color: var(--text-primary) !important;
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    line-height: 1.3 !important;
    text-overflow: ellipsis;
    overflow: visible !important;
    white-space: normal !important;
    word-wrap: break-word;
    transition: all var(--transition-base) !important;
  }
  
  /* Title styling when goLive is active */
  #streamdiv[style*="display: flex"] #PlayerTitle,
  #streamdiv[style*="display:flex"] #PlayerTitle {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7),
                 0 0 12px rgba(74, 158, 255, 0.4) !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    line-height: 1.4 !important;
  }
  
  /* Subtle animated gradient effect */
  @keyframes gradientShift {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  
  /* Add a subtle shine effect on hover */
  #streamdiv[style*="display: flex"] #PlayerTitle:hover,
  #streamdiv[style*="display:flex"] #PlayerTitle:hover {
    box-shadow: 0 0 30px rgba(74, 158, 255, 0.6), 
                0 6px 16px rgba(74, 158, 255, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-1px) !important;
  }
  
  #player > div:last-child {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    justify-content: center !important;
    align-items: center !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-left: 20px !important;
    padding-left: 20px !important;
    border-left: 2px solid var(--border-color) !important;
    min-width: 180px;
    box-shadow: none !important;
  }
  
  #PlayerTimeLeft {
    color: var(--text-primary) !important;
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: 8px;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    font-family: 'Arial', 'Helvetica', sans-serif;
    background: transparent !important;
    padding: 0;
    border: none !important;
    border-radius: 0;
    min-width: 140px;
    display: inline-block;
    width: auto;
  }
  
  /* PlayerTimeLeft color states - handled by JS */
  #PlayerTimeLeft[style*="color: orange"],
  #PlayerTimeLeft[style*="color:orange"] {
    color: var(--accent-orange) !important;
    border-color: var(--accent-orange) !important;
    box-shadow: 0 0 8px rgba(255, 152, 0, 0.4) !important;
  }
  
  #PlayerTimeLeft[style*="color: white"],
  #PlayerTimeLeft[style*="color:white"] {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
  }
  
  /* GoLive Control Buttons */
  #streamdiv > div:not(#player) {
    display: flex !important;
    align-items: stretch !important;
    height: 100% !important;
    box-sizing: border-box !important;
  }
  
  #startbtn,
  #micbtn,
  #autobtn {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    height: 100% !important;
    min-width: 90px !important;
    cursor: pointer;
    transition: all var(--transition-base) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.3 !important;
    box-sizing: border-box !important;
  }
  
  #startbtn:hover,
  #micbtn:hover,
  #autobtn:hover {
    background: var(--bg-hover) !important;
    border-color: var(--accent-blue) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px);
  }
  
  #startbtn:active,
  #micbtn:active,
  #autobtn:active {
    transform: translateY(0);
  }
  
  #startbtn {
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-dark) 100%) !important;
  }
  
  #startbtn:hover {
    background: linear-gradient(135deg, var(--accent-blue-dark) 0%, var(--accent-blue) 100%) !important;
  }
  
  /* Auto Button States - Green when ON, Red when OFF */
  #autobtn[style*="background-color: green"],
  #autobtn[style*="background: green"] {
    background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-green-dark) 100%) !important;
    border-color: var(--accent-green) !important;
  }
  
  #autobtn[style*="background-color: red"],
  #autobtn[style*="background: red"] {
    background: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-red-dark) 100%) !important;
    border-color: var(--accent-red) !important;
  }
  
  /* Mic Button States - Green when ON, Gray when OFF */
  #micbtn[style*="background-color: green"],
  #micbtn[style*="background: green"] {
    background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-green-dark) 100%) !important;
    border-color: var(--accent-green) !important;
  }
  
  #micbtn[style*="background-color: gray"],
  #micbtn[style*="background: gray"] {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%) !important;
    border-color: var(--border-color) !important;
    opacity: 0.8;
  }
  
  /* Hover states for buttons with active colors */
  #autobtn[style*="background-color: green"]:hover,
  #micbtn[style*="background-color: green"]:hover {
    background: linear-gradient(135deg, var(--accent-green-dark) 0%, var(--accent-green) 100%) !important;
    box-shadow: 0 0 12px rgba(76, 175, 80, 0.4) !important;
  }
  
  #autobtn[style*="background-color: red"]:hover {
    background: linear-gradient(135deg, var(--accent-red-dark) 0%, var(--accent-red) 100%) !important;
    box-shadow: 0 0 12px rgba(244, 67, 54, 0.4) !important;
  }
  
  /* PlayerTimeLeft color states - handled by JS */
  #PlayerTimeLeft[style*="color: orange"],
  #PlayerTimeLeft[style*="color:orange"] {
    color: var(--accent-orange) !important;
  }
  
  #PlayerTimeLeft[style*="color: white"],
  #PlayerTimeLeft[style*="color:white"] {
    color: var(--text-primary) !important;
  }
  
  /* Note: Button states (micbtn, autobtn) are dynamically set by JavaScript with inline styles.
     The base styling above provides the modern look, and the JavaScript will override 
     backgroundColor for state changes (green/red/gray). The gradients will still show through
     the base styling when states are inactive. */
  
  /* Modal Content */
  .modal-content {
    background-color: #eeeeee;
    margin: auto;
    padding: 1px;
    border: 1px solid #888;
    width: 90%;/* width: 350px; */
    height: 255px;
    text-align: center;
    font-size: 14px;
	border-radius: 5px;
  }

  /* Modern Mic Settings Modal */
  .modal-content-mic {
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    margin: auto;
    padding: 0;
    border: 2px solid var(--border-color);
    width: 90%;
    max-width: 600px;
    height: auto;
    max-height: 90vh;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    text-align: left;
    font-size: 14px;
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .mic-close-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 1000;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
  }

  .mic-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
  }

  /* Hide the nested divs - we'll use pseudo-elements instead */
  .mic-close-btn .mdiv,
  .mic-close-btn .md {
    display: none !important;
  }

  /* Create modern X icon using pseudo-elements */
  .mic-close-btn::before,
  .mic-close-btn::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 2px;
    background: white;
    border-radius: 2px;
    transition: all var(--transition-fast);
  }

  .mic-close-btn::before {
    transform: rotate(45deg);
  }

  .mic-close-btn::after {
    transform: rotate(-45deg);
  }

  .mic-close-btn:hover::before,
  .mic-close-btn:hover::after {
    width: 18px;
  }

  .mic-modal-header {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 600;
    padding: 16px 50px 16px 20px;
    border-bottom: 2px solid var(--border-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0; /* Don't shrink header */
  }

  .mic-modal-body {
    background: var(--bg-primary);
    color: var(--text-primary);
    padding: 20px;
    padding-bottom: 20px; /* Ensure bottom padding for scroll */
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto; /* Take remaining space and allow shrinking */
    min-height: 0; /* Important for flex scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  }

  .mic-settings-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 10px; /* Extra padding at bottom for scroll */
  }

  .mic-setting-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .mic-section-divider {
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
  }

  .mic-setting-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .mic-select {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 35px;
  }

  .mic-select:hover {
    background-color: var(--bg-hover);
    border-color: var(--border-color-strong);
  }

  .mic-select:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.2);
  }

  .mic-refresh-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-dark) 100%);
    color: var(--text-primary);
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: var(--shadow-sm);
  }

  .mic-refresh-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }

  .mic-refresh-btn:active {
    transform: translateY(0);
  }

  .mic-refresh-btn span {
    font-size: 1.1rem;
  }

  .mic-slider-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .mic-slider-container {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .mic-value-text {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    min-width: 50px;
    text-align: right;
  }

  .mic-slider {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--bg-secondary);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
  }

  .mic-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent-blue);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all var(--transition-fast);
  }

  .mic-slider::-webkit-slider-thumb:hover {
    background: var(--accent-blue-dark);
    transform: scale(1.1);
  }

  .mic-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent-blue);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all var(--transition-fast);
  }

  .mic-slider::-moz-range-thumb:hover {
    background: var(--accent-blue-dark);
    transform: scale(1.1);
  }

  .mic-controls-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .mic-control-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .mic-number-input {
    width: 80px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    text-align: center;
  }

  .mic-number-input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.2);
  }

  .mic-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .mic-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.95rem;
    user-select: none;
  }

  .mic-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--accent-blue);
  }

  .mic-eq-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
  }

  .mic-eq-item {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .mic-eq-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    min-width: 70px;
  }

  .mic-eq-slider {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--bg-tertiary);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
  }

  .mic-eq-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-green);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all var(--transition-fast);
  }

  .mic-eq-slider::-webkit-slider-thumb:hover {
    background: var(--accent-green-dark);
    transform: scale(1.1);
  }

  .mic-eq-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-green);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all var(--transition-fast);
  }

  .mic-eq-slider::-moz-range-thumb:hover {
    background: var(--accent-green-dark);
    transform: scale(1.1);
  }

  .mic-eq-value {
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    min-width: 40px;
    text-align: right;
  }

  .modal-content-connection {
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    margin: auto;
    padding: 0;
    border: 2px solid var(--border-color);
    width: 90%;
    max-width: 500px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    height: 80vh !important;
    max-height: 80vh !important;
    min-height: 600px !important;
    text-align: center;
    font-size: 14px;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
  }
  
  #golive_login_frm {
    background-color: rgba(0, 0, 0, 0.85) !important;
  }
  
  #golive_login_frm .modal-content {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    width: 50% !important;
    max-width: 50% !important;
    margin: 20px auto !important;
    padding: 20px !important;
    background-color: rgb(40, 40, 40) !important;
  }
  
  #golive_login_frm .modal-content > div[style*="height: 35px"] {
    display: block !important;
    height: 35px !important;
    min-height: 35px !important;
    max-height: 35px !important;
    flex: none !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
  }
  
  #golive_login_frm .modal-content > div[style*="background-color: rgb(64, 64, 64)"] {
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
  }

  .modal-content-mode {
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    margin: auto;
    padding: 0;
    border: 2px solid var(--border-color);
    width: 90%;
    max-width: 500px;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    text-align: left;
    font-size: 14px;
    position: relative;
  }

  .vtmode-close-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 1000;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
  }

  .vtmode-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
  }

  /* Hide the nested divs - we'll use pseudo-elements instead */
  .vtmode-close-btn .mdiv,
  .vtmode-close-btn .md {
    display: none !important;
  }

  /* Create modern X icon using pseudo-elements */
  .vtmode-close-btn::before,
  .vtmode-close-btn::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 2px;
    background: white;
    border-radius: 2px;
    transition: all var(--transition-fast);
  }

  .vtmode-close-btn::before {
    transform: rotate(45deg);
  }

  .vtmode-close-btn::after {
    transform: rotate(-45deg);
  }

  .vtmode-close-btn:hover::before,
  .vtmode-close-btn:hover::after {
    width: 18px;
  }

  .vtmode-modal-header {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 600;
    padding: 16px 50px 16px 20px;
    border-bottom: 2px solid var(--border-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .vtmode-modal-body {
    background: var(--bg-primary);
    color: var(--text-primary);
    padding: 30px 20px;
  }

  .vtmode-options-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .vtmode-option-card {
    flex: 1;
    min-width: 180px;
    max-width: 220px;
    cursor: pointer;
    display: block;
  }

  .vtmode-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .vtmode-option-content {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 24px 20px;
    text-align: center;
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    height: 100%;
    box-sizing: border-box;
  }

  .vtmode-option-card:hover .vtmode-option-content {
    background: var(--bg-hover);
    border-color: var(--border-color-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }

  .vtmode-radio:checked + .vtmode-option-content {
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-dark) 100%);
    border-color: var(--accent-blue);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
  }

  .vtmode-option-icon {
    font-size: 3rem;
    line-height: 1;
    filter: grayscale(0.3);
    transition: all var(--transition-base);
  }

  .vtmode-radio:checked + .vtmode-option-content .vtmode-option-icon {
    filter: grayscale(0);
    transform: scale(1.1);
  }

  .vtmode-option-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 4px;
  }

  .vtmode-option-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 400;
  }

  .vtmode-radio:checked + .vtmode-option-content .vtmode-option-subtitle {
    color: rgba(255, 255, 255, 0.9);
  }

  @media (max-width: 600px) {
    .vtmode-options-container {
      flex-direction: column;
    }

    .vtmode-option-card {
      max-width: 100%;
    }
    
    /* Mobile-friendly goLive header */
    #goLiveState {
      position: relative !important;
      left: auto !important;
      transform: none !important;
      width: 100% !important;
      max-width: 100% !important;
      padding: 0 5px !important;
      gap: 4px !important;
      flex-wrap: wrap !important;
      justify-content: center !important;
    }
    
    #subject {
      font-size: 0.9rem !important;
      padding: 6px 12px !important;
      white-space: normal !important;
      max-width: calc(100% - 10px) !important;
    }
    
    #header-bar {
      flex-wrap: wrap !important;
      min-height: auto !important;
      padding: 5px !important;
      position: relative !important;
      justify-content: space-between !important;
    }
    
    #header-bar > div:first-child {
      flex-shrink: 1 !important;
      min-width: 0 !important;
    }
    
    /* Force menu button to top right on mobile */
    #menu-button {
      position: absolute !important;
      top: 5px !important;
      right: 5px !important;
      order: 999 !important; /* Ensure it's last */
      margin-left: 0 !important;
      flex-shrink: 0 !important; /* Don't shrink */
      z-index: 10 !important; /* Ensure it's on top */
    }
    
    #goLiveStateIcon {
      width: 30px !important;
      height: 30px !important;
    }
    
    /* Make any buttons inside goLiveState mobile-friendly */
    #goLiveState button {
      font-size: 0.75rem !important;
      padding: 4px 8px !important;
      white-space: nowrap !important;
      flex: 0 1 auto !important;
      min-width: 0 !important;
      max-width: calc(50% - 4px) !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
    
    /* Ensure child divs in goLiveState don't overflow */
    #goLiveState > div {
      flex: 0 1 auto !important;
      min-width: 0 !important;
      max-width: 100% !important;
    }
    
    /* Mobile-friendly streamdiv (goLive player area) */
    #streamdiv {
      position: relative !important;
      flex-direction: column !important;
      flex-wrap: nowrap !important;
      height: auto !important;
      min-height: auto !important;
      max-height: none !important;
      padding: 5px !important;
      margin: 0 !important;
      margin-top: 0 !important;
      margin-bottom: 5px !important;
      z-index: 1 !important; /* Lower than sidenav (z-index: 8) so it doesn't block side menu */
      order: 1 !important; /* Appears right after header-bar */
      top: auto !important;
      left: auto !important;
      right: auto !important;
      bottom: auto !important;
      flex: 0 0 auto !important;
      pointer-events: auto !important;
      touch-action: auto !important;
      width: 100% !important; /* Ensure it doesn't overflow */
      max-width: 100% !important; /* Prevent overflow */
      overflow: hidden !important; /* Prevent content from overflowing */
      box-sizing: border-box !important; /* Include padding in width calculation */
    }
    
    /* Ensure playlist-wrapper comes after streamdiv on mobile */
    #playlist-wrapper {
      order: 2 !important;
    }
    
    #player {
      flex: 0 0 auto !important;
      width: 100% !important;
      margin-bottom: 5px !important;
      height: auto !important;
      min-height: 60px !important; /* Doubled from 30px to fit artist and title */
      padding: 6px !important; /* Increased padding to accommodate content */
      pointer-events: auto !important;
      touch-action: auto !important;
      display: flex !important;
      align-items: center !important; /* Center content vertically */
    }
    
    /* Ensure artist and title fit in mobile goLive */
    #PlayerArtist {
      font-size: 0.8rem !important;
      margin-bottom: 2px !important;
      line-height: 1.1 !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      max-width: 100% !important;
    }
    
    #PlayerTitle {
      font-size: 1.1rem !important;
      line-height: 1.2 !important;
      margin-bottom: 0 !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      max-width: 100% !important;
    }
    
    /* Ensure time container is always visible and properly sized on mobile */
    #player > div:last-child {
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      align-items: center !important;
      flex: 0 0 auto !important;
      min-width: 60px !important; /* Ensure minimum width for time */
      max-width: 80px !important; /* Limit max width */
      margin-left: 5px !important;
      padding: 0 4px !important;
      background: transparent !important;
      border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
      border-top: none !important;
      border-right: none !important;
      border-bottom: none !important;
    }
    
    /* Fix goLive time display size on mobile - override inline 4vw */
    #PlayerTimeLeft {
      font-size: 0.9rem !important;
      min-width: 50px !important; /* Ensure minimum width */
      letter-spacing: 0.5px !important;
      max-width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      display: block !important; /* Ensure it's always displayed */
      visibility: visible !important;
      opacity: 1 !important;
      white-space: nowrap !important;
      overflow: visible !important;
      text-overflow: clip !important;
    }
    
    /* Override inline font-size: 4vw from HTML */
    #PlayerTimeLeft[style*="font-size: 4vw"],
    #PlayerTimeLeft[style*="font-size:4vw"] {
      font-size: 0.9rem !important;
    }
    
    /* Adjust padding in the player content div to fit content */
    #player > div:nth-child(2) {
      padding: 4px 6px !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      min-width: 0 !important;
      max-width: 100% !important;
      overflow: hidden !important;
      flex: 1 1 auto !important;
    }
    
    /* Ensure playlist is below streamdiv - full height normally */
    #playlist-container {
      order: 2 !important;
      z-index: 1 !important;
      flex: 1 1 0% !important;
      flex-basis: 0% !important;
      min-height: 0 !important;
      max-height: none !important;
      height: auto !important;
      overflow: hidden !important; /* Override inline overflow: auto */
      overflow-y: scroll !important; /* Only vertical scrolling */
      overflow-x: hidden !important;
      -webkit-overflow-scrolling: touch !important; /* iOS momentum scrolling */
      padding: 0 !important;
      touch-action: pan-y !important; /* Only allow vertical panning on playlist */
      position: relative !important;
      -webkit-transform: translateZ(0) !important; /* Hardware acceleration */
      transform: translateZ(0) !important;
      pointer-events: auto !important;
      -webkit-user-select: auto !important;
      user-select: auto !important;
      -webkit-tap-highlight-color: transparent !important;
      /* iOS specific fixes */
      overscroll-behavior: contain !important; /* Prevent scroll chaining */
      overscroll-behavior-y: contain !important;
    }
    
    /* Force scrolling to work on playlist-container - override inline styles */
    #playlist-container[style*="overflow"] {
      overflow: hidden !important;
      overflow-y: scroll !important;
      overflow-x: hidden !important;
    }
    
    /* Ensure playlist-container always has scroll enabled */
    #playlist-container {
      overflow: hidden !important;
      overflow-y: scroll !important;
      overflow-x: hidden !important;
    }
    
    /* iOS reliability: Make container the primary scroll target */
    #playlist-container * {
      /* Let all child elements allow parent scrolling */
      touch-action: inherit;
    }
    
    /* But allow clicks on rows */
    #playlistview tbody tr {
      touch-action: manipulation !important; /* Allow tap, inherit scroll from parent */
    }
    
    /* Ensure playlist scrolls correctly when streamdiv is visible (goLive on) */
    #streamdiv[style*="display: flex"] ~ #playlist-container,
    #streamdiv[style*="display:flex"] ~ #playlist-container,
    .flex-box:has(#streamdiv[style*="display: flex"]) #playlist-container,
    .flex-box:has(#streamdiv[style*="display:flex"]) #playlist-container {
      order: 2 !important;
      flex: 1 1 0% !important;
      flex-basis: 0% !important;
      min-height: 0 !important;
      max-height: none !important;
      height: auto !important;
      overflow: hidden !important; /* Override any inline styles */
      overflow-y: scroll !important;
      overflow-x: hidden !important;
      -webkit-overflow-scrolling: touch !important; /* iOS momentum scrolling */
      touch-action: pan-y !important;
      position: relative !important;
      overscroll-behavior: contain !important; /* Prevent scroll chaining */
      overscroll-behavior-y: contain !important;
      -webkit-transform: translateZ(0) !important; /* Hardware acceleration */
      transform: translateZ(0) !important;
      pointer-events: auto !important;
  /* iOS reliability: Ensure scrolling works */
  -webkit-overflow-scrolling: touch !important;
  will-change: scroll-position !important;
}

/* ========== 1/17/26 WP - BEGIN: Side Panel Hour Navigation Styles ========== */
/* 1/17/26 WP - Playlist wrapper for side-by-side layout */
#playlist-wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  overflow: hidden;
}

/* 1/17/26 WP - Side panel for next hours */
#playlist-side-panel {
  display: none;
  flex: 0 0 600px;
  background-color: rgb(30, 30, 30);
  overflow-y: auto;
  overflow-x: hidden;
  border-left: 2px solid rgb(60, 60, 60);
  max-width: 40vw;
  min-width: 300px;
}

/* Hide border when side panel is hidden */
#playlist-side-panel[style*="display: none"],
#playlist-side-panel:not([style*="display: block"]) {
  border-left: none !important;
}

/* 1/17/26 WP - Hour section in side panel */
.side-panel-hour-section {
  padding: 10px;
  border-bottom: 2px solid rgb(60, 60, 60);
  background-color: rgb(25, 25, 25);
}

.side-panel-hour-section:first-child {
  border-top: 2px solid rgb(60, 60, 60);
}

/* 1/17/26 WP - Mobile responsive - hide side panel on small screens */
@media (max-width: 768px) {
  #playlist-side-panel {
    display: none !important;
  }
  
  #playlist-wrapper {
    flex-direction: column;
  }
}
/* ========== 1/17/26 WP - END: Side Panel Hour Navigation Styles ========== */
    
    
    /* Only shrink playlist when waveform/recorder/multitrack is visible */
    .flex-box:has(#waveform[style*="display: block"]) #playlist-container,
    .flex-box:has(#waveform[style*="display: flex"]) #playlist-container,
    .flex-box:has(#waveform[style*="display:block"]) #playlist-container,
    .flex-box:has(#waveform[style*="display:flex"]) #playlist-container {
      flex: 0 1 auto !important;
      max-height: 30vh !important;
    }
    
    /* Mobile-friendly playlist table */
    #playlistview {
      width: 100% !important;
      max-width: 100% !important;
      border: 2px solid black !important;
      font-size: 14px !important;
      table-layout: fixed !important;
      box-sizing: border-box !important;
      margin: 0 !important;
    }
    
    /* Table headers - smaller on mobile */
    #playlistview th {
      font-size: 0.75rem !important;
      padding: 8px 4px !important;
      white-space: nowrap !important;
      text-align: center !important;
    }
    
    /* Table cells - more compact on mobile */
    #playlistview tbody td {
      padding: 8px 4px !important;
      font-size: 0.85rem !important;
      line-height: 1.4 !important;
      word-wrap: break-word !important;
      overflow-wrap: break-word !important;
    }
    
    /* Make track name column wider, others narrower - use fixed widths */
    #playlistview th:nth-child(1),
    #playlistview td:nth-child(1) {
      width: 50% !important;
      min-width: 0 !important;
      max-width: 50% !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
    
    #playlistview th:nth-child(2),
    #playlistview td:nth-child(2) {
      width: 17% !important;
      min-width: 0 !important;
      max-width: 17% !important;
      text-align: center !important;
    }
    
    #playlistview th:nth-child(3),
    #playlistview td:nth-child(3) {
      width: 17% !important;
      min-width: 0 !important;
      max-width: 17% !important;
      text-align: center !important;
    }
    
    #playlistview th:nth-child(4),
    #playlistview td:nth-child(4) {
      width: 16% !important;
      min-width: 0 !important;
      max-width: 16% !important;
      text-align: center !important;
    }
    
    /* Ensure all cells don't overflow */
    #playlistview th,
    #playlistview td {
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      box-sizing: border-box !important;
    }
    
    /* Allow track name to wrap if needed */
    #playlistview td:nth-child(1) {
      white-space: normal !important;
      word-wrap: break-word !important;
    }
    
    /* Better touch targets for rows - ensure container handles all scrolling */
    #playlistview tbody tr {
      min-height: 44px !important;
      pointer-events: auto !important;
      -webkit-user-select: auto !important;
      user-select: auto !important;
    }
    
    /* Table should not interfere with container scrolling - let container handle it */
    #playlistview {
      pointer-events: auto !important;
      /* Don't set touch-action here - let container handle scrolling */
    }
    
    
    /* Reduce row spacing */
    #playlistview tbody tr td {
      border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Remove extra padding/margin from body and html on mobile */
    html {
      margin: 0 !important;
      padding: 0 !important;
      height: 100% !important;
      max-height: 100% !important;
      overflow: hidden !important;
      box-sizing: border-box !important;
      -webkit-overflow-scrolling: touch !important;
      touch-action: auto !important; /* Allow touch events - prevent scrolling via overflow */
      position: relative !important; /* Changed from fixed for iOS compatibility */
      width: 100% !important;
      -webkit-tap-highlight-color: transparent !important;
      /* Bootstrap 4.5.2 default typography */
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
      font-size: 1rem !important;
      font-weight: 400 !important;
      line-height: 1.5 !important;
      -webkit-font-smoothing: antialiased !important;
      -moz-osx-font-smoothing: grayscale !important;
    }
    
    body {
      margin: 0 !important;
      padding: 0 !important;
      height: 100% !important;
      max-height: 100% !important;
      overflow: hidden !important;
      box-sizing: border-box !important;
      -webkit-overflow-scrolling: touch !important;
      touch-action: auto !important; /* Allow touch events - prevent scrolling via overflow */
      -webkit-touch-callout: default !important;
      -webkit-user-select: auto !important;
      user-select: auto !important;
      position: relative !important; /* Changed from fixed for iOS compatibility */
      width: 100% !important;
      -webkit-tap-highlight-color: transparent !important;
      /* Bootstrap 4.5.2 default typography */
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
      font-size: 1rem !important;
      font-weight: 400 !important;
      line-height: 1.5 !important;
      -webkit-font-smoothing: antialiased !important;
      -moz-osx-font-smoothing: grayscale !important;
    }
    
    /* Ensure flex-box container doesn't have extra space - use 100dvh for better mobile support */
    .flex-box {
      min-height: 100vh !important;
      min-height: 100dvh !important; /* Dynamic viewport height for mobile */
      height: 100vh !important;
      height: 100dvh !important; /* Dynamic viewport height for mobile */
      max-height: 100vh !important;
      max-height: 100dvh !important; /* Dynamic viewport height for mobile */
      overflow: hidden !important;
      display: flex !important;
      flex-direction: column !important;
      touch-action: auto !important; /* Allow touch events to pass through to children */
      pointer-events: auto !important;
      position: relative !important;
    }
    
    /* Allow playlist to scroll when goLive is active - ensure touch-action is set */
    .flex-box:has(#streamdiv[style*="display: flex"]) #playlist-container,
    .flex-box:has(#streamdiv[style*="display:flex"]) #playlist-container {
      touch-action: pan-y !important;
      overflow-y: scroll !important;
      -webkit-overflow-scrolling: touch !important;
    }
    
    /* Fallback for browsers that don't support dvh */
    @supports not (height: 100dvh) {
      .flex-box {
        height: -webkit-fill-available !important;
        min-height: -webkit-fill-available !important;
        max-height: -webkit-fill-available !important;
      }
    }
    
    /* Ensure no extra space from bottom navigation - completely hide on mobile */
    #bottomNavigation {
      display: none !important;
      height: 0 !important;
      min-height: 0 !important;
      max-height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
      visibility: hidden !important;
      flex: 0 0 0 !important;
      order: 999 !important;
    }
    
    /* Remove any margin/padding that could cause extra space */
    .flex-box > * {
      margin-bottom: 0 !important;
    }
    
    .flex-box > *:last-child {
      margin-bottom: 0 !important;
      padding-bottom: 0 !important;
    }
    
    /* Waveform should appear below playlist, not on top */
    #waveform {
      order: 3 !important;
      z-index: 1 !important;
      position: relative !important;
      width: 100% !important;
      margin-top: 5px !important;
      margin-bottom: 5px !important;
    }
    
    /* Ensure waveform doesn't overlap other content */
    #waveform_legacy,
    #waveform_new {
      position: relative !important;
      z-index: 1 !important;
      max-width: 100% !important;
    }
    
    /* Multitrack and record forms should stay within waveform container */
    .refplayform,
    .refnonplayform,
    #multitrack-container {
      position: relative !important;
      z-index: 1 !important;
    }
    
    /* Button container - stack buttons in a row on mobile */
    #golive-buttons-container {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: wrap !important;
      width: 100% !important;
      gap: 5px !important;
      justify-content: space-between !important;
      flex: 0 0 auto !important;
    }
    
    /* Button wrapper divs */
    #golive-buttons-container > div {
      flex: 1 1 calc(33.33% - 4px) !important;
      min-width: 0 !important;
      max-width: calc(33.33% - 4px) !important;
      display: flex !important;
      align-items: stretch !important;
      overflow: hidden !important;
      box-sizing: border-box !important;
    }
    
    /* Buttons themselves - override inline height: 90% */
    #startbtn,
    #micbtn,
    #autobtn {
      width: 100% !important;
      height: 60px !important;
      min-height: 50px !important;
      max-height: 60px !important;
      font-size: 0.75rem !important;
      padding: 8px 4px !important;
      margin: 0 !important;
      box-sizing: border-box !important;
      position: relative !important;
      top: auto !important;
      border-width: 3px !important;
      max-width: 100% !important;
      overflow: hidden !important;
    }
    
    /* Button container wrapper divs */
    #golive-buttons-container > div {
      height: auto !important;
      min-height: auto !important;
      max-height: none !important;
      align-items: flex-start !important;
    }
    
    /* Button container itself - prevent overflow */
    #golive-buttons-container {
      height: auto !important;
      min-height: auto !important;
      max-height: none !important;
      align-items: flex-start !important;
      max-width: 100% !important;
      overflow: hidden !important;
      box-sizing: border-box !important;
      padding: 0 2px !important;
    }
    
    /* Hide album art and VU meter on mobile to save space */
    #goliveAlbumArt {
      display: none !important;
    }
    
    #goliveVUmeter {
      display: none !important;
    }
    
    /* Hide backtiming box on mobile to prevent overflow */
    #PlayerBacktimingBox {
      display: none !important;
    }
    
    /* Ensure title/artist container takes full width on mobile */
    #PlayerTitleArtistContainer {
      flex-grow: 1 !important;
      min-width: 0 !important;
      max-width: 100% !important;
      padding: 8px 10px !important;
    }
    
    /* Ensure player container doesn't overflow on mobile */
    #player {
      overflow: hidden !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
    
  }

  .modal-content-new {
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    margin: auto;
    padding: 0;
    border: 2px solid var(--border-color);
    width: 90%;
    max-width: 1200px;
    height: auto;
    max-height: 90vh;
    text-align: left;
    font-size: 14px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: visible;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  
  /* Import Dialog Modal Header */
  #importDialogModal .modal-content-new > div:first-of-type {
    color: white !important;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%) !important;
    font-weight: 600 !important;
  }
  
  #mdiv {
    width: 25px;
    height: 25px;
    background-color: rgb(218, 49, 49);
    position: absolute;
    right: 5px;
    margin-top: 5px;
	border-radius: 5px;
  }

  #mdiv:hover {
      background-color: rgb(255, 110, 90);
  }

  #connclose,
  #connection #connclose,
  #golive_connclose,
  #golive_login_frm #golive_connclose,
  .modal-content-connection #connclose {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    background: transparent !important;
    position: absolute !important;
    left: auto !important;
    right: 10px !important;
    top: 10px !important;
    bottom: auto !important;
    z-index: 1000 !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--radius-md) !important;
    transition: all var(--transition-base) !important;
    margin: 0 !important;
    float: none !important;
  }


  #connclose:hover {
    background: var(--bg-hover) !important;
  }
  
  /* Modern close button X icon for connection modal */
  #connclose::before,
  #connclose::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 14px;
    background: var(--text-primary);
    border-radius: 1px;
  }
  
  #connclose::before {
    transform: rotate(45deg);
  }
  
  #connclose::after {
    transform: rotate(-45deg);
  }
  
  #connclose:hover::before,
  #connclose:hover::after {
    background: var(--accent-red);
  }
  
  /* Hide old close button elements */
  #connclose .mdiv,
  #connclose .md {
    display: none !important;
  }
  
  /* Connection Modal Header Styling - Match Library modal header exactly */
  .connection-modal-header,
  #connection .connection-modal-header,
  #connection .modal-content-connection > div:first-of-type,
  #connection .modal-content-connection > div[style*="height: 35px"],
  #connection .modal-content-connection > div[style*="padding-top: 5px"],
  #connection .modal-content-connection > div[style*="Connected to"],
  #connection .modal-content-connection > div:nth-child(2) {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%) !important;
    color: var(--text-primary) !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    padding: 8px 60px 8px 20px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    margin: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    line-height: 24px !important;
    border-bottom: 2px solid var(--border-color) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    flex: 0 0 40px !important;
    flex-basis: 40px !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
  }
  
  /* Connection Modal Content Area - No header, so content takes full height */
  #connection .modal-content-connection > div:nth-child(2),
  #connection .modal-content-connection > div[style*="background-color: rgb(64, 64, 64)"],
  #connection .modal-content-connection > div[style*="height: calc(100% - 35px)"] {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    padding: 20px !important;
    padding-top: 20px !important;
    height: calc(80vh - 0px) !important;
    max-height: calc(80vh - 0px) !important;
    min-height: 580px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
  }
  
  /* Connection Modal Labels */
  #connection div[style*="color: white"],
  #golive_login_frm div[style*="color: white"] {
    color: var(--text-primary) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    width: 90% !important;
    display: block !important;
    text-align: left !important;
  }
  
  /* Fix "Connect to IP" label specifically - first label should have no top margin */
  #connection div[style*="Connect to IP"] {
    width: 90% !important;
    display: block !important;
    text-align: left !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
  }
  
  /* Connection Modal Inputs */
  #ipaddress,
  #username,
  #password,
  #golive_user,
  #golive_password,
  #golive_port {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    width: 90% !important;
    margin: 0 auto 15px auto !important;
    transition: all var(--transition-base) !important;
    box-shadow: var(--shadow-sm) !important;
    box-sizing: border-box;
    display: block;
    text-align: left !important;
  }
  
  /* IP address input - keep center alignment if needed */
  #ipaddress {
    text-align: center !important;
  }
  
  #ipaddress:focus,
  #username:focus,
  #password:focus,
  #golive_user:focus,
  #golive_password:focus,
  #golive_port:focus {
    outline: none !important;
    border-color: var(--accent-blue) !important;
    box-shadow: var(--shadow-md) !important;
    background: var(--bg-tertiary) !important;
  }
  
  #ipaddress::placeholder,
  #username::placeholder,
  #password::placeholder,
  #golive_user::placeholder,
  #golive_password::placeholder,
  #golive_port::placeholder {
    color: var(--text-secondary);
  }
  
  /* Connection Modal Buttons */
  #requestvtlist,
  #requiestvtjob,
  #requestdayhour,
  #golive_login_frm button[onclick="golive_login()"] {
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-dark) 100%) !important;
    color: var(--text-primary) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 20px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer;
    transition: all var(--transition-base) !important;
    box-shadow: var(--shadow-md) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: 90% !important;
    max-width: 100% !important;
    margin: 10px auto !important;
    display: block;
    box-sizing: border-box;
  }
  
  #requestvtlist:hover,
  #requiestvtjob:hover,
  #requestdayhour:hover,
  #golive_login_frm button[onclick="golive_login()"]:hover {
    background: linear-gradient(135deg, var(--accent-blue-dark) 0%, var(--accent-blue) 100%) !important;
    box-shadow: var(--shadow-lg) !important;
    transform: translateY(-2px);
  }
  
  #requestvtlist:active,
  #requiestvtjob:active,
  #requestdayhour:active,
  #golive_login_frm button[onclick="golive_login()"]:active {
    transform: translateY(0);
  }
  
  /* Connection Modal Form Container */
  #selectvtlist {
    width: 90% !important;
    margin: 10px auto !important;
    display: block;
    box-sizing: border-box;
  }
  
  /* Connection Modal Select Dropdown */
  #thelist {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    padding: 10px 38px 10px 14px !important;
    font-size: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: block;
    transition: all var(--transition-base) !important;
    box-shadow: var(--shadow-sm) !important;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
  }
  
  #thelist:focus {
    outline: none !important;
    border-color: var(--accent-blue) !important;
    box-shadow: var(--shadow-md) !important;
    background: var(--bg-tertiary) !important;
  }
  
  /* Connection Modal Admin Section */
  #admindiv {
    color: var(--text-primary) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 20px 0 10px 0 !important;
    padding: 0 !important;
  }
  
  /* Connection Modal Datepicker */
  #connection #datepicker {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    padding: 10px 14px !important;
    font-size: 18px !important;
    width: 90% !important;
    max-width: 100% !important;
    margin: 10px auto !important;
    display: block;
    box-shadow: var(--shadow-sm) !important;
    transition: all var(--transition-base) !important;
    box-sizing: border-box;
  }
  
  #connection #datepicker:focus {
    outline: none !important;
    border-color: var(--accent-blue) !important;
    box-shadow: var(--shadow-md) !important;
    background: var(--bg-tertiary) !important;
  }

  #modclose {
    width: 25px;
    height: 25px;
    background-color: rgb(218, 49, 49);
    position: absolute;
    right: 5px;
    margin-top: 5px;
  }

  #modclose:hover {
      background-color: rgb(255, 110, 90);
  }

  #newclose {
    width: 40px;
    height: 40px;
    background: transparent;
    position: absolute;
    right: 10px;
    top: 10px;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    z-index: 1000;
    box-sizing: border-box;
    border: none;
    padding: 0;
  }
  
  /* Ensure newclose is positioned on the right side */
  #newtrack #newclose {
    position: absolute !important;
    right: 10px !important;
    top: 0 !important;
    left: auto !important;
    margin: 0 !important;
    float: none !important;
  }

  #newclose:hover {
    background: var(--bg-hover);
  }
  
  #newclose:active {
    transform: scale(0.95);
  }
  
  #newtrack #newclose:active {
    transform: scale(0.95) !important;
  }
  
  /* Hide the nested divs - we'll use pseudo-elements instead */
  #newclose .mdiv,
  #newclose .md {
    display: none !important;
  }
  
  /* Create modern X icon using pseudo-elements */
  #newclose::before,
  #newclose::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 2px;
    background-color: var(--text-primary);
    border-radius: 1px;
    transition: all var(--transition-base);
    top: 50%;
    left: 50%;
    margin-left: -10px;
    margin-top: -1px;
  }
  
  #newclose::before {
    transform: rotate(45deg);
  }
  
  #newclose::after {
    transform: rotate(-45deg);
  }
  
  #newclose:hover::before,
  #newclose:hover::after {
    background-color: var(--accent-red);
    width: 22px;
    margin-left: -11px;
  }
  
  /* Adjust hover transform */
  #newtrack #newclose:hover {
    transform: scale(0.95) !important;
  }
  
  #iclose {
    width: 25px;
    height: 25px;
    background-color: rgb(218, 49, 49);
    position: absolute;
    right: 5px;
    margin-top: 5px;
  }

  #iclose:hover {
      background-color: rgb(255, 110, 90);
  }
  
    
  .mdiv {
    height: 18px;
    width: 3px;
    margin-left: 11px;
    margin-top: 4px;
    background-color: white;
    transform: rotate(45deg);
    Z-index: 1;
  }
  
  .md {
    height: 18px;
    width: 3px;
    background-color: white;
    transform: rotate(90deg);
    Z-index: 2;
  }

  .slidecontainer {
    width: 100%;
    font-size: 15px;
    font-weight: 500;
  }
  
  .slider {
    -webkit-appearance: none;
    width: 200px;
    height: 2px;
    background: #a5a5a5;
    outline: none;
  }
  
  .slider:hover {
    opacity: 1;
  }
  
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 25px;
    background: #9e9e9e;
    cursor: pointer;
  }
  
  .slider::-moz-range-thumb {
    width: 10px;
    height: 25px;
    background: #9e9e9e;
    cursor: pointer;
  }

  .connection {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  .content-connection {
    background-color: #eeeeee;
    margin: auto;
    padding: 1px;
    border: 1px solid #888;
    width: 250px;
    height: 250px;
    /* height: 405px; */
    text-align: center;
    font-size: 14px;
  }


  /* ---------------- */
  html,body {
    height: 100%;
    /* Bootstrap 4.5.2 default typography - ensure it's applied */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1rem;
    line-height: 1.5;
  }
  .display-text {
    width: 100%;
    height: 100%;
    background-color: transparent;
    font-size: 12px;
    text-align: center;
    color: white;
    z-index:6;
    position: absolute;
    bottom: 0;
    top: 0;
    white-space: nowrap;
    /* text-overflow: ellipsis; */
  }
  .long-btn {
    margin: 5px 0px;
    height: 25px;
    width: 190px;
    background: radial-gradient(rgb(247, 19, 19), rgb(48, 2, 2));
    color: white;
    font-size: 11px;
    border: 1px solid rgb(100, 100, 100);
  }
  .long-btn:focus, .short-btn:focus, .mute-btn:focus, .play-btn:focus, .stop-btn:focus, .r-btn:focus, .next-btn:focus, .close-btn:focus, .mic-btn-off:focus, .mic-btn-on:focus, .mic-setting-btn:focus, .empty-btn:focus, .fxvol-btn:focus, .number-btn:focus, .record-btn:focus, .recordstart-btn:focus, .recordstop-btn:focus, .intro-btn:focus {
    outline: none;
  }
  .short-btn {
    margin: 5px 15px 5px -5px;
    height: 25px;
    width: 18px;
    background: linear-gradient(rgb(121, 121, 121), rgb(22, 22, 22));
    color: white;
    font-size: 11px;
    border: 1px solid rgb(100, 100, 100);
  }
  /* .short-btn:focus {
    outline: none;
  } */
  .mute-btn {
    border: 2px solid rgb(50, 50, 50);
    background-color: transparent;
    font-size: 16px;
    color: rgb(50, 50, 50);
    height: 85%;
    width: 70px;
    margin: 5px;
  }
  /* .mute-btn:focus {
    outline: none;
  } */
  /* Preview Button States */
  .gradientGreen {    
    background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-green-dark) 100%) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-md) !important;
  }
  .gradientGray {    
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-sm) !important;
  }
  
  /* Preview Track Button */
  #previewTrack {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    padding: 0 20px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer;
    transition: all var(--transition-base) !important;
    box-shadow: var(--shadow-sm) !important;
    text-transform: none !important;
    letter-spacing: 0.3px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  #previewTrack:hover {
    background: var(--bg-hover) !important;
    border-color: var(--accent-blue) !important;
    color: var(--accent-blue) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-1px);
  }
  
  #previewTrack:active {
    transform: translateY(0);
  }
  
  /* Preview Style - Forward and Reverse Buttons */
  .previewStyle,
  #backTrack,
  #forwardTrack {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 16px !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    cursor: pointer;
    transition: all var(--transition-base) !important;
    box-shadow: var(--shadow-sm) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
  }
  
  .previewStyle:hover,
  #backTrack:hover,
  #forwardTrack:hover {
    background: var(--bg-hover) !important;
    border-color: var(--accent-blue) !important;
    color: var(--accent-blue) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-1px);
  }
  
  .previewStyle:active,
  #backTrack:active,
  #forwardTrack:active {
    transform: translateY(0);
  }
  
  /* MoveTo Category Dropdown */
  #categoryMoveList {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 40px 12px 16px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: all var(--transition-base) !important;
    box-shadow: var(--shadow-sm) !important;
    min-height: 44px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
  }
  
  #categoryMoveList:focus {
    outline: none !important;
    border-color: var(--accent-blue) !important;
    box-shadow: var(--shadow-md) !important;
    background: var(--bg-tertiary) !important;
  }
  
  #categoryMoveList option {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    font-size: 16px !important;
    padding: 10px !important;
  }
  
  #categoryMoveList option:checked,
  #categoryMoveList option:selected {
    background: var(--accent-blue) !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
  }
  
  /* Library Preview Controls Container */
  #historyLabel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--text-primary) !important;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  #historyLabel > div:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 8px;
  }
  
  #historyLabel > div:first-child > button {
    flex-shrink: 0;
  }
  
  /* Style for "MOVE TO:" text */
  #historyLabel > div:first-child + br,
  #historyLabel > div:first-child:after {
    content: none;
  }
  
  /* Ensure proper spacing between preview controls and moveTo dropdown */
  #historyLabel > div:first-child ~ select,
  #historyLabel > br + select {
    margin-top: 12px;
  }
  
  /* Container for MoveTo dropdown - match width of preview button (57%) and center it */
  #historyLabel > select {
    width: 57% !important;
    max-width: 57% !important;
    margin: 12px auto !important;
    display: block !important;
  }    
  .play-btn {
    border: none;
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-dark) 100%);
    font-size: 16px;
    font-weight: 600;
    color: white;
    height: calc(40vh - 10px);
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
    text-transform: uppercase;
    letter-spacing: 1px;
    vertical-align: top;
    flex-shrink: 0;
    box-sizing: border-box;
  }

  /* Smaller height for play button in single waveform views */
  #waveform_legacy .play-btn,
  #waveform_new .play-btn {
    height: 240px;
  }

  /* Keep large buttons when multitrack is visible (refplayform shown) */
  #waveform_new:has(.refplayform[style*="display: block"]) .play-btn,
  #waveform_new:has(.refplayform[style*="display: flex"]) .play-btn,
  #waveform_new:has(.refplayform[style*="display: block"]) .close-btn,
  #waveform_new:has(.refplayform[style*="display: flex"]) .close-btn,
  #waveform_new:has(.refplayform[style*="display: block"]) .vt-btn,
  #waveform_new:has(.refplayform[style*="display: flex"]) .vt-btn {
    height: calc(40vh - 10px) !important;
  }
  
  .play-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    background: linear-gradient(135deg, #5ba5ff 0%, var(--accent-blue) 100%);
  }
  
  .play-btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
  }
    .vt-btn {
    border: none;
    background: linear-gradient(135deg, var(--accent-orange) 0%, #e68900 100%);
    font-size: 16px;
    font-weight: 600;
    color: white;
    height: calc(40vh - 10px);
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
    text-transform: uppercase;
    letter-spacing: 1px;
    flex-shrink: 0;
  }

  /* Smaller height for VT button in single waveform views */
  #waveform_legacy .vt-btn,
  #waveform_new .vt-btn {
    height: 240px;
  }

  /* Keep large VT button when multitrack is visible */
  #waveform_new:has(.refplayform[style*="display: block"]) .vt-btn,
  #waveform_new:has(.refplayform[style*="display: flex"]) .vt-btn {
    height: calc(40vh - 10px) !important;
  }
  
  .vt-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    background: linear-gradient(135deg, #ffa726 0%, var(--accent-orange) 100%);
  }
  
  .vt-btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
  }
  
  /* .play-btn:focus {
    outline: none;
  } */
  .stop-btn {
    border: none;
    background: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-red-dark) 100%);
    font-size: 16px;
    font-weight: 600;
    color: white;
    height: calc(40vh - 10px);
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
    text-transform: uppercase;
    letter-spacing: 1px;
    vertical-align: top;
    flex-shrink: 0;
    box-sizing: border-box;
  }

  /* Smaller height for stop button in single waveform views */
  #waveform_legacy .stop-btn,
  #waveform_new .stop-btn {
    height: 240px;
  }

  /* Keep large stop button when multitrack is visible */
  #waveform_new:has(.refplayform[style*="display: block"]) .stop-btn,
  #waveform_new:has(.refplayform[style*="display: flex"]) .stop-btn {
    height: calc(40vh - 10px) !important;
  }
  
  .stop-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    background: linear-gradient(135deg, #ff5252 0%, var(--accent-red) 100%);
  }
  
  .stop-btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
  }
  /* .stop-btn:focus {
    outline: none;
  } */
  .form-div {
    /* width: calc(50% - 94px); */
    width: calc(100% - 20px);
    height: 58px;
    /* display: inline-block; */
    /* background-color: salmon; */
    margin: 10px;
    border: .5px solid rgb(100, 100, 100);
    overflow: hidden;
	background: linear-gradient(rgb(35, 40, 45), rgb(68, 84, 101)); /* Dark gray gradient for WaveformPlaylist (legacy) */
	border-radius: 5px;	 
  }
  
  /* Ensure equal spacing between tracks - use flexbox gap to prevent margin collapsing */
  .refcurform.form-div {
    margin: 10px;
    margin-bottom: 0; /* Remove bottom margin, spacing handled by gap */
  }
  
  .refnextform.form-div {
    margin: 10px;
    margin-top: 0; /* Remove top margin, spacing handled by gap */
  }
  
  /* Middle section (record button area) - remove top/bottom margins, spacing handled by gap */
  .refrecord-section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
  
  /* Container div - use flexbox with gap for equal spacing between children */
  /* Only apply flexbox when element is not hidden (display: none) */
  #waveform_legacy > div[style*="display: inline-block"]:not([style*="display: none"]),
  #waveform_new > .refnonplayform:not([style*="display: none"]) {
    display: flex !important;
    flex-direction: column;
    gap: 10px; /* Equal spacing between all children */
    padding: 0;
    margin: 0;
  }
  
  /* Legacy: Evenly space three rows to match button height (240px) */
  #waveform_legacy > div[style*="display: inline-block"]:not([style*="display: none"]) {
    height: 240px;
  }
  
  #waveform_legacy > div[style*="display: inline-block"]:not([style*="display: none"]) > * {
    flex: 1;
  }
  
  /* Ensure refnonplayform stays hidden when display: none is set (multitrack mode) */
  #waveform_new > .refnonplayform[style*="display: none"] {
    display: none !important;
  }
  
  /* When recording (refnonplayform visible with inline-block), make it fill the height */
  #waveform_new > .refnonplayform[style*="display: inline-block"]:not([style*="display: none"]) {
    height: 100%;
    flex: 1 1 auto;
    min-height: 0;
  }
  
  /* When recording (refnonplayform visible), make the three tracks fill the available height equally */
  #waveform_new > .refnonplayform[style*="display: inline-block"]:not([style*="display: none"]) .refcurform.form-div,
  #waveform_new > .refnonplayform[style*="display: inline-block"]:not([style*="display: none"]) .refrecord-section,
  #waveform_new > .refnonplayform[style*="display: inline-block"]:not([style*="display: none"]) .refnextform.form-div {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
  }
  
  /* Override the fixed height on form-div when in recording mode */
  #waveform_new > .refnonplayform[style*="display: inline-block"]:not([style*="display: none"]) .form-div {
    height: auto !important;
  }

    .record-form-div {
       /* height: 45%; */
    height: 34px;
    width: 90% /* 290px*/;
    background: transparent; /* Removed gray gradient to prevent outline */
    /* color: black; */
    font-size: 11px;
    border: none; /* Removed border to prevent outline */
    /* position: relative;
    bottom: 14px; */
    /* font-weight: 700; */
    display: none;
    /* display: inline-flex; */
    margin: 5px 0px;
	border-radius: 15px;
	
  }
  
    .import-div {
    /* width: calc(50% - 94px); */
    width: calc(100% - 50px);
    height: 200px;
    position: relative;
    /* display: inline-block; */
    /* background-color: salmon; */
    margin: 15px;
    border: 2px solid rgb(100, 100, 100);
    overflow: hidden;
    background: linear-gradient(to bottom, rgb(80, 80, 80), rgb(50, 50, 50));
  }
  
  /* Import track loading indicator */
  .import-track-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(64, 64, 64, 0.9);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: 5px;
    pointer-events: none;
  }
  
  .import-loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: #4a9eff;
    border-radius: 50%;
    animation: rotate-s-loader 0.8s linear infinite;
    margin-bottom: 15px;
  }
  
  .import-loading-text {
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
  }
  
  .r-btn, .next-btn, .intro-btn {
    height: 54px;
    border: 3px solid rgb(18, 18, 18);
    background-color: rgb(105, 105, 105);
    padding: 0px;
    /* position: relative;
    bottom: 14px; */
    font-weight: 500;
    font-size: 12px;
    color: black;
	border-radius: 5px;
    /* margin: 0px 1px; */
  }
  .r-btn {
    width: 30px;
  }
  .next-btn {
    width: 40%/*250px*/;
  }
  .listview-div {
    border: 1px solid rgb(100, 100, 100);
    width: calc(50% - 239px);
    height: 45%;
    display: inline-block;
    /* background-color: salmon; */
    position: relative;
    bottom: 11px;
    margin: 0px 2px;
	border-radius: 5px;
  }
  .recordstart-btn {
    /* margin: 5px 0px; */
    height: 34px;
    width: 90% /* 290px*/;
    background: linear-gradient(135deg, #ff4444 0%, #cc0000 50%, #990000 100%);
    color: white;
    font-size: 1.5vh; /*14px;*/
    border: 2px solid rgba(255, 255, 255, 0.2);
    /* position: relative;
    bottom: 26px; */
    font-weight: 600;
    margin: 5px 0px;
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 4px 12px rgba(255, 68, 68, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all var(--transition-base, 0.2s ease);
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
  }

  .recordstart-btn:hover {
    background: linear-gradient(135deg, #ff5555 0%, #dd1111 50%, #aa0000 100%);
    box-shadow: 0 6px 16px rgba(255, 68, 68, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.3);
  }

  .recordstart-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(255, 68, 68, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  .recordstart-btn.record-wavesurf {
    height: 58px;
    margin: 0px;
    font-size: 1.8vh;
  }

  /* Modernize the record label text */
  .refrecordlabel {
    text-align: center;
    color: white;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    user-select: none;
  }

  .refholder.record-wavesurf {    
    margin: 0px;
  }

  .record-wavesurf {
    width: 100% !important;
  }

  .recordstop-btn {
    /* margin: 5px 0px; */
    height: 34px;
    width: 90% /* 290px*/;
    background: radial-gradient(rgb( 112, 130, 56), rgb(0, 100, 20));
    color: white;
    font-size: 1.6vh; /*14px;*/
    border: 3px solid rgb(100, 100, 100);
    /* position: relative;
    bottom: 30px; */
    font-weight: 500;
    margin: 5px 0px;
	border-radius: 5px;
  }
  .recordform {
    /* height: 45%; */
    height: 34px;
    width: 90% /* 290px*/;
    background: transparent; /* Removed to prevent outline */
    /* color: black; */
    font-size: 11px;
    border: none; /* Removed border to prevent outline */
    /* position: relative;
    bottom: 14px; */
    /* font-weight: 700; */
    display: none;
    /* display: inline-flex; */
    margin: 5px 0px;
	border-radius: 15px;
  }
  .intro-btn {
    width: 10%;
    bottom: 25px;
	border-radius: 5px;
  }
  .close-btn {
    border: none;
    height: calc(40vh - 10px);
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    background: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-red-dark) 100%);
    margin: 0;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    position: relative;
    flex-shrink: 0;
  }

  /* Smaller height for close button in single waveform views */
  #waveform_legacy .close-btn,
  #waveform_new .close-btn {
    height: 240px;
  }

  /* Keep large close button when multitrack is visible */
  #waveform_new:has(.refplayform[style*="display: block"]) .close-btn,
  #waveform_new:has(.refplayform[style*="display: flex"]) .close-btn {
    height: calc(40vh - 10px) !important;
  }
  
  .close-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    background: linear-gradient(135deg, #ff5252 0%, var(--accent-red) 100%);
  }

  .close-btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
  }

  /* Modern X icon for close button */
  .close-btn::before,
  .close-btn::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 24px;
    background: white;
    border-radius: 2px;
    transition: all var(--transition-fast);
  }

  .close-btn::before {
    transform: rotate(45deg);
  }

  .close-btn::after {
    transform: rotate(-45deg);
  }

  .close-btn:hover::before,
  .close-btn:hover::after {
    height: 28px;
  }

  .close-div {
    display: none;
  }
  .mic-btn-off {
    border: 1px solid rgb(100, 100, 100);
    background: linear-gradient(rgb(108, 108, 108), rgb(33, 33, 33));
    font-size: 14px;
    color: white;
    height: 35px;
    width: calc(100% - 5px);
    margin-top: -5px;
    margin-bottom: -3px;
    padding: 0px;
	border-radius: 5px;
   }
  /* .mic-btn-off:focus {
    outline: none;
  } */
  .mic-btn-on {
    border: 1px solid rgb(100, 100, 100);
    background: linear-gradient(rgb(0, 174, 0), rgb(0, 98, 0));
    font-size: 14px;
    color: black;
    height: 35px;
    width: calc(100% - 5px);
    margin-top: -5px;
    margin-bottom: -3px;
    padding: 0px;
	border-radius: 5px;
   }
  /* .mic-btn-on:focus {
    outline: none;
  } */
  .mic-setting-btn {
    border: 2px solid rgb(153, 153, 153);
    background-color: transparent;
    font-size: 11px;
    color: black;
    height: 21px;
    width: calc(100% - 5px);
	border-radius: 5px;
  }
  /* .mic-setting-btn:focus {
    outline: none;
  } */
  .empty-btn {
    border: 1px solid rgb(100, 100, 100);
    background: linear-gradient(rgb(54, 54, 54), rgb(30, 30, 30));
    font-size: 13px;
    color: white;
    height: calc(10% - 4px);
    width: 170px;
	position:relative;	
	left:5%;
    margin: 2px;
    white-space: nowrap;
    text-align: center;
	border-radius: 5px;
  }
    .playing-btn {
    border: 1px solid rgb(100, 100, 100);
    background: linear-gradient(rgb(0, 54, 0), rgb(0, 30, 0));
    font-size: 13px;
    color: white;
    height: calc(10% - 4px);
    width: 170px;
    margin: 2px;
    white-space: nowrap;
    text-align: center;
	border-radius: 5px;
  }
  
  
  /* .empty-btn:focus {
    outline: none;
  } */
  .fxvol-btn {
    border: 1px solid rgb(100, 100, 100);
    background: linear-gradient(rgb(41, 116, 199), rgb(1, 47, 104));
    font-size: 10px;
    color: white;
    height: 25px;
    width: 86px;
    margin: 5px 2px;
	border-radius: 5px;
  }
  .number-btn {
    border: 1px solid rgb(100, 100, 100);
    background: linear-gradient(rgb(41, 116, 199), rgb(1, 47, 104));
    font-size: 20px;
    color: black;
    height: 33px;
    width: 41px;
	border-radius: 5px;
  }
  /* .number-btn:focus {
    outline: none;
  } */
  .record-btn {
    border: 1px solid rgb(100, 100, 100);
    background-color: rgb(200, 200, 200);
    font-size: 16px;
    height: 65px;
    width: 90px;
    margin: 0px 5px 5px 5px;
    font-size: 13px;
	border-radius: 5px;
  }
  /* .record-btn:focus {
    outline: none;
  } */
  .date-show {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    text-align: center;
    color: var(--text-primary);
    height: 90%;
    margin: 3px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
  }

  /* Datepicker input styling */
  #datepicker {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all var(--transition-base) !important;
  }

  #datepicker:focus {
    outline: none !important;
    border-color: var(--accent-blue) !important;
    box-shadow: var(--shadow-md) !important;
  }
  .empty-rect {
    border: 1px solid rgb(100, 100, 100);
    width: 90% /* 290px*/ ;
    height: 15px;
    background-color:rgb(64, 64, 64);
    /* margin: 0px 5px; */
    position: relative;
	border-radius: 5px;
  }
  .empty-rect-wavesurf {
    border: 1px solid rgb(100, 100, 100);
    width: 100% /* 290px*/ ;
    height: 15px;
    background-color:rgb(64, 64, 64);
    /* margin: 0px 5px; */
    position: relative;
	  border-radius: 5px;
  }
  .valuetext {
    /* width: 30px; */
    /* background-color: transparent; */
    /* height: 10px; */
    font-size: 15px;
    text-align: center;
    position: relative;
    bottom: 3px;
  }
  .recordlabel {
    /* display: block; */
    /* position: absolute;
    top: 0px;
    left: 70px; */
    /* padding: 0px; */
    text-align: center;
    /* font-size: 9px; */
  }

  .vtlist {
    background-color: #fff0f0;
    /* height: 50px; */
    width: 100%;
    /* padding: 10px; */
    font-size: 15px;

    display: inline-block;
    height: 25%;
  }

  .formclass {
    background-color: #f0f0f0;
    height: 80px;
    width: 90%;
    margin: 0px 12px;
  }
  #thelist {
    height: 100%;
  }

  .spinning-loader {
    width: 70px;
    height: 70px;
    border: 5px solid rgba(29, 161, 242, 0.3);
    border-left-color: rgb(29, 161, 242);
    border-radius: 50%;
    background: transparent;
    animation-name: rotate-s-loader;
    animation-iteration-count: infinite;
    animation-duration: 0.7s;
    animation-timing-function: linear;
    position: absolute;
    top: calc(50% - 35px);
    left: calc(50% - 35px);
    z-index: 8;
    display: none;
  }
  
  @keyframes rotate-s-loader {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 8;
    top: 0;
    right: 0;
    left: auto;
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    overflow-x: hidden;
    overflow-y: auto;
    transition: width 0.3s ease;
    padding-top: 20px;
    border-left: 2px solid var(--border-color);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.5);
  }
  
  .sidenav a {
    padding: 14px 20px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    border-bottom: 1px solid var(--border-color);
    transition: all var(--transition-base);
  }
  
  .sidenav a:hover {
    background: var(--bg-hover);
    color: var(--accent-blue);
    padding-left: 24px;
  }
  
  .sidenav a img {
    filter: brightness(0) invert(1);
    opacity: 0.9;
    transition: opacity var(--transition-fast);
  }
  
  .sidenav a:hover img {
    opacity: 1;
    filter: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(200deg);
  }
  
  .sidenav .closeNavBtn {
    position: absolute;
    top: 15px;
    left: auto;
    right: 20px;
    font-size: 32px;
    font-weight: 300;
    color: var(--text-primary);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    line-height: 1;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    margin: 0;
  }
  
  .sidenav .closeNavBtn:hover {
    background: var(--bg-hover);
    color: var(--accent-red);
    transform: rotate(90deg);
  }
  
	.menuButton {
		font-size: 16px;
		font-weight: 600;
		cursor: pointer;
		border: none;
		background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
		color: var(--text-primary);
		width: 13%;
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		margin: 0 4px;
		border-radius: var(--radius-md);
		box-sizing: border-box;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		transition: all var(--transition-base);
		box-shadow: var(--shadow-sm);
		position: relative;
	}

	.menuButton:hover {
		background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-hover) 100%);
		box-shadow: var(--shadow-md);
		transform: translateY(-2px);
		color: var(--text-primary);
	}

	.menuButton:active {
		transform: translateY(0);
		box-shadow: var(--shadow-sm);
	}

	.menuButton img {
		filter: brightness(0) invert(1);
		opacity: 0.9;
		transition: opacity var(--transition-fast);
	}

	.menuButton:hover img {
		opacity: 1;
	}

	/* Special styling for GOLive button */
	#webrtcmenu.menuButton {
		background: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-red-dark) 100%);
		color: white;
	}

	#webrtcmenu.menuButton:hover {
		background: linear-gradient(135deg, #ff5252 0%, var(--accent-red) 100%);
		box-shadow: var(--shadow-lg);
	}

	/* Bottom navigation container styling */
	#bottomNavigation {
		background-color: var(--bg-primary) !important;
		border-top: 1px solid var(--border-color) !important;
		box-shadow: var(--shadow-md) !important;
		gap: 8px;
		justify-content: center;
		flex-wrap: wrap;
	}

	/* Ensure buttons don't overflow on smaller screens */
	@media screen and (max-width: 1200px) {
		.menuButton {
			width: auto;
			min-width: 120px;
			flex: 1 1 auto;
			padding: 0 12px;
		}
	}
  
    .importMenuButton {
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	border: none;
	background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
	color: var(--text-primary);
	width: 13%;
	height: 60px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 4px;
	vertical-align: middle;
	line-height: 25px;
	border-radius: var(--radius-md);
	transition: all var(--transition-base);
	box-shadow: var(--shadow-sm);
	box-sizing: border-box;
  }

  .importMenuButton:hover {
	background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-hover) 100%);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
  }

  .importMenuButton:active {
	transform: translateY(0);
	box-shadow: var(--shadow-sm);
  }
  
  /* Modernize View Library and Upload Track buttons */
  #GotoLibrary,
  #importUpload {
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-dark) 100%) !important;
    color: var(--text-primary) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 20px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer;
    transition: all var(--transition-base) !important;
    box-shadow: var(--shadow-md) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  
  #GotoLibrary:hover,
  #importUpload:hover {
    background: linear-gradient(135deg, var(--accent-blue-dark) 0%, var(--accent-blue) 100%) !important;
    box-shadow: var(--shadow-lg) !important;
    transform: translateY(-2px);
  }
  
  #GotoLibrary:active,
  #importUpload:active {
    transform: translateY(0);
  }
  
  @media screen and (max-height: 450px) {
    /* .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;} */
  }

  .flex-box {
    display: flex;
    flex-flow: column;
    height: 100%;
	border-radius: 5px;	
  }

  .samplebutons a {
    font-size: 25px;
    text-decoration: none;
    color: yellow;
    white-space: nowrap;
    padding: 0px 0px 0px 60px;
	border-radius: 5px;
  }

  .samplebutons {
    width: 192px;
    background-color: rgb(32, 32, 32);
    position:  absolute;
    right: 20px;
    top: 53px;
    z-index: 8;
    height: calc(100% - 53px);
    display: none;
    border: 1px solid black;	
	border-radius: 5px;
  }

  .circlePercent {
    position: absolute;
    top: calc(50% - 48px);
    left: calc(50% - 48px);
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: orange;
    display: none;
    z-index: 9;
  }
  .circlePercent:before,
  .circlePercent > .progressEnd {
    position: absolute;
    z-index: 13;
    top: 2px;
    left: 45px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: white;
    -ms-transform-origin: 3px 46px;
    transform-origin: 3px 46px;
    content: "";
  }
  .circlePercent:after,
  .circlePercent > .progress {
    position: absolute;
    -ms-transform-origin: 48px 48px;
    transform-origin: 48px 48px;
    z-index: 10;
    top: 0;
    left: 0;
    width: 48px;
    height: 96px;
    border-radius: 48px 0 0 48px;
    background: orange;
    content: "";
  }
  .circlePercent.fiftyPlus:after {
    background: white;
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  .circlePercent > .progress.progress {
    background: white;
  }
  .circlePercent > .counter {
    position: absolute;
    box-sizing: border-box;
    z-index: 12;
    width: 100px;
    height: 100px;
    margin-top: -2px;
    margin-left: -2px;
    border-radius: 50%;
    border: 4px solid orange;
  }
  .circlePercent > .counter:before {
    position: absolute;
    z-index: 11;
    top: 50%;
    margin-top: -13px;
    width: 100%;
    height: 26px;
    font-size: 26px;
    line-height: 26px;
    font-family: sans-serif;
    text-align: center;
    color: white;
    content: attr(data-percent) "%";
  }
  .circlePercent > .counter:after {
    position: absolute;
    width: 80px;
    height: 80px;
    top: 6px;
    left: 6px;
    border-radius: 50%;
    background: orange;
    content: "";
  }
  .circlePercent > .counter[data-percent="100"] {
    background: white;
  }

  html, body, .flex-box {
	background-color: rgb(20, 20, 20);  /* Or black, or fully transparent if you want */
  }
#waveform {
    margin: 0 auto;
    display: block;
}
 
  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }

  .record-form-div.record-wavesurf {
    height: 45px;
    background: transparent !important; /* Remove background to prevent outline */
    border: none !important; /* Remove border to prevent outline */
  }
  #waveform_new .form-div {
    background: linear-gradient(rgb(35, 40, 45),rgb(68, 84, 101)); /* Twice as dark */
  }
  
  /* Remove outline from voice track container */
  .refrecordform.record-form-div.record-wavesurf,
  #recordform {
    background: transparent !important;
    border: none !important;
    outline: none !important;
  }
  
  /* Very dark gray background for voice track (record div) - WaveSurfer canvas and wrapper */
  #recordform canvas,
  #recordform .wavesurfer-wrapper,
  #recordform > div,
  #recordform .playlist,
  #recordform .playlist-tracks,
  .refrecordform.recordform,
  .refrecordform.recordform > div,
  .refrecordform.recordform .playlist,
  .refrecordform.recordform .playlist-tracks,
  .refrecordform.recordform canvas {
    background: linear-gradient(rgb(35, 40, 45), rgb(68, 84, 101)) !important;
  }
  
  /* Constrain the recordform container itself - clip any overflow */
  .refrecordform.recordform {
    max-height: 50px !important;
    height: 50px !important;
    overflow: hidden !important;
    position: relative !important;
  }
  
  /* Increase height of recorded voice waveform div */
  #recordform .playlist-tracks,
  .refrecordform.recordform .playlist-tracks {
    min-height: 50px !important;
    max-height: 50px !important;
    height: 50px !important;
    overflow: hidden !important;
    position: relative !important;
  }
  
  /* Constrain waveform canvas rendering to container height */
  #recordform .playlist,
  .refrecordform.recordform .playlist {
    max-height: 50px !important;
    height: 50px !important;
    overflow: hidden !important;
    position: relative !important;
  }
  
  /* Specifically constrain the canvas element - override HTML attribute, inline style, and force clipping */
  .refrecordform.recordform .playlist-tracks canvas[width],
  .refrecordform.recordform .playlist-tracks canvas,
  #recordform .playlist-tracks canvas[width],
  #recordform .playlist-tracks canvas {
    max-height: 50px !important;
    height: 50px !important;
    overflow: hidden !important;
    clip-path: inset(0 0 0 0) !important;
  }
  
  /* Ensure all child divs respect container height */
  .refrecordform.recordform .playlist-tracks > div,
  #recordform .playlist-tracks > div {
    max-height: 50px !important;
    overflow: hidden !important;
  }
  
  /* Override trackStart and nextstart div backgrounds to prevent green/lime background */
  #recordform .trackStart,
  #recordform .nextstart {
    background: transparent !important;
  }
  
  .refvoiceform {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.2vh;
    color: white;
    z-index: 10;
    pointer-events: none;
    white-space: nowrap;
  }

/* Wavesurfer multitrack layout for refplayform */
.refplayform {
  display: none; /* toggled by JS */
  width: 100%;
  max-width: 100%;
  height: 40vh;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
}

.refplayform[style*="display: block"],
.refplayform[style*="display: flex"] {
  display: flex !important;
  flex-direction: column;
}

.wavesurfer-multitrack {
  width: 100%;
  max-width: 100%;
  height: 40vh;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-sizing: border-box;
  padding: 5px;
  margin: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* Ensure multitrack container uses full width of its parent */
.refplayform > #multitrack-container,
.refplayform > .wavesurfer-multitrack {
  width: 100% !important;
  max-width: 100% !important;
}

.wavesurfer-multitrack .ws-track {
  flex: 1 1 auto;
  min-height: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.wavesurfer-multitrack .ws-track:hover {
  border-color: var(--border-color-strong);
  box-shadow: var(--shadow-sm);
}

.wavesurfer-multitrack .ws-track .track-label {
  width: 120px;
  min-width: 120px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.9rem;
  border-right: 1px solid var(--border-color);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.wavesurfer-multitrack .ws-track .track-canvas {
  flex: 1 1 auto;
  height: 100%;
  background: var(--bg-secondary);
}

/* Ensure waveform visibility in multitrack */
.wavesurfer-multitrack canvas,
#multitrack-container canvas {
  background: var(--bg-secondary) !important;
}

/* Waveform bars visibility - ensure light colors for dark backgrounds */
.wavesurfer-multitrack .wavesurfer-wave {
  opacity: 0.9;
}

/* Dark waveforms in waveform_new container */
#waveform_new .wavesurfer-multitrack canvas,
#waveform_new #multitrack-container canvas,
#waveform_new .wavesurfer-wave {
  opacity: 0.9;
}

/* Ensure refplayform fills the waveform_new height when multitrack is visible */
#waveform_new:has(.refplayform[style*="display: block"]) .refplayform,
#waveform_new:has(.refplayform[style*="display: flex"]) .refplayform {
  height: 100% !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* Ensure multitrack container fills available height in waveform_new */
#waveform_new:has(.refplayform[style*="display: block"]) #multitrack-container,
#waveform_new:has(.refplayform[style*="display: flex"]) #multitrack-container,
#waveform_new:has(.refplayform[style*="display: block"]) .wavesurfer-multitrack,
#waveform_new:has(.refplayform[style*="display: flex"]) .wavesurfer-multitrack {
  height: 100% !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* Multitrack container dark mode styling */
#multitrack-container {
  background: var(--bg-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  color: var(--text-primary) !important;
  height: calc(40vh - 10px) !important;
  min-height: calc(40vh - 10px) !important;
  max-height: calc(40vh - 10px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* First div after multitrack-container - match container height (created by Multitrack library) */
#multitrack-container > div:first-child {
  height: calc(40vh - 10px) !important;
  min-height: calc(40vh - 10px) !important;
  max-height: calc(40vh - 10px) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* Wrapper div with position relative and width - match container height and use flexbox */
#multitrack-container > div:first-child > div[style*="position: relative"][style*="width"]:not([style*="background"]) {
  height: calc(40vh - 10px) !important;
  min-height: calc(40vh - 10px) !important;
  max-height: calc(40vh - 10px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  align-items: stretch !important;
}

/* Ensure the wrapper div distributes tracks evenly */
#multitrack-container > div:first-child > div[style*="position: relative"][style*="width"]:not([style*="background"]) > div[style*="background: rgb(45, 45, 45)"] {
  flex: 1 1 0 !important;
  min-height: 0 !important;
}

/* Three track divs with position relative and background rgb(45, 45, 45) - fill height evenly using flexbox */
#multitrack-container > div:first-child > div[style*="position: relative"][style*="background: rgb(45, 45, 45)"] {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}

/* Ensure track divs constrain their height to the flexbox distribution */
#multitrack-container > div:first-child > div[style*="background: rgb(45, 45, 45)"] {
  overflow: hidden !important;
  max-height: 100% !important;
}

/* Ensure canvas containers inside track divs use full height and respect container */
#multitrack-container > div:first-child > div[style*="background: rgb(45, 45, 45)"] .canvases,
#multitrack-container > div:first-child > div[style*="background: rgb(45, 45, 45)"] ::part(canvases) {
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
}

/* Override the min-height: 42px in shadow DOM */
#multitrack-container > div:first-child > div[style*="background: rgb(45, 45, 45)"] .canvases[style*="min-height: 42px"] {
  min-height: 100% !important;
  max-height: 100% !important;
}

/* Ensure canvas divs inside canvases use full height */
#multitrack-container > div:first-child > div[style*="background: rgb(45, 45, 45)"] .canvases > div {
  height: 100% !important;
  max-height: 100% !important;
}

/* Ensure canvas elements inside track divs fill the track height but don't exceed it */
#multitrack-container > div:first-child > div[style*="background: rgb(45, 45, 45)"] canvas {
  height: 100% !important;
  max-height: 100% !important;
}

/* Target the div inside canvases that has the height style */
#multitrack-container > div:first-child > div[style*="background: rgb(45, 45, 45)"] .canvases > div[style*="height"] {
  height: 100% !important;
  max-height: 100% !important;
}

/* Sibling div right after multitrack-container - match container height */
#multitrack-container + div {
  height: calc(40vh - 10px) !important;
  min-height: calc(40vh - 10px) !important;
  max-height: calc(40vh - 10px) !important;
}

/* Ensure tracks fill the container height evenly - same height as buttons */
#multitrack-container .ws-track,
.wavesurfer-multitrack .ws-track {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  height: auto !important;
}

/* Ensure track canvas fills track height */
#multitrack-container .ws-track .track-canvas,
#multitrack-container .ws-track canvas,
.wavesurfer-multitrack .ws-track .track-canvas,
.wavesurfer-multitrack .ws-track canvas {
  height: 100% !important;
  background: var(--bg-secondary) !important;
}

/* Scrollbar styling for multitrack container */
#multitrack-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

#multitrack-container::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

#multitrack-container::-webkit-scrollbar-thumb {
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
}

#multitrack-container::-webkit-scrollbar-thumb:hover {
  background: var(--bg-hover);
}

/* Better alignment for waveform containers */
#waveform_legacy,
#waveform_new {
  display: flex;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  height: 240px;
  max-height: 240px;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Larger height when multitrack is visible - fill multitrack container height */
#waveform_new:has(.refplayform[style*="display: block"]),
#waveform_new:has(.refplayform[style*="display: flex"]) {
  height: 40vh !important;
  max-height: 40vh !important;
  min-height: 40vh !important;
}

#waveform_legacy > button,
#waveform_new > button {
  flex-shrink: 0;
}

/* Ensure content area doesn't overflow and uses full width */
#waveform_legacy > div,
#waveform_new > div {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

/* Override inline styles for content divs */
.refnonplayform,
.refplayform {
  width: 100% !important;
  max-width: 100% !important;
}