.restrict-content { max-width: 600px; margin: 20px auto; font-family: Arial, sans-serif; }
        .restrict-content-error { color: red; }
        .restrict-content-success { color: green; }
        .restrict-content form { margin-top: 20px; }
        .restrict-content label { display: block; margin: 10px 0 5px; }
        .restrict-content input { width: 100%; padding: 8px; margin-bottom: 10px; }
        .restrict-content button { padding: 10px 20px; background: #670000; color: white; border: none; cursor: pointer; }
        .restrict-content button:hover { background: #450000; }
        .restrict-content button:disabled { background: #cccccc; cursor: not-allowed; }
        .restrict-content .retry-button { background: #6c757d !important; color: white !important; cursor: pointer !important; }
        .restrict-content .retry-button:hover { background: #545b62 !important; }
        
        /* Form header with image and message layout */
        .restrict-content-header { 
            display: flex; 
            align-items: flex-start; 
            margin-bottom: 20px; 
            gap: 20px; 
        }
        .restrict-content-image { 
            flex-shrink: 0; 
        }
        .restrict-content-image img { 
            max-width: 150px; 
            height: auto; 
            border-radius: 8px; 
            box-shadow: 0 2px 8px rgba(0,0,0,0.1); 
        }
        .restrict-content-message { 
            flex: 1; 
            line-height: 1.6; 
        }
        .restrict-content-message h1, 
        .restrict-content-message h2, 
        .restrict-content-message h3 { 
            margin-top: 0; 
        }
        .restrict-content-message p:first-child { 
            margin-top: 0; 
        }
        .restrict-content-message p:last-child { 
            margin-bottom: 0; 
        }
        
        /* Responsive header layout */
        @media (max-width: 600px) { 
            .restrict-content-header { 
                flex-direction: column; 
                text-align: center; 
            }
            .restrict-content-image img { 
                max-width: 120px; 
                margin: 0 auto; 
            }
        }
        
        
        
        /* DearFlip loading and error states */
        .df-loading {
            background: rgba(255,255,255,0.9);
            text-align: center;
            padding: 50px;
        }
        
        .df-error {
            background: #f8d7da;
            color: #721c24;
            padding: 20px;
            text-align: center;
            border-radius: 4px;
            margin: 20px;
        }
        
        .song-soul-container {
            position: relative;
            height: calc(100% - 40px) !important;
           
        }
        
        /* Force DFlip to respect container height */
         .song-soul-container .df-app {
            height: calc(100vh - 140px) !important;
            max-height: calc(100vh - 140px) !important;
        }