diff --git a/assets/css/custom.css b/assets/css/custom.css
index f8f4523..e026111 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -286,18 +286,53 @@ a:hover {
     letter-spacing: -0.03em;
 }
 
+
+.radio-player-panel {
+    isolation: isolate;
+    background: #0b0f14;
+}
+
+.radio-player-panel::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background:
+        linear-gradient(120deg, rgba(8, 10, 13, 0.9) 0%, rgba(8, 10, 13, 0.52) 52%, rgba(8, 10, 13, 0.86) 100%),
+        url("/assets/images/radio-booth-bg.svg") center / cover no-repeat;
+    opacity: 0.82;
+    z-index: 0;
+}
+
+.radio-player-panel::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background:
+        radial-gradient(circle at 20% 12%, rgba(34, 211, 238, 0.24), transparent 30%),
+        radial-gradient(circle at 82% 88%, rgba(239, 68, 68, 0.16), transparent 34%);
+    pointer-events: none;
+    z-index: 0;
+}
+
+.radio-player-panel > * {
+    position: relative;
+    z-index: 1;
+}
+
 .radio-player-shell {
-    border: 1px solid var(--border);
+    border: 1px solid rgba(255, 255, 255, 0.12);
     border-radius: var(--radius-md);
     overflow: hidden;
-    background: #080a0d;
+    background: rgba(8, 10, 13, 0.68);
+    backdrop-filter: blur(4px);
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 18px 42px rgba(0, 0, 0, 0.32);
 }
 
 .radio-player-shell iframe {
     width: 100%;
     height: 100%;
     border: 0;
-    background: #080a0d;
+    background: transparent;
 }
 
 .detail-list {
diff --git a/assets/images/radio-booth-bg.svg b/assets/images/radio-booth-bg.svg
new file mode 100644
index 0000000..0326363
--- /dev/null
+++ b/assets/images/radio-booth-bg.svg
@@ -0,0 +1,103 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900" role="img" aria-label="Ilustración de una cabina de radio con micrófonos, consola y paneles acústicos">
+  <defs>
+    <linearGradient id="room" x1="0" x2="1" y1="0" y2="1">
+      <stop offset="0" stop-color="#10161d"/>
+      <stop offset="0.48" stop-color="#1a232b"/>
+      <stop offset="1" stop-color="#070a0e"/>
+    </linearGradient>
+    <linearGradient id="glass" x1="0" x2="1">
+      <stop offset="0" stop-color="#12313a" stop-opacity="0.85"/>
+      <stop offset="1" stop-color="#0e1118" stop-opacity="0.95"/>
+    </linearGradient>
+    <linearGradient id="console" x1="0" x2="1" y1="0" y2="1">
+      <stop offset="0" stop-color="#26323d"/>
+      <stop offset="1" stop-color="#0b0f14"/>
+    </linearGradient>
+    <radialGradient id="cyanGlow" cx="50%" cy="45%" r="60%">
+      <stop offset="0" stop-color="#22d3ee" stop-opacity="0.42"/>
+      <stop offset="1" stop-color="#22d3ee" stop-opacity="0"/>
+    </radialGradient>
+    <filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="24" stdDeviation="24" flood-color="#000000" flood-opacity="0.42"/>
+    </filter>
+  </defs>
+  <rect width="1600" height="900" fill="url(#room)"/>
+  <rect width="1600" height="900" fill="url(#cyanGlow)" opacity="0.75"/>
+
+  <g opacity="0.45">
+    <path d="M0 160h1600M0 310h1600M0 460h1600" stroke="#344452" stroke-width="2"/>
+    <path d="M180 0v520M350 0v520M520 0v520M1080 0v520M1250 0v520M1420 0v520" stroke="#2c3945" stroke-width="2"/>
+  </g>
+
+  <g opacity="0.7">
+    <rect x="155" y="105" width="360" height="300" rx="28" fill="#0d1218" stroke="#2d3b48" stroke-width="4"/>
+    <g fill="#1c2730">
+      <rect x="190" y="140" width="72" height="86" rx="12"/>
+      <rect x="285" y="140" width="72" height="86" rx="12"/>
+      <rect x="380" y="140" width="72" height="86" rx="12"/>
+      <rect x="190" y="252" width="72" height="86" rx="12"/>
+      <rect x="285" y="252" width="72" height="86" rx="12"/>
+      <rect x="380" y="252" width="72" height="86" rx="12"/>
+    </g>
+    <rect x="1085" y="105" width="360" height="300" rx="28" fill="#0d1218" stroke="#2d3b48" stroke-width="4"/>
+    <g fill="#1c2730">
+      <rect x="1120" y="140" width="72" height="86" rx="12"/>
+      <rect x="1215" y="140" width="72" height="86" rx="12"/>
+      <rect x="1310" y="140" width="72" height="86" rx="12"/>
+      <rect x="1120" y="252" width="72" height="86" rx="12"/>
+      <rect x="1215" y="252" width="72" height="86" rx="12"/>
+      <rect x="1310" y="252" width="72" height="86" rx="12"/>
+    </g>
+  </g>
+
+  <g filter="url(#softShadow)">
+    <rect x="520" y="95" width="560" height="330" rx="34" fill="url(#glass)" stroke="#4a5b68" stroke-width="5"/>
+    <rect x="555" y="132" width="490" height="250" rx="22" fill="#071018" opacity="0.62"/>
+    <path d="M592 154c120 92 286 96 418 0" fill="none" stroke="#22d3ee" stroke-width="5" opacity="0.28"/>
+    <circle cx="722" cy="250" r="66" fill="#111a22" stroke="#465765" stroke-width="5"/>
+    <circle cx="722" cy="250" r="26" fill="#22d3ee" opacity="0.5"/>
+    <circle cx="878" cy="250" r="66" fill="#111a22" stroke="#465765" stroke-width="5"/>
+    <circle cx="878" cy="250" r="26" fill="#ef4444" opacity="0.48"/>
+  </g>
+
+  <g filter="url(#softShadow)">
+    <path d="M250 795l145-315h810l145 315z" fill="url(#console)" stroke="#354350" stroke-width="5"/>
+    <path d="M410 535h780l60 130H350z" fill="#18212a" opacity="0.82"/>
+    <g opacity="0.92">
+      <rect x="445" y="570" width="100" height="18" rx="9" fill="#22d3ee" opacity="0.65"/>
+      <rect x="445" y="613" width="150" height="12" rx="6" fill="#6b7785"/>
+      <rect x="650" y="570" width="100" height="18" rx="9" fill="#ef4444" opacity="0.55"/>
+      <rect x="650" y="613" width="150" height="12" rx="6" fill="#6b7785"/>
+      <rect x="855" y="570" width="100" height="18" rx="9" fill="#22d3ee" opacity="0.55"/>
+      <rect x="855" y="613" width="150" height="12" rx="6" fill="#6b7785"/>
+      <rect x="1060" y="570" width="100" height="18" rx="9" fill="#f59e0b" opacity="0.5"/>
+      <rect x="1060" y="613" width="150" height="12" rx="6" fill="#6b7785"/>
+    </g>
+    <g fill="#0d141a" stroke="#5d6b77" stroke-width="4">
+      <circle cx="500" cy="705" r="32"/>
+      <circle cx="640" cy="705" r="32"/>
+      <circle cx="780" cy="705" r="32"/>
+      <circle cx="920" cy="705" r="32"/>
+      <circle cx="1060" cy="705" r="32"/>
+    </g>
+    <g stroke="#22d3ee" stroke-width="7" stroke-linecap="round" opacity="0.72">
+      <path d="M470 760h86M610 760h86M750 760h86M890 760h86M1030 760h86"/>
+    </g>
+  </g>
+
+  <g filter="url(#softShadow)">
+    <path d="M665 502c-90-64-108-171-44-245" fill="none" stroke="#657584" stroke-width="15" stroke-linecap="round"/>
+    <rect x="565" y="292" width="82" height="154" rx="41" fill="#111820" stroke="#a1acb8" stroke-width="8"/>
+    <path d="M585 330h42M585 362h42M585 394h42" stroke="#22d3ee" stroke-width="6" stroke-linecap="round" opacity="0.76"/>
+    <path d="M935 502c90-64 108-171 44-245" fill="none" stroke="#657584" stroke-width="15" stroke-linecap="round"/>
+    <rect x="953" y="292" width="82" height="154" rx="41" fill="#111820" stroke="#a1acb8" stroke-width="8"/>
+    <path d="M973 330h42M973 362h42M973 394h42" stroke="#ef4444" stroke-width="6" stroke-linecap="round" opacity="0.7"/>
+  </g>
+
+  <g opacity="0.4">
+    <path d="M1320 70c80 120 80 240 0 360" fill="none" stroke="#22d3ee" stroke-width="5" stroke-linecap="round"/>
+    <path d="M1365 35c105 160 105 320 0 480" fill="none" stroke="#22d3ee" stroke-width="4" stroke-linecap="round"/>
+    <path d="M280 70c-80 120-80 240 0 360" fill="none" stroke="#ef4444" stroke-width="5" stroke-linecap="round"/>
+    <path d="M235 35c-105 160-105 320 0 480" fill="none" stroke="#ef4444" stroke-width="4" stroke-linecap="round"/>
+  </g>
+</svg>
diff --git a/db/config.php b/db/config.php
index 8ba6537..111072e 100644
--- a/db/config.php
+++ b/db/config.php
@@ -1,9 +1,13 @@
 <?php
-// Generated by setup_mariadb_project.sh — edit as needed.
-define('DB_HOST', '127.0.0.1');
-define('DB_NAME', 'app_39417');
-define('DB_USER', 'app_39417');
-define('DB_PASS', 'f40a485e-1ef5-4d43-b331-12c2dd45930f');
+// Generated by setup_mariadb_project.sh — database password must come from process env.
+define('DB_HOST', getenv('DB_HOST') ?: '127.0.0.1');
+define('DB_NAME', getenv('DB_NAME') ?: 'app_39417');
+define('DB_USER', getenv('DB_USER') ?: 'app_39417');
+define('DB_PASS', getenv('DB_PASS') ?: '');
+
+if (DB_PASS === '') {
+  throw new RuntimeException('DB_PASS environment variable is not set.');
+}
 
 function db() {
   static $pdo;
diff --git a/index.php b/index.php
index b69b6f7..a631116 100644
--- a/index.php
+++ b/index.php
@@ -202,7 +202,7 @@ $assetVersion = (string) max(@filemtime(__DIR__ . '/assets/css/custom.css') ?: t
       </div>
       <div class="row g-4">
         <div class="col-xl-8">
-          <div class="panel p-3 p-md-4">
+          <div class="panel radio-player-panel p-3 p-md-4">
             <div class="ratio ratio-16x9 radio-player-shell">
               <iframe src="<?= h($playerUrl) ?>" title="Reproductor de Lili Records Radio" loading="lazy" allow="autoplay; encrypted-media" referrerpolicy="strict-origin-when-cross-origin"></iframe>
             </div>