* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 }
 
 body {
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 background: #f8f9fa;
 min-height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 20px;
 color: #333;
 }
 
 .compact-container {
 width: 100%;
 max-width: 500px;
 background: white;
 border-radius: 24px;
 padding: 40px 30px;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
 border: 1px solid #eaeaea;
 }
 
 .header {
 text-align: center;
 margin-bottom: 35px;
 }
 
 .header h1 {
 font-size: 2.2rem;
 margin-bottom: 8px;
 color: #2c3e50;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 12px;
 }
 
 .header p {
 color: #666;
 font-size: 1rem;
 line-height: 1.4;
 }
 
 .stations-list {
 display: flex;
 flex-direction: column;
 gap: 16px;
 margin-bottom: 30px;
 }
 
 .station-item {
 background: #f8f9fa;
 border-radius: 18px;
 padding: 22px;
 cursor: pointer;
 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 border: 2px solid transparent;
 display: flex;
 align-items: center;
 gap: 18px;
 position: relative;
 overflow: hidden;
 }
 
 .station-item:hover {
 background: #f0f2f5;
 transform: translateY(-3px);
 border-color: #e0e0e0;
 box-shadow: 0 8px 20px rgba(0,0,0,0.06);
 }
 
 .station-item:active {
 transform: translateY(0);
 }
 
 .station-icon {
 font-size: 2.8rem;
 flex-shrink: 0;
 width: 70px;
 height: 70px;
 background: white;
 border-radius: 16px;
 display: flex;
 align-items: center;
 justify-content: center;
 border: 1px solid #eaeaea;
 box-shadow: 0 4px 8px rgba(0,0,0,0.03);
 }
 
 .station-info {
 flex: 1;
 text-align: left;
 }
 
 .station-info h3 {
 font-size: 1.4rem;
 margin-bottom: 6px;
 font-weight: 600;
 color: #2c3e50;
 }
 
 .station-info p {
 font-size: 0.92rem;
 color: #666;
 line-height: 1.4;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
 }
 
 .play-indicator {
 color: #667eea;
 font-size: 1.4rem;
 opacity: 0;
 transform: translateX(-10px);
 transition: all 0.3s ease;
 background: white;
 width: 40px;
 height: 40px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 border: 1px solid #eaeaea;
 }
 
 .station-item:hover .play-indicator {
 opacity: 1;
 transform: translateX(0);
 box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
 }
 
 .footer {
 text-align: center;
 padding-top: 25px;
 border-top: 1px solid #eaeaea;
 font-size: 0.85rem;
 color: #888;
 line-height: 1.6;
 }
 
 .footer p {
 margin-bottom: 10px;
 }
 
 .footer-copyright {
 margin-top: 15px;
 padding-top: 15px;
 border-top: 1px solid #f0f0f0;
 font-size: 0.8rem;
 color: #aaa;
 }
 
 .live-badge {
 position: absolute;
 top: 12px;
 right: 12px;
 background: linear-gradient(135deg, #667eea, #764ba2);
 color: white;
 font-size: 0.7rem;
 padding: 4px 10px;
 border-radius: 12px;
 font-weight: bold;
 }
 
 /* Эффект нажатия */
 .ripple {
 position: absolute;
 border-radius: 50%;
 background: rgba(102, 126, 234, 0.1);
 transform: scale(0);
 animation: ripple 0.6s linear;
 pointer-events: none;
 }
 
 @keyframes ripple {
 to {
 transform: scale(4);
 opacity: 0;
 }
 }
 
 /* Специфичные цвета для станций */
 .station-item:nth-child(1) .station-icon {
 color: #667eea;
 background: linear-gradient(135deg, #f5f7ff, #e8ebff);
 }
 
 .station-item:nth-child(2) .station-icon {
 color: #764ba2;
 background: linear-gradient(135deg, #f9f5ff, #f0e8ff);
 }
 
 @media (max-width: 480px) {
 .compact-container {
 padding: 30px 20px;
 border-radius: 20px;
 }
 
 .header h1 {
 font-size: 1.9rem;
 }
 
 .station-item {
 padding: 18px;
 gap: 15px;
 }
 
 .station-icon {
 font-size: 2.2rem;
 width: 60px;
 height: 60px;
 }
 
 .station-info h3 {
 font-size: 1.3rem;
 }
 
 .station-info p {
 font-size: 0.87rem;
 -webkit-line-clamp: 3;
 }
 
 .footer {
 font-size: 0.8rem;
 }
 
 .footer-copyright {
 font-size: 0.75rem;
 }
 }