/* --- Unified Header & Typography --- */
	:root {
	  /* Base Colors */
	  --accent-purple: #bb99ff;
	  /* Base Glow Variable */
	  --glow-opacity: 0.5;
	  --accent-purple-glow: rgba(187, 153, 255, var(--glow-opacity));

	  /* Typography & Interface */
	  --text-muted: rgba(204, 204, 204, 0.85); /* Header/About description text */
	  --text-faded: rgba(255, 255, 255, 0.7);  /* Metadata/Small text */

	  /* Red System Alerts */
	  --accent-red-glow: rgba(255, 71, 71, 0.4);

	  /* Subtle Memo Theme */
	  --memo-bg: rgba(30, 0, 40, 0.6);
	  --memo-accent: #bb99ff;
	  --memo-glow: rgba(187, 153, 255, 0.2);

	  /* Notification & Alert System */
	  --notify-bg: rgba(0, 229, 255, 0.1);    /* High-tech Cyan tint */
	  --notify-border: rgba(0, 229, 255, 0.4);
	  --notify-accent: #00e5ff;               /* Bright Cyan for labels */

	  /* UI Borders */
	  --border-purple-low: rgba(187, 153, 255, 0.2); /* Used in tabs/containers */
	  --accent-red: #ff4747;
	  --bg-dark: #0a000e;
	  --bg-deep: #1a001b; /* Used for the Avatar List background */
	  --text-main: #dddddd;

	  /* Glass & Overlays */
	  --glass-bg: rgba(15, 0, 20, 0.92);
	  --glass-border: rgba(187, 153, 255, 0.2);
	  --glass-shine: inset 0 1px 0 rgba(255, 255, 255, 0.08);
	  --glass-blur: blur(12px);

	  /* Dynamic Glows */
	  --glow-purple: 0 0 20px rgba(187, 153, 255, 0.5);
	  --glow-red: 0 0 20px rgba(255, 71, 71, 0.4);
	  --glow-text: 0 0 10px rgba(187, 153, 255, 0.6);
	  --glow-jewel: 0 0 14px rgba(255, 71, 71, 0.95); /* For status dots */

	  /* Animations & Transitions */
	  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	  --transition-fast: 0.15s ease;

	  /* HUD Brackets & Accents */
	  --hud-thickness: 2px;

	  /* Tab State Variables (Restored to Part 1/11 Specs) */
  	  --tab-active-bg: linear-gradient(rgba(112, 25, 139, 0.9), rgba(52, 0, 55, 0.9));
  	  --tab-active-border: rgba(255, 120, 120, 0.4);
	  --tab-active-glow: 0 0 15px rgba(255, 0, 0, 0.3);
	  --panel-radius: 20px;
	  --orb-size: 48px;
	  --avatar-size: 100px;

	  /* Component Gradients (Original appearance) */
	  --grad-social: linear-gradient(180deg, rgba(50, 0, 63, 0.92), rgba(28, 0, 37, 0.96));
	  --grad-tab-active: linear-gradient(rgba(112, 25, 139, 0.9), rgba(52, 0, 55, 0.9));
	  --grad-station-dropdown: rgba(20, 0, 28, 0.94);
	}

	header {
	  text-align: center;
	  margin-block-end: 2.5rem;
	}

	h1, h2 {
	  color: #bb99ff;
	  text-transform: uppercase;
	  text-align: center; /* Forces all headings to center */
	}

	header h1 {
	  font: 800 3.5rem/1 sans-serif;
	  letter-spacing: 0.2em;
	  color: var(--accent-purple);
	  text-shadow: var(--glow-purple);
	  margin-block-end: 0.5rem;
	}

	header p {
	  font: 500 1.15rem ui-monospace, monospace;
	  color: var(--text-muted);
	  max-width: 640px;
	  margin: 0 auto;
	  text-align: center;
	}

	h2 {
	  font-size: 2.4rem;
	  margin: 0 auto 1.5rem; /* Centering the block itself + bottom margin */
	  text-shadow: 0 0 10px #a061ff;
	}

	p {
	  font-size: 1.15rem;
	  line-height: 1.5;
	  margin-bottom: 1.25rem;
	  text-align: center;
	}

	* { box-sizing: border-box; }

	body {
	  margin: 0;
	  padding: 0;
	  font-family: 'Segoe UI', Tahoma, sans-serif;
	  color: #ddd;
	  background: none;
	  overflow-x: hidden;
	}

	#bgVideo,
	#bgVideoOverlay {
	  position: fixed;
	  inset: 0;
	}

	#bgVideo {
	  width: 100vw;
	  height: 100vh;
	  object-fit: cover;
	  z-index: -2;
	  transform: translateZ(0);
	  backface-visibility: hidden;
	  will-change: transform;
	}

	#bgVideoOverlay {
	  background: rgba(0, 0, 0, 0.35);
	  pointer-events: none;
	  z-index: -1;
	}

	.container {
	  position: relative;
	  z-index: 1;
	  max-width: 900px;
	  margin: 0 auto;
	  padding: 2rem 1rem 6rem;

	  /* Initial hidden state */
	  opacity: 0;
	  visibility: hidden;
	  transition: opacity 0.6s ease, visibility 0.6s;
	}

	.container.visible {
	  opacity: 1;
	  visibility: visible;
	}

	/* stream.html uses streamPage (no overlay/JS fade-in), so keep it visible */
	.container.streamPage {
	  opacity: 1;
	  visibility: visible;
	  transition: none;
	}

	/* stream.html uses wide for a wider layout */
	.container.wide {
	  max-width: 75%;
	}

	.container.stream-wide {
	  max-width: 1600px;
	}

	/* --- High-Tech System Overlay --- */
	#overlay {
	  position: fixed;
	  inset: 0;
	  z-index: 9999;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  text-align: center;
	  /* Deep Midnight glass with a purple tint */
	  background: rgba(15, 0, 20, 0.92);
	  backdrop-filter: blur(15px);
	  color: #bb99ff;
	  padding: 2rem;
	  cursor: pointer;
	  user-select: none;
	  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
	}

	#overlay.fade-out {
	  opacity: 0;
	  pointer-events: none;
	}

	/* --- Initialization Text Styles --- */
	#overlay h1 {
	  font: 800 3rem/1.2 sans-serif;
	  letter-spacing: 0.15em;
	  text-transform: uppercase;
	  text-shadow: 0 0 20px var(--accent-purple-glow);
	  margin-bottom: 1.5rem;
	}

	#overlay p {
	  font: 500 1.1rem ui-monospace, monospace;
	  color: #fffb;
	  max-width: 600px;
	  margin-bottom: 1rem;
	}

	#overlay strong {
	  color: var(--accent-red);
	  text-shadow: var(--glow-red);
	  letter-spacing: 0.05em;
	}

	#overlay small {
	  margin-top: 2rem;
	  font-size: 0.75rem;
	  color: #8a6fc4;
	  letter-spacing: 0.1em;
	  text-transform: uppercase;
	}

	/* --- Improved Content Tabs --- */
	.content-tabs {
	  display: flex;
	  justify-content: center;
	  gap: 0.5rem;
	  width: min(760px, 100%);
	  margin-inline: auto;
	  margin-block-end: 2rem;
	  padding: 0.4rem;
	  background: var(--glass-bg);
	  backdrop-filter: blur(10px);
	  border: 1px solid var(--glass-border);
	  border-radius: 20px;
	  box-shadow: var(--glass-shine);
	}

	.content-tab {
	  flex: 1;
	  padding: 0.8rem 1rem;
	  font: 700 0.8rem sans-serif;
	  letter-spacing: 0.1em;
	  text-transform: uppercase;
	  color: rgba(232, 216, 255, 0.6);
	  background: transparent;
	  border: 1px solid transparent;
	  border-radius: 16px;
	  cursor: pointer;
	  transition: all 0.3s ease;
	}

	.content-tab:hover {
	  color: #fff;
	  background: rgba(187, 153, 255, 0.15);
	  /* Transition removed to match original static feel */
	}

	.content-tab.active {
	  color: #fff;
	  background: var(--tab-active-bg);
	  border-color: var(--tab-active-border);
	  box-shadow: var(--tab-active-glow);
	  /* Removed the modern text-shadow and glass-shine to match original */
	}

	.tab-panels {
	  position: relative;
	  width: 100%;
	  min-height: 320px;
	  transition: height 0.3s ease;
	}

	.tab-panel {
	  position: absolute;
	  inset: 0;
	  opacity: 0;
	  transform: translate3d(0, 10px, 0);
	  pointer-events: none;
	  transition: opacity 0.3s ease, transform 0.3s ease;
	  will-change: transform, opacity;
	}

	.tab-panel.active {
	  position: relative;
	  opacity: 1;
	  visibility: visible;
	  pointer-events: auto;
	  transform: translate3d(0, 0, 0) scale(1);
	  /* Add a smooth, snappy entrance */
	  transition:
	    opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
	    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.section-shell {
	  width: min(760px, 100%);
	  margin-inline: auto;
	  border-radius: var(--panel-radius);
	}

	.contact-heading {
	  margin-bottom: 0.35rem;
	}

	.social-links {
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: center;
	  gap: 0.65rem;
	  margin-top: 0.25rem;
	}

	.social-links a {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  gap: 0.4rem;
	  width: 136px;
	  min-height: 88px;
	  padding: 0.85rem 0.5rem;
	  font: 700 0.82rem sans-serif;
	  color: #e8d8ff;
	  text-decoration: none;
	  background: linear-gradient(180deg, rgba(50, 0, 63, 0.92), rgba(28, 0, 37, 0.96));
	  border: 1px solid rgba(187, 153, 255, 0.22);
	  border-radius: 18px;
	  box-shadow: 0 0 16px rgba(255, 0, 0, 0.12);
	  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	  user-select: none;
	}

	.social-links a:hover {
	  background: linear-gradient(rgba(139, 0, 159, 0.5), var(--bg-dark));
	  border-color: var(--accent-red);
	  color: #fff;
	  box-shadow: var(--glow-red), var(--glass-shine);
	  transform: translateY(-3px) scale(1.02);
	  transition: var(--transition-smooth);
	}

	.social-icon {
	  display: grid;
	  place-items: center;
	  width: 32px;
	  height: 32px;
	  /* Removed background and box-shadow to kill the "square" look */
	  background: none;
	  box-shadow: none;
	  overflow: hidden;
	}

	.social-icon img {
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
	}

	.social-label {
	  display: block;
	  font-weight: 800;
	  font-size: 0.88rem;
	  line-height: 1.2;
	  letter-spacing: 0.1em;
	  text-transform: uppercase;
	  color: #f3e8ff;
	  /* Subtle glow to make the text "light up" */
	  text-shadow: 0 0 8px rgba(187, 153, 255, 0.4);
	  transition: all 0.25s ease;
	}

	.social-links a:hover .social-label {
	  color: #fff;
	  text-shadow: 0 0 12px rgba(187, 153, 255, 0.8), 0 0 2px rgba(255, 255, 255, 0.5);
	  letter-spacing: 0.12em; /* Subtle "expanding" effect on hover */
	}

	.social-meta {
	  display: block;
	  max-width: 100%;
	  font: 500 0.65rem/1.2 ui-monospace, SFMono-Regular, monospace;
	  color: var(--accent-purple-glow); /* Purple tint to match the theme */
	  letter-spacing: 0.05em;
	  text-transform: lowercase; /* Keeps handles looking consistent */
	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  transition: all 0.25s ease;
	}

	.social-links a:hover .social-meta {
	  color: rgba(255, 255, 255, 0.9);
	  text-shadow: 0 0 5px var(--accent-purple-glow);
	  letter-spacing: 0.08em; /* Subtle expansion on hover */
	}

	#about, #contact, #avatars {
	  display: block;
	  width: min(760px, 100%);
	  margin: 0 auto;
	  padding: 2.5rem;
	  background: rgba(140, 0, 144, 0.8);
	  backdrop-filter: blur(15px);
	  color: #e8d8ff;
	  border: 1px solid var(--border-purple-low);
	  border-radius: 24px;
	  box-shadow: 0 0 40px #f00c;
	}

	.priority-memo {
	  margin-block-start: 2.5rem;
	  padding: 1.5rem;
	  background: var(--memo-bg);
	  backdrop-filter: blur(8px);
	  border: 1px solid var(--memo-glow);
	  border-left: 4px solid var(--memo-accent);
	  border-radius: 12px;
	  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	}

	.memo-label {
	  display: flex;
	  align-items: center;
	  gap: 0.5rem;
	  font: 700 0.85rem sans-serif;
	  color: #fff;
	  margin-bottom: 0.8rem;
	  opacity: 0.9;
	}

	.memo-label::before {
	  content: "✉"; /* Simple envelope icon */
	  font-size: 1rem;
	  color: #bb99ff;
	}

	/* About tab: highlighted friend-request note */
	.about-note {
	  color: #bb99ff;
	  font-weight: 700;
	}

	/* About tab: memo label + body + link styling */
	.memo-label.strong {
	  color: var(--memo-accent);
	  font-size: 0.9rem;
	  font-weight: 700;
	}

	.memo-body {
	  margin: 0.5rem 0;
	  font-size: 1rem;
	  line-height: 1.6;
	  color: #ddd;
	}

	.memo-link {
	  color: #bb99ff;
	  text-decoration: none;
	  font-weight: 700;
	  font-size: 0.9rem;
	  border-bottom: 1px solid rgba(187, 153, 255, 0.3);
	  transition: border-color 0.2s ease;
	}

	.memo-link:hover {
	  border-color: #bb99ff;
	}

	/* Avatars: [ QUERY_NULL ] empty state (no inline styles) */
	#avatarList #noResults {
	  display: none;
	  flex-basis: 100%;
	  width: 100%;
	  padding: 6rem 1rem;
	  text-align: center;
	  pointer-events: none;
	  border: 1px dashed var(--border-purple-low);
	  border-radius: 15px;
	  background: rgba(187, 153, 255, 0.03);
	}

	#avatarList #noResults > div {
	  animation: errorPulse 2s infinite ease-in-out;
	}

	#avatarList #noResults .query-null-title {
	  color: #bb99ff;
	  font: 800 1.3rem ui-monospace, monospace;
	  text-transform: uppercase;
	  letter-spacing: 0.2em;
	  text-shadow: 0 0 15px var(--accent-purple-glow);
	  margin-bottom: 0.5rem;
	}

	#avatarList #noResults .query-null-subtitle {
	  color: rgba(232, 216, 255, 0.7);
	  font: 500 0.9rem ui-monospace, monospace;
	  text-transform: uppercase;
	  letter-spacing: 0.1em;
	}

	#avatarList {
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: center;
	  gap: 1.5rem;
	  max-height: 500px;
	  padding: 2rem;
	  overflow-y: auto;
	  list-style: none;

	  /* Restored original texture logic */
	  background-color: var(--bg-deep);
	  background-image:
	    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
	    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
	  background-size: 4px 4px, 11px 11px;

	  border: 1px solid var(--glass-border);
	  border-radius: var(--panel-radius);
	  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6);
	}

	/* --- Unified Cyberpunk Scrollbars --- */
	#avatarList::-webkit-scrollbar,
	#stationSelect::-webkit-scrollbar {
	  width: 10px;
	}

	#avatarList::-webkit-scrollbar-track,
	#stationSelect::-webkit-scrollbar-track {
	  margin: 10px;
	  background: rgba(0, 0, 0, 0.4);
	  border-radius: 10px;
	  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
	}

	#avatarList::-webkit-scrollbar-thumb,
	#stationSelect::-webkit-scrollbar-thumb {
	  background: linear-gradient(var(--accent-purple), #7b3fbf);
	  border: 2px solid var(--bg-dark);
	  border-radius: 10px;
	  box-shadow: var(--glow-purple);
	}

	#avatarList::-webkit-scrollbar-thumb:hover,
	#stationSelect::-webkit-scrollbar-thumb:hover {
	  background: linear-gradient(#f00, #f66);
	  box-shadow: 0 0 15px rgba(255, 0, 0, 0.8);
	}

	.avatar-search-container {
	  text-align: center;
	  margin-bottom: 1.5rem;
	}

	.search-wrapper {
	  position: relative;
	  display: inline-block;
	  width: min(400px, 90%);
	}

	#avatarSearch {
	  width: 100%;
	  padding: 12px 45px 12px 20px;
	  font-size: 1rem;
	  color: #fff;
	  background: rgba(20, 0, 20, 0.6);
	  border: 2px solid #7b3fbf;
	  border-radius: 25px;
	  box-shadow: 0 0 10px #f006;
	  outline: none;
	  transition: all 0.3s ease;
	}

	#avatarSearch:focus {
	  border-color: #bb99ff;
	  box-shadow: 0 0 20px #f00a;
	}

	#clearSearch {
	  position: absolute;
	  top: 50%;
	  right: 15px;
	  transform: translateY(-50%);
	  display: none;
	  background: none;
	  border: none;
	  color: #bb99ff;
	  font-size: 1.5rem;
	  cursor: pointer;
	}

	.avatar-thumb {
	  width: 100px;
	  height: 100px;
	  object-fit: cover;
	  border-radius: 50%;
	  box-shadow: 0 0 10px #f00c;
	  /* Performance: Only transition transform and opacity to keep 60fps */
	  transition: transform 0.3s ease, opacity 0.5s ease-out;
	  opacity: 0; /* Hide until fully loaded */
	}

	.avatar-thumb.loaded {
	  opacity: 1;
	}

	.avatar-thumb:hover {
	  transform: scale(1.1);
	}

	.avatar-thumb.avatar-missing {
	  filter: grayscale(0.4) brightness(0.9);
	  box-shadow: 0 0 10px rgba(255, 0, 0, 0.35);
	}

	.avatar-item {
	  position: relative;
	}

	.avatar-link {
	  display: inline-flex;
	  align-items: center;
	  justify-content: center;
	  text-decoration: none;
	  outline: none;
	}

	.avatar-link:focus-visible .avatar-thumb {
	  transform: scale(1.1);
	  outline: 2px solid rgba(255, 190, 190, 0.85);
	  outline-offset: 5px;
	}

	.avatar-name-popup {
	  position: absolute;
	  bottom: calc(100% + 12px);
	  left: 50%;
	  z-index: 3;
	  width: max-content;
	  max-width: min(220px, calc(100vw - 64px));
	  padding: 0.48rem 0.72rem;
	  font: 700 0.76rem/1.2 sans-serif;
	  letter-spacing: 0.04em;
	  text-align: center;
	  color: #ffe8f7;
	  background: linear-gradient(180deg, rgba(48, 0, 55, 0.96), rgba(19, 0, 24, 0.96));
	  border: 1px solid rgba(255, 165, 165, 0.45);
	  border-radius: 999px;
	  box-shadow: 0 0 16px rgba(255, 0, 0, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
	  text-overflow: ellipsis;
	  white-space: nowrap;
	  overflow: hidden;
	  opacity: 0;
	  visibility: hidden;
	  pointer-events: none;
	  transform: translate(-50%, 8px) scale(0.96);
	  transition: all 0.18s ease;
	}

	.avatar-name-popup::after {
	  content: "";
	  position: absolute;
	  top: 100%;
	  left: 50%;
	  width: 10px;
	  height: 10px;
	  background: rgba(27, 0, 31, 0.96);
	  border: solid rgba(255, 165, 165, 0.4);
	  border-width: 0 1px 1px 0;
	  transform: translate(-50%, -55%) rotate(45deg);
	}

	/* Add this base state */
	.avatar-name-popup {
	  position: absolute;
	  bottom: 100%;      /* Positions it above the avatar */
	  left: 50%;
	  transform: translate(-50%, 10px) scale(0.9); /* Start lower and smaller */
	  opacity: 0;
	  visibility: hidden;
	  transition: all 0.2s ease;
	  pointer-events: none; /* Prevents the popup from blocking the avatar hover */
	  z-index: 100;
	}

	/* Your existing hover code now has something to transition from */
	.avatar-item:hover .avatar-name-popup,
	.avatar-item:focus-within .avatar-name-popup {
	  opacity: 1;
	  visibility: visible;
	  transform: translate(-50%, 0) scale(1);
	}

	.avatar-toggle {
	  display: inline-flex;
	  align-items: center;
	  gap: 0.6rem;
	  margin: 0.6rem auto 0.4rem;
	  padding: 0.35rem 0.8rem;
	  font: 700 0.75rem sans-serif;
	  letter-spacing: 0.08em;
	  text-transform: uppercase;
	  color: #e6d7ff;
	  background: rgba(35, 6, 45, 0.65);
	  border: 1px solid rgba(187, 153, 255, 0.25);
	  border-radius: 999px;
	  box-shadow: 0 0 16px rgba(255, 0, 0, 0.18);
	  cursor: pointer;
	}

	.avatar-toggle input {
	  position: absolute;
	  opacity: 0;
	  pointer-events: none;
	}

	.avatar-toggle .toggle-pill {
	  position: relative;
	  width: 44px;
	  height: 24px;
	  background: rgba(255, 255, 255, 0.08);
	  border: 1px solid rgba(187, 153, 255, 0.35);
	  border-radius: 999px;
	  box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.06);
	  transition: all 0.3s ease;
	}

	.avatar-toggle .toggle-knob {
	  position: absolute;
	  top: 2px;
	  left: 2px;
	  width: 18px;
	  height: 18px;
	  background: linear-gradient(#f7ccff, #b274ff);
	  border-radius: 50%;
	  box-shadow: 0 0 8px var(--accent-purple-glow);
	  transition: transform 0.3s ease;
	}

	.avatar-toggle input:checked + .toggle-pill {
	  background: rgba(120, 15, 120, 0.5);
	  border-color: rgba(255, 120, 120, 0.5);
	}

	.avatar-toggle input:checked + .toggle-pill .toggle-knob {
	  transform: translate(20px, 0);
	}

	#audioContainer {
	  position: fixed;
	  bottom: 18px;
	  left: 0;
	  right: 0;
	  margin-inline: auto; /* Absolute center anchor */
	  z-index: 10000;
	  width: min(420px, calc(100vw - 32px));
	  min-height: 48px;
	  padding: 0.5rem;
	  overflow: visible;
	  background: linear-gradient(135deg, rgba(33, 0, 43, 0.94), rgba(99, 0, 103, 0.82));
	  backdrop-filter: blur(12px);
	  border: 1px solid rgba(187, 153, 255, 0.35);
	  border-radius: 22px;
	  box-shadow: 0 0 24px rgba(255, 0, 0, 0.4);
	  opacity: 0;
	  visibility: hidden;
	  transform: translateY(20px);
	  transition:
	    opacity 0.6s ease,
	    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
	    visibility 0.6s,
	    width 0.42s cubic-bezier(0.2, 0.9, 0.2, 1),
	    height 0.42s cubic-bezier(0.2, 0.9, 0.2, 1),
	    padding 0.42s cubic-bezier(0.2, 0.9, 0.2, 1),
	    border-radius 0.42s cubic-bezier(0.2, 0.9, 0.2, 1),
	    box-shadow 0.3s ease,
	    border-color 0.3s ease,
	    background-color 0.3s ease;
	  will-change: transform, opacity; /* Hardware acceleration for smoother centering */
	}

	#audioContainer.collapsed {
	  overflow: hidden;
	  width: 48px;
	  height: 48px;
	  padding: 0;
	  border-radius: 999px;
	  box-shadow: 0 0 20px rgba(255, 0, 0, 0.34), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
	}

	#audioContainer.visible {
	  opacity: 1;
	  visibility: visible;
	  transform: translateY(0); /* Center handled by margin-inline */
	}

	#audioContainer:not(.visible) {
	  transform: translateY(14px); /* Center handled by margin-inline */
	}

	#bgMusic {
	  display: none;
	}

	#audioPlayerContent {
	  width: 100%;
	  max-height: 420px;
	  opacity: 1;
	  transform: translateY(0) scale(1);
	  transform-origin: bottom center;
	  transition:
	    max-height 0.42s cubic-bezier(0.2, 0.9, 0.2, 1),
	    opacity 0.24s ease,
	    transform 0.42s cubic-bezier(0.2, 0.9, 0.2, 1);
	}

	#audioContainer.collapsed #audioPlayerContent {
	  max-height: 0;
	  opacity: 0;
	  transform: translateY(8px) scale(0.96);
	  pointer-events: none;
	}

	.audio-collapse-toggle {
	  position: absolute;
	  top: 10px;
	  right: 10px;
	  z-index: 3;
	  display: grid;
	  place-items: center;
	  width: 30px;
	  height: 30px;
	  background: rgba(34, 0, 41, 0.9);
	  border: 1px solid rgba(187, 153, 255, 0.35);
	  border-radius: 50%;
	  box-shadow: 0 0 14px rgba(255, 0, 0, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
	  transition: all 0.24s ease, transform 0.2s ease;
	}

	.audio-collapse-toggle:hover {
	  transform: scale(1.04);
	}

	.audio-collapse-toggle:active {
	  transform: scale(0.96);
	}

	.audio-collapse-toggle:focus-visible {
	  outline: 2px solid #bb99ff;
	  outline-offset: 3px;
	}

	.audio-collapse-dot {
	  width: 9px;
	  height: 9px;
	}

	#audioContainer.collapsed .audio-collapse-toggle {
	  inset: 0;
	  width: 100%;
	  height: 100%;
	  background: radial-gradient(circle at 42% 30%, rgba(255, 170, 210, 0.28), rgba(84, 0, 98, 0.96));
	  border-color: rgba(255, 190, 190, 0.34);
	  border-radius: inherit;
	  box-shadow: 0 0 20px rgba(255, 0, 0, 0.3), inset 0 0 18px rgba(255, 255, 255, 0.08);
	}

	#audioContainer.collapsed .audio-collapse-dot {
	  width: 15px;
	  height: 15px;
	}

	.custom-player {
	  position: relative;
	  display: grid;
	  grid-template: auto auto / auto 1fr;
	  gap: 0 1rem;
	  align-items: center;
	  padding-right: 42px;
	}

	.player-btn {
	  grid-row: 2;
	  align-self: center;
	  width: 46px;
	  height: 46px;
	  font-size: 0.9rem;
	  color: #f0e6ff;
	  background: linear-gradient(rgba(68, 0, 76, 0.96), rgba(25, 0, 31, 0.98));
	  border: 1px solid rgba(187, 153, 255, 0.28);
	  border-radius: 16px;
	  box-shadow: 0 0 14px rgba(255, 0, 0, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
	  transition: all 0.2s ease;
	}

	.player-btn:hover {
	  background: linear-gradient(rgba(97, 11, 104, 0.96), rgba(37, 0, 39, 0.98));
	  border-color: rgba(255, 120, 120, 0.5);
	  box-shadow: 0 0 18px rgba(255, 0, 0, 0.34);
	}

	.player-btn:focus-visible,
	#volumeSlider:focus-visible {
	  outline: 2px solid #bb99ff;
	  outline-offset: 3px;
	}

	.player-info {
	  display: flex;
	  flex-flow: column;
	  gap: 0.45rem;
	  grid-row: 2;
	  align-self: center;
	  min-width: 0;
	}

	.player-status-row {
	  display: flex;
	  align-items: center;
	  gap: 0.4rem;
	  min-height: 20px;
	  min-width: 0;
	}

	.status-dot {
	  flex: none;
	  width: 10px;
	  height: 10px;
	  background: var(--accent-red);
	  border-radius: 50%;
	  box-shadow: var(--glow-jewel);
	  animation: pulseLive 1.8s ease-in-out infinite;
	}

	.status-dot.buffering {
	  background: #ffb347;
	  box-shadow: 0 0 14px rgba(255, 179, 71, 0.9);
	}

	.status-dot.offline {
	  background: #8e94a8;
	  box-shadow: 0 0 12px rgba(142, 148, 168, 0.45);
	  animation: none;
	  opacity: 0.72;
	}

	.status-dot.paused {
	  background: #bb99ff;
	  box-shadow: 0 0 12px var(--accent-purple-glow);
	  animation: none;
	}

	@keyframes pulseLive {
	  0%, 100% { transform: scale(0.9); opacity: 0.75; }
	  50% { transform: scale(1.15); opacity: 1; }
	}

	.player-status {
	  display: inline-flex;
	  align-items: center;
	  flex: 1;
	  min-width: 0;
	  position: relative;
	  font: 700 1rem/1.2 ui-monospace, SFMono-Regular, monospace;
	  letter-spacing: 0.04em;
	  text-transform: uppercase;
	  color: #f0e6ff;
	  text-shadow: 0 0 8px rgba(187, 153, 255, 0.55);
	  white-space: nowrap;
	}

	.status-prefix {
	  flex: none;
	  line-height: 20px;
	  white-space: nowrap;
	}

	.status-window {
	  display: inline-flex;
	  align-items: center;
	  flex: 1;
	  min-width: 0;
	  max-width: 280px;
	  height: 20px;
	  position: relative;
	  overflow: hidden;
	  background: rgba(18, 0, 22, 0.6);
	  border: 1px solid rgba(187, 153, 255, 0.25);
	  border-radius: 999px;
	  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4);
	  cursor: pointer;
	  transition: all 0.2s ease;
	}

	.status-window::after {
	  content: "";
	  position: absolute;
	  inset: 0 0 0 auto;
	  width: 34px;
	  background: linear-gradient(90deg, transparent, rgba(18, 0, 22, 0.94) 45%, #120016);
	  pointer-events: none;
	  z-index: 1;
	}

	.status-window:hover {
	  background: rgba(30, 0, 36, 0.7);
	  border-color: rgba(255, 120, 120, 0.45);
	  box-shadow: 0 0 10px rgba(255, 0, 0, 0.2), inset 0 0 8px rgba(0, 0, 0, 0.4);
	}

	.status-window .status-scroll {
	  display: inline-block;
	  white-space: nowrap;
	  line-height: 20px;
	  padding: 0 1.8rem 0 0.55rem;
	  will-change: transform;
	  z-index: 0;
	}

	.status-window .status-chevron {
	  position: absolute;
	  top: 50%;
	  right: 4px;
	  transform: translateY(-50%);
	  width: 12px;
	  height: 12px;
	  display: inline-flex;
	  align-items: center;
	  justify-content: center;
	  color: rgba(187, 153, 255, 0.85);
	  pointer-events: none;
	  z-index: 2;
	}

	.status-window .status-chevron img {
	  width: 12px;
	  height: 12px;
	  filter: brightness(1.5) drop-shadow(0 0 5px #fff);
	  transform: rotate(180deg);
	  transition: transform 0.2s ease;
	}

	.status-window.open .status-chevron img {
	  transform: rotate(0deg);
	}

	/* --- Improved Holographic Dropdown with Mesh --- */
	.station-dropdown {
	  grid-column: 1 / -1;
	  grid-row: 1;
	  width: 100%;
	  max-height: 0;
	  opacity: 0;
	  transform: translateY(-5px) scaleY(0.95);
	  transform-origin: top;
	  position: relative;
	  overflow: hidden;
	  background:
	    linear-gradient(180deg, rgba(187, 153, 255, 0.1) 0%, transparent 20%),
	    rgba(20, 0, 28, 0.94);
	  backdrop-filter: blur(12px);
	  border: 1px solid rgba(187, 153, 255, 0.15);
	  border-radius: 16px;
	  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
	  transition:
	    max-height 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1),
	    opacity 0.3s ease,
	    transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
	}

	/* --- Station Dropdown Base (Noise stays here) --- */
	.station-dropdown::before {
	  content: "";
	  position: absolute;
	  inset: 0;
	  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	  mix-blend-mode: overlay;
	  opacity: 0.12;
	  pointer-events: none;
	  z-index: 0; /* Stays in the back */
	}

	.station-dropdown.open {
	  max-height: 240px;
	  opacity: 1;
	  transform: translateY(0) scaleY(1);
	  margin-bottom: 0.6rem;
	  border-color: rgba(187, 153, 255, 0.4);
	}

	/* --- Hover State (Cleaning the Noise) --- */
	.station-dropdown select:hover {
	  /* Using a more opaque background "masks" the noise underneath */
	  background: rgba(30, 0, 45, 0.95);
	  border-color: var(--accent-red-glow);
	  color: #fff;
	}

	.station-dropdown select:focus-visible {
	  border-color: #ff4747;
	  box-shadow: 0 0 15px rgba(255, 71, 71, 0.3);
	  color: #fff;
	}

	/* Subtle flicker animation to make the grain feel "alive" */
	@keyframes noiseFlicker {
	  0% { transform: translate(0, 0); }
	  25% { transform: translate(1px, -1px); }
	  50% { transform: translate(-1px, 1px); }
	  75% { transform: translate(1px, 1px); }
	  100% { transform: translate(0, 0); }
	}

	/* --- Dynamic Scrolling Title --- */
	.player-status.scrolling .status-window .status-scroll {
	  animation: statusPingpong var(--scroll-duration, 10s) ease-in-out infinite alternate;
	  backface-visibility: hidden; /* Prevents text flicker during movement */
	}

	@keyframes statusPingpong {
	  0%, 12% { transform: translateX(0); }
	  88%, 100% { transform: translateX(calc(-1 * var(--scroll-distance, 0px))); }
	}

	/* --- Secondary Metadata --- */
	.player-subtext {
	  font-size: 0.82rem;
	  color: #fffb; /* White at 73% opacity for hierarchy */
	}

	:root {
	  --stream-shell-padding: clamp(1.1rem, 1vw, 1rem);
	  --stream-shell-max-width: 1920px;
	}

	.stream-shell {
	  display: flex;
	  flex-direction: column;
	  gap: 0.4rem;
	  position: relative;
	  width: 100%;
	  max-width: var(--stream-shell-max-width);
	  margin: 1.25rem auto 0;
	  padding: 1.1rem var(--stream-shell-padding) 1rem;

	  /* 1. Purple corner light, 2. Top rim shine, 3. Deep obsidian base */
	  background:
	    radial-gradient(circle at top right, rgba(187, 153, 255, 0.15), transparent 35%),
	    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 5%),
	    rgba(20, 0, 28, 0.88);

	  backdrop-filter: blur(14px) saturate(140%);
	  border: 1px solid var(--border-purple-low);
	  border-radius: 24px;

	  /* Shadow: 1. Internal glass edge, 2. Red neon aura, 3. Deep grounding */
	  box-shadow:
	    inset 0 1px 0 rgba(255, 255, 255, 0.08),
	    0 0 30px rgba(255, 0, 0, 0.12),
	    0 20px 50px rgba(0, 0, 0, 0.4);

	  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
	}

	/* Align with index04-20-2026.html markup */
	.stream-shell-header,
	.stream-header {
	  display: flex;
	  flex-flow: row nowrap;
	  justify-content: space-between;
	  align-items: center;
	  padding: 0 0.4rem 0.2rem;
	  margin-bottom: 1rem;
	  border: none;
	}

	.stream-embed-stack {
	  display: flex;
	  flex-direction: column;
	  gap: 1rem;
	}

	.stream-login-message {
	  margin-top: 0.7rem;
	  padding: 0 0.2rem;
	  color: rgba(255, 255, 255, 0.72);
	  font: 500 0.82rem/1.55 ui-monospace, SFMono-Regular, monospace;
	  text-align: left;
	}

	.stream-video-status {
	  margin-top: 0.7rem;
	  padding: 0 0.2rem;
	  font-size: 0.82rem;
	  color: rgba(255, 255, 255, 0.72);
	  text-align: left;
	}

	.stream-actions {
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: flex-start;
	  gap: 0.75rem;
	  margin-top: 0.9rem;
	  padding: 0.2rem 1rem 0.2rem;
	}

	.stream-action {
	  min-width: 220px;
	  padding: 0.85rem 1.1rem;
	  font: 700 0.8rem/1 sans-serif;
	  letter-spacing: 0.1em;
	  text-transform: uppercase;
	  color: #fff;
	  background: var(--tab-active-bg);
	  border: 1px solid var(--tab-active-border);
	  border-radius: 16px;
	  box-shadow: var(--tab-active-glow);
	  cursor: pointer;
	  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.25s ease;
	}

	.stream-action:hover {
	  filter: brightness(1.06);
	  box-shadow: 0 0 18px rgba(255, 0, 0, 0.32);
	  transform: translateY(-1px);
	}

	.stream-action:active {
	  transform: translateY(0);
	  filter: brightness(0.98);
	}

	.stream-action:focus-visible {
	  outline: 2px solid #bb99ff;
	  outline-offset: 3px;
	}

	/* Stream actions: optional variants used in style-current.css */
	.stream-action-subtle {
	  border-color: rgba(187, 153, 255, 0.26);
	  background: linear-gradient(
	    180deg,
	    rgba(36, 0, 46, 0.92),
	    rgba(20, 0, 24, 0.96)
	  );
	  color: rgba(240, 230, 255, 0.86);
	}

	.stream-action[disabled] {
	  transform: none;
	  opacity: 0.72;
	  cursor: wait;
	  box-shadow: 0 0 12px rgba(255, 0, 0, 0.08);
	}

	.stream-notify-status {
	  margin-top: 0.7rem;
	  font-size: 0.8rem;
	  line-height: 1.5;
	  color: rgba(214, 199, 255, 0.9);
	  text-align: left;
	}

	.stream-notify-status[data-state="success"] {
	  color: rgba(190, 255, 214, 0.94);
	}

	.stream-notify-status[data-state="error"] {
	  color: rgba(255, 188, 188, 0.96);
	}

	.stream-video-player {
	  width: 100%;
	  height: 100%;
	  display: block;
	  background: #000;
	  object-fit: cover;
	}

	/* --- Cyberpunk Corner Accent (Top Left) --- */
	.stream-shell::before {
	  content: "";
	  position: absolute;
	  top: -1px;
	  left: 30px;
	  width: 60px;
	  height: 2px;
	  background: #ff4747;
	  box-shadow: 0 0 12px #ff4747;
	  border-radius: 99px;
	  z-index: 2;
	}

	.stream-fullscreen .stream-shell-header,
	.stream-fullscreen .stream-header {
	  padding: 0;
	  margin: 0;
	}

	.stream-section-shell {
	  width: 100%;
	  margin-left: auto;
	  margin-right: auto;
	}

	.stream-title {
	  display: inline-flex;
	  align-items: center;
	  font: 700 0.85rem ui-monospace, SFMono-Regular, monospace;
	  letter-spacing: 0.25em;
	  text-transform: uppercase;
	  color: #e8d8ff;

	  /* Static "Digital Glitch" effect without the hover interaction */
	  text-shadow:
	    -1px 0 var(--accent-red-glow),
	    1px 0 rgba(0, 255, 255, 0.4),
	    0 0 10px rgba(187, 153, 255, 0.3);

	  user-select: none; /* Keeps it feeling like a UI element, not just text */
	  cursor: default;
	}

	.stream-section-shell.stream-fullscreen .stream-title {
	  display: block;
	  margin: 0.3rem 0 0 0.5rem;
	  padding: 0.2rem 0.8rem;
	  position: relative;
	  font: 700 0.85rem ui-monospace, monospace;
	  letter-spacing: 0.25em;
	  text-transform: uppercase;
	  color: #e8d8ff;
	  /* Double shadow for depth: 1. Glow, 2. Glitch offset */
	  text-shadow: 0 0 8px rgba(187, 153, 255, 0.4), 1px 0 rgba(255, 71, 71, 0.3);
	  /* The "Glass Glaze" look */
	  background: linear-gradient(90deg, rgba(187, 153, 255, 0.05), transparent);
	  border-left: 2px solid #ff4747;
	}

	/* The "HUD Bracket" - Adds a technical corner accent */
	.stream-section-shell.stream-fullscreen .stream-title::after {
	  content: "";
	  position: absolute;
	  top: 0;
	  right: 0;
	  width: 10px;
	  height: 4px;
	  border-top: 1px solid var(--accent-purple-glow);
	  border-right: 1px solid var(--accent-purple-glow);
	}

	/* Subtle scanline + noise sweep across the title */
	.stream-section-shell.stream-fullscreen .stream-title::before {
	  content: "";
	  position: absolute;
	  inset: 0;
	  /* Layer 1: Moving Scanline | Layer 2: Static Noise Grid */
	  background:
	    linear-gradient(transparent, rgba(187, 153, 255, 0.15) 50%, transparent),
	    radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	  background-size: 100% 200%, 3px 3px;
	  animation: hudScan 4s linear infinite;
	  pointer-events: none;
	  opacity: 0.6;
	}

	@keyframes hudScan {
	  0% { background-position: 0 100%, 0 0; }
	  100% { background-position: 0 -100%, 0 0; }
	}

	.stream-fullscreen-toggle {
	  display: grid;
	  place-items: center;
	  width: 42px; /* Fixed square dimensions */
	  height: 42px;
	  padding: 0; /* Remove padding to keep it circular */
	  background: linear-gradient(rgba(255, 255, 255, 0.05), transparent 50%), rgba(26, 0, 34, 0.9);
	  border: 1px solid rgba(187, 153, 255, 0.3);
	  border-radius: 50%; /* Perfect circle */
	  box-shadow: 0 0 15px rgba(255, 0, 0, 0.1), inset 0 0 10px rgba(187, 153, 255, 0.1);
	  cursor: pointer;
	  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
	}

	.stream-fullscreen-toggle:hover {
	  border-color: rgba(255, 120, 120, 0.6);
	  box-shadow: 0 0 25px rgba(255, 0, 0, 0.25), inset 0 0 15px var(--border-purple-low);
	  transform: scale(1.1); /* Slight grow instead of lift */
	}

	/* --- High-Thickness HUD Toggle --- */
	.stream-fullscreen-toggle svg {
	  pointer-events: none; /* Prevents multiple hover triggers from child elements */
	  width: 24px;
	  height: 24px;
	  /* Thickens the paths without changing the SVG math */
	  stroke: #fff;
	  stroke-width: 1.5px;
	  fill: #fff;

	  /* The "Faded" effect: 0.6 opacity makes it look like a low-power HUD */
	  opacity: 0.6;

	  /* Cyberpunk Glow: Soft and wide */
	  filter: drop-shadow(0 0 5px rgba(187, 153, 255, 0.4));
	  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.stream-fullscreen-toggle:hover svg {
	  opacity: 1; /* "Powers up" on hover */
	  stroke-width: 2px; /* Gets even heavier when active */
	  filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 12px rgba(255, 71, 71, 0.6));
	  transform: scale(1.1);
	}

	/* --- Logic for swapping icons --- */
	.stream-fullscreen-toggle .icon-minimize { display: none; }
	.stream-fullscreen-toggle.is-fullscreen .icon-maximize { display: none; }
	.stream-fullscreen-toggle.is-fullscreen .icon-minimize { display: block; }

	.stream-status-row {
	  display: flex;
	  align-items: center;
	  gap: 0.55rem;
	  color: #f0e6ff;
	  font-weight: 700;
	}

	.stream-subtext {
	  margin-top: 0.55rem;
	  font-size: 0.82rem;
	  color: #fffb;
	}

	/* --- Improved Stream Panel --- */
	.stream-panel {
	  padding: 0.8rem;
	  border-radius: 20px;
	  border: 1px solid rgba(187, 153, 255, 0.16);
	  background: linear-gradient(
	    180deg,
	    rgba(18, 0, 24, 0.86),
	    rgba(44, 0, 48, 0.74)
	  );
	  box-shadow:
	    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
	    0 0 18px rgba(255, 0, 0, 0.1);
	}

	.stream-panel-header {
	  display: flex;
	  align-items: center;
	  gap: 0.6rem;
	  margin-bottom: 0.5rem;
	}

	.stream-panel-header .stream-panel-title {
	  font: 800 0.7rem/1 ui-monospace, monospace;
	  letter-spacing: 0.2em;
	  text-transform: uppercase;
	  color: #bb99ff;
	  text-shadow: 0 0 8px rgba(187, 153, 255, 0.4);
	}

	.stream-panel-header .stream-panel-accent {
	  flex: 1;
	  height: 1px;
	  background: linear-gradient(
	    90deg,
	    var(--accent-purple-glow) 0%,
	    rgba(187, 153, 255, 0.1) 50%,
	    rgba(255, 71, 71, 0.2) 100%
	  );
	}

	.stream-panel-title {
	  display: flex;
	  align-items: center;
	  gap: 0.6rem;
	  margin-bottom: 0.5rem;
	}

	.stream-panel-title-label {
	  font: 800 0.7rem/1 ui-monospace, monospace;
	  letter-spacing: 0.2em;
	  text-transform: uppercase;
	  color: #bb99ff;
	  /* Glow makes it look like an active LED label */
	  text-shadow: 0 0 8px rgba(187, 153, 255, 0.4);
	}

	.stream-panel-accent {
	  flex: 1;
	  height: 1px;
	  /* Multi-stop gradient for a more "pulsing" laser line effect */
	  background: linear-gradient(90deg,
	    var(--accent-purple-glow) 0%,
	    rgba(187, 153, 255, 0.1) 50%,
	    rgba(255, 71, 71, 0.2) 100%
	  );
	}

	@media (prefers-reduced-motion: reduce) {
	  #audioContainer,
	  #audioPlayerContent,
	  .stream-action {
	    transition: none !important;
	  }
	}

	@media (prefers-reduced-motion: reduce) {
	  /* Kill costly background + UI animations for smoother scrolling */
	  #bgVideo { display: none; }
	  .status-dot { animation: none !important; }
	  .player-status.scrolling .status-window .status-scroll { animation: none !important; }
	  .stream-embed-frame::before { animation: none !important; }
	  .tab-panels { transition: none !important; }
	  .tab-panel,
	  .tab-panel.active { transition: none !important; }
	}

	/* 1. Base "Look" for both Video and Chat */
	.stream-embed-frame {
	  position: relative;
	  width: 100%;
	  height: 100%;
	  flex: 1; /* Instructs the glass frame to fill the column */
	  background: #0a000e;
	  border: 1px solid rgba(187, 153, 255, 0.22);
	  border-radius: 16px;
	  box-shadow: 0 0 22px rgba(255, 0, 0, 0.12),
	              inset 0 0 0 1px rgba(255, 255, 255, 0.03),
	              inset 0 0 40px rgba(0, 0, 0, 0.8);
	  overflow: hidden;
	  display: flex;
	}

	/* --- High-Definition Digital Glaze --- */
	.stream-embed-frame::before {
	  content: "";
	  position: absolute;
	  inset: 0;
	  z-index: 2;
	  pointer-events: none;

	  /* Layers: 1. Scanlines (Top), 2. Vignette, 3. HUD Sweep, 4. Noise (Bottom) */
	  background-image:
	    repeating-linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.15) 1px, transparent 2px),
	    radial-gradient(circle, transparent 50%, rgba(0, 0, 0, 0.5) 100%),
	    linear-gradient(rgba(187, 153, 255, 0.05) 50%, transparent 50.1%),
	    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

	  /* Mapping sizes to the 4 layers above */
	  background-size: 100% 100%, 100% 100%, 100% 4px, 100% 100%;
	  background-repeat: no-repeat, no-repeat, repeat, repeat;

	  opacity: 0.15;
	  mix-blend-mode: overlay;

	  /* The "Active System" Flicker */
	  animation: hudFlicker 0.15s infinite steps(2);
	}

	/* Redundant @keyframes removed */

	/* 2. The Internal Frames (Video/Chat) */
	.stream-video-frame,
	.stream-chat-frame {
	  width: 100%;
	  height: 100%;
	  border: none;
	  background: transparent; /* Allows the frame's glow to show through */
	}

	@keyframes hudFlicker {
	  0% { opacity: 0.12; }
	  100% { opacity: 0.16; }
	}

	.stream-panel-content {
	  display: grid;
	  grid-template-columns: 2.6fr 1.1fr;
	  gap: 0.8rem;
	  height: clamp(400px, 56.25vw, 720px);
	  max-height: calc(100vh - 120px);
	  align-items: stretch;
	}

	.stream-embed-column {
	  display: flex;
	  flex-direction: column;
	  height: 100%;
	  min-height: 0; /* Prevents column from overflowing its grid parent */
	}

	.stream-video-frame {
	  width: 100%;
	  height: 100% !important;
	  background: #000;
	  border: none;
	}

	.stream-chat-frame {
	  width: 100%;
	  height: 100%;
	  min-height: 0; /* Changed from 400px to avoid layout breakage */
	}

	@media (max-width: 960px) {
	  .stream-panel-content {
	    grid-template-columns: 1fr;
	    height: clamp(360px, calc(100vh - 200px), 640px);
	  }

	  .stream-panel {
	    margin-top: 2rem;
	  }

	  .stream-embed-column {
	    min-height: 0;
	  }
	}

	@media (min-width: 980px) {
	  .stream-panel {
	    display: flex;
	    flex-direction: column;
	    min-height: 0;
	  }

	  .stream-embed-frame {
	    flex: 1;
	    min-height: 0;
	  }

	  .stream-video-frame,
	  .stream-chat-frame {
	    min-height: 440px;
	  }

	  .stream-video-frame {
	    aspect-ratio: auto; /* Allow the grid height to take priority */
	    height: 100%;
	  }

	  .stream-chat-frame {
	    height: 100%;
	  }
	}


	body.stream-fullscreen-active {
	  overflow: hidden;
	}

	.stream-section-shell.stream-fullscreen {
	  position: fixed;
	  inset: 0;
	  width: 100vw;
	  height: 100vh;
	  max-width: none !important; /* Force override of .container max-width */
	  z-index: 10020;
	  background: #08000b;
	  margin: 0;
	  padding: 0;
	  overflow: hidden; /* Prevents double scrollbars in cinema mode */
	}

	.stream-section-shell.stream-fullscreen .stream-shell {
	  display: flex;
	  flex-direction: column;
	  width: 100%;
	  height: 100%;
	  flex: 1;
	  max-width: 100%;
	  margin: 0;
	  padding: calc(var(--stream-shell-padding)) var(--stream-shell-padding) 0;
	  background: #08000b; /* Redundant solid fill for total opacity */
	  border-radius: 0;
	  border: none;
	  box-shadow: none;
	  backdrop-filter: none; /* Removes transparency effects that could show video */
	}

	.stream-fullscreen .stream-panel {
	  flex: 1;
	  margin: 0;
	  padding: 0.2rem 0.6rem 2.8rem;
	  background: rgba(8, 0, 10, 0.98);
	  border: none;
	  border-radius: 0;
	}

	.stream-fullscreen .stream-panel-content {
	  display: grid;
	  grid-template-columns: 2.6fr 1fr;
	  gap: 0.7rem;
	  height: calc(100vh - 100px); /* Maximizes vertical reach */
	  padding-bottom: 90px; /* Secure clearance for centered music player */
	  flex: 1; /* Forces expansion inside the flex-shell */
	  box-sizing: border-box;
	}

	.stream-fullscreen {
	  width: 100% !important;
	  height: 100% !important; /* Forces the section to occupy full height */
	  margin-top: 0 !important; /* Removes the 2rem gap for cinema mode */
	  display: flex;
	  flex-direction: column;
	  flex: 1;
	  align-self: stretch;
	}

	/* --- Improved Fullscreen Audio HUD --- */
	body.stream-fullscreen-active #audioContainer {
	  bottom: 1.2rem;
	  left: 0;
	  right: 0;
	  margin-inline: auto;
	  z-index: 10030;
	  background: rgba(15, 0, 20, 0.85);
	  backdrop-filter: blur(20px) saturate(160%);
	  border: 1px solid rgba(187, 153, 255, 0.45);
	  box-shadow:
	    0 0 30px rgba(255, 0, 0, 0.25),
	    inset 0 0 15px rgba(187, 153, 255, 0.1);
	  transform: translateY(0); /* Remove X-translation to stop left-shift */
	  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
	}

	/* Hidden state: Slides down vertically while remaining centered */
	body.stream-fullscreen-active #audioContainer:not(.visible) {
	  transform: translateY(25px); /* Remove X-axis translation */
	  opacity: 0.4;
	}

	/* --- Improved Fullscreen "Orb" --- */
	body.stream-fullscreen-active #audioContainer.collapsed {
	  width: 56px;
	  height: 56px;
	  min-width: 56px;
	  /* Add a "Targeting Reticle" border on hover */
	  border-color: #ff4747;
	}

	body.stream-fullscreen-active #audioContainer.collapsed .audio-collapse-dot {
	  width: 14px;
	  height: 14px;
	  /* Multi-layered glow for the "Status Jewel" */
	  box-shadow:
	    0 0 10px #ff4747,
	    0 0 20px rgba(255, 71, 71, 0.5);
	}

	/* Add a scanline effect to the player only in fullscreen */
	body.stream-fullscreen-active #audioContainer::before {
	  content: "";
	  position: absolute;
	  inset: 0;
	  background: linear-gradient(
	    rgba(255, 255, 255, 0.03) 50%,
	    transparent 50%
	  );
	  background-size: 100% 4px;
	  pointer-events: none;
	  opacity: 0.3;
	}

	@media (max-width: 720px) {
	  .stream-video-frame {
	    min-height: unset;
	  }

	  .stream-fullscreen {
	    padding: 0.25rem;
	  }

	  .stream-fullscreen .stream-panel-content {
	    grid-template-columns: 1fr;
	    height: calc(100% - 100px); /* Tighter fit for mobile */
	    min-height: calc(100% - 100px);
	    padding-bottom: 70px; /* Safety gap for the music orb/bar */
	  }

	  body.stream-fullscreen-active #audioContainer {
	    bottom: 0.35rem;
	    left: 0;
	    right: 0;
	    margin-inline: auto; /* Absolute center anchor */
	    transform: translateY(0); /* Vertical only movement */
	    width: min(260px, calc(100vw - 12px));
	  }
	  body.stream-fullscreen-active #audioContainer.collapsed {
	    width: 46px;
	    height: 46px;
	    min-width: 46px;
	    margin-inline: auto; /* Keeps the orb centered */
	  }

	  body.stream-fullscreen-active #audioContainer.collapsed .audio-collapse-dot {
	    width: 10px;
	    height: 10px;
	  }
	}

	#volumeSlider {
	  grid-column: 1 / -1;
	  width: 100%;
	  height: 4px; /* Slimmer for a "stealth" look */
	  appearance: none;
	  background: rgba(255, 255, 255, 0.05); /* Very subtle track */
	  background-image: linear-gradient(90deg, #bb99ff, #ff5a5a);
	  background-size: 100% 100%;
	  border-radius: 999px;
	  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8); /* Deep recessed "slot" shadow */
	  cursor: pointer;
	  outline: none;
	}

	/* Chrome, Safari, Edge */
	#volumeSlider::-webkit-slider-thumb {
	  appearance: none;
	  width: 14px;
	  height: 14px;
	  background: #1a001b; /* Dark core */
	  border: 1px solid var(--accent-purple-glow); /* Subtle purple rim */
	  border-radius: 50%;
	  /* Subtle glow: reduced spread and opacity */
	  box-shadow:
	    0 0 8px rgba(187, 153, 255, 0.3),
	    0 2px 4px rgba(0, 0, 0, 0.5);
	  transition: all 0.2s ease;
	}

	#volumeSlider:hover::-webkit-slider-thumb {
	  background: #2c0036;
	  border-color: #bb99ff;
	  box-shadow: 0 0 12px var(--accent-purple-glow);
	  transform: scale(1.1);
	}

	/* Firefox */
	#volumeSlider::-moz-range-thumb {
	  width: 14px;
	  height: 14px;
	  background: #1a001b;
	  border: 1px solid var(--accent-purple-glow);
	  border-radius: 50%;
	  box-shadow: 0 0 8px rgba(187, 153, 255, 0.3);
	  cursor: pointer;
	}

    .station-label {
      font: 700 0.72rem sans-serif;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.7);
      white-space: nowrap;
    }

	.station-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      gap: 0.5rem;
      padding: 0.4rem 0.7rem;
      background: rgba(18, 0, 22, 0.85);
      color: #f0e6ff;
      font: 700 0.78rem/1.25 sans-serif;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      border: 1px solid rgba(187, 153, 255, 0.35);
      border-radius: 12px;
      box-shadow: inset 0 0 10px #0006;
      transition: all 0.3s ease;
    }

	.station-toggle #stationToggleLabel {
      flex: 1;
    }

	.station-toggle .chevron {
	  display: grid;
	  place-items: center;
	  width: 18px;
	  height: 18px;
	  font-size: 0.7rem;
	  color: #fff;
	  background: rgba(187, 153, 255, 0.4);
	  border: 1px solid rgba(255, 255, 255, 0.6);
	  border-radius: 50%;
	  box-shadow: 0 0 10px var(--accent-purple-glow);
	  transition: transform 0.2s ease;
	}

	/* --- Holographic Terminal List --- */
	#stationSelect {
	  width: 100%;
	  display: block;
	  padding: 0.65rem 1rem;
	  background: rgba(20, 0, 28, 0.9) repeating-linear-gradient(0deg, rgba(187, 153, 255, 0.03) 0px, rgba(187, 153, 255, 0.03) 1px, transparent 1px, transparent 2px);
	  background-size: 100% 2px;
	  border: 1px solid var(--border-purple-low);
	  border-radius: 12px;
	  font: 700 0.8rem/1.4 ui-monospace, monospace;
	  letter-spacing: 0.1em;
	  text-transform: uppercase;
	  color: #bb99ff;
	  outline: none;
	  cursor: pointer;
	  transition: all 0.3s ease;
	}

	/* --- The Secret Fix for Hover/Selection --- */
	#stationSelect option {
	  background: transparent !important;
	  color: #bb99ff;
	  padding: 0.6rem 1rem;
	  border-radius: 6px;
	  margin-bottom: 2px;
	  transition: all 0.2s ease;
	  /* This forces the browser to treat it as a custom HUD node */
	  appearance: none;
	}

	/* 1. HOVER: The "Scanning" Effect */
	#stationSelect option:hover {
	  background: rgba(187, 153, 255, 0.15) !important;
	  color: #fff !important;
	  box-shadow: 0 0 10px 100px rgba(187, 153, 255, 0.1) inset !important;
	}

	/* 2. CHECKED: The "Locked On" Neon State */
	#stationSelect option:checked {
	  background: rgba(255, 71, 71, 0.2) !important;
	  color: #ff4747 !important;
	  font-weight: 900;
	  box-shadow:
	    0 0 10px 100px rgba(255, 71, 71, 0.1) inset,
	    -4px 0 0 #ff4747 !important; /* Left "Active" bar */
	  text-shadow: 0 0 8px rgba(255, 71, 71, 0.6);
	}

	/* --- Keyboard & Focus State --- */
	#stationSelect:focus-visible {
	  border-color: #ff4747;
	  box-shadow: 0 0 15px var(--accent-red-glow);
	}

	a, button { cursor: pointer; }

	/* --- Tablet & Mobile Optimizations --- */
	@media (max-width: 800px) {
	  header h1 { font-size: 2.5rem; }
	  #avatarList { max-height: 350px; gap: 1rem; }

	  .content-tabs { flex-wrap: wrap; gap: 0.4rem; }
	  .content-tab { flex: 1 1 calc(50% - 0.3rem); font-size: 0.75rem; }

	  .section-shell { padding: 1.5rem; }
	}

	@media (max-width: 480px) {
	  header h1 { font-size: 2rem; }
	  h2 { font-size: 1.8rem; }

	  .content-tab { flex: 1 1 100%; }

	  #footer {
	    flex-direction: column-reverse;
	    text-align: center;
	    padding-bottom: 10rem;
	  }
	  .footer-credit { align-items: center; text-align: center; }
	}

	div #stream { padding: 1.7em 0; }

	/* --- Improved Cyberpunk Footer --- */
	#footer {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  gap: 2rem;
	  width: min(980px, calc(100% - 2rem));
	  margin: 3rem auto 0;
	  padding: 1.5rem 0 9.5rem; /* Increased top padding for a "floating" feel */

	  /* The "Data Line": A thin neon divider separating content from footer */
	  border-top: 1px solid rgba(187, 153, 255, 0.12);

	  font: 700 0.65rem/1.2 ui-monospace, monospace;
	  letter-spacing: 0.12em;
	  text-transform: uppercase;
	  color: rgba(255, 255, 255, 0.45);
	}

	/* --- Clean, Glowing Links --- */
	#footer a {
	  color: inherit;
	  text-decoration: none;
	  transition: all 0.3s ease;
	  position: relative;
	}

	#footer a:hover {
	  color: #bb99ff;
	  text-shadow: 0 0 8px var(--accent-purple-glow);
	}

	/* Adds a tiny "Terminal Dot" before links on hover */
	#footer a:hover::before {
	  content: ">";
	  position: absolute;
	  left: -12px;
	  color: #ff4747;
	}

	/* --- Precision Metadata Stack --- */
	.footer-credit {
	  display: flex;
	  flex-direction: column;
	  align-items: flex-end;
	  gap: 0.25rem;
	  text-align: right;
	}

	.footer-credit-line {
	  opacity: 0.8;
	  /* Alternating color for a "Log File" look */
	  &:last-child {
	    color: var(--accent-purple-glow);
	    font-weight: 400;
	  }
	}

	/* --- High-Tech Security Seal with Digital Noise --- */
	.dmca-badge {
	  display: inline-flex;
	  align-items: center;
	  justify-content: center;
	  flex: none;
	  padding: 0.5rem 0.8rem;
	  background: rgba(10, 0, 15, 0.65);
	  border: 1px solid rgba(187, 153, 255, 0.15);
	  border-radius: 4px;
	  position: relative;
	  overflow: hidden;
	  opacity: 0.7;
	  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}

	/* The Noise Layer */
    .dmca-badge::before {
      content: "";
      position: absolute;
      inset: 0;
      /* Corrected Digital Grain Texture */
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
      opacity: 0.08;
      pointer-events: none;
      mix-blend-mode: overlay;
      z-index: 1;
    }

	.dmca-badge:hover {
	  opacity: 1;
	  border-color: var(--accent-purple-glow);
	  background: rgba(20, 0, 30, 0.8);
	  box-shadow: 0 0 15px var(--border-purple-low);
	}

	/* The "Scanning" Pulse */
	.dmca-badge::after {
	  content: "";
	  position: absolute;
	  inset: 0;
	  background: linear-gradient(
	    90deg,
	    transparent,
	    rgba(187, 153, 255, 0.1) 50%,
	    transparent
	  );
	  transform: translateX(-100%);
	  z-index: 2;
	}

	.dmca-badge:hover::after {
	  animation: badgeScan 0.8s ease-out forwards;
	}

	@keyframes badgeScan {
	  to { transform: translateX(100%); }
	}

	.dmca-badge img {
	  width: 100px;
	  height: auto;
	  filter: grayscale(1) brightness(1.2) contrast(0.8);
	  transition: filter 0.3s ease;
	  z-index: 0;
	}

	.dmca-badge:hover img {
	  filter: grayscale(0) brightness(1) contrast(1);
	}

	.name-tag {
	  color: #ff4747;
	  background: rgba(255, 71, 71, 0.15);
	  padding: 0.1rem 0.4rem;
	  border-radius: 4px;
	  text-shadow: 0 0 8px rgba(255, 71, 71, 0.6);
	  font-weight: 900;
	  letter-spacing: 0.05em;
	}

	.memo-button {
	  display: inline-block;
	  margin-top: 1.25rem;
	  padding: 0.6rem 1.2rem;
	  background: transparent;
	  color: #ff4747;
	  border: 1px solid #ff4747;
	  border-radius: 99px;
	  font: 800 0.75rem ui-monospace, monospace;
	  text-transform: uppercase;
	  text-decoration: none;
	  transition: all 0.3s ease;
	  box-shadow: 0 0 10px rgba(255, 71, 71, 0.2);
	}

	.memo-button:hover {
	  background: #ff4747;
	  color: #fff;
	  box-shadow: 0 0 20px var(--accent-red-glow);
	}

	.video-js {
	  width: 100%;
	  height: auto;
	  display: block;
	}